.hidden{
	display:none;
	width:25%;
    z-index:9;
    position:fixed;
    right:-1000px;
    background:#f90;
    color:#000;
	bottom:0;
	top:0;

}

.visible{
	display:block;
}


.logo{
	width: 19rem;
    height: 6.5rem;
	margin-top: 6rem;
    margin-bottom: 1rem;
    background-image: url(https://a.hwstatic.com/image/upload/v1637219570/roamies/Logo.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
	margin-left:auto;
	margin-right:auto;
}

.stroke_purple{
    background-image: url(https://a.hwstatic.com/image/upload/v1637219492/roamies/strokes/strokes-dots.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100%;
    position: absolute;
    right: -10rem;
    top: -20rem;
    z-index: 3;
    width: 30rem;
    height: 20rem;
}

.stroke_pink{
background-image: url(https://a.hwstatic.com/image/upload/v1637219492/roamies/strokes/strokes-waves-1.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 80%;
    position: absolute;
    left: -10rem;
    top: -15rem;
    z-index: 3;
    width: 20rem;
    height: 21rem;
}

.stroke_green{
background-image: url(https://a.hwstatic.com/image/upload/v1637219492/roamies/strokes/strokes-waves.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 80%;
    position: absolute;
    right: -10rem;
    bottom: -8rem;
    z-index: 3;
    width: 20rem;
    height: 21rem;
}


.triangle_container{
	width:100%;
	position:relative;
	height: 5rem;

}

.triangle1.purple{
    width: 100%;
    height: 5rem;
    border-style: solid;
    border-width: 0 0 100px 2000px;
    border-color: transparent transparent #5350F1 transparent;
	background-color: transparent;
	z-index:2;
	position: absolute;
    left: 0;
    bottom: 0;
}

.triangle1.pink{
    width: 100%;
    height: 5rem;
    border-style: solid;
    border-width: 0 0 150px 2000px;
    border-color: transparent transparent #c4ff4c transparent;
	background-color: transparent;
	z-index:1;
	position: absolute;
    left: 0;
    bottom: 0;
}

.triangle2.pink{
    width: 100%;
    height: 5rem;
    border-style: solid;
    border-width: 0 0 150px 2000px;
    border-color: transparent transparent #5350f1 transparent;
	background-color: #121417;
	z-index:2;
	position: absolute;
    left: 0;
    bottom: 0;
}

.triangle1.white{
    width: 100%;
    height: 5rem;
    border-style: solid;
    border-width: 0 0 100px 2000px;
    border-color: transparent transparent #fff transparent;
	background-color: transparent;
	z-index:3;
	position: absolute;
    left: 0;
    bottom: 0;
}

.triangle2.purple{
    width: 100%;
    height: 5rem;
    border-style: solid;
    border-width: 100px 2000px 0 0;
    border-color:  #5350F1 transparent transparent transparent;
	background-color: #121417;
	z-index:2;
	position: absolute;
    left: 0;
    bottom: 0;
}

.triangle2.black{
    width: 100%;
    height: 5rem;
    border-style: solid;
    border-width: 100px 2000px 0 0;
    border-color:  #121417 transparent transparent transparent;
	background-color: transparent;
	z-index:2;
	position: absolute;
    left: 0;
    top: 0;
	margin-bottom:10rem;
}

.section_hero_back{
	background-image: url(https://a.hwstatic.com/image/upload/f_auto,q_auto,w_2000,c_fill,e_sharpen,e_improve,e_vibrance:60/v1637311381/roamies/hero/dive.jpg);
    background-repeat: repeat;
    background-position: center center;
    position: fixed;
    background-size: cover;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-repeat: no-repeat;
    z-index: 1;
}

.section_hero_overlay{
	position: absolute;
    left: 0;
    right: 0;
    top: -10rem;
    bottom: 0;
    background: radial-gradient(#000000b3, #5350f100);
    opacity: 0.7;
}

.section_hero{
	text-align: center;
    margin-bottom: 18rem;
}

.section_hero h1{
	color: #fff;
    text-align: center;
    margin-top: 3rem;
    margin-bottom: 2rem;
    line-height: 6rem;
    font-size: 5rem;
}

.section_hero span {
	color:#fff;
	text-align:center;
	display:block;
	font-size: 1.6rem;
}

.section_hero .button{
	margin-left:auto;
	margin-right:auto;
	margin-top:4rem;
	min-width:15rem;
	font-size:1.2rem;
	-webkit-box-shadow:0px 0px 18px 2px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 0px 18px 2px rgba(0,0,0,0.15);
	box-shadow: 0px 0px 18px 2px rgb(0,0,0,0.15));
}


.section{
	z-index:2;
	position:relative;
}

.section_roamies{
	background-color:#5350F1;
	padding-top: 3rem;
}

.roamies_image{
	height: 14rem;
    background-position: center center;
    background-size: cover;
    border-radius: 24px;
    margin-bottom: 1rem;
	-webkit-box-shadow:0px 0px 18px 2px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 0px 18px 2px rgba(0,0,0,0.15);
	box-shadow: 0px 0px 18px 2px rgb(0,0,0,0.15));
}

.section_tours{
	background-color: #121417;
    position: relative;
    padding-top: 3rem;
	padding-bottom: 6rem;
    z-index: 2;
	text-align:center;
}

.region_selector{
	margin-top:2.5rem;
}

.region{
	display:inline-block;
	padding:0.5rem;
	padding-right: 1.5rem;
	padding-left:70px;
	border:2px solid #fff;
	border-radius:48px;
	text-align:left;
	position: relative;
	cursor:pointer;
	margin-left:0.5rem;
	margin-right:0.5rem;
}

.region.active{
	background-color: #5350F1;
	border:2px solid #5350F1;
}

.region.active:hover span{
	color:#fff;
}

span.region_icon{
	background-repeat: no-repeat;
    background-position: center center;
    background-size: 80%;
	height:62px;
	width:62px;
	position: absolute;
    top: -1px;
    left: 0;
}


.region.asia span.region_icon{
	background-image: url(https://a.hwstatic.com/image/upload/v1637252541/roamies/continents/Southeast_Asia_White.svg);
}

.region.europe span.region_icon{
	background-image: url(https://a.hwstatic.com/image/upload/v1637252541/roamies/continents/Central_Europe_White.svg);
}

.region.south_america span.region_icon{
	background-image: url(https://a.hwstatic.com/image/upload/v1637252541/roamies/continents/Central_America_White.svg);
}

.region.central_america span.region_icon{
	background-image: url(https://a.hwstatic.com/image/upload/v1637252541/roamies/continents/Central_America_White.svg);
}

.region.asia:hover span.region_icon{
	background-image: url(https://a.hwstatic.com/image/upload/v1637252541/roamies/continents/Southeast_Asia_Purple.svg);
}

.region.europe:hover span.region_icon{
	background-image: url(https://a.hwstatic.com/image/upload/v1637252541/roamies/continents/Central_Europe_Purple.svg);
}

.region.south_america:hover span.region_icon{
	background-image: url(https://a.hwstatic.com/image/upload/v1637252541/roamies/continents/Central_America_Purple.svg);
}

.region.central_america:hover span.region_icon{
	background-image: url(https://a.hwstatic.com/image/upload/v1637252541/roamies/continents/Central_America_Purple.svg);
}

.region.asia.active span.region_icon{
	background-image: url(https://a.hwstatic.com/image/upload/v1637252541/roamies/continents/Southeast_Asia_White.svg);
}

.region.europe.active span.region_icon{
	background-image: url(https://a.hwstatic.com/image/upload/v1637252541/roamies/continents/Central_Europe_White.svg);
}

.region.south_america.active span.region_icon{
	background-image: url(https://a.hwstatic.com/image/upload/v1637252541/roamies/continents/Central_America_White.svg);
}

.region.central_america.active span.region_icon{
	background-image: url(https://a.hwstatic.com/image/upload/v1637252541/roamies/continents/Central_America_White.svg);
}

.region span{
	display:block;
}

.region:hover span{
	color:#5350F1;
}

.region:hover{
	border-color:#5350F1;
}

.region span.region_title{
	font-weight:bold;
}

.tours{
	margin-top:3rem;
	overflow-x:visible;
}

.tour_container{
	margin-bottom:1.8rem;
}

.tour_content{
	    color: #000;
	position:relative;
    text-align: left;
		position:relative;
	  border-radius: 24px;
	  padding: 1rem;
	  padding-top: 13rem;
	  background-color: #fff;
	  min-height: 400px;
}

.tour_container span{
	display:block;
	color:#636C7D;
	font-size:14px;
}

.tour_duration{
	position: absolute;
    left: 1rem;
    top: 1rem;
    background-color: #121417;
    color: #fff !important;
	padding: 0.2rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    border-radius: 8px;
    font-weight: bold;
	font-size: 0.75rem !important;
}

.tour_container a.tour_name{
    font-family: 'Poppins', Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #121417;
    font-size: 1.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.5rem;
    display: block;
}

.tour_container a.tour_name:hover{
	color:#5350F1;
}

.tour_container .tour_image{
	position:absolute;
	left:0;
	top:-2px;
	right:0;
	height:12rem;
	background-position: center center;
	background-size: cover;
	border-top-left-radius: 24px;
	border-top-right-radius: 24px;
}

.tour_container .button{
	margin-bottom:0;
}

.tour_pricing{
	text-align: right;
    position: absolute;
    margin-top: 1rem;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
}

.tour_pricing div{
	position:absolute;
	display:block;
	left:0;
	top:0.5rem;
	font-size:1rem;
	font-weight:bold;
	color: #121417;
	font-family: 'Poppins', Arial, Helvetica, sans-serif;
}

.tour_pricing div span.tour_from{
	display: inline;
    font-weight: normal;
    color: #121417;
}

.tour_pricing div span.tour_price{
	display: inline;
	font-family: 'Poppins', Arial, Helvetica, sans-serif;
	font-weight:bold;
	color: #121417;
	font-size:1.2rem;
}

.europe_container, .south_america_container, .central_america_container{
	display:none;
}

.section_included{
    background-color: #fff;
    z-index: 3;
    position: relative;
	padding-top:3rem;
	color:#121417;
}

.section_included h1{
	color:#121417;
	text-align:center;
}

.included_buttons{
	margin-top:3rem;
	margin-bottom:3rem;
	text-align:center;
}

.included_button{
	display:inline-block;
	cursor:pointer;
	border-radius: 24px;
	    padding: 1rem;
	    border: 2px solid #5350F1;
			background-color: #fff;
	    color: #5350F1;
			font-weight:normal;
	    text-align: center;
	    margin-right: 1rem;
	    cursor: pointer;
	    white-space: nowrap;
	    position: relative;
			filter:none;
}

.included_button:hover{
				background-color: #5350F1;
}

.included_button.active{
				background-color: #5350F1;
				border: 2px solid #5350F1;
				color: #FFF;
}

.included_item{
	position:relative;
	padding-left:5rem;
	margin-bottom: 1.5rem;
	min-height:4rem;
}

.included_item .included_heading{
	font-weight:bold;
}

.included_item .included_icon{
    position: absolute;
    top: 0;
    left: 0;
    width: 4rem;
    height: 4rem;
    background-color: #4e55e829;
    padding: 1rem;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;
    border-radius: 24px;
}

.included_image{
	min-height:21.5rem;
	background-position:center center;
	background-size:cover;
	background-repeat: no-repeat;
	border-radius:24px;

	-webkit-box-shadow:0px 0px 18px 2px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 0px 18px 2px rgba(0,0,0,0.15);
	box-shadow: 0px 0px 18px 2px rgb(0,0,0,0.15));
}

.included_experiences, .included_worlds, .included_people, .included_value{
	display:none;
}

.section_blog{
    background-color: #fff;
    z-index: 2;
    position: relative;
	padding-top:3rem;
	color:#121417;
}

.section_blog h1{
	color:#121417;
	text-align:center;
}

.blog_image{
	height: 15rem;
	background-position:center center;
	background-size:cover;
	background-repeat: no-repeat;
	border-radius:24px;
    margin-bottom: 2rem;
	margin-top:2rem;

	-webkit-box-shadow:0px 0px 18px 2px rgba(0,0,0,0.15);
	-moz-box-shadow: 0px 0px 18px 2px rgba(0,0,0,0.15);
	box-shadow: 0px 0px 18px 2px rgb(0,0,0,0.15));
}

.section_faq{
    background-color: #fff;
    z-index: 2;
    position: relative;
	padding-top:5rem;
	padding-bottom: 3rem;
	color:#121417;
}

.section_faq h1{
	color:#121417;
	text-align:center;
	margin-bottom:2rem;
}

.faq_question{
	margin-bottom:1.5rem;
}

.faq_question span{
	display:block;
	font-weight:bold;
	cursor:pointer;
	background-image:url(https://a.hwstatic.com/image/upload/v1637309646/roamies/icons/Icon.svg);
	background-position: top right;
	background-repeat: no-repeat;
	padding-right: 2rem;
}

.faq_question span.active{
	background-image:url(https://a.hwstatic.com/image/upload/v1637309646/roamies/icons/Icon-1.svg);
	color:#5350F1;
}

.faq_question p{
	display:none;
	padding-right: 2rem;
	margin-top:0.5rem;
}

.faq_question a{
	color:#5350f1;
}


@media only screen and (max-device-width: 640px){

	.nomobile{
		display:none;
	}

	h1{
		font-size: 2.5rem;
		line-height: 3rem;
		margin-bottom: 2rem;
	}

	.triangle1.pink{
		border-width: 0 0 150px 800px;
	}

	.triangle1.purple{
		border-width: 0 0 100px 1000px;
	}

	.triangle2.purple{
		border-width: 100px 1000px 0 0;
	}

	.triangle1.white{
		border-width: 0 0 100px 1000px;
	}

	.triangle2.pink{
		border-width: 0 0 150px 800px;
	}

	.section_hero_overlay{
		top: 0;
		opacity: 0.8;
	}

	.logo{
		width: 15rem;
		height:5rem;
		margin-bottom: 1rem;
		margin-top: 2rem;
	}

	.section_hero h1 {
		margin-top: 3rem;
		margin-bottom: 2rem;
		line-height: 4rem;
		font-size: 3rem;
	}

	.section_hero span{
		line-height:2rem;
	}

	.region_selector {
		margin-top: 2.5rem;
		width: 100%;
		white-space: nowrap;
		overflow-x: scroll;
	}

	.region_count{
		display:block;
	}

	.section_tours{
		padding-bottom:3rem;
	}

	.section_tours p{
		width: 100% !important;
	}

	.section_tours .large-12{
		z-index:3;
	}

	.tours{
		width: 100%;
		white-space: nowrap;
		overflow-x: scroll;
		flex-flow: unset;
		margin-right: 0 !important;
		margin-left: 0 !important;
	}

	.included_buttons{
		width: 100%;
		white-space: nowrap;
		overflow-x: scroll;
	}
}
