/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/


/*font*/
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

/*variables*/
:root {
    --gray: #5C5D60;
    --white: #FFFFFF;
    --gold: #F6D298;
    --blue: #00A1AF;
    --bluegrad: #66C7CF;
    --lightblue: #4679BD;
    --lineblue: #D1EEF1;
    --black: #22262B;
    --darkgray: #5D5F60;
    --hoverblue: #007890;
    --sizexs: 0.75rem; /*12px*/
    --sizeinitial: 1rem; /*16px*/
    --sizesmall: 1.125rem; /*18px*/
    --sizecta: 1.25rem; /*20px*/
    --sizecontent: 1.5rem; /*24px*/
    --sizequote: 2rem; /*32px*/
    --sizemedium: 3rem; /*48px*/
    --sizelarge: 3.75rem; /*60px*/
    --sizexl: 6.625rem; /*90px*/

    --regular: 300;
    --bold: 600;
    --extrabold: 700;
    --hover: 0.2s linear all;
}

/*global styles*/
*:focus {
    outline: none;
}

html {
    overflow-x: hidden;
}

body {
    color: var(--gray);
    font-size: 16px;
    font-family: "Manrope", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 1px;
    /*	overflow-x: hidden;*/
}

h1 {
    font-size: var(--sizelarge);
    font-weight: var(--extrabold);
    letter-spacing: 0px;
}

h2 {
    font-size: var(--sizemedium);
    font-weight: var(--extrabold);
    line-height: 1.1;
}

h3 {
    font-size: var(--sizequote);
    line-height: 1.1;
}

h4 {
}

p {
    font-size: var(--sizecontent);
}

a {
    text-decoration: none;
    font-weight: var(--regular);
}

ul {
    padding-left: 0;
    margin-bottom: 0;
}

li {
    list-style-type: none;
}

.flex-it {
    display: flex;
}

a {
    text-decoration: none;
}

    a.cta-blue {
        color: var(--white);
        font-weight: var(--bold);
        background-image: linear-gradient(to right, var(--blue), var(--bluegrad));
        border-radius: 50px;
        padding: 12px 25px;
        width: 100%;
        /*	font-size: var(--sizecta);*/
    }

    a.cta-white {
        color: var(--blue);
        font-weight: var(--bold);
        f background-color: var(--white);
        border-radius: 50px;
        border: 2px solid var(--blue);
        padding: 10px 25px;
        width: 100%;
        /*	font-size: var(--sizecta);*/
    }

        a.cta-blue:hover, a.cta-white:hover {
            background-color: var(--hoverblue);
            background-image: linear-gradient(to right, var(--hoverblue), var(--hoverblue));
            color: var(--white);
        }

        a.cta-white:hover {
            border: 2px solid var(--hoverblue);
        }

/*header + nav*/
header {
    padding: 60px 0;
}

    header nav > div {
    }

    header .logo {
        /*	max-width: 300px;*/
    }

        header .logo img {
            max-width: 100%;
        }

nav .rightarea {
    justify-content: right;
    width: 100%;
}

nav .rightcta {
    margin-top: 30px;
}

nav ul {
    margin-top: 30px;
}

nav .links li {
    margin-right: 40px;
}

    nav .links li a {
        font-size: var(--sizesmall);
        color: var(--gray);
    }

    nav .links li.active a {
        color: var(--blue);
        font-weight: var(--bold);
    }

/*footer*/
footer {
    background: var(--black);
    color: var(--white);
}

    footer .footerstuffs {
        padding: 35px 0;
        display: flex;
        justify-content: center;
    }

    footer p {
        margin-bottom: 0;
        font-size: var(--sizexs);
        margin-right: 30px;
    }

    footer a {
        margin-bottom: 0;
        font-size: var(--sizexs);
        color: var(--white);
        margin-left: 15px;
    }

.foottops {
    padding: 50px 0;
    border-bottom: 1px solid var(--white);
}

footer .social {
    width: 100%;
}

    footer .social ul {
        display: flex;
        justify-content: right;
        margin-top: 30px;
    }

        footer .social ul li {
            margin-left: 10px;
        }

    footer .social i {
        font-size: var(--sizecta);
    }

/*custom styles*/
main {
}

/*hero section*/
#hero {
    padding: 100px 0 50px;
}

    #hero .flex-it {
        display: flex;
    }

    #hero h1 {
        line-height: 1.1;
        font-weight: var(--extrabold);
        margin-bottom: 0;
    }

        #hero h1 span {
            color: var(--blue);
            display: block;
        }

    #hero p {
        font-size: var(--sizecontent);
        margin: 30px 0 50px;
    }

    #hero a.cta-blue {
        margin-top: 30px;
        display: inline-block;
        width: initial;
    }

    #hero .left {
        position: relative;
        width: 50%;
    }

    #hero .relme {
        position: relative;
        display: inline-block;
    }

    #hero .planetop {
        position: absolute;
        right: -220px;
        bottom: 10px;
        z-index: -1;
    }

    #hero .right-img .video-rightfit {
        width: 300px;
        border-radius: 35px;
        margin-bottom: 35px;
    }

        #hero .right-img .video-rightfit video {
            height: auto;
            width: 100%;
        }

    #hero .right {
        width: 50%;
        position: relative;
    }

        #hero .right .hemi {
            position: absolute;
            top: -110px;
            left: -200px;
        }

    #hero .left-vid {
        width: 50%;
        position: relative;
        margin-top: -20px;
        border-radius: 35px;
        margin-right: 40px;
    }

    #hero .right-img {
        width: 350px;
        position: relative;
        margin-top: -120px;
    }

        #hero .right-img picture:first-child img {
            margin-bottom: 40px;
        }

    #hero .right .flex-it {
        position: relative;
        z-index: 1;
    }

    #hero .video-rightfit video {
        height: 500px;
        border-radius: 35px;
    }

    #hero .left-vid svg#onestar {
        position: absolute;
        left: -35px;
        top: -105px;
    }

    #hero .left-vid svg#twostar {
        position: absolute;
        bottom: 35px;
        left: -50px;
    }

    #hero .right-img svg#twostaralt {
        position: absolute;
        right: -50px;
        top: 410px;
    }

    #hero .right-img #plane {
        position: absolute;
        right: -200px;
        bottom: -100px;
    }

    #hero .hold-vid {
        width: 300px;
        border-radius: 35px;
        margin: 40px 40px 0 0;
        overflow: hidden;
        height: 250px;
    }

        #hero .hold-vid video {
            width: 300px;
            height: initial;
        }

    #hero .video-main {
        width: 300px;
        overflow: hidden;
        border-radius: 35px;
        height: 500px;
    }

        #hero .video-main video {
            width: 310px;
            position: relative;
            top: -25px;
            height: initial;
            left: -5px;
        }

