/* Definición del tamaño de la caja */
*{
    box-sizing: border-box;
}

/*Generales*/
/*Fondo de pantalla*/
#pantInd {
    background-color: #FCFCFA;
    font-family: sans-serif;
    margin: 0;
}
/*Cabecera*/
#cabecera {
    height: auto;
    width: 100%;
}
#infoInd {
    width: 100%;
    height: 30px;
    background-color:#40A8E4;
}
#fb1 {
    display: block;
    float: right;
    height: 25px;
    width: auto;
    padding-top: 5px;
    padding-right: 60px;
    filter: invert(1);
}
#cabecera p {
    margin: 0;
    display: block;
    float: left;
    height: 25px;
    padding-top: 5px;
    padding-left: 30px;
    color: #FFFFFF;
}

/*Logo de CIEELL*/
#logoInd {
    float: left;
    width: 100%;
}
.logoTercio2 {
    margin-left: calc(100%/3);
    float: left;
    display: block;
    width: calc(100%/3);
}
.logoTercio3 {
    float: left;
    display: block;
    width: calc(100%/3);
}
#logoInd img {
    display: block;
    height: 200px;
    width: auto;
    margin: auto;
}
#certiInterna {
    padding-top: 75px;
    display: block;
    width: 50%;
    float: left;
    text-align: center;
}
#certiInterna a {
    text-decoration-line: none;
    color: #051890;
    font-weight: bold;
    display: block;
    width: 100%;
    padding: .5em;
    border: 1px solid #aeaaad;
    border-radius: .5em;
    margin: .25em;
    background-color: #FCFCFA;
    transition-property: background-color;
    transition-duration: 0.3s;
    font-size: medium;
}
#certiInterna a:hover {
    background-color: #F2F2F0;
}


/*Menú de acciones*/
#seccionMenu {
    float: left;
    width: 100%;
    background-color: #FCFCFC;
    margin-bottom: 40px;
}
#menu {
    float: left;
    margin-left: 15%;
    list-style: none;
    width: 70%;
    }
.opcionMenu {
    display: block;
    float: left;
    width: calc(100%/5);
    text-align: center;
}
.opcionMenu a {
    text-decoration-line: none;
    color: #051890;
    font-weight: bold;
    display: block;
    width: 100%;
    padding: .5em;
    border: 1px solid #aeaaad;
    border-radius: .5em;
    margin: .25em;
    background-color: #FCFCFA;
    transition-property: background-color;
    transition-duration: 0.3s;
    font-size: medium;
}
.opcionMenu a:hover {
    background-color: #F2F2F0;
}

/*Fotos*/
#fotos {
    float: left;
    width: 100%;
    text-align: center;
}
.foto {
    display: block;
    height: 300px;
    width: auto;
    margin: auto;
}
/*Informaciòn*/
.renglon {
    float: left;
    width: 100%;
    height: auto;
}
.dAzul {
    float: left;
    height: auto;
    min-height: 500px;
    width: 50%;
    margin: 0%;
    padding: 60px;
}
.dAzul {
    background-color: #22689E;
}
.dAzul h1 {
    color: #FFFFFF;
}
.dAzul h2 {
    color: #FFFFFF;
}
.dAzul p {
    font-size: 1.25em;
    color: #FFFFFF;
    text-align: justify;
}
.dAzul li {
    font-size: 1.25em;
    color: #FFFFFF;
    text-align: justify;
}
.dFoto {
    display: block;
    float: left;
    height: auto;
    min-height: 500px;
    width: 50%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}
.fotoInfo {
    object-fit: cover;
    min-width: 100%;
    min-height: 100%;
}
.atribuir {
    position:absolute;
    bottom: 6px;
    color: black;
}
.dBla {
    float: left;
    height: auto;
    min-height: 250px;
    width: 50%;
    margin: 0%;
    padding: 60px;
}
.dBla h2 {
    color: #051890;
    text-align: justify;
}
.dBla li {
    color: #051890;
    text-align: justify;
    font-size: larger;
}
.dBla p {
    color: #051890;
    text-align: justify;
    font-size: larger;
}

.dBla h1 {
    color: #051890;
}

