/*=== 2. UI KIT ===*/
/*=== 2.1 BUTTON ===*/
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus{
	outline: 0;
}
.buttonCustomPrimary{
	height: $base*9;
	line-height: $base*9;
	@include border-radius ($base-xs*2);
	background-color: $primary-color;
	text-transform: uppercase;
	color: $white-color !important;
	font-weight: 400;
	font-size: $base*3;
	padding: 0;
}
.buttonTransparent{
	height: $base*7;
	line-height: $base*7;
	@include border-radius ($base-xs*2);
	border-color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 31.1765);
	padding: 0 $base*4;
	color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 2.9412);
	text-transform: uppercase;
	outline:0;
	&:hover{
		background-color: $primary-color;
		border-color: $primary-color;
		color: $white-color;
		@include opacity(1);
		outline:0;
	}
	&focus{
		outline:0;
	}
}
/*=== 2.2 SECTION TITLE ===*/
.sectionTitle{
	text-align: center;
	@include mobile-all{
		margin-bottom: $base*6;
	}
	@include tablet{
		margin-bottom: $base-xs*24;
	}
	h2{
		position: relative;
		margin-bottom: $base-xs*8;
		@include mobile-all{
			font-size: $base*4;
		}
		@include tablet{
			font-size: $base-xs*13;
		}
		span{
			@include add-padding($base-xs*19, left-right);
			z-index: 5;
			position: relative;
			background-color: $white-color;
			&.lightBg{
				background-color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 40.1961);
			}
		}
		&:before{
			background-color: $title-border;
			content: "";
			display: block;
			height: 1px;
			position: absolute;
			top: 50%;
			width: 100%;
			left: 0;
			z-index: 1;
		}
	}
	p{
		color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 2.9412);
		font-weight: 400;
		text-transform: capitalize;
		margin-bottom: 0;
		@include mobile-all{
			font-size: $base-xs*5+1px;
		}
		@include tablet{
			font-size: $base-xs*9;
		}
	}
}
.sectionTitleDouble{

	@include mobile-all{
		background-image: none;
	}
	@include tablet{
		@include background('../img/home/devider.png', right center, 8px 45px);
	}
	p, h2{
		color: $white-color;
		text-transform: uppercase;
		line-height: $base-xs*13;
		margin-bottom: 0;
		font-weight: 400;
		@include desktops{
			font-size: $base-xs*9;
		}
		@include large-desktops{
			font-size: $base*4;
		}
	}
	h2{
		font-weight: 700;
		@include desktops{
			font-size: $base-xs*11;
		}
		@include large-desktops{
			font-size: $base-xs*13;
		}
		span{
			color: $primary-color;
		}
	}
}
.sectionTitle2{
	h2{
		font-size: $base*5+1;
		color: $text-title;
		line-height: $base-xs*13;
		margin: 25px 0;
		font-weight: 400;
	}
	p{
		font-size: $base-xs*7;
		line-height: $base*4+1;
		margin-bottom: $base*6;
	}
}
.sub-title{
  h4{
    margin-top: 30px;
    margin-bottom: 20px;
    font-size: $base-xs*8;
    font-weight: 400;
    line-height: $base*4+1;
    color: $text-title;
  }
}


