/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{
    -webkit-text-size-adjust:100%;
    line-height:1.15}

body{
    margin:0}

main{
    display:block}

h1{
    font-size:2em;
    margin:.67em 0}

hr{
    box-sizing:content-box;
    height:0;
    overflow:visible}

pre{
    font-family:monospace,monospace;
    font-size:1em}

a{
    background-color:transparent}

abbr[title]{
    border-bottom:none;
    text-decoration:underline;
    -webkit-text-decoration:underline dotted;
    text-decoration:underline dotted}

b,strong{
    font-weight:bolder}

code,kbd,samp{
    font-family:monospace,monospace;
    font-size:1em}

small{
    font-size:80%}

sub,sup{
    font-size:75%;
    line-height:0;
    position:relative;
    vertical-align:baseline}

sub{
    bottom:-.25em}

sup{
    top:-.5em}

img{
    border-style:none}

button,input,optgroup,select,textarea{
    font-family:inherit;
    font-size:100%;
    line-height:1.15;
    margin:0}

button,input{
    overflow:visible}

button,select{
    text-transform:none}

[type=button],[type=reset],[type=submit],button{
    -webkit-appearance:button}

[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{
    border-style:none;
    padding:0}

[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{
    outline:1px dotted ButtonText}

fieldset{
    padding:.35em .75em .625em}

legend{
    box-sizing:border-box;
    color:inherit;
    display:table;
    max-width:100%;
    padding:0;
    white-space:normal}

progress{
    vertical-align:baseline}

textarea{
    overflow:auto}

[type=checkbox],[type=radio]{
    box-sizing:border-box;
    padding:0}

[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{
    height:auto}

[type=search]{
    -webkit-appearance:textfield;
    outline-offset:-2px}

[type=search]::-webkit-search-decoration{
    -webkit-appearance:none}

::-webkit-file-upload-button{
    -webkit-appearance:button;
    font:inherit}

details{
    display:block}

summary{
    display:list-item}

[hidden],template{
    display:none}

body{
    font-size:1.6rem;
    width:100%}

p{
    font-family:Lexend,sans-serif;
    font-size:2rem;
    line-height:1.5}

.contenedor{
    margin:0 auto;
    max-width:120rem;
    width:95%}

a{
    text-decoration:none}

h1,h2,h3{
    margin:0}

h1,h2{
    font-size:50px}

h2{
    font-family:MonteCarlo,cursive}

h3{
    font-size:31px}

img{
    display:block;
    height:auto;
    max-width:100%;
    width:100%}

.contenido{
    position:relative}

.reproductor{
    bottom:0;
    display:flex;
    justify-content:flex-end;
    position:fixed;
    right:0;
    width:64%;
    z-index:2}

.smooth-scroll-wrapper{
    left:0;
    position:fixed;
    top:0;
    z-index:2}

.alerta{
    font-family:Lexend,sans-serif}

.portada{
    height:100vh}

.portada .couple{
    display:block;
    height:100vh;
    -o-object-fit:cover;
    object-fit:cover;
    -o-object-position:50%;
    object-position:50%;
    position:absolute}

@media (min-width:768px){
    .portada .couple{
    -o-object-position:center;
    object-position:center}

}

.portada .portada__text{
    align-items:center;
    background-color:rgba(0,0,0,.2);
    display:flex;
    flex-direction:column;
    font-size:50px;
    height:100%;
    justify-content:space-between;
    position:relative}

@media (min-width:992px){
    .portada .portada__text{
    height:100%;
    justify-content:center;
    padding-bottom:50px}

}

.portada .portada__text h1{
    color:#fff;
    font-family:MonteCarlo,cursive}

@media (min-width:768px){
    .portada .portada__text h1{
    margin-top:5%}

}

.portada .portada__text h3{
    color:#fff;
    margin-bottom:30px}

.portada .portada__text h2,.portada .portada__text h3{
    font-family:Joan,serif;
    margin-bottom:20px;
    text-align:center}

    .portada .countdown{
        color:#fff;
        -moz-column-gap:10px!important;
        column-gap:10px!important;
        display:flex;
        justify-content:center}
    

.portada .simply-section{
    border-radius:80px;
    height:80px;
    width:60px}

.portada .simply-section>div{
    align-items:center;
    display:flex;
    flex-direction:column;
    height:100%;
    justify-content:center!important}

.portada .simply-section .simply-amount{
    font-size:30px}

.portada .simply-section .simply-word{
    font-size:15px}

.mensaje-padres .container-legend{
    align-items:center;
    background-color:#fff;
    display:flex;
    height:100%}

.mensaje-padres .legend{
    margin:0 auto;
    width:90%}

@media (min-width:768px){
    .mensaje-padres .legend{
    width:70%}

}

.mensaje-padres h3{
    color:#000;
    font-family:Gentium Plus,serif;
    font-size:25px;
    letter-spacing:1px;
    line-height:1;
    padding:30px 0;
    text-align:center}

@media (min-width:768px){
    .mensaje-padres h3{
    font-size:28px}

}

.container-padres{
    display:flex;
    flex-direction:column;
    justify-content:center}

.container-padres .padres{
    border:2px solid #000;
    border-radius:10px;
    margin:0 auto;
    width:95%;
    word-spacing:.1em}

@media (min-width:992px){
    .container-padres .padres{
    width:80%}

}

.container-padres .padres h1{
    font-family:Playfair Display SC,serif;
    font-size:20px;
    letter-spacing:3.2px;
    text-align:center;
    word-spacing:.1em}

@media (min-width:768px){
    .container-padres .padres h1{
    font-size:32px}

}

.container-padres .padres .imagen-padres{
    display:flex;
    justify-content:space-around;
    margin-top:40px}

.container-padres .padres .imagen-padres svg{
    width:70pt}

.container-padres .padres .imagen-padres svg:last-child{
    width:60pt}

@media (min-width:768px){
    .container-padres .padres .imagen-padres svg{
    width:100pt}

.container-padres .padres .imagen-padres svg:last-child{
    width:85pt}

}

.container-padres .padres .name-padres{
    display:flex;
    justify-content:space-around}

.container-padres .padres .name-padres .madre,.container-padres .padres .name-padres .padre{
    flex-basis:45%}

.container-padres .padres .name-padres p{
    color:#000;
    font-family:Lexend,sans-serif;
    font-size:17px;
    font-weight:700;
    margin:10px 0;
    text-align:center}

@media (min-width:768px){
    .container-padres .padres .name-padres p{
    font-size:25px}

}

.fuente-diferente{
    font-family:MonteCarlo,cursive!important;
    font-size:25px}

.portada2 img{
    height:80vh;
    -o-object-fit:cover;
    object-fit:cover;
    -o-object-position:14%;
    object-position:14%}

.portada2 .portada2__p{
    align-items:center;
    background-color:#c2c2c2;
    display:flex;
    height:100%}

.portada2 .portada2__p p{
    color:#000;
    font-family:Gentium Plus,serif;
    font-size:25px;
    margin:0 auto;
    padding:30px 0;
    text-align:center;
    width:95%}

@media (min-width:768px){
    .portada2 .portada2__p p{
    font-size:25px;
    width:70%}

}

.ubicacion-eventos .ubicacion-eventos__container{
    align-items:center;
    display:flex;
    justify-content:center;
    margin:0 auto;
    width:95%}

@media (min-width:992px){
    .ubicacion-eventos .ubicacion-eventos__container{
    font-size:20px;
    width:85%}

}

.ubicacion-eventos .ubicacion-eventos__container .ubicacion{
    display:grid;
    gap:20px;
    grid-template-columns:repeat(1,1fr);
    margin:30px 0}

@media (min-width:992px){
    .ubicacion-eventos .ubicacion-eventos__container .ubicacion{
    display:grid;
    gap:20px;
    grid-template-columns:repeat(2,1fr)}

}

.ubicacion-eventos .ubicacion-eventos__container .ubicacion img{
    height:500px;
    -o-object-fit:cover;
    object-fit:cover;
    width:100%}

@media (min-width:992px){
    .ubicacion-eventos .ubicacion-eventos__container .ubicacion img{
    height:400px}

}

@media (max-width:380px){
    .ubicacion-eventos .ubicacion-eventos__container .ubicacion img{
    height:350px}

}

.ubicacion-eventos .ubicacion-eventos__container .discurso-container,.ubicacion-eventos .ubicacion-eventos__container .recepcion-container{
    display:flex;
    flex-direction:column;
    justify-content:center}

@media (min-width:992px){
    .ubicacion-eventos .ubicacion-eventos__container .discurso-container,.ubicacion-eventos .ubicacion-eventos__container .recepcion-container{
    height:auto}

}

.discurso-descripcion,.recepcion-descripcion{
    align-items:center;
    background-color:#fff;
    display:flex;
    flex-direction:column}

.discurso-descripcion h2,.discurso-descripcion h3,.discurso-descripcion p,.recepcion-descripcion h2,.recepcion-descripcion h3,.recepcion-descripcion p{
    margin:0;
    padding:5px 0;
    text-align:center}

.discurso-descripcion h2,.recepcion-descripcion h2{
    color:#000!important;
    font-family:Playfair Display SC,serif;
    font-size:30px;
    letter-spacing:3.2px;
    padding:15px 0;
    word-spacing:.1em}

@media (min-width:768px){
    .discurso-descripcion h2,.recepcion-descripcion h2{
    font-size:30px}

}

.discurso-descripcion h3,.recepcion-descripcion h3{
    color:#000;
    font-family:Lexend,sans-serif;
    font-size:17px;
    font-weight:700}

@media (min-width:768px){
    .discurso-descripcion h3,.recepcion-descripcion h3{
    font-size:17px}

}

.discurso-descripcion p,.recepcion-descripcion p{
    color:#000;
    font-size:17px;
    font-weight:700}

@media (min-width:768px){
    .discurso-descripcion p,.recepcion-descripcion p{
    font-size:17px}

}

.discurso-descripcion button,.recepcion-descripcion button{
    background-color:#000;
    color:#fff;
    font-size:15px;
    margin:10px 0 20px}

.ubicacion-hoteles{
    margin-top:120px}

.ubicacion-hoteles h2{
    font-family:MonteCarlo,cursive;
    margin-bottom:30px;
    text-align:center}

.ubicacion-hoteles .ubicacion-hoteles__container{
    align-items:center;
    display:flex;
    justify-content:center;
    margin:0 auto;
    width:95%}

@media (min-width:992px){
    .ubicacion-hoteles .ubicacion-hoteles__container{
    font-size:25px;
    width:85%}

}

.ubicacion-hoteles .ubicacion-hoteles__container .ubicaciondeHoteles{
    display:grid;
    gap:20px;
    grid-template-columns:repeat(1,1fr);
    margin:30px 0}

@media (min-width:992px){
    .ubicacion-hoteles .ubicacion-hoteles__container .ubicaciondeHoteles{
    display:grid;
    gap:20px;
    grid-template-columns:repeat(3,1fr)}

}

.ubicacion-hoteles .ubicacion-hoteles__container .ubicaciondeHoteles img{
    height:500px;
    -o-object-fit:cover;
    object-fit:cover;
    width:100%}

@media (min-width:992px){
    .ubicacion-hoteles .ubicacion-hoteles__container .ubicaciondeHoteles img{
    height:400px}

}

@media (max-width:380px){
    .ubicacion-hoteles .ubicacion-hoteles__container .ubicaciondeHoteles img{
    height:350px}

}

.ubicacion-hoteles .ubicacion-hoteles__container .hotel-container{
    display:flex;
    flex-direction:column;
    justify-content:center}

@media (min-width:992px){
    .ubicacion-hoteles .ubicacion-hoteles__container .hotel-container{
    height:auto}

}

.hotel-descripcion{
    align-items:center;
    background-color:#c2c2c2;
    display:flex;
    flex-direction:column}

.hotel-descripcion h2,.hotel-descripcion h3,.hotel-descripcion p{
    margin:0;
    padding:5px 0;
    text-align:center}

.hotel-descripcion h2{
    color:#fff;
    font-family:Playfair Display SC,serif;
    font-size:25px;
    letter-spacing:3.2px;
    padding:15px 0;
    word-spacing:.1em}

@media (min-width:768px){
    .hotel-descripcion h2{
    font-size:28px}

}

.hotel-descripcion h3{
    color:#000;
    font-family:Lexend,sans-serif;
    font-size:15px;
    font-weight:700}

@media (min-width:768px){
    .hotel-descripcion h3{
    font-size:20px}

}

.hotel-descripcion p{
    color:#000;
    font-size:15px}

@media (min-width:768px){
    .hotel-descripcion p{
    font-size:20px}

}

.hotel-descripcion button{
    background-color:#fff;
    margin:10px 0 20px}

.codigo-vestimenta{
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    margin:70px 0}

.codigo-vestimenta .codigo-vestimenta__titulo{
    margin-bottom:50px}

.codigo-vestimenta h2{
    color:#000;
    font-family:MonteCarlo,cursive;
    font-size:50px;
    text-align:center}

.codigo-vestimenta h2:last-of-type{
    color:#000;
    padding:10px 0}

@media (min-width:768px){
    .codigo-vestimenta .vestimenta{
    margin:0 auto;
    width:90%}

}

.codigo-vestimenta .vestimenta .vestimenta__imagenes{
    display:grid;
    gap:10px;
    grid-template-columns:repeat(2,1fr)}

@media (min-width:992px){
    .codigo-vestimenta .vestimenta .vestimenta__imagenes{
    display:grid;
    gap:10px;
    grid-template-columns:repeat(4,1fr)}

}

.codigo-vestimenta .vestimenta .vestimenta__imagenes img{
    width:400px}

@media (min-width:992px){
    .codigo-vestimenta .vestimenta .vestimenta__imagenes img{
    width:90%}

}

.vestimenta__hombres,.vestimenta__mujeres{
    display:none}

@media (min-width:992px){
    .vestimenta__hombres,.vestimenta__mujeres{
    border:25px solid;
    display:flex;
    justify-content:center}

}

.vestimenta__hombres__texto,.vestimenta__mujeres__texto{
    display:flex;
    font-family:Playfair Display SC,serif;
    font-size:35px;
    justify-content:center;
    text-orientation:upright;
    writing-mode:vertical-rl}

.vestimenta__hombres{
    border-color:#5e2129}

.vestimenta__mujeres{
    border-color:#c2c2c2}

.vestimenta__imagen__hombre h3,.vestimenta__imagen__mujer h3{
    color:#5e2129;
    font-family:Playfair Display SC,serif;
    letter-spacing:3px;
    margin-top:15px}

@media (min-width:992px){
    .vestimenta__imagen__hombre h3,.vestimenta__imagen__mujer h3{
    display:none}

}

.vestimenta__imagen__hombre h3,.vestimenta__imagen__hombre p,.vestimenta__imagen__mujer h3,.vestimenta__imagen__mujer p{
    font-size:27px;
    font-weight:700;
    text-align:center}

.fecha_vestimenta h3{
    color:#5e2129;
    font-family:MonteCarlo,cursive;
    font-size:35px!important;
    text-align:center}

.confirmacion .image-form form .form-text-container{
    align-items:center;
    background-color:rgba(0,0,0,.467);
    display:flex;
    height:700px;
    justify-content:center;
    position:absolute;
    width:100%;
    z-index:1}

.confirmacion .image-form form .form-text-container h3{
    color:#fff;
    font-family:Lexend,sans-serif;
    font-weight:700}

.confirmacion .image-form form .form-text-container .form-text{
    border:5px solid #fff;
    margin:0 auto;
    text-align:center;
    width:90%}

@media (min-width:768px){
    .confirmacion .image-form form .form-text-container .form-text{
    width:500px}

}

.confirmacion .image-form form .form-text-container .form-text p{
    color:#fff;
    font-size:25px}

.confirmacion .image-form form .form-text-container .form-text h2{
    color:#fff;
    font-family:Playfair Display SC,serif;
    font-size:32px;
    letter-spacing:3.2px;
    padding:15px 0;
    word-spacing:.1em}

.confirmacion .image-form form .form-text-container .form-text h4{
    color:#fff}

.confirmacion .image-form form .fondo-confirmacion{
    height:700px;
    -o-object-fit:cover;
    object-fit:cover;
    -o-object-position:52%;
    object-position:52%;
    position:relative}

.contenido-form{
    margin:0 auto;
    width:95%}

@media (min-width:480px){
    .contenido-form{
    width:80%}

}

.checkbox,.confirma p{
    padding:10px}

.checkbox{
    margin-bottom:20px}

.checkbox p{
    margin:0}

.checkbox label,.checkbox p{
    font-weight:700;
    text-align:start}

.checkbox label{
    color:#fff;
    font-family:Lexend,sans-serif;
    font-size:15px}

.checkbox .checkmark{
    width:100px}

.checkbox input:checked{
    background-color:#000;
    border-color:#000}

.select{
    margin-bottom:20px;
    padding:10px}

.select p{
    font-weight:700;
    margin:0;
    padding-bottom:10px;
    text-align:start}

.select option,.select select{
    color:#000}

.comentario{
    padding:10px}

.comentario p{
    font-weight:700;
    margin:0;
    padding-bottom:10px;
    text-align:start}

.comentario textarea{
    border-radius:10px;
    font-family:Lexend,sans-serif;
    font-size:15px;
    font-weight:700;
    padding:10px;
    width:100%}

.comentario button{
    background-color:#fff;
    border-color:#fff;
    color:#000}

.contenedor-qr{
    padding-bottom:15px;
    width:70%}

.qr{
    height:100%!important;
    width:100%}

.mesa-regalos{
    background-color:#c2c2c2;
    color:#000;
    margin:50px auto;
    width:95%}

.mesa-regalos h3{
    font-family:Lexend,sans-serif}

.mesa-regalos p{
    color:#000;
    font-weight:700}

.mesa-regalos .mesa-regalos__container{
    margin:0 auto;
    padding:80px 20px}

.mesa-regalos .mesa-regalos__container .gift-svg{
    display:flex;
    justify-content:center}

.mesa-regalos .mesa-regalos__container .gift-text{
    margin:10px 0;
    text-align:center}

.mesa-regalos .mesa-regalos__container .gift-text h2{
    font-family:MonteCarlo,cursive;
    font-size:50px}

.gifts{
    display:grid;
    gap:20px;
    grid-template-columns:repeat(1,1fr);
    margin-top:50px}

@media (min-width:768px){
    .gifts{
    display:grid;
    gap:20px;
    grid-template-columns:repeat(2,1fr)}

}

.gifts .banco-texto h3,.gifts .sobre-texto h3{
    font-size:20px;
    font-weight:700;
    margin:10px 0}

.banco,.sobre{
    background-color:#b8b8b8!important;
    padding:20px 0}

.banco-hover,.sobre-hover{
    background-color:#b3b3b3!important;
    display:flex;
    flex-direction:column;
    justify-content:center}

.banco-hover h3,.sobre-hover h3{
    font-size:30px}

.banco-hover h3{
    font-weight:700;
    margin-bottom:10px}

.banco-hover p{
    font-size:25px;
    margin:0}

.leyenda-regalo{
    font-size:15px;
    margin-top:50px}

.sobre-svg{
    align-items:center;
    display:flex;
    justify-content:center}

.liverpool{
    width:250px}

figure{
    height:100%;
    width:100%}

.regalo{
    height:190px;
    width:100%}

.galeria h2{
    color:#000;
    font-family:MonteCarlo,cursive;
    font-size:50px;
    margin:0 0 20px;
    text-align:center}

.galeria .carousel-container{
    margin:0 auto;
    width:100%}

@media (min-width:992px){
    .galeria .carousel-container{
    width:70%}

}

.galeria .carousel-item img{
    -o-object-fit:cover;
    object-fit:cover;
    -o-object-position:center;
    object-position:center}

@media (min-width:992px){
    .galeria .carousel-item img{
    height:90vh}

}

.intinerario{
    padding:50px 0}

.intinerario h2{
    margin-bottom:20px;
    text-align:center}

.intinerario .intinerario-container{
    align-items:center;
    display:flex;
    justify-content:center;
    position:relative;
    z-index:1}

.intinerario .intinerario-container .intinerario-grid{
    display:grid;
    gap:30px;
    grid-template-columns:repeat(2,1fr)}

.intinerario .intinerario-container .intinerario-texto{
    align-items:center;
    display:flex;
    flex-direction:column;
    justify-content:center}

@media (min-width:992px){
    .intinerario .intinerario-container .intinerario-texto:first-child{
    width:300px}

}

.intinerario .intinerario-container .intinerario-texto:nth-child(3),.intinerario .intinerario-container .intinerario-texto:nth-child(7){
    grid-column-end:3;
    grid-column-start:2}

.intinerario .intinerario-container .intinerario-texto h2,.intinerario .intinerario-container .intinerario-texto h3{
    font-size:15px}

@media (min-width:480px){
    .intinerario .intinerario-container .intinerario-texto h2,.intinerario .intinerario-container .intinerario-texto h3{
    font-size:20px}

}

.intinerario .intinerario-container .intinerario-texto h2{
    color:#fff;
    font-family:Playfair Display SC,serif;
    margin-bottom:10px}

.intinerario .intinerario-container .intinerario-texto h3{
    color:#fff;
    margin:0}

.intinerario .intinerario-container .intinerario-texto p{
    font-size:16px;
    font-weight:700}

.intinerario .intinerario-container .intinerario-iconos{
    align-items:center;
    display:flex;
    flex-direction:column;
    justify-content:center;
    margin:0}

.intinerario .intinerario-container .intinerario-iconos svg{
    color:#fff}

.intinerario .intinerario-container .intinerario-iconos:nth-child(4),.intinerario .intinerario-container .intinerario-iconos:nth-child(8){
    gap:30px;
    grid-column-end:2;
    grid-column-start:1}

.intinerario .intinerario-container .intinerario-iconos:nth-child(4){
    grid-row-end:3;
    grid-row-start:2}

.intinerario .intinerario-container .intinerario-iconos:nth-child(8){
    grid-row-end:5;
    grid-row-start:4}

.linea-container{
    align-items:center;
    display:flex;
    height:100%;
    justify-content:center;
    position:absolute;
    top:0;
    width:100%}

.linea-container .linea{
    background-color:gray;
    height:100%;
    width:2px}

.fecha-itinerario{
    font-family:MonteCarlo,cursive!important;
    font-size:35px!important}

.playlist{
    margin:0 auto;
    padding-bottom:50px;
    width:95%}

.playlist h2{
    margin-bottom:20px;
    text-align:center}

@media (min-width:768px){
    .playlist{
    padding:50px 0;
    width:70%}

}

.hashtag{
    background-image:url(../img/12.webp);
    background-position:50%;
    background-repeat:no-repeat;
    background-size:cover;
    border:5px solid #fff;
    color:#000;
    font-weight:700;
    margin-bottom:20px;
    padding:70px 0;
    text-align:center}

.hashtag p{
    font-size:20px}

.hashtag h3{
    color:#000;
    font-family:Playfair Display SC,serif;
    letter-spacing:3.2px;
    word-spacing:.1em}

.hashtag a{
    color:#000;
    text-decoration:none}

.agradecimiento{
    background-color:#fff;
    color:#000;
    margin-bottom:20px;
    padding:70px 0;
    text-align:center;
    width:100%}

.agradecimiento h3{
    color:#000;
    font-family:Playfair Display SC,serif;
    font-size:25px;
    letter-spacing:1.2px;
    word-spacing:.1em}

.agradecimiento img{
    margin-top:20px;
    width:170px}

.agradecimiento img:hover{
    cursor:pointer}

.agradecimiento div{
    align-items:center;
    display:flex;
    flex-direction:column}


    .footer{
        background-color:#fff;
        color:#000;
        margin-bottom:20px;
        
        text-align:center;
        width:100%}
    footer{
        background-color:#000}
    
    footer p{
        font-size:10px;
        margin-bottom:0;
        margin-top:30px;
        text-align:left}
    
    footer p a{
        color:#fff}
    
    .bienvenida-color{
        background-color:rgba(0,0,0,.527)}
    
    .bienvenida{
        align-items:center;
        display:flex;
        height:100%;
        justify-content:center;
        position:absolute;
        width:100%;
        z-index:1}
    
    .bienvenida .contenido-bienvenida{
        background-color:#fff;
        border-radius:10px;
        padding:15px;
        width:90%}
    
    .bloqueaScroll{
        overflow:hidden}
    
    
    /*# sourceMappingURL=app.css.map */
    
    .cuadro-footer {
        background-color: rgba(0,0,0,0.40);
      padding: 20px;
      margin: 20px 0;
      overflow:hidden;
      }
    
      
    /*----------------------------------
      Popup
    ------------------------------------*/
    #popup1 {
        position: fixed;
        visibility: hidden;
        opacity: 0;
     }
     #popup1:target {
         visibility: visible;
         opacity: 1;
         background-color: #AA0E3D;
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         margin: 0;
         z-index: 99999999999;
         transition: all 1s;
     }
     #popup2 {
        position: fixed;
        visibility: hidden;
        opacity: 0;
     }
     #popup2:target {
         visibility: visible;
         opacity: 1;
         background-color: #FAFAFA;
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         margin: 0;
         z-index: 99999999999;
         transition: all 1s;
     }
     
     
     .popup {
        position: relative;
        margin: auto;
        width: 100%;
        z-index: 99999;
        height: 100vh;
        overflow:hidden;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
        
        
     }
     .popup-2 {
        position: relative;
        margin: auto;
        width: 100%;
        z-index: 99999;
        height: 100vh;
        overflow:hidden;
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
        
        
        
     }
     
     .popup-cerrar {
        position: absolute;
        top:20px;
        right: 20px;
        z-index: 999999;
     }
     .popup-icon {
     margin: 20px 0;
     }