/* GENERALES */
html {
    font-size: 62.5% /** Reset para REMS 62.5% = 10px de 16px**/;
}
.fadeRight {
    opacity: 0;
    transform: translate(10vh, 0vh);
    transition: all 1s;
  }
  .fadeLeft {
    opacity: 0;
    transform: translate(-10vh, 0vh);
    transition: all 1s;
  }
  .fadeTop {
    opacity: 0; 
    transform: translate(0, 10vh);
    transition: all 1s;
  }  
.visible {
    opacity: 1;
    transform: translate(0, 0);
  }
img {
    width: 100%;
}
.celeste {background-color: rgb(12, 12, 73) !important}
.rojo {background-color: rgb(83, 22, 22) !important;}
.naranjo {background-color: rgb(145, 82, 5) !important;}
.morado {background-color: rgb(114, 18, 85) !important;}
.naranjoTexto {color: rgb(187, 69, 22);}
.azulTexto {color:rgb(8, 8, 78);}
.centrado {text-align: center !important;}
.rem25 {font-size:2.2rem !important;}
.verde {color:green !important;}
.textoRojo {color:rgb(134, 6, 6)}
.textoAmarillo {color:rgb(134, 134, 37)};

/*HEADER */
header {
    border-bottom: 1px solid gray;
}
.imagenLogo {
    padding: 1rem;
    margin: auto;
}
.imagenLogo img{
    width: 80%;
    margin-left: 1rem;
}
.imagenLogo p {
    font-size: 2rem;
    margin: 0rem 0rem 0rem 1rem;
    font-family: 'Cinzel Decorative', cursive;
}
.logoInicial a {
    text-decoration: none;
    color:unset;
}
.bolsa {
  position:relative;
}
.inicioSesionCelular {
    margin:auto;
    text-align: center;
    position:relative;
}
.numeroCarrito {
    position:absolute;
    top:5px;
    left: 3.5rem;
    color:red;
    font-size:1.3rem;
    border:1px solid red;
    border-radius:50%;
    padding:2px 5px;
}
.numeroCarrito p {
    margin:0rem;
    padding:0rem;
}
.numeroCarrito p a {
    color:black;
    text-decoration:none;
}
@media (min-width: 983px) {
    .numeroCarrito {
        position:absolute;
        top:50px;
        left: 125rem;
        color:red;
        font-size:1.3rem;
        border:1px solid red;
        border-radius:50%;
        padding:2px 5px;
    }
    .numeroCarrito:hover {
        background-color:yellow;
    }
}
.inicioSesionCelular i {
    font-size: 2rem;
}
.headerCentral {
    text-align: center;
}
.headerCentral a {
    color:rgb(7, 7, 7);
    text-decoration: none;
    padding: 1rem;
    color:white;
    font-size: 1.4rem;
}
.menuEmparedado {
    font-size: 2rem;
    text-align: center;
    margin: auto;
}
.headerDerecha {
    display: none;
}
.headerDerecha ul {
    text-align: center;
    margin: 0rem;
    padding: 0rem;
}
.headerDerecha ul li {
    list-style: none;
    padding: 1rem 0rem;
}
.headerDerecha ul li a {
    text-decoration: none;
    color:black;
    padding: 1rem 2rem;
    margin: 1rem 0rem;
    font-size: 1.3rem;
    width: 100%;
    text-transform: uppercase;
}
.headerDerecha ul li:hover {
    background-color: rgb(29, 88, 139);
    border-radius: 1rem;
    color:white;
}
.inicioSesionCelular a {
    text-decoration: none;
    color:black;
}
.headerComputador {
    display: none;
}
/* HEADER COMPUTADOR */
.redes {
    display: none;
}
.redes i{
    font-size: 2rem;
    padding: 1rem 1rem;
}
@media (min-width: 983px) {
    .headerCelular {
        display: none;
    }
    .headerComputador {
        display: unset;
    } 
    .inicioSesionCelular {
        display: none;
    }
    .menuEmparedado {
        display: none;
        border-bottom: none;
    }
    .headerDerecha {
        display: block;
    }
    .imagenLogo{
        margin: auto;
        text-align: left;
    }
    .imagenLogo img{
        width: 30%;
        padding-left: 2rem;
    }
    .headerCentral {
        margin: auto;
        background-color: unset;
    }
    .headerCentral a {
        color:black;
        text-decoration: none;
    }
    .headerCentral a:hover {
        background-color: rgb(29, 88, 139);
        color:white;
        border-radius: 1rem;
    }
    .redes {
        margin: auto;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        width: 30%;
        font-size: 1.5rem;
        text-align: center;
    }
    .redes p {
        margin:0rem;
    }
    .redes i{
        font-size: 2rem;
        padding: 1rem 1rem;
    }
    .headerDerecha {
        margin: auto;
    }
    .headerDerecha ul {
        list-style: none;
    }
    .headerDerecha ul li {
        display: inline;
    }
    .headerDerecha ul li a {
        color: black;
        text-decoration: none;
        padding: 5px 15px;
        font-size: 1.1rem;
    }
    .headerDerecha ul li a:hover {
        color:white;
        text-decoration: underline;
        border-radius: 1rem;
    }
    .inicioSesionComputador {
        margin:auto;
        text-align: center;
        font-size: 1.5rem;
    }
    .inicioSesionComputador a {
        text-decoration: none;
        color:black;
        padding: 1rem 2rem;
        margin: 1rem 0rem;
        font-size: 1.3rem;
        width: 100%;
        text-transform: uppercase;
    }
    .inicioSesionComputador a:hover {
        background-color: rgb(114, 18, 85);
        border-radius: 1rem;
        color:white;
    }
}


/* MAIN */

main {
    margin-bottom:2rem;
    font-family: 'Oswald', sans-serif;
}

.imagenInicial {
    position: relative;
}
.divHojas {
    position:absolute;
    top:100%;
}
.divHojas img {
    width:30%;
}
.divHojasDos {
    position:absolute;
    top:100%;
    left: 110rem;
}
.divHojasDos img {
    width:120%;
    transform: scaleX(-1);
}
.imagenCelular img {
    opacity: 1.0;
}
.textoInicialCelular {
    position: absolute;
}

.textoInicialCelular {
    width: 80%;
    margin: auto;
    top:15%;
    left: 10%;
    text-align: left;
}
.textoInicialCelular h1 {
    font-family: 'Righteous', cursive;
    font-size: 3.3rem;
    width:90%;
}
.textoInicialCelular p {
    width:70%;
    font-size:2rem;   
}
.botonInicialCelular {
    margin-top: 8rem;
}
.botonInicialCelular a {
    padding: 1rem 3rem;
    border-radius: 1rem ;
    font-size: 1.5rem;
    background-color: rgb(0, 0, 0);
    text-decoration: none;
    color:white;
    -webkit-box-shadow: 10px 10px 17px -8px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 17px -8px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 17px -8px rgba(0,0,0,0.75);
}
.textoInicialCelularNoAbsoluto {
    width: 80%;
    margin: 5rem auto;
    text-align: center;
    font-size: 1.2rem;
}
.textoInicialCelularNoAbsoluto h1 {
    font-family: 'Righteous', cursive;
    font-size: 2rem;
}
.textoInicialCelularNoAbsoluto p {
    margin-top: 4rem;
    padding: 1rem 1rem;
    border-radius: 1rem ;
    font-size: 1.5rem;
    background-color: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(0, 0, 0, 0.158);
}

