@import "_custom.css"; 
@import "_general.css"; 

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&display=swap');

:root {
    --c-primary: #bec4c0;
    --c-secondary: #212121;
    --c-tertiary: #769B85;
    --c-quaternary: #FFFFFF;
    /* fuentes */
    --f-primary: 'Oswald', sans-serif;
    --f-secondary:'Montserrat', sans-serif;
    /* filter */
    --f-icons: brightness(0)  invert(0%) sepia(0%) saturate(7488%) hue-rotate(339deg) brightness(91%) contrast(103%);
    /* formas */
    --bg-first: url(../../img/templates_v2/cool/textura2.jpg);
    --bg-second: url(../../img/templates_v2/cool/textura1.jpg);
    /* general */
    --c-gray: #272727;
}

body {
    font-family: var(--f-secondary);
    overflow-x: hidden !important;
    touch-action: pan-y;
}

.form-control{
    font-family: var(--f-secondary);
    font-size: 0.8rem;
    border-radius: 0 !important;
}

.btn{
    background-color: var(--c-primary);
    text-transform: uppercase;
}

.btn:hover{
    background-color: #212121!important;
    color: white;
    transition: all 0.3s;
}

.title{
    font-family: var(--f-primary);
}

.arrowCta {
    display: block;
    height: 13px;
    width: 13px;
    border: 11px solid transparent;
    transform: rotate(45deg);
    position: relative;
    margin: 3rem auto 0;
}

.arrowCta:after, .arrowCta:before {
    content: "";
    display: block;
    height: inherit;
    width: inherit;
    position: absolute;
    top: 0;
    left: 0;
}

.arrowCta:after {
    border-bottom: 3px solid var(--gold);
    border-right: 3px solid var(--gold);
    top: 0;
    left: 0;
    opacity: 1;
    animation: bottom-arrow 1.65s infinite;
}

.arrowCta:before {
    top: 0;
    left: 0;
    border-bottom: 3px solid var(--gold);
    border-right: 3px solid var(--gold);
    animation: top-arrow 1.65s infinite;
}

@keyframes bottom-arrow {
    0% {
        opacity: 1;
        transform: translate(0, 0);
    }

    45% {
        opacity: 0;
        transform: translate(12px, 12px);
    }

    46% {
        opacity: 0;
        transform: translate(-16px, -16px);
    }

    90% {
        opacity: 1;
        transform: translate(-6px, -6px);
    }

    100% {
        opacity: 1;
        transform: translate(-6px, -6px);
    }
}

@keyframes top-arrow {
    0% {
        transform: translate(-6px, -6px);
    }

    35% {
        transform: translate(0, 0);
    }

    90% {
        opacity: 1;
        transform: translate(0, 0);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

.tns-controls {
    left: 0;
    position: absolute;
    top: 50%;
    width: 100%;
}

.tns-controls [data-controls="prev"], .tns-controls [data-controls="next"] {
    background-color: transparent;
    background-position: center center;
    background-repeat: no-repeat;
    border: 0;
    height: 24px;
    padding: 0;
    position: absolute;
    width: 24px;
}

.tns-controls [data-controls="prev"] {
    background-image: url('https://emidica.com/img/icos/ico-arrow-prev.svg');
}

.tns-controls [data-controls="next"] {
    background-image: url('https://emidica.com/img/icos/ico-arrow-next.svg');
    right: 0;
}

.accordion-button::after {
    filter: grayscale(100%) brightness(10) invert(100%);
}

.accordion-button:not(.collapsed)::after {
    filter: grayscale(100%) brightness(10);
}

.accordion-flush .accordion-item .accordion-button, .accordion-flush .accordion-item .accordion-button.collapsed {
    box-shadow: none !important;
}

/* welcome */
#welcome .nombre{
    text-transform: inherit!important;
    color: white;
}

#welcome .tercera-linea{
    margin: 0px;
    line-height: 1;
    letter-spacing: 10px;
    margin-left: 0.5rem;
    font-size: 35px;
    color: white;
}

#welcome .edad{
    color: var(--c-tertiary);
    font-family: var(--f-primary);
    font-size: 120px;
}

#welcome .fecha{
    background-color: var(--c-tertiary);
    color: white;
    font-weight: 700;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-bottom: 3rem;
    margin-top: 0px;
}

#itinerary{
    background-color: #F2F2F2;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

