@charset "UTF-8";
/*==============================
 =GENERAL STYLES 
================================*/
.clear {
	clear:both;
}
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix {
  display: inline-block;
}
/* start commented backslash hack \*/
* html .clearfix { 
  height: 1%;
}
.clearfix { 
  display: block; 
}
/* close commented backslash hack */

/* Text meant only for screen readers */
.screen-reader-text,
.assistive-text {
	position: absolute !important;
	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
	clip: rect(1px, 1px, 1px, 1px);
}
/*==============================
 =LAYOUT
================================*/
html,
body {
  margin: 0 auto;
  width: 100vw;
  height: 100vh;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {
	background: #fff;
  padding: 0px;
}
body {
  font-family: 'Poppins', sans-serif;
	background: #eee;
  padding: 40px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#wrapper {
  width: 100%;
  height: 100%;
  padding: 20px 40px;
  border: 6px double #666;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
header {
	margin: 32vh auto 0;
}
header.vertical-align-2 {
  margin: 24vh auto 0;
}
footer {
  position: absolute;
  padding: 20px 40px 0px;
  left: 0px;
  right: 0px;
  bottom: 55px;
  text-align: center;
}
.mhi-logo {
  position: absolute;
  top: 70px;
  left: 0px;
  right: 0px;
  margin: 0 auto;
  text-align: center;
  transition: all 200ms ease-out;
}
.mhi-logo img {
  width: 230px;
  height: auto;
  transition: all 200ms ease-out;
}
.mhi-logo:hover img {
  width: 260px;
}
/*==============================
 =TEXT
================================*/
h1, h2 {
	margin: 0px auto 10px;
	color: #666;
	font-family: 'Poppins', sans-serif;
	text-align: center;
}
h1 {
	font-size: 80px;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
}
h2 {
	font-size: 40px;
}
p {
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
  font-weight: 200;
  color: #333;
  margin: 34px auto 40px;
  text-align: center;
}
footer p {
	text-align: center;
}
small {
	font-size: 70%;
}
a {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #555;
  text-decoration: none;
  transition: all 100ms ease-out;
}
a:hover {
  color: #333;
}
.button {
  padding: 13px 20px;
  margin: 10px auto;
  display: inline-block;
  border: 1px solid #aaa;
  border-radius: 5px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,969696+100&0+0,0.65+100 */
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(150,150,150,0.65) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(150,150,150,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(150,150,150,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6969696',GradientType=0 ); /* IE6-9 */
  transition: all 200ms ease-out;
  -webkit-box-shadow: 0 1px 14px 0 rgba(0,0,0,.1);
  box-shadow: 0 1px 14px 0 rgba(0,0,0,.1);
}
.button:hover {
  font-size: 20px;
  padding: 18px 26px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,7a7a7a+100&0+0,0.65+100 */
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(122,122,122,0.65) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(122,122,122,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(122,122,122,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a67a7a7a',GradientType=0 ); /* IE6-9 */
  -webkit-box-shadow: 0 1px 14px 0 rgba(0,0,0,.3);
  box-shadow: 0 2px 18px 2px rgba(0,0,0,.4);
}
.button:active {
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#7a7a7a+0,000000+100&0.65+0,0+100 */
  background: -moz-linear-gradient(top,  rgba(122,122,122,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  rgba(122,122,122,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  rgba(122,122,122,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a67a7a7a', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
  -webkit-box-shadow: inset 0 1px 14px 0 rgba(0,0,0,.3);
  box-shadow: inset 0 2px 18px 2px rgba(0,0,0,.4);
}
/*==============================
 =RESPONSIVE
================================*/
@media only screen and (max-width: 1024px) {
  body {
    padding: 20px;
  }
  #wrapper {
    padding: 20px;
  }
  .mhi-logo {
    top: 50px;
  }
  footer {
    bottom: 0px;
  }
  h1 {
    font-size: 50px;
  }
  h2 {
    font-size: 24px;
  }
  p {
    font-size: 18px;
  }
}