.botonRegistrarse a {
    font-size: 1.5rem;
    padding: 1rem 6rem;
    margin-top: 2rem;
}
.botonEjemplo a {
    margin-top: 2rem;
    font-size: 1.5rem;
    padding: 1rem 6rem;
}
.imagenComputador {display: none;}
.textoInicialComputador {display: none;}
.imagenComputadorJoseIgnacio {display: none;}
@media (min-width: 983px) {
    .imagenCelular {display: none;}
        .imagenCelularJoseIgnacio {display: none; }
    .imagenComputador {display: unset; opacity: 0.9; }
        .imagenComputadorJoseIgnacio {display:unset;}
    .imagenComputador img {
        -webkit-box-shadow: 4px 9px 26px -8px rgba(0,0,0,0.75);
-moz-box-shadow: 4px 9px 26px -8px rgba(0,0,0,0.75);
box-shadow: 4px 9px 26px -8px rgba(0,0,0,0.75);
    }
    .textoInicialCelular {display: none;}
    .textoInicial {
        width: 40%;
        margin: auto;
        top:30%;
        left: 15%;
        text-align: center;
        background-color: rgba(93, 223, 240, 0.603);
        padding: 1rem;
        border-radius: 1rem;
        font-size: 1.2rem;
    }
    .textoInicialComputador {
        display: unset;
        position: absolute;

    }
    .textoInicialComputador {
        width: 50%;
        margin: auto;
        top: 5rem;
        left: 10%;
        text-align: left;
        border-radius: 1rem;
        font-size: 2rem;
    }
    .textoInicialComputador h1 {
        font-family: 'Righteous', cursive;
        font-size: 5rem;
    }
    .botonInicialComputador {
        margin-top: 7rem;
    }
    .botonInicialComputador a {
        text-decoration: none;
        color:white;
        background-color: rgb(0, 0, 0);
        padding: 1rem 3rem;
        border-radius: 1rem;
        -webkit-box-shadow: 10px 10px 17px -8px rgba(0,0,0,0.75);
        -moz-box-shadow: 10px 10px 17px -8px rgba(0,0,0,0.75);
        box-shadow: 10px 10px 17px -8px rgba(0,0,0,0.75);
    }
    .botonInicialComputador a:hover {
        background-color: rgb(29, 88, 139);
    }
    .textoInicialComputadorNoAbsoluto {
        display: unset;
        position: unset;

    }
    .textoInicialComputadorNoAbsoluto {
        width: 40%;
        margin: auto;
        text-align: center;
        padding: 15rem 10rem 14rem 2rem;
        border-radius: 1rem;
        font-size: 2rem;
        border:1px solid white;;
    }
    .textoInicialComputador p {
        margin-top: 5rem;
    }
}

.tituloJoseIgnacio {
    text-align: center;
    margin: 4rem;
}
.tituloJoseIgnacio h1{
   font-family: 'Didact Gothic', sans-serif;
    font-size:2rem;
    font-weight: 500;
}
.tituloJhen {
    text-align: center;
    margin: 1rem;
}
.tituloJhen h1{
   font-family: 'Didact Gothic', sans-serif;
    font-size:4.5rem;
}
.textoJhen {
    width:90%;
     font-family: 'Didact Gothic', sans-serif;
     font-size:2rem;
     margin:auto;
     text-align:center;
}
.textoJhenDos {
    width:90%;
     font-family: 'Didact Gothic', sans-serif;
     font-size:3rem;
     margin:auto;
     text-align:center;
}
@media (min-width: 983px) {
    .tituloJhen {
        text-align: center;
        margin: 4rem;
    }
    .tituloJhen h1{
       font-family: 'Didact Gothic', sans-serif;
        font-size:5rem;
    }
    .textoJhenDos {
    width:70%;
     font-family: 'Didact Gothic', sans-serif;
     font-size:3.4rem;
     margin:auto auto 5rem auto;
     text-align:center;
}
}
.tituloVale {
    text-align: center;
    margin: 4rem;
}
.tituloVale h1 {
    font-family: 'Raleway', sans-serif;
    font-size:2rem;
    font-weight: 500;
}
@media (min-width: 983px) {
.tituloVale {
    text-align: center;
    margin: 14rem 0rem 0rem 0rem;
}
}
.tituloDidac {
    text-align: center;
    margin: 4rem;
}
.tituloDidac h1 {
    font-family: 'Raleway', sans-serif;
    font-size:2rem;
    font-weight: 500;
}
.textoJoseIgnacio {
    width: 90%;
    margin:auto;
    text-align: center;
}
.textoJoseIgnacio {
    font-family: 'Raleway', sans-serif;
    font-size:1.5rem;
}
.temporizador {
    width: 80%;
    margin:auto;
    text-align: center;
    font-size: 2rem;
    font-family: 'Raleway', sans-serif;
}


/* MENUSTIPOS */

.menuTiposCelebracion {
    width: 95%;
    margin: 6rem auto 5rem auto;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 3rem;
    row-gap: 3rem;
}
.menuTiposCelebracion a {
    text-decoration: none;
    color:black;
    background-color: rgba(79, 24, 100, 0.288);
    border-radius: 3rem;
    color:rgb(62, 18, 80);
    -webkit-box-shadow: 4px 9px 16px 3px rgba(0,0,0,0.75);
    -moz-box-shadow: 4px 9px 16px 3px rgba(0,0,0,0.75);
    box-shadow: 4px 9px 16px 3px rgba(0,0,0,0.75);
}
.menuTipo {
    text-align: center;
}
.menuTipo img {
    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;
}

.menuTipo h1 {
    margin-top: 1rem;
}
@media (min-width: 983px) {
    .menuTiposCelebracion {
        width: 80%;
        margin: 10rem auto 5rem auto;
        display: grid;
        grid-template-columns: repeat(4,1fr);
        column-gap: 5rem;
    }
    .menuTiposCelebracion a {
        text-decoration: none;
        color:black;
        background-color: unset;
        -webkit-box-shadow:unset;
    -moz-box-shadow: unset;
    box-shadow: unset;
    }
    .menuTipo {
        text-align: center;
    }
    .menuTipo img {
        border-radius: 2rem;
        -webkit-box-shadow: 4px 9px 16px 3px rgba(0,0,0,0.75);
-moz-box-shadow: 4px 9px 16px 3px rgba(0,0,0,0.75);
box-shadow: 4px 9px 16px 3px rgba(0,0,0,0.75);
    }
    .menuTipo h1 {
        margin-top: 2rem;
    }
    .menuTiposCelebracion a:hover {
        background-color: rgba(58, 108, 151, 0.596);
        border-radius: 5rem;
        color:rgb(0, 0, 0);
    }
    
}

/* COMO FUNCIONA */
.comoFunciona {
    text-align: center;
}
.comoFunciona h1 {
    margin: 8rem 0rem 4rem 0rem;
}
.divGeneralComoFunciona {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    width: 90%;
    margin: auto;
    column-gap: 6rem;
    row-gap: 5rem;
} 
.divComoFunciona {
    display: grid;
    grid-template-columns: 30% 65%;
    column-gap: 2rem;
    margin: auto auto;
}
.imagenComoFuncion img {
    border-radius: 1rem;
    -webkit-box-shadow: 4px 9px 16px 3px rgba(0,0,0,0.75);
-moz-box-shadow: 4px 9px 16px 3px rgba(0,0,0,0.75);
box-shadow: 4px 9px 16px 3px rgba(0,0,0,0.75);
}
.textoComoFunciona h1 {
    margin:0rem;
    text-align: left;
    font-size: 1.8rem;
    font-weight: bold;
}
.textoComoFunciona p {
    text-align: left;
    font-size: 1.4rem;
}
@media (min-width: 983px) {
    .comoFunciona {
        text-align: center;
    }
    .comoFunciona h1 {
        margin: 5rem;
    }
    .divGeneralComoFunciona {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        width: 90%;
        margin: auto;
        column-gap: 6rem;
        row-gap: 5rem;
    } 
    .divComoFunciona {
        display: grid;
        grid-template-columns: 30% 70%;
        column-gap: 2rem;
        margin: auto auto;
    }
    .textoComoFunciona h1 {
        margin:0rem;
        text-align: left;
        font-size: 1.8rem;
        font-weight: bold;
    }
    .textoComoFunciona p {
        text-align: left;
        font-size: 1.4rem;
    }
}


/* INFORMACION CLIENTES DIVINFORMACIONCLIENTES */

.divInformacionClientes {
    text-align: center;
}
.verEjemplos>div {
    margin:4rem auto;
}
.verEjemplos>div>a {
    text-decoration: none;
    padding:1rem 2rem;
    font-size:2rem;
    width: 100%;
    -webkit-box-shadow: -1px 10px 17px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -1px 10px 17px 0px rgba(0,0,0,0.75);
box-shadow: -1px 10px 17px 0px rgba(0,0,0,0.75);
}
.ejemploMatrimonio a {
    background-color: rgb(221, 157, 167);
    border-radius: 1rem;
    color:white;
    width: 100%;
}
.ejemploCumple a {
    background-color: orange;
    color:white;
    border-radius: 1rem;
}
.ejemploDepaShower a {
    background-color: rgb(5, 5, 77);
    color:white;
    border-radius: 1rem;
}
@media (min-width: 983px) {
    .verEjemplos {
        width: 60%;
        margin: 5rem auto;
        display: grid;
        grid-template-columns: repeat(3,1fr);
    }
    .verEjemplos>div>a {
    padding:1rem 3rem;
    font-size:2.2rem;;
}
}



/* PORQUE NOSOTROS */

.porqueNosotros {
    margin: 6rem auto;
}
.porqueNosotros h1 {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 5rem;
}

