@import url('https://fonts.googleapis.com/css?family=Exo:400,700');

*{
  margin:0px;
  padding:0px;
}

body{
  font-family:'Exo', sans-serif;
  align-items:center;
  justify-content:center;
  height:100vh;
  width:100vw;
}

.container.content{
  padding-top:140px;
  position:relative;
  z-index:100;
}

.container.content .cover{
  margin-top:30px;
  background:#ffffff;
  border-radius: 5px;
}

.area{
  background:#cc4444;
  background:-webkit-linear-gradient(to left, #8f94fb, #4e54c8);
  width:100%;
  height:100vh;
}

.area.auto{
  background:#cc4444;
  background:-webkit-linear-gradient(to left, #8f94fb, #4e54c8);
  width:100%;
  height:auto;
}

.circles{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:hidden;
}

.circles li{
  position:absolute;
  display:block;
  list-style:none;
  width:20px;
  height:20px;
  background:rgba(255, 255, 255, 0.2);
  animation:animate 25s linear infinite;
  bottom:-150px;
}

.circles li:nth-child(1){
  left:25%;
  width:80px;
  height:80px;
  animation-delay:0s;
}

.circles li:nth-child(2){
  left:10%;
  width:20px;
  height:20px;
  animation-delay:2s;
  animation-duration:12s;
}

.circles li:nth-child(3){
    left:70%;
    width:20px;
    height:20px;
    animation-delay:4s;
}

.circles li:nth-child(4){
    left:40%;
    width:60px;
    height:60px;
    animation-delay:0s;
    animation-duration:18s;
}

.circles li:nth-child(5){
    left:65%;
    width:20px;
    height:20px;
    animation-delay:0s;
}

.circles li:nth-child(6){
    left:75%;
    width:110px;
    height:110px;
    animation-delay:3s;
}

.circles li:nth-child(7){
    left:35%;
    width:150px;
    height:150px;
    animation-delay:7s;
}

.circles li:nth-child(8){
    left:50%;
    width:25px;
    height:25px;
    animation-delay:15s;
    animation-duration:45s;
}

.circles li:nth-child(9){
    left:20%;
    width:15px;
    height:15px;
    animation-delay:2s;
    animation-duration:35s;
}

.circles li:nth-child(10){
    left:85%;
    width:150px;
    height:150px;
    animation-delay:0s;
    animation-duration:11s;
}

@keyframes animate{

    0%{
        transform:translateY(0) rotate(0deg);
        opacity:1;
        border-radius:0;
    }

    100%{
        transform:translateY(-1000px) rotate(720deg);
        opacity:0;
        border-radius:50%;
    }

}

.welcome{
  height:100%;
  width:100%;
  /* margin-top:-40px; */
}

.welcome .wrapping-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height:100%;
  width:100%;
}

.welcome .button-navigation .btn{
  position: relative;
}


.welcome .text-changer{
  color:#fff;
  font-family:tahoma;
  font-size:3rem;
  font-weight:100;
  line-height:1.5;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  position:relative;
  width:450px;
  margin-bottom:50px;
}

.welcome .text-changer{
  margin-left:70px;
}

.welcome .text-changer span{
  font-size:40px;
  margin-left:40px;
}

.message{
  background-color:yellow;
  color:#333;
  display:block;
  font-weight:900;
  overflow:hidden;
  position:absolute;
  padding-left:0.5rem;
  top:0.2rem;
  left:120px;
  animation:openclose 5s ease-in-out infinite;
}

.word1, .word2, .word3{
  font-family:tahoma;
}

@keyframes openclose{
  0%{
    top:0.2rem;
    width:0;
  }
  5%{
    width:0;
  }
  15%{
    width:160px;
  }
  30%{
    top:0.2rem;
    width:160px;
  }
  33%{
    top:0.2rem;
    width:0;
  }
  35%{
    top:0.2rem;
    width:0;
  }
  38%{
    top:-4.5rem;

  }
  48%{
    top:-4.5rem;
    width:230px;
  }
  62%{
    top:-4.5rem;
    width:230px;
  }
  66%{
    top:-4.5rem;
    width:0;
    text-indent:0;
  }
  71%{
    top:-9rem;
    width:0;
    text-indent:5px;
  }
  86%{
    top:-9rem;
    width:200px;
  }
  95%{
    top:-9rem;
    width:200px;
  }
  98%{
    top:-9rem;
    width:0;
    text-indent:5px;
  }
  100%{
    top:0;
    width:0;
    text-indent:0;
  }
}


@keyframes slideUp{
  0%{
    transform:translateY(0);
  }
  100%{
    transform:translateY(-0.5rem);
  }
}
@keyframes slideDown{
  0%{
    transform:translateY(-0.5rem);
  }
  100%{
    transform:translateY(0);
  }
}
@keyframes pulse{
  0%{
    transform:scale(1);
  }
  70%{
    transform:scale(0.9);
  }
  100%{
    transform:scale(1);
  }
}

/*button */
.button__group{
  margin:1.5rem 0;
}

.center{
  display:flex;
  justify-content:center;
  align-items:flex;
}

.btn.btn-control{
  box-shadow:rgba(0, 0, 0, 0.1) 0px 4px 12px;
  color:#ecf2ff;
  display:inline-block;
  padding:1rem 5rem;
  text-decoration:none;
  transition:all 500ms ease;
  cursor:pointer;
  margin-bottom:1.5rem;
}
.btn.btn-control:hover{
  box-shadow:rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  animation:slideUp 500ms ease forwards;
}
.btn.btn-control:active{
  box-shadow:rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
  animation:slideDown 500ms ease forwards;
}
.btn--12{
  color:#fc7300;
  border:0 solid #fc7300;
  outline:0.1rem solid #fc7300;
  text-shadow:none;
}
.btn--12:hover{
  border:0 solid #fc7300;
  color:#ffffff;
  outline-color:rgba(252, 115, 0, 0);
  outline-offset:1.5rem;
  box-shadow:inset 0 0 2rem rgba(252, 115, 0, 0.5), 0 0 2rem rgba(252, 115, 0, 0.2);
}

@keyframes slideUp{
  0%{
    transform:translateY(0);
  }
  100%{
    transform:translateY(-0.5rem);
  }
}
@keyframes slideDown{
  0%{
    transform:translateY(-0.5rem);
  }
  100%{
    transform:translateY(0);
  }
}
@keyframes pulse{
  0%{
    transform:scale(1);
  }
  70%{
    transform:scale(0.9);
  }
  100%{
    transform:scale(1);
  }
}

.form-control:focus{
  color:#000000;
  box-shadow:0 0 0 0.0rem transparent;
}