html, body{font-family: "League Spartan", sans-serif; color:#404852;}
body{background:#FFF url(../images/bk-linea.png) repeat-y center center;}
:root{
    --color-principal:#0B3D86;
    --color-secundario:#9B0608;
    --negro:#404852;
    --gris:#FDFCFD;
    --gris2:#E3E3E3;
    --gris3:#F7F7FC;
    --font12:12px;
    --font13:13px;
    --font14:14px;
    --font15:15px;
    --font16:16px;
    --font18:18px;
    --font20:20px;
    --font22:22px;
    --font24:24px;
    --font26:26px;
    --font28:28px;
    --font32:32px;
    --font36:36px;
    --font40:40px;
    --font48:48px;
    --font50:50px;
    --font62:62px;
    --font80:80px;
}
.py-17{padding-top:6rem!important; padding-bottom:6rem!important;}
.pt-2x{padding-top:7rem!important;}
.height-2{height:2px;}
.width-fit-content{width:fit-content!important;}
.max-w-200{max-width:200px;}
.div-bottom{position:absolute; bottom:0; right:60%; max-width:100%; height:auto; z-index:1;}
.border-gris{border-color:var(--gris);}
.n1{margin-top:-70px; margin-right:-20px;}
.navbar{border-bottom:0px!important;}
.nav-link{color:var(--azul); font-size:var(--font16);}
.nav-link:hover{color:var(--rojo); font-size:var(--font16);}
.nav-link2{color:var(--azul); font-size:var(--font13); text-decoration:none;}
.nav-link2:hover{color:var(--rojo); font-size:var(--font13); text-decoration:none;}

.text-principal{color:var(--color-principal)!important;}
.text-secundario{color:var(--color-secundario)!important;}
.text-negro{color:var(--negro)!important;}
.text-gris{color:var(--gris)!important;}

.bk-principal{background:var(--color-principal);}
.bk-secundario{background:var(--color-secundario)!important;}
.bk-negro{background:var(--negro)!important;}
.bk-gris{background:var(--gris)}
.bk-gris2{background:var(--gris2)}
.bk-gris3{background:var(--gris3)}
.bk-imagelinea{background-image:url(../images/bk-linea.png); background-repeat:repeat-y; background-position:center center;}

.font12{font-size:var(--font12);}
.font13{font-size:var(--font13);}
.font14{font-size:var(--font14);}
.font15{font-size:var(--font15);}
.font16{font-size:var(--font16);}
.font24{font-size:var(--font24);}
.font28{font-size:var(--font28);}
.font36{font-size:var(--font36);}

.font80{
    font-size:var(--font80);
    @media only screen and (max-width:990px){
        font-size:var(--font36);
    }
}
.font62{
    font-size:var(--font62);
    @media only screen and (max-width:990px){
        font-size:var(--font36);
    }
}
.font50{
    font-size:var(--font50);
    @media only screen and (max-width:990px){
        font-size:var(--font32);
    }
}
.font48{
    font-size:var(--font48);
    @media only screen and (max-width:990px){
        font-size:var(--font28);
    }
}
.font40{
    font-size:var(--font40);
    @media only screen and (max-width:990px){
        font-size:var(--font20);
    }
}
.font32{
    font-size:var(--font32);
    @media only screen and (max-width:990px){
        font-size:var(--font20);
    }
}
.font26{
    font-size:var(--font26);
    @media only screen and (max-width:990px){
        font-size:var(--font26);
    }
}
.font22{
    font-size:var(--font22);
    @media only screen and (max-width:990px){
        font-size:var(--font16);
    }
}
.font20{
    font-size:var(--font20);
    @media only screen and (max-width:990px){
        font-size:var(--font18);
    }
}
.font18{
    font-size:var(--font18);
    @media only screen and (max-width:990px){
        font-size:var(--font18);
    }
}
.font16{
    font-size:var(--font16);
    @media only screen and (max-width:990px){
        font-size:var(--font14);
    }
}
.font14{
    font-size:var(--font14);
    @media only screen and (max-width:990px){
        font-size:var(--font12);
    }
}
.rounded-aop{
    border-radius:1rem;
    @media only screen and (max-width:1410px){
        border-radius:0rem;
    }
}
.my-20{
    margin-top:8rem!important; margin-bottom:8rem!important;
    @media only screen and (max-width:990px){
        margin-top:5rem!important; margin-bottom:5rem!important;
    }
}

.container{max-width:1400px;}
.logo-header{width:168px; height:auto;}

/* MENU */
/* .navbar-brand{margin-top:-50px;} */
.cloned .navbar-brand{margin-top:0px;}
.btn-especial-2:hover{color:var(--color-secundario); text-decoration:none;}
.nav-link.active{color:var(--color-secundario) !important;}

/* DIV SCROLLING */
.scroll-background{position:fixed; top:0; left:0; width:100%; height:100px; background-color:white; display:none; z-index:8; box-shadow:0px 5px 8px 0px rgba(0,0,0,0.1);}
#navbar{transition:top 0.3s; z-index:1;}
.cloned{padding:22px 10px; text-align:center; width:100%; position:fixed; top:0; left:50%; transform:translateX(-50%); display:none; z-index:1000;}
.cloned .navbar{margin-bottom:0px!important;}
.cloned .logo-header{width:140px;}

/* IDIOMAS */
.idiomasdrop .btn.show{background-color:var(--color-principal); color:#FFFFFF!important;}
.idiomasdrop .dropdown-menu.show{border:1px solid rgba(9, 30, 66, 0.14); margin-top:2px; padding:0px; width:130px; min-width:fit-content; max-width:130px;}
.idiomasdrop .dropdown-menu a.dropdown-item{padding:7px 10px;}
.idiomasdrop .dropdown-toggle::after{display:none!important;}

/* BOTONES */
.container-eg-btn-2{display:flex; justify-content:left; align-items:start; align-content:start; flex-wrap:wrap; margin:0px; padding:0em;}
.container-eg-btn-2 .button{color:#FFFFFF; background:var(--color-secundario); padding:15px 35px 13px 35px; border-radius:5px; text-align:center; text-transform:uppercase; position:relative; overflow:hidden; transition:.3s; z-index:1;}
.container-eg-btn-2 .button:hover{cursor:pointer; color:#FFFFFF; text-decoration:none;}
.container-eg-btn-2 .button-8:before, .container-eg-btn-2 .button-8:after{position:absolute; top:50%; content:""; width:20px; height:20px; background-color:var(--color-principal); border-radius:50%; z-index:-1;}
.container-eg-btn-2 .button-8:before{left:-20px; transform:translate(-50%, -50%);}
.container-eg-btn-2 .button-8:after{right:-20px; transform:translate(50%, -50%);}
.container-eg-btn-2 .button-8:hover:before{-webkit-animation:circle-left 0.7s both; animation:circle-left 0.7s both; -webkit-animation-direction:alternate; animation-direction:alternate;}
@keyframes circle-left{
    0% {left:-20px;}
    50% {left:50%; width:20px; height:20px;}
    100% {left:50%; width:375px; height:375px;}
}
.container-eg-btn-2 .button-8:hover:after{-webkit-animation:circle-right 0.7s both; animation:circle-right 0.7s both; -webkit-animation-direction:alternate; animation-direction:alternate;}
@keyframes circle-right{
    % {right:-20px;}
    50% {right:50%; width:20px; height:20px;}
    100% {right:50%; width:375px; height:375px;}
}

/* BANNER */
.LadoA{position:absolute; left:-130px; animation: moverDeIzquierdaADerecha 2s ease-in-out infinite alternate;}
@keyframes moverDeIzquierdaADerecha {
  0% {transform:translateX(0);}
  100% {transform:translateX(50px);}
}

.LadoC{position:absolute; left:100px; bottom:80px; animation: giroInfinito 10s linear infinite;}
@keyframes giroInfinito {
  0% {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}

.LadoCenter{position:absolute; bottom:20px; left:50%; transform:translateX(-50%); animation:arribaAbajo 2s ease-in-out infinite; cursor:pointer; z-index:1;}
.LadoCenter:hover{animation-play-state:paused;}
@keyframes arribaAbajo {
  0% {transform:translateX(-50%)translateY(0);}
  50% {transform:translateX(-50%) translateY(10px);}
  100% {transform:translateX(-50%) translateY(0);}
}

.banner-img img{animation:floaty 6s ease-in-out infinite;}
@keyframes floaty {
    0%, 100% {transform:translateY(0);}
    50% {transform: translateY(-10px);}
}

.huellas{background:url(../images/20.png) no-repeat bottom left;}
.LadoB{position:absolute; right:40px; bottom:0;}

.boton1{display:flex; justify-content:space-between; align-items:center; max-width:200px; color:var(--negro); margin:0 auto; padding-bottom:0px; border-bottom:1px solid var(--color-principal); font-weight:500; transition:all 0.3s ease;}
.boton1 i{color:var(--color-principal); transition:transform 0.3s ease;}
.boton1:hover i{animation:moverFlecha 0.6s ease forwards;}
.boton1:hover{text-decoration:none;}
@keyframes moverFlecha {
    0% {transform:translateX(0);}
    50% {transform:translateX(-5px);}
    100% {transform:translateX(0);}
}


/* HOME */
.frase-hashtag{display:flex; align-items:center; gap:10px; margin-bottom:20px;}
.frase-hashtag .linea{flex-grow:1; height:2px; background-color:white; max-width:100px;}
.frase-hashtag .texto{color:white; font-weight:bold; text-transform:uppercase; white-space:nowrap;}
.vestidocuadro{margin-top:-100px; z-index:1;}
.lins{display:block;}

/* TESTIMONIOS */
.slick-arrows-container button{border:none; margin:0 10px; text-indent:-9999px; cursor:pointer;}
.slick-prev{background:transparent url('../images/arrow-left.png') no-repeat; width:31px; height:31px;}
.slick-next{background:transparent url('../images/arrow-right.png') no-repeat; width:31px; height:31px;}



/* MENU MOBILE  */
.navsub{z-index:9;}
.navbar-toggler{border:0px!important;}
.mobile-menu{position:fixed; top:0; right:-100%; width:70%; height:100vh; background-color:white; z-index:9999; display:flex; flex-direction:column;  padding:2rem; transition:right 0.4s ease-in-out;}
.mobile-menu.active{right:0;}
.modal-backdrop{position:fixed; top:0; left:0; width:100vw; height:100vh; background:rgba(0, 0, 0, 0.5); z-index:9998; display:none;}
.modal-backdrop.active{display:block;}
.close-btn{font-size:2rem; background:none; border:none; align-self:flex-end; cursor:pointer;}
.mobile-menu .navbar-nav{list-style:none; padding:0;}
.mobile-menu .navbar-nav .nav-item{margin-bottom:1rem;}
.nav-link:focus{color: var(--negro);}
.mobile-menu .dropdown{flex-direction:column;}
.mobile-menu .dropdown-menu{display:none; flex-direction:column; padding-left:0rem; box-shadow:initial!important;}
.mobile-menu .dropdown-menu.show{display:block; animation:slideDown 0.4s ease; position:relative!important; transform:initial!important;}
.mobile-menu .btn{margin-top:auto;}

/* FORMULARIO */
.agendarcita input[type="text"], .agendarcita input[type="email"], .agendarcita input[type="number"]{height:50px!important; font-size:18px!important;}
.agendarcita select{height:50px!important; font-size:18px!important; padding-top:5px!important;}
.agendarcita .ginput_counter, .gform-field-label--type-sub{display:none!important;}
.agendarcita #input_1_11{width:100%!important;}
.agendarcita .gform-theme--foundation .ginput_complex .ginput_container_time{inline-size:33%!important;}
.agendarcita .gform-theme--foundation .gform_fields{row-gap:30px!important;}
.agendarcita #gform_submit_button_1{margin:0 auto; font-size:18px; background:var(--color-secundario); width:150px!important;}
.agendarcita #gform_submit_button_2{margin:0 auto; font-size:18px; background:var(--color-secundario); width:150px!important;}
.agendarcita .validation_message, .agendarcita .gform_validation_errors{display:none!important;}
.agendarcita #gform_confirmation_message_1{font-size:20px; color:var(--color-secundario);}

/* FOOTER */
.btn-redes{background-color:#F5F4FA; color:#989798; text-decoration:none;}
.btn-redes:hover{background-color:var(--dorado-oscuro); color:var(--negro)!important; text-decoration:none;}
.vers i{vertical-align:sub;}
.amedida{color:var(--negro); text-decoration:none;}
.amedida:hover{color:var(--color-principal); text-decoration:none;}

/*__________________________________________ MOVIL __________________________________________*/

@media only screen and (max-width:1220px){
    .vestidocuadro{margin-top:auto; z-index:1;}
    .vestidocuadro img{width:100%;}
}

@media only screen and (max-width:990px){
    /* LOGO */
    .logo-header{width:128px; height:auto;}

    /* HEADER */
    .bk-banner-second{height:70px;}

    /* LOGO NAV */
    .navbar-brand{margin-top:0px!important;}

    /* BANNER */
    .slider-home .content .content-descripcion{margin-top:30px;}
    .slider-home .content .content-descripcion h2{font-size:var(--font36);}
    .slider-home .content .content-descripcion p{font-size:var(--font18);}
    .slick-dots{position:relative; bottom:0px;}
}

/* NUESTRAS DIFERENCIAS */
@media (min-width: 991px){
    .casilla{display:block;}
    .casilla.active{width:30%;}
    .controls{display:none;}
}

@media only screen and (max-width:845px){
    .lins{display:none;}
}

@media only screen and (max-width:600px){
    /* BOTTON */
    .boton1{max-width:600px;}
}

@media only screen and (max-width:400px){
    .slider-home .content .content-descripcion h2{font-size:var(--font24);}
    .slider-home .content .content-descripcion p{font-size:var(--font16);}
    .content-img img{width:70%!important; margin:0 auto;}
    .btn-especial-4{font-size:13px!important;}
    .slick-dots li button{width:13px; height:13px;}
    .slick-dots{bottom:12px;}
}