.divGeneralPorqueNosotros {
    width: 90%;
    margin: auto;
    text-align: center;
}
.divPorqueNosotros {
    margin: 4rem auto;
}
.divPorqueNosotros h3 {
    font-weight: bold;
    font-size: 2rem;
    color: rgb(141, 69, 27);
    margin: auto;
}
.divPorqueNosotros p {
    margin:1rem ;
    font-size: 1.5rem;
}
.divPorqueNosotros i {
    color: rgb(44, 89, 110);
    font-size: 3rem;
}

@media (min-width: 983px) {
    .divGeneralPorqueNosotros {
        width: 90%;
        margin: auto;
        text-align: center;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        column-gap: 5rem;
    }
}




/* REGISTRO.HTML */

.botonFinalizarRegistro {
    text-align: center;
}
.botonFinalizarRegistro input {
    font-size: 1.5rem;
    padding: 1rem 4rem;
    background-color: black;
    border: 1px solid black;
    color:white;
}
.textoTresArticulo {
    width: 80%;
    text-align: center;
    font-size: 1.5rem;
    margin: 2rem auto 5rem auto;
}
.textoTresArticulo i {
    font-size:3rem;
}
.imagenRegistro {
    position: relative;
}
.imagenRegistro img {
    border-radius: 1rem;
}
.divImagenYFormulario {
    width: 90%;
    margin:2rem auto 10rem auto;
    display: grid;
    grid-template-columns: repeat(1,1fr);
    column-gap: 1rem;
}
.divFormularioIndividual {
    display: grid;
    grid-template-columns: 40% 60%;
    margin: 2rem;
    font-size: 1.5rem;
}
.divFormularioIndividual input {
    padding: 1rem;
    margin: auto 0rem;
}
.divFormularioIndividual label {
    margin:auto 0rem;
}
.divFormularioIndividual select {
    padding: 1rem;
}
.imagenFiestaRegistro {
    display: none;
}
@media (min-width: 983px) {
    .imagenFiestaRegistro {
        display: unset;
    }
    .divImagenYFormulario {
        width: 70%;
        margin:2rem auto 10rem auto;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        column-gap: 3rem;
    }
    .textoImagenRegistro {
        position: absolute;
        top:40%;
        left: 20%;
        background-color: rgba(255, 255, 255, 0.671);
        padding: 1rem 2rem;
        font-size: 1.5rem;
        text-align: center;
        font-weight: bold;
        border-radius: 2rem;
    }
}


/* FOOTER */
footer {
    background-color: rgb(255, 255, 255);
    -webkit-box-shadow: 0px -6px 12px 3px rgba(184,184,184,1);
    -moz-box-shadow: 0px -6px 12px 3px rgba(184,184,184,1);
    box-shadow: 0px -6px 12px 3px rgba(184,184,184,1);
}
.footerPorCuatro {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    width: 90%;
    margin: auto;
    padding-top: 3rem;
    row-gap: 3rem;
}
.footerUno p a {
    text-decoration: none;
    color:black;
    font-size: 1.3rem;
    font-weight: bold;
}
.footerDos p a {
    text-decoration: none;
    color:black;
    font-size: 1.3rem;
    font-weight: bold;
}
.footerTres {
font-family: 'Cinzel Decorative', cursive;
font-size: 2rem;
}
.footerCuatro {
    font-weight: bold;
    font-size: 1.3rem;
}
.footerCuatro img {
    width: 50%;
}
.logoInicialFooter img {
    width: 50%;
}
@media (min-width: 983px) {
    footer {
        background-color: rgb(255, 255, 255);
        -webkit-box-shadow: 0px -6px 12px 3px rgba(184,184,184,1);
        -moz-box-shadow: 0px -6px 12px 3px rgba(184,184,184,1);
        box-shadow: 0px -6px 12px 3px rgba(184,184,184,1);
    }
    .footerPorCuatro {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        width: 90%;
        margin: auto;
        padding-top: 2rem;
        padding-bottom:2rem;
    }
    .footerUno p a {
        text-decoration: none;
        color:black;
        font-size: 1.3rem;
        font-weight: bold;
    }
    .footerDos p a {
        text-decoration: none;
        color:black;
        font-size: 1.3rem;
        font-weight: bold;
    }
    .footerTres {
    font-family: 'Cinzel Decorative', cursive;
    font-size: 2rem;
    }
   .footerCuatro {
        font-weight: bold;
        font-size: 1.3rem;
        text-align: right;
    }
    .footerCuatro img {
        width: 50%;
    }
    .logoInicialFooter {
        text-align: center;
    }
    .logoInicialFooter img {
        width: 50%;
    }
}


/* SUB PAGINAS INICIAL */

.textoInicialCelularSubPagina {
    position: absolute;
}

.textoInicialCelularSubPagina {
    width: 80%;
    margin: auto;
    top:15%;
    left: 10%;
    text-align: center;
  
}
.textoInicialCelularSubPagina h1 {
    font-family: 'Righteous', cursive;
    font-size: 2.2rem;
    padding: 1rem;
    border-radius: 1rem;

}
.textoInicialCelularSubPagina a {
    text-decoration: none;
}
.botonInicialCelularSubPagina {
    margin-top: 15rem;
}
.botonInicialCelularSubPagina>div {
    padding: 1rem 3rem;
    border-radius: 1rem ;
    font-size: 1.5rem;
    background-color: rgba(0, 0, 0, 0.705);
    text-decoration: none;
    color:white;
    -webkit-box-shadow: 10px 10px 17px -8px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 17px -8px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 17px -8px rgba(0,0,0,0.75);
}
.textoInicialComputadorSubPagina {
    display: none
}
@media (min-width: 983px) {
    .textoInicialCelularSubPagina {
        display: none;
    }
    .textoInicialComputadorSubPagina {
        display: unset;
        position: absolute;

    }
    .textoInicialComputadorSubPagina {
        width: 100%;
        margin: auto;
        top: 8rem;
        left: 0;
        text-align: left;
        border-radius: 1rem;
        font-size: 2rem;
    }
    .textoInicialComputadorSubPagina h1 {
        font-family: 'Righteous', cursive;
        font-size: 5rem;
    }
    .textoSubPagina {
        width: 40%;
        margin: auto;
        background-color: rgba(0, 0, 0, 0.5);
        padding: 3rem 1rem;
        margin: 3rem auto;
        color:rgb(255, 255, 255);
        font-size: 2.4rem;
        border-radius: 2rem;
    }
    .botonInicialComputadorSubPagina {
        margin-top: 7rem;
    }
    .botonInicialComputadorSubPagina a {
        text-decoration: none;
        color:white;
        background-color: rgb(22, 99, 102);
        padding: 1rem 3rem;
        border-radius: 1rem;
        -webkit-box-shadow: 10px 10px 17px -8px rgba(0,0,0,0.75);
        -moz-box-shadow: 10px 10px 17px -8px rgba(0,0,0,0.75);
        box-shadow: 10px 10px 17px -8px rgba(0,0,0,0.75);
    }
    .botonInicialComputadorSubPagina a:hover {
        background-color: rgb(29, 88, 139);
    }
}

/* quieres regalar*/

.quieresRegalar {
    text-align: center;
    margin-top: 5rem;
    width: 90%;
    margin: 8rem auto 5rem auto;
    padding: 2rem 2rem;
    border-radius: 3rem;
}
.quieresRegalar p {
    font-size: 1.5rem;
}
.formularioBusquedaLista{
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(1,1fr);
    column-gap: 2rem;
    row-gap: 1rem;
    font-size: 1.6rem;
}
.formularioBusquedaLista input {
    border-radius: 1rem;
    padding: 1rem;
}
.formularioBusquedaLista input:not([type="text"]) {
    background-color: rgb(29, 88, 139);
    border:none;
    color:white;
}
@media (min-width: 983px) {
    .quieresRegalar {
        text-align: center;
        margin-top: 5rem;
        border: 1px solid black;
        width: 60%;
        margin: 8rem auto 5rem auto;
        padding: 2rem 2rem;
        border-radius: 3rem;
        -webkit-box-shadow: 2px 2px 17px 0px rgba(0,0,0,0.75);
        -moz-box-shadow: 2px 2px 17px 0px rgba(0,0,0,0.75);
        box-shadow: 2px 2px 17px 0px rgba(0,0,0,0.75);
    }
    .quieresRegalar p {
        font-size: 1.5rem;
    }
    .formularioBusquedaLista{
        width: 60%;
        margin: auto;
        display: grid;
        grid-template-columns: 60% 40%;
        column-gap: 2rem;
        font-size: 1.6rem;
    }
    .formularioBusquedaLista input:not([type="text"]) {
        background-color: rgb(29, 88, 139);
        border:none;
        color:white;
    }
}

