html, body {
      margin: 0%;
      padding: 0%;
      width: 100%;
      height: 100vh;
      background: #121212;
}

body {
      background: url(hero.jpg) no-repeat 50% 50%;
      background-size: cover;
}

img {
      width: 100%;
}

.logo {
      position: fixed;
      font-family: Poppins;
      line-height: 80px;
      margin-left: 2em;
      color: #fff;
      font-size: 15px;
      letter-spacing: 3px;
      font-weight: bold;
      text-transform: uppercase;
      z-index: 1;
}

.logo ion-icon {
      color: #6adb9d;
      margin-right: 7px;
      position: relative;
      top: 1px;
      z-index: 1;
}

.contact {
      position: fixed;
      color: rgb(124, 124, 124);
      font-size: 12px;
      letter-spacing: 2px;
      font-family: Poppins;
      right: 100px;
      line-height: 80px;
      z-index: 1;
}

.menu{
      position: fixed;
      color: #6adb9d;
      right: 2em;
      top: 4px;
      line-height: 80px;
      z-index: 1;
}

.menu ion-icon {
      font-size: 24px;
}

.header {
      position: absolute;
      top: 46%;
      left: 32%;
      transform: translate(-50%, -50%);
      z-index: 1;
}

.ml7 {
      position: relative;
      font-weight: 900;
      font-size: 3.7em;
}

.ml7 .text-wrapper {
      position: relative;
      display: inline-block;
      padding-top: 0.2em;
      padding-right: 0.05em;
      padding-bottom: 0.1em;
      overflow: hidden;
}

.ml7 .letter {
      transform-origin: 0 100%;
      display: inline-block;
      line-height: 1em;
}

h1 {
      color: #fff;
      font-family: "Roboto";
      font-weight: bolder !important;
      font-size: 46px !important;
      margin-bottom: 0px;
      text-transform: uppercase !important;
}

#tagline  {
      width: 640px;
}

p {
      color: rgb(95, 95, 95);
      font-weight: 200;
      font-family: "Roboto";
      line-height: 28px;
      margin-top: 0;
      margin-bottom: 0;
}

.buttons {
      margin-top: 40px;
}

button {
      margin-right: 10px !important;
      padding: 14px 30px;
      border: none;
      color: #fff;
      font-size: 12px !important;
      letter-spacing: 4px;
      font-weight: 300;
}

#one {
      background: none;
      border: .3pt solid rgba(255, 255, 255, 0.3);
}

#two {
      background: linear-gradient(135deg, rgb(106, 219, 157) 0%, rgb(23, 167, 88) 100%);;
}

.media {
      position: absolute;
      top: 38%;
      z-index: 1;
      right: 6%
}

.media ul {
      position: absolute;
      list-style: none;
}

.media ul li {
      color: grey;
      padding: 12px 0;
      display: inline-block !important;
}

.bottom-text {
      position: absolute;
      z-index: 1;
      color: grey;
      font-size: 18px;
      font-family: monospace;
      margin-left: 2em;
      bottom: 40px;
}

.copyright {
      position: absolute;
      z-index: 1;
      color: grey;
      font-size: 15px;
      right: 0;
      font-family: Roboto;
      font-weight: 100;
      margin-right: 2em;
      bottom: 40px;   
}

.loading-screen {
      position: absolute;
      width: 100%;
      height: 100vh;
      background: #0a0a0a;
      z-index: 2;
}

.ring {
      margin: 0%;
      padding: 0%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      position: absolute;
      z-index: 2;
      width: 40%;
      opacity: 0.7;    
}

.ringOne img {
      animation: rotateFirstRing 2s linear infinite;
}

.ringTwo img {
      animation: rotateFirstRing 8s linear infinite;
}

@keyframes rotateFirstRing {
      from {
            transform: rotate(0deg);
      }
      to {
            transform: rotate(360deg);
      }
}

@media(max-width: 900px) {

      .loading-screen {
            display: none;
      }
      .ring img {
            display: none;
      }

      .header p, button, .media, h1 {
            display: none;
      }

}