@import "variables.less";


/* Less Classes */

.white{
	color: @white;	
}

.whitebg{
	background-color: @white;
	background: @white;
}

.basefont{
	font-family: @basefont;
}

.cmfontsize{
	font-size: @cmfontsize;
}

.hoverbg{
	background-color: @hoverbgcolor;
	background: @hoverbgcolor;
}

.black{
	color: @black;
}

.blackbg{
	background-color: @black;
	background: @black;
}

.radius{
	border-radius: @radius;
}

.radiusnone{
	border-radius: @radiusnone;
}

.block{
	display: block;
}

.inlineblock{
	display: inline-block;
}

.textcenter{
	text-align: center;
}

.transparent{
	background: transparent;
	background-color: transparent;
}

.green{
	color: @green;
}

.greenbg{
	background: @green;
	backgrond-color: @green;
}

.marginnone{
	margin: @marginnone;
}

.mar-top-none{
	margin-top: @mar-top-none !important;
}

.smallfont{
	font-size: @smallfont;
}

.secondfont{
	font-family: @secondfont;
}

.italic{
	font-style: @italic;
}

.basefontlight{
	font-family: @basefontlight;
}

.whiteborder{
	border-color: @whiteborder;
}

.overflow{
	overflow: @overflow;
}

.blackborder{
	border-color : @blackborder;
}

.linkcolor{
	color: @linkcolor;
}

.relative{
	position: @relative;
}

.thirdfont{
	font-family: @thirdfont;
}

.underline{
	text-decoration: @underline;
}

.transition{
	transition: all 300ms;
	-webkit-transition: all 300ms;
	-moz-transition: all 300ms;
	-ms-transition: all 300ms;
}

.center{
	text-align: @center;
}

.pa-none{
	padding: @pa-none;
}

.lightblue{
	color: @lightblue;
}

.basefontcolor{
	color: @basefontcolor;
}

.headingfontcolor{
	color: @headingfontcolor;
}

.absolute{
	content: " ";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.grey{
	color: @grey;
}

.transparentbg{
	background: @transparentbg;
	background-color: @transparentbg;
}

/* Typography */

body{
	.whitebg;
	.basefont;
	.cmfontsize;
	.basefontcolor;
	.relative;

	font-weight: 400;
	line-height: 24px;
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6{
	.basefont;
	.headingfontcolor;
}

a:hover, 
a:focus, 
a:active{
	text-decoration: none;
}

.hover-bg:hover, 
.hover-bg:focus, 
.hover-bg:active{
	.hoverbg;
}

.b{
	border: 1px solid @bordercolor;
}

.b-b{
	border-bottom: 1px solid @bordercolor;
}

.b-t{
	border-top: 1px solid @bordercolor;
}

b-r{
	border-right: 1px solid @bordercolor;
}

b-l{
	border-left: 1px solid @bordercolor;
}

.pointer{
	cursor: pointer;
}

.ib{
	display: inline-block !important;
}

.btn-default{
	.lightblue;
	.radiusnone;
	.transition;

	border: 1px solid @lightblue;
	font-size: 18px;
    padding: 14px 55px;

    &:hover, 
    &:focus, 
    &:active{
    	.white;

    	background: @lightblue;
    	background-color: @lightblue;
    	border-color: @lightblue;
    } 
}

ul{
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0;
}

ul li a{
	.smallfont;
}

.container-fluid{
	.overflow;

}

.uppercase{
	text-transform: uppercase;
}

address{
	.smallfont;

	color: #525252;
	font-weight: 600;
	line-height: 24px;

	a{
		color: #525252;

		&:hover{
			.linkcolor;
		}
	}
}

.section-title{
    margin-top: 65px;
	margin-bottom: 50px;

    .title{
    	.lightblue;

    	font-weight: 600;
    }
}

.section-title .heading{
	.black;
	.italic;
	.marginnone;

	font-family: @basefontlight;
	padding-bottom: 18px;
	border-bottom: 1px solid @blackborder;
}

.readmore{
	font-size: 18px;

	&:hover, 
	&:active, 
	&:focus{
		.linkcolor;
	}
}

.scroll-down{
	.black;
	.basefontlight;
	.b-b;
	.transition;

	font-size: 18px;
	border-color: @black;
	padding-bottom: 3px;
	

	i{
		margin-left: 5px;
	}

	&:hover, 
	&:active, 
	&:focus{
		.linkcolor;

		border-color: @linkcolor;
	}
}

.btn-large{
	.transition;

	font-size: 30px;
    padding: 25px 80px;
    border: 3px solid #5a5a5a;

    &:hover{
    	.whitebg;
    	.linkcolor;

    	border-color: @linkcolor;
    }
}



.form-control{
	height: 60px;
}

input.form-control{
	padding: 0 12px;	
}

textarea.form-control{
	padding: 20px 12px;	
}

input:-moz-placeholder {
    .basefontcolor;
}


@media (min-width: 768px) {

.sm-pa-r-none{
	padding-right: 0;
}

.sm-pa-l-none{
	padding-left: 0;
}

.page-content #essential-link-sub-details .single {
    padding-left: 50px;
    padding-right: 40px;
}

}

.no-border{
	border: 0 !important;
}

section{
	.relative;
}


/* Bootstrap Five Columns */

.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-15 {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-15 {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-15 {
        width: 20%;
        float: left;
    }
}

/* Home Page  */

#header{
	height: 72px;

	.navbar-default {
	    background-color: #5c6e96;
	    background: #5c6e96;

	    &.navbar-fixed-top{
	    	border-width: 0;
	    }

	    &.navbar{
	    	margin-bottom: 0;
	    	z-index: 99999;
	    }

	    .navbar-brand {
		    height: 72px;
		    padding: 26px 15px;
	    }

	    .navbar-nav{
	    	li{
	    		a{
	    			.white;

	    			padding: 26px 17px;

	    			&:hover, 
	    			&:focus, 
	    			&:active, 
	    			&.active{
	    				.linkcolor;
	    			} 
	    		}
	    	}
	    }
	}	
}


#slider-carousel{
	.overflow;

	#main-slider.flexslider .slides img{
		margin-top: -72px;
	}
}

