@font-face{
    font-family: 'didot';
    src: url('../fonts/Didot-HTF-B24-Bold.ttf');      
}
@font-face{
    font-family: 'roboto-m';
    src: url('../fonts/Roboto-Medium_0.ttf');
}

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

@font-face{
    font-family: 'roboto-s';
    src: url('../fonts/RobotoSlab-VariableFont_wght.ttf');
}

@font-face{
    font-family: 'zona-pro';
    src: url('../fonts/ZonaPro-Bold_0.otf');
}

/**------------\FONTS/----------**/
.font-didot {
    font-family: 'didot';
}

.font-roboto-m {
    font-family: 'roboto-m';
}

.font-roboto-r {
    font-family: 'roboto-r';
}

.font-roboto-s {
    font-family: 'vwhead-b';
}

.font-zona-pro {
    font-family: 'zona-pro';
}


/**------------\BASE CSS/----------**/
body {
    font-family: "roboto-r" ;    
}

.slick-slide img {
    display: initial;
}

.slick-dots li.slick-active button:before {
    color: #19285E !important;
}

.slick-dots li button:before {
    color: #9EB0D8 !important;
}

.slick-dots {
    bottom: 0px;
}

.btn:hover {
    text-decoration: none;
  }
  
a, button {
    font-family: 'roboto-m';
}
  
a:hover {
    text-decoration-line: none;
}

.errors {
    color: red;
}

.helper {
    position: fixed;
    bottom: 20%;
    right: 0;
}

.helper-icon {
    width: 40px;
    height: 40px;
}


/**------------\COLORS/----------**/

.c-blue {
    color: #19285E;
}

.c-cyan {
    color: #9CB7E8;
}

.c-gray {
    color: #555557;
}


/**------------\BACKGROUND-COLORS/----------**/

.bg-blue{
    background-color: #19285E;
}

.bg-blue-dark {
    background-color: #0F1B31;
}

.bg-gray {
    background-color: #F3F4F6;
}

.bg-gray-dark {
    background-color: #D2D2D6;
}

.bg-gray-dark__2 {
    background-color: #4D4D4D;
}

.bg-white {
    background-color: #fff;
}

.bg-cyan {
    background-color: #EBF2FC;
}


/**------------\HEADER/----------**/

.socials {
    width: 30px;
    height: 30px;
}

.icon-header {
    font-size: 25px;
    color: white;
}

a.icon-header:hover {
    color: rgb(185, 177, 177);;
}


.header-logo {
    width: 250px;
}

.navbar-toggler {
    border-color: white !important;
    line-height: 1.3;
}

.navbar-toggler-icon {
    position: relative;
    
}

.navbar-toggler-icon,
.navbar-toggler-icon::before,
.navbar-toggler-icon::after {
    width: 19px;
    height: 2px;
    background-color: white;
    display: inline-block;
}

.navbar-toggler-icon::before,
.navbar-toggler-icon::After {
    content: "";            
    position: absolute;
    left: 0;
    transition: all .2s;
}

.navbar-toggler-icon::before {
    top: -6px;
}

.navbar-toggler-icon::after {
    top: 6px;
}


.header-line:before {
    content: '';
    position: absolute;
    top: 52%;
    right: 0;
    background-color: #fff;
    height: 1px;
    width: 60%;
}

.activo a {
   border-bottom: 2px solid white;
}

/**------------\FOOTER/----------**/

.icon-footer {
    font-size: 40px;
    color: white;
}
.icon-footer:hover {
    color: rgb(185, 177, 177);
}

.footer-text {
    font-size: 14px;
}

.footer-logo {
    width: 300px;
}

