﻿@import url('https://fonts.googleapis.com/css?family=Montserrat:ital,wght@0,100,200,300,400,500,600,700,800,900;1,100,200,300,400,500,600,700,800,900&display=swap');

#pnlAffinity20Modal {
    padding-right: 0 !important;
}

    #pnlAffinity20Modal .modal-dialog {
        max-width: 92vw;
        margin: 0.5rem auto;
    }

    #pnlAffinity20Modal .modal-content {
        background: none;
        background-image: url('/Images/Affinity/Incentives/Affinity20/UK/Affinity20 Popup Background Phone.webp');
        background-repeat: no-repeat;
        background-position: left top;
        background-size: 100% auto;
        min-height: calc(92vw * (595 / 576));
        border: 0;
    }

    #pnlAffinity20Modal .modal-dialog.affinity-roi .modal-content {
        background-image: url('/Images/Affinity/Incentives/Affinity20/ROI/Promo Popup Background.webp');
        min-height: calc(92vw * (749 / 900));
    }

    #pnlAffinity20Modal .modal-content .modal-header,
    #pnlAffinity20Modal .modal-content .modal-body,
    #pnlAffinity20Modal .modal-content .modal-footer {
        position: relative;
        padding-left: 4.1%;
        padding-right: 4.1%;
    }

        #pnlAffinity20Modal .modal-content .modal-header .container,
        #pnlAffinity20Modal .modal-content .modal-body .container,
        #pnlAffinity20Modal .modal-content .modal-footer .container {
            padding-left: 0;
            padding-right: 0;
        }

    #pnlAffinity20Modal .modal-content .modal-header {
        padding-top: 2.778vw;
        padding-bottom: 2.778vw;
    }

        #pnlAffinity20Modal .modal-content .modal-header h2 {
            color: #fff;
            font-size: 2.03vw;
            margin-bottom: 0;
        }

        #pnlAffinity20Modal .modal-content .modal-header button.close {
            position: absolute;
            top: 0;
            right: 0;
            padding: 0 0.30rem 0 0.33rem;
            margin: 0;
            background-color: #fff;
            opacity: 60%;
        }

    #pnlAffinity20Modal .modal-content .modal-body {
        padding-top: 0;
        padding-bottom: 0;
        display: flex;
    }

    #pnlAffinity20Modal .modal-dialog.affinity-roi .modal-content .modal-body {
        flex-grow: 0;
    }

    #pnlAffinity20Modal .modal-content .modal-body .container {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: space-between;
    }

    #pnlAffinity20Modal .modal-dialog:not(.affinity-roi) .modal-content .modal-body > .container > .row:first-child {
        margin-bottom: auto;
    }

    #pnlAffinity20Modal .modal-dialog:not(.affinity-roi) .modal-body .hero-block {
        display: flex;
        flex-direction: row;
    }

    #pnlAffinity20Modal .modal-body .hero-block div {
        color: #fff;
        line-height: 2.75vw;
        font-size: 2.85vw;
    }

        #pnlAffinity20Modal .modal-body .hero-block div:first-child {
            font-size: 10.4vw;
            line-height: 8.5vw;
        }

    #pnlAffinity20Modal .modal-dialog.affinity-roi .hero-mc-logo {
        width: calc(92vw * (143/900));
        margin-top: 9%;
    }

    #pnlAffinity20Modal .modal-dialog.affinity-roi .hero-words {
        color: #fff;
    }

        #pnlAffinity20Modal .modal-dialog.affinity-roi .hero-words img {
            max-width: 100%;
        }

    #pnlAffinity20Modal .modal-body .affinity20-logo {
        text-align: right;
    }

        #pnlAffinity20Modal .modal-body .affinity20-logo img {
            max-width: calc(92vw * 0.1473);
        }

    #pnlAffinity20Modal .modal-body .button-panel > .col-sm-12 {
        text-align: right;
    }

        #pnlAffinity20Modal .modal-body .button-panel > .col-sm-12 a > img {
            max-width: calc(92vw * 0.25894);
        }

    #pnlAffinity20Modal .modal-body .dark-panel {
        margin-left: 0.868vw;
        margin-right: 0.868vw;
        padding-top: 3.472vw;
        padding-bottom: 3.472vw;
    }

        #pnlAffinity20Modal .modal-body .dark-panel .dark-panel-lg {
            display: none;
        }

        #pnlAffinity20Modal .modal-body .dark-panel > div {
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            height: calc((92vw * 0.37751) - 6.944vw);
            padding-left: 2.604vw;
            padding-right: 2.604vw;
        }

        #pnlAffinity20Modal .modal-body .dark-panel p,
        #pnlAffinity20Modal .modal-body .details-block p {
            color: #fff;
            font-size: 2.75vw;
            line-height: 3.3vw;
        }

    #pnlAffinity20Modal .modal-body .details-block p {
        font-size: 2.15vw;
        line-height: 2.9vw;
        margin-bottom: 1.2vw !important;
    }

    #pnlAffinity20Modal .modal-body .details-block {
        margin-top: 4.2vw;
    }

    #pnlAffinity20Modal .modal-body .dark-panel > .col-sm-12 > div:not(:last-child) {
        padding-bottom: 2.5vw;
    }

    #pnlAffinity20Modal .modal-body .dark-panel .row:last-child .col-sm-12 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

        #pnlAffinity20Modal .modal-body .dark-panel .row:last-child .col-sm-12 div {
            display: inline;
            flex: 0 0 auto;
        }

            #pnlAffinity20Modal .modal-body .dark-panel .row:last-child .col-sm-12 div p,
            #pnlAffinity20Modal .modal-body .details-block .row:last-child .col-sm-12 div p {
                font-size: 2.27vw;
                line-height: 2.34vw;
                margin-bottom: 2.7vw;
            }

    #pnlAffinity20Modal .modal-body .details-block .row:last-child .col-sm-12 div p {
        font-size: 1.5vw;
        line-height: 2.1vw;
        margin-bottom: 0 !important;
    }

    #pnlAffinity20Modal .modal-dialog.affinity-roi .modal-body .details-block .row:last-child .col-sm-12 div p {
        font-size: 1.5vw;
        line-height: 2.1vw;
        margin-bottom: 0 !important;
    }

    #pnlAffinity20Modal .modal-body .dark-panel .row:last-child .col-sm-12 div.mc-logo,
    #pnlAffinity20Modal .modal-body .details-block .row:last-child .col-sm-12 div.mc-logo {
        flex-basis: calc(92vw * 0.1683);
        margin-right: 2.604vw;
    }

    #pnlAffinity20Modal .modal-body .details-block .row:last-child .col-sm-12 div.mc-logo {
        flex-basis: calc(92vw * (87/900));
    }

        #pnlAffinity20Modal .modal-body .dark-panel .row:last-child .col-sm-12 div.mc-logo img,
        #pnlAffinity20Modal .modal-body .details-block .row:last-child .col-sm-12 div.mc-logo img {
            max-width: 100%;
        }

    #pnlAffinity20Modal .modal-body .dark-panel .row:last-child .col-sm-12 div:not(.mc-logo) {
        flex-basis: calc(((92vw * 0.91805) - 6.944vw - 2vw) - ((92vw * 0.1683) + 2.604vw));
        flex-grow: 0;
        flex-shrink: 1;
    }

    #pnlAffinity20Modal .modal-dialog.affinity-roi .details-block .details-button img {
        max-width: calc(92vw * (271 / 900));
    }

    #pnlAffinity20Modal .modal-body .details-block .col-sm-6:last-child > .row:first-child {
        margin-bottom: 2vw;
    }

    #pnlAffinity20Modal .modal-footer {
        margin: 0;
        padding-top: 2.083vw;
        padding-bottom: 2.083vw;
    }

        #pnlAffinity20Modal .modal-footer .container {
            margin: 0;
        }

        #pnlAffinity20Modal .modal-footer p {
            margin-bottom: 0;
            color: #fff;
            font-size: 2.1vw;
            line-height: 3.4vw;
        }

    #pnlAffinity20Modal .modal-dialog.affinity-roi .modal-footer p {
        text-align: right;
        font-size: 1.5vw;
        line-height: 2vw;
    }

