.body {
    font-family: 'Muli', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
    width: 100%;
}

body:focus {
    outline: none;
}



.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #f6f542;
    z-index: 2;
    height: 80px;
    overflow: hidden;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    transition: height 0.3s;
    line-height: 100px;
}

    .header.shrink {
        height: 100px;
        line-height: 80px;
    }

    .header h1 {
        font-size: 30px;
        font-weight: normal;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }

    .header.shrink h1 {
        font-size: 24px;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        transition: all 0.3s;
    }

.css-button {
    text-align: center;
    font-family: Helvetica;
    font-weight: bold;
    color: black;
    font-size: calc(0.625em + 0.625vw); /*17px*/
    border-radius: 7px;
    border: 1px #ffaa22 solid;
    background: linear-gradient(183deg, #ffed64 0%, #FCE121 58%);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    height: calc(1.625em + 1.625vh);
    width: calc(4.125em + 4.125vw); /*108px;*/
    position: relative;
    top: -15px;
}

    .css-button:hover {
        background: linear-gradient(183deg, #FCE121 0%, #ffed64 58%);
        border: 1px #000000 solid;
    }

#cstitulo {
    color: white;
    text-shadow: 2px 2px 2px #2E2D2D;
    font-size: 30px;
    font-family: Helvetica;
    font-weight: bold;
    top: -12px;
}

.item1 {
    grid-area: linea1;
    height: 18px;
    color: white;
    font-size: calc(0.5em + 0.5vw);
    font-weight: bold;
    font-family: Helvetica;
    text-shadow: 1px 1px 1px #2E2D2D;
}

.item2 {
    grid-area: linea2;
    height: 5px;
    color: white;
    font-size: calc(1em + 1vw);
    font-weight: bold;
    font-family: Helvetica;
    text-shadow: 1px 1px 1px #2E2D2D;
}

.grid-container {
    display: grid;
    grid-template-areas: 'linea1' 'linea2';
    grid-gap: 10px;
    width: 250px;
    position: relative;
    top: -25px;
}

    .grid-container > div {
        text-align: center;
    }

.grid-titulo {
    display: grid;
    grid-template-areas: 'titulo1 titulo3' 'titulo2 titulo3';
    grid-gap: 10px;
    position: relative;
    top: -10px;
    left: -15px;
}

.itemtit1 {
    grid-area: titulo1;
    height: 10px;
    font-size: calc(0.688em + 0.5vw);
}

.itemtit2 {
    grid-area: titulo2;
    height: 10px;
    font-size: calc(0.688em + 0.5vw);
}

.itemtit3 {
    grid-area: titulo3;
    height: 5px;
    font-size: calc(1.375em + 1.375vw);
    position: relative;
    top: 10px;
    left: -8px;
}

.buscar {
    background: #404040;
    height: 250px;
    color: white;
    position: relative;
    top: 80px;
}

.bustitulo {
    color: white;
    text-shadow: 2px 2px 2px #2E2D2D;
    font-size: 50px;
    font-family: Helvetica;
    font-weight: bold;
    top: -12px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.caja-input {
    /*box-shadow: 15px 15px 15px #0f5a89;*/
    border-color: #404040;
    border-width: 20px;
    border-style: solid;
    z-index: 1;
}

.bus-input {
    height: 50px;
    font-size: calc(0.57em + 0.57vw);
    font-family: Helvetica;
    font-weight: bold;
}

.bus-input2 {
    height: 38px;
    font-size: calc(0.50em + 0.50vw);
    font-family: Helvetica;
    font-weight: bold;
    width: 100px;
    position: relative;
    left: 50px;
}

.css-button-consultar {
    font-family: Helvetica;
    color: black;
    font-size: 18px;
    border-radius: 7px;
    border: 1px #ffaa22 solid;
    padding: 10px 21px;
    background: linear-gradient(183deg, #ffed64 0%, #FCE121 58%);
    cursor: pointer;
    justify-content: flex-end;
    height: 50px;
    width: 130px;
}

    .css-button-consultar:hover {
        background: linear-gradient(183deg, #FCE121 0%, #ffed64 58%);
        border: 1px #000000 solid;
    }

.css-button-consultar3 {
    font-family: Helvetica;
    color: black;
    font-size: 18px;
    border-radius: 7px;
    border: 1px #ffaa22 solid;
    padding: 0px 0px;
    background: linear-gradient(183deg, #ffed64 0%, #FCE121 58%);
    cursor: pointer;
    /*display: inline-flex;*/
    justify-content: flex-end;
    height: 40px;
    width: 80px;
    text-align: center;
}

.css-button-consultar3:hover {
    background: linear-gradient(183deg, #FCE121 0%, #ffed64 58%);
    border: 1px #000000 solid;
}

.css-button-consultar2 {
    font-family: Helvetica;
    color: black;
    font-size: 18px;
    border-radius: 7px;
    border: 1px #ffaa22 solid;
    padding: 10px 21px;
    background: linear-gradient(183deg, #ffed64 0%, #FCE121 58%);
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    height: 38px;
    width: 20px;
    position: relative;
    left: 50px;
}

    .css-button-consultar2:hover {
        background: linear-gradient(183deg, #FCE121 0%, #ffed64 58%);
        border: 1px #000000 solid;
    }

.css-condiciones {
    font-family: 'Helvetica Neue';
    font-size: calc(0.4em + 0.4vw);
    text-align: center;
}

.content-listado {
    background-color: #EEEDED;
    position: relative;
    top: 80px;
}

.css-listado-titulo {
    font-family: 'Helvetica Neue';
    font-weight: bold;
    color: #838282;
    font-size: 18px;
}

.footer {
    background-color: #404040;
}

.footer-dark {
    padding: 50px 0;
    color: #f0f9ff;
    background-color: #404040;
}

    .footer-dark h3 {
        margin-top: 0;
        margin-bottom: 12px;
        font-weight: bold;
        font-size: 16px;
    }

    .footer-dark ul {
        padding: 0;
        list-style: none;
        line-height: 1.6;
        font-size: 14px;
        margin-bottom: 0;
    }

        .footer-dark ul a {
            color: inherit;
            text-decoration: none;
            opacity: 0.6;
        }

            .footer-dark ul a:hover {
                opacity: 0.8;
            }

@media (max-width:767px) {
    .footer-dark .item:not(.social) {
        text-align: center;
        padding-bottom: 20px;
    }
}

.footer-dark .item.text {
    margin-bottom: 36px;
}

@media (max-width:767px) {
    .footer-dark .item.text {
        margin-bottom: 0;
    }
}

.footer-dark .item.text p {
    opacity: 0.6;
    margin-bottom: 0;
}

.footer-dark .item.social {
    text-align: center;
}

@media (max-width:991px) {
    .footer-dark .item.social {
        text-align: center;
        margin-top: 20px;
    }
}

.footer-dark .item.social > a {
    font-size: 20px;
    width: 36px;
    height: 36px;
    line-height: 36px;
    display: inline-block;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.4);
    margin: 0 8px;
    color: #fff;
    opacity: 0.75;
}

    .footer-dark .item.social > a:hover {
        opacity: 0.9;
    }

.footer-dark .copyright {
    text-align: center;
    padding-top: 24px;
    opacity: 0.3;
    font-size: 13px;
    margin-bottom: 0;
}

.btn-secondary:focus {
    box-shadow: 0 0 0 0rem rgba(108, 117, 125, .5)
}

.close:focus {
    box-shadow: 0 0 0 0rem rgba(108, 117, 125, .5)
}

.mt-200 {
    margin-top: 200px
}

.titulo-alta {
    background-color: #0c66a1;
    color: white;
    text-shadow: 1px 1px 1px black;
    font-size: 14px;
}

.cuerpo-alta {
    color: black;
}

.bienvenida-alta {
    text-align: center;
}

.chk-alta {
    font-size: 14px;
}

.imgdirectorio {
    width: 100%;
    height: auto;
}

.imgeleccion {
    width: 100px;
    height: 100px;
}

.imgdirectoriolista {
    max-width: 100%;
    height: auto;
}

.css-lblinfo {
    border: none;
    text-align: left;
    color: red;
    font-size: small;
    font-weight: 600;
    border-radius: 5px;
    width: 40ch;
}

.css-button-directorio {
    display: flex;
    align-items: center; /* vertically aligned! */
    justify-content: center;
}

.css-imagen-directorio {
    display: flex;
    align-items: center; /* vertically aligned! */
    justify-content: center;
}

/* MODAL DE CONTACTO GENERAL*/
.modal-img {
    margin-top: -75px;
    width: 23%;
    border: 5px solid white;
    border-radius: 50%;
    padding: 5px;
    background: white;
}

.modal-titulo {
    margin-top: -55px;
}

.modal-header {
    background-color: #404040;
    color: white;
}

.nom-principal {
    text-align: right;
    align-items:flex-end;
}

.css-button-contactar {
    font-family: 'Helvetica Neue' Black;
    font-weight: bold;
    color: black;
    font-size: 18px;
    border-radius: 7px;
    border: 1px #ffaa22 solid;
    padding: 5px 15px;
    background: linear-gradient(183deg, #ffed64 0%, #FCE121 58%);
    text-shadow: 1px 1px 1px white;
    cursor: pointer;
    display: inline-flex;
    justify-content: flex-end;
    height: 40px;
    width: 130px;
    position: relative;
    top: -10px;
}

    .css-button-contactar:hover {
        background: linear-gradient(183deg, #FCE121 0%, #ffed64 58%);
        border: 1px #000000 solid;
        color: black;
    }

.btn {
    color: black;
}

div.valoracion {
    position: absolute;
    overflow: hidden;
    display: inline-block;
    top: -30px;
}

    div.valoracion input {
        position: absolute;
        top: -30px;
    }

    div.valoracion label {
        float: right;
        color: #F1C40F;
        width: 23px;
        font-size: 25px;
    }

.css-button-listado {
    font-family: 'Helvetica Neue' Black;
    font-weight: bold;
    color: #0c66a1;
    font-size: 18px;
    border-radius: 7px;
    border: 1px #0c66a1 solid;
    padding: 5px 15px;
    text-shadow: 1px 1px 1px white;
    cursor: pointer;
    display: inline-flex;
    justify-content: flex-end;
}

    .css-button-listado:hover {
        background: linear-gradient(183deg, #FCE121 0%, #ffed64 58%);
        border: 1px #000000 solid;
        color: black;
    }

.css-button-listado2 {
    background: white;
    font-family: 'Helvetica Neue' Black;
    font-weight: bold;
    color: black;
    font-size: 18px;
    border-radius: 7px;
    border: 1px black solid;
    padding: 5px 15px;
    text-shadow: 1px 1px 1px white;
    cursor: pointer;
    display: inline-flex;
    justify-content: flex-end;
}

    .css-button-listado2:hover {
        background: linear-gradient(183deg, #FCE121 0%, #ffed64 58%);
        border: 1px #000000 solid;
        color: black;
    }

.css-button-listado3 {
    font-family: 'Helvetica Neue' Black;
    font-weight: bold;
    color: black;
    font-size: 18px;
    border-radius: 7px;
    border: 1px black solid;
    padding: 5px 15px;
    text-shadow: 1px 1px 1px white;
    cursor: pointer;
    display: inline-flex;
    justify-content: flex-end;
    background: linear-gradient(183deg, #ffed64 0%, #FCE121 58%);
}

    .css-button-listado3:hover {
        background: linear-gradient(183deg, #FEF090 0%, #ffed64 58%);
        border: 1px #000000 solid;
        color: #5F5F5F;
    }

.card-premium {
    color: rgb(250,202,9);
    text-shadow: 1px 1px 1px #2E2D2D;
    font-size: 22px;
}


/*********    PLACEHOLDER SE SUBE EL TITULO     ********/
/*input box 10------------------------------------------*/

.field {
    position: relative;
    margin-bottom: 15px;
}

    .field label::before {
        content: attr(title);
        position: absolute;
        top: 0;
        left: 15px;
        line-height: 40px;
        font-size: 14px;
        color: #777;
        transition: 300ms all;
    }

    .field input {
        width: 100%;
        line-height: 40px;
        padding: 0 15px;
        box-sizing: border-box;
        font-size: 14px;
        color: #222;
        border: 1px solid #ccc;
        border-radius: 3px;
    }

        .field input:focus {
            outline: 0;
            border-color: blue;
        }

        .field input:valid + label::before {
            line-height: 20px;
            font-size: 12px;
            top: -10px;
            background: #fff;
            padding: 0 6px;
            left: 9px;
            content: attr(data-title);
        }

        .field input:focus + label::before {
            line-height: 20px;
            font-size: 12px;
            top: -10px;
            background: #fff;
            color: blue;
            padding: 0 6px;
            left: 9px;
        }

    .field textarea {
        width: 100%;
        line-height: 20px;
        padding: 0 15px;
        box-sizing: border-box;
        font-size: 14px;
        color: #222;
        border: 1px solid #ccc;
        border-radius: 3px;
    }

        .field textarea:focus {
            outline: 0;
            border-color: blue;
        }

        .field textarea:valid + label::before {
            line-height: 10px;
            font-size: 12px;
            top: -8px;
            background: #fff;
            padding: 0 6px;
            left: 9px;
            content: attr(data-title);
        }

        .field textarea:focus + label::before {
            line-height: 10px;
            font-size: 12px;
            top: -8px;
            background: #fff;
            color: blue;
            padding: 0 6px;
            left: 9px;
        }

/***** TERMINA PLACEHOLDER  **************/
/********************************************************/
.responsive {
    width: 100%;
    height: auto;
    margin: 1%;
}

.texto-encima {
    position: absolute;
    top: 10px;
    left: 10px;
}

.texto-centrado {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.appWhatsapp {
    position: fixed;
    right: 26px;
    bottom: 50px;
    width: 60px;
    z-index: 1000;
}

    .appWhatsapp img {
        width: 100%;
        height: auto;
    }
/***********************************************/
/***************** MINI SITIO 1  **************/
#portada1 {
    background-image: url('../../images/back1.jpg');
}

@media screen and (min-width: 500px) and (max-width: 700px) {
    #portada1 {
        background-image: url('../../images/back1-1000.jpg');
    }
}

@media screen (max-width: 499px) {
    #portada1 {
        background-image: url('../../images/back1-600.jpg');
    }
}

.headermini1 {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 15px 20px;
    background-color: rgb(244,208,63);
    font-size: 20px;
    color: #FFFFFF;
    height: 80px;
}

.footmini1 {
    background-color: rgb(244,208,63);
    height: 50px;
    color: black;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
}

.sit1nomdes {
    text-align: left;
    color: rgb(0,0,0);
    font-size: calc(0.4em + 3vw);
    font-family: 'Helvetica Neue',sans-serif;
    text-shadow: 1px 1px 1px #F7E9B3;
}

.sit1cuadro {
    color: white;
    font-size: 18px;
    font-family: 'Helvetica Neue',sans-serif;
    top: 10px;
    width: 50%;
}

.sit1titular {
    text-align: left;
    color: white;
    font-size: 33px;
    font-family: 'Helvetica Neue',sans-serif;
    text-shadow: 1px 1px 1px #000000;
}

.sit1detalle {
    text-align: left;
    color: white;
    font-size: 20px;
    font-family: 'Helvetica Neue',sans-serif;
    text-shadow: 1px 1px 1px #000000;
}

/***********************************************/
/***************** MINI SITIO 2  **************/
#portada2 {
    background-image: url('../../images/back2.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

@media screen and (min-width: 500px) and (max-width: 700px) {
    #portada2 {
        background-image: url('../../images/back2-1000.jpg');
    }
}

@media screen (max-width: 499px) {
    #portada2 {
        background-image: url('../../images/back2-600.jpg');
    }
}

.headermini2 {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 15px 20px;
    background-color: rgba(0,0,0,.5);
    font-size: 20px;
    color: #FFFFFF;
    height: 80px;
}

.footmini2 {
    background-color: rgba(0,0,0,.5);
    height: 50px;
    color: white;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
}

.sit2nomdes {
    text-align: left;
    color: white;
    font-size: calc(0.4em + 3vw);
    font-family: 'Helvetica Neue',sans-serif;
    text-shadow: 1px 1px 1px #000000;
}

.sit2cuadro {
    color: black;
    font-size: 18px;
    font-family: 'Helvetica Neue',sans-serif;
    top: 10px;
    width: 50%;
}

.sit2titular {
    background-color: rgba(0,0,0,.5);
    text-align: left;
    color: white;
    font-size: 33px;
    font-family: 'Helvetica Neue',sans-serif;
    text-shadow: 1px 1px 1px #000000;
}

.sit2detalle {
    background-color: rgba(0,0,0,.5);
    text-align: left;
    color: white;
    font-size: 20px;
    font-family: 'Helvetica Neue',sans-serif;
    text-shadow: 1px 1px 1px #000000;
}

/***********************************************/
/***************** MINI SITIO 3  **************/
#portada3 {
    background-image: url('../../images/back3.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

@media screen and (min-width: 500px) and (max-width: 700px) {
    #portada3 {
        background-image: url('../../images/back3-1000.jpg');
    }
}

@media screen (max-width: 499px) {
    #portada3 {
        background-image: url('../../images/back3-600.jpg');
    }
}

.headermini3 {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 15px 20px;
    background-color: rgba(0,0,0,.7);
    font-size: 20px;
    color: #FFFFFF;
    height: 80px;
}

.footmini3 {
    background-color: rgba(0,0,0,.7);
    height: 50px;
    color: white;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    text-shadow: 1px 1px 1px #000000;
}

.sit3nomdes {
    text-align: left;
    color: rgb(255,255,255);
    font-size: calc(0.4em + 3vw);
    font-family: 'Helvetica Neue',sans-serif;
    text-shadow: 1px 1px 1px #000000;
}

.sit3cuadro {
    color: white;
    text-shadow: 1px 1px 1px #000000;
    font-size: 18px;
    font-family: 'Helvetica Neue',sans-serif;
    top: 10px;
    width: 50%;
}

.sit3titular {
    text-align: left;
    color: black;
    font-size: 33px;
    font-family: 'Helvetica Neue',sans-serif;
    background-color: rgba(244,208,63,.7);
}

.sit3detalle {
    text-align: left;
    color: black;
    font-size: 20px;
    font-family: 'Helvetica Neue',sans-serif;
    background-color: rgba(244,208,63,.7);
}

/***********************************************/
/***************** MINI SITIO 4  **************/
#portada4 {
    background-image: url('../../images/back4.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

@media screen and (min-width: 500px) and (max-width: 700px) {
    #portada4 {
        background-image: url('../../images/back4-1000.jpg');
    }
}

@media screen (max-width: 499px) {
    #portada4 {
        background-image: url('../../images/back4-600.jpg');
    }
}

.headermini4 {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 15px 20px;
    background-color: rgba(176,139,2,.5);
    font-size: 20px;
    color: #FFFFFF;
    height: 80px;
}

.footmini4 {
    background-color: rgba(176,139,2,.5);
    height: 50px;
    color: white;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    text-shadow: 1px 1px 1px #232323;
}

.sit4nomdes {
    text-align: left;
    color: white;
    font-size: calc(0.4em + 3vw);
    font-family: 'Helvetica Neue',sans-serif;
    text-shadow: 1px 1px 1px #232323;
}

.sit4cuadro {
    color: white;
    font-size: 18px;
    font-family: 'Helvetica Neue',sans-serif;
    top: 10px;
    text-shadow: 1px 1px 1px #232323;
    width: 50%;
}

.sit4titular {
    text-align: left;
    color: white;
    font-size: 33px;
    font-family: 'Helvetica Neue',sans-serif;
    text-shadow: 1px 1px 1px #000000;
}

.sit4detalle {
    text-align: left;
    color: white;
    font-size: 20px;
    font-family: 'Helvetica Neue',sans-serif;
    text-shadow: 1px 1px 1px #000000;
}

/***********************************************/
/***************** MINI SITIO 5  **************/
#portada5 {
    background-image: url('../../images/back5.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

@media screen and (min-width: 500px) and (max-width: 700px) {
    #portada5 {
        background-image: url('../../images/back5-1000.jpg');
    }
}

@media screen (max-width: 499px) {
    #portada5 {
        background-image: url('../../images/back5-600.jpg');
    }
}

.headermini5 {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 15px 20px;
    background-color: rgba(255,255,255,.8);
    font-size: 20px;
    color: #FFFFFF;
    height: 80px;
}

.footmini5 {
    background-color: rgba(255,255,255,.8);
    height: 50px;
    color: black;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
}

.sit5nomdes {
    text-align: left;
    color: rgb(253,60,60);
    font-size: calc(0.4em + 3vw);
    font-family: 'Helvetica Neue',sans-serif;
    text-shadow: 1px 1px 1px #000000;
}

.sit5cuadro {
    color: white;
    font-size: 18px;
    font-family: 'Helvetica Neue',sans-serif;
    top: 10px;
    width: 50%;
}

.sit5titular {
    text-align: left;
    color: white;
    font-size: 33px;
    font-family: 'Helvetica Neue',sans-serif;
    text-shadow: 1px 1px 1px #000000;
}

.sit5detalle {
    text-align: left;
    color: white;
    font-size: 20px;
    font-family: 'Helvetica Neue',sans-serif;
    text-shadow: 1px 1px 1px #000000;
}

/***********************************************/
/***************** MINI SITIO 6  **************/
#portada6 {
    background-image: url('../../images/back6.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

@media screen and (min-width: 500px) and (max-width: 700px) {
    #portada6 {
        background-image: url('../../images/back6-1000.jpg');
    }
}

@media screen (max-width: 499px) {
    #portada6 {
        background-image: url('../../images/back6-600.jpg');
    }
}

.headermini6 {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 15px 20px;
    background-color: rgb(244,208,63);
    font-size: 20px;
    color: #FFFFFF;
    height: 80px;
}

.footmini6 {
    background-color: rgb(244,208,63);
    height: 50px;
    color: black;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
}

.sit6nomdes {
    text-align: left;
    color: rgb(0,0,0);
    font-size: calc(0.4em + 3vw);
    font-family: 'Helvetica Neue',sans-serif;
}

.sit6cuadro {
    color: white;
    font-size: 18px;
    font-family: 'Helvetica Neue',sans-serif;
    top: 10px;
    text-shadow: 1px 1px 1px #000000;
    width: 50%;
}

.sit6titular {
    text-align: left;
    color: white;
    font-size: 33px;
    font-family: 'Helvetica Neue',sans-serif;
    text-shadow: 1px 1px 1px #000000;
}

.sit6detalle {
    text-align: left;
    color: white;
    font-size: 20px;
    font-family: 'Helvetica Neue',sans-serif;
    text-shadow: 1px 1px 1px #000000;
}

/********************************************************/
.qr-code {
    max-width: 200px;
    margin: 10px;
}

/* INICIO DE MENU LATERAL M0DAL*/

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
    background-color: #303030;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 5px;
}

    .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 16px;
        color: #818181;
        display: block;
        transition: 0.3s;
    }

        .sidenav a:hover {
            color: #f1f1f1;
        }

    .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }

@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

        .sidenav a {
            font-size: 18px;
        }
}

.mt-2 {
    color: #ADADAD;
    font-family: Arial;
    font-size: 14px;
}

.p-4 {
    background-color: #303030;
}

.closebtn {
    background-color: #303030;
    height: 5px;
}

.m-botones {
    font-size: 2px;
}

/**************** FORMATO DE CARD **********************/

.card-product .img-wrap {
    border-radius: 3px 3px 0 0;
    overflow: hidden;
    position: relative;
    height: 100px;
    text-align: center;
}

    .card-product .img-wrap img {
        padding: 5px;
        max-height: 100%;
        max-width: 100%;
        object-fit: cover;
    }

.card-product .info-wrap {
    overflow: hidden;
    padding: 3px;
    border-top: 1px solid #eee;
}

.card-product .bottom-wrap {
    padding: 3px;
    border-top: 1px solid #eee;
}

.label-rating {
    margin-right: 10px;
    color: #333;
    display: inline-block;
    vertical-align: middle;
}

.card-product .price-old {
    color: #999;
}

.card-product {
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0 10px 6px -6px #777;
}

    .card-product:hover {
        box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    }

.card-title2 {
    color: black;
}

.card-body-morado {
    background-color: #283655;
    padding-left: 15px;
    padding-top: 15px;
    padding-right: 15px;
    color: white;
}

.card-body-descripcion {
    padding-left: 15px;
    padding-top: 15px;
    padding-right: 15px;
}

span.blue {
    background: #D0E1F9;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: black;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

.card-body-naranja {
    background-color: #F98866;
    padding-left: 15px;
    padding-top: 15px;
    padding-right: 15px;
    color: white;
}

span.verde {
    background: #80BD9E;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: white;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

.card-body-verde2 {
    background-color: #DFE166;
    padding-left: 15px;
    padding-top: 15px;
    padding-right: 15px;
    color: black;
}

span.grey {
    background: #B7B8B6;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #fff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

.card-body-gris {
    background-color: #626D71;
    padding-left: 15px;
    padding-top: 15px;
    padding-right: 15px;
    color: white;
}

span.green {
    background: #DFE166;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

.card-body-rosa {
    background-color: #F56C57;
    padding-left: 15px;
    padding-top: 15px;
    padding-right: 15px;
    color: white;
}

span.gris2 {
    background: #D5C3AA;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

.card-body-cafe {
    background-color: #805A3B;
    padding-left: 15px;
    padding-top: 15px;
    padding-right: 15px;
    color: white;
}

span.verde2 {
    background: #E1B80D;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

.card-body-verde3 {
    background-color: #68A225;
    padding-left: 15px;
    padding-top: 15px;
    padding-right: 15px;
    color: white;
}

span.verde3 {
    background: #B3DE81;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: black;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

.card-body-gris2 {
    background-color: #B4B4B4;
    padding-left: 15px;
    padding-top: 15px;
    padding-right: 15px;
    color: white;
}

span.hueso {
    background: #F1DCC9;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: black;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

.card-body-uva {
    background-color: #8b3dff;
    padding-left: 15px;
    padding-top: 15px;
    padding-right: 15px;
    color: white;
}

span.negro {
    background: #000000;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

.card-body-negro {
    background-color: #000000;
    padding-left: 15px;
    padding-top: 15px;
    padding-right: 15px;
    color: white;
}

span.verde4 {
    background: #a8ff00;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #000000;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

.card-body-rojo {
    background-color: #D72C16;
    padding-left: 15px;
    padding-top: 15px;
    padding-right: 15px;
    color: white;
}

span.menta {
    background: #B9D9C3;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: black;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

span.red {
    background: #FA2F2F;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

span.pink {
    background: #EF0BD8;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

span.dorado {
    background: #FFCC33;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

span.limon {
    background: #511DE1;
    border-radius: 0.8em;
    -moz-border-radius: 0.8em;
    -webkit-border-radius: 0.8em;
    color: #ffffff;
    display: inline-block;
    font-weight: bold;
    line-height: 1.6em;
    margin-right: 15px;
    text-align: center;
    width: 1.6em;
}

/*********** PARTE ADE ABAJO DE LA CARD **********************/

.kutu-Menu {
    padding: 0 !important;
    margin: 0 !important;
}

    .kutu-Menu li {
        border-right: 1px solid #eee;
    }

a.kutuBildirim {
    text-decoration: none !important;
}

.card .body {
    color: #424242;
    font-weight: 500;
    text-align: center;
    padding-top: 9px;
    font-size: 14px;
}

.body2 {
    color: #424242;
    font-weight: 500;
    text-align: center;
    padding-top: 10px;
    font-size: 14px;
}

.body3 {
    color: #424242;
    font-weight: 500;
    text-align: center;
    padding-top: 10px;
    font-size: 14px;
}

.body4 {
    color: #424242;
    font-weight: 500;
    text-align: center;
    padding-top: 10px;
    font-size: 12px;
}

.bodyCalculadora {
    color: #424242;
    font-weight: 500;
    text-align: center;
    padding-top: 10px;
    font-size: 12px;
}

.kutu-Menu li i {
    font-size: 25px;
    display: inline-block;
}

.kutu-Menu li h4 {
    margin-top: 0px;
}

.kutu-Menu li:hover {
    background-color: #eee;
    text-decoration: none !important;
}

.kutu-Menu li:last-child {
    border: none
}

@media screen and (max-width: 767px) {
    .kutu-Menu li {
        border-bottom: 1px solid #eee;
    }
}

.highlight {
    background-color: #fff34d;
    -moz-border-radius: 5px; /* FF1+ */
    -webkit-border-radius: 5px; /* Saf3-4 */
    border-radius: 5px; /* Opera 10.5, IE 9, Saf5, Chrome */
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* FF3.5+ */
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Saf3.0+, Chrome */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.7); /* Opera 10.5+, IE 9.0 */
}

.highlight {
    padding: 1px 4px;
    margin: 0 -4px;
}

/*IMAGEN PRINCIPAL DE BLOG*/

.img-principal-blog {
    height: 200px;
}

.linea{
    display:inline-block;
}

/*INICIA FORMATO DEL CARTON*/

#tblBingo {
    border-collapse: collapse;
    height: 8rem;
    width: 30rem;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 15pt;
    /*cursor: pointer;*/
}

    #tblBingo td {
        padding: 0.3rem;
    }

#tblusuario {
    border-collapse: collapse;
    height: 25rem;
    width: 25rem;
    text-align: center;
    justify-content: center;
    font-size: 22pt;
    /*cursor: pointer;*/
}

    #tblusuario td {
        padding: 0.3rem;
    }

.cell-format-name {
    height: 100%;
    display: flex;
    color: white;
}

.cell-format {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10%;
    border: .5px solid #cccece;
    color: white;
    width: 7vw;
}

/*   .cell-format:hover {
        background-color: #cccece;
    }*/

.cell-format2 {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10%;
    border: .5px solid #cccece;
    background-color: #cccece;
    color: black;
    width: 7vw;
}

.cell-format3 {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10%;
    border: .5px solid #cccece;
    background-color: #f9d402;
    color: black;
    width: 7vw;
}

.letter-div {
    height: 20vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.letters-bingo {
    padding: 0 1.3rem;
    font-size: 20pt;
    /*display: none;*/
}

.strickout {
    text-decoration: line-through;
    color: #a6a3a3;
    font-size: 18pt;
    pointer-events: none;
}

.show-bingo {
    display: inline;
}

table {
    margin: 0px;
    padding-left: 10px;
}
    table td {
        padding-left: 10px;
        margin: 0px;
    }