@font-face {
  font-family: 'Cabin';
  src: local('Cabin'), local('Cabin'), url(font/Cabin-Regular.ttf) format('woff');
  /* src: local('Cabin'), local('Cabin'), url(font/Cabin-VariableFont_wdth\,wght.ttf) format('woff'); */
  /* font-style: normal;
  font-weight: 100; */
}

body {
  font-family: 'Cabin';
}

* {
  -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 0;
}

@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:-7486px 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:-7486px 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:-7486px 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:-7486px 0;}
}

.stars, .twinkling, .clouds{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}

.stars {
  background:#000 url(images/stars.png) repeat top center;
  z-index:0;
}

.twinkling{
  background:transparent url(images/twinkling.png) repeat top center;
  z-index:1;

  -moz-animation:move-twink-back 200s linear infinite;
  -ms-animation:move-twink-back 200s linear infinite;
  -o-animation:move-twink-back 200s linear infinite;
  -webkit-animation:move-twink-back 200s linear infinite;
  animation:move-twink-back 200s linear infinite;
}

.clouds {
    background:transparent url(images/clouds7.png) repeat-x center;
    z-index:4;
    top: 0%;

  -moz-animation:move-clouds-back 6s linear infinite;
  -ms-animation:move-clouds-back 6s linear infinite;
  -o-animation:move-clouds-back 6s linear infinite;
  -webkit-animation:move-clouds-back 6s linear infinite;
  animation:move-clouds-back 6s linear infinite;
}



@-webkit-keyframes move-cabine {
    from {
      top:20%;
      left: -20px;
      
    }
    25%{
      top:25%;
      left: 20px;
      
      
    }
    50%{
      top:20%;
      left: 20px; 
    }
    75%{
      top:25%;
      left: -20px;
      zoom:.9;
    }
    to {
      top:20%;
      left: -20px;
      zoom:1;
      z-index: 3;
    }
}

.cabine {
  position:absolute;
  left:0;
  right:0;
  top: 20%;
  z-index: 3;
  width: 400px;
  margin: 0 auto;
  
  -webkit-animation:move-cabine 2.5s ease-in-out infinite;
  
}
.cabine img{
  padding-left: 40px;
  
}

.top, .bot {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  text-align: center;
  color: white;

}

.top{
  text-transform: uppercase;
  top: 7%;
}
.top h1 {
  font-size: 50px;
  color: #c4c4c4;
}  
.bot {
  bottom: 17.4%;
  font-size: 34px;
  color: #727272;
}