/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*ÍNDICE*/
/*LAYOUT GENERAL*/
/*MENU*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/





/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*LAYOUT GENERAL*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/

* {
    box-sizing: border-box;
    /*outline: 1px solid yellow;*/
    padding: 0;
}

html {
    font-size: 10px;
    /*font-family: 'Open Sans', sans-serif;*/
    /*font-family: 'Space Mono', monospace;*/
    font-family: 'Raleway', sans-serif;
    color: #352828;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: #FFFFFF;
    width: 100%;
    margin: 0; 
    padding: 0;
    overflow-x: hidden;
}

a {
    text-decoration: none;   
}

a:hover {
    cursor: pointer;   
}

.movil {
    display: none;
}

.escritorio {
    display: block;
}

/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*FUENTES*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/

.reenie-beanie-regular {
    font-family: "Reenie Beanie", cursive;
    font-weight: 400;
    font-style: normal;
  }

  .special-elite-regular {
    font-family: "Special Elite", system-ui;
    font-weight: 400;
    font-style: normal;
  }

  .sumana-regular {
    font-family: "Sumana", serif;
    font-weight: 400;
    font-style: normal;
  }

  .sumana-bold {
    font-family: "Sumana", serif;
    font-weight: 700;
    font-style: normal;
  }


/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*ESTILO TABLAS*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/


table{
    width:100%;
    margin-bottom: 20px;
    table-layout: fixed;
}

th{
    padding: 15px 15px;
    text-align: left;
    font-weight: 700;
    font-size: 12px;
    color: #FFF0E7;
    background-color: #493C30;
    text-transform: uppercase;
}

caption{
    display: none;
}

td{
    padding: 15px;
    text-align: left;
    vertical-align:middle;
    font-weight: 400;
    font-size: 14px;
    color: #493C30;
    background-color: #FFF0E7;
    border-bottom: solid 1px #493C30;
}

@media (max-width: 800px) {

    table.tabla-recomendaciones th {
        display: none;
    }

    table.tabla-recomendaciones td {
        display: block;
    }

    caption{
        display: block;
        padding: 15px 15px;
        text-align: left;
        font-weight: 700;
        font-size: 12px;
        background-color: #E9DFD4; color: #493C30;
        text-transform: uppercase;
    }

}


/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*BOTONES*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/

a.boton-banner {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background-color: #493C30; 
    color: #F0E7E2; 
    font-size: 16px; 
    padding: 6px 38px; 
    border-radius: 10px;
    width: 80%;
}

a.boton-primario {
    text-align: center; 
    width: 100%; 
    background-color: #493C30; 
    color: #FFF0E7; 
    font-size: 18px; 
    padding: 16px 38px; 
    border-radius: 10px; 
    font-family: 'sumana-bold';
}

a.boton-secundario {
    display: block;
    text-align: center; 
    width: 100%; 
    background-color: #FFF0E7; 
    color: #493C30; 
    font-size: 18px; 
    padding: 16px 38px;
    border: 1px solid #493C30; 
    border-radius: 10px; 
    font-family: 'sumana-bold';
}

@media only screen and (min-width: 800px) {

    a.boton-banner {
        font-size: 14px; 
        width: unset;
    }

}

@media only screen and (min-width: 1200px) {
    a.boton-primario {
        text-align: center; 
        width: 250px; 
        background-color: #493C30; 
        color: #FFF0E7; 
        font-size: 14px; 
        padding: 12px 38px; 
        border-radius: 10px; 
        font-family: 'sumana-bold';
    }

    a.boton-secundario {
        display: block;
        text-align: center; 
        width: 250px; 
        background-color: #FFF0E7; 
        color: #493C30; 
        font-size: 14px; 
        padding: 12px 38px; 
        border-radius: 10px; 
        font-family: 'sumana-bold'; 
        border: 1px solid #493C30;
    }
}



/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*BANNER INICIAL*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/

div.contenedor-banner-inicial {
    width: 100%; 
    min-height: 500px; 
    background-color: #976B56; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    flex-direction: column; 
    padding-top: 25px; 
    padding-bottom: 25px;
}

h1.titulo-principal {
    text-align: center; 
    font-size: 48px; 
    margin-top: 0px; 
    color: #FFF0E7; 
    font-family: 'sumana-bold'; 
    margin-bottom: 0;
}

.nombre-titulo-principal {
    font-size: 32px;
}