#itinerary .row > :last-child > div{
    background-color: var(--c-quaternary);
    height: 100%;
    display: flex;
    align-items: center;
    padding: 30px;
}

#itinerary .container .row > div h3{
    letter-spacing: 0px;
    color: var(--c-tertiary);
}

#itinerary .container .row > div a.btn{
    border-radius: 0px;
    background-color: var(--c-primary);

}

#itinerary .row div > :nth-child(5){
    font-family: var(--f-primary);
}

#gallery{
    background-color: var(--c-quaternary);
}

#gallery .icon img{
    width: 70px;
    height: 70px;
    object-fit: contain;
    filter: var(--f-icons);
}

.form-control::placeholder{
    color: white;
}

/* Gallery */
@media screen and (min-width: 900px) {
    #gallery img {
        height: 400px;
        width: 100%;
        object-fit: cover;
    }
}

#countdown {
}

#countdown .number{
    font-family: var(--f-primary);
    color: white;
}

#countdown .countdown-text{
    color: var(--c-tertiary);
    font-weight: 600;
}

#hashtag {
    background-color: var(--c-quaternary);
}

#hashtag .container{
    padding-top: 1rem;
    padding-bottom: 2rem;
}

#hashtag .title{
    color: var(--c-tertiary);
}

#hashtag .text {
    color: #000;
}

#hashtag a.btn{
    display: none;
}

#schedule {
    background-size: cover;
    background-position: center;
    background-image: var(--bg-second);
}

#schedule .container h4{
    text-transform: inherit;
}

#schedule .text {
    color: #000;
}

#hashtag .hashtag-phrase{
    color: var(--c-tertiary);
}

/* Instagram */
#instagram-cumple{
    background-color: var(--c-quaternary);
}

#instagram-cumple .title {
    color: var(--c-tertiary);
}

#instagram-cumple .bg{
    background-color: var(--c-secondary)!important;
}

#instagram-cumple .text {
}

#instagram-cumple img {
    border-color: var(--c-tertiary) !important;
}

/* Filtro */
#instagram-filtro{
    background-color: var(--c-quaternary);
}

#instagram-filtro .instructions {
    background-color: #F2F2F2;
    padding: 110px 40px;
    max-width: 650px;
    text-align: center;
}

#instagram-filtro .title {
    font-size: 30px !important;
    color: var(--c-tertiary);
}

#instagram-filtro .text {
    font-size: 16px !important;
    max-width: 480px;
}

#instagram-filtro .instructions .btn, #schedule a.btn {
    background-color: #000 !important;
    color: white;
    border-radius: 0px !important;
    font-weight: 500;
    border: 0 !important;
}

#instagram-filtro .instructions .btn:hover, #schedule a.btn:hover{
    background-color: var(--c-tertiary) !important;
}

/* Video */
#video {
    background-color: var(--c-secondary);
    color: white;
    background-image: var(--bg-first);
    background-size: cover;
    background-position: center;
}

section#video .text {
    display: block;
}

#video .title {
    color: var(--c-tertiary);
}

/* Selpix */
#selpix {
    background-color: var(--c-quaternary);
}

section#selpix .title {
    color: var(--c-tertiary);
}

section#selpix .text {
    line-height: 1.8;
    color: #212121;
}

#selpix .btn {
    background-color: #000;
    color: white;
    border-radius: 0;
}

#selpix .number {
    background-color: var(--c-tertiary);
    color: #fff;
    height: 100px;
    width: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;
}

#selpix .status {
    text-transform: uppercase;
}

#selpix .icon img{
    display: block;
}
#selpix .icon img{
    filter: var(--f-icons);
}

.icon img{
    display: none;
}

/* gifts */
#gifts {
    background-image: var(--bg-first);
    background-size: cover;
    background-position: center;
    background-color: var(--c-secondary) !important;
    color: #fff;
}

#gifts .row p.text{
    text-transform: inherit!important;
}

#gifts .bg-white {
    color: #000;
}

#gifts .pills .rounded-pill {
    border-radius: 0 !important;
}

#gifts .title {
    color: var(--c-tertiary) !important;
    font-size: 30px !important;
    font-family: var(--f-primary);
}

#gifts .pills{
    margin-bottom: 1rem;
}

#gifts #infoDetails{
    width: fit-content;
    margin: 0 auto;
    margin-top: 20px;
    background-color: white;
    color: #000;
}

