body { background: #F3F4F5; }

.wrapper { padding: 0 4rem; }

form { margin: 2rem 0 0 0; }

section { position: relative; z-index: 3; }
article { /*max-width: 50%;*/ }

header { 
	background-color: black;
    background-image: url('images/bg.svg');
    background-position: top left;
    background-repeat: no-repeat;
    background-size: cover;

	/*background: linear-gradient(to bottom, #021B79, #2A37AD);*/
	overflow-x: hidden;
	color: white;
}
h1 { font-size: 4rem; line-height: 5rem; }
h2 { font-size: 2rem; }
header article { margin: 5rem 0; }

header h1:first-child { margin: -0.2rem 0 -1rem 0; }

header .rating_link { display: none; }

#main { position: absolute; top: 6rem; margin-right: 0px; right: 2rem; text-align: right; z-index: 10; }
#main .cat {  right: 0rem; /*height: 39rem;*/ height: 35rem; position: relative; top: 0rem; }
#main video.cat { display: none; }


body#oops { background: #F3F4F5; }
#oops h2 { margin: 2rem 0 2rem 0; }
#oops h1:nth-child(5) { margin-top: -1rem; }

#oops #main { top: 15%; height: 75%; /*margin-top: -20rem;*/ }
#oops #main .cat { height: 100%;  }



@media (max-height: 700px){
	
}






@media (max-width: 1799px){
	
}
@media (max-width: 1699px){
}
@media (max-width: 1599px){
	
}

@media (max-width: 1399px){
	#main { right: 0rem; }
}

@media (max-width: 1199px){
	#main { right: -2rem; }
}

@media (max-width: 1099px){
	#main { right: -5rem; }
}


@media (max-width: 999px), (max-height: 700px){
	article { max-width: 70%; }
	header article { margin: 3rem 0 4rem 0; }
	header p br { display: none; }
	
	header h1:first-child { margin: -0.2rem 0 -1.5rem 0; }
	#oops h1:nth-child(3) { margin-bottom: 0; }
	#oops h1:nth-child(5) { margin-top: -1.5rem; }
	
	h1 { font-size: 3.3rem; }
	h2 { font-size: 1.6rem; }
	
	/*#main { right: -7rem; }*/
}

@media (max-width: 899px){
	#main .cat { height: 33rem; }
}

@media (max-width: 799px){
	h1 { font-size: 3rem; }
	h2 { font-size: 1.4rem; }

	article { max-width: 100%; }
	#main { position: absolute; top: 27rem; text-align: center; width: 100%; right: 0; }
	#main .cat,
	#oops #main .cat	
		{ right: auto; height: 26rem; top: 0; }
	#main img.cat { display: none; }
	#main video.cat { display: inline-block; margin: 0 auto; }
	
	#oops #main { position: relative; top: 0rem; margin-bottom: 5rem; margin-top: 0; }
	
	p br { display: none; }

}

@media (max-width: 630px), (max-height: 500px){
	header .rating_link { display: inline-block; }
}

@media (max-width: 630px){
	.wrapper { padding: 0 2rem; }
	
	article { max-width: 100%; }
	header > div { min-height: 42rem; }
	header article { margin: 3rem 0; }
	.about { padding-top: 13rem; }



}


@media (max-width: 499px){
	
	.about { padding-top: 11rem; }
	/*#main { top: 31rem; }*/
	#main .cat,
	#oops #main .cat	
		{ height: 24rem; }
	
	
}

@media (max-width: 420px){
	h1 { font-size: 2.4rem; line-height: 3.9rem;  }
	h2 { margin-top: 1rem; }
	
}
@media (max-width: 350px){
	.wrapper { padding: 0 1rem; }	
}
