:root {
    --color-blue: #255be3;
    --color-blue-dark: #0f1632;
    --color-blue-light: #e8eef9;
    --color-dark: #000000;
    --color-grey-light: #eeeeee;
    --color-orange: #ed5e2a;
}

button {
    background-color: transparent;
    padding: 0;
    border: 0;
    color: var(--color-blue);
}

.btn {
    padding: .7rem 2.5rem;
    color: #fff;
}

.btn-primary {
    background-color: var(--color-blue) !important;
    border: none;
}

.bg-blue {
    background-color: var(--color-blue);
}

.bg-blue-dark {
    background-color: var(--color-blue-dark);
}

.bg-blue-lighht {
    background-color: var(--color-blue-light);
}

.bg-dark {
    background-color: var(--color-dark);
}

.bg-grey {
    background-color: var(--color-grey-light);
}

.bg-orange {
    background-color: var(--color-orange);
}

.text-blue {
    color: var(--color-blue) !important;
}

.text-blue-dark {
    color: var(--color-blue-dark) !important;
}

.text-blue-lighht {
    color: var(--color-blue-light) !important;
}

.text-dark {
    color: var(--color-dark) !important;
}
 

.text-orange {
    color: var(--color-orange) !important;
}


#banner {
    height: 200vw;
    padding-top: 3rem;
    font-size: 1.2rem;
    background-size: contain;
    background-position: bottom center;
    background-repeat: no-repeat;
    position: relative;
    margin-bottom: calc(12vw + 3rem);
}

    #banner h1 {
        font-size: 1.8rem;
    }

    #banner .cardface {
        width: 80vw;
        height: 24vw;
        position: absolute;
        left: 10vw;
        bottom: -12vw;
    }

.landing #banner {
    background-color: #000;
    background-image: url('../img/bg-banner-landing-m.jpg');
}

.business-card #banner {
    background-color: #000;
    background-image: url('../img/bg-banner-business-card-m.jpg');
}

.corporate-card #banner {
    background-color: #000;
    background-image: url('../img/bg-banner-citi-corporate-card-m.jpg');
}

.purchasing-card #banner {
    background-color: #000;
    background-image: url('../img/bg-banner-purchasing-card-m.jpg');
}

.travel-account #banner {
    background-color: #000;
    background-image: url('../img/bg-banner-travel-account-m.jpg');
}

ul.tick {
    list-style: none;
    padding-left: 0;
}

    ul.tick li {
        padding-left: 1.5rem;
        position: relative;
    }

        ul.tick li::before {
            content: '\2714';
            display: block;
            top: 0;
            left: 0;
            position: absolute;
            color: var(--color-blue);
        }

#preferred-travel-partner {
    background-image: url('../img/bg-preferred-travel-partners.jpg');
    background-size: cover;
    background-position: top center;
}

.tabsection .nav-item {
    width: 100%;
}

.tabsection .nav-tabs .nav-link {
    background-color: var(--color-grey-light);
    border: none;
    border-radius: 0;
    position: relative;
    color: var(--color-dark);
    position: relative;
    border-bottom: solid 1px rgba(0,0,0,.1);
}

    .tabsection .nav-tabs .nav-link.active {
        background-color: #fff;
        color: var(--color-blue);
        width: calc(100% + 2px);
        margin-left: -1px;
    }

        .tabsection .nav-tabs .nav-link.active:after {
            position: absolute;
            top: calc(100% - 3px);
            left: 0;
            height: 3px;
            content: '';
            display: block;
            background-color: var(--color-blue);
            width: 100%;
            display: block !important;
        }

.table-wrap {
    overflow-x: auto;
}

    .table-wrap table {
        min-width: 900px;
        border-radius: 1rem;
        overflow: hidden;
    }

        .table-wrap table td {
            padding: 1rem;
            text-align: center;
        }

        .table-wrap table .bg-blue td {
            border-right: solid 1px #fff;
            border-bottom: solid 1px #fff;
        }

            .table-wrap table .bg-blue td:last-of-type {
                border-right: none
            }

        .table-wrap table td:first-of-type {
            text-align: left;
        }

        .table-wrap table td:last-of-type {
            padding-right: 1rem;
        }

button.heading {
    color: var(--color-dark);
    font-size: 1.2rem;
    font-weight: bold;
    padding-left: 2rem;
    position: relative;
    text-align: left;
}

    button.heading:before {
        content: '\2572\2571';
        position: absolute;
        left: 0;
        top: .6rem;
        font-size: .4rem;
        color: var(--color-blue);
    }

    button.heading[aria-expanded="true"]:before {
        content: '\2571\2572';
    }


