@charset "UTF-8";

/*GLOBAL STYLES*/

body {
	background-color:#ECC4DC; 
}

#main {
	width: 100%;
	min-width: 320px;
	max-width: 1500px;
}

#logo {
	width: 50%;
	margin: 6.25em auto;
	
}

#logo img {
	width: 100%;
}

#stream {
	width: 85%;
	margin: 0 auto 0 auto;
}

#stream img {
	width: 100%;
}

#vods {
	width: 100%;
	margin-top: 3.4375em;
	margin-bottom: 9.4em;
}

.thumbnails {
	width: 25%;
	float: left;
}

.thumbnails img {
	width: 100%;
}


#chatbox {
	width: 85%;
	margin: 0 auto 7.1875em auto;
	position: relative;
}

#chat {
	position: absolute;
	width: 100%;
	z-index: -1;
}

#chat img {
	width: 100%;
}

@media (min-width: 380px){
	
	#vods {
	margin-top: 4.4375em;
	margin-bottom: 11.5em;
	}
	
	#chatbox {
		margin-bottom: 10em;
	}
}

@media (min-width: 420px){
	
	#logo {
		width: 45%;
		margin-top: 7.5em;
		margin-bottom: 7.5em;
	}
	
	#logo img {
		width: 100%;
	}
	
	#vods {
	margin-top: 5.4em;
	margin-bottom: 12.5em;
	}
	
	#chatbox {
		margin-bottom: 11em;
	}
}

@media (min-width: 490px){
	
	#logo {
		width: 40%;
		margin-top: 8em;
		margin-bottom: 8em;
	}
	
	#logo img {
		width: 100%; 
	}
	
	#stream {
		width: 85%;
	}
	
	#stream img {
		width: 100%;
	}
	
	#vods {
	margin-top: 6em;
	margin-bottom: 14.5em;
	}
	
	#chatbox {
		width: 85%;
		margin-bottom: 13.25em;
	}
	
	#chat {
		width: 100%;
	}
	
	#chat img {
		width: 100%;
	}
}

@media (min-width: 580px){
	#logo {
		width: 38%;
		margin-top: 8.75em;
		margin-bottom: 9.75em;
	}
	
	#logo img {
		width: 100%;
	}
	
	#stream {
		width: 85%;
	}
	
	#stream img {
		width: 100%;
	}
	
	#vods {
	margin-top: 6.5em;
	margin-bottom: 16.5em;
	}
	
	#chatbox {
		width: 85%;
		margin-bottom: 13.25em;
	}
	
	#chat {
		width: 100%;
	}
	
	#chat img {
		width: 100%;
	}
}

@media (min-width: 650px){
	
	#chatbox {
		margin-bottom: 14.25em;
	}
}

@media (min-width : 715px ){
	#logo {
		width: 35%;
		margin-top: 9.75em;
	}
	
	#logo img {
		width: 100%;
	}
	
	#stream {
		width: 85%;
	}
	
	#vods {
	margin-top: 8em;
	margin-bottom: 20em;
	}
	
	#chatbox {
		margin-bottom: 15.25em;
	}
}

/*TABLET SIZE*/
@media (min-width: 768px){
	
	#logo {
		width: 30%;
		margin-top: 8.4375em;
		margin-bottom: 9.375em;
	}
	
	#logo img {
		width: 100%;
	}
	
	#stream {
		width: 80%;
	}
	
	#stream img {
		width: 100%;
	}
	
	#vods {
	margin-top: 8em;
	margin-bottom: 21em;
	}
	
	#chatbox {
		width: 80%;
		margin-bottom: 14.25em;
	}
	
	#chat {
		width: 100%;
	}
	
	#chat img {
		width: 100%;
	}
}

@media (min-width: 900px){
	
	#logo {
		margin-top: 11.25em;
		margin-bottom: 11.25em;
	}
	
	#stream {
		width: 78%;
	}
	
	#stream img {
		width: 100%;
	}
	
	#vods {
	margin-top: 9.5em;
	margin-bottom: 24em;
	}
	
	#chatbox {
		width: 78%;
		margin-bottom: 15.75em;
	}
	
	#chat {
		width: 100%;
	}
	
	#chat img {
		width: 100%;
	}
}

@media (min-width: 1050px){
	
	#logo {
		width: 30%;
		margin-top: 12.25em;
		margin-bottom: 12.25em;
	}
	
	#logo img {
		width: 100%;
	}
	
	#stream {
		width: 70%;
	}
	
	#stream img {
		width: 100%;
	}
	
	#vods {
	margin-top: 10em;
	margin-bottom: 27em;
	}
	
	#chatbox {
		width: 70%;
		margin-bottom: 16.75em;
	}
	
	#chat {
		width: 100%;
	}
	
	#chat img {
		width: 100%;
	}
}

@media (min-width: 1130px){
	
	#logo {
		width: 30%;
		margin-top: 11em;
	}
	
	#logo img {
		width: 100%;
	}
	
	#chatbox {
		width: 35%;
		float: left;
		margin-top: -33em;
		margin-left: 1.5em;
	}
	
	#chat {
		width: 100%;
	}
	
	#chat img {
		width: 100%;
	}
	
	#stream {
		width: 60%;
		float: right;
		margin-top: 5em;
	}
	#stream img {
		width: 100%;
	}
	
	#vods {
	float: right;
	width: 60%;
	margin-top: 2em;
	}
}

/*DESKTOP SIZE*/
@media (min-width: 1280px){
	
	#logo {
		width: 30%;
		margin-top: 11.25em;
	}
	
	#logo img {
		width: 100%;
	}
	
	#chatbox {
		width: 35%;
		float: left;
		margin-top: -38em;
		margin-left: 1.5em;
	}
	
	#chat {
		width: 100%;
	}
	
	#chat img {
		width: 100%;
	}

	#stream {
		width: 60%;
		float: right;
		margin-top: 10em;
		margin-right: 1em;
	}
	
	#stream img {
		width: 100%;
	}
	
	#vods {
		margin-right: 1em;
	}
}

@media (min-width: 1355px){
	
	#chatbox {
		width: 33%;
		margin-top: -38em;
		margin-left: 2em;
	}
	
	#stream {
		width: 58%;
		margin-top: 8.5em;
		margin-right: 2em;
	}
	
	#vods {
		width: 58%;
		margin-right: 2em;
	}
	
}

@media (min-width: 1500px){
	
	#logo {
		width: 28%;
	}
	
	#logo img {
		width: 100%;
	}
	
	#chatbox {
		width: 33%;
		margin-top: -40em;
		margin-left: 3em;
	}
	
	#stream {
		width: 58%;
		margin-top: 6.5em;
		margin-right: 3em;
	}

	#vods {
		width: 58%;
		margin-right: 3em;
	}

}