/*  --------------------------------------------------------------------------------------------------------------------------------------------------------  */
/* ESTUDIO - COMUNES  */
/*  --------------------------------------------------------------------------------------------------------------------------------------------------------  */

/*  Tamaño del logo cuando se hace la animación de LoginCorrecto  */
#logoTraseroEntrada {
    width: 300px;
    height: 100%;
}
/*  Color del fondo del contenedorLogoTrasero cuando se hace la animación de LoginCorrecto */
#contenedorLogoTrasero {background-color: rgba(255, 255, 255,1);}

/*  --------------------------------------------------------------------------------------------------------------------------------------------------------  */
/* CONTENEDOR COLUMNA LOGIN  */
/*  --------------------------------------------------------------------------------------------------------------------------------------------------------  */

/*  Cuando no hay imagen de Fondo, este es el color de Fondo  */
.sinFondo #contenedorLogin, .sinFondo #contenedorRecuperarPass {
    background: #FDFDFD;
    /*Degradado*/
    /*background: rgba(59,219,198,1);
    background: -moz-linear-gradient(top, rgba(59,219,198,1) 0%, rgba(0,87,141,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(59,219,198,1)), color-stop(100%, rgba(0,87,141,1)));
    background: -webkit-linear-gradient(top, rgba(59,219,198,1) 0%, rgba(0,87,141,1) 100%);
    background: -o-linear-gradient(top, rgba(59,219,198,1) 0%, rgba(0,87,141,1) 100%);
    background: -ms-linear-gradient(top, rgba(59,219,198,1) 0%, rgba(0,87,141,1) 100%);
    background: linear-gradient(to bottom, rgba(59,219,198,1) 0%, rgba(0,87,141,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bdbc6', endColorstr='#00578d', GradientType=0 );*/
}
.formLoginTitulo,.formLoginTitulo span {color: #00ACEA;}
.formLoginOlvidada a span {color: #00ACEA;}
.formLoginOlvidada a span:hover {color: #00ACEA;}

/* ------------------- Inputs ------------------  */
/* Línea de color de debajo de los inputs y icono  */
.focoInputLoginU::before, .focoInputLoginP::before, .focoInputLoginE::before, .focoInputLoginEst::before {
    background: #54decd;
}
.inputNusuario:focus ~ i, .inputPass:focus ~ i, .inputEmail:focus ~ i, .inputEstudio:focus ~ i {
    color: #54decd;
}
/*--link recupera contraseña--*/
.linkCierraRecuperaPass i {color: #e2dbdb;}
.linkCierraRecuperaPass:hover i{color: #484848;}
/* ------------------- Botón ------------------  */
.btnLogin {
    background-color: #00ACEA!important;
    border: 0px solid #ffffff;
}
.btnLogin:hover {
    background-color: #4fcdfb!important;
    border: 0px solid #ffffff;
}
.btnLogin:not(:disabled):not(.disabled):active,
.btnLogin:not(:disabled):not(.disabled).active,
.show > .btnLogin.dropdown-toggle {
    color: #fff;
    background-color: #0080af!important;
    border: 0px solid #ffffff;
    transform: scale(0.95); 
}

/*  --------------------------------------------------------------------------------------------------------------------------------------------------------  */
/* CONTENEDOR COLUMNA DISEÑO  */
/*  --------------------------------------------------------------------------------------------------------------------------------------------------------  */

#contenedorDiseno {
    background: #FFF;
    /*Degradado
    background: rgba(59,219,198,1);
    background: -moz-linear-gradient(top, rgba(59,219,198,1) 0%, rgba(0,87,141,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(59,219,198,1)), color-stop(100%, rgba(0,87,141,1)));
    background: -webkit-linear-gradient(top, rgba(59,219,198,1) 0%, rgba(0,87,141,1) 100%);
    background: -o-linear-gradient(top, rgba(59,219,198,1) 0%, rgba(0,87,141,1) 100%);
    background: -ms-linear-gradient(top, rgba(59,219,198,1) 0%, rgba(0,87,141,1) 100%);
    background: linear-gradient(to bottom, rgba(59,219,198,1) 0%, rgba(0,87,141,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bdbc6', endColorstr='#00578d', GradientType=0 );
   */
}
/* Para ordenar los objetos de la pastilla diseño */
#montajeDiseno {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    align-content: center;
}
#pastillaSombra{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    -webkit-box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.4);
    box-shadow: inset 7px 0 9px -7px rgba(0,0,0,0.4);
}
.primeroDiseno #pastillaSombra {
    -webkit-box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4);
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.4);
}