/*how it works section*/
#how-it-works {
    position: relative;
    z-index: 0;
    overflow: hidden;
    padding: 10px 0 0 0;
    color: var(--blue);
    padding: 150px 0 100px;
}

    #how-it-works:after {
        width: 200vw;
        height: 100vw;
        border-radius: 50%;
        background-image: linear-gradient(var(--bluegrad), var(--blue));
        position: absolute;
        top: 0;
        right: -20vw;
        z-index: 0;
        content: '';
    }

    #how-it-works .flex-it {
        display: flex;
        position: relative;
        z-index: 1;
    }

    #how-it-works .left {
        width: 50%;
        padding-right: 50px;
    }

        #how-it-works .left h2 {
            color: var(--white);
            margin-bottom: 30px;
        }

    #how-it-works h2 span {
        color: var(--gold);
    }

    #how-it-works .eachdrop {
        position: relative;
        margin-left: 25px;
    }

        #how-it-works .eachdrop label {
            font-size: var(--sizecontent);
            color: var(--white);
            padding: 10px 0 10px 35px;
            font-weight: var(--bold);
            position: relative;
            cursor: pointer;
            transition: var(--hover);
        }

        #how-it-works .eachdrop input {
            position: absolute;
            z-index: -1;
            opacity: 0;
        }

    #how-it-works .showme {
        padding-left: 35px;
        position: relative;
        max-height: 0px;
        overflow: hidden;
        transition: var(--hover);
    }

        #how-it-works .showme p {
            font-size: var(--sizecta);
            color: var(--white);
        }

    #how-it-works .eachdrop input:checked ~ .showme {
        max-height: 100px;
    }

    #how-it-works .lines {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 3px;
        background: var(--white);
        transition: var(--hover);
    }

    #how-it-works input:checked ~ .lines {
        background: var(--gold);
        width: 5px;
        left: -1px;
    }

    #how-it-works input:checked ~ label {
        color: var(--gold);
    }

    #how-it-works label:hover {
        color: var(--gold);
    }

    #how-it-works .right {
        margin-top: -180px;
        width: 50%;
        text-align: center;
    }

        #how-it-works .right .flex-it img {
            margin-top: -40px;
        }

#abroadlogo {
    position: relative;
    top: 100px;
    right: -35px;
}

#how-it-works #noin img {
    margin-top: 40px;
    margin-right: 40px;
}

#how-it-works svg#starleft {
    position: absolute;
    left: -45px;
    top: -80px;
}

#how-it-works svg#staruno {
    position: absolute;
    bottom: 80px;
    left: 250px;
}
/*scroller section*/
.logos.alt {
    background-color: rgba(0, 161, 175, 0.1);
    padding: 35px 0;
}

#scroller ul {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    display: inline-block;
    animation: 35s slide infinite linear;
}

.logos.alt span {
    position: relative;
    color: var(--blue);
    font-weight: var(--bold);
    font-size: var(--sizesmall);
    padding: 0 25px;
}

    .logos.alt span:before {
        content: '';
        width: 6px;
        height: 6px;
        background: var(--gray);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: -3px;
        border-radius: 6px;
    }

.logos.alt:before,
.logos.alt:after {
    display: none;
}

/*destinations section*/
#destinations {
    padding: 80px 0;
    position: relative;
}

    #destinations input:checked + label {
        font-weight: var(--bold);
    }

    #destinations h2 {
        margin-bottom: 35px;
        color: var(--blue);
    }

    #destinations label {
        font-size: var(--sizecta);
        margin-right: 24px;
        cursor: pointer;
        text-align: center;
    }

        #destinations label:last-child {
            margin-right: 0;
        }

    #destinations input {
        position: absolute;
        left: -25px;
        z-index: -1;
        opacity: 0;
    }

    #destinations > svg {
        position: absolute;
        left: -120px;
        bottom: 0px;
    }

#all + label {
    width: 27px;
}

#popular + label {
    width: 81px;
}

#europe + label {
    width: 71px;
}

#southamerica + label {
    width: 154px;
}

#australia + label {
    width: 89px;
}

#semester + label {
    width: 96px;
}

#summer + label {
    width: 86px;
}

#short + label {
    width: 119px;
}

#intern + label {
    width: 144px;
}

#budget + label {
    width: 169px;
}

.sidescroller {
    padding: 45px 0;
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

#popular:checked ~ .sidescroller .eachloc:not(.popular) {
    width: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
}

#europe:checked ~ .sidescroller .eachloc:not(.europe) {
    width: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
}