.scrollwindow {
    width: 100%;
    overflow-x: scroll;
    display: block;
    padding-bottom: 1rem;
}

.carousel .scrollcontent {
    width: 1315px;
    display: block;
}

.scrollcontent {
    width: 150vw;
    display: block;
}

.cmb-indicator {
    width: 216px;
    height: 74px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

    .cmb-indicator.active {
        font-weight: bold;
        color: #000 !important;
    }

#ctac-works .bg-blue-dark {
    position: relative;
    margin: 40px 0 ;
    border-radius: 1rem;
    padding: 1rem ;
    min-height: 5rem;
}

    #ctac-works .bg-blue-dark:after {
        content: '\2572\2571';
        display: block;
        width: 100%;
        font-size: 20px;
        line-height: 20px;
        text-align: center;
        position: absolute;
        left: 0;
        bottom: -45px;
    }#ctac-works .bg-blue-dark:last-of-type:after{ 
        display:none
    }

    #ctac-works .bg-blue-dark .clipart { 
        width: 145px;
        display:block;
        margin:-40px auto 0;
    }
.cvp-mobile {
}
.cvp-desktop{
    display:none;
}
    .btn-showmore{
        padding:1rem; 
        color:var(--color-dark);
    }
        .btn-showmore:after {
            content: 'Show more';
        }
        .btn-showmore[aria-expanded="true"]:after {
            content: 'Hide';
        }
        @media (min-width: 576px) {
            #banner {
        height: 150vw;
    }

    .scrollwindow {
        width: calc(540px - 30px);
    }

    .scrollcontent {
        width: 700px;
        display: block;
    }
    #ctac-works .bg-blue-dark { 
        padding: 1rem 1rem 1rem 240px; 
    }
     

        #ctac-works .bg-blue-dark .clipart {
            position: absolute;
            left: 33px;
            bottom: 0; 
            margin:0;
        }
}

@media (min-width:768px) {

    #banner {
        height: 50vw;
        background-position: right center;
        background-size: cover;
        font-size: 1.37rem;
        margin-bottom: calc(4.5vw + 3rem);
    }

        #banner h1 {
            font-size: 2.375rem;
        }

        #banner .cardface {
            width: 30vw;
            height: 9vw;
            position: absolute;
            left: 35vw;
            bottom: -4.5vw;
        }

    .landing #banner {
        background-color: #000;
        background-image: url('../img/bg-banner-landing.jpg');
    }

    .business-card #banner {
        background-color: #000;
        background-image: url('../img/bg-banner-business-card.jpg');
    }

    .corporate-card #banner {
        background-color: #000;
        background-image: url('../img/bg-banner-citi-corporate-card.jpg');
    }

    .purchasing-card #banner {
        background-color: #000;
        background-image: url('../img/bg-banner-purchasing-card.jpg');
    }

    .travel-account #banner {
        background-color: #000;
        background-image: url('../img/bg-banner-travel-account.jpg');
    }

   .landing .tabsection .nav-item {
        width: 50%;
    }

    .tabsection .nav-item {
        width: 33.333%;
    }
    .landing .tabsection .nav-item {
        width: 50%;
    }

    .tabsection .nav-tabs .nav-link {
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .tabsection .nav-tabs .nav-link.active {
            box-shadow: 0 0 3px rgba(0,0,0,0.4);
        }

        .tabsection .nav-tabs .nav-link:after {
            content: '';
            position: absolute;
            top: .75rem;
            bottom: .75rem;
            right: 0;
            width: 1px;
            background-color: var(--color-grey-dark)
        }

    .tabsection .nav-tabs .nav-item:last-of-type .nav-link:after {
        display: none;
    }

    .screen {
        overflow: hidden
    }

    .scrollwindow {
        width: unset;
        overflow: unset;
    }

    .carousel .scrollcontent,
    .scrollcontent {
        width: unset;
    }

    .scroll-tab {
        width: 33.33% !important;
    }
    .cvp-mobile {
        display: none !important;
    }

    .cvp-desktop {
        display: flex;
    }

}

@media (min-width:1162px) {
  
.banner-br{ display: none; }
 
}

@media (min-width:992px) {
  
    #banner {
        height: 42vw;
        background-position: right center;
        background-size: cover;
        font-size: 1.37rem;
    }
}

@media (min-width:1200px ) {
    #banner {
        max-height: 500px;
    }

        #banner .cardface {
            width: 600px;
            height: 182px;
            position: absolute;
            left: calc(50% - 300px);
            bottom: -90px;
        }
}

@media (min-width: 1500px) {

    #banner {
        padding-top: 4rem;
    }
}

@media screen and (min-width: 1920px) {
}