p.banner-tiempo-restante {
    font-size: 18px; 
    color: #F0E7E2; 
    font-family: 'Special Elite'; 
    margin-bottom: 0;
}

p.banner-lugar-fecha {
    font-size: 12px; 
    color: #F0E7E2; 
    font-family: 'Special Elite'; 
}

img.adorno-banner {
    width: 40%; 
    position: absolute; 
    z-index: 3; 
    top: 0; 
    left: 0;
}

img.adorno-banner-2 {
    width: 40%; 
    position: absolute; 
    z-index: 1; 
    bottom: 0; 
    right: 0;
}

@media only screen and (min-width: 800px) {


}


@media only screen and (min-width: 1200px) {

    div.contenedor-banner-inicial {
        padding-top: 80px; 
        padding-bottom: 80px;
    }

    h1.titulo-principal {
        font-size: 100px; 
    }

    .nombre-titulo-principal {
        font-size: 80px;
    }

    p.banner-tiempo-restante {
        font-size: 24px; 
    }

    p.banner-lugar-fecha {
        font-size: 14px; 
    }

    img.adorno-banner {
        width: 300px; 
        position: absolute; 
        z-index: 3; 
        top: 0; 
        left: 0;
    }

    img.adorno-banner-2 {
        width: 280px; 
        position: absolute; 
        z-index: 1; 
        bottom: -25; 
        right: -5;
    }

}


@media only screen and (min-width: 1600px) {
  
    div.contenedor-banner-inicial {
        padding-top: 100px; 
        padding-bottom: 100px;
    }

    h1.titulo-principal {
        font-size: 145px; 
    }

    .nombre-titulo-principal {
        font-size: 100px;
    }

    p.banner-tiempo-restante {
        font-size: 24px; 
    }

    p.banner-lugar-fecha {
        font-size: 14px; 
    }

}

/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*SEGUNDA SECCIÓN*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/

div.contenedor-segunda-seccion {
    display: flex; 
    width: 100%; 
    height: unset; 
    flex-direction: column-reverse; 
    background-color: #FFF0E7;
}

div.segunda-seccion-rsvp {
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    ALIGN-ITEMS: FLEX-start; 
    width: 100%; 
    margin: 0; 
    height: unset; 
    padding-left: 5%; 
    padding-right: 5%; 
    padding-top: 20px; 
    padding-bottom: 40px;
}

.segunda-seccion-rsvp p.hola {
    font-size: 20px; 
    margin: 0; 
    color: #493C30; 
    line-height: 40px; 
    margin-bottom: 15px;
}

.segunda-seccion-rsvp span.nombres {
    font-size: 20px; 
    margin: 0; 
    margin-bottom: 15px; 
    background-color: #493C30; 
    color: #F0E7E2; 
    line-height: 40px; 
    padding: 8px 5px;
}

.segunda-seccion-rsvp label {
    font-size: 12px;
    font-weight: 700; 
    margin: 0; 
    margin-bottom: 15px; 
    background-color: #c5c5c5;
    padding: 8px 12px;
    border-radius: 10px 10px 10px 10px; 
}

.segunda-seccion-rsvp p.texto {
    font-size: 14px; 
    margin: 0; 
    color: #493C30; 
    line-height: 24px;
}

div.segunda-seccion-img {
    display: block;
    height: unset; 
    width: 100%; 
    padding: 30px 5% 20px 5%;
    margin: 0; 
}

.segunda-seccion-img-contenedor {
    display: block; 
    width: 100%; 
    height: 600px;
}

.segunda-seccion-img-contenedor img{
    display: block; 
    width: 100%; 
    height: 100%;
    object-fit: cover;
}


@media only screen and (min-width: 800px) {


}


@media only screen and (min-width: 1200px) {

    div.contenedor-segunda-seccion {
        width: 100%; 
        height: 700px; 
        flex-direction: row; 
    }
    
    div.segunda-seccion-rsvp {
        width: 50%; 
        margin: 0; 
        height: 100%;
        padding: 80px 80px 80px 15%;
    }
    
    .segunda-seccion-rsvp p.hola {
        font-size: 28px; 
        margin: 0;
        line-height: 45px; 
        margin-bottom: 25px;
    }
    
    .segunda-seccion-rsvp span.nombres {
        font-size: 32px; 
        margin: 0; 
        margin-bottom: 25px; 
        line-height: 45px; 
        padding: 8px 5px;
    }
    
    .segunda-seccion-rsvp p.texto {
        font-size: 14px; 
        margin: 0; 
        line-height: 24px;
    }

    div.segunda-seccion-img {
        height: 100%; 
        width: 50%; 
        margin: 0; 
        padding: 80px 0 80px 80px; 
    }
    
    .segunda-seccion-img-contenedor {
        display: block; 
        width: 75%; 
        height: 100%;
    }


}


