/*
    (c)2017 - visuallizard.com

    General styles.
    Template, view, plugin and element specific, etc.

*/
/* colour declarations */
:root {
    --gold: #ffbc0d;
    --red: #db0007;
    --lavender: #d0c9ff;
    --aqua: #8ee7f8;
    --blue: #1b43b2;
    --lime: #9cd83e;
    --softwht: #fffde9;
    --white: #ffffff;
    --black: #000000;
}

img { max-width: 100%; }
.small { font-size: 0.75rem; }
.notice { padding: 15px; background: rgba(255,200,41,0.4); }
#acknowledgement p { margin: 0; }
.disclaimer p { font-size: 0.75rem; text-align: center; }
.red { color: var(--red); }
a.button {
    display: inline-block;
    position: relative;
    width: auto;
    padding: 1em 2em;
    margin: 0;
    border-radius: 3px;
    font-weight: 600;
    text-align: center;
    background: var(--red);
    color: var(--softwht);
    transition: all 0.2s ease;
}
a.button:hover {
    background: var(--black);
    color: var(--softwht);
}
p.fleximage {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0;
    margin: 0;
}
p.fleximage img {
    display: block;
    position: relative;
    flex-grow: 1;
    flex-basis: 20%;
    max-width: 45%;
    max-height: 300px;
    padding: 0.25em;
    margin: 0;
}



/* !Hope Couture Registrations */
div#register {
    display: flex;
    position: relative;
    justify-content: flex-start;
    align-content: flex-start;
    flex-wrap: wrap;
    column-gap: 2%;
    row-gap: 1.25rem;
    width: 100%;
}
    div#register > div.registration-tickets {
        display: block;
        position: relative;
        flex-basis: 49%;
        max-width: 49%;
        padding: 1rem;
        background: #f3f4f4;
    }
        div#register > div.registration-tickets > form {
            display: flex;
            position: relative;
            justify-content: center;
            flex-wrap: wrap;
            column-gap: 1rem;
            row-gap: 1rem;
            margin: 0;
        }
            div#register > div.registration-tickets > form div.input-number {
                display: block;
                position: relative;
                flex-basis: 100%;
                max-width: 100%;
                text-align: center;
            }
                div#register > div.registration-tickets > form div.input-number label {
                    margin: 0.625rem 0;
                }
                div#register > div.registration-tickets > form div.input-number input {
                    display: block;
                    position: relative;
                    width: 40%;
                    padding: 0.25rem;
                    margin: 0 auto;
                    font-size: 2rem;
                    line-height: 1;
                    text-align: center;
                }
            div#register > div.registration-tickets > form button {
                display: block;
                position: relative;
                flex-basis: 100%;
                max-width: 100%;
                font-weight: 600;
                background: var(--red);
                color: var(--softwht);
            }



