/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.23, autoprefixer: v9.7.3) */

/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.23, autoprefixer: v9.7.3) */

@font-face{
    font-family: 'Lobster';
    src: url('../fonts/Lobster-Regular.ttf');
}
@font-face{
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium.ttf');
}
@font-face{
    font-family: 'Roboto-Light';
    src: url('../fonts/Roboto-Light.ttf');
}

/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.23, autoprefixer: v9.7.3) */

/*@-webkit-keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}
*/
@-webkit-keyframes MoveUpDown {
  0%, 100% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px); ;
  }
  50% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes MoveUpDown {
  0%, 100% {
    -webkit-transform: translateY(10px);
            transform: translateY(10px); ;
  }
  50% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}

/*


.tracking-in-expand-fwd {
  -webkit-animation: tracking-in-expand 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
          animation: tracking-in-expand 1.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}*/

html,body{
   margin: 0;   
    text-align: center;
    color: #D7D7B3;
}

.top-container{

  background-image: url("../img/top/topbackground.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #464646;
  width: 100%;
  height: 100vh;
}



#titulo{
    padding-top: 20vh;
   /* padding-bottom: 100px;*/
}

.top-container h2{
    margin-top: 0px;
    margin-bottom: 0px;
    color: #D7D7B3; 
    font-family: 'Lobster'; 
    font-size: 62px;
    font-weight: 1;
}

.top-container h3{
    margin-top: 0px;
    margin-bottom: 0px;
    color: #D7D7B3; 
    font-family: 'Lobster'; 
    font-size: 42px;
    font-weight: 1;

}

.top-container h4{
    margin-top: 42vh;
    margin-bottom: 0px;
    color: #D7D7B3; 
    font-family: 'Roboto-Light';  
    font-size: 30px;  
    font-weight: 0;

}

.arrow{
    padding-top: 1vh;
    padding-bottom: 0vh;
    -webkit-animation: MoveUpDown 1s linear infinite;
            animation: MoveUpDown 1s linear infinite;
    text-align: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}



.mid-container{
    padding-top: 6.250em;
    background-color: black;
    padding-bottom: 9.375em;
}

#midsnowflakes{
    padding-top: 6.250em;
    padding-bottom: 6.250em;
    margin-top: 7.53vh;
    max-width: 100%;
}

.mid-container h1{
    color: #D7D7B3; 
    font-family: 'Roboto-Light';  
    margin: 0px;
    font-size: 78px;
    font-weight: 1;

}

.mid-container h2{
     text-align: center;
    padding-top: 7.53vh;
    margin: 0px;
    color: #D7D7B3; 
    font-family: 'Lobster'; 
    font-size: 45px;
    font-weight: 1;

}

.mid-container h4{
    color: #D7D7B3; 
    font-family: 'Lobster'; 
    margin: 0px;
    margin-top: 7.53vh;
    margin-bottom: 1vh;
    font-size: 40px;  
    font-weight: 1;
}

.mid-container p{
    color: #D7D7B3; 
    font-family: 'Roboto';  
    font-size: 20px;  
    text-align: center;
    margin: 0px;
    
    
}





.bot-container{
    padding-top: 12.500em;
    padding-bottom: 0px;
    background-image: url("../img/bot/botbackground.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #464646;
    width: 100%;
}
.bot-container h1{
    margin: 0px;
    color: #D7D7B3; 
    font-family: 'Roboto';  
    font-size: 40px;  
    font-weight: 1;
  
}

.bot-container h2{
    color: #D7D7B3;
    font-family: 'Lobster'; 
    font-size: 110px; 
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight: 1;
}
    
 #botwave{
    display: block;
    margin: auto;
    margin-top: 400px;
    max-width: 100%;
}
#botsnowflakes{
    max-width: 100%;
    padding-bottom: 3.125em;
}
#halfsnowflake{
    padding-top: 1.875em;
    max-width: 100%;
}

.flake{
  -webkit-filter: blur(2px);
          filter: blur(2px);
}