@media only screen and (min-width: 1600px) {
  
    div.contenedor-segunda-seccion {
        width: 100%; 
        height: 700px; 
        flex-direction: row; 
    }
    
    div.segunda-seccion-rsvp {
        width: 50%; 
        margin: 0; 
        height: 100%;
        padding: 80px 80px 80px 15%;
    }
    
    .segunda-seccion-rsvp p.hola {
        font-size: 28px; 
        margin: 0;
        line-height: 45px; 
        margin-bottom: 25px;
    }
    
    .segunda-seccion-rsvp span.nombres {
        font-size: 32px; 
        margin: 0; 
        margin-bottom: 25px; 
        line-height: 45px; 
        padding: 8px 5px;
    }
    
    .segunda-seccion-rsvp p.texto {
        font-size: 14px; 
        margin: 0; 
        line-height: 24px;
    }

    div.segunda-seccion-img {
        height: 100%; 
        width: 50%; 
        margin: 0; 
        padding: 80px 0 80px 80px; 
    }
    
    .segunda-seccion-img-contenedor {
        display: block; 
        width: 60%; 
        height: 100%;
    }

}

/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*TERCERA SECCIÓN*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/

div.contenedor-tercera-seccion {
    display: flex;
    flex-direction: column-reverse; 
    width: 100%; 
    height: unset;
}

div.tercera-seccion-img {
    display: block; 
    width: 100%; 
    height: unset;
}

div.tercera-seccion-img img {
    display: block; 
    width: 100%; 
    height: 100%; 
    object-fit: cover;
}

div.tercera-seccion-itinerario {
    display: block; 
    background-color: #E9DFD4; 
    width: 100%; 
    padding: 40px 2.5% 40px 2.5%;
}

div.tercera-seccion-itinerario h2 {
    font-size: 40px; 
    margin: 0; 
    color: #493C30;
}

@media only screen and (min-width: 1200px) {

    div.contenedor-tercera-seccion {
        flex-direction: row; 
        width: 100%; 
        height: 700px;
    }

    div.tercera-seccion-img {
        display: block; 
        width: 50%; 
        height: 100%;
    }

    div.tercera-seccion-img img {
        display: block; 
        width: 100%; 
        height: 100%; 
        object-fit: cover;
    }

    div.tercera-seccion-itinerario {
        display: block;  
        width: 50%; 
        padding: 80px 5% 80px 5%;
    }

    div.tercera-seccion-itinerario h2 {
        font-size: 28px;
    }

}

/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*CUARTA SECCIÓN*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/

div.contenedor-cuarta-seccion {
    display: flex;
    flex-direction: column; 
    width: 100%; 
    height: unset; 
}

div.cuarta-seccion-vestimenta {
    display: block; 
    width: 100%; 
    height: unset; 
    background-color: #493C30;
    padding: 40px 10%; 
}

div.cuarta-seccion-vestimenta h2 {
    font-size: 40px;
    line-height: 34px; 
    margin: 0 0 20px 0; 
    color: #FFF0E7
}

.fondo-lugares {
    background-image: url("img/sketch-san-andres.jpg");
    background-size: cover;
    background-position: center;
    display: block; 
    width: 100%; 
    height: unset; 
    padding: 40px 5%;
}

.fondo-lugares h2 {
    font-size: 40px; 
    margin: 0; 
    color: #493C30; 
    background-color: rgb(208,199,181,0.75); 
    line-height: 34px;
}

@media only screen and (min-width: 1200px) {

    div.contenedor-cuarta-seccion { 
        flex-direction: row;
        height: 450px; 
    }

    div.cuarta-seccion-vestimenta {
        width: 50%; 
        height: 100%; 
        padding: 80px 10%; 
    }

    div.cuarta-seccion-vestimenta h2 {
        font-size: 28px; 
        line-height: 32px;
        margin: 0 0 20px 0; 
        color: #FFF0E7
    }

    .fondo-lugares { 
        width: 50%; 
        height: 100%;
        padding: 80px 10%;
    }

    .fondo-lugares h2 {
        font-size: 28px; 
        margin: 0;
        line-height: 45px;
    }

}

