:root {
    --color-grey-light: #EEEEEE;
    --color-grey-mid: #CCCCCC;
    --color-grey-dark: #666666;
    --color-blue-dark: #002A54;
    --color-blue-darker: #056DAE;
    --color-blue-mid: #008FC9;
    --color-blue-lighter: #25A6DA;
    --color-blue-light: #46B7E6;
    --color-blue-bright: #255BE3;
    --color-orange: #FF5C0B;
    --color-yellow: #E5A824;
    --color-green: #007377;
    --color-maroon: #871A4E;
}

body {
    color: #000000;
}

h2, h3, h4, h5, h6 {
    margin-bottom: .5rem;
    font-weight: bold;
}

a,
a:hover,
a:focus,
a:visited {
    color: var(--color-blue-mid);
}

button {
    background-color: transparent;
    border: none;
}

.btn {
    border-radius: 4px;
    padding: .5rem 1.5rem;
    color: #fff;
    color: #fff;
}

a.btn,
a.btn:hover,
a.btn:focus,
a.btn:visited {
    color: #fff;
}

a.bg-white.btn,
a.bg-white.btn:hover,
a.bg-white.btn:focus,
a.bg-white.btn:visited {
    color: var(--color-blue-mid);
}

.btn:focus,
.btn:hover {
    color: #fff;
}

.btn.bg-grey-light:focus,
.btn.bg-grey-light:hover,
.bg-grey-light {
    background-color: var(--color-grey-light);
}

.btn.bg-grey-mid:focus,
.btn.bg-grey-mid:hover,
.bg-grey-mid {
    background-color: var(--color-grey-mid);
}

.btn.bg-grey-dark:focus,
.btn.bg-grey-dark:hover,
.bg-grey-dark {
    background-color: var(--color-grey-dark);
}

.btn.bg-blue-dark:focus,
.btn.bg-blue-dark:hover,
.bg-blue-dark {
    background-color: var(--color-blue-dark);
}

.btn.bg-blue-darker:focus,
.btn.bg-blue-darker:hover,
.bg-blue-darker {
    background-color: var(--color-blue-darker);
}

.btn.bg-blue-mid:focus,
.btn.bg-blue-mid:hover,
.bg-blue-mid {
    background-color: var(--color-blue-mid);
}

.btn.bg-blue-lighter:focus,
.btn.bg-blue-lighter:hover,
.bg-blue-lighter {
    background-color: var(--color-blue-lighter);
}

.btn.bg-blue-light:focus,
.btn.bg-blue-light:hover,
.bg-blue-light {
    background-color: var(--color-blue-light);
}

.brand,
.btn.bg-blue-bright:focus,
.btn.bg-blue-bright:hover,
.bg-blue-bright {
    background-color: var(--color-blue-bright);
    color: #fff;
}

.btn.bg-orange:focus,
.btn.bg-orange:hover,
.bg-orange {
    background-color: var(--color-orange);
}

.btn.bg-yellow:focus,
.btn.bg-yellow:hover,
.bg-yellow {
    background-color: var(--color-yellow);
}

.btn.bg-green:focus,
.btn.bg-green:hover,
.bg-green {
    background-color: var(--color-green);
}

.btn.bg-maroon:focus,
.btn.bg-maroon:hover,
.bg-maroon {
    background-color: var(--color-maroon);
}

.brand {
    background-image: none;
}

.text-larger {
    font-size: 1.2rem !important;
}

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

.text-grey-mid {
    color: var(--color-grey-mid);
}

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

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

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

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

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

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

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

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

.text-yellow {
    color: var(--color-yellow );
}

.text-green {
    color: var(--color-green );
}

.text-maroon {
    color: var(--color-maroon);
}

.underline {
    padding-bottom: 1.5rem;
    position: relative;
}

    .underline:after {
        content: '';
        width: 100px;
        border-bottom: solid 2px;
        position: absolute;
        bottom: 0;
        left: calc(50% - 50px);
    }

#banner {
    height: 82.89vw;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('../img/banner-mobilepx.jpg');
}

