/*
Theme Name: Micro Foliage
Theme URI: http://weddingly.hu/
Author: Weddingly
Description: Weddingly Micro
*/

@import url('https://fonts.googleapis.com/css2?family=Alegreya+SC&family=Poppins:wght@100;200;300;500;700&display=swap');

body {
    background-color: #fff;
    color: #1D1D1B;
}

a {
    color: #1D1D1B;
    text-decoration: underline;
    font-weight: 300;
    transition: color .15s ease-in-out;
}

#page {
    background-image: url("images/leaf-bg-footer.png");
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100%;
}

body p {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 200;
}

.navbar-brand {
    font-family: 'Alegreya SC', serif;
}

h1,
h2,
h3 {
    font-family: 'Alegreya SC', serif;
    color: #1D1D1B;
}

body.admin-bar nav {
    margin-top: 32px;
}

/**** PRELOADER ****/
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fefefe;
    z-index: 9999;
    height: 100%;
    width: 100%;
    overflow: hidden !important;
}

.preloader .status {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: url("images/logo_weddingly_2.svg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 200px;
    width: 200px;
    height: 100px;
}

/**** PRELOADER ****/

/**** Header ****/
.navbar {}

.navbar-toggler {
    border: none;
    box-shadow: none;
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(29, 29, 27, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.nav-item {
    font-family: 'Poppins', sans-serif;
}

.navbar.bg-light {
    background-color: #fff !important;
}

.navbar-light .navbar-nav .nav-link {
    color: #000;
    font-weight: 300;
}

#navbarNav {
    justify-content: right;
}

/**** Header ****/

/**** Body ****/
#primary {
    padding-top: 20%;
    background-image: url("images/foliage-bg-3.png");
    background-repeat: no-repeat;
    background-position: top 50px center;
    background-size: 100%;
}

@media screen and (min-width: 992px) {
    #primary {
        padding-top: 15%;
    }
}

/**** Body ****/

/**** Content ****/
.names h2 {
    font-size: 34px;
    margin: 0;
    line-height: .7;
}

.names .and {
    font-size: 20px;
    font-family: 'Alegreya SC', serif;
    margin: 5px 0;
}

.name-box {
    display: inline-block;
    border: 8px solid #AFB9AA;
    padding: 25px;
}

.wedding-date p {
    font-family: 'Alegreya SC', serif;
    font-size: 28px;
    margin: 25px 0;
}

.welcome {
    max-width: 700px;
    margin: 50px auto;
}

.welcome p {
    font-size: 24px;
    margin: 0;
    position: relative;
    padding: 50px 0;
}

.welcome p::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 150px;
    height: 3px;
    background-color: #AFB9AA;
}

.welcome p::after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 150px;
    height: 3px;
    background-color: #AFB9AA;
}

.section-margin {
    margin-top: 100px;
    margin-bottom: 100px;
}

section h3.title {
    font-size: 32px;
    margin-bottom: 45px;
    position: relative;
    display: inline-block;
}

section h3.title::before {
    position: absolute;
    content: "";
    bottom: -15px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 115px;
    height: 2px;
    background-color: #AFB9AA;
}

.text-section-width {
    max-width: 1000px;
    overflow: hidden;
}

.timetable {
    background-image: url("images/weddingly-leaf-6.png");
    background-repeat: no-repeat;
    background-position: bottom right -50px;
    overflow: hidden;
    padding: 10px 0;
}

.timetable-section {
    margin-bottom: 50px;
}

.timetable-row {
    position: relative;
    text-align: left;
    padding: 40px;
}

.timetable-row .time {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
}

.timetable-row .program {
    font-family: 'Poppins', sans-serif;
    font-weight: 200;
}

.timetable-row:last-child {
    padding-bottom: 0;
}

.timetable-row::before {
    display: block;
    transition: all 0.5s;
    content: '';
    position: absolute;
    top: 0;
    left: 20px;
    bottom: 0;
    width: 2px;
    background: #AFB9AA;
}

.timetable-row::after {
    display: block;
    content: '';
    position: absolute;
    width: 19px;
    height: 19px;
    border: 4px solid #AFB9AA;
    background-color: #ffffff;
    border-radius: 50%;
    top: -6px;
    left: 12px;
}

#accordionFaq {
    max-width: 700px;
    margin-bottom: 50px;
    font-family: 'Poppins', sans-serif;
}

#accordionFaq .accordion-item {
    background: none;
    border: none;
    margin-bottom: 10px;
    border-radius: 0;
}