#southamerica:checked ~ .sidescroller .eachloc:not(.southamerica) {
    width: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
}

#southamerica:checked ~ .sidescroller .eachloc.southamerica, #australia:checked ~ .sidescroller .eachloc.australia {
    margin-left: calc((100vw - 1296px) / 2);
}

#popular:checked ~ .sidescroller .firstpop {
    margin-left: calc((100vw - 1296px) / 2);
}

#australia:checked ~ .sidescroller .eachloc:not(.australia) {
    width: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
}

#semester:checked ~ .sidescroller .eachloc:not(.semester) {
    width: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
}

#short:checked ~ .sidescroller .eachloc:not(.short) {
    width: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
}

#budget:checked ~ .sidescroller .eachloc:not(.budget) {
    width: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
}

.sidescroller .eachloc {
    height: 500px;
    width: 300px;
    opacity: 1;
    border-radius: 35px;
    padding: 35px;
    flex: 0 0 auto;
    display: flex;
    margin: 15px;
    position: relative;
    overflow: hidden;
    transition: var(--hover);
    background-image: linear-gradient(to top, var(--blue) 15%, rgba(0, 161, 175, 0) 60%);
}

.movin .eachloc:first-child, .movin label[for="all"] {
    margin-left: calc((100vw - 1296px) / 2);
}

.movin .eachloc:last-child {
    margin-right: 50px;
}

.eachloc .fancy {
    margin-top: 15px;
}

    .eachloc .fancy a {
        color: var(--white);
        font-size: var(--sizeinitial);
        margin-top: 0;
    }

    .eachloc .fancy:before {
        display: none;
    }

.eachloc h3 {
    font-size: var(--sizecta);
    color: var(--white);
    font-weight: var(--bold);
}

.eachloc p {
    font-size: var(--sizeinitial);
    color: var(--white);
    margin-bottom: 0;
}

.eachloc svg {
    position: absolute;
    right: 15px;
    top: 20px;
    height: 30px;
}

.eachloc .allbg {
    min-width: 100%;
    min-height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-position: center;
    z-index: -1;
    background-size: cover;
}

.eachloc .bga {
    background-image: url('../ceacapa/img/hs-landingpages/AIX.jpg');
}

.eachloc .bgb {
    background-image: url('../ceacapa/img/hs-landingpages/ALC.jpg');
}

.eachloc .bgc {
    background-image: url('../ceacapa/img/hs-landingpages/AMS.jpg');
}

.eachloc .bgd {
    background-image: url('../ceacapa/img/hs-landingpages/BCN.jpg');
}

.eachloc .bge {
    background-image: url('../ceacapa/img/hs-landingpages/BUD.jpg');
}

.eachloc .bgf {
    background-image: url('../ceacapa/img/hs-landingpages/CDG.jpg');
}

.eachloc .bgg {
    background-image: url('../ceacapa/img/hs-landingpages/DUB.jpg');
}

.eachloc .bgh {
    background-image: url('../ceacapa/img/hs-landingpages/EZE.jpg');
}

.eachloc .bgi {
    background-image: url('../ceacapa/img/hs-landingpages/FCO.jpg');
}

.eachloc .bgj {
    background-image: url('../ceacapa/img/hs-landingpages/FLR.jpg');
}

.eachloc .bgk {
    background-image: url('../ceacapa/img/hs-landingpages/GNB.jpg');
}

.eachloc .bgl {
    background-image: url('../ceacapa/img/hs-landingpages/GRX.jpg');
}

.eachloc .bgm {
    background-image: url('../ceacapa/img/hs-landingpages/GWY.jpg');
}

.eachloc .bgn {
    background-image: url('../ceacapa/img/hs-landingpages/LHR.jpg');
}

.eachloc .bgo {
    background-image: url('../ceacapa/img/hs-landingpages/MAD.jpg');
}

.eachloc .bgp {
    background-image: url('../ceacapa/img/hs-landingpages/PRG.jpg');
}

.eachloc .bgq {
    background-image: url('../ceacapa/img/hs-landingpages/SJO.jpg');
}

.eachloc .bgr {
    background-image: url('../ceacapa/img/hs-landingpages/SPA.jpg');
}

.eachloc .bgs {
    background-image: url('../ceacapa/img/hs-landingpages/SVQ.jpg');
}

.eachloc .bgt {
    background-image: url('../ceacapa/img/hs-landingpages/SYD.jpg');
}

.eachloc .eachcontent {
    align-content: end;
    min-width: 230px;
}
/*finance section*/
#finance {
    background-color: rgba(0, 161, 175, 0.1);
    padding: 75px 0;
}

    #finance h2 {
        color: var(--blue);
    }

    #finance p {
        margin: 25px 0 40px;
        font-size: var(--sizecta);
    }

    #finance ul {
        margin: 0;
    }

        #finance ul li {
            list-style-type: none;
            margin: 25px 0;
            font-weight: var(--bold);
            font-size: var(--sizecontent);
        }

            #finance ul li span:not(.check) {
                display: block;
                margin-top: 10px;
                font-size: var(--sizesmall);
                font-weight: var(--regular);
                padding-left: 30px;
            }

            #finance ul li span.check {
                color: var(--blue);
                margin-right: 10px;
            }

.heartimg {
    position: relative;
    padding-right: 50px;
    margin-top: 35px;
}

.hearts {
    position: absolute;
    left: -20px;
    top: -20px;
}

.heartimg img {
    max-width: 100%;
}

#finance .spaces {
    padding-left: 25px;
}

.heartimg .stars-right {
    position: absolute;
    right: 15px;
    bottom: -60px;
}

