/*
Campaign Template Styles
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 - Global Campaign Styles
2.0 - Campaign Hero
3.0 - List With Image
4.0 - Coupon Offer
5.0 - Product Lineup
6.0 - Where to Buy
7.0 - Icons with Copy
8.0 - Social/E-mail
--------------------------------------------------------------*/

/* 1.0 - Global Campaign Styles */
.campaign-section {
    padding:5rem 0;
}
    .campaign-section.campaign-section--last {
        padding-bottom:0;
    }

.campaign-section p {
    font-size:1.7rem;
    line-height:2.2rem;
    margin:2.5rem 0;
}
    .campaign-section p:first-child {
        margin-top:0;
    }
    .campaign-section p.fine-print {
        font-size:1.4rem;
        line-height:1.5rem;
        margin:2rem 0 0;
    }

@media only screen and (min-width:768px) {
    .campaign-section {
        padding:8rem 0;
    }
}

.campaign-section h2 {
    margin-bottom:3rem;
}
    .campaign-section h2.size--large {
        font-size: 80px;
        line-height: 85px;
        text-align: center;   
    }

@media only screen and (min-width:768px) {
    .campaign-section h2 {
        margin-bottom:5rem;
    }
}

.fw-container {
    display:flex;
}
    .fw-inner {
        padding:3rem;
    }
    .fw-container div[class*="fw-col-"] {
        width:100%;
        position:relative;
    }

@media only screen and (max-width:767px) {
    .fw-container {
        flex-direction:column;
    }
}

@media only screen and (min-width:768px) {
    .fw-container img {
        width:100%;
        height:100%;
        max-width:initial;
        position:absolute;
        object-fit:cover;
    }
}

@media only screen and (min-width:1200px) {
    .fw-container > div {
        display:flex;
        width:50%;
        min-height:55rem;
    }

    .fw-inner {
        width:100%;
        max-width:660px;
        margin-right:auto;
    }
        .flex-md-row-reverse .fw-inner {
            margin-left:auto;
            margin-right:initial;
        }
}

@media only screen and (min-width:1200px) {
    .fw-inner {
        padding-left:16rem;
    }
        .flex-md-row-reverse .fw-inner {
            padding-right:16rem;
            padding-left:initial;
        }
}

/* 2.0 - Campaign Hero */
.campaign-hero {
    height:70vh;
    overflow:hidden;
    position:relative;
}
    .campaign-hero h1 {
        font-size: 3rem;
        line-height: 3.15rem;
        margin-bottom: 0;
    }
    .campaign-hero p {
        font-size:1.6rem;
        line-height:2.1rem;
        margin:2rem 0 0;
    }
    .campaign-hero a {
        margin:2.5rem 0 0;
    }

.campaign-hero + .campaign-coupon {
    border-top:3px solid var(--color-main-dark);
}

@media only screen and (min-width:450px) {
    .campaign-hero h1 {
        font-size: 4rem;
        line-height: 4.2rem;
    }
    .campaign-hero p {
        font-size:1.8rem;
        line-height:2.4rem;
        margin:2.5rem 0 0;
    }
}

@media only screen and (max-width:767px) {
    .campaign-hero__copy {
        padding:3rem 1.5rem 0;
    }
        .campaign-hero a.btn-default {
            background:var(--color-main-dark);
            border-color:var(--color-main-dark);
        }
            .campaign-hero a.btn-default:hover {
                color:var(--color-main-dark);
            }
}

@media only screen and (min-width:768px) {
    .campaign-hero {
        height:35rem;
    }
        .campaign-hero__copy {
            width:60%;
        }
}

@media only screen and (min-width:992px) {
    .campaign-hero__copy {
        width:100%;
    }
}

@media only screen and (min-width:1200px) {
    .campaign-hero {
        height:50rem;
    }
        .campaign-hero h1 {
            font-size:6rem;
            line-height:5.3rem;
        }
        .campaign-hero p {
            font-size:2.1rem;
            line-height:2.7rem;
        }
        .campaign-hero a {
            font-size:1.9rem;
        }
}

.campaign-hero__image {
    position:absolute;
    width:100%;
    height:100%;
}
    .campaign-hero__image > div {
        width:100%;
        height:100%;
        position:absolute;
    }
    .campaign-hero__image img {
        width:100%;
        height:100%;
        object-fit:cover;
    }

/* 3.0 - List With image */
.campaign-list__image {
    width:100%;
}
    .campaign-list img {
        width:100%;
    }

@media only screen and (max-width:767px) {
    .campaign-list {
        padding-top:0;
    }
    .campaign-list div[class*="col-"] {
        margin-top:5rem;
    }
        .campaign-list div[class*="col-"]:first-child {
            margin-top:0;
        }
}