/*=== 2.3 FORM ===*/
.form{
	.form-group{
		.form-control{
	    height: $base*9;
	    background-color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 40.1961);
	    box-shadow: none;
	    border-color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 33.9216);
	    color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 2.9412);
	    font-family: "Montserrat",sans-serif;
	    font-size: $base-xs*6;
	    &:focus{
	    	outline: 0;
	    }
		}
		textarea{
			&.form-control{
				height: $base*30;
			}
		}
	}
	.buttonCustomPrimary{
		padding: 0 $base*4;
	}
}
.commentsForm{
	@extend .form;
	.form-control{
		border: none;
	}
	.buttonCustomPrimary{
		background-color: transparent;
		color: darken(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 15.8824) !important;
		border-color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 31.1765);
		@include transition(all 0.3s ease-in-out);
		&:hover{
			background-color: $primary-color;
			border-color: $primary-color;
			color: $white-color !important;
		}
	}
	h3{
		font-size: $base*4;
		color: $text-title;
		text-transform: capitalize;
		font-weight: 400;
		margin-bottom: $base*6;
	}
}
.contactForm{
	.form-control{
		border: none;
	}
	.buttonCustomPrimary{
		float: right;
	}
}
/*=== 2.4 PASINATION ===*/
.paginationCenter{
	width: 100%;
	text-align: center;
	padding-top: $base-xs*39;
	.pagination{
		margin: 0;
		li{
			display: inline-block;
			a{
				color: darken(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 42.5490);
				border: none;
				height: $base*7;
				line-height: $base*7;
				padding: 0 $base-xs*6;
				background-color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 40.1961);
				&:hover{
					color: $primary-color;
					background-color: transparent;
				}
			}
			&.active{
				a{
					color: $primary-color;
					background-color: transparent;
					&:hover, &:focus{
						color: $primary-color;
						background-color: transparent;
					}
				}
			}
		}
		li:first-child, li:last-child{
			a{
				@extend .buttonTransparent;
				color: darken(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 42.5490);
				@include add-border(1px, lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 31.1765), all);
			}
		}
		li:first-child{
			a{
				span{
					i{
						margin-right: $base;
					}
				}
			}
		}
		li:last-child{
			a{
				span{
					i{
						margin-left: $base;
					}
				}
			}
		}
	}
	&.paginationTransparent{
		padding-top: 0;
		.pagination{
			li{
				a{
					background-color: $white-color;
				}
			}
		}
	}
}
/*=== 2.5 ACCORDION ===*/
.accordionWrappar{
	padding: $base*3;
	@include add-border(1px, lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 37.4510), all);
	@include border-radius(4px);
	@include mobile-all{
		margin-bottom: $base*6;
	}
	@include tablet{
		margin-bottom: 0;
	}
}
.accordionsTransparent{
	.panel-group{
		margin-bottom: $base*3;
		.panel{
			border: none;
			@include border-radius (0);
		}
		.panel-heading{
			padding: $base*3;
			text-transform: uppercase;
			font-size: $base*3;
			color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 2.9412);
			background-color: transparent;
			border: none;
			@include add-border(1px, lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 37.4510), bottom);
			@include border-radius (0);
			i{
				line-height: $base-xs*11;
			}
			&.hideBorder{
				border: none;
			}
			&:hover{
				@include opacity(1);
			}
		}
		.panel-body{
			.media{
				img{
					@include border-radius(4px);
				}
			}
		}
	}
	.panel-default{
		> a.panel-heading{
			display: block;
			&:focus{
				text-decoration: none;
			}
		}
	}
	.panel-group .panel+.panel{
		margin-top: 0;
	}
	.panel-default>.panel-heading+.panel-collapse>.panel-body{
		border: none !important;
	}
	.panel{
		box-shadow: none;
	}
	.panel-heading.active {
	  color: $primary-color;
	  border: none;
	}
	.panel-collapse.active{
		@include add-border(1px, lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 37.4510), bottom);
	}
	.solidBgTitle{
		.panel{
			margin-bottom: $base*4;
		}
		.panel-heading{
			background-color: $primary-color;
			color: $white-color;
			@include border-radius(4px);
		}
		.panel-body{
			background-color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 40.1961);
			border-radius: 0 0 4px 4px;
		}
		.panel-collapse{
			border-radius: 0 0 4px 4px;
		}
	}
	.accordionSolidTitle{
		.panel{
			margin-bottom: $base*3;
			@include border-radius(4px);
			background-color: transparent;
		}
		.panel-heading{
			background-color: $white-color;
			color: $text-title;
			border: none;
			@include border-radius(4px);
		}
		.panel-heading.active {
		  color: $white-color;
		  background-color: $primary-color;
		}
		.panel-collapse.active{
			background-color: transparent;
			border: none;
		}
	}
	.accordionSolidBar{
		@extend .accordionSolidTitle;
	}
}
/*=== 2.6 TABS ===*/
/*=== 2.7 DATEPICKER ===*/
.ed-datepicker{
	height: $base*9;
	margin-top: $base-xs*2;
	border: none;
	@include add-border(1px, rgba(lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 31.1765), .3), bottom);
	padding: 0;
	border-radius: 0;
	&.filterDate{
		border-color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 31.1765);
		margin-bottom: $base*4;
	}
}
.ed-datepicker .form-control{
	height: $base*9;
	background: transparent;
	border: none;
	font-size: $base-xs*6;
	font-weight: 400;
	color: rgba($white-color, .3);
	padding: $base-xs*2 $base-xs*6 $base-xs*2 0;
	box-shadow: none !important;
}
.ed-datepicker.filterDate .form-control{
	color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 2.9412);
}
.ed-datepicker .form-control::-webkit-input-placeholder{
	font-size: $base-xs*6;
	font-weight: 400;
	color: rgba($white-color, .3);
	text-transform: uppercase;
}
.ed-datepicker .form-control::-moz-placeholder{
	font-size: $base-xs*6;
	font-weight: 400;
	color: rgba($white-color, .3);
}
.ed-datepicker .form-control:-ms-input-placeholder{
	font-size: $base-xs*6;
	font-weight: 400;
	color: rgba($white-color, .3);
}
.ed-datepicker .form-control:-moz-placeholder {
	font-size: $base-xs*6;
	font-weight: 400;
	color: rgba($white-color, .3);
}
.ed-datepicker.filterDate .form-control::-webkit-input-placeholder{
	font-size: $base-xs*6;
	font-weight: 400;
	color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 2.9412);
}
.ed-datepicker.filterDate .form-control::-moz-placeholder{
	font-size: $base-xs*6;
	font-weight: 400;
	color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 2.9412);
}
.ed-datepicker.filterDate .form-control:-ms-input-placeholder{
	font-size: $base-xs*6;
	font-weight: 400;
	color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 2.9412);
}
.ed-datepicker.filterDate .form-control:-moz-placeholder {
	font-size: $base-xs*6;
	font-weight: 400;
	color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 2.9412);
}
.ed-datepicker .input-group-addon{
	height: $base*9;
	background: transparent;
	border: none;
	padding-right: 0;
}
.datepicker-dropdown{
	width: auto;
	padding: 0;
}
.filterDate .datepicker-dropdown{
	top: 87% !important;
}
.datepicker-dropdown thead{
	font-size: 15px;
	font-weight: 400;
	text-transform: uppercase;
}
.datepicker-dropdown thead tr:last-child th{
	background-color: $primary-color;
	border-radius: 0;
	font-size: $base-xs*7;
	color: $white-color;
}
.datepicker table tr td.day{
	color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 2.9412);
	font-weight: 400;
	border-radius: 0 !important;
	background: transparent;
	margin: 0 3px 10px;
	padding: $base;
	width: $base-xs*21+1px;
	height: $base-xs*21+1px;
	text-align: center;
	@include add-border(1px, lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 33.9216), all);
}
.datepicker table tr td.day.new,
.datepicker table tr td.day.old {
	color: #cccfd3;
	background: transparent;
}
.datepicker table tr td.day:hover,
.datepicker table tr td.focused {
	background: $primary-color;
	@include transition (background 0.3s);
	cursor: pointer;
	color: $white-color;
}
.datepicker table tr td.active.active,
.datepicker table tr td.active.highlighted.active,
.datepicker table tr td.active.highlighted:active,
.datepicker table tr td.active:active {
	border-color: $secondary-color;
	background: $secondary-color;
	@include transition (background 0.3s, border-color 0.3s);
}
.datepicker table tr td.active.active.focus,
.datepicker table tr td.active.active:focus,
.datepicker table tr td.active.active:hover,
.datepicker table tr td.active.highlighted.active.focus,
.datepicker table tr td.active.highlighted.active:focus,
.datepicker table tr td.active.highlighted.active:hover,
.datepicker table tr td.active.highlighted:active.focus,
.datepicker table tr td.active.highlighted:active:focus,
.datepicker table tr td.active.highlighted:active:hover,
.datepicker table tr td.active:active.focus,
.datepicker table tr td.active:active:focus,
.datepicker table tr td.active:active:hover {
	border-color: $secondary-color;
	background: $secondary-color;
	@include transition (background 0.3s, border-color 0.3s);
}
.datepicker .datepicker-switch{
	color: darken(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 42.5490)
}
.datepicker .datepicker-switch:hover,
.datepicker .next:hover,
.datepicker .prev:hover,
.datepicker tfoot tr th:hover {
	background:transparent;
	border: none;
	@include transition (color 0.3s);
	cursor: pointer;
	color: $secondary-color;
}
.datepicker-dropdown::after,
.datepicker-dropdown::before{
	display: none;
}
.datepicker table tr td, .datepicker table tr th{
	height:$base*10;
}
/*=== 2.8 THUMBNAIL ===*/
.thumbnail{
	border: none;
	padding: 0;
	&.deals{
		overflow: hidden;
		position: relative;
		float: left;
		box-shadow: none;
		@include transition(all 0.3s ease-in-out);
		img{
			width: 100%;
		}
		.discountInfo{
			position: absolute;
			left: 0;
			top: 0;
			height: 263px;
			width: 100%;
			@include mobile-all{
				padding: $base 0 0 $base;
			}
			@include tablet{
				padding: $base 0 0 $base;
			}
			@include desktops{
				padding: $base*4 0 0 $base*4;
			}
			.discountOffer{
				@include border-radius(50%);
				background-color: $primary-color;
				@include mobile-all{
					margin-bottom: 40%;
					width: $base*12;
					padding: $base*3 0;
				}
				@include tablet{
					margin-bottom: $base*6;
					width: $base*12;
					padding: $base*3 0;
				}
				@include desktops{
					margin-bottom: $base*12;
					width: $base*15+1px;
					padding: $base-xs*9+1px 0;
				}
				@include large-desktops{
					margin-bottom: $base-xs*52;
					width: $base*15+1px;
					padding: $base-xs*9+1px 0;
				}
				h4{
					color: $white-color;
					text-align: center;
					margin: 0;
					text-transform: uppercase;
					@include mobile-all{
						font-size: $base-xs*7;
					}
					@include tablet{
						font-size: $base-xs*7;
					}
					@include desktops{
						font-size: $base-xs*9;
					}
					span{
						display: block;
					}
				}
			}
			.duration{
				margin-left: 0;
				position: absolute;
				left: $base*4;
				bottom: 65px;
				@include mobile{
					bottom: -30px;
				}
				@include tablet{
					bottom: 110px;
				}
				@include desktops{
					bottom: 60px;
				}
				@include large-desktops{
					bottom: 20px;
				}
				li{
					color: $white-color;
					font-weight: 700;
					@include add-border(1px, $white-color, right);
					line-height: $base*4+1px;
					float: left;
					@include tablet{
						font-size: $base*2+1px;
						padding: 0 $base*2;
					}
					@include desktops{
						font-size: $base*3;
						padding: 0 $base-xs*6;
					}
					&:first-child{
						padding-left: 0;
					}
					&:last-child{
						border-right: 0;
					}
				}
			}
			.dates{
				position: absolute;
		    top: 180px;
		    left: 20px;
				@include mobile{
					top: 260px
				}
				@include tablet{
					top: 150px;
				}
				@include desktops{
					top: 200px;
				}
				@include large-desktops{
					top: 155px;
				}
				li{
					color: #fff;
					text-transform: capitalize;
				}
			}
		}
		.discountCol-3{
			.rating{
				bottom: 80px;
				@include mobile{
					bottom: 0px;
				}
				@include tablet{
					bottom: 40px;
				}
				@include desktops{
					bottom: -20px;
				}
				@include large-desktops{
					bottom: 40px;
				}
			}
			.duration{
				bottom: 60px;
				@include mobile{
					bottom: -20px;
				}
				@include tablet{
					bottom: 20px;
				}
				@include desktops{
					bottom: -40px;
				}
				@include large-desktops{
					bottom: 20px;
				}
			}
		}
		.caption{
			padding: $base*6 $base*4;
			.captionTitle{
				font-size: $base*3;
				color: $text-title;
				text-transform: uppercase;
				font-weight: 700;
				margin: 0 0 $base*3 0;
				display: block;
				&:hover{
					@include opacity(1);
					color: $primary-color;
					&:focus{
						text-decoration: none !important;
					}
				}
				h4{
					font-size: $base*3;
					&:hover{
						color: $primary-color;
					}
				}
			}
			p{
				margin-bottom: $base*8;
			}
			.detailsInfo{
				display: inline-block;
				width: 100%;
				text-align: center;
				h5{
					float: left;
					line-height: $base*4+1px;
					margin: 0;
					color: $primary-color;
					font-weight: 400;
					font-size: $base*4;
					span{
						font-size: $base-xs*7;
						color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 2.9412);
						text-transform: capitalize;
						@include tablet{
							display: inline-block;
						}
						@include desktops{
							display: block;
						}
					}
					@include mobile-xs{
						display: block;
						width: 100%;
						margin-bottom: $base*2;
						text-align: center;
					}
					@include desktops{
						display: inline-block;
						width: auto;
						margin-bottom: 0;
						text-align: left;
					}
				}

			}
		}
		&.packagesPage{
			.discountCol-3{
				.rating{
					bottom: 80px;
					@include mobile{
						bottom: 0px;
					}
					@include tablet{
						bottom: 40px;
					}
					@include desktops{
						bottom: -30px;
					}
					@include large-desktops{
						bottom: 45px;
					}
				}
				.duration{
					bottom: 60px;
					@include mobile{
						bottom: -20px;
					}
					@include tablet{
						bottom: 20px;
					}
					@include desktops{
						bottom: -60px;
					}
					@include large-desktops{
						bottom: 25px;
					}
				}
				.dates{
					bottom: 60px;
					@include mobile{
						bottom: -20px;
					}
					@include tablet{
						bottom: 20px;
					}
					@include desktops{
						bottom: -40px;
					}
					@include large-desktops{
						bottom: 20px;
					}
				}

			}
			.discountOffer{
				@include mobile-all{
					margin-bottom: 40%;
					width: $base*12;
					padding: $base*3 0;
				}
				@include tablet{
					margin-bottom: $base*6;
					width: $base*12;
					padding: $base*3 0;
				}
				@include desktops{
					margin-bottom: $base*9;
					width: $base*14;
					padding: $base-xs*8 0;
				}
			}
			.rating{
				@include tablet{
					bottom: 110px;
				}
				@include desktops{
					bottom: 55px;
				}
				@include large-desktops{
					bottom: 105px;
				}
			}
			.duration{
				margin-left: 0;
				@include tablet{
					bottom: 90px;
				}
				@include desktops{
					bottom: 35px;
				}
				@include large-desktops{
					bottom: 88px;
				}
				li{
					color: $white-color;
					font-weight: 700;
					@include add-border(1px, $white-color, right);
					line-height: $base*4+1px;
					float: left;
					@include tablet{
						font-size: $base*2+1px;
						padding: 0 $base*2;
					}

					&:first-child{
						padding-left: 0;
					}
					&:last-child{
						border-right: 0;
					}
				}
			}
			.caption{
				.detailsInfo{
					.detailsBtn{
						.buttonTransparent{
							font-size: $base-xs*6+1px;
						}
					}
				}
			}
		}
		&:hover{
			@include box-shadow(0, 3px, 10px, rgba($black-color, 0.10));
		}
		&.hotelgrid{
			.discountCol-3{
				.dates{
					position: absolute;
			    top: 180px;
			    left: 20px;
					@include mobile{
						top: 265px;
					}
					@include tablet{
						top: 220px;
					}
					@include desktops{
						top: 285px;
					}
					@include large-desktops{
						top: 225px;
					}
				}
			}
		}
	}
	&.blogPostItem{
		position: relative;
		border: none;
		padding: 0;
		float: left;
		box-shadow: none;
		img{
			width: 100%;
			@include border-radius(4px);
		}
		.caption{
			padding: $base*6 $base*4;
			p{
				margin-bottom: $base*6;
			}
			.detailsInfo{
				display: inline-block;
				width: 100%;
				h4{
					display: inline-block;
					float: left;
				}
				h4{
					line-height: $base*4+1px;
					margin-bottom: 0;
					color: $primary-color;
					font-weight: 400;
					font-size: $base*4;
					span{
						font-size: $base-xs*7;
						color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 2.9412);
						text-transform: capitalize;
						@include tablet{
							display: inline-block;
						}
						@include desktops{
							display: block;
						}
					}
				}
			}
		}
	}
	&.citiesContent{
		margin-bottom: $base*16;
		.imageArea{
			margin-bottom: $base-xs*9;
			padding: 0 $base-xs*4+1px;
			position: relative;
			img{
				width: 100%;
				@include border-radius (4px);
			}
			.sticker{
				position: absolute;
				left: $base-xs*9+1px;
				top: $base*2;
				background-color: rgba($black-color, .35);
				@include border-radius(4px);
				color: $white-color;
				font-size: $base*3;
				font-weight: 700;
				padding: $base-xs*6 $base*4;
				text-transform: uppercase;
			}
		}
		.caption{
			.media{
				background-color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 40.1961);
				@include border-radius(4px);
				@include add-border(1px, lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 37.4510), all);
				@include mobile-all{
					margin-bottom: $base*6;
				}
				@include tablet{
					margin-bottom: 0;
				}
				.media-body{
					padding-left: $base*2;
					a{
						color: $text-title;
						font-size: $base-xs*9;
						line-height: $base-xs*12;
						text-transform: uppercase;
						margin: $base*3 0;
						display: block;
						font-weight: 400;
						&:hover{
							@include opacity(1);
							color: $primary-color;
						}
					}
					h4{
						color: $primary-color;
						font-size: $base-xs*9;
						line-height: $base-xs*12;
						text-transform: uppercase;
						margin-bottom: 0;
						font-weight: 400;
					}
				}
			}
		}
		.media-left{
			float: left;
		}
	}
}

