/*
color base
#431C1F
#590916
#63755d
#d1b98d
#f5ebcf

*/
.template-color {
    background-color: #431C1F !important;
    background-color: #590916 !important;
    background-color: #63755d !important;
    background-color: #d1b98d !important;
    background-color: #f5ebcf !important;
}

@media (prefers-color-scheme: light) {

    /* Override dark mode styles */
    body {
        background-color: #ffffff;
        color: #000000;
    }
}

@font-face {
    font-family: 'Stadella';
    src: url(../fonts/Stadella.ttf);
}

@font-face {
    font-family: 'Nexa-Bold';
    src: url(../fonts/NexaBold.otf);
}

@font-face {
    font-family: 'Nexa-Book';
    src: url(../fonts/NexaBook.otf);
}

@font-face {
    font-family: 'Nexa-Regular';
    src: url(../fonts/NexaRegular.otf);
}

@font-face {
    font-family: 'Nexa-Slab-Heavy-Italic';
    src: url(../fonts/NexaSlabHeavyItalic.ttf);
}

@font-face {
    font-family: 'Nexa-Slab-Light-Italic';
    src: url(../fonts/NexaSlabLightItalic.ttf);
}

@font-face {
    font-family: 'Roboto-Slab-Light';
    src: url(../fonts/RobotoSlabLight.ttf);
}

@font-face {
    font-family: 'Roboto-Slab-Semi-Bold';
    src: url(../fonts/RobotoSlabSemiBold.ttf);
}

body {
    background-color: #FFFFFF;
    color: #000000;
}

section {
    background-color: #FFFFFF;
    color: #000000;
}

section p{
    color: #000000;
}

h1 {
    font-family: Roboto-Slab-Light;
    color: #590916;
}

h2 {
    font-family: Roboto-Slab-Semi-Bold;
    color: #590916;
}

h3 {
    font-family: Nexa-Regular;
    color: #590916;
}

p {
    font-family: Nexa-Book;
}

footer {
    width: 100%;
    background-color: #666666;
    color: white;
    text-align: center;
    padding: 25px 0px 25px 0px;
}

footer p {
    margin-bottom: 0px;
    font-weight: lighter;
}

footer a {
    margin-bottom: 0px;
    font-weight: 900;
    color: #FFFFFF;
    text-decoration: none;
}

footer a:hover {
    color: #aaaaaa;
}

footer a:focus {
    color: #590916;
}

.fw-light {
    font-family: Nexa-Bold;
}

.btn-default {
    background-color: #d1b98d !important;
    border-color: #d1b98d;
}

.btn-default:hover {
    background-color: #f5ebcf !important;
    border-color: #f5ebcf;
}

.btn-outline {
    background-color: #FFFFFF !important;
    border-color: #FFFFFF;
    color: #590916;
}

.btn-outline:hover {
    background-color: #431C1F !important;
    border-color: #431C1F;
}

#grad {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80vw;
    height: 50vw;
    background-size: cover;
    color: white;
    border-radius: 10px;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)), url(../images/gallery/02GALLERY.jpg);
}

.content-general {
    margin: 0px;
    padding: 0px;
    position: relative;
    background-color: #ffffff;
    color: #000000;
}

.img-flower {
    /* Styles for animation */
    opacity: 0;
    transform: translateY(6em);
    transition: transform 6s .50s cubic-bezier(0, 1, .3, 1),
        opacity .5s .50s ease-out;
    will-change: transform, opacity;
}

#icon-envelope {
    width: 50px !important;
    height: 50px !important;
}

.img-flower.is-visible {
    opacity: 1;
    transform: translateY(-2deg);
}

#img-flower-left {
    width: 125px;
    position: absolute;
    left: -25px;
    top: -100px;
}

#img-flower-right {
    width: 125px;
    position: absolute;
    right: 0px;
    bottom: 0px;
}

#section-line {
    width: 100%;
    height: auto;
}

.section-icon {
    width: 75px;
    height: 75px;
    align-self: center;
    justify-self: center;
    /* Set the initial state of the image */
    opacity: 0;
    transition: transform 4s .25s cubic-bezier(0, 1, .3, 1),
        opacity .3s .25s ease-out;
    will-change: transform, opacity;
    /* Set color to svg*/
    filter: brightness(0) saturate(100%) invert(7%) sepia(73%) saturate(3548%) hue-rotate(337deg) brightness(100%) contrast(101%);
}

.section-icon.is-visible {
    opacity: 1;
    transform: translateZ(-2deg);
}

#section-icon {
    width: 75px;
    height: 75px;
    align-self: center;
    justify-self: center;
    /* Set the initial state of the image */
    transform: scale(0);
    opacity: 0;
    transition: transform 1s ease-out, opacity 1s ease-out;
}

#section-icon.active {
    /* Set the final state of the image */
    transform: scale(1);
    opacity: 1;
}

#section-container {
    background-color: #ffffffdd !important;
    margin: 0vw 50vw 0vw 10vw !important;
    padding: 20px;
    width: 80vw;
    max-width: 360px;
    border-radius: 5px;
}

#section-container h2, h3 {
    color: #431C1F;
}

.section-parallax-banner-title {
    font-family: Stadella;
    font-size: 120px;
    margin: 130px 0px 0px 0px;
    color: #FFFFFF;
}