/*quotes section*/
#quotes .mainquote {
    background: var(--blue);
    padding: 50px 260px;
    text-align: center;
    position: relative;
    margin-bottom: 75px;
}

    #quotes .mainquote .container {
        position: relative;
    }

#quotes .stars-left {
    position: absolute;
    left: -150px;
    bottom: -15px;
}

#quotes .stars-right {
    position: absolute;
    right: -150px;
    top: -15px;
}

.mainquote h3 {
    color: var(--white);
    font-weight: var(--regular);
    line-height: 1.4;
    margin-bottom: 20px;
}

    .mainquote h3 i {
        font-size: var(--sizexs);
        position: relative;
        top: -15px;
        padding: 3px;
    }

.mainquote p {
    margin-bottom: 0;
    color: var(--white);
    font-size: var(--sizecta);
}

    .mainquote p span {
        color: var(--gold);
        font-weight: var(--bold);
        margin-right: 10px;
    }

.subquotes .eachquote {
    background-color: rgba(0, 161, 175, 0.1);
    border-radius: 40px;
    padding: 50px 75px 50px 50px;
    width: 50%;
}

    .subquotes .eachquote:first-child {
        margin-right: 25px;
    }

    .subquotes .eachquote:last-child {
        margin-left: 25px;
    }

.subquotes .container {
    display: flex;
}

.subquotes .rating i {
    color: var(--gold);
    font-size: var(--sizecta);
}

.eachquote .flex-it {
    align-items: center;
}

    .eachquote .flex-it p {
        color: var(--blue);
        font-weight: var(--bold);
        font-size: var(--sizesmall);
        margin-bottom: 0;
        margin-top: 5px;
    }

        .eachquote .flex-it p span {
            font-weight: var(--regular);
            color: var(--gray);
            margin-left: 5px;
        }

.eachquote > p {
    font-size: var(--sizesmall);
    margin-top: 25px;
    margin-bottom: 0;
}

.quoteimg {
    margin-right: 25px;
}

    .quoteimg img {
        width: 100px;
        border-radius: 100%;
    }

/*faq section*/
#faqs {
    padding: 80px 0 100px;
}

.planefly {
    position: relative;
    top: 30px;
    left: -130px;
}

#faqs .container {
    display: flex;
}

    #faqs .container > div:first-child {
        width: 45%;
    }

    #faqs .container > div:last-child {
        width: 55%;
    }

#faqs h2 {
    margin-top: 15px;
    color: var(--blue);
}

.questionarea .eachq:first-child {
    border-top: 1px solid var(--lineblue);
}

.eachq {
    padding: 15px 0;
    position: relative;
    border-bottom: 1px solid var(--lineblue);
}

    .eachq .toggs {
        position: absolute;
        left: 30px;
        top: 47px;
        width: 20px;
        height: 3px;
        background: var(--blue);
        border-radius: 15px;
    }

        .eachq .toggs:after {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 3px;
            height: 20px;
            background: var(--blue);
            border-radius: 15px;
            content: '';
            opacity: 1;
            transition: var(--hover);
        }

#faqs .eachq label {
    font-size: var(--sizecontent);
    font-weight: var(--bold);
    display: block;
    margin-bottom: 15px;
    margin-top: 15px;
    cursor: pointer;
    padding-left: 100px;
}

#faqs .eachq input {
    position: absolute;
    opacity: 0;
}

#faqs .eachq p {
    font-size: var(--sizecta);
    margin-bottom: 0;
    max-height: 0;
    margin-bottom: 0px;
    padding: 0 0 0 100px;
    /*	padding-left: 100px;*/
    overflow: hidden;
    transition: var(--hover);
}

#faqs label + input:checked + .showme p {
    max-height: 100px;
    margin-bottom: 15px;
}

#faqs label + input:checked ~ .toggs:after {
    height: 0;
}

/*friend section*/
.planemove {
    position: absolute;
    bottom: 0;
    left: 40%;
    transform: translateX(-50%);
}

    .planemove .planepath {
        margin-bottom: -15px;
    }

    .planemove .plane {
        position: absolute;
        right: -35px;
        top: -40px;
    }

#friends {
    position: relative;
    z-index: 0;
    overflow: hidden;
    padding: 10px 0 0 0;
    color: var(--blue);
}

    #friends:after {
        width: 200vw;
        height: 100vw;
        border-radius: 50%;
        background-color: rgba(0, 161, 175, 0.1);
        position: absolute;
        top: 0;
        left: -20vw;
        z-index: 0;
        content: '';
    }

    #friends h2 {
        margin-top: 80px;
    }

.friendscontent {
    position: relative;
    z-index: 1;
}

.trips {
    position: relative;
}

    .trips .stars {
        position: absolute;
        top: 50px;
        left: -30px;
    }

.dubs {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

.spaces {
    padding-left: 65px;
}

.dubs picture {
    width: 50%;
}

    .dubs picture:last-child {
        width: 60%;
        margin-top: 20px;
    }

.dubs img {
    padding: 10px;
    width: calc(100% - 20px);
}

#friends p {
    font-size: var(--sizesmall);
    color: var(--darkgray);
    margin-top: 15px;
}

#friends .container {
    padding-bottom: 75px;
}

.hs-submit .actions, .fancy {
    position: relative;
    margin-top: 40px;
}

.hs-submit .actions {
    max-width: 150px;
}

    .hs-submit .actions:before, .fancy:before {
        content: '';
        width: 150px;
        height: 3px;
        background: var(--blue);
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 15px;
    }

    .hs-submit .actions input, .fancy a {
        margin-top: 10px;
        display: inline-block;
        color: var(--blue);
        font-size: var(--sizecta);
        font-weight: var(--bold);
        background: none;
        border: initial;
    }

    .hs-submit .actions:after {
        content: '→';
        font-size: var(--sizecta);
        font-weight: var(--bold);
        position: relative;
        right: 0;
        transition: var(--hover);
    }

    .hs-submit .actions:hover:after {
        right: -3px;
    }

