﻿
:root {
    --color-grey-light: #EEEEEE;
    --color-grey-mid: #EBEBEB;
    --color-grey-dark: #333;
    --color-gold: #B4975A;
    --color-blue-dark: #163C6A;
    --color-red: #A2131E;
    --color-orange: #F18F24;
    --color-yellow-light: #FCEDD2;
    /*    --gradient-gold: linear-gradient(47deg, rgba(238,159,63,1) 0%, rgba(254,219,55,1) 33%, rgba(253,185,49,1) 71%, rgba(159,121,40,1) 100%);*/
    --gradient-gold: linear-gradient(90deg, rgba(163,132,96,1) 0%, rgba(240,204,134,1) 17%);
    --gradient-gold-reverse: linear-gradient(90deg, rgba(240,204,134,1) 0%, rgba(163,132,96,1)87%);
}

.bg-white {
    background-color: #fff;
}

.bg-red {
    background-color: var(--color-red);
}

.bg-gold {
    background-color: var(--color-gold);
}

.bg-blue-dark {
    background-color: var(--color-blue-dark)
}

.bg-grey {
    background-color: var(--color-grey-light);
}

.bg-yellow {
    background-color: var(--color-yellow-light);
}

.bg-orange {
    background-color: var(--color-orange);
}

.bg-xsell {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left center;
}

.text-gold {
    color: var(--color-gold)
}

.text-grey {
    color: var(--color-grey-dark)
}

.btn {
    padding-left: 2rem;
    padding-right: 2rem;
    font-weight: 600;
}

.gradient-gold-top,
.gradient-gold-bottom {
    position: relative;
}

    .gradient-gold-top::before,
    .gradient-gold-bottom::after {
        content: '';
        width: 100%;
        height: 6px;
        background: var(--gradient-gold);
        display: block;
        position: absolute;
    }

    .gradient-gold-top::before {
        background: var(--gradient-gold);
        top: 0;
        left: 0;
    }

    .gradient-gold-bottom::after {
        background: var(--gradient-gold-reverse);
        bottom: 0;
        left: 0;
    }

.underline-gold {
    position: relative;
    padding-bottom: 1rem;
}

    .underline-gold::after {
        content: '';
        position: absolute;
        bottom: 0;
        width: 120px;
        left: calc(50% - 60px);
        display: block;
        height: 2px;
        background-color: var(--color-gold);
    }

#tab-nav {
    background-color: var(--color-grey-mid);
}

.heading img {
    margin-top: -2rem;
}


.nav-item {
    position: relative;
    height: 4em;
    color: var(--color-grey-dark);
    width: 100%;
    text-center;
    border: none;
    display: flex;
}

    .nav-item .nav-link {
        align-self: center;
        align-items: center;
        display: flex;
        justify-content: center;
        min-width: 100%;
        color: var(--color-grey-dark)
    }

        .nav-item .nav-link.active {
            height: 4em;
            background-color: #fff;
            color: var(--color-gold);
            font-weight: bold;
            border-bottom: solid 3px var(--color-gold);
        }

    .nav-item::after {
        content: '';
        position: absolute;
        right: 0;
        top: 1em;
        height: 2em;
        width: 1px;
        border-right: solid 1px var(--color-grey-dark);
    }

    .nav-item:last-of-type::after {
        display: none;
    }

.carousel-indicators {
    margin: 0;
    bottom: 5rem;
    left: -15px;
    justify-content: start;
}

    .carousel-indicators li {
        width: 20%;
        position: relative;
        text-indent: unset;
        opacity: 1;
        background-color: #808080;
    }

        .carousel-indicators li.blue {
            background-color: var(--color-blue-dark);
        }

        .carousel-indicators li span {
            width: 2rem;
            height: 2rem;
            position: absolute;
            right: -.5rem;
            top: -1rem;
            border-radius: 1rem;
            background-color: var(--color-blue-dark);
            color: #fff;
            font-weight: bold;
            display: block;
            padding: 0.3rem;
            text-align: center;
            z-index: 1;
        }

.carousel-item p {
    height: 6rem;
}

#plt {
    margin-top: 3rem;
    border-bottom: solid 6px #46B7E6;
    position: relative;
}

    #plt img {
        margin-bottom: -1px;
    }

    #plt:after {
        position: absolute;
        right: 0;
        bottom: -6px;
        content: '';
        width: 8px;
        height: 8px;
        display: block;
        background-color: var(--color-blue-dark);
    }

#cny-promotions-tnc-more-toggle:after {
    content: "Show";
    font-weight: 700;
}

#cny-promotions-tnc-more-toggle[aria-expanded="true"]:after {
    content: "Hide";
}

.slick-slide {
    margin: 0 .5rem;
    padding: .5rem;
    border-radius: .25rem;
    background-color: rgba(255,255,255,.3);
} 
@media (min-width: 576px) {
    .nav-item {
        width: 50%;
    }

    .tab-nav-item::after {
        content: '';
        position: absolute;
        right: 0;
        top: 1em;
        height: 2em;
        width: 1px;
        border-right: solid 1px var(--color-grey-dark);
    }

    .tab-nav-item:nth-of-type(2n)::after,
    .tab-nav-item:last-of-type::after {
        display: none;
    }
}

@media (min-width: 768px) {
    .heading img {
        margin-top: -3rem;
    }
    
     .body-copy{
    padding:0 50px;
}
}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
    .nav-item {
        width: 25%;
    }

    .heading img {
        margin-top: -3rem;
    }

    .carousel-indicators {
        position: relative;
        bottom: unset;
    }

    .bg-xsell {
        height: 13.888888888vw;
    }
    .body-copy{
    padding:0 200px;
}
}

@media (min-width: 1500px) {
}
