/*
Template: Printer
category: Hotel
Author: Codelayers
Version: 1.0
Design and Developed by: Codelayers
*/


/*
======================================
[ CSS TABLE CONTENT ]
======================================

    [Table of contents]

	1.feature boxes
	2.parallax sections
	3.footer styles

	
======================================
[ END CSS TABLE CONTENT ]
======================================
*/

/*============ Feature boxes ============ */
/* feature box 1
 ------------------------------ */
.hl-feature-box-1{
	position:relative;
	width:550px;
	height:450px;
	left:0px;
	top: -610px;
	padding:55px;
	background-color:rgba(0, 0, 0, 0.7);
}
.hl-feature-box-1 .booking-input{
	width:97%;
	height:40px;
	left:0px;
	padding:10px;
	border:1px solid #fff;
	background-color:#fff;
}
.hl-feature-box-1 .booking-input.b-margin{
	margin-bottom:20px;
}
.hl-feature-box-1 .btn-submit {
	width:98%;
    border: none;
    color: #fff;
    cursor: pointer;
    float: left;
    font-size: 14px;
    font-weight: normal;
    height: 50px;
    overflow: hidden;
    padding: 5px 38px;
    margin: 10px 0 0 0;
    text-align: center;
    text-transform: uppercase;
    background-color: #ecae3d;
    transition: all 0.3s ease-out 0s;
}

/* feature box 2
 ------------------------------ */
 .hl-sec-tmargin{
	 float:left;
	 width:100%;
	 margin:-450px 0 0 0;
}
.hl-sec-tmargin-2 {
    float: left;
    width: 100%;
    margin: -140px 0 0 0;
}
.hl-feature-box-2{
	width:100%;
	float:left;
}
.hl-feature-box-2 .text-box{
	border:3px solid #f5f5f5;
	margin-top:25px;
	transition: all 0.3s ease-out 0s;
}
.hl-feature-box-2:hover .text-box, .hl-feature-box-2.active .text-box{
	border:3px solid #101010;
	background-color:#101010;
}
.hl-feature-box-2:hover .text-box .title, .hl-feature-box-2.active .text-box .title{
	color:#fff;
}
 .hl-price-big{
	 font-size:24px;
}

/* feature box 3
 ------------------------------ */
.hl-feature-box-3{
	 float:left;
	 width:100%;
	 padding:40px;
	 background-color:#2f3135;
}
.hl-feature-box-3:hover .icon, .hl-feature-box-3:hover .title,
.hl-feature-box-3.active .icon, .hl-feature-box-3.active .title{
	color:#ecae3d;
}

/* feature box 3
 ------------------------------ */
.hl-feature-box-4{
	 float:left;
	 width:100%;
}
.hl-feature-box-4{
	position:relative;
	 float:left;
	 width:100%;
}
.hl-feature-box-4 .img{
	position: absolute;
	 float:left;
	 width:100%;
	 z-index:2;
}

/* feature box 5
 ------------------------------ */
.hl-feature-box-5{
	position:relative;
	width:100%;
	float:left;
	top:-150px;
	background-color:#fff;
	transition: all 0.3s ease-out 0s;	
}
.hl-feature-box-5 .text-box{
	border:1px solid #f0f0f0;
	transition: all 0.3s ease-out 0s;	
	
}
.hl-feature-box-5:hover{
	background-color:#101010;	
}
.hl-feature-box-5:hover .text-box{
	background-color:#101010;
	border:1px solid #101010;	
}
.hl-feature-box-5:hover .text-box .title{
	color:#fff;
} 

 /* feature box 6
 ------------------------------ */
.hl-feature-box-6{
	 float:left;
	 width:100%;
}
.hl-feature-box-6 .icon{
	border:3px solid #f5f5f5;
}
.hl-feature-box-6:hover .icon, .hl-feature-box-6:hover .title,
.hl-feature-box-6.active .icon, .hl-feature-box-6.active .title{
	color:#ecae3d;
}



/*============ Section Titles ============ */


/* subtitle
 ------------------------------ */
.hl-sub-title {
	width: 60%;
	margin:15px auto 0 auto;
}
.hl-sub-title.align-left {
	width: 100%;
	margin:15px 0 0 0;
}


/*============ Parallax Sections ============ */
.hl-parallax-sec-1 {
	width: 100%;
	float: left;
	text-align: center;
	background: url(../images/parallax/hl-parallax1.jpg);
	/*background-attachment: fixed;
	background-origin: initial;
	background-clip: initial;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 100% 0;*/
	background-position: center;
	z-index: 1;
}
.hl-more-top-padd{
	padding-top:200px;

}



/*----------------------------RESPONSIVE STYLES------------------------------- */
/* ---------- MAX 1024PX ---------- */
@media screen and (max-width: 1024px) {
.hl-feature-box-1 {
    top: -520px;
}



}
	
@media only screen and (max-width: 1000px) {
.hl-feature-box-1 {
    top: 0;
	background-color:#101010;
}

	


}	

	
	
/* ---------- MAX 991PX ---------- */
@media only screen and (max-width: 991px) {
.container{
	width:98%;
	
	}
.hl-feature-box-1 {
	width:100%;
    top: 0;
	margin:80px 0 80px 0;
	background-color:#101010;
}
.hl-sec-tmargin {
    margin: -80px 0 0 0;
}
.hl-more-top-padd {
    padding-top: 80px;
}
.hl-feature-box-5 {
    top: 0;
}
.hl-sec-tmargin-2 {
    margin: 0 0 0 0;
}





}



/* ---------- MAX 800PX ---------- */
@media only screen and (max-width: 800px) {








}



/* ---------- MAX 768PX ---------- */
@media only screen and (max-width: 768px) {



}


/* ---------- MAX 767PX ---------- */
@media only screen and (max-width: 767px) {

}


@media screen and (max-width: 640px) {
.hl-feature-box-1 {
    height: 638px;
}
.hl-more-top-padd {
    padding-top: 800px;
}
.hl-sub-title {
    width: 90%;
}





}


@media screen and (max-width: 480px) {

.hl-feature-box-1 {
    margin: 45px 0 45px 0;
}
.hl-more-top-padd {
    padding-top: 600px;
}








}

/* ---------- MAX 360PX ---------- */
@media screen and (max-width: 360px) {
.hl-sub-title {
    width: 100%;
}
.hl-more-top-padd {
    padding-top: 430px;
}






}


/* ---------- MAX 320PX ---------- */
@media only screen and (max-width: 320px) {
.hl-more-top-padd {
    padding-top: 380px;
}




}