.fancy a span {
    position: relative;
    right: 0;
    transition: var(--hover);
}

.fancy a:hover span {
    right: -3px;
}

#friends form label {
    color: var(--blue);
    font-weight: var(--bold);
    display: block;
    margin-top: 15px;
    margin-left: 15px;
    margin-bottom: 5px;
}

#friends form input:not([type="submit"]) {
    display: block;
    border-radius: 39px;
    background: var(--white);
    color: var(--black);
    border: none;
    width: 100%;
    max-width: 600px;
    height: 50px;
    padding: 15px 15px 15px 35px;
}

label.hs-error-msg, .hs_error_rollup label {
    font-size: 12px !important;
    color: var(--gold) !important;
}

/*logos sliding*/
@keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.logos {
    overflow: hidden;
    padding: 60px 0;
    background: white;
    white-space: nowrap;
    position: relative;
    z-index: 1;
}

    .logos:before,
    .logos:after {
        position: absolute;
        top: 0;
        width: 250px;
        height: 100%;
        content: "";
        z-index: 2;
    }

    .logos:before {
        left: 0;
        /*  background: linear-gradient(to left, rgba(255, 255, 255, 0), white);*/
    }

    .logos:after {
        right: 0;
        /*  background: linear-gradient(to right, rgba(255, 255, 255, 0), white);*/
    }

    .logos:hover .logos-slide {
        /*  animation-play-state: paused;*/
    }

.logos-slide {
    display: inline-block;
    animation: 35s slide infinite linear;
}

    .logos-slide img {
        height: 60px;
        margin: 0 60px;
    }

/*countdown section*/
#countdown {
    padding: 100px 0;
    background-color: rgba(0, 161, 175, 0.6);
    position: relative;
    text-align: center;
}

    #countdown:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(../ceacapa/img/hs-landingpages/countdown.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        z-index: -1;
    }

    #countdown h2 {
        color: var(--white);
    }

.countarea {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

    .countarea div {
        color: var(--white);
        font-size: var(--sizecontent);
        margin: 35px 0;
        width: 200px;
        border-right: 1px solid var(--white);
    }

        .countarea div:last-child {
            border-right: initial;
        }

        .countarea div span {
            font-size: var(--sizexl);
            font-weight: var(--extrabold);
            display: block;
            line-height: 1;
        }

#countdown a {
    border: 2px solid var(--white);
    background: var(--white);
    color: var(--blue);
}

    #countdown a:hover {
        border: 2px solid var(--hoverblue);
        background: var(--hoverblue);
        color: var(--white);
    }

/*exit intent*/
.exitintent {
    /*	display: none;*/
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.showexit .exitintent {
    /*	display: block;*/
    position: fixed;
    z-index: 100;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,0.75);
    opacity: 1;
    pointer-events: all;
}

#closeintent {
    font-size: var(--sizecontent);
    cursor: pointer;
    position: relative;
    margin-top: -10px;
    display: block;
}

.whyleave {
    position: absolute;
    border-radius: 35px;
    top: 50%;
    left: 50%;
    letter-spacing: 0.1;
    max-width: 525px;
    transform: translate(-50%, -50%);
    padding: 40px 50px 50px 50px;
    background: var(--white);
}

    .whyleave h3 {
        color: var(--blue);
        font-size: var(--sizecontent);
        font-weight: var(--bold);
        margin-bottom: 15px;
    }

    .whyleave h2 {
        font-size: var(--sizequote);
        margin-bottom: 25px;
    }

    .whyleave label {
        background-color: #D9F1F3;
        padding: 15px 25px;
        border-radius: 35px;
        width: 100%;
        cursor: pointer;
        font-size: var(--sizeinitial);
        font-weight: var(--bold);
        position: relative;
        z-index: 1;
        margin-top: 30px;
    }

    .whyleave .holddrops label:first-child {
        margin-top: 0;
    }

    .whyleave input {
        position: absolute;
        opacity: 0;
        bottom: 0;
    }

    .whyleave .holddrops > div {
        position: relative;
        max-height: 0;
        width: 100%;
        overflow: hidden;
        z-index: 0;
        padding: 15px 25px 25px 25px;
        border-right: 2px solid #D9F1F3;
        position: relative;
        margin-top: -50px;
        border-bottom: 2px solid #D9F1F3;
        border-left: 2px solid #D9F1F3;
        border-radius: 35px;
        transition: var(--hover);
    }

    .whyleave input:checked + div {
        max-height: 200px;
    }

    .whyleave .holddrops p {
        font-size: var(--sizeinitial);
        padding-top: 60px;
        margin-bottom: 0;
    }

    .whyleave .holddrops .fancy {
        margin: 25px 0 15px 0;
    }

    .whyleave .holddrops a {
        font-size: 14px;
        color: var(--blue);
        margin-top: 10px;
        display: inline-block;
        color: var(--blue);
        font-weight: var(--bold);
    }

.visible-xs {
    display: none;
}