.section-parallax-banner-sub-title {
    font-family: Roboto-Slab-Semi-Bold;
    font-size: 30px !important;
    color: #431C1F;
}

.section-parallax-banner-one {
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    /* Full height */
    height: 100vh;
    /* The image used */
    background-image: url('../images/banner/WB00.jpg');
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.section-parallax-banner-two {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    /* Full height */
    height: 70vh;
    /* The image used */
    background-image: url('../images/banner/WB01.jpg');
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.section-parallax-banner-outfit {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    /* Full height */
    height: 70vh;
    /* The image used */
    background-image: url('../images/banner/WB02.jpg');
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.section-parallax-banner-three {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    /* Full height */
    height: 70vh;
    /* The image used */
    background-image: url('../images/banner/WB03.jpg');
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.section-timer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #590916;
    overflow: hidden;
}

.section-timer svg {
    display: block;
    shape-rendering: geometricPrecision;
}

.section-timer p {
    font-family: Roboto-Slab-Semi-Bold;
    font-size: 32px;
    color: #431C1F;
    margin-top: 20px;
}

.section-timer table {
    border-collapse: collapse;
    border-style: hidden;
}

.section-timer td,
th {
    border-right: solid 1px #431C1F;
    border-left: solid 1px #431C1F;
    text-align: center;
    width: 50px;
}

.section-timer th {
    font-family: Nexa-Regular;
    font-size: 22px;
    color: #431C1F;
}

.section-timer td {
    font-family: Nexa-Book;
    font-size: 12px;
    color: #d1b98d;
}

#timer-circle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 0;
}

#timer-circle-flower {
    width: 512px;
    height: 512px;
    object-fit: contain;
}

#timer-circle-white {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    margin-top: 70px;
    width: 256px;
    height: 256px;
    z-index: 2;
}

#timer-circle-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90px;
    height: 90px;
}

#timer-circle-heart {
    width: 40px;
    height: 40px;
    /* Set color to svg*/
    filter: brightness(0) saturate(100%) invert(7%) sepia(73%) saturate(3548%) hue-rotate(337deg) brightness(100%) contrast(101%);
}

.animated-svg-heart {
    /* Set the initial state of the image */
    transform: scale(0);
    opacity: 0;
    animation: scale-in-out 1s ease-out infinite alternate;
}

@keyframes scale-in-out {
    from {
        transform: scale(0);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

#section-gallery-img {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    background-size: contain;
    object-fit: cover;
}

.col-gallery {
    padding: 10px;
}

.col-gallery:hover {
    padding: 0px;
}

.section-gratitude {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 25px 0px 25px 0px;
    color: #590916;
    background: #e9e9e9;
}

.section-gratitude h2, h3 {
    color: #431C1F;
}

.section-about .icon {
    width: 25px;
    height: 25px;
    margin: 0px 10px 0px 0px;
}

.section-about a {
    width: 25px;
    height: 25px;
    margin: 0px 0px 0px 0px;
    color: #666666;
    text-decoration: none
}

.section-about a:hover {
    color: #677445;
}

.section-about a:focus {
    color: #677445;
}

.modal h2 {
    color: #590916;
}

.modal a {
    width: 25px;
    height: 25px;
    margin: 0px 0px 0px 0px;
    color: #666666;
    text-decoration: none
}
.modal .img-qr {
    width: 200px;
    height: 200px;
    margin-bottom: 12px;
}

.modal a:hover {
    color: #677445;
}

.modal a:focus {
    color: #677445;
}

/**************************************************
* SECTION SETTING STYLES FOR OTHER DEVICES
**************************************************/

/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if needed */

@media only screen and (max-device-width: 1366px) {
    .section-parallax-banner-one {
        background-attachment: scroll;
    }
}


/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if needed */

@media only screen and (max-device-width: 576px) {
    #timer-circle-flower {
        width: 100vw;
        height: 100vw;
    }

    #img-flower-left {
        width: 80px;
        height: auto;
    }

    #img-flower-right {
        width: 80px;
        height: auto;
    }

    .col-gallery:hover {
        padding: 10px;
    }

    #section-container {
        margin: 0vw 10vw 0vw 10vw !important;
    }
    
    #icon-envelope {
        width: 25px !important;
        height: 25px !important;
    }

    .section-icon {
        width: 35px;
        height: 35px;
    }

    .section-parallax-banner-title {
        font-size: 90px;
    }

    .section-parallax-banner-one {
        background-position: center;
        background-image: url('../images/banner/MB00.jpg');
    }
    
    .section-parallax-banner-two {
        background-position: center;
        background-image: url('../images/banner/WB01.jpg');
        background-attachment: scroll; /* Evita el problema en iOS */
        background-size: cover; /* O prueba con contain si sigue con zoom */
        height: 20vh;
    }
    
    .section-parallax-banner-outfit {
        background-position: center;
        background-image: url('../images/banner/MB02.jpg');
        background-attachment: scroll; /* Evita el problema en iOS */
        background-size: cover; /* O prueba con contain si sigue con zoom */
    }
    .section-parallax-banner-three {
        background-position: center;
        background-image: url('../images/banner/MB03.jpg');
        background-attachment: scroll; /* Evita el problema en iOS */
        background-size: cover; /* O prueba con contain si sigue con zoom */
        height: 20vh;
    }
    .modal .img-qr {
        width: 150px;
        height: 150px;
        margin-bottom: 12px;
    }
}