#welcome{
	padding-top: 60px;
	padding-bottom: 75px;

	h2{
		margin-bottom: 20px;
		margin-top: 0;
	}
}

#team{
	background-image: url('../images/team-bg.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding-bottom: 10px;
    padding-top: 15px;

	&:before{
		.absolute;

	    background: rgba(92, 110, 150, 0.9);
	    background-color: rgba(92, 110, 150, 0.9);
	}

	.section-title{
		.title{
			font-weight: 400;
		}
	}

	h2, 
	h5{
		.white;
	}

	.team{
		.relative;

		padding-left: 32px;
		margin-bottom: 17px;

		.heading{
			margin-bottom: 22px;

			&:before{
				position: absolute;
				content: "";
				left: 0;
				top : 0;
				width: 17px;
				height: 15px;
			}
		}

		&.executive-office .heading:before{
			background: #bd7c7c;
			background-color: #bd7c7c;
		}

		&.sales-team .heading:before{
			background: #b5a57a;
			background-color: #b5a57a;
		}

		&.management-team .heading:before{
			background: #7ba97b;
			background-color: #7ba97b;
		}

		.cm-margin-bottom{
			margin-bottom: 23px;
		}

		h5{
			margin: 7px 0;
		}
	}
}

#hotels{
	padding-bottom: 100px;

	.bx-wrapper{
		margin-bottom: 45px !important;

		.bx-controls-direction a{
			top: 115px;
		}

		.bx-next{
			right: -80px;
		}

		.bx-prev{
			left: -70px;
		}

	}
}

.our-hotels{
	.overflow;;

	.content{
		margin-top: 15px;
	}
}

.hotel-description>a{	
	.relative;
	.overflow;

	display: block;
	-webkit-transition: color 400ms, background-color 400ms;
    -moz-transition: color 400ms, background-color 400ms;
    -ms-transition: color 400ms, background-color 400ms;
    -o-ransition: color 400ms, background-color 400ms;
    transition: color 400ms, background-color 400ms;
	-webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;

    &:before{
	    position: absolute;
	    content: "";
	    top: 15px;
	    left: 15px;
	    right: 15px;
	    bottom: 15px;
	    border: 1px solid #fff;
	    z-index: 1;
	    opacity: 0;
	    -webkit-transition: all 300ms;
	    -moz-transition: all 300ms;
	    -o-transition: all 300ms;
	    transition: all 300ms;
    }

    &:after{
	    position: absolute;
	    content: "";
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    opacity: 0;
	    background-color: rgba(98, 192, 75, 0.5);
	    background: rgba(98, 192, 75, 0.5);
	    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	    -moz-transition: opacity 0.35s, -webkit-transform 0.35s;
	    -ms-transition: opacity 0.35s, -webkit-transform 0.35s;
	    -o-transition: opacity 0.35s, -webkit-transform 0.35s;
	    transition: opacity .35s,transform .35s;
    }

    &:hover:before{
    	top: 30px;
	    left: 30px;
	    right: 30px;
	    bottom: 30px;
    }

    &:hover:before, 
    &:hover:after{
    	opacity: 1;
    }

    img{
	    webkit-transform: scale(1);
	    -moz-transform: scale(1);
	    -ms-transform: scale(1);
	    -o-transform: scale(1);
	    transform: scale(1);
	    -webkit-transition: all 300ms;
	    -moz-transition: all 300ms;
	    -o-transition: all 300ms;
	    transition: all 300ms;
    }

    &:hover img{
	    webkit-transform: scale(1.2);
	    -moz-transform: scale(1.2);
	    -ms-transform: scale(1.2);
	    -o-transform: scale(1.2);
	    transform: scale(1.2);
    }
}



