html {
     font-size: 10px !important;
     color: #041029;
}
 body {
     font-family: 'Source Sans Pro', sans-serif;
     font-weight: 300;
     font-style: normal;
     overflow: hidden;
     color: #041029;
     background: #fff;
     -webkit-font-smoothing: antialiased;
}
 h1,p {
     font-family: 'Source Sans Pro', sans-serif;
     font-weight: normal;
     color: #041029;
}
 h1 {
     font-size: 6rem;
}
 p {
     font-size: 1.4rem;
}
 a, a:hover, a:focus {
     cursor: pointer;
     -webkit-transition: all 300ms ease;
     -o-transition: all 300ms ease;
     transition: all 300ms ease;
     text-decoration: none;
}
 a:hover {
     color: white;
}
 @media (max-width:700px) {
     html {
         font-size: 8px !important;
    }
}
 @media (max-width:500px) {
     html {
         font-size: 6px !important;
    }
}
 @media (max-width:350px) {
     html {
         font-size: 5px !important;
    }
}
 @media (orientation:landscape) and (max-height:420px) {
     html {
         font-size: 8px !important;
    }
}
 .hero {
     position: absolute;
     z-index: 1;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
 .hero .animation-container {
     -webkit-transition: .5s ease;
     -o-transition: .5s ease;
     transition: .5s ease;
}
 .hero .animation-container.animation-fade {
     opacity: 0;
}
 .hero .animation-container.animation-fade.run-animation {
     opacity: 1;
}
 .hero .animation-container.animation-fade-up {
     -webkit-transform: translateY(10vh);
     -ms-transform: translateY(10vh);
     transform: translateY(10vh);
     opacity: 0;
}
 .hero .animation-container.animation-fade-up.run-animation {
     -webkit-transform: translateY(0);
     -ms-transform: translateY(0);
     transform: translateY(0);
     opacity: 1;
}
 .hero .animation-container.animation-fade-down {
     -webkit-transform: translateY(-10vh);
     -ms-transform: translateY(-10vh);
     transform: translateY(-10vh);
     opacity: 0;
}
 .hero .animation-container.animation-fade-down.run-animation {
     -webkit-transform: translateY(0);
     -ms-transform: translateY(0);
     transform: translateY(0);
     opacity: 1;
}
 .hero .animation-container.animation-fade-left {
     -webkit-transform: translateX(10vh);
     -ms-transform: translateX(10vh);
     transform: translateX(10vh);
     opacity: 0;
}
 .hero .animation-container.animation-fade-left.run-animation {
     -webkit-transform: translateX(0);
     -ms-transform: translateX(0);
     transform: translateX(0);
     opacity: 1;
}
 .hero .animation-container.animation-fade-right {
     -webkit-transform: translateX(-10vh);
     -ms-transform: translateX(-10vh);
     transform: translateX(-10vh);
     opacity: 0;
}
 .hero .animation-container.animation-fade-right.run-animation {
     -webkit-transform: translateX(0);
     -ms-transform: translateX(0);
     transform: translateX(0);
     opacity: 1;
}
 .hero .front-content {
     position: absolute;
     z-index: 2;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
 .hero .front-content .container-mid {
     position: absolute;
     top: 40%;
     left: 0;
     width: 100%;
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
     text-align: center;
}

@media (orientation:landscape) and (max-height:500px) {
  .hero .front-content .container-mid {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      text-align: center;
 }
}

 .hero .front-content .container-mid img.logo {
     display: block;
     width: 25em;
     margin: 0 auto;
}
 .hero .front-content .container-mid h1 {
     font-weight: bold;
     line-height: 1.1em;
     margin-top: .5em;
     margin-bottom: .46em;
     letter-spacing: .025em;
}
 .hero .front-content .container-mid p.subline {
     font-size: 3rem;
     line-height: 1.4em;
     max-width: 16em;
     margin-right: auto;
     margin-bottom: 1.3em;
     margin-left: auto;
     letter-spacing: .025em;
}
 .hero .front-content .container-mid .mail {
     font-size: 2.2rem;
     font-weight: bold;
     line-height: 2.4em;
     position: relative;
     display: inline-block;
     overflow: hidden;
     padding: 0 1.5em;
     cursor: pointer;
     -webkit-transition: all .1s linear;
     -o-transition: all .1s linear;
     transition: all .1s linear;
     letter-spacing: .025em;
     color: #004fff;
     border: 3px solid #004fff;
     border-radius: 4em;
     background: none;
     color: #004fff;
}
 .hero .front-content .container-mid .mail:hover {
     color: white;
     background: #004fff;
}
 .hero .front-content .footer {
     position: absolute;
     bottom: 10px;
     width: 100%;
     text-align: center;
}

@media (orientation:landscape) and (max-height:500px)
{
    .hero .front-content .footer
    {
        display: none;
    }
}