.affinity-20-promo-page {
    font-size: 0.8rem;
}

    .affinity-20-promo-page .col-md-6 {
        margin-top: 20px;
    }

    .affinity-20-promo-page h2 {
        font-size: 1.34em;
        text-align: center;
    }

    .affinity-20-promo-page h3 {
        font-size: 1.27em;
    }

    .affinity-20-promo-page .van-image,
    .affinity-20-promo-page .mc-logo {
        max-width: calc(100% * (94 / 385));
        margin: 0 1rem 1rem 0;
    }

@media only screen and (min-width: 577px) {
    #pnlAffinity20Modal .modal-dialog:not(.affinity-roi) .modal-content {
        background-image: url('/Images/Affinity/Incentives/Affinity20/UK/Affinity20 Popup Background Tablet.webp');
    }

    #pnlAffinity20Modal .modal-header > .container,
    #pnlAffinity20Modal .modal-body > .container,
    #pnlAffinity20Modal .modal-footer > .container {
        max-width: 100%;
    }
}

@media only screen and (min-width: 707px) {
    #pnlAffinity20Modal .modal-body .dark-panel .dark-panel-sm {
        display: none;
    }

    #pnlAffinity20Modal .modal-body .dark-panel .dark-panel-lg {
        display: flex;
    }

    #pnlAffinity20Modal .modal-dialog {
        max-width: 650px;
    }

        #pnlAffinity20Modal .modal-dialog:not(.affinity-roi) .modal-content {
            min-height: calc(650px * (749 / 900));
        }

        #pnlAffinity20Modal .modal-dialog:not(.affinity-roi) .modal-content {
            background-image: url('/Images/Affinity/Incentives/Affinity20/UK/Affinity20 Popup Background Desktop.webp');
        }

    #pnlAffinity20Modal .modal-body > .container > .row {
        width: calc(100% + 30px);
    }

    #pnlAffinity20Modal .modal-content .modal-header,
    #pnlAffinity20Modal .modal-content .modal-body,
    #pnlAffinity20Modal .modal-content .modal-footer {
        padding-left: 3.0%;
        padding-right: 2.7%;
    }

    #pnlAffinity20Modal .modal-dialog.affinity-roi .modal-content .modal-header,
    #pnlAffinity20Modal .modal-dialog.affinity-roi .modal-content .modal-body,
    #pnlAffinity20Modal .modal-dialog.affinity-roi .modal-content .modal-footer {
        padding-left: 15px;
        padding-right: 15px;
    }

    #pnlAffinity20Modal .modal-dialog.affinity-roi .modal-content .modal-body,
    #pnlAffinity20Modal .modal-dialog.affinity-roi .modal-content .modal-footer {
        padding-left: 25px;
        padding-right: 25px;
    }

    #pnlAffinity20Modal .modal-content .modal-header {
        padding-top: 20px;
        padding-bottom: 20px;
    }

        #pnlAffinity20Modal .modal-content .modal-header h2 {
            font-size: 14.35px;
        }

    #pnlAffinity20Modal .modal-dialog.affinity-roi .hero-mc-logo {
        width: calc(650px * (143/900));
    }

    #pnlAffinity20Modal .modal-content .modal-footer {
        padding-top: 14.7px;
        padding-bottom: 14.7px;
    }

        #pnlAffinity20Modal .modal-content .modal-footer p {
            font-size: 0.7rem;
            line-height: 0.7rem;
        }

    #pnlAffinity20Modal .modal-body .hero-block div {
        font-size: 20.1495px;
        line-height: 19.4425px;
    }

        #pnlAffinity20Modal .modal-body .hero-block div:first-child {
            font-size: 73.528px;
            line-height: 60.095px;
        }

    #pnlAffinity20Modal .modal-body .affinity20-logo img {
        max-width: 85.8098px;
    }

    #pnlAffinity20Modal .modal-body .button-panel > .col-sm-12 a > img {
        max-width: 151.425px;
    }

    #pnlAffinity20Modal .modal-body > .container > .row.dark-panel {
        width: calc(650px - 6%);
        margin: 0;
        padding-top: 18px;
        padding-bottom: 18px;
        margin-top: 15px;
    }

    #pnlAffinity20Modal .modal-body .dark-panel > div {
        height: calc(650px * 0.139);
        padding-left: 15px;
        padding-right: 15px;
    }

    #pnlAffinity20Modal .modal-body .details-block {
        margin-top: 30px;
    }

    #pnlAffinity20Modal .modal-dialog.affinity-roi .details-block .details-button img {
        max-width: calc(650px * (271 / 900));
    }

    #pnlAffinity20Modal .modal-body .dark-panel p,
    #pnlAffinity20Modal .modal-body .details-block p {
        font-size: 16.3px;
        line-height: 20px;
    }

    #pnlAffinity20Modal .modal-body .dark-panel-lg .col-sm-6:last-child p,
    #pnlAffinity20Modal .modal-body .details-block .col-sm-6:last-child p {
        font-size: 13.0px;
        line-height: 15px;
    }

    #pnlAffinity20Modal .modal-body .details-block .col-sm-6:last-child p {
        margin: 0;
    }

    #pnlAffinity20Modal .modal-body .dark-panel-lg .col-sm-6:last-child > .row:first-child,
    #pnlAffinity20Modal .modal-body .details-block .col-sm-6:last-child > .row:first-child {
        margin-bottom: 25px;
    }

    #pnlAffinity20Modal .modal-body .dark-panel-lg .col-sm-6:last-child > .row:last-child > .col-sm-12 div.mc-logo,
    #pnlAffinity20Modal .modal-body .details-block .col-sm-6:last-child > .row:last-child > .col-sm-12 div.mc-logo {
        flex-basis: 25%;
        margin-right: 15px;
    }

    #pnlAffinity20Modal .modal-body .dark-panel-lg .col-sm-6:last-child > .row:last-child > .col-sm-12 div:not(.mc-logo) {
        flex-basis: calc(75% - 15px);
    }

        #pnlAffinity20Modal .modal-body .dark-panel-lg .col-sm-6:last-child > .row:last-child > .col-sm-12 div:not(.mc-logo) p {
            font-size: 0.64rem;
            line-height: 0.93rem;
            margin-bottom: 0;
        }

    #pnlAffinity20Modal .modal-dialog.affinity-roi .modal-body .details-block .row:last-child .col-sm-12 div p {
        font-size: 0.8vw;
        line-height: 1.2vw;
        margin-bottom: 0 !important;
    }

    #pnlAffinity20Modal .modal-dialog.affinity-roi .modal-footer p {
        text-align: right;
        font-size: 0.9vw;
        line-height: 2vw;
    }

    #pnlAffinity20Modal .modal-dialog.affinity-roi .modal-footer p {
        text-align: right;
        font-size: 0.9vw;
        line-height: 2vw;
    }
}