#gifts .text {
    font-weight: 400;
}

.nav-pills .nav-link {
    color: white;
}

.nav-pills .nav-link.active {
    background-color: white;
    color: #000;
}

/* gifts */
#playlist {
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 90%;
}

#playlist::before{
    content: "";
    display: block;
    background-position: center;
    background-size: 90%;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='1511.751' height='555.259' viewBox='0 0 1511.751 555.259'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='Rectángulo_1357' data-name='Rectángulo 1357' width='49.535' height='77.153' fill='%23769B85'/%3E%3C/clipPath%3E%3CclipPath id='clip-path-2'%3E%3Crect id='Rectángulo_1357-2' data-name='Rectángulo 1357' width='33.639' height='52.394' fill='%23769B85'/%3E%3C/clipPath%3E%3CclipPath id='clip-path-3'%3E%3Crect id='Rectángulo_1357-3' data-name='Rectángulo 1357' width='36.696' height='57.156' fill='%23769B85'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Grupo_3381' data-name='Grupo 3381' transform='translate(-179.709 -4457.891)'%3E%3Cg id='Grupo_3362' data-name='Grupo 3362' transform='translate(1557.77 4471.818)'%3E%3Cpath id='Trazado_7426' data-name='Trazado 7426' d='M0,74.752c1.29-4.673,3.508-8.722,7.674-11.475A16.626,16.626,0,0,1,18,60.307c1.574.091,2.257-.136,1.889-2.062C17.988,48.286,16.25,38.3,14.429,28.321c-.568-3.114-.61-3.12,2.231-4.4Q42.23,12.368,67.807.832c2.919-1.316,2.95-1.294,3.5,1.711q4.749,26.114,9.476,52.232c1.81,10.056-4.921,19.342-15.252,21.142-9.47,1.649-18.806-5.248-20.509-15.153A18.158,18.158,0,0,1,59.942,40.114a15.236,15.236,0,0,1,3.77-.11c1.691.152,1.666-.753,1.449-1.938-.978-5.345-1.923-10.7-2.923-16.039-.867-4.633-.9-4.648-5.166-2.741-9.142,4.089-18.264,8.226-27.423,12.277a2.225,2.225,0,0,0-1.5,2.915c2.532,13.819,5.109,27.633,7.422,41.49a17.81,17.81,0,0,1-12.2,19.565c-.755.245-1.513.481-2.27.721H14.334C6.55,94.267,1.854,89.276,0,81.521Z' transform='translate(0 0)' fill='%23769B85'/%3E%3C/g%3E%3Cg id='Grupo_3368' data-name='Grupo 3368' transform='translate(1647.663 4935.866) rotate(30)'%3E%3Cpath id='Trazado_7426-2' data-name='Trazado 7426' d='M0,46.629a11.859,11.859,0,0,1,4.787-7.158,10.371,10.371,0,0,1,6.444-1.853c.982.057,1.408-.085,1.178-1.287C11.221,30.12,10.137,23.888,9,17.666c-.354-1.942-.381-1.946,1.392-2.747q15.95-7.2,31.9-14.4c1.821-.821,1.84-.807,2.181,1.067q2.963,16.29,5.911,32.582a11.344,11.344,0,0,1-9.514,13.188c-5.908,1.029-11.731-3.274-12.793-9.452a11.327,11.327,0,0,1,9.31-12.881,9.5,9.5,0,0,1,2.352-.069c1.055.1,1.04-.47.9-1.209-.61-3.334-1.2-6.673-1.823-10.005-.541-2.89-.563-2.9-3.223-1.71-5.7,2.551-11.393,5.131-17.106,7.658a1.388,1.388,0,0,0-.936,1.818c1.58,8.62,3.187,17.237,4.63,25.881a11.11,11.11,0,0,1-7.608,12.2c-.471.153-.944.3-1.416.45H8.941A11.586,11.586,0,0,1,0,50.852Z' transform='translate(0 0)' fill='%23769B85'/%3E%3C/g%3E%3Cg id='Grupo_3363' data-name='Grupo 3363' transform='translate(252.517 4829.717) rotate(34)'%3E%3Cpath id='Trazado_7426-3' data-name='Trazado 7426' d='M0,63.412c1.094-3.964,2.976-7.4,6.51-9.734a14.1,14.1,0,0,1,8.763-2.52c1.335.077,1.915-.115,1.6-1.75-1.616-8.448-3.09-16.922-4.635-25.384-.482-2.641-.517-2.647,1.892-3.735Q35.824,10.491,57.52.706c2.476-1.116,2.5-1.1,2.966,1.451q4.029,22.152,8.038,44.308C70.06,55,64.35,62.873,55.586,64.4c-8.034,1.4-15.953-4.452-17.4-12.854a15.4,15.4,0,0,1,12.66-17.517,12.925,12.925,0,0,1,3.2-.094c1.435.129,1.414-.639,1.229-1.644-.83-4.535-1.631-9.075-2.48-13.606-.736-3.93-.766-3.943-4.382-2.326-7.755,3.469-15.493,6.978-23.263,10.414a1.887,1.887,0,0,0-1.273,2.472c2.148,11.723,4.334,23.441,6.3,35.2a15.108,15.108,0,0,1-10.346,16.6c-.64.208-1.283.408-1.926.612H12.159C5.556,79.966,1.573,75.733,0,69.154Z' transform='translate(0 0)' fill='%23769B85'/%3E%3C/g%3E%3Cg id='Grupo_3365' data-name='Grupo 3365' transform='translate(412.945 4649.843)'%3E%3Cg id='Grupo_3364' data-name='Grupo 3364' transform='translate(0 0)' clip-path='url(%23clip-path)'%3E%3Cpath id='Trazado_7427' data-name='Trazado 7427' d='M11.425,0c4.125,2.707,8.118,5.307,12.089,7.938,8.233,5.453,16.429,10.962,24.7,16.353,1.575,1.026,1.689,1.823.608,3.275-1.558,2.092-2.973,4.3-4.344,6.519-.717,1.162-1.356,1.206-2.44.466-3.841-2.622-7.735-5.166-11.613-7.733-.569-.376-1.164-.712-2.124-1.294.843,4.192,1.6,7.973,2.364,11.752,1.283,6.365,2.615,12.719,3.84,19.1A17.41,17.41,0,1,1,.331,63.026c-2.19-10.86,6.808-21.3,17.835-20.584,2.217.144,1.134-1.261,1-1.93-1.387-7.122-2.864-14.226-4.317-21.335q-1.759-8.606-3.509-17.213A2.726,2.726,0,0,1,11.425,0' transform='translate(0)' fill='%23769B85'/%3E%3C/g%3E%3C/g%3E%3Cg id='Grupo_3367' data-name='Grupo 3367' transform='matrix(0.883, 0.469, -0.469, 0.883, 204.306, 4457.891)'%3E%3Cg id='Grupo_3364-2' data-name='Grupo 3364' clip-path='url(%23clip-path-2)'%3E%3Cpath id='Trazado_7427-2' data-name='Trazado 7427' d='M7.758,0c2.8,1.839,5.513,3.6,8.21,5.391,5.591,3.7,11.157,7.444,16.775,11.1,1.07.7,1.147,1.238.413,2.224-1.058,1.42-2.019,2.918-2.95,4.427-.487.789-.921.819-1.657.316-2.608-1.781-5.252-3.508-7.886-5.251-.386-.255-.791-.483-1.442-.879.573,2.847,1.088,5.414,1.605,7.981.871,4.322,1.776,8.638,2.608,12.967a11.823,11.823,0,1,1-11.1-9.459c1.505.1.77-.857.682-1.31-.942-4.836-1.945-9.661-2.932-14.488Q8.892,7.179,7.7,1.334A1.851,1.851,0,0,1,7.758,0' transform='translate(0 0)' fill='%23769B85'/%3E%3C/g%3E%3C/g%3E%3Cg id='Grupo_3366' data-name='Grupo 3366' transform='translate(1452.428 4753.645) rotate(22)'%3E%3Cg id='Grupo_3364-3' data-name='Grupo 3364' clip-path='url(%23clip-path-3)'%3E%3Cpath id='Trazado_7427-3' data-name='Trazado 7427' d='M8.463,0c3.056,2.006,6.014,3.932,8.956,5.881,6.1,4.04,12.171,8.121,18.3,12.114,1.167.76,1.251,1.35.45,2.426-1.154,1.55-2.2,3.183-3.218,4.829-.531.861-1,.893-1.807.345-2.845-1.943-5.73-3.827-8.6-5.729-.421-.278-.863-.527-1.573-.959.625,3.106,1.187,5.906,1.751,8.706.95,4.715,1.937,9.423,2.845,14.146A12.9,12.9,0,1,1,13.457,31.441c1.642.107.84-.934.744-1.429-1.027-5.276-2.122-10.539-3.2-15.8Q9.7,7.831,8.4,1.455A2.019,2.019,0,0,1,8.463,0' transform='translate(0 0)' fill='%23769B85'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