/* CASILLAS */
.textoDosArticulo {
    margin: 5rem auto;
    text-align: center;
    width: 100%;
}
.flecha {
    text-align: center;
    margin: auto;
    font-size: 2rem;
}
.flecha p {
    margin: 0rem;
}
.detalleCosas {
    font-size: 1.4rem;
    margin-top: 2rem;
}
.cosas {
    padding: 5rem 0rem;
    background-color: rgb(6, 41, 6);
    color:white;
    border-radius: 1rem;
    -webkit-box-shadow: 10px 10px 45px 11px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 45px 11px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 45px 11px rgba(0,0,0,0.75);
}
.cosasComputador {
    display: none;
}
@media (min-width: 983px) {
    .cosasComputador {
        display: unset;
    }
    .cosasCelular {
        display: none;
    }
    .textoDosArticulo {
        margin: 5rem auto;
        text-align: center;
        width: 100%;
    }
    .flecha {
        text-align: center;
        margin: auto;
        font-size: 2rem;
    }
    .flecha p {
        margin: 0rem;
    }
    .detalleCosas {
        font-size: 1.4rem;
        margin-top: 6rem;
    }
    .cosas {
        padding: 5rem 1rem;
        background-color: rgb(6, 41, 6);
        color:white;
        border-radius: 0rem;
        -webkit-box-shadow: 10px 10px 45px 11px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 45px 11px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 45px 11px rgba(0,0,0,0.75);
    }
}

/* INICIO DE SESION REGISTRO EXITOSO */

.divGlobalInicioSesionRegistro {
    width: 90%;
    margin: auto;
}
.inicioDeSesion {
    display: grid;
    grid-template-columns: 30% 70%;
    margin: 1rem auto;
    font-size: 1.5rem;
}
.inicioDeSesion label {
    font-weight: bold;
    padding: 1rem 0rem 1rem 0rem;
}
.botonIngresoRegistroExitoso {
    width: 90%;
    margin: auto;
}
.botonIngresoRegistroExitoso input {
    width: 100%;
    background-color: rgb(114, 18, 85);
    border: rgb(100, 16, 75);
    color:white;
    padding: 1rem;
    font-size: 1.5rem;    
}
.recuperarContrasena {
    margin-top: 2rem;
    text-align: center;
    font-size: 1.4rem;
}
.recuperarContrasena a {
    color: rgb(56, 56, 56);
}
@media (min-width: 983px) {
    .divGlobalInicioSesionRegistro {
        width: 30%;
        margin: auto;
    }
    .botonIngresoRegistroExitoso {
        width: 30%;
        margin: auto;
    }
}

/* PORTAL USUARIO */

.primerIngreso {
    width: 90%;
    margin: 4rem auto;
    font-size: 1.4rem;
    text-align: justify;
}
.divDatosEnPortal {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    margin: 1rem 0rem;
}
.informacionCuadros {
    width: 90%;
    margin: 1rem auto;
    font-size: 1.4rem;
    text-align: justify;
}
.cuadros {
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 1rem;
    row-gap: 1rem;
}
.cuadros a {
    text-decoration: none;
    color:white;
    font-size: 1.3rem;
}
.informacion {
    background-color: rgb(0, 0, 0);
    padding: 3rem;
    text-align: center;
    border-radius: 1rem;
}
.informacion i {
    font-size: 2rem;
    margin:0rem;
}
.informacion p {
    margin: 0rem;
}
.informacion a {
    text-decoration: none;
}
.resumenEnPortal {
    width: 80%;
    margin: 5rem auto;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 1rem;
    row-gap: 1rem;
    font-size: 1.5em;
}
.tuEvento {
    text-align: center;
    font-size: 1.7rem;
    font-weight: bold;
    margin:4rem;
}

@media (min-width: 983px) {
    .primerIngreso {
        font-size: 1.6rem;
    }
   
    .informacionCuadros {
        font-size: 1.6rem;
    }
    .cuadros {
        width: 60%;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        column-gap: 4rem;
        row-gap: 4rem;
    }
    .divPortalPorDos {
        display: grid;
        grid-template-columns: 30% 60%;
        width: 90%;
        margin: auto;
    }
}

/* PAGINA INFORMACION */

.actualizacionExitosa {
    background-color:rgb(12, 46, 12);;
    color:white;
    padding:1rem 2rem;
    text-align:center;
    font-size:1.3rem;
}
.explicacionInformacion {
    width:80%;
    font-size:1.6rem;
    margin:auto;
}
.preguntaSobreEvento {
    width: 80%;
    display: grid;
    grid-template-columns: repeat(1,1fr);
    margin: 3rem auto;
    row-gap: 1rem;
    font-size: 1.5rem;
}
.textoExplicativoPreguntas {
    width: 80%;
    margin: auto;
    font-size: 1.3rem;
}
.botonEnviarRespuestasPreguntasSobreEvento {
    width: 80%;
    margin: auto;
}
.botonEnviarRespuestasPreguntasSobreEvento input {
    width: 100%;
    font-size: 1.6rem;
    border: none;
    background-color: rgb(100, 16, 75);
    color:white;
}
.botonVolverPortalInicio {
    margin: 4rem auto;
    text-align: center;
    font-size: 1.4rem;
}
.botonVolverPortalInicio a {
    text-decoration: none;
    background-color: rgb(9, 9, 97);
    color:white;
    padding: 1rem 3rem;
}
.globalInformacion {
    width:90%;
    margin:4rem auto;
}
.globalInformacion {
    color:gray;
    padding:1rem;
    border-radius:1rem;
    border:1px solid gray;
    -webkit-box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.75);
    font-size:1.4rem;
}
.globalInformacion p {
    margin:2px;
}
.tituloInformacion {
    color:black;
    margin-bottom:2rem;
}
.botonEditarInformacion {
    margin:4rem auto 1rem auto;
    text-align:auto;
    text-align:center;
}
.botonEditarInformacion a {
    background-color:black;
    color:white;
    padding:1rem 3rem;
    text-decoration:none;
}
.respuestaInformacion input {
    width:100%;
    margin-bottom:1rem;
}
.respuestaInformacion textarea {
    width:100%;
    margin-bottom:1.3rem;
}
.guardarInformacion {
     width: 90%;
    margin:0rem auto 5rem auto;
}
.guardarInformacion input {
    text-align:center;
    background-color:green;
    width:100%;
    border:none;
    color:white;
    padding:3rem auto;
    font-size:1.7rem;
}
@media (min-width: 983px) {
        .explicacionInformacion {
        width:80%;
        font-size:1.8rem;
        margin:auto;
        text-align:center;
    }
    .divGeneralGlobalInformacion {
        display:grid;
         grid-template-columns: repeat(2,1fr);
         width:70%;
         margin:5rem auto;
         column-gap:4rem;
    }
    .globalInformacion { 
        font-size:1.6rem;
    }
    .preguntaSobreEvento {
    width: 60%;
    margin: 5rem auto;
    }
    .textoExplicativoPreguntas {
    width: 60%;
    }
    .botonEnviarRespuestasPreguntasSobreEvento {
        width: 60%;
    }
   
}

/* PAGINA REGALOS */

.divFilaListaRegalos {
    display: grid;
    grid-template-columns: 70% 30%;
    width: 80%;
    margin:auto;
    font-size: 1.3rem;
    row-gap: 2rem;
    column-gap: 1rem;
    border: 1px solid black;
    padding:1rem;
}
.divAgregarRegalo {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    width: 80%;
    margin: 2rem auto;
    font-size: 1.5rem;
}
.botonAgregarRegalo {
    width: 80%;
    margin:auto;
}
.botonAgregarRegalo input {
    width: 100%;
    background-color: rgb(15, 85, 25);
    color:white;
    border:none;
    color:white;
    font-size: 1.5rem;
}


/* CONFIRMACION PORTAL */

.sinInvitados {
    width: 80%;
    margin:auto;
    font-size: 1.5rem;
    text-align: center;
    color:red;
    font-weight: bold;
}