@media only screen and (min-width: 769px) {
    .gutters {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media only screen and (min-width: 992px) {
}

.sp-green {
    color: #95c11f !important;
}

.sp-upper {
    text-transform: uppercase;
}

/*.sp-mega {
    font-size: 0.1rem !important;
    line-height: 0.75em !important;
    font-weight: 900 !important;
    */ /*transform: scale(0.6, 1.0);*/ /*
    text-indent: 10000px;
    margin-left: -0.31em;
    margin-top: 1.5rem !important;
    background-image: url(/Images/Affinity/SynergyPinnacle/180.png);
    background-repeat: no-repeat;
    background-size: auto 100%;
}

    .sp-mega:before {
        display: inline-block;
        width: 1px;
        content: '';
        padding-top: 44.3%;
    }*/

.no-break {
    text-wrap: nowrap;
}

.montserrat-normal, .montserrat-bold, .montserrat-bolder, .montserrat-extrabold, .montserrat-black {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

    .montserrat-bold, .montserrat-normal b, .montserrat-normal strong {
        font-weight: 600;
    }

.montserrat-bolder {
    font-weight: 700;
}

.montserrat-extrabold {
    font-weight: 800;
}

.montserrat-black {
    font-weight: 900;
}

#pnlAffinity20Modal p:last-child,
.affinity-20-promo-page p:last-child {
    margin-bottom: 0 !important;
}