#promotion{
	background: @lightblue;
	background-color: @lightblue;
	padding-top: 40px;
    padding-bottom: 70px;

    h3{
    	margin-bottom: 0;
    }

    .grey{
    	margin-top: 10px;
    }

    .under-construction {
    	border-bottom: 1px solid #7483a5;
    	padding-bottom: 24px;
    	margin-bottom: 16px;
    }
}

#testimonial{
	padding-top: 50px;
	padding-bottom: 75px;

	.section-title{
		margin-top: 27px;
		margin-bottom: 30px;
	}

	p{
		color: #666666;
	}

	h5{
		margin-top: 25px;
	}
}

#careers{
	.career-content{
		padding-left: 90px;
	    padding-bottom: 65px;
	    padding-top: 90px;

		.section-title{
			margin-bottom: 20px;
		}
	}
}

#footer{
	.blackbg;

	padding-bottom: 88px;

	.section-title{
		.title{
			.white;
		}
	}

	h4{
		font-weight: 400;
		margin-top: 0;

		span{
			font-weight: 600;
		}
	}

	address{
		font-weight: 400;
	}
}

.contact-form{
	input[type="text"], 
	input[type="email"]{
		.blackbg;
		.radiusnone;

		border: 1px solid #555555;
		box-shadow: none;
		-moz-box-sizing: border-box;
		width: 100%;
	}

	textarea{
		.blackbg;
		.radiusnone;

		border: 1px solid #555555;
		box-shadow: none;
		-moz-box-sizing: border-box;
		width: 100%;
	}

	.btn-default{
		.white;
		.transparentbg;

		font-size: 14px;
		border: 1px solid #555555;

		&:hover, 
		&:focus, 
		&:active{
			background: @lightblue;
			background-color: @lightblue;
			border-color: @lightblue;
		} 
	}
}

#testimonial-carousel{
	.carousel-indicators{
		li{

		}
	}
}

.carousel-indicators {
	bottom: -50px;

	li, 
	li.active{
		.relative;

		width: 15px;
	    height: 15px;
	    background-color: rgba(0, 0, 0, 0.5);
	    background: rgba(0, 0, 0, 0.5);
	    border: 0;
	    border-radius: 50%;
	    margin: 0 3px;

	    &:before{
		    position: absolute;
		    content: "";
		    background: #fff;
		    width: 5px;
		    height: 5px;
		    border-radius: 50%;
		    top: 50%;
		    margin-top: -2.5px;
		    left: 50%;
		    margin-left: -2.5px;
		    opacity: 0;
	    }

	    &:hover:before{
	    	opacity: 1;
	    }
	}

	li.active{
		.blackbg;

		&:before{
			opacity: 1;
		}
	}

}


/* Hotels Page */

.hotels-page{
	.our-hotels{
		.hotel-description{
			margin-bottom: 20px;
		}
	}
}

/* Flexslider Customize */

.flexslider {
    margin: 0;
    border: 0;
}

.flex-direction-nav a {
    width: 30px;
    height: 60px;
    line-height: 60px;
    margin: -33px 0 0;

   	&:hover, 
    &:active, 
    &:focus{
    	outline: none;
    }

    &:before{
    	.white;

		font-family: 'fontawesome';
	    content: "\f104";
	    font-size: 80px;
    }

    &.flex-next:before{
    	content: "\f105";
    }
}

#gallery-carousel{
	.blackbg;
	.radiusnone;

	padding: 20px 0;

	.flex-direction-nav{
		a{
		    width: 12px;
		    height: 18px;
		    line-height: 18px;
		    margin: -9px 0 0;

		    &:before{
		    	content: "\f0d9";
    			font-size: 30px;
		    }

		    &.flex-next:before{
		    	content: "\f0da";
		    }
		}
	}

	&.flexslider {
		.slides{
			li{
				margin: 0 8px;
			}
		}
	} 
}


/* Bx Slider */

.bx-wrapper .bx-viewport{
	box-shadow: none;
    border: 0;
}