#cardstack {
    width: 284px;
}

.cardfilter {
    padding: .5rem 0;
    text-align: center;
    background: #fff;
}

    .cardfilter.selected {
        background: var(--color-blue-bright);
    }

    .cardfilter button {
        width: 100%;
        padding: .5rem 0;
        border: solid 1px var(--color-grey-light);
        border-top: none;
        border-bottom: none;
        color: var(--color-blue-bright);
        background: #fff;
        font-size: .8rem;
    }

    .cardfilter.selected button {
        background: var(--color-blue-bright);
        color: #fff;
    }

.cardcolumn {
    margin: 4rem 0 1rem 0;
    font-size: 12px;
}

    .cardcolumn h5 {
        font-size: 14px;
        font-family: 'citi-sans-display', sans-serif;
        font-weight: bold;
    }

    .cardcolumn .content {
        background-color: #fff;
        height: 100%;
        border-radius: 0.5rem;
        padding: 0 0 4rem 0;
        position: relative;
        box-shadow: 0 0 .5rem #999;
    }

    .cardcolumn .cardface {
        margin-top: -40px;
        width: 155px;
    }

    .cardcolumn .strapline {
        border-radius: 0 0.3rem 0.3rem 0;
        padding: 0.25rem 15px;
        width: 100%;
        max-width: 152px;
        font-size: 9px;
    }

    .cardcolumn .cardcolumnfooter {
        position: absolute;
        bottom: 1rem;
        left: 15px;
        width: calc(100% - 30px);
    }

    .cardcolumn .btn {
        width: 100%;
        max-width: 154px;
        display: block;
        font-size: 12px;
    }

    .cardcolumn ul {
        list-style: circle;
        padding-left: 1rem;
    }

#countdown .text-larger {
    font-size: 2rem !important;
    line-height: 2rem;
    padding-top: 1rem;
}

#loveforadventure {
    height: 125vw;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url('../img/loveforadventure-blue-m.png')
}

#enrollcarouselstepsm {
    margin-top: 2rem;
    padding-left: 1rem;
}

    #enrollcarouselstepsm li {
        background-color: var(--color-grey-light);
        color: var(--color-grey-dark);
        display: block;
        padding: 0.5rem 1rem;
        margin: 1rem 0;
        border-radius: 0.5rem;
        position: relative;
    }

        #enrollcarouselstepsm li span {
            display: inline-block;
            padding: .25rem .5rem;
            border-radius: 2rem;
            background-color: var(--color-grey-mid);
            color: #fff;
            line-height: 1rem;
            margin-right: .5rem;
        }

        #enrollcarouselstepsm li:before {
            position: absolute;
            top: 1rem;
            width: 15px;
            height: 15px;
            border-radius: 8px;
            content: '';
            display: block;
            left: -2rem;
            background-color: var(--color-grey-light);
            z-index: 1;
        }

        #enrollcarouselstepsm li:after {
            position: absolute;
            top: 1.25rem;
            width: 1px;
            height: 150%;
            border-radius: 8px;
            content: '';
            display: block;
            left: -1.6rem;
            background-color: var(--color-grey-light);
        }

        #enrollcarouselstepsm li:last-of-type:after {
            display: none;
        }

        #enrollcarouselstepsm li.selected {
            color: var(--color-blue-darker);
        }

            #enrollcarouselstepsm li.selected span,
            #enrollcarouselstepsm li.selected:before,
            #enrollcarouselstepsm li.selected:after {
                background-color: var(--color-blue-darker);
            }

.video_player {
    margin: 0 auto;
    display: block;
    width: 90vw;
    height: 50vw;
}

.window {
    width: 100%;
    overflow-x: hidden;
}

    .window .rail {
        width: 200%;
    }

.window-content {
    width: 50%;
    display: block;
    float: left;
}

.showmore:before {
    content: 'Show More';
    font-weight: bold;
}

.showmore[aria-expanded="true"]:before {
    content: 'Show Less'
}