.pageLink{
	width: 100%;
	height: 263px;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1000;
}
.pageLink:before{
	background-color: rgba(0, 0, 0, 1);
	content: '';
	width: 100%;
	height: 253px;
}
.marginExten{
	margin-left: -24px;
	margin-right: -24px;
}
.buttonArea{
	width: 100%;
	display: block;
	text-align: center;
	.buttonTransparent{
		height: $base*9;
		line-height: $base*9;
		@include mobile-all{
			margin-bottom: $base*6;
		}
		@include tablet{
			margin-bottom: 0;
		}
	}
	&.galleryBtnArea{
		text-align: left;
		padding: $base*12 0;
		.buttonTransparent{
			background-color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 40.1961);
			border-color:  lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 40.1961);
			color: $text-title;
			padding: 0 $base*6;
			&:hover{
				color: $white-color;
				background-color: $primary-color;
				border-color: $primary-color;
			}
		}
	}
}
.blogTitle{
	font-size: $base*4;
	color: $text-title;
	text-transform: capitalize;
	font-weight: 400;
	margin: 0 0 $base*4 0;
	display: block;
	&:hover{
		color: $primary-color;
	}
}
.blogInfo{
	margin-bottom: $base*5;
	li{
		font-size: $base-xs*6;
		line-height: $base-xs*9;
		color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 2.9412);
		i{
			margin-right: $base-xs*3;
		}
		a{
			color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 2.9412);
			&:hover{
				color: $primary-color;
			}
		}
	}
}
.rating{
	margin-left: 0;
	display: block;
	width: 100%;
	margin-bottom: $base;
	li{
		padding: 0;
		i{
			color: darken(desaturate(adjust-hue($primary-color, 18.4232), 0.7843), 5.8824);
		}
	}
}
.rating{
	&.homePage{
		margin-left: 0;
		display: block;
		width: 100%;
		position: absolute;
		left: $base*4;
		bottom: 80px;
		@include mobile{
			bottom: 0px;
		}
		@include tablet{
			bottom: 130px;
		}
		@include desktops{
			bottom: 80px;
		}
		@include large-desktops{
			bottom: 50px;
		}
		li{
			padding: 0;
			i{
				color: darken(desaturate(adjust-hue($primary-color, 18.4232), 0.7843), 5.8824);
			}
		}
	}
}
.detailsBtn{
	float: right;
	margin-top: $base;
	@include mobile-xs{
		display: block;
		width: 100%;
	}
	@include desktops{
		display: inline-block;
		width: auto;
	}
	li{
		padding: 0;
		.buttonTransparent{
			color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 2.9412);
			&:hover{
				color: $white-color;
			}
		}
	}
}
.btnArea{
	padding-top: $base*6;
	text-align: center;
}
/*=== 2.9 modal ===*/
.modal{
	&.bookingModal{
		.modal-dialog{
			@include mobile-all{
				width: auto;
			}
			@include tablet{
				width: $base-xs*201;
			}
			.modal-content{
				border: none;
				@include add-border(5px, $primary-color, top);
				.modal-header{
					border: none;
					.modal-title{
						@include border-radius($base-xs*3);
					}
				}
				.modal-body{
					@extend .form;
				}
			}
		}
	}
}
/*=== 2.10 PANEL ===*/
.packagesFilter{
	border: none;
	margin-bottom: $base*6;
	@include add-border($base, $primary-color, top);
	.panel-heading{
		background-color: $white-color;
		border: none;
		.panel-title{
			text-transform: uppercase;
			color: darken(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 42.5490);
			font-size: $base-xs*9;
			line-height: $base*5;
			border: none;
		}
	}
	.panel-body{
		padding-top: 0px;
		.buttonTransparent{
			color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 2.9412);
			&:hover{
				color: $white-color;
			}
		}
	}
}
/*=== 2.11 PRICE RANGE SLIDER ===*/
.priceRange{
	.progress{
		margin: $base*4 0 $base*4+5px 0;
		height: $base;
		background-color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 31.1765);
		position: relative;
		overflow: visible;
		.progress-bar{
			background-color: $secondary-color;
		}
		.bulet{
			width: 16px;
			height: 16px;
			background-color: $white-color;
			@include add-border(2px, $secondary-color, all);
			@include border-radius(100%);
			left: 0px;
			top: -5px;
			position: absolute;
			&.next{
				left: 60px;
			}
		}
	}
	.btn-default{
		display: none;
		height: 30px;
		line-height: 30px;
		padding: 0;
		text-transform: uppercase;
		background-color: $secondary-color;
		border-radius: 0;
		border: none;
		color: $white-color;
		font-weight: 700;
		@include mobile-xs{
			width: 82px;
			font-size: $base*2+4px;
		}
		@include mobile{
			width: 82px;
			font-size: $base*2+4px;
		}
		@include tablet{
			width: 50px;
			font-size: $base*2;
		}
		@include desktops{
			width: 45px;
			font-size: $base*2;
		}
		@include large-desktops{
			width: 82px;
			font-size: $base*2+4px;
		}
	}
	.priceLabel{
		float: right;
		line-height: 30px;
		color: $secondary-color;
		@include mobile{
			font-size: $base*2+4px;
		}
		@include tablet{
			font-size: $base*2+1px;
		}
		@include desktops{
			font-size: $base*2+4px;
		}
	}
}