@media screen and (max-width: 1399px) {
    header {
        padding: 35px 0 60px;
    }

    .movin .eachloc:first-child, .movin label[for="all"], #popular:checked ~ .sidescroller .firstpop, #southamerica:checked ~ .sidescroller .eachloc.southamerica, #australia:checked ~ .sidescroller .eachloc.australia {
        margin-left: calc((100vw - 1116px) / 2);
    }

    #hero .right {
        width: 55%;
    }

    #how-it-works .right .flex-it {
        margin-left: -50px;
    }

    #how-it-works svg#starleft {
        display: none;
    }

    #how-it-works:after {
        height: 110vw;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    /*variables*/
    :root {
        --sizexs: 0.75rem; /*12px*/
        --sizeinitial: 0.875rem; /*16px*/
        --sizesmall: 1.0rem; /*18px*/
        --sizecta: 1.125rem; /*20px*/
        --sizecontent: 1.25rem; /*24px*/
        --sizequote: 1.75rem; /*32px*/
        --sizemedium: 2.75rem; /*48px*/
        --sizelarge: 3.625rem; /*60px*/
        --sizexl: 6.5rem; /*90px*/
    }

    nav .links li {
        margin-right: 35px;
    }

    header .logo img {
        max-width: 200px;
    }

    .movin .eachloc:first-child, .movin label[for="all"], #popular:checked ~ .sidescroller .firstpop, #southamerica:checked ~ .sidescroller .eachloc.southamerica, #australia:checked ~ .sidescroller .eachloc.australia {
        margin-left: calc((100vw - 936px) / 2);
    }

    #popular + label {
        font-size: var(--sizesmall);
    }

    #destinations label {
        margin-right: 15px;
    }

    #how-it-works:after, #friends:after {
        height: 130vw;
    }

    #hero .right {
        width: 50%;
    }

    #hero .right-img {
        display: none;
    }

    #hero .right .flex-it {
        justify-content: center;
    }

    #how-it-works .right .flex-it {
        margin: 0px auto;
        display: block;
    }

    #noin {
        display: none;
    }

    #how-it-works .right .flex-it img {
        margin-top: -90px;
    }

    #how-it-works svg#staruno {
        left: initial;
        bottom: 0;
        right: 65px;
    }

    #abroadlogo {
        position: relative;
        top: 40px;
        right: -215px;
    }

    .dubs picture {
        display: none;
    }

        .dubs picture:nth-child(2) {
            display: block;
            width: 100%;
        }
}

@media screen and (max-width: 991px) {
    :root {
        --sizexs: 0.625rem; /*12px*/
        --sizeinitial: 0.75rem; /*16px*/
        --sizesmall: 0.875rem; /*18px*/
        --sizecta: 1rem; /*20px*/
        --sizecontent: 1.125rem; /*24px*/
        --sizequote: 1.5rem; /*32px*/
        --sizemedium: 2.5rem; /*48px*/
        --sizelarge: 3.25rem; /*60px*/
        --sizexl: 6rem; /*90px*/
    }

    #hero {
        padding: 0 0 0px 0;
    }

        #hero .flex-it {
            display: block;
        }

        #hero .left, #hero .right {
            width: 100%;
        }

        #hero h1 span {
            display: inline;
        }

        #hero .right .flex-it {
            display: flex;
        }

    header nav .links {
        display: none;
    }

    #how-it-works .right {
        display: none;
    }

    #how-it-works .flex-it {
        display: block;
    }

    #how-it-works .left {
        width: 100%;
        padding-right: 0;
    }

    .heartimg {
        margin-top: 0;
        padding-right: 0;
        margin-bottom: 50px;
    }

    .hearts {
        left: initial;
        right: 20px;
    }

    #quotes .mainquote {
        padding: 50px 15px;
    }

    .subquotes .container {
        display: block;
    }

    .subquotes .eachquote {
        width: 100%;
        margin: 0;
    }

        .subquotes .eachquote:last-child {
            margin-left: 0;
            margin-top: 35px;
        }

    #faqs .container {
        display: block;
    }

        #faqs .container > div:first-child, #faqs .container > div:last-child {
            width: 100%;
        }

    #faqs .planefly {
        display: none;
    }

    #faqs h2 {
        margin-bottom: 35px;
    }

    .eachq .toggs {
        top: 50%;
        left: 20px;
        transform: translateY(-50%);
    }

    #faqs .eachq p {
        padding-left: 60px;
    }

    #faqs .eachq label {
        padding-left: 60px;
    }

    footer .logo {
        display: none;
    }

    footer .social ul {
        justify-content: center;
        margin-top: 0;
    }

        footer .social ul li {
            margin: 0px 15px;
            align-items: center;
        }

    footer a {
        margin-left: 0;
    }

    footer .footerstuffs {
        display: block;
        text-align: center;
    }

    .countarea div span {
        font-size: 36px;
    }

    .movin .eachloc:first-child, .movin label[for="all"], #popular:checked ~ .sidescroller .firstpop, #southamerica:checked ~ .sidescroller .eachloc.southamerica, #australia:checked ~ .sidescroller .eachloc.australia {
        margin-left: calc((100vw - 696px) / 2);
    }

    .showexit .exitintent {
        display: none !important;
    }

    #friends:after {
        height: 1900px;
    }

    .heartimg img {
        width: 100%;
    }

    .spaces {
        padding-left: calc(var(--bs-gutter-x) * .5);
    }

    .planemove {
        bottom: -40px;
        right: 0;
        left: initial;
    }

    #destinations > svg {
        bottom: -120px;
    }

    #how-it-works:after {
        height: 125vw;
    }

    #hero .right .hemi {
        z-index: -1;
    }

    #hero .left-vid {
        margin-top: 100px;
    }

    #hero .right-img {
        margin-top: 0;
    }

    #destinations label {
        display: none;
    }

    #destinations h2 {
        margin-bottom: 0;
    }
}