.dBlaCent {
    text-align: center;
}
.dCom {
    height: auto;
    width: 100%;
    padding: 40px 20% 40px 20%;
}
.dCom h1 {
    text-align: center;
}
.dCom p {
    text-align: justify;
}
.cBla {
    height: auto;
    width: 50%;
    margin: auto;
    text-align: center;
}
.cBla h1 {
    color: #051890;
}
.bBla {
    height: auto;
    width: 50%;
    margin: auto;
    text-align: justify;
}
.bBla h1, p {
    color: #051890;
}

.eBla {
    height: auto;
    width: 80%;
    margin: auto;
    margin-bottom: 10px;
}

/*Construcción*/
#construccion {
    float: left;
    width: 100%;
    height: 10ex;
    text-align: center;
}
#construccion p {
    padding-top: 2em;
    color: #CF1B15;
}

/*Mapa de contacto*/
#mapa {
    float: left;
    height: 600px;
    width: 50%;
    margin: 0%;
    padding: 60px;
}
#gmap {
    height: 100%;
    width: 100%;
}
#buscaMapa {
    width: 50%;
    height: 10px;
    text-align: center;
}

#buscaMapa h1 {
    color: #051890;
}

/*Carrusel*/
.mitad {
    display: block;
    float: left;
    width: 50%;
    height: auto;
}

.mensajeCentral {
    display: block;
    float: left;
    width: 100%;
    height: auto;
    text-align: center;
}

.mensajeCentral h1 {
    color: #051890;
}
.mensajeCentral h2 {
    color: #051890;
}
.carrusel {
    display: block;
    float: left;
    height: auto;
    min-height: 400px;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}
.botonCarrusel {
    display: block;
    float: left;
    height: auto;
    min-height: 400px;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}
.botonHonorario {
    display: block;
    float: left;
    height: auto;
    min-height: 400px;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}
.carrusel {
    width: 20%;
    margin-bottom: 20px;
}
.imagen {
    display: none;
    width: 100%;
    height: auto;
}
.botonCarrusel {
    width: 40%;
}
.botonHonorario {
    width: 30%;
}
#botonDerecha {
    background-image: url("../figura/derecha.png");
    height: 40px;
    width: 40px;
    margin: 0;
    background-color: #FCFCFA;
    border: none;
    transition-duration: 0.5s;
    float: left;
}
#botonDerecha:active {
    background-image: url("../figura/derechaActiv.png");
}

#botonIzquierda {
    background-image: url("../figura/izquierda.png");
    height: 40px;
    width: 40px;
    margin: 0;
    background-color: #FCFCFA;
    border: none;
    transition-duration: 0.5s;
    float: right;
}
#botonIzquierda:active {
    background-image: url("../figura/izquierdaActiv.png");
}
/*Miembros*/
.miembro {
    display: none;
    width: 90%;
    height: 450px;
    margin: auto;
    text-align: center;
    border: 2px solid #051890;
    border-radius: 25px;
    background-color: #FFFFFF;
}
.miembro p {
    color: #051890;
}
.imMiembro {
    width: 200px;
    height: auto;
    padding: 10px;
}
/*Honorarios*/
.honorario {
    display: none;
    width: 80%;
    height: 450px;
    margin: auto;
    text-align: center;
    border: 2px solid #051890;
    border-radius: 25px;
    background-color: #FFFFFF;
}
.honorario p {
    color: #051890;
}

/*Datos a través de QR*/
.dataQr {
    float: left;
    width: 90%;
    height: 450px;
    margin: auto;
}
.qrMiem {
    float: left;
    width: 50%;
    height: auto;
}
.fotMiem {
    float: right;
    width: auto;
    height: 400px;
    margin: auto;
    padding-right: 20px;
}
.qrInfo {
    float: right;
    width: 40%;
    height: auto;
}
.fila {
    display: block;
    width: 100%;
}
.elemnto {
    width: 50%;
}
.valor {
    width: 50%;
}
/*Video de afiliate*/
#videoAfiliate {
    display: block;
    width: 50%;
    height: auto;
    margin: auto;
}

/*Tríptico*/
#triptico {
    display: block;
    width: 100%;
    height: auto;
    margin: auto;
}