.verLista {
    margin-top: 2rem;
    text-align: center;
}
.verLista a {
    background-color: rgb(12, 12, 73);
    color:white;
    padding: 1rem 2rem;
    font-size: 1.4rem;
    text-decoration: none;
    border-radius: 1rem;
}
.agregarInvitados {
    margin-top: 5rem;
    text-align: center;
    color:green;
    font-size: 1.5rem;
    font-weight: bold;
}
.nombreInvitado {
    width: 80%;
    margin:auto;
}
.inputNombreInvitado {
    font-size: 1.4rem;
    display: grid;
    grid-template-columns: repeat(1,1fr);
    row-gap: 1rem;
    margin-top:3rem;
}
.inputNombreInvitado label {
    font-weight: bold;
}
.divBotonAgregarInvitado {
    text-align: center;
    margin-top:2rem;
}
.divBotonAgregarInvitado button {
    border:none;
    background-color: rgb(28, 92, 8);
    color:white;
    font-size: 1.4rem;
    padding:1rem 2rem;
}

/* ELIGIENDO REGALOS */

.divDeseos {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 1rem;
    row-gap: 5rem;
    width: 95%;
    margin:5rem auto;
}
.deseos {
    background-color: rgb(255,255,255);
    font-size: 1.5rem;
    text-align: center;
    padding: 1rem;
    border:1px solid gray;
    border-top-left-radius:1rem;
    border-bottom-right-radius:1rem;
}
.deseosPorDos {
      grid-column-start: 1;
      grid-column-end: 3;
}
@media (min-width: 983px) {
.deseosPorDos {
      grid-column-start: 2;
      grid-column-end: 4;
}
    
}
.inputPorDos {
    display:grid;
    grid-template-columns: repeat(1,1fr);
    width:100%;
}
.inputPorDos input {
    width:100%;
    padding:1rem;
}
.deseosJhen {
    background-color: rgb(255,255,255);
    font-size: 1.5rem;
    text-align: center;
    padding: 1rem;
}
.imagenDeseos img {
    border-radius: 1rem;
}

@media (min-width: 983px) {
    .imagenDeseos {
        text-align:center;
    }
    .imagenDeseos img {
        width:100%;
    }
}

.nombreDeseo {
    text-transform: uppercase;
    font-size: 1.7rem;
    height:8rem;
}
.cantidadDeRegalos {
    text-transform:inherit;
    font-size:1rem;
}
.valor {
    margin:auto;
}
.valor p {
    margin:0rem;
    font-size: 2rem;
    padding-bottom: 1rem;
}
.anadir {
    background-color: black;
    color:white;
    padding:0.5rem 1rem;
    border-radius: 1rem;
    cursor: pointer;
}
.anadir p {
    margin:0rem;
}
.avisoYaExistente {
    background-color: rgb(75, 17, 17);
    color:white;
    border-radius: 1rem;
    padding:1rem 2rem;
    cursor: pointer;
}
.avisoYaExistente p {
    margin: 0rem;
}
.avisoRegaloCreado {
    background-color: blue;
    color:white;
    border-radius: 1rem;
    padding:1rem 2rem;
    cursor: pointer;
}
.avisoRegaloCreado p {
    margin:0rem;
}
.textoTres {
    text-align: center;
    width: 80%;
    margin:auto;
}
.textoTres h2 {
    font-family: 'Didact Gothic', sans-serif;
}
.textoTres p {
    font-size:1.8rem;
}
.textoCuatro {
    margin:4rem auto;
    font-size: 2rem;
    width: 80%;
    text-align: center;
}
.divDatosGlobal {
    text-align: center;
    width: 80%;
    margin:auto;
}
.divInput {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    margin: 2rem;
    font-size: 1.7rem;
    text-align: left;
}
.divInput input {
    padding:1rem 1rem;
    border:1px solid gray;
}
.divInput textarea {
    padding:1rem 1rem;
    border:1px solid gray;
}
.finalizarDeseos {
    display: grid;
    grid-template-columns: 40% 60%;
    width: 80%;
    margin: 5rem auto;
    font-size: 2rem;
}
.finalizarEleccionDeseos {
    grid-column: 1/3;
    text-align: center;
    background-color: black;
    color:white;
}
.finalizarEleccionDeseos input {
    width: 100%;
    text-align: center;
    background-color: rgb(0, 0, 0);
    color:white;
    border:none
}
.textoDos {
    margin-top:5rem;
    text-align: center;
    font-size: 2rem;
}
.datosRegalo {
    width: 80%;
    margin: 2rem auto;
    display: grid;
    grid-template-columns: 70% 30%;
    font-size: 1.5rem;
}
.formPagar {
    margin-top: 4rem;
    text-align: center;
}
.formPagar img {
    width: 40%;
    border:1px solid gray;
}
.formPagar button {
    background-color: unset;
    border:none;
}
.tarjetaRechazada {
    margin-top: 3rem;
    text-align: center;
    font-size: 1.4rem;
}
.compraExitosa {
    margin-top: 3rem;
    text-align: center;
    font-size: 1.4rem;
}
.informacionVenta {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    width: 80%;
    margin: 3rem auto;
}
.tituloEligiendoRegalos{
    text-align:center;
    font-size:2rem;
    margin:4rem auto;
}
.botonAgregarRegaloUsuario {
    font-size: 1.5rem;
    width: 80%;
    margin:auto;
    cursor: pointer;
}
.botonAgregarRegaloUsuario p {
    margin:0rem;
}
.botonAgregarRegaloUsuario input {
    background-color:rgb(8, 58, 8);
    color:white;
    border:none;
    padding:1rem 3rem;
}
.activarBotonPagar {
    width: 70%;
    margin: 2rem auto;
    text-align: center;
    font-size: 2rem;
    color:red;
}
.divAgregarInvitados {
    text-align:center;
    margin-bottom:5rem;
}
.divAgregarInvitados a {
    padding:1rem 2rem;
    background-color:black;
    color:white;
    font-size:1.5rem;
    border-radius:1rem;
    text-decoration:none;
}
.textoExportacion {
    font-size:1.3rem;
}
.divAgregarInvitados form input {
    border:none;
    background-color: rgb(5, 5, 92);
    color:white;
    font-size:1.4rem;
    padding: 1rem 2rem;
}
.imagenRegalos {
    position:relative;
    width:40%;
    margin:auto auto 3rem auto;
}
.imagenRegalos img {
    border-radius:50%;
}
.imagenAguaRegaloUno {
    position:absolute;
    top:5rem;
    left:-8rem;
    font-size:5rem;
    z-index:-10;
    transform:rotate(15deg);
    color: rgba(66, 21, 21, 0.377);
}
.imagenAguaRegaloDos {
    position:absolute;
    top:0rem;
    left:15rem;
    font-size:5rem;
    z-index:-10;
    transform:rotate(-15deg);
    color: rgba(49, 66, 21, 0.377);
}
@media (min-width: 983px) {
    .divDeseos {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        column-gap: 5rem;
        row-gap: 4rem;
        width: 80%;
        margin:5rem auto;
    }
    .divDatosGlobal {
        text-align: center;
        width: 50%;
        margin:auto;
    }
    .nombreDeseo {
    text-transform: uppercase;
    font-size: 1.7rem;
    height:6rem;
    }
    .finalizarDeseos {
        display: grid;
        grid-template-columns: 40% 60%;
        width: 30%;
        margin: 5rem auto;
        font-size: 2rem;
    }
    .datosRegalo {
        width: 40%;
        margin: 2rem auto;
        display: grid;
        grid-template-columns: 70% 30%;
        font-size: 1.5rem;
    }
    .informacionVenta {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        width: 40%;
        margin: 3rem auto;
    }
    .imagenRegalos {
    width:15%;
    margin:auto auto 3rem auto;
    }
    .imagenRegalos img {
        border-radius:50%;
    }
    .imagenAguaRegaloUno {
    position:absolute;
    top:5rem;
    left:-12rem;
    font-size:8rem;
    z-index:-10;
    transform:rotate(15deg);
    color: rgba(66, 21, 21, 0.377);
    }
    .imagenAguaRegaloDos {
        position:absolute;
        top:0rem;
        left:24rem;
        font-size:8rem;
        z-index:-10;
        transform:rotate(-15deg);
        color: rgba(49, 66, 21, 0.377);
    }
}

/* DIV CUMPLEAÑOS PERSONALIZADOS */

.divRegaloConfirmacion {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    text-align: center;
    width:90%;
    column-gap: 4rem;
    row-gap: 3rem;
    margin: 5rem auto;
}
.divRegaloConfirmacion a {
    text-decoration: none;
    color:white;
}
.divRegaloConfirmacionJoseIgnacio {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    text-align: center;
    width:90%;
    column-gap: 4rem;
    row-gap: 3rem;
    margin: 5rem auto 0rem auto;
}
.divRegaloConfirmacionJoseIgnacio a {
    text-decoration: none;
    color:white;
}
.divRegalaAqui {
    position: relative;
}