/* !Banners: defaults */
#home-banners {
    display: block;
    position: relative;
    z-index: 1;
    padding: 0;
    margin: 0;
}
.banners {

}
    .banner {
        position: relative;
    }
        .banner-link {
            display: block;
        }
        .banner-img {
            display: block;
            width: 100%;
            height: auto;
        }
        .banner-text {
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            margin: 0 auto;
            padding: 1em;
            max-width: 800px;
            text-align: center;
            text-transform: none;
            text-shadow: 0 0 3px rgba(0,0,0,.5);
            color: var(--softwht);
            transform: translateY(-50%);
            transition: all .2s;
        }
        .banner-link:hover .banner-text {
            opacity: .5;
        }
            .banner-title {
                color: inherit;
                font-size: 50px;
                font-size: calc(1em + 2vw);
                margin-top: 0;
                margin-bottom: 0;
            }
            .banner-desc {
                max-width: 600px;
                margin: 0 auto;
                letter-spacing: 0.05em;
            }

        .banner-text.upperleft        { margin: 0; top: 15%; left: 20%; }
        .banner-text.uppercentre    { margin: 0; top: 15%; left: 40%; }
        .banner-text.upperright     { margin: 0; top: 15%; left: 60%; }
        .banner-text.middleleft     { margin: 0; top: 30%; left: 20%; }
        .banner-text.middlecentre { margin: 0; top: 30%; left: 40%; }
        .banner-text.middleright    { margin: 0; top: 30%; left: 60%; }
        .banner-text.lowerleft        { margin: 0; top: 60%; left: 20%; }
        .banner-text.lowercentre    { margin: 0; top: 60%; left: 40%; }
        .banner-text.lowerright     { margin: 0; top: 60%; left: 60%; }


    /* ! Banners: Featured - slider */
    .featured.banners {

    }

    /* ! Banners: Grid Fixed item width */
    .grid-fixed.banners {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 102%;
        margin: 0 -1% 0;
        padding: 0;
    }
        .grid-fixed .banner {
            display: inline-block;
            width: 25%;
            padding: 1em 1%;
        }
        .grid-fixed .banner-link {
            display: flex;
            align-items: center;
            height: 100%;
        }
        .grid-fixed .banner-img {
            transition: transform .3s;
        }
        .grid-fixed .banner-link:hover .banner-img {
            transform: scale(1.1);
        }
        .grid-fixed .banner-title {
            font-size: 20px;
        }

    /* ! Banners: Grid Flex item width
    (usually for sponsor logos where width is unknown. Set module settigns to something like Width:0 and Height:100px ) */
    .grid-flex.banners {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 102%;
        margin: 0 -1% 1em;
        padding: 0;
    }
        .grid-flex .banner {
            width: auto;
            margin: 1em 1%;
            padding: 0;
        }
        .grid-flex .banner-link {

        }
        .grid-flex .banner-img {
            display: block;
            width: auto;
            height: 100%;
            max-height: 100px;
            margin: 0;
            transition: all .3s;
        }
        .grid-flex .banner:hover .banner-img {
            transform: scale(1.1);
        }
        .grid-flex .banner-title {
            font-size: 20px;
        }



/* ! gallerys */
.gallery-set {
    display: flex;
    position: relative;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
.gallery-set > li {
    display: block;
    position: relative;
    width: 32%;
    height: 200px;
    margin: 0 0 1em 2%;
    padding: 0;
}
.gallery-set > li:nth-child(3n+1) {
    margin-left: 0;
}

.gallery-box {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-size: cover;
}
.gallery-box a {
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        color: #fff;

        transform: scale(1);
        cursor: pointer;
}
.gallery-box[style*="placeholder"] {
        background-size: cover;
}
.gallery-text {
        display: block;
        position: absolute;
        bottom: 0;
        width: 100%;
        min-height: 0;
        max-height: 70%;
        margin: 0;
        padding: 1em;
        border: none;
        border-radius: 0;
        background-color: transparent;
        background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5), rgba(0,0,0,0.85));
        color: var(--softwht);
        opacity: 1;
        transition: all .3s ease-in-out;
        overflow: hidden;
        cursor: pointer;
        z-index: 1;
}
.gallery-title {
        margin-bottom: 0;
        font-size: 18px;
}
.gallery-box .gallery-brief {
        max-height: 0;
        opacity: 0;
        margin-top: 0;
        margin-bottom: 0;
        transition: all .3s ease-in-out;
}
.gallery-box .gallery-brief:empty {
        margin: 0;
}
.gallery-box a:hover .gallery-brief {
        max-height: 200px;
        opacity: 1;
        margin-top: 1em;
}


