/*XTRA-Small devices (landscape phones, 576px and up)*/
@media (min-width: 0px) and (max-width: 576px)
{

    :root {
        --color-azul: #549BD2;
        --color-azulhover: #84C5F6;
    }


    :checked {
        -webkit-appearance: none;
        background: #FFF;
        border: 2.5px solid var(--color-azul);
        transition: border 100ms ease-in;
        background-image: url('../img/Palomita.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 16px;
    }

    input[type="radio"]:checked {
        -webkit-appearance: none;
        background: #FFF;
        border: 1px solid var(--color-azul);
        transition: border 100ms ease-in;
        border-radius: 50px;
        background-image: url('../img/circuleChk.svg') !important;
        background-repeat: no-repeat;
        background-position: center !important;
        background-size: 100% !important;
    }

    #ContMenu3
    {
        display: none !important;
    }

    header {
        display: flex;
        height: 90px;
        align-items: center;
        background-color: #FFF;
    }
    
    #ContLogo { flex: 1; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;
        text-align: center;
    }

    #ContMenu {
        display: none;
    }

    #ContMenu2, #ContMenu3 {
        z-index: +1;
        position: absolute;
        width: 100%;
        height: unset;
        top: 80px !important;
        padding: 40px 0 !important;
        background-color: var(--color-azul);
        display: none;
        transition: background 300ms ease-out, color 300ms ease-out !important;
    }

        #ContMenu2.active, #ContMenu3.active {
            transition: background 300ms ease-out, color 300ms ease-out !important;
            display: block !important;
        }

        .OMenu1{
            font-size: 18px !important;
        }


        #ContMenu3 {
            height: unset;
            margin-top: 0px !important;
            top: 0 !important;
            padding-top: 20px;
        }

    #ContMenu3 img
    {
        display: none;
    }

    .Logo {
        height: auto !important; max-height: 40px !important; width: 180px !important; object-fit: contain; width: auto !important; max-width: 200px !important; object-fit: contain; display: block; margin: 0 auto;
        margin-left: 0; padding: 5px 0;
    }

    #ContMenu > ul {
        display: flex;
        flex: 1;
        justify-content: center;
        gap: 1.5rem;
        padding-left: 0 !important;
    }

    #ContMenu2 > ul > li {
        list-style: none;
        padding: 20px 0;
        text-align: center;
    }

        #ContMenu2 > ul > li > a {
            color: #FFF;
        }

    #ContMenu3 > ul > li {
        list-style: none;
        padding: 10px 0;
        text-align: center;
    }

    #ContMenu3 > ul > li > a {
        color: #FFF;
    }

    .OMenu1, .OMenu3 {
        display: block;
        font-family: 'Montserrat';
        font-size: 18px;
        text-decoration: none;
        color: #585858;
        padding: 10px 0;
    }

        .OMenu1:hover, .OMenu3:hover {
            font-family: 'Montserrat';
            font-size: 18px;
            text-decoration: none;
            color: var(--color-azulhover);
            padding: 1.2vw 0;
            transition: color 300ms ease-out, background-color 300ms ease-out;
        }

        .OMenu1 .imgLogoUsuario {
            height: 32px;
            width: auto;
            display: inline-block;
            vertical-align: middle;
            padding-left: 10px;
            margin-top: 0;
            padding-right: 0;
        }

    #MenuMobile {
        position: absolute;
        right: 15px;
        width: 40px;
        display: block !important;
    }
    
    #MenuSeguimiento {
        position: absolute;
        width: 10% !important;
        margin-left: 85.5% !important;
        display: none;
    }

    .MenuBtn, .MenuBtnS {
        display: block !important;
        width: 30px;
        height: 30px !important;
        background-size: 30px !important;
    }


    #Registrate, .Registrate {
        color: var(--color-azul);
        padding: 0.8vw 1.5vw;
        border: 1px solid var(--color-azul);
        border-radius: 3px;
    }

        #Registrate:hover, .Registrate:hover {
            color: #FFF;
            padding: 0.8vw 1.5vw;
            border: 1px solid var(--color-azulhover);
            background-color: var(--color-azulhover);
            border-radius: 3px;
            transition: color 300ms ease-out, background 300ms ease-out;
        }

    button {
        border-radius: 3px;
    }

    footer {
        background-color: #F2F2F2;
        height: auto;
        padding: 20px 0;
    }

        footer > div {
            align-items: center;
        }


            footer > div > ul {
                width: 95%;
                margin: auto;
                display: list-item;
                height: 9vw;
                align-items: center;
                justify-content: space-around;
                list-style: none;
            }

                footer > div > ul > li {
                    text-align: center;
                }

                    footer > div > ul > li > a {
                        display: none;
                    }

    .OMenuF {
        font-size: 4vw !important;
    }


    #QueOfrecemos2 {
        color: #B1B1B1;
    }

    #ComoFunciona2 {
        color: #B1B1B1;
    }

    #TC {
        display: block;
        color: #B1B1B1;
        font-size: 16px;
    }

    #AvisoPrivacidad {
        display: block;
        color: #B1B1B1;
        font-size: 16px;
    }
    
    input {
        height: auto !important; max-height: 40px !important; width: 180px !important; object-fit: contain; width: auto !important; max-width: 200px !important; object-fit: contain; display: block; margin: 0 auto;
        border: 1px solid #B1B1B1;
        border-radius: 2px;
        outline-color: var(--color-azulhover);
        padding-left: 2vw;
    }

        input[type="text"] {
            font-size: 16px;
            font-family: 'Montserrat', sans-serif;
            color: var(--color-azulhover);
            padding-left: 2vw;
        }


        input[type="password"] {
            font-size: 16px;
            font-weight: 800;
            font-family: 'Montserrat', sans-serif;
            color: var(--color-azulhover);
        }

        input[type="email"] {
            font-size: 16px;
            font-family: 'Montserrat', sans-serif;
            color: var(--color-azulhover);
        }

        input[type="date"] {
            background-color: #FFF;
        }

        input[type="radio"] {
            height: 19px !important;
            width: 19px !important;
        }

        input[type="checkbox"] {
            height: 5vw !important;
            width: 5vw !important;
        }

        input[type="number"]
        {
            font-size: 14px;
        }

    select {
        -webkit-appearance: none !important;
        background-image: url('../img/flechitaDropDown.svg');
        background-repeat: no-repeat;
        background-position: right;
        background-size: 10px;
    }
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 768px) {
    :checked {
        -webkit-appearance: none;
        background: #FFF;
        border: 2px solid var(--color-azul);
        transition: border 100ms ease-in;
        background-image: url('../img/palomita.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 1.2vw;
    }

    input[type="radio"]:checked {
        -webkit-appearance: none;
        background: #FFF;
        border: 2px solid var(--color-azul);
        transition: border 100ms ease-in;
        border-radius: 50px;
        background-image: url('../img/circuleChk.svg');
        background-repeat: no-repeat;
        background-position: center !important;
        background-size: 100% !important;
    }

    header {
        display: flex;
        height: 20vw;
        align-items: center;
        background-color: #FFF;
    }
    
    #ContLogo { flex: 1; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;
        text-align: center;
    }

    #ContMenu {
        display: none;
    }

    #ContMenu2, #ContMenu3 {
        z-index: +1;
        position: absolute;
        width: 100%;
        height: 60vw;
        margin-top: 0vw !important;
        top: 20vw;
        padding-top: 3vw !important;
        background-color: var(--color-azul);
        display: none;
        transition: background 300ms ease-out, color 300ms ease-out !important;
    }

        #ContMenu2
        {
            height: unset !important;
            padding: 10vw 0 !important;
        }


        #ContMenu2.active, #ContMenu3.active {
            transition: background 300ms ease-out, color 300ms ease-out !important;
            display: block !important;
        }

    #ContMenu3 {
        height: unset !important;
        margin-top: 0vw !important;
        padding: 10vw 0;
        top: 0 !important;
        align-items: center;
    }

        #ContMenu3 img
        {
            display: none;
        }

        .Logo {
            height: auto !important; max-height: 40px !important; width: 180px !important; object-fit: contain; width: auto !important; max-width: 200px !important; object-fit: contain; display: block; margin: 0 auto;
            margin-left: 0; padding: 5px 0;
        }

    #ContMenu > ul {
        display: flex;
        flex: 1;
        justify-content: center;
        gap: 1.5rem;
    }


    #ContMenu2 > ul > li {
        list-style: none;
        padding: 2vw 0;
        text-align: center;
    }

        #ContMenu2 > ul > li > a {
            color: #FFF;
        }

    #ContMenu3 > ul
    {
        margin-top: 0;
    }

    #ContMenu3 > ul > li {
        list-style: none;
        padding: 5px 0;
        text-align: center;
    }

    #ContMenu3 > ul > li > a {
        color: #FFF;
    }

    .OMenu1, .OMenu3{
        display: block;
        font-family: 'Montserrat';
        font-size: 16px;
        text-decoration: none;
        color: #585858;
        padding: 1.2vw 0;
    }

    .OMenu1 {
        font-size: 18px !important;
    }

        .OMenu1:hover, .OMenu3:hover {
            font-family: 'Montserrat';
            font-size: 16px;
            text-decoration: none;
            color: var(--color-azulhover);
            padding: 1.2vw 0;
            transition: background-color 300ms ease-out, color 300ms ease-out;
        }

        .OMenu1 .imgLogoUsuario {
            padding-right: 0px;
        }
        
    #MenuMobile {
        position: absolute;
        right: 15px;
        width: 40px;
        display: block !important;
    }

    #MenuSeguimiento {
        position: absolute;
        width: 10% !important;
        margin-left: 85.5% !important;
        display: none;
    }

    .MenuBtn, .MenuBtnS {
        display: block !important;
        width: 8vw;
        height: 8vw !important;
        background-size: 8vw !important;
    }

    #Registrate, .Registrate {
        color: var(--color-azul);
        padding: 0.8vw 1.5vw;
        border: 1px solid var(--color-azul);
        border-radius: 3px;
    }

        #Registrate:hover, .Registrate:hover {
            color: #FFF;
            padding: 0.8vw 1.5vw;
            border: 1px solid var(--color-azulhover);
            background-color: var(--color-azulhover);
            border-radius: 3px;
            transition: color 300ms ease-out, background 300ms ease-out;
        }

    button {
        border-radius: 3px;
    }

    footer {
        background-color: #F2F2F2;
        height: 40vw;
        padding: 25px 0;
        text-align: center;
    }

        footer > div {
            align-items: center;
        }


            footer > div > ul {
                width: 60%;
                margin: auto;
                display: list-item;
                height: 9vw;
                align-items: center;
                list-style: none;
            }

                footer > div > ul > li {
                    text-align: center !important;
                }

                    footer > div > ul > li > a {
                        display: none;
                        width: 100%;
                        font-size: 14px !important;
                    }

    .OMenuF{
        font-size: 3vw!important;
    }

    #QueOfrecemos2 {
        color: #B1B1B1;
    }

    #ComoFunciona2 {
        color: #B1B1B1;
    }

    #TC {
        display: block;
        color: #B1B1B1;
        font-size: 14px;
        width: 100%;
        margin: auto;
    }

    #AvisoPrivacidad {
        display: block;
        color: #B1B1B1;
        font-size: 14px;
        width: 100%;
        margin: auto;
    }

    option 
    {
        font-size: 14px !important;
    }

    input {
        height: auto !important; max-height: 40px !important; width: 180px !important; object-fit: contain; width: auto !important; max-width: 200px !important; object-fit: contain; display: block; margin: 0 auto;
        border: 1px solid #B1B1B1;
        border-radius: 2px;
        outline-color: var(--color-azulhover);
        padding-left: 10px;
    }

        input[type="text"] {
            font-size: 14px !important;
            font-family: 'Montserrat', sans-serif;
            color: var(--color-azulhover);
        }

        input[type="password"] {
            font-size: 14px;
            font-weight: 800;
            font-family: 'Montserrat', sans-serif;
            color: var(--color-azulhover);
        }

        input[type="email"] {
            font-size: 14px;
            font-family: 'Montserrat', sans-serif;
            color: var(--color-azulhover);
        }
        input[type="date"]
        {
            background-color: #FFF;
        }

        input[type="radio"] {
            height: 23px !important;
            width: 23px !important;
        }

        input[type="checkbox"] {
            height: 22px !important;
            width: 22px !important;
        }

        input[type="number"] {
            font-size: 12px;
        }

    select {
        -webkit-appearance: none !important;
        background-image: url('../img/flechitaDropDown.svg');
        background-repeat: no-repeat;
        background-position: right;
        background-position: 5px 5px 0 0 !important;
        background-size: 15px;
    }
}

