/* ================ section-INTRO ==================  */
.section-intro{background-color:#7AD7C5; padding-top:45px;
	background-image:url('../images/bg/intro-bg.jpg'); background-size:cover; background-repeat:no-repeat; position:relative;  min-height:610px;}
	.tabs-wrap{margin-top:140px;
		.tab-content{background-color:rgba(#fff,.7); border-radius:$radius}
		.nav-tabs{border-bottom:none; padding-left:15px;
			> li{margin-bottom:0px;}
			> li a{border:0; text-transform:uppercase; font-size:14px; padding:16px 50px;  margin-right: 4px;}

			> li.active > a,
			> li.active > a:hover,
			> li.active > a:focus{
			    color: $primary;
			    cursor: default;
			    background-color:rgba(#fff,.7);
			    border:none;
			    border-bottom-color: transparent;
			}
			
			li:not(.active) a{background-color:$primary2; color:#fff;  box-shadow:0 0px 5px rgba(#fff,0.2);}
		}
	}
	




.trip-type{	border:1px solid $accent; border-radius:5px; display:inline-block; margin-bottom:30px;
	label{ float:left; display:block; margin:0; font-weight:normal; color:$accent; text-transform:uppercase; font-weight:500; font-size:13px;}
	input[type='radio']{visibility:hidden; display: none;}
	input[type='radio']:checked + span{ background-color:$accent; color:#fff; position:relative;}

	input[type='radio']:checked + span:after{
		top: 100%; 	left: 50%;
		border: solid transparent;
		content: " ";
		height: 0; 	width: 0;
		position: absolute;
		pointer-events: none;
		border-color: rgba(136, 183, 213, 0);
		border-top-color: $accent;
		border-width: 10px;
		margin-left: -10px;
	}
	span{padding:6px 40px; display:block; border-right:1px solid $accent; border-left:1px solid $accent;}
}

.form-group-wrap{ border:1px solid $element; border-radius:6px; height:86px; background-color:#fff;
	.input-wrap input[type='text']{border:none; 
		display: block;
	    width: 100%;
	    height:41px;
	    border-radius:6px;
	    padding: 8px 12px;
	    line-height: 1.5;
	    background-color: #fff;
	    background-image: none;
	    padding-left:42px; 
	}
	.input-wrap > input[type='text']:focus{outline: none;}

	.nearby-check-wrap{position:absolute; top:7px; right:0; background-color:#fff; width: 90px;     margin: 0;
		input[type='checkbox']{margin:7px;}
		span{width:60px;
		    display: block;
		    float: right;
		    padding-right: 10px;   line-height: 13px;    font-size: 11px;
		    font-weight: normal; color:#666;
		}
	}
}
.input-wrap{position:relative; 
	> i:first-child{position:absolute; top:12px; left:12px; font-size:20px; color:$accent2;}
}
.input-wrap:first-child{border-bottom:1px solid $element}

.advanced-check{margin-top:7px;
	label{}
}

/* ---------- date picker ---------- */
.date-wrap{float:left; width:50%; height:100%}
.date-wrap:first-child{border-right:1px solid $element}
.date-wrap{position:relative; 
	> i:first-child{position:absolute; top:12px; left:8px; font-size:20px; color:$accent2;}
	input{position:absolute; opacity:0;
	border: none;
	bottom: 0;
	cursor: pointer;
	display: block;
	height: 100%;
	left: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 10;
	}
}

/* ---------- date picker ---------- */
#multi-block .row-sm{margin-bottom:15px;}
.date-multi{float:left; width:100%; height:100%}
.date-multi{position:relative; 
	> i:first-child{position:absolute; top:12px; left:8px; font-size:20px; color:$accent2;}
	input{position:absolute; opacity:0;
	border: none;
	bottom: 0;
	cursor: pointer;
	display: block;
	height: 100%;
	left: 0;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 10;
	}
}
p.datetime{ text-align:center; padding:13px; cursor:pointer;
	span{
		display:block;
    	font-size: 12px;
    	line-height:1.2; color:$text-muted;
	}
	.day{font-size:24px; }
}

p.add-return{text-align:center; padding:15px; cursor:pointer;
	i{font-size:36px; margin-bottom:7px; color:$element; display: inline-block}
	span{
		display:block;
    	font-size: 12px;
    	line-height: 1em; color:$text-muted;
	}
	.btn-return{color:$primary;  text-decoration: underline dotted $primary;}
}

.date-return-active{display:none}
.btn-remove-return{background-color:$accent;
	text-align: center; position: absolute;
	top: 0; right: 0;
	width: 24px; height: 24px; line-height: 24px;
	color: white; z-index: 11; cursor:pointer;
	border-top-right-radius: 4px;
}
/* ---------- selection ---------- */
.select-wrap{position:relative; height:41px; cursor:pointer;
	i:first-child{position:absolute; top:12px; left:8px; z-index:2; font-size:20px; color:$accent2;}
	.arrow{position:absolute; top:12px; right:12px; z-index:2; font-size:22px; color:$element;}
	.myval{margin:0; padding:12px 12px; padding-left:42px;  line-height: 1.5;}
	select{
		position:relative;
		-webkit-appearance: none; -moz-appearance: none;
		background: transparent;
  		 border:0; width:100%; height:100%;
  		  padding-left:42px;
  		 &:focus{outline:0;}
	}
	.btn-select{background:none; z-index:1; background-color:transparent; padding-top:10px; padding-bottom:10px;  padding-left:42px; }
	.dropdown-menu li a{padding:7px 15px;}
	.caret{display:none}
}
.select-wrap:first-child{border-bottom:1px solid $element}


.form-single-wrap{
	.input-wrap{border:none}
	 border:1px solid $element; border-radius:6px; background-color:#fff;
	 input[type='text']:not(.form-control), input[type='date'], .input-static {border:none; 
		display: block;
	    width: 100%;
	    height:41px;
	    border-radius:6px;
	    padding: 8px 12px;
	    margin:0;
	    line-height: 1.5;
	    background-color: #fff;
	    background-image: none;
	    padding-left:42px;
	    padding-right:3px;
	}
	.input-static{line-height:1.9; cursor:pointer;}
	input[type='text']:focus{outline: none;}
}



.passenger-dropdown {  display: none;
  padding:15px;
  position: absolute;
  top:100%;
  z-index: 40;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  width:250px;
  border: 1px solid #ccc; 
   p{display:block;}
   p:first-child{ line-height:2;}
   
}

.btn-search{ background-color:$accent; transition:.5s; color:#fff; text-transform:uppercase; display:block; height:86px; width:100%;
	&:hover{background-color:$accent2; color:#fff; }
}

.btn-search-sm{ background-color:$accent; color:#fff; text-transform:uppercase; display:block; height:43px; width:100%;
	&:hover{background-color:$accent2; color:#fff; }
}

.btn-search, .btn-search-sm{
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .4);
  -webkit-box-shadow: inset 0 1px 2px rgba(255, 255, 255, .4), 0 1px 1px rgba(0, 0, 0, .1);
          box-shadow: inset 0 1px 2px rgba(255, 255, 255, .4), 0 1px 1px rgba(0, 0, 0, .1);
}
/* ================== section-FEATURES ==================  */
.section-features{padding-bottom:30px;  background-color:$bg; }
	
	.item-feature{overflow:hidden; position:relative; height:170px; border-radius:$radius; box-shadow:0 2px 5px rgba(#000,.25); margin-top:-50px; background-color:$primary;
		.text-wrap{position:absolute; right:0; top:0; bottom:0; width:50%; padding:15px; background-color:rgba(#fff,.8);
			.title{margin-bottom:7px; color:$primary}
		}
		img{width:100%}
	}




/* ================== section-OFFERS ==================  */
.section-offers{padding:45px 0;}
	.card-offer{
		.card__info{background-color:$bg;}
		a{ color:$accent; 
			&:hover{color:$accent2}
		}
	}


/* ================== section-TOURS ==================  */
.section-tours{padding:45px 0; background-color:$bg; background-image:url('../images/bg/bg-map.jpg'); background-repeat:repeat-x; border-bottom:1px solid #eee;}
	.card-tour{ margin-bottom:15px; box-shadow:0 1px 3px rgba(50,50,50,.2);
		p{margin:0;}
		.card-bottom{background-color:#fff; float:left; width:100%;}
		.card-info-side{width:50%; float:left; padding:10px;
			i{float:left; color:$element; font-size:24px; margin-right:7px;}
			a{font-size:12px; color:$accent; text-transform:uppercase;
				&:hover{color:$accent2}
			}
		}
		.card-info-side:first-child{border-right:1px solid #eee;}
		.price-wrap{float:left; margin-bottom:7px;
			small{color:$text-muted;}
			.price{color:$text-muted; font-weight:500; font-style:normal; line-height:normal; display:block; font-size:15px;}
		}
		
	}



/* ================== section-FLIGHT ==================  */
.section-flight{padding:45px 0; background-color:$bg2; border-bottom:1px solid rgba($element,.5)}

	


/* ================== section-HOTEL ==================  */
.section-hotel{padding:45px 0; background-color:$bg}


/* ================== section-MOBILE ==================  */
.section-mobile{position:relative; background-image:url('../images/bg/bg-mobile.png');  background-image:url('../images/bg/bg-mobile.png'), linear-gradient(to bottom, $lightblue 0%, #357CB2 100%);  color:#fff; background-repeat: repeat-x; background-position:bottom center;}
	.info-mobile{padding-top:45px; padding-bottom:30px; padding-left:30px; }
	.title-text{font-size:28px; }
	.img-mobile-mockup{
		height:250px; 
		position: absolute;
	    bottom: 0;
	    left: 0;
	}

	.list-mobile{margin-top:15px;
		li{min-width:180px; }
	}
	.app-get-wrap{padding-top:45px; position:relative;
		img{margin:3px;}
		.img-get{max-width:150px; height:auto; vertical-align:bottom;}
		.img-qr{width:115px; height:115px; border:3px solid #ddd;}
		.img-arrow{position:absolute; top:40px; left:-80px;}
	}

/* ================== section-WHY ==================  */
.section-why{padding:45px 0; }
	.item-why{text-align:center;
		.icon-wrap{background-color:$bg; text-align:center; padding-top:15px; width:100px; height:100px; border-radius:100%; 
			display:inline-block;
			img{width:65px;}
		}
		.text-wrap{padding:15px;}
		.title{color:$primary; margin-bottom:10px;}
		p{ color:$text-muted}
	}



/* ================== section-MORE ==================  */
.section-more{padding:45px 0; padding-bottom:80px; background-color:$bg}
	.item-explore{text-align:center; background-color:#fff; overflow:hidden; text-align:center; padding-top:30px; width:150px; height:150px; border-radius:100%; 
			display:block; margin:auto;
			img{max-width:90%}
	}

/* ================= card layout =================== */
.card{ border-radius:8px; overflow:hidden;
	.card__img-wrap{height:150px; border-radius:8px 8px 0 0;  position:relative; background-color:#ccc; overflow:hidden;
		img{min-height:100%; min-width:100%;}
	}
	.title-overlay-center{
		text-align:center; display: block; width: 100%; height:100%;
		position: absolute;
		top: 45%; 
	}
	.title-overlay-bottom{
		display: block;
		width: 100%;
		position: absolute;
		bottom: 0;
		padding: 10px 15px;	padding-top: 40px;
		background-image: -webkit-linear-gradient(top, rgba(200, 200, 200, 0), rgba(0, 0, 0, 0.7));
		background-image: -moz-linear-gradient(top, rgba(200, 200, 200, 0), rgba(0, 0, 0, 0.7));
		background-image: -o-linear-gradient(top, rgba(200, 200, 200, 0), rgba(0, 0, 0, 0.7));
		background-image: linear-gradient(top, rgba(200, 200, 200, 0), rgba(0, 0, 0, 0.7));
		// overflow: hidden;
		// white-space: nowrap;
		// text-overflow: ellipsis;
		color: #fff;
	}
	.title-overlay-center{color:#fff;}
	.card__info{padding:15px;}
	.price{color:$text-muted; font-weight:500; font-style:normal; line-height:normal; display:block; font-size:15px;}
}

.card-big{
		
		.card__info{ 
			border-radius:0 0 6px 6px;
			background-color:#fff; float:left; width:100%;
			border-bottom:1px dashed $element; 
			i{color:$element; font-size:36px;}
			small{color:$text-muted}
		}

		.card__pricelist{background-color:#fff; border-radius:6px 6px 0 0; float:left; width:100%; }
		
		.cost{float:left; width:100%; padding:10px 15px; border-bottom:1px dashed $bg; }
		.title-left-wrap{float:left; width:40%}
		.title-right-wrap{float:left; width:40%; text-align:right;}
		.icon-center-wrap{float:left; text-align:center; width:20%; }

		.logo-wrap{float:left; width:35%; border:1px solid $bg; border-radius:8px; padding:3px; height:36px;}
		.icon-wrap{float:left; width:35%; text-align:center;
			i{display:block; color:$element; font-size:18px;}
			small{color:$text-muted}
		}
		.price-wrap{float:left; width:30%; text-align:right;
			.small{text-transform:uppercase; background-color:$accent; color:#fff; padding:3px 5px; border-radius:3px; font-size:11px;
				&:hover{background-color:$accent2}
			}
		}

}