/* !sponsor display styles */
.sponsor-set {
    display: block;
    position: relative;
    margin: 0 0 30px 0;
}
.sponsor-set {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    column-gap: 2%;
    row-gap: 1.5rem;
    clear: both;
    width: 100%;
    padding: 0;
    margin: 1.5rem 0 0 0;
    text-align: center;
}
.sponsor-set:before {
    content: "";
    display: block;
    position: relative;
    flex-basis: 100%;
    margin: 0;
    font-size: 2rem;
    font-weight: 300;
    text-align: center;
}
.sponsor-set#presenting:before { content: "Presenting Sponsor"; }
.sponsor-set#platinum:before { content: "Platinum Sponsors"; }
.sponsor-set#gold:before { content: "Gold Sponsors"; }
.sponsor-set#silver:before { content: "Silver Sponsors"; }
.sponsor-set#bronze:before { content: "Bronze Sponsors"; }
.sponsor-set#hors-doeuvres:before { content: "Hors D'oeuvres Sponsor"; }
.sponsor-set#wine:before { content: "Dinner Wine Sponsor"; }
.sponsor-set#dessert:before { content: "Dessert Sponsor"; }
.sponsor-set#sparkling-wine:before { content: "Sparkling Wine Sponsor"; }
.sponsor-set#auction:before { content: "Silent Auction Sponsor"; }
.sponsor-set#raffle:before { content: "50/50 Raffle Sponsor"; }
    .sponsor-set .sponsor {
        display: block;
        position: relative;
        flex-grow: 1;
        padding: 30px;
        border: 5px solid var(--black);
        border-radius: 100%;
        background: #fff;
        overflow: hidden;
    }
    .sponsor-set#presenting .sponsor {
        max-width: 36%;
        padding: 60px;
    }
    .sponsor-set#platinum .sponsor {
        max-width: 32%;
        border-color: #f8f6d0;
    }
    .sponsor-set#gold .sponsor {
        max-width: 32%;
        border-color: var(--gold);
    }
    .sponsor-set#silver .sponsor {
        max-width: 23.5%;
        padding: 10px;
        border-color: #dedede;
    }
    .sponsor-set#bronze .sponsor {
        max-width: 23.5%;
        padding: 10px;
        border-color: #b09954;
    }
    .sponsor-set#hors-doeuvres .sponsor,
    .sponsor-set#dessert .sponsor,
    .sponsor-set#wine .sponsor,
    .sponsor-set#auction .sponsor,
    .sponsor-set#sparkling-wine .sponsor,
    .sponsor-set#raffle .sponsor {
        max-width: 18.4%;
        padding: 10px;
        border-color: var(--black);
    }
        .sponsor-set .sponsor img {
            display: block;
        }
        .sponsor-set .sponsor a {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            z-index: 1;
            border-radius: 100%;
        }



/* !document module styles */
.document-category {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    margin: 0 0 1.5em 0;
}
    .document-category h3.document-cat-name {
        display: block;
        position: relative;
        width: 100%;
        padding: 0.5em 0;
        margin: 0;
        border-bottom: 1px solid #999;
    }
    .document-category .document {
        display: flex;
        position: relative;
        flex-wrap: wrap;
        justify-content: flex-start;
        padding: 1em 0.5em;
        border-bottom: 1px solid #999;
    }
        .document-category .document h4 {
            display: block;
            position: relative;
            width: 80%;
            padding: 0;
            margin: 0;
        }
        .document-category .document a {
            display: block;
            position: relative;
            align-self: center;
            width: 20%;
            padding: 0.5em;
            margin: 0;
            border: none;
            border-radius: 5px;
            font-weight: 700;
            text-align: center;
            text-transform: uppercase;
            text-decoration: none;
            background: #0d0f59;
            color: #fff;
            transition: all 0.2s ease;
        }
        .document-category .document a:hover {
            background: var(--gold);
            color: var(--black);
        }
        .document-category .document .document-desc {
            display: block;
            position: relative;
            order: 3;
            width: 100%;
            padding: 0.5em 0;
        }