/**------------\NEWSLETTER/----------**/

  
.login-box {    
    padding: 20px 35px 35px;    
    position: relative;    
    background: linear-gradient(#141e30, #243b55);
    box-sizing: border-box;
    box-shadow: 0 15px 25px rgba(0,0,0,.6);
    border-radius: 10px;
}

.modal-header .close {
    padding: 0;
}

input.news:-webkit-autofill,
input.news:-webkit-autofill:hover, 
input.news:-webkit-autofill:focus,
textarea.news:-webkit-autofill,
textarea.news:-webkit-autofill:hover,
textarea.news:-webkit-autofill:focus,
select.news:-webkit-autofill,
select.news:-webkit-autofill:hover,
select.news:-webkit-autofill:focus {
    
    -webkit-text-fill-color: white;
    -webkit-box-shadow: 0 0 0px 1000px linear-gradient(#141e30, #243b55) inset;
    transition: background-color 5000s ease-in-out 0s;
}

.login-box .user-box {
    position: relative;
}

.login-box .user-box input {
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    margin-bottom: 30px;
    border: none;
    border-bottom: 1px solid #fff;
    outline: none;
    background: transparent;
}

.login-box .user-box label {
    position: absolute;
    top:0;
    left: 0;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    pointer-events: none;
    transition: .5s;
}

.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label {
    top: -20px;
    left: 0;
    color: #03e9f4;
    font-size: 12px;
}
  
  
  
/**------------\HOME/----------**/

.slick-dots li button:before {
    line-height: 0px;
}


.service-card {
    height: 400px;
    position: relative;
}

.description {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 80%;   
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2); 
}

.home-line {
    
    background-color: gray;    
}


.form-width {
    width: 75% ;
}


.btn-description {
    background-color: transparent;
    border: 1.5px solid gray; 
    letter-spacing: 2px;
    
}

.btn-newsletter {
    background-color: #FFFFFF;
    border: 1.5px solid gray; 
    color: #19285E;
    padding: 5px 80px;
}

.btn-formulario {
    background-color: #0F1B31;
    color: white;
    text-decoration: none;
    padding: 5px 60px;
    
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    color: white;
    font-size: 65px;
    transform: translate(-50%, -50%);
}

.video:hover .play-button {
    color: #19285E;
}

.banner-text-pos {
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 70%;
    width: 50%;
    transform: translate(-50%, -50%);

}

.banner-text-pos h2 {
    text-shadow: 2px 2px 4px #000000;
}

.back-home-1 {
    background-image: url('../imgs/home/Recurso-14.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.back-home-2 {
    background-image: url('../imgs/home/Recurso-15.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;    
    height: 550px;    
}

.home-index {
    z-index: 100;
}



.back-home-2::before {
    content: '';
    position: absolute;
    right: 5%;
    top: 5%;
    width: 90%;
    height: 90%;
    border: 1px solid white;


}

.back-home-3 {
    background-image: url('../imgs/home/Recurso-16.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;    
    height: 570px;
}

.heart {
    background: transparent;
    font-size: 18px;
    color: #19285E;   
}

.read-more {
    color: #555557;
    font-size: 18px;
    background: transparent;
}

.card-footer__line::after {
    content: '';
    background-color: #a5a5ac;
    position: absolute;
    left: 0;
    height: 110%;
    width: 1px;
}

.section-home__line {
    border-bottom: 1.5px solid #fff;

}


/**------------\CONTACTO/----------**/

.contacto-size {
    font-size: 50px;
}

.contacto-size__1 {
    font-size: 45px;
}

/**------------\SERVICIOS/----------**/

.btn-description__servicios {
    background-color: #D2D2D6;
    border: 1.5px solid gray;        
}

/**------------\QUIENES SOMOS/----------**/

.about-line::before {
    content: '';
    position: absolute;
    background-color: #D2D2D6;
    right: 0;
    top: 15%;
    width: 2px;
    height: 20%;
}

.about-icon {
    width: 75px;
    height: 75px;
}

.about-tab {
    width: 40%;
}

.about-tab .nav-link.active {
    background-color: #19285E;
    color: white;
}

.about-tab .nav-link {
    background-color: #363B46;
    color: white;
    border-radius: 0;
    padding: 25px 25px;
}

/**------------\SCROLL EFFECTS/----------**/
#reveal2 {
    opacity: 0;
        transform: translateX(-100px) ;
         -moz-transform: translateX(-100px) ;
            -ms-transform: translateX(-100px) ;
             -o-transform: translateX(-100px) ;
                    transform: translateX(-100px) ;
    -webkit-transition: all 0.8s ease-in-out;
         -moz-transition: all 0.8s ease-in-out;
            -ms-transition: all 0.8s ease-in-out;
             -o-transition: all 0.8s ease-in-out;
                    transition: all 0.8s ease-in-out;
}
#reveal2.visible {
    opacity: 1;
    -webkit-transform: none;
         -moz-transform: none;
            -ms-transform: none;
             -o-transform: none;
                    transform: none;
}

#reveal3 {
    opacity: 0;
        transform: translateY(-100px);
         -moz-transform: translateY(-100px);
            -ms-transform: translateY(-100px);
             -o-transform: translateY(-100px);
                    transform: translateY(-100px);
    -webkit-transition: all 0.8s ease-in-out;
         -moz-transition: all 0.8s ease-in-out;
            -ms-transition: all 0.8s ease-in-out;
             -o-transition: all 0.8s ease-in-out;
                    transition: all 0.8s ease-in-out;
}
#reveal3.visible {
    opacity: 1;
        transform: none;
         -moz-transform: none;
            -ms-transform: none;
             -o-transform: none;
                    transform: none;
}



#reveal4 {
    opacity: 0;
        transform: translateY(70px);
         -moz-transform: translateY(70px);
            -ms-transform: translateY(70px);
             -o-transform: translateY(70px);
                    transform: translateY(70px);
    -webkit-transition: all 0.6s ease-out;
         -moz-transition: all 0.6s ease-out;
            -ms-transition: all 0.6s ease-out;
             -o-transition: all 0.6s ease-out;
                    transition: all 0.6s ease-out;
}
#reveal4.visible {
    opacity: 1;
        transform: none;
         -moz-transform: none;
            -ms-transform: none;
             -o-transform: none;
                    transform: none;
}