/*XTRA-Small devices (landscape phones, 576px and up)*/
@media (min-width: 0px) and (max-width: 360px) {
    .Panel-muestra-contrasena .icono { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); margin: 0 !important;
        right: 5px;
        top: 5px;
       
    }

        .Panel-muestra-contrasena .icono a i {
            font-size: 18px;
        }

    input[type="number"] {
        font-size: 13px;
    }
}

/*XTRA-Small devices (landscape phones, 576px and up)*/
@media (min-width: 360.1px) and (max-width: 576px) {
    .Panel-muestra-contrasena .icono { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); margin: 0 !important;
        right: 10px;
        top: 6px;
        margin-top: 0vw !important;
    }

        .Panel-muestra-contrasena .icono a i {
            font-size: 20px;
        }    
}

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 768px) {
    .Panel-muestra-contrasena .icono { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); margin: 0 !important;
        right: 14px !important;
        top: 18px !important;
    }

        .Panel-muestra-contrasena .icono a i {
            font-size: 28px !important;
        }  
}

/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .Panel-muestra-contrasena .icono { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); margin: 0 !important;
        right: 6px;
        top: -4px;

    }

    input[type="number"] {
        font-size: 16px;
    }

        .Panel-muestra-contrasena .icono a i {
            font-size: 13px;
        }
        
    .OMenu1 .imgLogoUsuario {
        height: 28px;
        width: auto;
        display: inline-block;
        vertical-align: middle;
        padding-left: 7px;
        margin-top: 0;
        padding-right: 5px;
    }

    #ContMenu > ul {
        gap: 1.5rem;
    }
}

