* {
    margin: 0;
    padding: 0;
} 

html, body {
    
    /*background-color: #181818;*/
    /*background-image: linear-gradient(-45deg, #002F6C 0%, #1B396A 100%);*/
    color: #f1f1f1;
    font-family: 'Nunito', sans-serif;
    font-weight: 200;
    height: 100vh;
    margin: 0;

}

/*.contenedor-logo {
    /*background: #38d39f;*
    border: 2px solid #38d39f;
    padding: auto;
    margin: auto;

    animation: fadeInDown 1s ease-in;

} */

.logo-inicio {
    background-image: url(../../img/logos/Logo-Inicio.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 350px; 
    animation: fadeInDown 1s ease-in;
}

.titulo {
    
    font-size: 84px;

    animation: fadeInLeft 1.5s ease-in;

    
}

.full-height {

    height: 100vh;

}

.flex-center {

    align-items: center;
    display: flex;
    justify-content: center;

}

.position-ref {
        
    position: relative;

}

.top-right {

    position: absolute;
    right: 10px;
    top: 18px;
    
}

.content {

    text-align: center;
    
}

.links {

    animation: fadeInUp 1.5s ease-in;

}

.links > a {
    
    color: #e7e7e7;
    padding: 0 25px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1rem;
    text-decoration: none;
    text-transform: uppercase;

    display: inline-block;
    position: relative;  

    transition: .3s;  
}

.links > a:after {

    content: "";
    display: block;
    margin: auto;
    height: 1px;
    width: 0px;
    transition: all .3s;

}

.links > a:hover:after {
    width: 100%;
    background: #ffffff;
}

.links > a:hover {

    color: #ffffff;

}

.m-b-md {
        
    margin-bottom: 30px;
        
}

/*************************************************/


section {

    position: relative;
    width: 100%;
    height: 100vh;
    background: linear-gradient(-45deg, #7848a9, #002F6C, #089acf);
    overflow: hidden;
    background-size: 400% 400%;
    animation: gradient-bg 15s ease infinite;

}

 section .wave {

     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 100px;
     background: url(../../img/login/wave.png);
     background-size: 1000px 100px;
     
 }

@keyframes gradient-bg {

    0%{
        background-position: 0% 50%;
    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0% 50%;
    }

}


section .wave.water {

   animation: animate 25s linear infinite;
   z-index:1000;
   opacity:1;
   animation-delay: 0s;
   bottom:0;

}

section .wave.water:nth-child(2) {

   animation: animate2 15s linear infinite;
   z-index:999;
   opacity:0.5;
   animation-delay: -5s;
   bottom:10px;

}

section .wave.water:nth-child(3) {

   animation: animate 30s cubic-bezier(.55, .5,.45,.5) infinite;
   z-index:998;
   opacity:0.2;
   animation-delay: -5s;
   bottom:15px;

}

section .wave.water:nth-child(4) {

   animation: animate2 5s linear infinite;
   z-index:997;
   opacity:0.7;
   animation-delay: -5s;
   bottom:20px;

}

/*************************ANIMACIONES****************************/

@keyframes animate {

   0%{
       background-position-x: 0;
   }
   100%{
       background-position-x: 1000px;
   }
}

@keyframes animate2 {

   0%{
       background-position-x: 0;
   }
   100%{
       background-position-x: -1000px;
   }
}

/***********************************************RESPONSIVO*************************************/

@media only screen and (max-width: 1366px) {

    .logo-inicio {
      min-height: 250px; 
  }

    .titulo {
      
      font-size: 64px;
      
  }

    .links > a {
    
      font-size: 12px;

  }

}

@media only screen and (max-height: 650px) {

    .logo-inicio {
      min-height: 200px; 
  }

    .titulo {
      
      font-size: 54px;
      
  }

    .m-b-md {
        
        margin-bottom: 10px;
        
    }

}