.modal-header {
    position: relative;
    border-bottom: none;
}

    .modal-header .close {
        position: absolute;
        position: absolute;
        top: -1rem;
        right: -1rem;
    }

@media (min-width: 576px) {
    .video_player {
        width: 510px;
        height: 286px
    }
}
/**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px){
#loveforadventure{
padding-top: 1vw !important;
background-image: url('../img/bg-loveforadventure-ipad.png') !important;
background-position: center !important;
}
}
/**********/

@media (min-width: 768px) {
    #banner {
        height: 34.86vw;
        max-height: 502px;
        background-image: url('../img/banner-desktop.jpg');
    }

    #cardstack {
        width: 63%;
    }

    .cardcolumn {
        margin-top: 90px;
    }

        .cardcolumn h5 {
            font-size: 18px;
        }

        .cardcolumn .content {
            font-size: 16px;
        }

        .cardcolumn .cardface {
            width: 235px;
            margin-top: -70px;
        }

        .cardcolumn .strapline {
            max-width: 199px;
            font-size: 14px;
        }


        .cardcolumn .btn {
            font-size: 16px;
            width: 183px;
        }

    .cardfilter button {
        font-size: 1rem;
    }

    #loveforadventure {
        height: 31.52vw;
        background-image: url(../img/blue-bg-loveforadventure-desk.png);
        max-height: 544px;
        padding-top: 6vw;
        background-position:top center;
    }

    #enrollcarouselstepsd {
        position: relative;
        display: block;
        list-style: none;
        padding: 6rem 0 0 0;
        width: 80%;
    }

        #enrollcarouselstepsd li span {
            display: none;
            font-size: 1.5rem;
        }

        #enrollcarouselstepsd li.selected {
        }

        #enrollcarouselstepsd li:before {
            position: absolute;
            top: 1.5rem;
            font-size: 1rem;
            line-height: 1rem;
            padding: 0.5rem 0.7rem;
            border-radius: 2rem;
            display: block;
            background-color: #fff;
            z-index: 1;
            color: var(--color-blue-darker);
        }

        #enrollcarouselstepsd li:after {
            content: '' !important;
            width: 20%;
            height: 1px;
            position: absolute;
            top: 2.5rem;
            background: #fff;
        }

        #enrollcarouselstepsd li.selected:before,
        #enrollcarouselstepsd li.selected:after {
            background: var(--color-blue-darker);
            color: #fff;
        }

        #enrollcarouselstepsd li:nth-of-type(1):after {
            left: 0;
        }

        #enrollcarouselstepsd li:nth-of-type(2):after,
        #enrollcarouselstepsd li:nth-of-type(1):before {
            left: 20%;
            content: '1';
        }

        #enrollcarouselstepsd li:nth-of-type(3):after,
        #enrollcarouselstepsd li:nth-of-type(2):before {
            left: 40%;
            content: '2';
        }

        #enrollcarouselstepsd li:nth-of-type(4):after,
        #enrollcarouselstepsd li:nth-of-type(3):before {
            left: 60%;
            content: '3';
        }

        #enrollcarouselstepsd li:nth-of-type(5):after,
        #enrollcarouselstepsd li:nth-of-type(4):before {
            left: 80%;
            content: '4';
        }

        #enrollcarouselstepsd li:nth-of-type(5):before {
            left: 100%;
            content: '5';
        }

    .video_player {
        width: 690px;
        height: 388px
    }
}

@media (min-width: 992px) {
    .video_player {
        width: 910px;
        height: 511px
    }
}

@media (min-width: 1200px) {
    .video_player {
        width: 1100px;
        height: 720px
    }
}

@media (min-width: 1500px) {
    .video_player {
        width: 1280px;
        height: 720px
    }

    .modal-lg, .modal-xl {
        max-width: 1200px;
    }
}
@media only screen and (min-device-width : 768px) and
(max-device-width : 1024px) and (orientation : portrait) {
  
  #banner {
    height: 100vh !important;
    max-height: 502px;
    background-image: url(../img/banner-tablet.jpg);
}
}