#pastillaLogo {
    width: 40%;
    margin: 180px 40px 0 0;
    z-index:1;
}
/*.imgLogo {filter: drop-shadow(5px 4px 8px rgba(255, 255, 255, 0.5));}*/


.imgFondoDiseno {
    position:absolute;
    height: 100%;
    top: 0px;
    right: 0px;
    z-index: 0;
}

/*  --------------------------------------------------------------------------------------------------------------------------------------------------------  */
/* DENTRO DEL ESTUDIO  */
/*  --------------------------------------------------------------------------------------------------------------------------------------------------------  */

/* Menú  */
.navbar-custom {
    background: #2d5253;
    /*
    background: -moz-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(232,232,232,1) 53%, rgba(187,187,187,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(239,239,239,1)), color-stop(53%, rgba(232,232,232,1)), color-stop(100%, rgba(187,187,187,1)));
    background: -webkit-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(232,232,232,1) 53%, rgba(187,187,187,1) 100%);
    background: -o-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(232,232,232,1) 53%, rgba(187,187,187,1) 100%);
    background: -ms-linear-gradient(top, rgba(239,239,239,1) 0%, rgba(232,232,232,1) 53%, rgba(187,187,187,1) 100%);
    background: linear-gradient(to bottom, rgba(239,239,239,1) 0%, rgba(232,232,232,1) 53%, rgba(187,187,187,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#bbbbbb', GradientType=0 );
    */
    /*
    border-top: 1px solid #d6d6d6;
    border-bottom: 1px solid #d6d6d6;
    */
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    background: #80af29;
    color: #FFF;
    outline:0;
}
/*submenu activo*/
.navbar-custom .dropdown-item.active, .navbar-custom .dropdown-item:active {
    background-color: #2d5253;
    color: #FFF;
}

/*segunda barra de menus*/
.bg-custom {background: #80af29;}

/*Headers títulos*/
h1 {
    color: #80af29;
    font-weight: 600;
}


/*  ---------------------------------------------------------------------------------------------------------------------------------------------------*/
/*  --------------------------------------------------     MEDIA QUERIES (Desktop)      -------------------------------------------------------------- */
/*  -------------------------------------------------------------------------------------------------------------------------------------------------- */


/* DESKTOP General < 1200px  */
@media only screen and (max-width: 1200px) {
    .formLoginTitulo,.formLoginTitulo span {
        font-size: 30px;
        line-height: 40px;
    }
}

/* DESKTOP 1024 x 768 */
@media only screen and (min-width: 900px) and (max-width: 1200px) {
    #pastillaLogo {
        width: 60%;
        margin: 95px 0 0 0;
    }
    #contenedorLogin {padding: 80px 30px 50px;}
    .imgFondoDiseno {
        top: 287px;
        right: -400px;
    }
    /* INTERIOR */
    .tituloCabecera {height: 70px;}
    .logoCabecera {height: 90px;}
}

/* Desktop 1280 x 800 */
@media only screen and (min-width: 1260px) and (max-width: 1300px) and ( max-height: 790px ) {
    #pastillaLogo {        
        width: 50%;
        margin: 95px 0 0 0;
    }
    .imgFondoDiseno {
        top: 298px;
        right: -270px;
    }
}