.divRegalaAqui img {
    border-radius: 1rem;
    -webkit-box-shadow: 10px 19px 28px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 19px 28px 0px rgba(0,0,0,0.75);
    box-shadow: 10px 19px 28px 0px rgba(0,0,0,0.75);
}
.divRegalaAqui button {
    font-family: 'Didact Gothic', sans-serif;
    font-size: 1.6rem;
    color:white;
    background-color: unset;
    border:none;
}
.buttonDivRegalaAqui {
    position: relative;
    top:-8rem;
    background-color: rgba(0, 0, 0, 0.815);
    padding:2rem 0rem;
}
.buttonDivRegalaAqui p {
    margin:0rem;
    text-transform: uppercase;
}
.buttonDivRegalaAquiJesica {
    position: relative;
    top:-1rem;
    background-color: rgba(0, 0, 0);
    padding:2rem 0rem;
}
.buttonDivRegalaAquiJesica {
     position: relative;
    top:-1rem;
    background-color: rgba(0, 0, 0);
    padding:2rem 0rem;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius:1rem;
}
.divConfirmaAqui {
    background-color: rgb(14, 54, 41);
    padding:2rem 5rem;
    border-radius: 1rem;
}
.divConfirmaAqui p {
    margin:0rem;
    font-size: 1.4rem;
}
.plantaVale {
    position:absolute;
    z-index:-100;
    text-align:center;
}
@media (min-width: 983px) {
    .divRegaloConfirmacion {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        width: 70%;
    }
    .divRegaloConfirmacionJoseIgnacio {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        width: 90%;
        margin:10rem auto 0rem auto;
    }
    .divRegalaAquiVale {
    grid-column:2/4;
    }
    .plantaVale img {
        opacity: 0.7;
    }
   
}
.datosRegistroCumpleJacky {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    width: 80%;
    margin:auto;
    text-align: left;
}
.datosRegistroCumpleJacky label {
    font-weight: bold;
}
.datosRegistroCumpleJacky input {
    margin-bottom: 3rem;
    padding:1rem;
}
.datosRegistroCumpleJacky select {
    margin-bottom: 3rem;
    padding:1rem;
}
.divBotonRegistroJacky {
    margin: 0rem auto 5rem auto;
}
.divBotonRegistroJacky input {
    background-color: black;
    color:white;
    width:80%;
    border:none;
    padding:1rem;
}
.mensajeNoAsistencia {
    width: 80%;
    font-size: 1.4rem;
    text-align: center;
    margin:auto;
}
@media (min-width: 983px) {
    .datosRegistroCumpleJacky {
        display: grid;
        grid-template-columns: repeat(1,1fr);
        width: 40%;
        margin:auto;
        text-align: left;
    }
    .divBotonRegistroJacky input {
        background-color: black;
        color:white;
        width:40%;
        border:none;
        padding:1rem;
    }
    .mensajeNoAsistencia {
        width: 40%;
        font-size: 1.4rem;
        text-align: center;
        margin:auto;
    }
}

/* INFORMACION EVENTO JACKY*/

.cuadroInformacionEvento {
    width: 80%;
    margin:auto;
    
}
.cuadroIndividualInfoEvento {
    text-align: center;
    font-size:1.5rem;
    border:1px solid black;
    margin:4rem 0rem;
    -webkit-box-shadow: 7px 7px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 7px 7px 5px 0px rgba(0,0,0,0.75);
box-shadow: 7px 7px 5px 0px rgba(0,0,0,0.75);
}
.nombreInfoEvento {
    background-color: black;
    color:white;
    padding:1rem;
    text-transform: uppercase;
    margin: auto;
}
.nombreInfoEvento p {
    margin:0rem;
}
.respuestaInfoEvento {
    margin:auto;
    padding: 1rem;
}
.respuestaInfoEvento p {
    margin:0rem;
}
.respuestaInfoEvento a {
    text-decoration: none;
    color:black;
    font-weight: bold;
}
.volverEventoJacky {
    text-align: center;
    margin-bottom:7rem;
}
.volverEventoJacky a {
    text-decoration: none;
    background-color: black;
    color:white;
    padding:1rem 2rem;
    font-size:1.5rem;
}
.importanteEventoJacky {
    width: 80%;
    margin:auto;
    color:red;
    font-size: 1.6rem;
    text-align: center;
}
@media (min-width: 983px) {
    .cuadroInformacionEvento {
        width: 80%;
        margin:auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 4rem;
    }
}

/* cerrar sesion */
.cerrarSesion {
    width:80%;
    margin:2rem auto;
    text-align:center;
}
.cerrarSesion a {
    padding:1rem 2rem;
    background-color:red;
    border-radius:1rem;
    text-decoration:none;
    color:white;
    font-size:1.4rem;
}

/* REGALOS PAGADOS */
.resumenRegalos {
    width:90%;
    margin:auto;
    font-size:2rem;
}
.visualizacionPortalRegalos {
    width:90%;
    margin:2rem auto;
    padding:1rem;
    display:grid;
    grid-template-columns: repeat(1, 1fr);
}
.regaloConfirmado {
    border:1px solid black;
    border-radius:2rem;
    padding:2rem;
    margin:2rem auto;
    font-size:1.4rem;
    -webkit-box-shadow: 4px 9px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 4px 9px 5px 0px rgba(0,0,0,0.75);
box-shadow: 4px 9px 5px 0px rgba(0,0,0,0.75);
width:100%;
}
.mensajeRegaloConfirmado {
        text-align: justify;
        font-size:1.6rem;
}
@media (min-width: 983px) {
    .resumenRegalos {
        width:30%;
        margin:auto;
        font-size:2rem;
    }
    .visualizacionPortalRegalos {
        width:80%;
        margin:2rem auto;
        padding:1rem;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 3rem;
    }
}
/* PRIVACIDAD */

.tituloPrivacidad {
    text-align: center;
    margin:3rem auto;
}
.tituloPrivacidad h1 {
    font-family: 'Mukta', sans-serif;
    font-size: 2rem;
    text-transform: uppercase;
    text-decoration: underline;
}
.textoPrivacidad {
    width: 80%;
    margin:auto;
    font-family: 'Mukta', sans-serif;
    font-size: 1.5rem;
    text-align: justify;
}
@media (min-width: 983px) {
    .tituloPrivacidad {
        width: 80%;
        margin:auto;
        text-align: left;
        margin:5rem auto;
    }
    .tituloPrivacidad h1 {
        font-family: 'Mukta', sans-serif;
        font-size: 3rem;
    }
    .textoPrivacidad {
    font-family: 'Mukta', sans-serif;
    font-size: 1.7rem;
    }
}

/* PREGUNTAS Y RESPUESTAS */
.divSeleccionPreguntasFrecuentes {
    width: 80%;
    margin:auto;
    text-align: center;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 2rem;
     font-family: 'Mukta', sans-serif;
}
.divSeleccionPreguntasFrecuentes>div {
    border:1px solid black;
    cursor: pointer;
    padding:1rem 2rem;
    border-radius:1rem;
}
.divSeleccionPreguntasFrecuentes>div:hover {
    background-color: rgb(22, 99, 102);
    color:white;
}
.divSeleccionPreguntasFrecuentes p {
    margin:0rem;
    font-size:1.3rem;
}
.preguntas {
    width: 90%;
    margin:4rem auto;
    text-align: center;
}
.pregunta {
    margin:3rem auto;
}
.tituloPregunta {
    background-color: black;
    color:white;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    padding:1rem;
    font-size:1.7rem;
}
.respuestaPregunta {
    padding:1rem;
    font-size:1.4rem;
    border-left: 1px solid black;
    border-right:1px solid black;
    border-bottom: 1px solid black;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    text-align: justify;
}
@media (min-width: 983px) {
    .divSeleccionPreguntasFrecuentes {
    width:40%;
    }
    .divSeleccionPreguntasFrecuentes p {
        margin:0rem;
        font-size:1.8rem;
    }
    #preguntasClientes {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        column-gap: 4rem;
    }
    #preguntasInvitados {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        column-gap: 4rem;
    }
    .pregunta {
         width: 100%;
    }
    .respuestaPregunta {
        height: 80%;
        font-size: 1.7rem;
    }
}

/* PORTAL COLABORADORES */
.tituloResumenRegalosColaboradores {
    text-align:center;
}
.tituloResumenRegalosColaboradores h4 {
    font-size:2.3rem;
    margin:5rem auto;
}
.regalosPortalColaboradores {
    display:grid;
    grid-template-columns: repeat(5,1fr);
    width:80%;
    margin:auto;
    font-size:1.4rem;
}
.regalosPortalColaboradoresDos {
     display:grid;
    grid-template-columns: repeat(9,1fr);
    width:80%;
    margin:auto;
    font-size:1.4rem;
}

