@charset "utf-8";
/* CSS Document */
/*--------------------------*/
/*basic setup*/
/*--------------------------*/
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html{
	background-color: #fff;
	color: #555;
	font-family: 'lato','arial','san-serif';
	font-size: 20px;
	font-weight: 300;
	text-rendering: optimizeLegibility;
}
.clearfix{zoom: 1}
.clearfix:after{
	content: '.';
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
}
	


/*---------reusable component----------------*/
.row{
	max-width: 100;
	margin: 0px, auto;
}
section{
	padding: 30px 0px;
	
}
.box{
	padding-left: 80px;
}
.box p{
	font-size: 90%;
	line-height: 145%;
	font-weight: 400;
}
/*---------headings-------------*/
h1{
	margin: 0;
	margin-bottom: 20px;
	color: #606060;
	font-size: 240%;
	word-spacing: 4px;
	font-weight: 400;
	
		
}	
	
h2{
	word-spacing: 2px;
	font-size: 180%;
	margin-top: 2.5%;
	font-weight: bold;
	margin-bottom: 40px;
	
}	
	
h1,h2,h3{
	letter-spacing: 1px;
	text-transform:uppercase;
}	
	
h3{
	padding: 1%;
	
}

.logo{
	height: 100px;
	width: auto;
	float: left;
	margin: 20px 40px;
	
}


/*--------------------------*/
/*header*/
/*--------------------------*/
.main-nav{

list-style: none;
position: absolute;
	top: 6.5%;
	right: 6%;
	transform: translate(-30, -100);
font-size: 100%;
	
	
}
.main-nav li{

	display: inline-block;
	
	
}
.main-nav li a:link,
.main-nav li a:visited{
	padding: 8px 0;
	color: #606060;
	text-decoration: none;	
transition: border-bottom 0.2s;
	
}
header{

	background-image: url("img/MCHS Backgrounds Mx.png");
	background-size: cover;
	background-position:center;
	height: 100vh;
	width: 100%;
	background-attachment: fixed;
}
.hero-text-box{

	position: absolute;
	width: 1140px;
	top: 45%;
	left: 30%;
	transform: translate(-50%, -30%);
	padding-left: 100px;
}




/*--------------------------*/
/*footer*/
/*--------------------------*/

.pop-main{
	width: 8%;
	height: 5%;
	position: absolute;
	left: 500px;
	bottom: 40px;
}
.pop-main-english{
	width: 8%;
	height: 5%;
	position: absolute;
	left: 30%;
	bottom: 4.5%;
}
.footer{
	
	height: 8%;
	position: absolute;
	left: 100px;
	bottom: 20px;	
}

.footer-english{

	height: 8%;
	position: absolute;
	left: 100px;
	bottom: 20px;	
}