/*================= 6. HOME ==================*/
@import 'header';
@import 'footer';
/*=== 6.1 BANNER ===*/

/* Home Slider 1 */
#rev_slider_wrapper1{
	#rev_slider_container{
		.slide-layer-4{
			a{
				color: #fff;
			}
			text-transform: uppercase;
			background-color: $primary-color;
			border: 0;
			&:hover{
				background: $primary-color;
				cursor: pointer;
			}
		}
	}
}

/*  HOME CITY SLIER */
#rev_slider_wrapper2{
	#rev_slider_container{
		.slide-layer-1{
			font-weight: 700;
			line-height: 55px;
			color: #fff;
			text-transform: uppercase;
			z-index: 10;

		}
		.slide-layer-2{
			font-size: 20px;
			font-weight: 400;
			line-height: 21px;
			color: #fff;
			z-index: 10;
		}

		.slide-layer-3{
			color: #fff;
			text-transform: uppercase;
			border: 2px solid #fff;
			&:hover{
				background: $primary-color;
				border: 2px solid $primary-color;
				cursor: pointer;
			}
			&:focus{
				text-decoration: none;
			}
		}
		.slide-layer-4{
			color: #fff;
			text-transform: uppercase;
			border: 2px solid #fff;

			&:hover{
				background: $primary-color;
				border: 2px solid $primary-color;
				cursor: pointer;
			}
			&:focus{
				text-decoration: none;
			}
		}
	}
}

/* HOME DESTINATION SLIDER */

#rev_slider_wrapper3{
	#rev_slider_container{

		.slide-layer-2{
			text-transform: uppercase;
		}
		.slide-layer-3{
			.container-container-custom{
				width: 530px !important;
				margin-left: -15px;
				margin-right: -15px;
			}
		}
		.tp-rightarrow{
			display: none;
		}
		.tp-leftarrow{
			display: none;
		}
		.tp-bullet{
			display: none;
		}
	}
}
.bannercontainer{
	.rev_slider_wrapper{
		.fullscreenbanner{
			position: relative;
			.tp-dottedoverlay.twoxtwo {
				background: rgba(0, 0, 0, 0.15);
				background-image: none!important;
				z-index: 1;
			}
			font-family: 'Montserrat', sans-serif;

			&:hover{
				.tp-rightarrow.tparrows,
				.tp-leftarrow.tparrows {
					display: block;
				}
			}

			.tp-rightarrow{
				&.tparrows{
					left: 101.5% !important;
					display: none;
					border-radius: 0;
					@include tablet{
						width: 60px;
						height: 60px;
					}
					@include desktops{
						width: 85px;
						height: 85px;
					}
					background-color: rgba(255, 255, 255, 0.1);
					&:hover{
						background-color: rgba(255, 255, 255, 0.1);
					}
					&:before{
						content: '\e825';
						@include tablet{
							line-height: 60px;
						}
						@include desktops{
							line-height: 85px;
						}
					}
				}
			}

			.tp-leftarrow{
				&.tparrows{
					display: none;
					left: -20px !important;
					border-radius: 0;
					@include tablet{
						width: 60px;
						height: 60px;

					}
					@include desktops{
						width: 85px;
						height: 85px;
					}
					background-color: rgba(255, 255, 255, 0.1);
					&:hover{
						background-color: rgba(255, 255, 255, 0.1);
					}
					&:before{
						content: '\e824';
						@include tablet{
							line-height: 60px;
						}
						@include desktops{
							line-height: 85px;
						}
					}
				}
			}
			.tp-bullets{
				top: 97% !important;
				opacity: 1 !important;
				height: auto !important;
				@include desktops {
					bottom: $base*6 !important;
				}
				.tp-bullet{
					background: rgba(255, 255, 255, 0.5) !important;
					@include border-radius (50%);
					box-shadow: none!important;
					width: 6px !important;
					height: 6px !important;
					border: 2px solid rgba(255, 255, 255, 0.0) !important;
					display: inline-block;
					margin-bottom: 0px !important;
					@include transition (background-color 0.2s, border-color 0.2s);
					float: none !important;
					&.selected{
						box-shadow: none!important;
						background: rgba(255,255,255,0)!important;
						width: 14px!important;
						height: 14px!important;
						border: 2px solid white!important;
						margin-right: 0px!important;
						margin-left: -4px!important;
						margin-bottom: -3px!important;
						margin-top: -3px;
					}
					&.hover{
						box-shadow: none!important;
						background: rgba(255, 255, 255, 0.0) !important;
						width: 14px !important;
						height: 14px !important;
						border: 2px solid rgba(255, 255, 255, 1) !important;
						margin-bottom: -3px!important;
					}
				}
			}

		}
	}
}

/*=== 6.2 PROMOTION ===*/
.promotionWrapper{
	background-image: url("../img/home/promotion/promotion-1.jpg");
	background-attachment: fixed;
	width: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center;
	color: #ffffff;
	height: $base*80+3px;
	.promotionTable{
		display: table;
		height: $base*80+3px;
		width: 100%;
		.promotionTableInner{
			display: table-cell;
			vertical-align: middle;
			text-align: center;
			.promotionInfo{
				text-align: center;
				span{
					line-height: $base*4+1px;
					color: $white-color;
					text-transform: uppercase;
					font-size: $base-xs*9;
				}
				h2{
					font-size: $base-xs*13;
					line-height: $base-xs*16+1px;
					color: $white-color;
					margin-bottom: $base*8;
					margin: $base*2 0 $base*8 0;
				}
				.rating{
					li{
						color: darken(desaturate(adjust-hue($primary-color, 18.4232), 0.7843), 5.8824);
						padding: 0;
					}
				}
				p{
					font-size: $base-xs*9;
					line-height: $base*4+1px;
					margin: 0 0 $base*4 0;
					color: $white-color;
				}
				.buttonCustomPrimary{
					padding: 0 $base-xs*8;
				}
			}
		}
	}
}
/*=== 6.3 COUNT UP ===*/
.countUpSection{
	background-image: url("../img/home/promotion/promotion-2.jpg");
	background-attachment: fixed;
	width: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-position: center center !important;
	color: #ffffff;
	padding: $base*26 0;
	.icon{
		width: $base-xs*48;
		height: $base-xs*48;
		background-color: rgba($primary-color, .9);
		@include border-radius(100%);
		display: inline-block;
		margin-bottom: $base*3;
		i{
			font-size: $base*8+2px;
			line-height: $base-xs*48;
		}
	}
	.counter{
		line-height: $base*8;
		@include mobile-all{
			font-size: $base*6+2px;
		}
		@include tablet{
			font-size: $base*10+2px;
		}
	}
	h5{
		line-height: $base*4+1px;
		text-transform: uppercase;
		@include mobile-all{
			font-size: $base-xs*6+1px;
		}
		@include tablet{
			font-size: $base*3;
		}
	}
}