@charset "utf-8";
/* CSS Document */

@media only screen and (max-width: 1600px){
    .hero-text-box{
	width: 60%;
	padding-left: 10%;
	font-size: 100%;	
	}
	.pop-main-english{
	width: 10%;
	height: 4%;
	position: absolute;
	left: 35%;
	bottom: 5%;
}
.pop-main{
	width: 12%;
	height: 4%;
	position: absolute;
	left: 30%;
	bottom: 5%;
}
}
@media only screen and (max-width: 1520px){
	.pop-main-english{
	width: 15%;
	height: 6%;
	position: absolute;
	left: 43%;
	bottom: 4%;
}
.pop-main{
	width: 15%;
	height: 6%;
	position: absolute;
	left: 38%;
	bottom: 4%;
}
.hero-text-box{
	width: 55%;
	
	font-size: 80%;	
	top: 48%;	
	}
	h2{
		margin-top: 3.5%;
	}
	.main-nav{
list-style: none;
position: absolute;
	top: 8.5%;
	right: 6%;
font-size: 100%;
	
	
}
/* big tablet to 1200px ( width smaller than 1140px row)*/
@media only screen and (max-width: 1200px){
	
	h2{
		font-size: 150%;
		margin-top: 4.5%;
	}
	h1{
		
		margin-right: 40%;
	}
	.hero-text-box{
	width: 100%;
	padding-left: 25%;
	font-size: 80%;	
	top: 48%;	
	}
	.row{
		padding: 0 2%;
	}
.pop-main{
	width: 12%;
	height: 4%;
	position: absolute;
	left: 40%;
	bottom: 4.5%;
}
.pop-main-english{
	width: 12%;
	height: 4%;
	position: absolute;
	left: 48%;
	bottom: 5.5%;
}	
.footer{
	
	height: 8%;
	position: absolute;
	left: 100px;
	bottom: 10px;	
}

.main-nav{
list-style: none;
position: absolute;
	top: 7%;
	right: 8%;
	transform: translate(-5, -8);
font-size: 100%;
	
	}
}

/* small tablet to big tablet 768 to 1023px*/
@media only screen and (max-width: 1023px){
	body{
		font-size: 16px;
	}
	section{
		padding: 60px 0px;
}
	h2{
		font-size: 120%;
		margin-top: 7%;
	}
	.hero-text-box{
	width: 100%;
	padding-left: 25%;
	font-size: 70%;	
	}
	.row{
		padding: 0 2%;
	}
.pop-main{
	width: 12%;
	height: 4%;
	position: absolute;
	left: 40%;
	bottom: 5%;
}
.pop-main-english{
	width: 15%;
	height: 4%;
	position: absolute;
	left: 50%;
	bottom: 6%;
}		
.footer{
	
	height: 8%;
	position: absolute;
	left: 65px;
	bottom: 10px;	
}

.main-nav{
list-style: none;
position: absolute;
	top: 8.5%;
	right: 10%;
	
font-size: 100%;
	
	
	}	
/* small phone  to small tablet 481pxto 767px*/
@media only screen and (max-width: 767px){
	
	h2{
		margin-right: 20%;
	}
	.hero-text-box{
	width: 100%;
	padding-left: 25%;
	font-size: 70%;	
	}
	.row{
		padding: 0 2%;
	}
.pop-main{
	width: 18%;
	height: 5%;
	position: absolute;
	left: 50%;
	bottom: 4.5;
}
.footer-english{
	
	height: 8%;
	position: absolute;
	left: 5%;
	bottom: 2%;	
	
	}
	.pop-main-english{
	width: 18%;
	height: 5%;
	position: absolute;
	left: 55%;
	bottom: 6%;
}	
	}
	
/* small phone 0 to 480px*/
@media only screen and (max-width: 480px){

	body{
		font-size: 12px;
	}
.hero-text-box{
	width: 100%;
	padding-left: 25%;
	position: absolute;
	top: 55%;	
	font-size: 80%;	
	}
	.row{
		padding: 0 2%;
	}
.pop-main{
	width: 20%;
	height: 5%;
	position: absolute;
	left: 68%;
	bottom: 6%;
}
.pop-main-english{
	width: 20%;
	height: 5%;
	position: absolute;
	left: 70%;
	bottom: 6%;
}		
.footer{

	position: absolute;
	left: 5%;;
	bottom: 2%;
	font-size: 120%;
}
.footer-english{

	position: absolute;
	left: 5%;;
	bottom: 2%;
	font-size: 100%;
}	
header{

	background-image: url("img/MCHS Backgrounds Mx.png");
	background-size: cover;
	background-position:center;
	height: 110vh;
	width: 120%;
	background-attachment: fixed;
}	
.main-nav{
list-style: none;
position: absolute;
	top: 6%;
	right: 5%;
	transform: translate(-5, -8);
font-size: 100%;
	
	}
	.logo{
	height: 15%;
	width: 15%;
	float: left;
	margin: 30px 10px;
	
}
	h2{
		font-size: 140%;
		margin-top: 7.5%;
		margin-right: 20%;
	}
	

	}
	
@media only screen and (max-width: 767px) and (orientation: landscape){
	.logo{
	height: 10%;
	width: 10%;
	float: left;
	margin: 10px 10px;
	
}
	h2{
		font-size: 100%;
		margin-top: 4%;
		margin-right: 20%;
	}	

.main-nav{
list-style: none;
position: absolute;
	top: 7%;
	right: 5%;
	transform: translate(-5, -8);
font-size: 100%
		}
.footer{
    font-size: 90%;
	position: absolute;
	left: 5%;;
	bottom: 7%;
	
	}
	.footer-english{

	position: absolute;
	left: 5%;;
	bottom: 7%;
	font-size: 100%;
}	
	.hero-text-box{
	width: 100%;
	padding-left: 25%;
	position: absolute;
	top: 45%;	
	font-size: 50%;	
	}	
	.pop-main{
	width: 15%;
	height: 7%;
	position: absolute;
	left: 40%;
	bottom: 7.2%;
}
.pop-main-english{
	width: 15%;
	height: 7%;
	position: absolute;
	left: 55%;
	bottom: 7.2%;
}