@import url('https://fonts.googleapis.com/css2?family=Fleur+De+Leah&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

* {
    padding: 0;
}

/* Index */

.body {
    font-family: Playfair Display;
}

div {
    font-family: Playfair Display;
}

.encabezado {
    display: flex;
    background-color: #fad4d9 !important;
    /* utilicé el !important solo para pisar el background de Bootstrap*/
    position: fixed;
    top: 0;
    width: 100%;
}

.navbar-nav {
    text-align: right;
}

.dym {
    width: 5vw;
    height: auto;
    text-align: left;
}

/* .paginas{
    text-align: right;
    width: 90%;
    display: flex;
    text-decoration: none;
    list-style-type: none;
    justify-content: flex-end;
    align-items: center;
} */

/* a{
    text-decoration: none;
    color: black;
    margin: 8px;
} */

.box-titulo-index {
    margin-top: 7vh;
    display: grid;
    grid-template-areas:
        "titulo-index titulo-index . . . . . info-index"
        "titulo-index titulo-index . . . . . info-index";
    justify-items: center;
}

.titulo-index {
    display: grid;
    grid-area: titulo-index;
    font-size: 6em;
    font-family: Fleur De Leah;
    font-weight: 300;
    margin: 5vw 3vh;
}

.info-index {
    grid-area: info-index;
    text-align: right;
    align-content: center;
}

.fecha-index {
    display: grid;
    grid-area: fecha-index;
}

.lugar-index {
    display: grid;
    grid-area: lugar-index;
}

.imagenes-index {
    background-color: #f8e9eb;
    border-radius: 5px;
    display: flex;
    place-items: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.pareja {
    margin: 10px;
    width: 300px;
}

.bienvenida {
    text-align: justify;
    margin: 50px;
}

.titulo-bienvenida {
    text-align: center;
    font-size: 4em;
    font-family: Fleur De Leah;
    font-weight: 300;
}

.txt-bienvenida {
    text-align: center;
    font-size: 1.2em;
    margin-left: 20%;
    margin-right: 20%;
}

h2 {
    font-family: Playfair Display;
    text-align: center;
    font-size: 2.5em;
}


h2:hover {
    font-size: 3em;
}

.txt-paginas {
    text-align: center;
    font-size: 1.5em;
    margin-left: 10%;
    margin-right: 10%;
}

@-webkit-keyframes hvr-bob {
    0% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }

    50% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }

    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

@keyframes hvr-bob {
    0% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }

    50% {
        -webkit-transform: translateY(-4px);
        transform: translateY(-4px);
    }

    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

@-webkit-keyframes hvr-bob-float {
    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

@keyframes hvr-bob-float {
    100% {
        -webkit-transform: translateY(-8px);
        transform: translateY(-8px);
    }
}

.hvr-bob {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.hvr-bob:hover,
.hvr-bob:focus,
.hvr-bob:active {
    font-size: 2em;
    font-family: Fleur De Leah;
    -webkit-animation-name: hvr-bob-float, hvr-bob;
    animation-name: hvr-bob-float, hvr-bob;
    -webkit-animation-duration: .3s, 1.5s;
    animation-duration: .3s, 1.5s;
    -webkit-animation-delay: 0s, .3s;
    animation-delay: 0s, .3s;
    -webkit-animation-timing-function: ease-out, ease-in-out;
    animation-timing-function: ease-out, ease-in-out;
    -webkit-animation-iteration-count: 1, infinite;
    animation-iteration-count: 1, infinite;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-direction: normal, alternate;
    animation-direction: normal, alternate;
}

footer {
    text-align: center;
    margin-top: 100px;
    font-size: 8px;
}

footer h2 {
    font-family: Fleur De Leah;
    font-weight: 200;
}

/* Fotos */

h3 {
    font-family: Playfair Display;
    text-align: center;
    font-size: 1.5em;
}

.box-foto {
    display: flex;
    place-items: center;
    justify-content: center;
    align-items: center;
    flex-flow: wrap;
}

.foto {
    margin: 10px;
    width: 30vw;
}

.carousel-inner {
    z-index: -1;
}

.carousel-item {
    text-align: center;
}

.carousel-item img {
    margin: 0 auto;
    display: block;
    max-width: 100%;
    height: auto;
}

/* Eventos */

.box-evento {
    display: flex;
    align-items: center;
    padding-left: 35%;
}

.nombre-evento {
    font-size: 20px;
    font-style: italic;
}

.evento {
    margin: 20px;
    font-size: 18px;
}

.hora-evento {
    display: flex;
    margin-block-end: 0px;
    margin-block-start: 0px;
}

.hora {
    width: 20px;
    margin-top: 5px;
}

.info-evento {
    margin: 10px;
}

/* Confirmación */

.confirmacion {
    text-align: center;
}

.titulo-confirmacion:hover {
    font-size: 3em;
}

.buscador {
    border: none;
    text-align: center;
}

.input-buscador {
    height: 2em;
    width: 16em;
}

.lupa {
    position: absolute;
    width: 24px;
}

/* Visita */

.msj-visita {
    text-align: center;
    font-size: 20px;
}

.msj {
    margin: 10px;
    font-size: 16px;
    font-family: Playfair Display;
    width: 40vw;
}

.msj-enviar {
    margin: 10px;
    font-size: 16px;
    font-family: Playfair Display;
    background-color: #f8e9eb;
    border-radius: 5%;
    border-color: #fad4d9;
}

.hvr-float-shadow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.hvr-float-shadow:before {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    content: '';
    top: 100%;
    left: 5%;
    height: 10px;
    width: 90%;
    opacity: 0;
    background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 80%);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform, opacity;
    transition-property: transform, opacity;
}

.hvr-float-shadow:hover,
.hvr-float-shadow:focus,
.hvr-float-shadow:active {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}

.hvr-float-shadow:hover:before,
.hvr-float-shadow:focus:before,
.hvr-float-shadow:active:before {
    opacity: 1;
    -webkit-transform: translateY(5px);
    transform: translateY(5px);
}

@media (min-width: 481px) and (max-width: 768px) {
    .encabezado {
        align-items: center;
    }

    .dym {
        width: 8vw;
    }

    .paginas {
        gap: 10px;
        justify-content: center;
        flex-flow: wrap;
    }

    .box-titulo-index {
        align-items: baseline;
        margin-top: 18vh;
    }

    .titulo-index {
        font-size: 3em;
        text-align: center;
        width: 100%;
        margin-left: 0;
        width: 100%;
        margin: 0;
    }

    .info-index {
        width: 100%;
        text-align: center;
        margin-right: 0;
    }

    .info-index p {
        font-size: 0.8em;
    }

    .imagenes-index {
        margin-top: 20px;
    }

    .pareja {
        width: 30%;
        margin: 1vw;
    }

    .bienvenida {
        margin: 30px 10px;
    }

    .titulo-bienvenida {
        font-size: 2em;
    }

    .txt-bienvenida {
        font-size: 1em;
        margin-left: 5%;
        margin-right: 5%;
    }

    h2 {
        font-size: 1.5em;
    }

    .txt-paginas {
        font-size: 1em;
    }

    h3 {
        font-size: 1em;
    }

    .foto {
        width: 40%;
    }

    .box-evento {
        padding-left: 10%;
    }

    .evento {
        font-size: 1em;
    }
}

@media (min-width: 200px) and (max-width: 480px) {
    .titulo-index {
        font-size: 2.5em;
        margin-top: 12vh;
    }

    .box-titulo-index {
        font-size: 1.5em;
        grid-template-areas:
            "titulo-index titulo-index"
            " . info-index";
    }

    .info-index {
        font-size: 0.5em;
    }

    footer {
        font-size: 10px;
        margin-top: 50px;
    }

    .titulo-bienvenida {
        font-size: 3em;
    }

    .txt-bienvenida {
        font-size: 0.9em;
        margin-left: 5%;
        margin-right: 5%;
    }

    .box-evento{
        justify-content: center;
    }

    .txt-paginas{
        font-size: 1em;
    }

    .foto{
        width: 40vw;
    }
}