/*Pie*/
.pie {
    float: left;
    width: 100%;
    background-color: #CF1B15;
    padding-bottom: 10px;
}
.pie h1 {
    color: #FFFFFF;
    font-weight: normal;
    font-size: medium;
    border-bottom: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    padding: .5em 0 .5em 0;
}
.pie p {
    color: #FFFFFF;
}
#fb2 {
    display: block;
    height: 70px;
    width: auto;
    padding-top: 30px;
    filter: invert(1);
}
.pie a {
    text-decoration-line: none;
    color: #FFFFFF;
}


/*Para cumpoutadora*/
/*Menú de acciones*/

/*Pie*/
.elementoPie {
    display:block;
    float: left;
    width: 20%;
    margin-left: 10%;
}

/*Figura de contacto*/
#linea {
    float: left;
    width: 30%;
    height: 10px;
    padding-top: 10px;
    background-color: #22689E;
}


/*Para tableta1*/
@media only screen and (max-width: 1280px)
{
    /*Carrusel*/
    .carrusel {
        width: 40%;
    }
    .botonCarrusel {
    width: 30%;
    }
    .botonHonorario {
    width: 10%;
    }
    /*Carrusel del miembros*/
    .miembro {
        width: 90%;
        height: auto;
    }
    .honorario {
        width: 90%;
        height: auto;
    }

}


/*Para tableta2*/
@media only screen and (max-width: 1024px)
{
    /*Tamaño del logo*/
    #logoInd img {
        height: 200px;
        width: auto;
    }
    /*Botones de menú*/
    .opcionMenu {
        width: 50%;
    }

    /*Pie*/
    .elementoPie {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
    }

    /*Fotos*/
    .foto {
        height: 200px;
    }

    /*Informaciòn*/
    .dAzul {
        padding: 15px;
        width: 100%;
    }
    .dBla {
        padding: 15px;
        width: 100%;
        min-height: 50px;
    }
    .dFoto {
        display: none;
    }

    /*Mapa de contacto*/
    #mapa {
        width: 70%;
        height: 250px;
        padding: 10px;
    }
    #buscaMapa {
        width: 70%;
    }
    /*Carrusel*/
    .carrusel {
        width: 50%;
    }
    .botonCarrusel {
    width: 25%;
    }
    .botonHonorario {
    width: 10%;
    }
    /*Carrusel del miembros*/
    .miembro {
        width: 90%;
        height: auto;
    }
    .honorario {
        width: 90%;
        height: auto;
    }
}

/*Para celular*/
@media only screen and (max-width: 480px)
{
    /*Tamaño del logo*/
    #logoInd img {
        height: 120px;
        width: auto;
    }
    .logoTercio2 {
        margin: auto;
        width: 100%;
    }
    /*Botón de certificación*/
    .logoTercio3 {
        width: 100%;
    }

    #certiInterna {
        padding-top: 30px;
        margin-left: 15%;
        width: 70%;
       }

    /*Botones de menú*/
    .opcionMenu {
        width: 100%;
    }

    /*Pie*/
    .elementoPie {
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
    }

    /*Fotos*/
    .foto {
        height: 100px;
    }

    /*Informaciòn*/
    .dAzul {
        padding: 5px;
        width: 100%;
        min-height: 50px;
    }
    .dBla {
        padding: 5px;
        width: 100%;
        min-height: 50px;
    }
    .dFoto {
        display: none;
    }

    /*Mapa de contacto*/
    #mapa {
        width: 100%;
        height: 200px;
        padding: 10px;
    }
    #buscaMapa {
        width: 100%;
        height: auto;
        padding-bottom: 10px;
    }

    /*Carrusel*/
    .mitad {
    width: 100%;
    }
    .carrusel {
        width: 100%;
        margin-bottom: 10px;
    }
    .botonCarrusel {
        display: none;
    }
    .botonHonorario {
        display: none;
    }
    /*Carrusel del miembros*/
    .miembro {
        width: 90%;
        height: auto;
        margin-bottom: 10px;
    }
    .honorario {
        width: 90%;
        height: auto;
        margin-bottom: 10px;
    }

    /*Datos QR*/
    .dataQr {
        width: 100%;
        height: 550px;
    }
    .qrMiem {

        width: 100%;
        
    }
    .fotMiem {
        height: 200px;
        padding-right: 50px;
    }
    .qrInfo {
        width: 100%;
        height: 300px;
        float: none;
        margin: auto;
        padding-left: 10px;
    }
    .elemnto {
    width: 100%;
    }
    .valor {
        width: 100%;
    }
    
}