.close.h2{
  position: fixed;
  color: #ffffff;
  z-index: 9999999999999999999;
  font-size: 49px;
  height: 35px;
  width: 35px;
  cursor: pointer;
  margin-right: 0px;
  font-weight: 100;
  margin-top: 30px;
  display: block;
  float: right;
  right: 10px;
  cursor: pointer;
}

.close .line-01,.close .line-02 {
  background-color: #ffffff;
  height: 3px;
  left: 50%;
  position: absolute;
  top: 18px;
  -o-transition: all 180ms ease-in-out 0s;
  transition: all 180ms ease-in-out 0s;
  -webkit-transition: all 180ms ease-in-out 0s;
  width: 45px;
  cursor: pointer;
}

.line-01 {
  transform: translate3d(-50%, -50%, 0px) rotate(-45deg);
  -webkit-transform: translate3d(-50%, -50%, 0px) rotate(-45deg);
}
.line-02 {
  transform: translate3d(-50%, -50%, 0px) rotate(45deg);
  -webkit-transform: translate3d(-50%, -50%, 0px) rotate(45deg);
}


@media all and (max-width: 1921px) {

  .arrow{
    padding-top: 8vh;
    padding-bottom: 0vh;
  }
}

@media all and (max-width: 1400px) {

  .arrow{
    padding-top: 1vh;
    padding-bottom: 0vh;
  }
}



@media all and (max-width: 992px) {
    #titulo{
        padding-top: 8vh;
        padding-bottom: 0vh;
    }

      .top-container h4{
      margin-top: 5vh;
      margin-bottom: 0vh;
      color: #D7D7B3; 
      font-family: 'Roboto-Light';  
      font-size: 30px;  
      font-weight: 0;

    }

      .arrow{
      padding-top: 3vh;
      padding-bottom: 5vh;
    }
}

@media all and (max-width: 767px) {
    #titulo{
      padding-top: 25vh;
      padding-bottom: 15vh;
    }

.top-container h2{
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 31px;
    font-weight: 1;
}

.top-container h3{
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 21px;
    font-weight: 1;

}

.top-container h4{
    margin-top: 20vh;
    margin-bottom: 0px;
    font-size: 15px;  
    font-weight: 0;

}


.mid-container h1{
    margin: 0px;
    font-size: 39px;
    font-weight: 1;

}

.mid-container h2{
     text-align: center;
    padding-top: 7.53vh;
    margin: 0px; 
    font-size: 23px;
    font-weight: 1;

}

.mid-container h4{

    margin: 0px;
    margin-top: 7.53vh;
    margin-bottom: 1vh;
    font-size: 20px;  
    font-weight: 1;
}

.mid-container p{

    font-size: 10px;  
    text-align: center;
    margin: 0px;
    
    
}


.bot-container h1{
    margin: 0px;
    font-size: 20px;  
    font-weight: 1;
  
}

.bot-container h2{
    font-size: 55px; 
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight: 1;
}


}

@media all and (max-width: 600px) {
      #titulo{
      padding-top: 25vh;
      padding-bottom: 15vh;
    }

.top-container h2{
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 31px;
    font-weight: 1;
}

.top-container h3{
    margin-top: 0px;
    margin-bottom: 0px;
    font-size: 21px;
    font-weight: 1;

}

.top-container h4{
    margin-top: 20vh;
    margin-bottom: 0px;
    font-size: 15px;  
    font-weight: 0;

}


.mid-container h1{
    margin: 0px;
    font-size: 39px;
    font-weight: 1;

}

.mid-container h2{
     text-align: center;
    padding-top: 7.53vh;
    margin: 0px; 
    font-size: 23px;
    font-weight: 1;

}

.mid-container h4{

    margin: 0px;
    margin-top: 7.53vh;
    margin-bottom: 1vh;
    font-size: 20px;  
    font-weight: 1;
}

.mid-container p{

    font-size: 10px;  
    text-align: center;
    margin: 0px;
    
    
}


.bot-container h1{
    margin: 0px;
    font-size: 20px;  
    font-weight: 1;
  
}

.bot-container h2{
    font-size: 55px; 
    margin-top: 0px;
    margin-bottom: 0px;
    font-weight: 1;
}

}