.priceRange{
	position: relative;
	.price-slider-inner{
		display: block;
		margin: $base*2+5px 0 $base*4+5px 0;
		.amount-wrapper{
			display: none;
			position: absolute;
			bottom: 25px;
			right:20px;
			font-size: $base*2+4px;
			width: 120px;
			input{
				background-color: transparent;
				border: 0;
				width: 28%;
				font-size: $base*2+4px;
				color: $secondary-color;
				font-weight: 700;
				text-align: right;
			}
		}
		.ui-widget-content{
			background: none;
			border: 0;
			background-color: lighten(desaturate(adjust-hue($primary-color, -28.5333), 100.0000), 31.1765);
			height: 4px;
			clear: both;
			@include border-radius( $base-xs*2);
			margin: 0 $base*2 - 5px 0 $base-xs*4+1px;
			.ui-slider-range{
				background-color: $primary-color;
				border: none;
				border-radius: 0;
			}
			.ui-slider-handle{
				@include border-radius (50%);
				background: none;
				@include add-border(3px, $primary-color, all);
				background-color: $primary-color;
				top: -6px;
				width: 16px;
				height: 16px;
				outline: none;
			}
		}
	}
}
.media-left{
	display: inline-block;
	float: left;
}


/*=== 2.12 SELECT BOX ===*/