@media screen and (max-width: 767px) {
    body {
        overflow-x: hidden;
    }

    .movin .eachloc:first-child, .movin label[for="all"], #popular:checked ~ .sidescroller .firstpop, #southamerica:checked ~ .sidescroller .eachloc.southamerica, #australia:checked ~ .sidescroller .eachloc.australia {
        margin-left: calc((100vw - 100%) / 2 + 15px);
    }

    #friends:after {
        height: 1300px;
        width: 1300px;
        left: -350px;
        top: 50px;
    }

    header .logo img {
        max-width: 140px;
    }

    nav .rightcta {
        margin-top: 15px;
    }

    #how-it-works:after {
        height: 1300px;
        width: 1300px;
        right: -350px;
    }

    .sidescroller {
        padding-top: 25px;
    }

    #hero .right-img {
        display: none;
    }

    #hero .left-vid {
        margin-right: 0;
        margin-top: initial;
        width: 100%;
    }

    #hero .video-main {
        margin: 0;
        height: initial;
        width: 100%;
        border-radius: initial;
    }

    #hero .right-img .video-rightfit {
        width: initial;
        margin-left: 10px;
        margin-bottom: 18px;
    }

    #hero .hold-vid {
        width: initial;
        margin: 0;
        margin-left: 10px;
    }

    #hero .video-main video {
        left: -25px;
    }

    #hero .hold-vid video {
        left: -35px;
        position: relative;
        top: -15px;
    }

    #hero .left-vid svg#onestar {
        position: absolute;
        left: 0;
        top: -60px;
    }

    #hero .right .hemi {
        display: none;
    }

    #hero .right .flex-it {
        display: block;
        width: 100%;
    }

    #how-it-works {
        margin-top: 75px;
        padding-top: 85px;
    }

    .visible-xs {
        display: inline;
    }

    .visible-sm {
        display: none;
    }

    .dubs img {
        padding: 0;
    }

    #faqs {
        padding-bottom: 50px;
    }

    #friends h2 {
        margin-top: 50px;
    }

    #how-it-works .eachdrop {
        margin-left: 10px;
    }

    #hero .right {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: -1;
        opacity: 0.2;
    }

    #quotes .mainquote {
        margin-bottom: 50px;
    }

    #hero .video-main video {
        width: 100%;
        left: initial;
    }

    #hero a.cta-white {
        background: var(--white);
    }

    #hero h1 {
        margin-bottom: 35px;
    }

    #hero p {
        display: none;
    }

    #hero .planetop {
        right: -100px;
        bottom: -170px;
    }

    .subquotes .eachquote {
        padding: 50px;
    }

    .eachquote .flex-it p span {
        display: block;
        margin-left: 0;
    }

    .trips .stars {
        position: absolute;
        top: 0px;
        left: -10px;
    }
}





/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

#intern-wrapper #hero p {
    padding-right: 50px;
}

#intern-wrapper #hero a.cta-blue {
    margin-top: 0;
}

#intern-wrapper #hero .planetop {
    right: initial;
    left: 0;
    bottom: -220px;
}

#intern-wrapper #select {
    position: relative;
}

    #intern-wrapper #select .container div {
        height: 220px;
        width: 100%;
        background: red;
        margin-bottom: 50px;
        border-radius: 35px;
    }

#intern-wrapper #how-it-works ul li {
    font-size: var(--sizecontent);
    color: var(--white);
    padding: 10px 0 10px 10px;
    font-weight: var(--bold);
    position: relative;
}

    #intern-wrapper #how-it-works ul li span {
        color: var(--gold);
        margin-right: 15px;
    }

#intern-wrapper #quotes h2 {
    margin: 75px 0 35px;
}

    #intern-wrapper #quotes h2 span {
        color: var(--blue);
    }

#intern-wrapper #finance {
    margin-top: 100px;
}

    #intern-wrapper #finance h2 {
        margin-bottom: 25px;
        margin-top: 40px;
    }

    #intern-wrapper #finance .eachdrop {
        position: relative;
        margin-left: 25px;
    }

        #intern-wrapper #finance .eachdrop input {
            position: absolute;
            z-index: -1;
            opacity: 0;
        }

        #intern-wrapper #finance .eachdrop label {
            font-size: var(--sizecontent);
            color: var(--gray);
            padding: 10px 0 10px 35px;
            font-weight: var(--bold);
            position: relative;
            cursor: pointer;
            transition: var(--hover);
        }

    #intern-wrapper #finance input:checked ~ label {
        color: var(--blue);
    }

    #intern-wrapper #finance .eachdrop input:checked ~ .showme {
        max-height: 100px;
    }

    #intern-wrapper #finance .showme {
        padding-left: 35px;
        position: relative;
        max-height: 0px;
        overflow: hidden;
        transition: var(--hover);
    }

        #intern-wrapper #finance .showme p {
            font-size: var(--sizecta);
            color: var(--gray);
            margin-top: 0;
        }

    #intern-wrapper #finance .lines {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 3px;
        background: var(--gray);
        transition: var(--hover);
    }

    #intern-wrapper #finance input:checked ~ .lines {
        background: var(--blue);
        width: 5px;
        left: -1px;
    }

#intern-wrapper #popular + label {
    width: 59px;
}

#intern-wrapper #europe + label {
    width: 119px;
}

#intern-wrapper #southamerica + label {
    width: 44px;
}

#intern-wrapper #australia + label {
    width: 165px;
}

#intern-wrapper #semester + label {
    width: 95px;
}

#intern-wrapper #short + label {
    width: 71px;
}

#intern-wrapper #budget + label {
    width: 162px;
}