#accordionFaq .accordion-button {
    border: none;
    border-radius: 3px;
    box-shadow: none;
    color: #1D1D1B;
    background: #fff;
    border: 2px solid #AFB9AA;
    font-size: 18px;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
}

#accordionFaq .accordion-button:not(.collapsed) {
    color: #fff;
    background: #AFB9AA;
}

#accordionFaq .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238eb072'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

#accordionFaq .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-body {
    text-align: left;
    font-weight: 200;
}

.img-section {
    text-align: center;
}

.img-section img {
    max-width: 700px;
    height: 500px;
    object-fit: cover;
    object-position: center;
    width: 100%;
    border-radius: 3px;
}

.gallery img {
    margin-bottom: 15px;
}

.map {
    margin-top: 35px;
}

.map a {
    display: block;
}

.map a img {
    max-width: 500px;
    height: 170px;
    object-fit: cover;
    width: 100%;
    border: 2px solid #AFB9AA;
}

.rsvp-section {
    max-width: 700px;
}

.rsvp-section .quform-theme-light .quform-options-style-button .quform-field-radio:checked+label {
    background-color: rgba(176, 185, 170, 1);
}

.rsvp-section .quform-theme-light .quform-options-style-button .quform-option-label {
    background-color: rgba(176, 185, 170, .5);
    color: #1D1D1B;
}

.rsvp-section .quform-theme-light .quform-group-style-bordered>.quform-spacer>.quform-child-elements {
    background-color: #f7f7f7;
    border: 2px solid #AFB9AA;
    box-shadow: none;
    border-radius: 3px;
}

.rsvp-section .quform-button-submit-default {
    float: none;
}

.rsvp-section .quform-submit {
    margin: 0 auto;
}

.rsvp-section .quform-theme-light .quform-element-submit.quform-button-style-theme>.quform-button-submit-default>button,
.rsvp-section .quform-theme-light .quform-element-submit.quform-button-style-theme>.quform-button-submit-default>button:hover {
    background-color: #AFB9AA;
    color: #1D1D1B;
}

/**** Countdown ****/
.countdown-section {
    background-image: url("images/weddingly-leaf-7.png");
    background-repeat: no-repeat;
    background-position: bottom left;
}

#countdown {
    max-width: 670px;
    margin: 0 auto;
    border: 2px solid #AFB9AA;
    margin-bottom: 50px;
    border-radius: 3px;
    background-color: #fff;
}

#countdown ul {
    margin: 0;
    padding: 0;
}

#countdown li {
    display: inline-block;
    font-size: 18px;
    list-style-type: none;
    padding: 10px;
    font-family: 'Alegreya SC', serif;
}

#countdown li span {
    display: block;
    font-size: 40px;
    line-height: 35px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
}

.emoji {
    display: none;
    padding: 1rem;
}

.emoji span {
    font-size: 4rem;
    padding: 0 .5rem;
}

@media all and (max-width: 768px) {
    #countdownli {
        font-size: calc(1.125rem * var(--smaller));
    }

    #countdownli span {
        font-size: calc(3.375rem * var(--smaller));
    }
}

/**** Countdown ****/

@media screen and (min-width: 768px) {
    .map a img {
        height: 250px;
    }

    .gallery img {
        margin-bottom: 0;
    }

    .names h2 {
        font-size: 65px;
    }

    .names .and {
        font-size: 25px;
        margin: 15px 0;
    }

    .wedding-date p {
        font-size: 36px;
        margin: 50px 0;
    }

    section h3.title {
        font-size: 46px;
    }

    .timetable {
        background-position: top right;
    }

    .timetable-row {
        padding: 50px;
    }

    .timetable-row:nth-child(2n) {
        padding-left: 54%;
        padding-right: 50px;
        text-align: left;
    }

    .timetable-row:nth-child(2n+1) {
        padding-left: 50px;
        padding-right: 54%;
        text-align: right;
    }

    .timetable-row {
        font-size: 20px;
        width: 100%;
        float: left;
        clear: both;
        padding-top: 0;
        padding-bottom: 60px;
    }

    .timetable-row::before {
        width: 2px;
        display: block;
        left: 50%;
        background: #AFB9AA;
    }

    .timetable-row::after {
        margin-left: -8px;
        left: 50%;
    }

    .timetable-row .time {
        font-size: 26px;
    }

    #countdown li {
        padding: 30px;
        font-size: 20px;
    }

    #countdown li span {
        font-size: 54px;
        line-height: 50px;
    }
}

/**** Content ****/

/**** Footer *****/
.site-info {
    text-align: center;
    padding: 50px 0;
}

.site-info img {
    width: 120px;
}