body{
	  padding: 0px;
	  margin: 0px;
	  max-height: 100%;
}

select {
	-webkit-appearance: none;  /*Removes default chrome and safari style*/
    -moz-appearance: none;  /*Removes default style Firefox*/
}

select::-ms-expand {
    display: none;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    rgba(256,256,256,0.4);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    rgba(256,256,256,0.4);
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    rgba(256,256,256,0.4);
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    rgba(256,256,256,0.4);
}

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

.outer {
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
  /* More properties for a fixed height ... */
  padding: 0px;
    overflow-x: hidden;
}
.outer::-webkit-scrollbar {
    width: 0px;  /* remove scrollbar space */
    background: transparent;  /* optional: just make scrollbar invisible */
}

.inner {
	height: calc(100% + 1px);	
      margin-left: auto;
      margin-right: auto;
	background: #ff813c; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(215deg, #ff813c, #d11f6e); /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(215deg, #ff813c, #d11f6e); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(215deg, #ff813c, #d11f6e); /* For Firefox 3.6 to 15 */
    background: linear-gradient(215deg, #ff813c, #d11f6e); /* Standard syntax (must be last) */    	  	  
}

.main {
	position: relative;
	
	background: #ff813c; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(215deg, #ff813c, #d11f6e); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(215deg, #ff813c, #d11f6e); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(215deg, #ff813c, #d11f6e); /* For Firefox 3.6 to 15 */
    background: linear-gradient(215deg, #ff813c, #d11f6e); /* Standard syntax (must be last) */    		  
	margin-left: auto;
	margin-right: auto;
}

/* ----- BACKGROUND SUN ------- */
.inner.sun, .main.sun {
	background: #F09819; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(215deg, #F09819, #FF512F); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(215deg, #F09819, #FF512F); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(215deg, #F09819, #FF512F); /* For Firefox 3.6 to 15 */
    background: linear-gradient(215deg, #F09819, #FF512F); /* Standard syntax (must be last) */    	  	 
}

/* ----- BACKGROUND CITY ------- */
.inner.city, .main.city {
	background: #AA076B ; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(215deg, #AA076B , #61045F); /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(215deg, #AA076B , #61045F); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(215deg, #AA076B , #61045F); /* For Firefox 3.6 to 15 */
    background: linear-gradient(215deg, #AA076B , #61045F); /* Standard syntax (must be last) */    	  	 
}

/* ----- BACKGROUND ADVENTURE ------- */
.inner.adventure, .main.adventure {
	background: #348F50 ; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(215deg, #348F50 , #56B4D3); /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(215deg, #348F50 , #56B4D3); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(215deg, #348F50 , #56B4D3); /* For Firefox 3.6 to 15 */
    background: linear-gradient(215deg, #348F50 , #56B4D3); /* Standard syntax (must be last) */    	  	 
}

/* ----- BACKGROUND SNOW ------- */
.inner.snow, .main.snow {
	background: #4776E6 ; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(215deg, #4776E6 , #8E54E9); /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(215deg, #4776E6 , #8E54E9); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(215deg, #4776E6 , #8E54E9); /* For Firefox 3.6 to 15 */
    background: linear-gradient(215deg, #4776E6 , #8E54E9); /* Standard syntax (must be last) */    	  	 
}
        

.header{
	background: rgba(256,256,256,0);
	border-bottom: 1px solid rgba(256,256,256,0);
	margin-bottom: 0px;	
	text-align: center;
	position: relative;
	padding: 0;
	padding-top: 0px;
	width: 100%;
}

@media screen and (min-height: 900px){
.header{
	padding-top: 20px;
}
}

.headercontainer{
  	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 5px;
	padding-bottom: 5px;
	position: relative;
	/*background-color: rgba(209, 31, 110, 0.3);*/
	text-align: center;
}

.headercontainer h1{
  position: absolute;
margin-left: 0px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;	
  font-size: 18px;
  padding-left: 20px;  
  padding-right: 50px;    
  padding-top: 6px;
  color: #fff;
  	margin: 0px;
	padding-top: 13px;
	padding-bottom: 14px;
}

.header h2{
  position: relative;
	display: inline-block;  
	font-family: 'Karla', sans-serif;
	font-weight: 400;	
  font-size: 20px;
  color: #fff;
  	margin: 0px;
	padding-top: 12px;
	padding-bottom: 12px;
}	

.header h3{
  position: absolute;
	display: inline-block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;	
  font-size: 22px;
  padding-right: 20px; 
	padding-left: 50px;  
  padding-top: 6px;
  color: #fff;
  	margin: 0px;
	padding-top: 14px;
	padding-bottom: 14px;
}

.header a {
  text-decoration: none;
}

.header a:hover {
  text-decoration: none;
}

.headerTitle{
  	width: 100%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	background-color: rgba(256,256,256,0.1);
text-align: center;
}

.headerTitle h2{
  position: relative;
	display: inline-block;  
	font-family: 'Karla', sans-serif;
	font-weight: 400;
  font-size: 16px;
  color: #fff;
	margin: 0px;
	padding-top: 10px;
	padding-bottom: 10px;
}

#travelsettings h2{
  position: relative;
	display: inline-block;  
	font-family: 'Karla', sans-serif;
	font-weight: 400;
  font-size: 24px;
  color: #fff;
	margin: 0px;
	padding-top: 20px;
	padding-bottom: 20px;
}


.travelinput {
	position: relative;
	width: 100%;
}

.travelby {
	position: relative;
	width: 100%;
	margin-bottom: 10px;
}

.travelby p{
	position: relative;
	color: rgba(256,256,256,0.5);
	font-family: 'Karla', sans-serif; font-weight: 400;
	font-size: 14px;
	text-transform: uppercase;
	-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;
	text-align: center;
}

.planebutton {
	  position: relative;
	display: inline-block;  
	font-family: 'Karla', sans-serif;
	font-weight: 400;
  font-size: 16px;
  color: #fff;
	margin: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
	background: transparent;
	border: none;
	border-left: 1px solid #fff;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-radius: 100px 0px 0px 100px;
	width: 50%;
	opacity: 0.5;
	cursor: pointer;
outline: none;	

margin-top: 15px;
margin-bottom: 15px;

z-index: 9999;
}

.carbutton {
	  position: relative;
	display: inline-block;  
	font-family: 'Karla', sans-serif;
	font-weight: 400;
  font-size: 16px;
  color: #fff;
	margin: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
	background: transparent;
	border: none;
	border-right: 1px solid #fff;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-radius: 0px 100px 100px 0px;
	width: 50%;
	opacity: 0.5;
	cursor: pointer;
outline: none;	
margin-top: 15px;
margin-bottom: 15px;

z-index: 9999;
}

.planebutton.active{
	opacity: 1;
	background-color: #fff;
	color: #d11f6e;
	border-radius: 100px 0px 0px 100px;
}
.carbutton.active{
	opacity: 1;
	background-color: #fff;
	color: #d11f6e;
	border-radius: 0px 100px 100px 0px;
}


/*.location {
	position: relative;
	width: calc(100% - 60px);
	display: inline-block;
	margin-left: 30px;
	margin-right: 30px;
	margin-bottom: 30px;
}
	   
#location {
	font-family: 'Heebo', sans-serif; font-weight: 100;
	font-size: 32px;
position: relative;
opacity: 1;
	border: none;
	border-bottom: 1px solid rgba(256,256,256, 0.3);
	background: transparent;
	border-radius: 0px;
	color: #fff;
	padding-top: 30px;
	padding-bottom: 0px;
cursor: text;
		-webkit-transition: all 0.2s ease-in-out; 
	-moz-transition: all 0.2s ease-in-out; 
	-o-transition: all 0.2s ease-in-out; 
	transition: all 0.2s ease-in-out;
	width: 100%;
	margin-top: -44px;
	text-align: left;
}

#location:hover, #location:focus {
	color: #fff;
	-webkit-transition: all 0.2s ease-in-out; 
	-moz-transition: all 0.2s ease-in-out; 
	-o-transition: all 0.2s ease-in-out; 
	transition: all 0.2s ease-in-out;
	outline: none;
}

.location p{
	position: relative;
	color: rgba(256,256,256,0.5);
	font-family: 'Karla', sans-serif; font-weight: 400;
	font-size: 14px;
	text-transform: uppercase;
	-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;
	text-align: left;
	margin-top: -5px;
}
*/
.holidayduration {
	position: relative;
	width: calc(100% - 60px);
	display: inline-block;
	margin-left: 30px;
	margin-right: 30px;
	margin-bottom: 30px;
}

#holidayduration {
	font-family: 'Heebo', sans-serif; font-weight: 100;
	font-size: 32px;
position: relative;
opacity: 1;
	border: none;
	border-bottom: 1px solid rgba(256,256,256, 0.3);
	background: transparent;
	border-radius: 0px;
	color: #fff;
	padding-top: 30px;
	padding-bottom: 0px;
cursor: pointer;
		-webkit-transition: all 0.2s ease-in-out; 
	-moz-transition: all 0.2s ease-in-out; 
	-o-transition: all 0.2s ease-in-out; 
	transition: all 0.2s ease-in-out;
	width: 100%;
	margin-top: -44px;
	text-align: left;
}

#holidayduration:hover, #holidayduration:focus {
	color: #fff;
	-webkit-transition: all 0.2s ease-in-out; 
	-moz-transition: all 0.2s ease-in-out; 
	-o-transition: all 0.2s ease-in-out; 
	transition: all 0.2s ease-in-out;
	outline: none;
}

.holidayduration p{
	position: relative;
	color: rgba(256,256,256,0.5);
	font-family: 'Karla', sans-serif; font-weight: 400;
	font-size: 14px;
	text-transform: uppercase;
	-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;
	text-align: left;
	margin-top: -5px;
}

.categories {
	position: relative;
	/*padding-top: 10px;*/
	padding: 0px;
	margin:0px;
  	margin-left: -5px;
	margin-right: -5px;	
	margin-bottom: 3px;
	margin-top: 77px;
	text-align: center;
	font-size: 0;
	z-index:0;
}

@media screen and (min-width: 480px) {
	.categories {
		margin-left: -15px;
		margin-right: -15px;	
	}
}


.category, .categoryAll {
	position: relative;
	text-align: center;
  font-size: 20px;
  color: #fff;
  border:none;
  display:inline-block;
  text-decoration: none;
  background-color: transparent;
  cursor: pointer;
  	margin-bottom: 5px;
	padding: 0px;
	  width: 20%;
	 background-color: transparent;
	 outline: none;
}


.categories p{
	position: relative;
	color: rgba(256,256,256,0.5);
	font-family: 'Karla', sans-serif; font-weight: 400;
	font-size: 14px;
	text-transform: uppercase;
	-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;
	text-align: left;
	margin-top: -5px;
	margin-left: 30px;
}

.category:focus, .categoryAll:focus  {
  font-size: 20px;
  color: #fff;
  border:none;
  display:inline-block;
  text-align: center;
  text-decoration: none;
  background-color: transparent;
  cursor: pointer;
}

.category_icon i{
  font-size: 18px;
  color: rgba(256,256,256,1);
  padding-top: 12px;
  padding-bottom: 12px;
  width: 42px;
  border:none;
  border: 2px solid rgba(256,256,256,0);
  display:inline-block;
  text-decoration: none;
  background-color: rgba(256,256,256,0.1);
  cursor: pointer;
  margin-top: 0px;
  border-radius: 100px;
	-webkit-transition: all 0.2s ease-in-out; 
	-moz-transition: all 0.2s ease-in-out; 
	-o-transition: all 0.2s ease-in-out; 
	transition: all 0.2s ease-in-out;  
  background-color: rgba(256,256,256,0.1);	
  -webkit-box-shadow: 0px 5px 15px -10px rgba(42,42,42,0.25);
-moz-box-shadow: 0px 5px 15px -10px rgba(42,42,42,0.25);
box-shadow: 0px 5px 15px -10px rgba(42,42,42,0.25);		
}

@media screen and (min-width: 580px) {
	.category_icon i:hover{
	  color: #d11f6e;
	  background-color: #fff;
	}
}

.category.active i:hover, .categoryAll.active i:hover{
  color: #d11f6e;
  background-color: #fff;
}

.category_label{
	font-family: 'Karla', sans-serif;
	font-weight: 400;
  font-size: 12px;
  text-transform: uppercase;
  color: rgba(256,256,256,0.4);
  border:none;
  display:inline-block;
  text-decoration: none;
  background-color: transparent;
  cursor: pointer;
  margin-top: -4px;
  width: 100%;
  text-align: center;
  	padding-top: 13px;
	-webkit-transition: all 0.2s ease-in-out; 
	-moz-transition: all 0.2s ease-in-out; 
	-o-transition: all 0.2s ease-in-out; 
	transition: all 0.2s ease-in-out;  	
}

.category.active, .categoryAll.active{
  outline:none;
}

.category.active i, .categoryAll.active i{
  text-decoration: none;
/*  border: 2px solid rgba(256,256,256,1);
  background-color: rgba(256,256,256,0);  */
    color: #d11f6e;
  background-color: #fff;
}

.category.active .category_label, .categoryAll.active .category_label{
  text-decoration: none;
  color: #fff;
}

	
.category h1, .categoryAll h1{
	font-family: 'Karla', sans-serif;
	font-weight: 400;
  font-size: 13px;
  text-transform: uppercase;
  color: rgba(256,256,256,0.4);
  border:none;
  display:inline-block;
  text-decoration: none;
  background-color: transparent;
  cursor: pointer;
  margin-top: 22px;
text-align: center;
}

/*
@media screen and (min-width: 580px) {
	.category i, .categoryAll i{
  font-size: 20px;
  padding-top: 15px;
  padding-bottom: 15px;
  width: 50px;
}

.category_label{
  font-size: 13px;
}	
}
*/

/* ------------- ACCOMODATION------------------- */

.accomodations {
	position: relative;
  	margin-left: auto;
	margin-right: auto;
	padding-top: 10px;
	margin-bottom: 0px;
	text-align: center;
}

.accomodation {
	position: relative;
	text-align: center;
  font-size: 20px;
  color: #fff;
  border:none;
  display:inline-block;
  text-decoration: none;
  background-color: transparent;
  cursor: pointer;
  	margin-bottom: 5px;
	padding: 0px;
	  width: 60px;
	 background-color: transparent;
	 outline: none;
}

.accomodations p{
	position: relative;
	color: rgba(256,256,256,0.5);
	font-family: 'Karla', sans-serif; font-weight: 400;
	font-size: 14px;
	text-transform: uppercase;
	-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;
	text-align: left;
	margin-top: -5px;
	margin-left: 30px;
}

.accomodation:focus {
  font-size: 20px;
  color: #fff;
  border:none;
  display:inline-block;
  text-align: center;
  text-decoration: none;
  background-color: transparent;
  cursor: pointer;
}

.accomodation_icon i{
  font-size: 16px;
  color: #fff;
  padding-top: 12px;
  padding-bottom: 12px;
  width: 42px;
  border:none;
  display:inline-block;
  text-decoration: none;
  background-color: rgba(256,256,256,0.1);
  cursor: pointer;
  margin-top: 0px;
  border-radius: 100px;
  -webkit-box-shadow: 0px 5px 15px -10px rgba(42,42,42,0.25);
-moz-box-shadow: 0px 5px 15px -10px rgba(42,42,42,0.25);
box-shadow: 0px 5px 15px -10px rgba(42,42,42,0.25);	
}

.accomodation_label{
	font-family: 'Karla', sans-serif;
	font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  color: rgba(256,256,256,0.4);
  border:none;
  display:inline-block;
  text-decoration: none;
  background-color: transparent;
  cursor: pointer;
  margin-top: -5px;
  width: 100%;
  text-align: center;
}

.accomodation.active{
  outline:none;
}

.accomodation.active i{
  text-decoration: none;
  color: #d11f6e;
  background-color: #fff;
}

.accomodation.active .accomodation_label{
  text-decoration: none;
  color: #fff;
}

@media screen and (min-width: 480px) {
	.accomodation i{
  font-size: 20px;
  color: #fff;
  padding-top: 12px;
  padding-bottom: 12px;
  width: 46px;
  border:none;
  display:inline-block;
  text-decoration: none;
  background-color: rgba(256,256,256,0.1);
  cursor: pointer;
  margin-top: 0px;
  
  -webkit-box-shadow: 0px 5px 15px -10px rgba(42,42,42,0.25);
-moz-box-shadow: 0px 5px 15px -10px rgba(42,42,42,0.25);
box-shadow: 0px 5px 15px -10px rgba(42,42,42,0.25);	
}	
	
.accomodation h1{
	font-family: 'Karla', sans-serif;
	font-weight: 400;
  font-size: 13px;
  text-transform: uppercase;
  color: rgba(256,256,256,0.4);
  border:none;
  display:inline-block;
  text-decoration: none;
  background-color: transparent;
  cursor: pointer;
  margin-top: 22px;
text-align: center;
}
}

/* ---------- FLIGHT OPTIONS ------------ */
.flightinput {
	position: relative;
	width: 100%;
	padding-top: 10px;
	color: #575757;
	padding-bottom: 10px;
}

.splitButtonLeft {
	  position: relative;
	display: inline-block;  
	font-family: 'Karla', sans-serif;
	font-weight: 400;
  font-size: 16px;
  color: #fff;
	margin: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
	background: transparent;
	border: none;
	border-left: 1px solid #fff;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-radius: 100px 0px 0px 100px;
	width: calc(50% - 30px);
	opacity: 0.5;
	cursor: pointer;
outline: none;	
}

.splitButtonRight {
	  position: relative;
	display: inline-block;  
	font-family: 'Karla', sans-serif;
	font-weight: 400;
  font-size: 16px;
  color: #fff;
	margin: 0px;
	padding-top: 8px;
	padding-bottom: 8px;
	background: transparent;
	border: none;
	border-right: 1px solid #fff;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	border-radius: 0px 100px 100px 0px;
	width: calc(50% - 30px);
	opacity: 0.5;
	cursor: pointer;
outline: none;	
}

.splitButtonRight.active{
opacity: 1;
background-color: #fff;
color: #d11f6e;
	border-radius: 0px 100px 100px 0px;
}

.splitButtonLeft.active{
opacity: 1;
background-color: #fff;
color: #d11f6e;
	border-radius: 100px 0px 0px 100px;
}

/* ---------- BUDGET ------------ */
.holidaybudget {
	position: relative;
	width: calc(100% - 60px);
	display: inline-block;
	margin-left: 30px;
	margin-right: 30px;
	margin-bottom: 40px;
}

#holidaybudget {
	font-family: 'Heebo', sans-serif; font-weight: 100;
	font-size: 32px;
position: relative;
opacity: 1;
	border: none;
	border-bottom: 1px solid rgba(256,256,256, 0.3);
	background: transparent;
	border-radius: 0px;
	color: #fff;
	padding-top: 30px;
	padding-bottom: 0px;
cursor: pointer;
		-webkit-transition: all 0.2s ease-in-out; 
	-moz-transition: all 0.2s ease-in-out; 
	-o-transition: all 0.2s ease-in-out; 
	transition: all 0.2s ease-in-out;
	width: 100%;
	margin-top: -44px;
	text-align: left;
}

#holidaybudget:hover, #holidaybudget:focus {
	color: #fff;
	-webkit-transition: all 0.2s ease-in-out; 
	-moz-transition: all 0.2s ease-in-out; 
	-o-transition: all 0.2s ease-in-out; 
	transition: all 0.2s ease-in-out;
	outline: none;
}

.holidaybudget p{
	position: relative;
	color: rgba(256,256,256,0.5);
	font-family: 'Karla', sans-serif; font-weight: 400;
	font-size: 14px;
	text-transform: uppercase;
	-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;
	text-align: left;
	margin-top: -5px;
}

.starRating {
	position: relative;
	padding-bottom: 0px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.starRating p{
	position: relative;
	color: rgba(256,256,256,0.5);
	font-family: 'Karla', sans-serif; font-weight: 400;
	font-size: 14px;
	text-transform: uppercase;
	-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;
	margin-top: -4px;
}

.stars {
  position: relative;
  display: inline-block;
  font-size: 32px;
  color: #fff;
  	margin: 0px;
	padding: 6px;
	padding-top: 6px;
	padding-bottom: 6px;
	background-color: transparent;
	border: none;
	outline: none;
	margin-top: 4px;
	margin-bottom: 4px;
	cursor: pointer;
	opacity: 0.3;
}

@media screen and (min-width: 580px) {
	.stars {
	  font-size: 50px;
	}
}

.stars.active {
	opacity: 1;
}

.stars i{
-webkit-text-shadow: 3px 3px 3px rgba(0,0,0,0.15);
-moz-text-shadow: 3px 3px 3px rgba(0,0,0,0.15);
text-shadow: 3px 3px 3px rgba(0,0,0,0.15);
}

.result {
	position: relative;
	display: inline-block;
	width: 100%;
	float: right;
	margin: 0px;
	vertical-align: top;
	   margin-right: 0px;
      margin-left: auto;
}

@media screen and (min-width: 750px) {
.result {
	width: calc(100% - 360px);
}	
}