@media only screen and (min-width:992px) {
    .campaign-list div[class*="col-"]:first-child {
        padding-right:3rem;
    }
    .campaign-list.image--circular .campaign-list__image {
        border-radius:50%;
        position:relative;
        overflow:hidden;
    }
        .campaign-list.image--circular .campaign-list__image:after {
            content:"";
            display:block;
            padding-bottom: 100%;
        }
        .campaign-list.image--circular img {
            width:100%;
            height:100%;
            object-fit:cover;
            position:absolute;
        }
}

@media only screen and (min-width:1200px) {
    .campaign-list .row {
        column-gap:10rem;
    }
    .campaign-list .features-cont ul {
        max-width:40rem;
    }
}

/* 4.0 - Coupon Offer */
.campaign-coupon h2,
.campaign-coupon img {
    margin-bottom:2.5rem;
}
.coupon-text {
    font-size:60px;
    font-weight:bold;
    color:var(--color-main-dark);
}

@media only screen and (max-width:991px) {
    .campaign-coupon {
        text-align:center;
    }
}

@media only screen and (min-width:992px) {
    .campaign-coupon img,
    .campaign-coupon h2.text--large {
        padding-right:5rem;
    }
        .campaign-coupon img {
            margin-bottom:0;
        }
}

/* 5.0 - Product Lineup */
.product-lineup img {
    width:22rem;
}

.campaign-product {
    border-top: 1px solid var(--color-main-dark);
    padding:3.5rem 0;
}
    .campaign-product:first-child {
        border-top:none;
        padding-top:0;
    }
    .campaign-product p {
        margin: 1.5rem 0 3.5rem;
    }
    .campaign-product__buttons {
        display:flex;
        gap:1.5rem;
    }

@media only screen and (max-width:991px) {
    .campaign-product__buttons {
        justify-content:center;
    }
}

/* 6.0 - Where to Buy */
.campaign-wtb {
    padding:0;
}
    .campaign-wtb h2 {
        margin:0;
    }

.retailer-buttons {
    display:flex;
    flex-wrap:wrap;
    gap:1.5rem 1rem;
    margin:2.5rem 0 3.5rem;
    padding-bottom:3.5rem;
    border-bottom:1px solid var(--color-main-dark);
}
    .retailer-buttons a.btn-default {
        width:calc(50% - .5rem);
    }

@media only screen and (min-width:992px) {
    .retailer-buttons a.btn-default {
        width:calc(100% / 3 - .667rem);
    }
}

@media only screen and (min-width:1200px) {
    .campaign-wtb .fw-inner {
        padding: 3rem 13rem;
        margin: 0 auto;
    }
}

/* 7.0 - Icons with Copy */
.icon-copy h2 {
    text-align:center;
}
.icon-copy__icons {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:3rem 2rem;
}
    .icon-copy__cont {
        display:flex;
        width:calc(50% - 1rem);
        flex-direction:column;
        align-items:center;
        font-size:1.8rem;
        line-height:2.4rem;
        color:var(--color-highlights);
        text-align:center;
    }
        .icon-copy__icon {
            min-height:7.5rem;
            margin-bottom:2.5rem;
        }
            .icon-copy__cont img {
                width:6.5rem;
            }

@media only screen and (min-width:992px) {
    .icon-copy__icons {
        gap:6rem;
    }
        .icon-copy__cont {
            display:flex;
            width:calc(25% - 4.5rem);
            flex-direction:column;
            align-items:center;
            font-size:1.8rem;
            line-height:2.4rem;
            color:var(--color-highlights);
            text-align:center;
        }
}

/* 8.0 - Social/E-mail */
.campaign-social {
    padding-top:0;
}
    .campaign-social h2 {
        text-transform:none;
        margin-bottom:0;
    }
    .campaign-social p {
        color:var(--color-highlights);
        margin:2rem 0;
    }
    .campaign-social .fw-inner {
        display:flex;
        flex-direction:column;
    }
        .campaign-social .fw-inner a.btn-default {
            min-width:18rem;
            align-self: center;
        }

.campaign-social .sm-cta-links {
    text-align:center;
}
    .campaign-social .sm-cta-links h4 {
        margin:6rem 0 1.5rem;
    }
    .campaign-social .sm-cta-links {
        text-align:center;
    }
    .campaign-social .sm-cta-links a.btn-social {
        background-color: var(--color-highlights);
        border: 2px solid var(--color-highlights);
    }
        .campaign-social .sm-cta-links path,
        .campaign-social .sm-cta-links circle {
            fill:#fff;
        }
        .campaign-social .sm-cta-links a.btn-social:hover {
            background-color: #FFF;
        }
        .campaign-social .sm-cta-links a.btn-social:hover path,
        .campaign-social .sm-cta-links a.btn-social:hover circle {
            fill: var(--color-highlights);
        }