/* SEARCH TOUR */
.searchTour .sbHolder, .searchTour .sbSelector{
	width: 100% !important;
	height: 45px !important;
}

.searchTour .sbHolder{
	background-color: transparent;
	border: none;
	border-bottom: 1px solid rgba(222, 222, 222, .3);
	margin: 4px 0 0 0;
}
.searchTour .sbSelector:link,
.searchTour .sbSelector:visited,
.searchTour .sbSelector:hover{
	color: rgba(255, 255, 255, .3) !important;
	text-transform: uppercase;
}
.searchTour .sbSelector{
	font-family: "Montserrat",sans-serif;
	font-size: 12px;
	line-height: 42px;
	text-indent: 0px;
}
.searchTour .sbToggle {
	background: rgba(0, 0, 0, 0) url("../plugins/selectbox/images/arrow-down-1.png") no-repeat scroll 0 0;
	height: 5px;
	right: 4px;
	top: 22px;
	width: 9px;
}
.searchTour .sbOptions{
	width: 100% !important;
	background-color: #ffffff;
	border: 1px solid #e5e5e5;
	right: 0 !important;
	@include border-radius (4px);
	z-index: 100;
}
.searchTour .sbOptions li{
	padding: 4px;
	border-bottom: 1px solid #e5e5e5;
}
.searchTour .sbOptions li:last-child{
	border-bottom: none;
}
.searchTour .sbOptions a{
	color: #969696 !important;
	font-family: "Montserrat",sans-serif;
	font-size: 12px;
	padding: 11px 17px;
	text-transform: uppercase;
}
.searchTour .sbOptions a:hover{
    color: #ff891e !important;
    background-color: #f5f5f5;
}