.reveal5,
.reveal7 {
    opacity: 0;
        transform: scale(0.5);
         -moz-transform: scale(0.5);
            -ms-transform: scale(0.5);
             -o-transform: scale(0.5);
                    transform: scale(0.5);
    -webkit-transition: all 0.8s ease-in-out;
         -moz-transition: all 0.8s ease-in-out;
            -ms-transition: all 0.8s ease-in-out;
             -o-transition: all 0.8s ease-in-out;
                    transition: all 0.8s ease-in-out;
}
.reveal5.visible,
.reveal7.visible {
    opacity: 1;
        transform: none;
         -moz-transform: none;
            -ms-transform: none;
             -o-transform: none;
                    transform: none;
}

.reveal6 {
    opacity: 0;
        transform: translateY(-100px);
         -moz-transform: translateY(-100px);
            -ms-transform: translateY(-100px);
             -o-transform: translateY(-100px);
                    transform: translateY(-100px);
    -webkit-transition: all 0.8s ease-in-out;
         -moz-transition: all 0.8s ease-in-out;
            -ms-transition: all 0.8s ease-in-out;
             -o-transition: all 0.8s ease-in-out;
                    transition: all 0.8s ease-in-out;
}

.reveal6.visible {
    opacity: 1;
    -webkit-transform: none;
         -moz-transform: none;
            -ms-transform: none;
             -o-transform: none;
                    transform: none;
}

.digit {
    opacity: 0;
    -webkit-transform: translateX(-100px);
         -moz-transform: translateX(-100px);
            -ms-transform: translateX(-100px);
             -o-transform: translateX(-100px);
                    transform: translateX(-100px);
    -webkit-transition: all 0.6s ease-out;
         -moz-transition: all 0.6s ease-out;
            -ms-transition: all 0.6s ease-out;
             -o-transition: all 0.6s ease-out;
                    transition: all 0.6s ease-out;
}
.digit.visible {
    opacity: 1;
    -webkit-transform: none;
         -moz-transform: none;
            -ms-transform: none;
             -o-transform: none;
                    transform: none;
}

.digito {
    opacity: 0;
    -webkit-transform: translateX(100px);
         -moz-transform: translateX(100px);
            -ms-transform: translateX(100px);
             -o-transform: translateX(100px);
                    transform: translateX(100px);
    -webkit-transition: all 0.6s ease-out;
         -moz-transition: all 0.6s ease-out;
            -ms-transition: all 0.6s ease-out;
             -o-transition: all 0.6s ease-out;
                    transition: all 0.6s ease-out;
}
.digito.visible {
    opacity: 1;
    -webkit-transform: none;
         -moz-transform: none;
            -ms-transform: none;
             -o-transform: none;
                    transform: none;
}







/**------------\MEDIA QUERIES/----------**/

@media(max-width: 600px) {
    .banner-text-pos {        
        top: 50%;
        left: 52%;
        width: 100%;
    }

    .banner-text-pos h2 {
        font-size: 16px;
    }       
    
    .logo-wi {
        width: 250px;
    }

    .login-box {    
        padding: 20px;
      }

    .form-width {
        width: 100% ;
    }
}

@media(max-width: 768px) {
    .navbar-brand img {
        width: 175px;
    }
    
}

@media(max-width: 1023px) {
    .header-line:before {
        display: none;
    }

    .description{
        position: relative;
        width: 100%;
    }

    .service-card {
        height: auto;
    }
}

@media(max-width: 900px) {
   /**------------\SCROLL EFFECTS/----------**/
    #reveal2 {
        opacity: 1;
        -webkit-transform: none;
            -moz-transform: none;
                -ms-transform: none;
                -o-transform: none;
                        transform: none;
    }

    #reveal3 {
        opacity: 1;
        -webkit-transform: none;
            -moz-transform: none;
                -ms-transform: none;
                -o-transform: none;
                        transform: none;
    }

    
    #reveal4 {
        opacity: 1;
        -webkit-transform: none;
            -moz-transform: none;
                -ms-transform: none;
                -o-transform: none;
                        transform: none;
    }

    .reveal5, 
    .reveal7 {
        opacity: 1;
        -webkit-transform: none;
             -moz-transform: none;
                -ms-transform: none;
                 -o-transform: none;
                        transform: none;
    }

    

.reveal6 {
    opacity: 1;
    -webkit-transform: none;
         -moz-transform: none;
            -ms-transform: none;
             -o-transform: none;
                    transform: none;
}

    .digit {
        opacity: 1;
        -webkit-transform: none;
            -moz-transform: none;
                -ms-transform: none;
                -o-transform: none;
                        transform: none;
    }

    .digito {
        opacity: 1;
        -webkit-transform: none;
            -moz-transform: none;
                -ms-transform: none;
                -o-transform: none;
                        transform: none;
    }
}