/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*QUINTA SECCIÓN*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/

div.contenedor-quinta-seccion {
    display: block; 
    width: 100%; 
    height: unset; 
    background-color: #976B56; 
    padding: 40px 5%;
}

div.contenedor-quinta-seccion h2 {
    display: block; 
    color: #FFF0E7; 
    margin: 0; 
    margin: auto; 
    text-align: center; 
    margin-bottom: 25px; 
    font-size: 40px;
    line-height: 38px;
}

div.contenedor-quinta-seccion p {
    margin: 0; 
    margin: auto; 
    text-align: center; 
    font-size: 14px; 
    color: #FFF0E7; 
    width: 100%; 
    line-height: 24px;
}



@media only screen and (min-width: 1200px) {

div.contenedor-quinta-seccion {
    display: block; 
    width: 100%; 
    height: 450px; 
    background-color: #976B56; 
    padding: 80px 5%;
}

div.contenedor-quinta-seccion h2 {
    display: block; 
    color: #FFF0E7; 
    margin: 0; 
    margin: auto; 
    text-align: center; 
    margin-bottom: 25px; 
    font-size: 28px;
}

div.contenedor-quinta-seccion p {
    margin: 0; 
    margin: auto; 
    text-align: center; 
    font-size: 14px; 
    width: 45%; 
    line-height: 24px;
}

}

/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*SEXTA SECCIÓN*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/

div.contenedor-sexta-seccion {
    display: block; 
    width: 100%; 
    background-color: #493C30; 
    padding: 40px 5%;
}

div.contenedor-sexta-seccion h2 {
    display: block; 
    color: #FFF0E7; 
    margin: 0; 
    margin: auto; 
    text-align: center; 
    margin-bottom: 25px; 
    font-size: 40px;
    line-height: 38px;
}

@media only screen and (min-width: 1200px) {

    div.contenedor-sexta-seccion {
        padding: 80px 5%;
    }

    div.contenedor-sexta-seccion h2 {
        display: block; 
        color: #FFF0E7; 
        margin: 0; 
        margin: auto; 
        text-align: center; 
        margin-bottom: 25px; 
        font-size: 24px;
        line-height: 32px;
    }

}

/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*MODAL DE UBICACIONES*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/

#contenedorModal {
    display: none;
    margin: 0 0 0 0;
    position: fixed;
    z-index: 3;
    background-color: rgb(0,0,0,0.25);
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.contenedor-modal-secundario {
    display: block;
    margin: 0 0 0 0;
    margin: auto;
    position: relative;
    background-color: #E9DFD4;
    width: 95%;
    height: 95%;
    margin-top: 2.5%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 15px;
    border-radius: 25px;
}

.material-symbols-outlined {
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 30
}

.cerrar-modal {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 30px;
}

.cerrar-modal:hover {
    cursor: pointer;
    background-color:#352828;
    color: #E9DFD4;
}

.contenedor-modal-secundario h2 {
    font-size: 28px;
    line-height: 32px;
}

.contenedor-modal-secundario h3 {
    font-size: 24px;
    line-height: 24px;
}

.contenedor-modal-secundario p {
    font-size: 14px;
}

.contenedor-modal-secundario img {
    width: 100%;
    margin-bottom: 15px;
}

.contenedor-modal-secundario iframe {
    width: 100%;
    height: 400px;
}

.contenedor-modal-secundario a {
    display:block;
    font-size: 20px;
    color: blue;
    text-decoration: underline;
    text-transform: uppercase; 
    text-align: center;
    margin: 0;
    margin: auto;
}