/* SEARCH FILTER */
.searchFilter .sbHolder, .searchFilter .sbSelector{
	width: 100% !important;
	height: 45px !important;
}

.searchFilter .sbHolder{
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #dedede;
	margin: 4px 0 20px 0;
}
.searchFilter .sbSelector:link,
.searchFilter .sbSelector:visited,
.searchFilter .sbSelector:hover{
	color: #969696 !important;
	text-transform: uppercase;
}
.searchFilter .sbSelector{
	font-family: "Montserrat",sans-serif;
	font-size: 12px;
	line-height: 42px;
	text-indent: 0px;
}
.searchFilter .sbToggle {
	background: rgba(0, 0, 0, 0) url("../plugins/selectbox/images/arrow-down-2.png") no-repeat scroll 0 0;
	height: 5px;
	right: 4px;
	top: 22px;
	width: 9px;
}
.searchFilter .sbOptions{
	width: 100% !important;
	background-color: #ffffff;
	border: 1px solid #e5e5e5;
	right: 0 !important;
	@include border-radius (4px);
	z-index: 100;
}
.searchFilter .sbOptions li{
	padding: 4px;
	border-bottom: 1px solid #e5e5e5;
}
.searchFilter .sbOptions li:last-child{
	border-bottom: none;
}
.searchFilter .sbOptions a{
	color: #969696 !important;
	font-family: "Montserrat",sans-serif;
	font-size: 12px;
	padding: 11px 17px;
	text-transform: uppercase;
}
.searchFilter .sbOptions a:hover{
    color: #ff891e !important;
    background-color: #f5f5f5;
}

/* BOOKING DROP */
.bookingDrop .sbHolder, .bookingDrop .sbSelector{
	width: 100% !important;
	height: 45px !important;
}

.bookingDrop .sbHolder{
	background-color: #f5f5f5;
	border: none;
	margin: 4px 0 20px 0;
	@include border-radius (4px);
}
.bookingDrop .sbSelector:link,
.bookingDrop .sbSelector:visited,
.bookingDrop .sbSelector:hover{
	color: #969696 !important;
	text-transform: capitalize;
}
.bookingDrop .sbSelector{
	font-family: "Montserrat",sans-serif;
	font-size: 12px;
	line-height: 42px;
	text-indent: 12px;
}
.bookingDrop .sbToggle {
	background: rgba(0, 0, 0, 0) url("../plugins/selectbox/images/booking-drop.png") no-repeat scroll 0 0;
	height: 45px;
	right: 0px;
	top: 0px;
	width: 25px;
}
.bookingDrop .sbOptions{
	width: 100% !important;
	background-color: #ffffff;
	border: 1px solid #e5e5e5;
	right: 0 !important;
	@include border-radius (4px);
	z-index: 100;
}
.bookingDrop .sbOptions li{
	padding: 4px;
	border-bottom: 1px solid #e5e5e5;
}
.bookingDrop .sbOptions li:last-child{
	border-bottom: none;
}
.bookingDrop .sbOptions a{
	color: #969696 !important;
	font-family: "Montserrat",sans-serif;
	font-size: 12px;
	padding: 11px 17px;
	text-transform: uppercase;
}
.bookingDrop .sbOptions a:hover{
    color: #ff891e !important;
    background-color: #f5f5f5;
}