#intern-wrapper #australia:checked ~ .sidescroller .eachloc.australia, #intern-wrapper #southamerica:checked ~ .sidescroller .eachloc.southamerica {
    margin-left: 15px;
}

    #intern-wrapper #australia:checked ~ .sidescroller .eachloc.australia.firsts {
        margin-left: calc((100vw - 1296px) / 2);
    }

#intern-wrapper #short:checked ~ .sidescroller .eachloc.short.seconds {
    margin-left: calc((100vw - 1296px) / 2);
}

#intern-wrapper #southamerica:checked ~ .sidescroller .eachloc.southamerica.thirds {
    margin-left: calc((100vw - 1296px) / 2);
}

#intern-wrapper #friends h2 {
    margin-top: 100px;
    margin-bottom: 15px;
    color: var(--white);
}

#intern-wrapper #friends ul li {
    color: var(--white);
    font-size: var(--sizecontent);
    font-weight: var(--bold);
    padding: 10px 0 10px 10px;
    position: relative;
}

    #intern-wrapper #friends ul li span {
        color: var(--gold);
        margin-right: 15px;
    }

#intern-wrapper #friends:after {
    background-image: linear-gradient(var(--bluegrad), var(--blue));
}

#intern-wrapper .dubs picture:last-child {
    width: 100%;
}

#intern-wrapper #faqs label + input:checked + .showme p {
    max-height: 400px;
}

#intern-wrapper #metrics {
    background-color: rgba(0, 161, 175, 0.1);
    padding: 75px 0;
}

    #intern-wrapper #metrics .flex-it {
        align-items: center;
        justify-content: center;
    }

        #intern-wrapper #metrics .flex-it div {
            padding: 0 35px;
            border-right: 1px solid var(--blue);
        }

            #intern-wrapper #metrics .flex-it div:last-child {
                border-right: initial;
            }

    #intern-wrapper #metrics p {
        font-size: 5rem;
        font-weight: var(--extrabold);
        text-align: center;
        letter-spacing: -2px;
        color: var(--blue);
        margin-bottom: 0;
    }

        #intern-wrapper #metrics p span {
            display: block;
            font-size: var(--sizesmall);
            font-weight: 200;
            margin-top: -15px;
            letter-spacing: initial;
        }

#intern-wrapper #how-it-works:after, #intern-wrapper #friends:after {
    background: #21262C;
    background-image: initial;
}

#intern-wrapper .subquotes .eachquote {
    background-color: #EEF2F4;
}

#intern-wrapper #finance, #intern-wrapper #metrics {
    background-color: #EEF2F4
}

    #intern-wrapper #finance p {
        margin-bottom: 15px;
    }

#intern-wrapper .sidescroller .eachloc {
    background-image: linear-gradient(to top, #21262C 15%, rgba(66, 71, 76, 0) 60%);
}

#intern-wrapper #countdown {
    background-color: rgba(66, 71, 76, 0.75);
}

#intern-wrapper #hero h1 span, #intern-wrapper #quotes h2 span {
    color: var(--gold);
}

#intern-wrapper #finance h2, #intern-wrapper #faqs h2, #intern-wrapper .eachquote .flex-it p, #intern-wrapper #finance input:checked ~ label, #intern-wrapper #destinations h2 {
    color: var(--gray);
}

#intern-wrapper #finance input:checked ~ .lines, #intern-wrapper .eachq .toggs, #intern-wrapper .eachq .toggs:after {
    background: var(--gold);
}

#intern-wrapper #metrics p {
    color: var(--gray);
}

#intern-wrapper #metrics .flex-it div {
    border-right: 1px solid var(--gray);
}

#intern-wrapper .questionarea .eachq:first-child {
    border-top: 1px solid #eef2f4;
}

#intern-wrapper .eachq {
    border-bottom: 1px solid #eef2f4;
}

#intern-wrapper #hero .left {
    z-index: 1;
}

#intern-wrapper #how-it-works .right {
    margin-top: -150px;
}

    #intern-wrapper #how-it-works .right .flex-it img {
        margin-top: 40px;
    }

#intern-wrapper #hero .right-img #plane {
    display: none;
}

#intern-wrapper #hero .right-img .video-rightfit {
    margin-bottom: 0;
}

#intern-wrapper #hero .hold-vid {
    margin-top: 0;
}

@media screen and (max-width: 1399px) {
    #intern-wrapper #australia:checked ~ .sidescroller .eachloc.australia.firsts, #intern-wrapper #short:checked ~ .sidescroller .eachloc.short.seconds, #intern-wrapper #southamerica:checked ~ .sidescroller .eachloc.southamerica.thirds {
        margin-left: calc((100vw - 1116px) / 2);
    }
}

@media screen and (max-width: 1200px) {
    #intern-wrapper #australia:checked ~ .sidescroller .eachloc.australia.firsts, #intern-wrapper #short:checked ~ .sidescroller .eachloc.short.seconds, #intern-wrapper #southamerica:checked ~ .sidescroller .eachloc.southamerica.thirds {
        margin-left: calc((100vw - 936px) / 2);
    }
}

@media screen and (max-width: 991px) {
    #intern-wrapper #metrics p {
        font-size: 4rem;
    }
}

@media screen and (max-width: 767px) {
    #intern-wrapper #metrics .flex-it {
        display: block;
    }

    #intern-wrapper #metrics p {
        font-size: 3rem;
    }

    #intern-wrapper #metrics .flex-it div {
        border-right: initial;
    }

    #intern-wrapper #hero .planetop {
        display: none;
    }

    #intern-wrapper #hero h1 span {
        position: relative;
        z-index: -1;
        background: var(--white);
    }

    #intern-wrapper #finance .eachdrop {
        padding-right: 5px;
        margin-left: 0;
    }
}