html, body {
  height:100%;
  font-family:'Comfortaa', Arial;
  background:#f1f2f4;
}
.mainWrap, .main, .mainContent, .mainLeftPart, .mainRightPart {
  height:100%;
}
.mainLeftPart, .mainRightPart {
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  position:relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  align-items:center;
  padding:1em;
  
}
.mainLeftPart:after, .mainRightPart:after {
  content:'';
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  z-index:5;
}
.btnArea {
  position:relative;
  z-index:10;
  text-align:center;
  max-width:600px;
  color:#fff;
}
h1 {
  font-size:1.5em;
  font-weight:700;
  margin-bottom:1em;
  line-height:normal;
}
p {
  font-size:1em;
  margin-bottom:1em;
  font-weight:700;
  line-height:1.5em;
}
.btnArea a {
  display:inline-block;;
  padding:1em 2em;
  background:#0099da;
  color:#fff;
  font-weight:700;
  border-radius:4px;
  text-decoration:none; 
  font-size:14px;
}
.btnArea a:hover {
  background:#0068aa;
}
footer {
  display:block;
  text-align:center;
  font-size:12px;
  padding:2em;
}
@media (max-width:768px) {
  .mainWrap, .main, .mainContent, .mainLeftPart, .mainRightPart {
    height:auto;
  }
  .mainLeftPart, .mainRightPart {
    padding-top:3em;
    padding-bottom:3em;
    margin-bottom:7em;
  }
  .btnArea a {
    position:relative;
    transform:translateY(7.5em);
  }
}