html, body {
width:100%;
margin: 0;
padding: 0;
}
body {
background: #000 url('//cdn.mizx.co/resources/static/mizxco/20180131_mxhero.jpg') no-repeat top;
background-size: 100%;
background-attachment: scroll;
font-size: 14px;
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
}
  .mxhero {
height:300px;
z-index:-1;
}
  .menubar {
background: rgba(0, 0, 0, 0);
position:sticky;
position: -webkit-sticky;
width:100%;
height:130px;
top:0px;
left:0;right:0;
margin:auto;
display: block;
z-index: 3;
transition: 0.5s ease-in-out;
}
  .sitelogo {
background: url('//cdn.mizx.co/resources/static/mizxco/mainlogo.png') no-repeat center;
background-size: 230px;
width:100%;
height:130px;
display: block;
position: relative;
top:0px;
transition: 0.5s;
}

  .sitelogo:hover {
opacity: 0.8;
}
  .menuitems {
display: none;
}
  .contentbox {
max-width:1200px;
min-height:1000px;
font-size:10px;
position:relative;
left:0;right:0;
top:300px;
margin:auto;
display: block;
}
  .hero {
width:100%;
height:550px;
overflow:hidden;
position: relative;
}
  .herocover {
height:100%;
width:100%;
transition:1.5s;
}
  .herocover.one {
background: url('//cdn.mizx.co/resources/static/mizxco/20180131_hk7s.jpg') no-repeat top / cover;
}
  .herocover.two {
background: url('//cdn.mizx.co/resources/static/mizxco/20180131_apple_cwb.jpg') no-repeat center / cover;
}
  .hero:hover .herocover {
cursor: pointer;
transform: scale(1.09);
transition:1.5s;
}
  .herotitle {
height:100%;
width: calc(100% / 3 - 60px);
font-size:26px;
color: #fff;
padding: 30px 30px 30px;
top: 0px;
overflow: hidden;
position: absolute;
}
  .herotitle.right {
background: rgba(39, 101, 138, 0.95);
float: right;
right:0px;
}

  .herotitle.left {
background: rgba(169, 118, 56, 0.95);
float: left;
left: 0px;
}
  .subtext {
font-size:17px;
line-height:30px;
}

  .consolecover .subtext {
margin-top: 5px;
display: block;
opacity: 0;
}

  .console {
height:350px;
width: calc(100% / 3);
float:left;
display: inline-block;
overflow: hidden;
position:relative;
filter: brightness(0.97);
}

  .console.a {
background: url('//cdn.mizx.co/resources/static/mizxco/20180131_chinese_solutions.jpg') no-repeat top / cover;
}
  .console.b {
background: url('//cdn.mizx.co/resources/static/mizxco/20180131_professional_photography.jpg') no-repeat top / cover;
}
  .console.c {
background: url('//cdn.mizx.co/resources/static/mizxco/20180131_drone_footage.jpg')  no-repeat top / cover;
}
  .console.d {
background: url('//cdn.mizx.co/resources/static/mizxco/20180131_personal_training.jpg')  no-repeat top / cover;
}
  .console.e {
background: url('//cdn.mizx.co/resources/static/mizxco/20180131_web_design.jpg')  no-repeat top / cover;
}
  .console.f {
background: url('//cdn.mizx.co/resources/static/mizxco/20180131_contact_us.jpg')  no-repeat top / cover;
}

  .consolecover {
background: rgba(114, 140, 107, 0.8);
height:100%;
width: -webkit-fill-available;
padding: 0px 25px 0px 25px;
font-size:20px;
color: #fff;
line-height:15px;
top: 0px;
position: absolute;
}

  .consolecover p {
line-height: 35px;
text-align: left;
}

  #cover2 {
background: rgba(52, 138, 50, 0.35);
}
  #cover3 {
background: rgba(140, 44, 102, 0.35);
}
  #cover4 {
background: rgba(171, 102, 54, 0.35);
}
  #cover5 {
background: rgba(206, 75, 75, 0.35);
}
  #cover6 {
background: rgba(22, 86, 132, 0.35);
}
  #cover7 {
background: rgba(43, 150, 130, 0.35);
}

  .console:hover #cover2 {
background: rgba(52, 138, 50, 0.95);
}
  .console:hover #cover3 {
background: rgba(140, 44, 102, 0.95);
}
  .console:hover #cover4 {
background: rgba(171, 102, 54, 0.95);
}
  .console:hover #cover5 {
background: rgba(206, 75, 75, 0.95);
}
  .console:hover #cover6 {
background: rgba(22, 86, 132, 0.95);
}
  .console:hover #cover7 {
background: rgba(43, 150, 130, 0.95);
}

  .console:hover .consolecover {
top:0px;
height:100%;
padding: 50px 20px 25px;
margin-top:0px;
line-height:5px;
cursor: pointer;
transition:.2s;
}

  .console:hover .consolecover p {
font-size: 25px;
margin-top: 0px;
text-align: left;
}

  .console:hover .consolecover .subtext {
opacity: 1;
}

  .console:hover {
transform: scale(1.09);
cursor: pointer;
z-index: 2;
filter: none;
transition:.7s;
}
  .footer {
margin-top: 700px;
width: 100%;
height: 20px;
font-size:15px;
color:#888;
height:100px;
text-align:center;
}

a:link {text-decoration: none; color:inherit;}
a:visited {text-decoration: none; color:inherit;}
a:hover {text-decoration: none; opacity:0.8;}
a:active {color: #fff; color:inherit;}