/* ! form custom styles */
.fm-form { max-width: 100%; }
.form-block {
    display: block;
    position: relative;
    width: 100%;
    padding: 2rem;
    margin: 0 0 30px 0;
    border: none;
    border-radius: 5px;
    background: var(--softwht);
}
    .form-block .reminder-notice {
        display: block;
        position: relative;
        width: 50%;
        padding: 0 30px;
        margin: 0 auto;
    }
    .form-block form {
        display: flex;
        position: relative;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .form-block form.reminder {
        display: block;
        position: relative;
        width: 50%;
        padding: 0;
        margin: 0 auto;
    }
    .form-block .input-text,
    .form-block .input-email,
    .form-block .input-textarea,
    .form-block .input-wysiwyg,
    .form-block .input-currency,
    .form-block .input-select,
    .form-block .input-radio,
    .form-block .input-checkbox {
        display: block;
        position: relative;
        flex-basis: 100%;
        max-width: 100%;
        padding: 0;
    }
    .form-block .input-radio,
    .form-block .input-checkbox {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        column-gap: 0.5rem;
        padding: 15px;
    }
        .form-block .input-radio input[type="radio"],
        .form-block .input-checkbox input[type="checkbox"] {
            display: block;
            position: relative;
            flex-basis: 30px;
            max-width: 30px;
            height: 30px;
        }
    .form-block .input-textarea,
    .form-block .input-wysiwyg,
    .form-block .input-select.fm-checkbox-group {
        width: 100%;
    }
    .form-block .input-select.fm-checkbox-group {
        display: flex;
        position: relative;
        justify-content: flex-start;
        flex-wrap: wrap;
        padding: 0;
        margin: 0 0 1em 0;
    }
        .form-block .input-text label,
        .form-block .input-email label,
        .form-block .input-textarea label,
        .form-block .input-wysiwyg label,
        .form-block .input-currency label,
        .form-block .input-select label,
        .form-block .input-radio label,
        .form-block .input-checkbox label {
            display: block;
            margin: 0 0 5px 0;
            font-family: "aptos", sans-serif;
            font-weight: 300;
            font-size: 20px;
        }
        .form-block .input-radio label,
        .form-block .input-checkbox label {
            margin: 0;
        }
        .form-block .input-radio label,
        .form-block .input-checkbox label,
        .form-block .input-check-option > label { padding-left: 0.5em; }
        .form-block p.input-plaintext-label,
        .form-block .input-select.fm-checkbox-group > label {
            width: 100%;
            padding: 1em 1em 0.25em 0.5em;
            font-size: 1.5rem;
        }
        .form-block p.input-plaintext-value {
            width: 100%;
            padding: 0 1em;
            font-size: 1rem;
        }
    .form-block .input-check-option,
    .form-block .input-radio-option { width: 50%; padding: 5px 10px; }
    .form-block .input-check-option input[type="checkbox"],
    .form-block .input-checkbox input[type="checkbox"],
    .form-block .input-radio-option input[type="radio"] {
        width: 24px;
        height: 24px;
        margin-left: 10px;
        transform: scale(1.2);
    }
    .form-block .input-currency input[type="number"],
    .form-block .input-text input[type="text"],
    .form-block .input-textarea textarea,
    .form-block .input-email input[type="email"],
    .form-block .input-select select,
    .form-block .input-text select {
        width: 100%;
        padding: 0.25em;
        font-family: "aptos", sans-serif;
        font-size: 24px;
        font-weight: 300;
        letter-spacing: 0.05em;
    }
    .form-block .input-select select,
    .form-block .input-text select {    }
    .form-block .input-currency input[type="number"] { width: 95%; margin-left: 5px; }
    .form-block .pledge-total input[type="text"] {
        font-size: 40px;
        text-align: center;
    }
    .form-block form .g-recaptcha {
        display: block;
        position: relative;
        width: 100%;
        padding: 0;
        margin: 0 0 1em 0;
    }
    .form-block button[type="submit"] {
        display: block;
        position: relative;
        margin: 0;
        border-radius: 3px;
        background: #456490;
        color: #fff;
    }

    .form-block form .address-fields {
        display: block;
        position: relative;
        width: 100%;
        padding: 30px;
        margin: 0 0 15px 0;
        border: 1px solid #ccc;
    }
        .form-block form .address-fields .input-text,
        .form-block form .address-fields .input-email,
        .form-block form .address-fields .input-select {
            display: block;
            position: relative;
            width: 100%;
        }
            .form-block form .address-fields .input-text label,
            .form-block form .address-fields .input-email label,
            .form-block form .address-fields .input-select label {
                font-size: 30px;
                font-weight: 300;
            }

    .form-block form > h2.registration-title {
        display: block;
        flex-basis: 50%;
    }
    .form-block form > p.ticket-price {
        display: block;
        flex-basis: 50%;
        align-self: center;
        text-align: right;
    }
    .form-block form > h3 {
        margin-top: 1.5rem;
    }

    fieldset.attendees-set {
        display: flex;
        position: relative;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        column-gap: 2%;
        width: 100%;
        padding: 2rem;
        margin: 0 0 1rem 0;
        border: 1px solid #ccc;
    }
        fieldset.attendees-set > legend {
            padding: 0.5rem 1rem;
            border-bottom: 1px solid var(--black);
        }
        fieldset.attendees-set div.attendee-item {
            display: flex;
            position: relative;
            justify-content: flex-start;
            flex-wrap: wrap;
            column-gap: 2%;
            row-gap: 0;
            flex-basis: 100%;
            max-width: 100%;
            padding: 2rem;
            margin: 0 0 2rem 0;
            background: #e3e4e4;
        }
            fieldset.attendees-set div.attendee-item > div.input-select {

            }
            fieldset.attendees-set div.attendee-item div.attendee-list {
                display: flex;
                position: relative;
                justify-content: flex-start;
                align-items: center;
                flex-wrap: wrap;
                column-gap: 2%;
                row-gap: 0.625rem;
                width: 100%;
                padding: 0;
                margin: 0;
            }
                fieldset.attendees-set div.attendee-item div.attendee-list div.input-text {
                    display: block;
                    position: relative;
                    flex-basis: 49%;
                    max-width: 49%;
                    margin: 0;
                }
                fieldset.attendees-set div.attendee-item div.attendee-list div.input-textarea,
                fieldset.attendees-set div.attendee-item div.attendee-list div.input-select {
                    display: block;
                    position: relative;
                    flex-basis: 100%;
                    max-width: 100%;
                    margin: 0;
                }

        .form-block form .cc_form {
            display: block;
            position: relative;
            width: 100%;
            padding: 0 25%;
        }
        .form-block form button[type="submit"] {

        }



/* !social media styles */
ul.social {
    display: flex;
    position: relative;
    width: 30%;
    padding: 1.5em 0;
    margin: 0 35%;
    list-style: none;
    text-align: center;
    justify-content: space-around;
}
    ul.social li {
        display: block;
        position: relative;
        flex-grow: 1;
    }
        ul.social li a {
            display: block;
            position: relative;
            width: 36px;
            height: 36px;
            padding: 4px 7px;
            margin: 0 auto;
            border-radius: 30px;
            background: var(--red);
            color: var(--softwht);
            transition: all 0.2s ease;
        }
        ul.social li a:hover {
            background: var(--black);
        }





/* !General Content styles */
div.content-block {
    display: block;
    position: relative;
    float: left;
    width: 100%;
    padding: 30px;
    margin: 0 0 30px 0;
    border-radius: 5px;
}




/* !transaction styles */
div.line-items {
    display: block;
    position: relative;
    clear: both;
    float: left;
    width: 100%;
    padding: 30px;
    margin: 0 0 30px 0;
    border-radius: 5px;
    background: var(--softwht);
}
table { font-family: "aptos", sans-serif; }
table.cart-table {
    display: table;
    position: relative;
    width: 100%;
    font-size: 20px;
    font-weight: 300;
}
table.cart-table th,
table.cart-table td { text-align: center; }
th.action,
td.action { display: none; }
p.order-total {
    text-align: center;
    font-size: 40px;
}