/* Desktop 1280 x 1024 */
@media only screen and (min-width: 1260px) and (max-width: 1350px) and ( min-height: 900px ) {
    #pastillaLogo {        
        width: 55%;
        margin: 95px 0 0 0;
    }
    .imgFondoDiseno {
        top: 340px;
        right: -540px;
    }
}

/* Desktop >1366 */
@media only screen and (min-width: 1350px) {
}

/* Desktop =< 1366 x 768 */
@media only screen and (min-width: 1350px) and (max-width: 1500px) and ( max-height: 768px ) {
    #pastillaLogo {        
        width: 50%;
        margin: 95px 0 0 0;
    }
    .imgFondoDiseno {
        top: 324px;
        right: -233px;
    }
    #contenedorLogin{padding: 40px 50px 20px 50px;}
}

/* Desktop =< 1440 x 900 */
@media only screen and (min-width: 1367px) and (max-width: 1500px) and ( max-height: 900px ) {
    #pastillaLogo {        
        width: 50%;
        margin: 100px 0 0 0;
    }
    .imgFondoDiseno {
        top: 342px;
        right: -334px;  
    }
}

/* Desktop =< 1650 hasta 1900 -- Ej. 1680 x 1050 etc  */
@media only screen and (min-width: 1650px) and (max-width: 1900px) {
    #pastillaLogo {
        width: 45%;
        margin: 120px 0 0 0;
    }
    #contenedorLogin {padding: 80px 80px 50px;}
    .imgFondoDiseno {
        top: 407px;
        right: -436px;
    }
}

/* Desktop =< 1902 hasta 2000 -- Ej. 1920 x 1080 etc  */
@media only screen and (min-width: 1902px) and (max-width: 2000px) {
    #pastillaLogo {
        width: 45%;
        margin: 110px 0 0 0;
    }
    #contenedorLogin {padding: 80px 80px 50px;}
    .imgFondoDiseno {
        top: 421px;
        right: -384px;
    }
}

/* Desktop >2001 */
@media only screen and (min-width: 2001px) {
    #contenedorLogin {
        flex: 0 0 23.333333%;
        max-width: 23.333333%;
    }
    #contenedorDiseno{
        flex: 0 0 76.666667%;
        max-width: 76.666667%;
     }
    #pastillaLogo {
        width: 32%;
        margin: 110px 0 0 0;
    }
    .imgFondoDiseno {
        top: 421px;
        right: -384px;
    }
}


/*  ----------------------------------------------------------------------------------------------------------------------------------------*/
/*  --------------------------------------     BOOSTSTRAP MEDIA QUERIES (4 breakpoints)     ----------------------------------------------- */
/*  --------------------------------------------------------------------------------------------------------------------------------------- */


/*  -------------------------------------------------------     Tablets y Móviles     ----------------------------------------------------- */

/* Small devices */
@media (max-width: 576px) {  

    #logoTraseroEntrada {width: 150px;}
    #contenedorLogin, #contenedorRecuperarPass {padding: 20px 50px 0 50px;}
    #contenedorLogin{
        
    }
   /* logo del promotor que aparece solo en moviles abajo del todo*/
    #cabecera {background: url('../../Estudio/Img/interior/MobileCabecera.jpg') left center / auto 100% no-repeat;}
    .logoCabecera{height: 60px;}
    #formLoginEstudio{
        margin-top:0px;
    }
    #formLoginLogo{
        margin-bottom:20px;
        width:65%;
    }
    .formLoginOlvidada{
        margin-bottom:20px;
    }
    .fondoMovil {
        width: 100%;
        height: 400px;
        position: absolute;
        bottom: 0;
        left: 0;
        background: url(../Img/index/fondo.svg);
        background-repeat: no-repeat;
        background-position-y: 0%;
        background-position-x: 25%;
        background-size: 300%;
        z-index: 0;
    }
}
 