/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) {
    .Panel-muestra-contrasena .icono { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); margin: 0 !important;
        right: 5px;
        top: 1px;
    }

        .Panel-muestra-contrasena .icono a i {
            font-size: 15px;
        } 
        
    :checked
    {
        background-size: 10px;
    }

    input[type="radio"]:checked
    {
        background-size: 100% !important;
    }

    input[type="number"] {
        font-size: 18px;
    }
}

@media (min-width: 1200px) and (max-width:1311px) {
    .Panel-muestra-contrasena .icono { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); margin: 0 !important;
        right: 10px;
        top: 5px;
    }

        .Panel-muestra-contrasena .icono a i {
            font-size: 18px;
        }

    input[type="number"] {
        font-size: 19px;
    }
}

/*// Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .Panel-muestra-contrasena .icono { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); margin: 0 !important;
        right: 10px;
        top: 5px;
    }

        .Panel-muestra-contrasena .icono a i {
            font-size: 18px;
        }

    input[type="number"] {
        font-size: 18px;
    }
}

/* Panel de Contacto - Vertical en Mobile */
@media only screen and (max-width: 768px) {
    html body form div.ContContactanos,
    html body div.ContContactanos,
    body div.ContContactanos,
    .ContContactanos {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: auto !important;
        padding: 5px 2px !important;
        right: 5px !important;
        bottom: 5px !important;
        display: block !important;
    }

        html body form div.ContContactanos div.ContactoImagenes,
        html body div.ContContactanos div.ContactoImagenes,
        body div.ContContactanos div.ContactoImagenes,
        .ContContactanos .ContactoImagenes {
            display: flex !important;
            flex-direction: column !important;
            flex-wrap: nowrap !important;
            gap: 3px !important;
            justify-content: center !important;
            align-items: center !important;
        }

        html body form div.ContContactanos p,
        html body div.ContContactanos p,
        body div.ContContactanos p,
        .ContContactanos p {
            font-size: 9px !important;
            padding-top: 3px !important;
            padding-bottom: 3px !important;
            margin-bottom: 3px !important;
            display: block !important;
        }

        html body form div.ContContactanos div.ContactoImagenes a,
        html body form div.ContContactanos div.ContactoImagenes a img,
        html body div.ContContactanos div.ContactoImagenes a,
        html body div.ContContactanos div.ContactoImagenes a img,
        body div.ContContactanos div.ContactoImagenes a,
        body div.ContContactanos div.ContactoImagenes a img,
        .ContContactanos .ContactoImagenes a,
        .ContContactanos .ContactoImagenes a img {
            width: 24px !important;
            height: 24px !important;
            min-width: 24px !important;
            min-height: 24px !important;
            max-width: 24px !important;
            max-height: 24px !important;
            margin: 0 !important;
            padding: 0 !important;
            display: block !important;
        }
}