.centrado {
    text-align:right;
}

.regaloPorClienteEncabezado {
    width:90%;
    margin:auto;
     display:grid;
    grid-template-columns: repeat(6,1fr);
    background-color:black;
    color:white;
    font-size:1.5rem;
}
.regaloPorClienteDetalle {
    width:90%;
    margin:auto;
       display:grid;
    grid-template-columns: repeat(6,1fr);
      font-size:1.5rem;
}

.regaloPorClienteDetalle p {
    margin:0rem;
}


/* REGISTRO AMANDA JACKY */
.registroAmandaJacky {
    display:grid;
    grid-template-columns: repeat(7,1fr);
    width:80%;
    margin:auto;
    font-size:1.4rem;
}

/* ESTILOS SERVICIOS */

.tituloServicios {
    text-align: center;
    margin-top: 3rem;
}
.tituloServicios h1 {
    font-size: 2.2rem;
}
.divServicios {
    width: 90%;
    margin: 4rem auto 6rem auto;
}
.numeroDivServicios {
    font-size: 3rem;
    margin: auto;
    text-align: center;
}
.tituloDivServicios {
    font-size: 2rem;
    margin: auto;
    text-decoration: underline;
}
.textoServicios {
    font-size: 1.6rem;
    text-align: justify;
}
.divServiciosMarginAuto img {
    border-radius: 2rem;
    -webkit-box-shadow: 10px 9px 23px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 9px 23px 0px rgba(0,0,0,0.75);
box-shadow: 10px 9px 23px 0px rgba(0,0,0,0.75);
}
@media (min-width: 983px) {
    .divGlobalServicios {
        width: 80%;
        margin:auto;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        column-gap: 5rem;
        row-gap: 2rem;
    }
    .divServicios img {
        width: 100%;
    }
    .divServiciosMarginAuto {
        margin:auto !important;
    }
   
}

/* CONFIRACION */
.textoConfirmacion {
    text-align: center;
    font-size: 2rem;
}
.textoConfirmacion {
    text-align: center;
    width: 70%;
    margin:auto;
}
.textoConfirmacionImportante {
    width:70%;
    margin:auto;
    font-size:1.6rem;
    text-align: justify;
}
.textoConfirmacionDos {
    width:70%;
    margin:3rem auto;
    font-size:1.6rem;
    text-align: justify;
}
.inputBuscarNombre {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    row-gap: 0.5rem;
    width: 70%;
    margin:auto;
    font-size: 1.6rem;
}
.enviarBuscador {
    text-align: center;
    font-size: 1.8rem;
    margin:1rem auto 3rem auto;
}
.enviarBuscador input {
    border:none;
    background-color: black;
    color:white;
    padding:1rem 3rem;
    border-radius: 1rem;
}
.confirmacionVale {
    width:70%;
    font-size: 1.8rem;
    margin:1rem auto 3rem auto;
}
.confirmacionVale input {
    border:none;
    background-color: black;
    color:white;
    padding:1rem 3rem;
}
.confirmacionVale select {
    border:none;
    background-color: black;
    color:white;
    padding:1rem 3rem;
}
.resultadoNombreBusqueda {
    text-align: center;
    font-size: 1.6rem;
}
.resultadoNombreBusqueda input {
    padding:1rem 2rem;
    margin:1rem auto 1rem auto;
    cursor: pointer;
    font-family: 'Dancing Script', cursive;
    background-color:white;
    border:none;
    font-size:2.5rem;
    background-color:black;
    color:white;
}

.textoResultados {
    text-align: center;
    font-size: 1.7rem;
}
.marginTopdeDiez {
    margin-top: 10rem !important;
}
.invitacionConpareja {
    text-align: center;
    width: 80%;
    margin:auto;
    font-size: 1.8rem;
}
.invitadoUno {
    width: 80%;
    margin:2rem auto;
    font-size: 1.6rem;
}
.invitadoUno input,select {
    width: 100%;
}
.invitadoDos {
    width: 80%;
    margin:2rem auto;
    font-size: 1.6rem;
}
.invitadoDos input,select {
    width: 100%;
}
.resumendeInvitados {
    width:60%;
    margin:auto auto 5rem auto;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    row-gap:2rem;
    text-align:center;
    font-size:1.5rem;
    border:1px solid gray;
    padding:1rem;
}
.divCadaResumenInvitados p {
    margin:0rem;
}
@media (min-width: 983px) {
    .invitadoUno {
        width: 40%;
        margin:2rem auto;
        font-size: 1.6rem;
    }
    .invitadoDos {
        width: 40%;
        margin:2rem auto;
        font-size: 1.6rem;
    }
}

/* ESTILOS DEPASHOWER*/

.azulSuave {
    background-color: rgba(128, 190, 190, 0.555);
}
@media (min-width: 983px) {
    .divGlobalPorDos {
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }
    .divRegaloConfirmacionPorDos {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        width: 70%;
        margin:9rem auto 2rem auto;
        column-gap: 8rem;
    }
}

/* NOSOTROS */

.tituloNosotros {
    width: 80%;
    margin: 5rem auto 2rem auto;
    position: inherit;
}
.tituloNosotros h1 {
    font-size: 2.5rem;
    font-family: 'Acme', sans-serif;
}
.textoSecundarioNosotros {
    font-size: 2rem;
    width: 80%;
    margin: auto;
    text-align: justify;
}
.textoMisionNosotros {
    font-size: 2rem;
    width: 80%;
    margin: auto;
      text-align: justify;
}
.integranteEquipo {
    width: 80%;
    margin:auto;
}
.nombreEquipo {
    font-size: 2rem;
}
.nombreEquipo p {
    margin: 0rem;
}
.imagenEquipo {
    width: 60%;
    margin:left;
    margin-bottom: 4rem;
    margin-top:4rem;
}
.imagenEquipo img {
         -webkit-box-shadow: 10px 9px 23px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 9px 23px 0px rgba(0,0,0,0.75);
box-shadow: 10px 9px 23px 0px rgba(0,0,0,0.75);
border-radius: 1rem;
}
.cargoEquipo {
    font-size: 1.8rem;
}
.enlaceEquipo {
    font-size: 1.8rem;
}
.separacionIntegrantesEquipo {
    margin: 4rem auto;
    width: 80%;
}
.divRegaloMarcaDeAgua {
    position: absolute;
    top:30rem;
}
.divRegaloMarcaDeAgua i {
    font-size: 20rem;
    opacity: 0.2;
    color:green;
    transform: rotate(25deg);
}
.divRegaloMarcaDeAguaDos {
    position: absolute;
    top:76rem;
    left: 10rem;
}
.divRegaloMarcaDeAguaDos i {
    font-size: 20rem;
    opacity: 0.2;
    color:rgb(136, 42, 35);
    transform: rotate(-20deg);
}
.separacionIntegrantesComputador {
    display: none;
}
.regaloMarcadeAguaAndres {
    top:45rem;
    left:9rem;
}
.regaloMarcadeAguaAndresDos {
    top:51rem;
    left:9rem;
    transform: rotate(45deg);
}
.regaloMarcadeAguaAndresTres {
     top:115rem;
    left:8rem;
    transform: rotate(15deg);
}
.regaloMarcadeAguaAndresCuatro {
    top:48rem;
    left:9rem;
    transform: rotate(45deg);
}
.masChico img {
    width:60%;
}
@media (min-width: 983px) {
    .separacionIntegrantesEquipo {
        display: none;
    }
    .divVisionMisionValores {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        column-gap: 4rem;
        width: 80%;
        margin:3rem auto;
    }
    .divGlobalIntegrantes {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        column-gap: 5rem;
        width: 80%;
        margin:5rem auto;
    }
    .divRegaloMarcaDeAgua {
        position: absolute;
        top:25rem;
        left:35rem
    }
    .divRegaloMarcaDeAgua i {
        font-size: 30rem;
        transform: rotate(20deg);
    }
    .divRegaloMarcaDeAguaDos {
        position: absolute;
        top:105rem;
        left: 55rem;
    }
    .divRegaloMarcaDeAguaDos i {
        font-size: 20rem;
        transform: rotate(-20deg);
    }
      .separacionIntegrantesComputador {
        display: block;
        text-align: center;
    }
    .regaloMarcadeAguaAndres {
    top:52rem;
    left:55rem;
    }
    .regaloMarcadeAguaAndres i {
    font-size:35rem;
    }
    .regaloMarcadeAguaAndresDos {
    top:53rem;
    left:50rem;
    transform: rotate(45deg);
}
.regaloMarcadeAguaAndresTres {
     top:115rem;
    left:59rem;
    transform: rotate(15deg);
}
.regaloMarcadeAguaAndresCuatro {
    top:55rem;
    left:85rem;
    transform: rotate(45deg);
}
.regaloMarcadeAguaAndresCuatro i {
    font-size:32rem;
}
}