/* PRIMARY DROP */
.primaryDrop .sbHolder,
.primaryDrop .sbSelector{
	width: 100% !important;
	height: 45px !important;
}

.primaryDrop .sbHolder{
	background-color: #ff891e;
	border: none;
	margin: 20px 0 0 0;
	@include border-radius (4px);
}
.primaryDrop .sbSelector:link,
.primaryDrop .sbSelector:visited,
.primaryDrop .sbSelector:hover{
	color: #fff !important;
	text-transform: uppercase;
}
.primaryDrop .sbSelector{
	font-family: "Montserrat",sans-serif;
	font-size: 14px;
	line-height: 46px;
	text-indent: 20px;
}
.primaryDrop .sbToggle {
	background: rgba(0, 0, 0, 0) url("../plugins/selectbox/images/primary-drop.png") no-repeat scroll 0 0;
	height: 6px;
	right: 20px;
	top: 21px;
	width: 9px;
}
.primaryDrop .sbOptions{
	width: 100% !important;
	background-color: #ffffff;
	border: 1px solid #e5e5e5;
	right: 0 !important;
	@include border-radius (4px);
	z-index: 100;
}
.primaryDrop .sbOptions li{
	padding: 4px;
	border-bottom: 1px solid #e5e5e5;
}
.primaryDrop .sbOptions li:last-child{
	border-bottom: none;
}
.primaryDrop .sbOptions a{
	color: #969696 !important;
	font-family: "Montserrat",sans-serif;
	font-size: 12px;
	padding: 11px 17px;
	text-transform: uppercase;
}
.primaryDrop .sbOptions a:hover{
    color: #ff891e !important;
    background-color: #f5f5f5;
}

/* LIGHT DROP */
.lightDrop .sbHolder,
.lightDrop .sbSelector{
	width: 100% !important;
	height: 45px !important;
}

.lightDrop .sbHolder{
	background-color: #ededed;
	border: none;
	margin: 20px 0 0 0;
	@include border-radius (4px);
}
.lightDrop .sbSelector:link,
.lightDrop .sbSelector:visited,
.lightDrop .sbSelector:hover{
	color: #222222 !important;
	text-transform: uppercase;
}
.lightDrop .sbSelector{
	font-family: "Montserrat",sans-serif;
	font-size: 14px;
	line-height: 46px;
	text-indent: 20px;
}
.lightDrop .sbToggle {
	background: rgba(0, 0, 0, 0) url("../plugins/selectbox/images/light-drop.png") no-repeat scroll 0 0;
	height: 6px;
	right: 20px;
	top: 21px;
	width: 9px;
}
.lightDrop .sbOptions{
	width: 100% !important;
	background-color: #ffffff;
	border: 1px solid #e5e5e5;
	right: 0 !important;
	@include border-radius (4px);
	z-index: 100;
}
.lightDrop .sbOptions li{
	padding: 4px;
	border-bottom: 1px solid #e5e5e5;
}
.lightDrop .sbOptions li:last-child{
	border-bottom: none;
}
.lightDrop .sbOptions a{
	color: #969696 !important;
	font-family: "Montserrat",sans-serif;
	font-size: 12px;
	padding: 11px 17px;
	text-transform: uppercase;
}
.lightDrop .sbOptions a:hover{
    color: #ff891e !important;
    background-color: #f5f5f5;
}

/* TRANSPARENT DROP */
.transparentDrop .sbHolder,
.transparentDrop .sbSelector{
	width: 100% !important;
	height: 45px !important;
}

.transparentDrop .sbHolder{
	background-color: transparent;
	border: none;
	margin: 20px 0 0 0;
	@include border-radius (4px);
	border: 1px solid #dedede;
}
.transparentDrop .sbSelector:link,
.transparentDrop .sbSelector:visited,
.transparentDrop .sbSelector:hover{
	color: #222222 !important;
	text-transform: uppercase;
}
.transparentDrop .sbSelector{
	font-family: "Montserrat",sans-serif;
	font-size: 14px;
	line-height: 46px;
	text-indent: 20px;
}
.transparentDrop .sbToggle {
	background: rgba(0, 0, 0, 0) url("../plugins/selectbox/images/light-drop.png") no-repeat scroll 0 0;
	height: 6px;
	right: 20px;
	top: 21px;
	width: 9px;
}
.transparentDrop .sbOptions{
	width: 100% !important;
	background-color: #ffffff;
	border: 1px solid #e5e5e5;
	right: 0 !important;
	@include border-radius (4px);
	z-index: 100;
}
.transparentDrop .sbOptions li{
	padding: 4px;
	border-bottom: 1px solid #e5e5e5;
}
.transparentDrop .sbOptions li:last-child{
	border-bottom: none;
}
.transparentDrop .sbOptions a{
	color: #969696 !important;
	font-family: "Montserrat",sans-serif;
	font-size: 12px;
	padding: 11px 17px;
	text-transform: uppercase;
}
.transparentDrop .sbOptions a:hover{
    color: #ff891e !important;
    background-color: #f5f5f5;
}