@media only screen and (min-width: 1200px) {

    #contenedorModal {
        display: none;
        margin: 0 0 0 0;
        position: fixed;
        z-index: 3;
        background-color: rgb(0,0,0,0.25);
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }

    .contenedor-modal-secundario {
        display: block;
        margin: 0 0 0 0;
        margin: auto;
        position: relative;
        background-color: #E9DFD4;
        width: 80%;
        height: 80%;
        margin-top: 5%;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 5%;
        border-radius: 25px;
    }

    .material-symbols-outlined {
        font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 30
    }

    .cerrar-modal {
        width: 30px;
        height: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: 10%;
        top: 10%;
        font-size: 30px;
    }

    .cerrar-modal:hover {
        cursor: pointer;
        background-color:#352828;
        color: #E9DFD4;
    }

    .contenedor-modal-secundario h2 {
        font-size: 28px;
        line-height: 32px;
    }

    .contenedor-modal-secundario h3 {
        font-size: 24px;
        line-height: 24px;
    }

    .contenedor-modal-secundario p {
        font-size: 14px;
    }

    .contenedor-modal-secundario img {
        width: 60%;
        margin-bottom: 15px;
    }

    .contenedor-modal-secundario iframe {
        width: 60%;
        height: 400px;
    }

    .contenedor-modal-secundario a {
        display:block;
        font-size: 20px;
        color: blue;
        text-decoration: underline;
        text-transform: uppercase; 
        text-align: center;
        margin: 0;
        margin: auto;
    }

}

/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*MODAL NO CODIGO*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/

#modalSinCodigo {
    display: none;
    margin: 0 0 0 0;
    position: fixed;
    z-index: 3;
    background-color: rgb(0,0,0,0.5);
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.contenedor-modal-secundario-sin-codigo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 0;
    margin: auto;
    position: relative;
    background-color: #E9DFD4;
    width: 95%;
    height: 60%;
    margin-top: 10%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 25px;
    border-radius: 25px;
}

.contenedor-modal-secundario-sin-codigo h3 {
    font-size: 24px;
    line-height: 24px;
}

.contenedor-modal-secundario-sin-codigo a {
    display:block;
    font-size: 20px;
    color: blue;
    text-decoration: underline;
    text-transform: uppercase; 
    text-align: center;
    margin: 0;
    margin: auto;
}

input[type=text] {
    margin: 0;
    margin: auto;
    border: 3px solid #f1f1f1;
    width: 100%;
    font-size: 18px;
    padding: 20px;
}

input[type=text]:focus {
  border: 3px solid #555;
}



@media only screen and (min-width: 1200px) {

    #modalSinCodigo {
        display: none;
        margin: 0 0 0 0;
        position: fixed;
        z-index: 3;
        background-color: rgb(0,0,0,0.25);
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }

    input[type=text] {
        display: block;
        width: 50%;
        margin: 0;
        margin: auto;
    }


}

/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*MODAL REGISTRO*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/

#modalRegistro {
    display: none;
    margin: 0 0 0 0;
    position: fixed;
    z-index: 3;
    background-color: rgb(0,0,0,0.5);
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

.contenedor-modal-secundario-registro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 0 0 0;
    margin: auto;
    position: relative;
    background-color: #E9DFD4;
    width: 95%;
    height: 60%;
    margin-top: 10%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 25px;
    border-radius: 25px;
}

.contenedor-modal-secundario-registro h3 {
    font-size: 24px;
    line-height: 24px;
}

.contenedor-modal-secundario-registro a {
    display:block;
    font-size: 20px;
    color: blue;
    text-decoration: underline;
    text-transform: uppercase; 
    text-align: center;
    margin: 0;
    margin: auto;
}

form.formulario-registro {
    width: 100%;
}

form.formulario-registro label {
    font-size: 18px;
}

form.formulario-registro select {
    font-size: 18px;
    border: 3px solid #f1f1f1;
    padding: 20px;
}

form.formulario-registro input[type=text] {
    width: 100%;
}

@media only screen and (min-width: 1200px) {

    #modalRegistro {
        display: none;
        margin: 0 0 0 0;
        position: fixed;
        z-index: 3;
        background-color: rgb(0,0,0,0.25);
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }

    .contenedor-modal-secundario-registro {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: 0 0 0 0;
        margin: auto;
        position: relative;
        background-color: #E9DFD4;
        width: 95%;
        height: 90%;
        margin-top: 15px;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 20px 25px;
        border-radius: 25px;
    }

    .formulario-registro {
        width: 50%;
    }

}

/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*MODAL MESA REGALO*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/
/*$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$*/

#modalMesaRegalo {
    display: none;
    margin: 0 0 0 0;
    position: fixed;
    z-index: 3;
    background-color: rgb(0,0,0,0.5);
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

@media only screen and (min-width: 1200px) {

    #modalMesaRegalo {
        display: none;
        margin: 0 0 0 0;
        position: fixed;
        z-index: 3;
        background-color: rgb(0,0,0,0.25);
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
    }

}