/* CONFIRMACION INVITADOS */
.estadoInvitados {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    width: 90%;
    margin:auto;
    font-size: 1.5rem;
    font-weight: bold;
}
.respuestaInvitados {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    width: 90%;
    margin:auto;
    font-size: 1.3rem;
}
.divConPareja {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin-bottom:1rem;
    margin-top:1rem;
}
.divSinPareja {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin-bottom:1rem;
    margin-top:1rem;
}
@media (min-width: 983px) {
    .estadoInvitados {
    width: 60%;
    }
    .respuestaInvitados {
    width: 60%;
    }
}

/* DETALLE DE PAGOS  */

.detalleTusPagos {
    display:grid;
    grid-template-columns: repeat(7,1fr);
    color:white;
    background-color:black;
    font-size:1.5rem;
}
.detalleTusPagos p {
    margin:0rem;
}
.detalleDeAbonos {
     display:grid;
    grid-template-columns: repeat(7,1fr);
    row-gap:2rem;
     font-size:1.5rem;
}
.detalleDeAbonos p {
    margin:0rem;
}
.detalleDeAbonos a {
    text-decoration:none;
    color:black;
}
.tituloAbonos {
    display:none;
}
.detalleTusPagosComputador {
    display:none;
}
.detalleDeAbonosComputador {
    display:none;
}
.detalleAbonosCelular {
    display:grid;
    grid-template-columns: repeat(3,1fr);
    width:90%;
    margin:4rem auto;
    border:1px solid black;
}
.detalleAbonosCelular>div>h3 {
    background-color:black;
    color:white;
    padding:2px;
}
.detalleAbonosCelular>div>p {
    font-size:1.5rem;
    padding:2px;
    margin:0rem;
}
.columnaPorTres {
    grid-column: 1 / 4;
}
@media (min-width: 983px) {
    .detalleAbonosCelular { 
        display:none;
    }
    .tituloAbonos {
        display:block
        
    }
    .detalleTusPagosComputador {
        display:grid;
        grid-template-columns: repeat(7,1fr);
        color:white;
        background-color:black;
        font-size:1.5rem;
        width:80%;
        margin:auto;
    }
    .detalleTusPagosComputador p {
        margin:0rem;
        padding:1rem;
    }
    .detalleDeAbonosComputador {
         display:grid;
        grid-template-columns: repeat(7,1fr);
        row-gap:2rem;
         font-size:1.5rem;
         width:80%;
        margin:auto;
        border-left:1px solid black;
        border-bottom:1px solid black;
        border-right:1px solid black;
    }
    .detalleDeAbonosComputador p {
        margin:0rem;
    }
    .detalleDeAbonosComputador a {
        text-decoration:none;
        color:black;
    }
    .detalleDeAbonosComputador>div>p {
        padding:1rem;
    }
}

/* AGREGAR INVITADOS */

.divInputAgregarInvitados {
    margin:1.5rem;
    display:grid;
    grid-template-columns: repeat(1,1fr);
    row-gap:1rem;
    font-size:1.5rem;
}
.divInputAgregarInvitados label {
    font-weight:bolder;
}
.botonInputAgregarInvitados {
    text-align:center;
    font-size:1.7rem;
}
.botonInputAgregarInvitados input {
    background-color:black;
    color:white;
    border-radius:1rem;
    border:none;
    padding:1rem 3rem;
}
.detalleInvitadoAgregado {
    width:80%;
    margin:auto;
    font-size:2rem;
}
.divVolveraInvitados {
    text-align:center;
}
.divVolveraInvitados a {
    text-decoration:none;
    font-size:1.5em;
}
@media (min-width: 983px) {
    .divDondeSeIngresanInvitados {
        width:40%;
        margin:auto;
    }
    
}

.temporizador {
    text-align:center;
    font-size:2.5rem;
}
/* BENEFICIOS */

.tituloBeneficios {
    text-align: center;
    margin: 3rem auto;
}
.tituloBeneficios h1 {
    font-size: 2.5rem;
}
.textoInicialBeneficios {
    text-align: justify;
    font-size: 1.8rem;
    width: 90%;
    margin:1rem auto 4rem auto;
}
.divGlobalBeneficios {
    width: 90%;
    margin: auto;
}
.beneficio {
    border:1px solid black;
    margin:5rem auto;
       -webkit-box-shadow: 10px 9px 23px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 9px 23px 0px rgba(0,0,0,0.75);
box-shadow: 10px 9px 23px 0px rgba(0,0,0,0.75);
border-radius: 1rem;
}
.tituloBeneficio {
    font-size: 2rem;
    background-color: black;
    color:white;
    padding:1rem;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}
.tituloBeneficio p {
    margin:0rem;
}
.descripcionBeneficio {
    padding: 1rem;
    font-size: 1.5rem;
    text-align: justify;
}
.conocerBeneficio {
    width: 90%;
    margin:auto;
    font-size:1.5rem;
}
.hacerEfectivoBeneficio {
    width: 90%;
    margin:auto;
    font-size:1.3rem;
}
.imagenBeneficio {
    text-align: center;
    margin:1rem auto;
}
.imagenBeneficio img {
    width: 80%;
    border-radius: 1rem;
}

@media (min-width: 983px) {
    .divGlobalBeneficios {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        column-gap: 5rem;
    }
}
.resultadoNombreBusquedaEvento {
    text-align:center;
    margin-top:4rem;
}
.resultadoNombreBusquedaEvento a {
    background-color:black;
    color:white;
    padding:1rem 3rem;
    text-decoration:none;
    margin-top:3rem;
    font-size:1.4rem;
}
.marginTopCinco {
    margin-top:10rem;
}
.fixed { 
    position: fixed;
    top:0rem;
    z-index: 2;
    background-color:white;
    width:100%;
    
}
.negro {
    background-color: rgb(44,81,82) !important;
}
.textoJuanfer {
    margin-top:6rem;
}
.importanteEventoJacky>a>img {
    width:35%;
    margin:auto;
}
@media (min-width: 983px) {
 .textoJuanfer {
    margin-top:15rem;
}
.importanteEventoJacky>a>img {
    width:15%;
    margin:auto;
}
}
.Agotado {
    color:red;
}
.ultimaUnidad {
    color:green;
}
.deseoPorDos {
        grid-column-start: 1; 
      grid-column-end: 3; 
    }
    .deseoPorDos img {
        width:80%;
    }
    .deseoPorDos input {
        width:80%;
        margin:auto;
    }
@media (min-width: 983px) {
    .deseoPorDos {
        grid-column-start: 2; 
      grid-column-end: 4; 
    }
    .deseoPorDos img {
        width:40%;
    }
    .deseoPorDos input {
        width:80%;
        margin:auto;
    }
}

.valorAnadirJhen {
        font-family: 'Didact Gothic', sans-serif;
}
.valorAnadirJhen textarea {
    width:100%;
    padding:1rem;
    font-size:1.6rem;
}
.valorAnadirJhen input {
    width:100%;
    padding:1rem;
    font-size:1.6rem;
    margin-top:2rem;
}
.textoJhenValor {
    font-family: 'Didact Gothic', sans-serif;
    width:80%;
    margin:1.5rem auto;
    font-size:1.6rem;
}
.finalizarEleccionDeseosJhen {
    margin:2rem auto;
      width:80%;
}
.finalizarEleccionDeseosJhen input {
      font-family: 'Didact Gothic', sans-serif;
      padding:1rem 2rem;
      background-color: #8C0505;
      color:white;
      border-radius:1rem;
      border:1px solid #750202;
}
.BotonideasJhen {
    text-align:center;
    font-size:1.4rem;
     font-family: 'Didact Gothic', sans-serif;
}
.ideasJhen {
    width:80%;
    margin:auto;
    font-size:1.2rem;
        font-family: 'Didact Gothic', sans-serif;
}
.divDeseosJhen {
    margin-top:0rem !important;
    margin-bottom:0rem !important;
}
.ideasJhen {
    display:none;
}
#rosadoLetrasBlanca {
    background-color: #f6b4bf;
    font-family: 'Bad Script', cursive;
    font-size:1.7rem;
}
#rosadoLetrasBlancaInformacion {
    background-color: #f6b4bf;
}