#playlist .form-control{
    background-color: white;
    color: #000;
}

#playlist .form-control::placeholder{
    color: #000;
}

#playlist .container{
    position: relative;
}

#playlist .container form .row .text-center button{
    background-color: var(--c-tertiary);
}
#playlist .container h3{
    text-transform: inherit;
}

#phrase{
    position: relative;
    background-color: transparent;
}

#phrase .container{
    position: relative;
}

@media screen and (max-width: 900px) {
    #playlist {
        background-repeat: repeat;
        background-size: 115%;
    }
}

/* dresscode */
#dresscode {
    background-color: var(--c-secondary);
    background-image: var(--bg-first);
    background-size: cover;
    background-position: center;
}

#dresscode .title {
    color: var(--c-tertiary);
}

#dresscode .container .text{
    color: white;
}

#dresscode .bg-gold {
    text-transform: uppercase;
    font-weight: 800;
}

#dresscode .btn {
    text-transform: uppercase;
    background-color: var(--c-quaternary) !important;
    color: #000 !important;
    transition: all 0.3s;
}

#dresscode .btn:hover{
    background-color: var(--c-primary)!important;
    color: white!important;
}

/* transport */
#transport {
    background-color: var(--c-quaternary);
}

#transport .title {
    color: var(--c-tertiary);
}

