/* @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    */
/*****************************************/


/*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('https://47650544.fs1.hubspotusercontent-na1.net/hubfs/47650544/Landing%20Page/Student/locations/AIX.jpg');
}
.eachloc .bgb{
	background-image: url('https://47650544.fs1.hubspotusercontent-na1.net/hubfs/47650544/Landing%20Page/Student/locations/ALC.jpg');
}
.eachloc .bgc{
	background-image: url('https://47650544.fs1.hubspotusercontent-na1.net/hubfs/47650544/Landing%20Page/Student/locations/AMS.jpg');
}
.eachloc .bgd{
	background-image: url('https://47650544.fs1.hubspotusercontent-na1.net/hubfs/47650544/Landing%20Page/Student/locations/BCN.jpg');
}
.eachloc .bge{
	background-image: url('https://47650544.fs1.hubspotusercontent-na1.net/hubfs/47650544/Landing%20Page/Student/locations/BUD.jpg');
}
.eachloc .bgf{
	background-image: url('https://47650544.fs1.hubspotusercontent-na1.net/hubfs/47650544/Landing%20Page/Student/locations/CDG.jpg');
}
.eachloc .bgg{
	background-image: url('https://47650544.fs1.hubspotusercontent-na1.net/hubfs/47650544/Landing%20Page/Student/locations/DUB.jpg');
}
.eachloc .bgh{
	background-image: url('https://47650544.fs1.hubspotusercontent-na1.net/hubfs/47650544/Landing%20Page/Student/locations/EZE.jpg');
}
.eachloc .bgi{
	background-image: url('https://47650544.fs1.hubspotusercontent-na1.net/hubfs/47650544/Landing%20Page/Student/locations/FCO.jpg');
}
.eachloc .bgj{
	background-image: url('https://47650544.fs1.hubspotusercontent-na1.net/hubfs/47650544/Landing%20Page/Student/locations/FLR.jpg');
}
.eachloc .bgk{
	background-image: url('https://47650544.fs1.hubspotusercontent-na1.net/hubfs/47650544/Landing%20Page/Student/locations/GNB.jpg');
}
.eachloc .bgl{
	background-image: url('https://47650544.fs1.hubspotusercontent-na1.net/hubfs/47650544/Landing%20Page/Student/locations/GRX.jpg');
}
.eachloc .bgm{
	background-image: url('https://47650544.fs1.hubspotusercontent-na1.net/hubfs/47650544/Landing%20Page/Student/locations/GWY.jpg');
}
.eachloc .bgn{
	background-image: url('https://47650544.fs1.hubspotusercontent-na1.net/hubfs/47650544/Landing%20Page/Student/locations/LHR.jpg');
}
.eachloc .bgo{
	background-image: url('https://47650544.fs1.hubspotusercontent-na1.net/hubfs/47650544/Landing%20Page/Student/locations/MAD.jpg');
}
.eachloc .bgp{
	background-image: url('https://47650544.fs1.hubspotusercontent-na1.net/hubfs/47650544/Landing%20Page/Student/locations/PRG.jpg');
}
.eachloc .bgq{
	background-image: url('https://47650544.fs1.hubspotusercontent-na1.net/hubfs/47650544/Landing%20Page/Student/locations/SJO.jpg');
}
.eachloc .bgr{
	background-image: url('https://47650544.fs1.hubspotusercontent-na1.net/hubfs/47650544/Landing%20Page/Student/locations/SPA.jpg');
}
.eachloc .bgs{
	background-image: url('https://47650544.fs1.hubspotusercontent-na1.net/hubfs/47650544/Landing%20Page/Student/locations/SVQ.jpg');
}
.eachloc .bgt{
	background-image: url('https://47650544.fs1.hubspotusercontent-na1.net/hubfs/47650544/Landing%20Page/Student/locations/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(https://47650544.fs1.hubspotusercontent-na1.net/hubfs/47650544/Landing%20Page/Student/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;
	}
}