/* Medium devices */
@media (max-width: 768px) {
    #contenedorLogin, #contenedorRecuperarPass {
        padding: 20px 50px 0 50px;
    }
    #formLoginEstudio {
        margin-top: 0px;
    }
    #formLoginLogo {
        margin-bottom: 20px;
        width: 65%;
    }
    #logo {
        width: 100%;
        margin-bottom: 10px;
    }
    .formLoginOlvidada {margin-bottom: 20px;}
}
@media (max-width: 768px) and (max-height: 900px) {
    .fondoMovil {height: 350px;}
}
@media (max-width: 768px) and (max-height: 800px) {
    .fondoMovil {height: 278px;}
}
@media (max-width: 768px) and (max-height: 700px) {
    .fondoMovil {height: 216px;}
}
@media (max-width: 768px) and (max-height: 600px) {
    .fondoMovil {height: 120px;}
}

    /* Large devices -- ej: iPad Portrait */
    @media (min-device-width: 768px) and (max-width: 992px) {
        .primeroLogin #contenedorDiseno {
            -ms-flex-order: 1;
            order: 1;
        }

        .primeroLogin #contenedorLogin {
            -ms-flex-order: 2;
            order: 2;
        }

        .loginCorrecto .primeroDiseno #contenedorLogin, .loginCorrecto .primeroLogin #contenedorLogin {
            transform: translateY(100%);
        }

        .loginCorrecto .primeroDiseno #contenedorDiseno, .loginCorrecto .primeroLogin #contenedorDiseno {
            transform: translateY(-100%);
        }

        #pastillaSombra, .primeroDiseno #pastillaSombra {
            -webkit-box-shadow: inset 0px -4px 9px -7px rgba(0,0,0,0.4);
            box-shadow: inset 0px -4px 9px -7px rgba(0,0,0,0.4);
        }

        #pastillaLogo {
            width: 50vw;
            margin: 90px 0 160px 0;
        }

        .imgFondoDiseno {
            height: 140%;
            right: -322px;
            top: 279px;
        }

        #cabecera {
            background: url('../../Estudio/Img/interior/tabletCabecera.jpg') left center / auto 100% no-repeat;
        }

        .logoCabecera {
            height: 65px;
        }

        .tituloCabecera {
            height: 50px;
        }
    }

    @media (max-width: 992px) {
        .alert-validate::before {
            visibility: visible;
            opacity: 1
        }

        html, body {
            /* Para esconder la Barra de Scroll Vertical al cargar la página */
            overflow-y: visible;
        }

        .navbar-custom .dropdown-menu {
            border-radius: 0;
        }

        #MenuSuperior.open {
            position: fixed;
            width: 100%;
            overflow: auto;
            height: 100%;
            align-content: flex-start;
        }
    }

    @media (max-width: 992px) and (orientation: landscape) {
        #contenedorLogin, #contenedorRecuperarPass {
            padding: 50px 50px 0 50px;
        }

        #formLoginLogo {
            display: block !important;
            max-width: 300px;
        }

        #contenedorDiseno {
            display: none !important;
        }
        /* logo del promotor que aparece en tablets < 992px landscape, abajo del todo*/
        #formLoginPromotor {
            display: block !important;
            margin: 70px 0;
            width: 45%;
        }
    }

    /* Large devices -- ej: iPad Landscape */
    @media (max-device-width: 1050px) and (orientation: landscape) {
        .imgFondoDiseno {
            top: 386px;
            right: -460px;
        }
        #pastillaLogo {margin: 135px 0 0 0;}
    }
     /* Large devices -- ej: iPad Landscape */
    @media (max-device-width: 1280px) and (orientation: landscape) {
        .imgFondoDiseno {
            top: 386px;
            right: -460px;
        }
        #pastillaLogo {margin: 135px 0 0 0;}
    }
    /* Large devices -- ej: iPad Landscape */
    @media (max-device-width: 1366px) and (orientation: landscape) {
        .imgFondoDiseno {
            top: 386px;
            right: -600px;
        }
        #pastillaLogo {
            width: 35vw;
            margin: 135px 0 0 0;
        }
    }