.primaryDrop.addCircle .sbHolder,
.lightDrop.addCircle .sbHolder,
.transparentDrop.addCircle .sbHolder{
	@include border-radius (25px);
}

/* HOTEL SELECT BOX */
.searchHotel{
	.sbHolder{
		width: 220px;
		height: 45px;
		background-color: transparent;
		line-height: 45px;
		@include add-border(1px, $white-color, all);
		@include border-radius(5px);
		font-family: "Montserrat",sans-serif;
		.sbToggle{
			background-image: url(../plugins/selectbox/images/primary-drop.png);
			background-repeat: no-repeat;
			top: 19px;
		}
		.sbSelector{
			line-height: 45px;
			color: #fff !important;
			text-transform: uppercase;
			width: 100%;
			li{
				a{
					color: #969696;
			    font-size: 12px;
			    float: none;
			    width: 100%;
			    background-color: transparent;
					padding: 10px 12px;
				}
			}

		}
		.sbOptions{
			right: auto;
			left: 1px;
			width: 100% !important;
			top: 44px !important;
			li{
				a{
					color: #969696;
			    font-size: 12px;
			    float: none;
			    width: 100%;
			    background-color: transparent;
					padding: 10px 12px;
					font-family: "Montserrat",sans-serif;

					&:hover{
						color: $primary-color !important;
					}
				}
			}
		}
	}

}

// AMAZING SELECT BOX
.amazingSelectbox{
	display: flex;
	flex-direction: column;
	align-items: center;
	@include tablet{
		display: inline-block;

	}
	@include desktops{
		display: flex;
		flex-wrap: nowrap;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
	}
	.searchHotel{
		margin-bottom: 20px;
		&:last-child{
			margin-right: 0 !important;
		}
		@include tablet{
			float: left;
			margin: 0 auto;
			margin-bottom: 20px;
		}

		.ed-datepicker{
			@include add-border(1px, rgb(222, 222, 222), all);
			@include border-radius(5px);
			margin-top: 0;
			width: 220px;
			margin-right: 10px;
			.form-control{
				padding: 0 15px;
				color: #fff;
				&::-webkit-input-placeholder{
					font-size: $base-xs*7;
					font-weight: 400;
					text-transform: uppercase;
					color: #fff;
				}
				&::-moz-placeholder{
					font-size: $base-xs*7;
					font-weight: 400;
					text-transform: uppercase;
					color: #fff;
				}
				&:-ms-input-placeholder{
					font-size: $base-xs*7;
					font-weight: 400;
					text-transform: uppercase;
					color: #fff;
				}
			}
			.input-group-addon{
				span{
					color: #fff;
					padding-right: 15px;
				}
			}
		}
	}
		.searchHotelBtn{
		.buttonCustomPrimary{
			padding: 0 20px;
			width: 222px;
			margin-right: 10px;
			@include tablet{
				margin-right: 0px;
				margin-bottom: 20px;
			}
			@include desktops{
				width: 124px
			}
			&:hover{
				background-color: transparent;
				color: #fff;
				@include add-border(1px, #fff, all);
			}
		}
	}


}

// SUBSCRIB SElECT BOX
.subscribSection{
	.amazingSelectbox{
		display: flex;
		flex-direction: column;
		align-items: center;
		@include tablet{
			flex-direction: row;

		}
		@include desktops{
			justify-content: space-around;
			align-items: center;
		}
		.subscribInput{
			float: left;
			margin-right: 5px;
			input[type="email"]{
				width: 250px;
				@include tablet{
					width: 230px;
				}
				@include desktops{
					width: 340px;
				}
				@include large-desktops{
					width: 350px;
				}

				height: 45px;
				background-color: transparent;
				@include add-border(1px, #fff, all);
				margin-bottom: 20px;
				display: inline-block;
			}
			input{
				&::-webkit-input-placeholder{
					color: #fff;
				}
				&::-moz-placeholder{
					color: #fff;

				}
				&:-ms-input-placeholder{
					color: #fff;
				}
			}
		}
		.searchHotel{
			.sbHolder{
				width: 250px;
				@include tablet{
					width: 230px;
				}
				@include desktops{
					width: 240px;
				}
				@include large-desktops{
					width: 250px;
				}
			}
		}

		.searchHotelBtn{
			.buttonCustomPrimary{
				width: 250px;
				@include tablet{
					width: auto;
				}
				@include large-desktops{
					width: 175px;
				}

				background-color: #fff;
				color: $primary-color !important;

				&:hover{
					background-color: transparent;
					color:  #fff !important;
				}
			}
		}

	}
}


/*=== 2.13 INPUT TYPE TEXT ===*/

.inputText{
	@include add-border(1px, #dedede, bottom);
	height: 45px;
	.input-group{
		.input-label{
			position: absolute;
	    top: 50%;
	    left: 0px;
	    z-index: 20;
	    transform: translate(0, -50%);
		}
	}
	.form-control{
		border-color: transparent;
		box-shadow: none;
		padding: 6px 0px;
		height: 44px;
		position: relative;
		&::-webkit-input-placeholder{
			font-size: $base-xs*6;
			font-weight: 400;
			text-transform: uppercase;
		}
		&::-moz-placeholder{
			font-size: $base-xs*6;
			font-weight: 400;
			text-transform: uppercase;
		}
		&:-ms-input-placeholder{
			font-size: $base-xs*6;
			font-weight: 400;
			text-transform: uppercase;
		}

	}
}