#transport .text {
    font-weight: 400;
}

#transport .form-control {
    background-color: var(--c-tertiary);
    color: #fff;
    border: 0 !important;
}

#transport .form-control::placeholder {
    color: #fff;
}

#transport .btn {
    text-transform: uppercase;
}

#recomendations {
    background-color: var(--c-tertiary) !important;
    background-image: var(--bg-second)!important;
    background-size: cover;
    background-position: center;
    /* font-family: var(--f-secondary); */
}

#recomendations .container > div{
    padding: 0px;
}

#recomendations .container .row{
    max-width: 800px;
    margin: 0 auto;
}

section#recomendations .fs-sm-16 {
    font-size: 14px !important;
}

#recomendations .accordion-button::after {
    filter: brightness(0) !important;
}

#recomendations .title {
}

#recomendations .accordion-flush .accordion-item {
    border-radius: 0px;
    font-family: var(--f-secondary);
}

#confirmation .title {
    color: var(--c-tertiary) !important;
}

#confirmation .btn-light {
    background-color: var(--c-tertiary) !important;
    text-transform: uppercase !important;
    color: #fff;
}

#greeting {
    background-color: var(--c-tertiary);
    color: #fff;
}


section#confirmation {
    background-image: var(--bg-first);
    background-size: cover;
    background-position: center;
    color: white;
    padding-top: 4rem !important;
    padding-bottom: 2rem;
}

section#confirmation .text {
    font-weight: 400;
}

section#confirmation .btn {
    background-color: var(--c-quaternary) !important;
    color: #212121;
}

section#confirmation .btn:hover{
    background-color: var(--c-primary) !important;
    color: white !important;
}

#confirmation form{
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-bottom: 1rem !important;
}

#confirmation .form-control{
    background-color: white;
    color: #000;
}
#confirmation .form-control::placeholder{
    color: #000;
}

.icon img {
    width: 70px;
    height: 70px;
    object-fit: contain;
}

.form-check-input:checked{
    background-color: var(--c-tertiary);
    border-color: var(--c-tertiary);
}

@media (max-width: 480px){
    #welcome .edad {
        font-size: 60px!important;
    }
    #welcome::before{
        content: "";
        display: block;
        background-image: url(/img/icons/angles-down-solid.svg);
        width: 60px;
        height: 60px!important;
        background-repeat: no-repeat;
        position: absolute;
        z-index: 2;
        bottom: 1rem;
        left: 0;
        right: 0;
        margin: 0 auto;
        filter: var(--f-icons) drop-shadow(4px 4px 3px rgba(0, 0, 0, 0.5));
    }
    #itinerary .container > div .row >:last-child{
        padding: 0px;
    }
}