/*------------------------------------------------
Item 	: Boro - One Page HTML Responsive Template
Author  : igdepe
Email	: igp.ekasuryawan@gmail.com
-------------------------------------------------*/

/*------------------------------------------------|
Fonts typography
--------------------------------|

font-family: 'Open Sans', sans-serif;
font-family: 'Montserrat', sans-serif;

-------------------------------------------------*/
/*------------------------------------------------|
Table of content
--------------------------------|

1. Public style
2. Popup styling
3. Navigation
4. Banner include form bottom
5. Form Right Side
6. Section About
7. Section Amenities
8. Section Rooms
9. Section Includes
10.Section footer
11.Media Query ( Resposive Part )

-------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i|Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap');

/*-------------------------------
1. Public style
--------------------------------*/
*{
	margin:0;
	padding:0;
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
}
.ui-datepicker .ui-datepicker-header {
    position: relative;
    padding: .2em 0;
    background: #4abfea;
}
.barmenu{
	display: none;
}
#ui-datepicker-div{
	padding:0;
	border:0;
}
.tb{
	display: table;
	width: 100%;
	height: 100%;
}
.cell{
	display: table-cell;
	width: 100%;
	height: 100%;
	vertical-align: middle;
}
html,body{
	width: 100%;
	height: 100%;
}
.borohide{
	overflow: hidden;
}

/*-------------------------------
2. Popup Styling
--------------------------------*/
.boxadditional{
	opacity: 0;
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: #24315dcc;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transform: translate(0, -30px);
	-webkit-transform: translate(0, -30px);
	-moz-transform: translate(0, -30px);
	-o-transform: translate(0, -30px);
	-ms-transform: translate(0, -30px);
}
.boxadditionalopen{
	opacity: 1;
	z-index: 9999;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transform: translate(0,0);
	-webkit-transform: translate(0,0);
	-moz-transform: translate(0,0);
	-o-transform: translate(0,0);
	-ms-transform: translate(0,0);
}
.boxadditional .wrapadditional{
	width: 1024px;
	display: block;
	margin: 0 auto;
	height: 100%;
	background: #2a3a6c;
	box-shadow: 0 0 24px #9fa5b94d;
	padding: 50px 100px;
}
.boxadditional .wrapadditional .line{
	width: 100px;
	height: 2px;
	background: #fff;
	margin:0 auto 50px;
	display: block;
}
.boxadditional .wrapadditional .logoadditional img{
	display: block;
	margin:0 auto 50px;
	width: 100px;
}
.boxadditional .wrapadditional h1,
.boxadditional .wrapadditional h2,
.boxadditional .wrapadditional h3,
.boxadditional .wrapadditional h4,
.boxadditional .wrapadditional h5,
.boxadditional .wrapadditional h6,
.boxadditional .wrapadditional p,
.boxadditional .wrapadditional ol li,
.boxadditional .wrapadditional ul li{
	color:#e8e8e8;
	margin:10px 0;
}
.boxadditional .wrapadditional ol,
.boxadditional .wrapadditional ul{
	margin:50px 0 50px 30px;
}

.boxadditional .wrapadditional p{
	line-height: 28px;
}
.boxadditional .wrapadditional h1{
	color:#fff;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	margin:0 0 50px;
}
.boxadditional .wrapadditional .additionalinner{
	height: 100%;
	max-height: 98%;
	overflow-y: scroll;
	padding:0 20px;
}

.boxadditional .wrapadditional .closebtn a{
	display: block;
	background: #cacaca;
	width: 80px;
	height: 50px;
	position: fixed;
	top: 0;
	line-height: 21px;
	border-bottom-right-radius: 24px;
	border-bottom-left-radius: 24px;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}
.boxadditional .wrapadditional .closebtn a:hover{
	background: #fff;
}
.boxadditional .wrapadditional .closebtn .barclose{
	display: block;
	margin:0 auto;
	width: 40px;
	height: 40px;
	background: #2a3a6c;
	height: 1px;
	position: relative;
	top:22px;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-o-transform:rotate(45deg);
}
.boxadditional .wrapadditional .closebtn .barclose:last-child{
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-ms-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
}
.boxadditional .wrapadditional .closebtn a:hover .barclose{
	background: #000;
}

/*-------------------------------
3. Navigation
--------------------------------*/
.navigation{
	position: absolute;
	width: 100%;
	z-index: 999;
	padding:20px 0;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}
.navigation .wrapnav{
	width: 1170px;
	display: block;
	margin:0 auto;
}
.navigation .wrapnav .logo{
	float:left;
}
.navigation .wrapnav .logo img{
	width: 120px;
}
.navigation .wrapnav .nav{
	float:right;
}
.navigation .wrapnav .nav ul{
	margin:7px 0;
}
.navigation .wrapnav .nav ul li{
	list-style-type: none;
	float:left;
}
.navigation .wrapnav .nav ul li a{
	display: block;
	padding:0 20px;
	color:#fff;
	letter-spacing: 2px;
	font-size: 14px;
	text-decoration: none;
}
.navigation .wrapnav .nav ul li a:hover{
	color:#4abfea;
}
.navigation .wrapnav .nav ul li:last-child a{
	padding:0 0 0 20px;
}

/*-------------------------------
4. Banner include form bottom
--------------------------------*/
.banner{
	width: 100%;
	height: 100%;
}
.banner .owl-banner,
.banner .owl-banner .owl-stage-outer,
.banner .owl-banner .owl-stage-outer .owl-stage,
.banner .owl-banner .owl-stage-outer .owl-stage .owl-item,
.banner .owl-banner .owl-stage-outer .owl-stage .owl-item .owlitem{
	width: 100%;
	height: 100%;
}
.banner .owl-banner .owl-dots{
	position: relative;
	width: 1170px;
	display: block;
	margin: 0 auto;
	bottom: 65px;
}
.banner .owl-banner .owl-dots .owl-dot{
	width: 13px;
	height: 13px;
	background: #a8a8a8;
	margin: 0 5px;
	border-radius: 50%;
}
.banner .owl-banner .owl-dots .active{
	background: #4abfea;
}
.banner .owl-banner .cover{
	background: #18256670;
	position: absolute;
	z-index: 9999;
	top: 0;
	width: 100%;
	height: 100%;
}
.banner .bannerslider{
	width: 100%;
	height: 100%;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
}
.banner .wrapstaticcontent{
	position: absolute;
	bottom:95px;
	z-index: 99;
	width: 100%;
}
.banner .wrapstaticcontent .wrapcontentinside{
	width: 1170px;
	display: block;
	margin:0 auto;
}
.banner .wrapstaticcontent .wrapcontentinside .bannertext h1{
	color:#fff;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 65px;
	margin:0 0 20px;
}
.banner .wrapstaticcontent .wrapcontentinside .bannertext h1 span{
	font-weight: 900;
	background: #4abfea;
	padding: 0 18px;
}
.banner .wrapstaticcontent .wrapcontentinside .bannertext p{
	color: #d0d0d0;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 22px;
	margin: 0 0 100px;
}
.banner .wrapstaticcontent .wrapcontentinside .bannertext .atag a{
	display: block;
	width: 200px;
	background: #c2b080;
	color: #fff;
	text-align: center;
	text-decoration: none;
	padding: 20px;
	border-radius: 40px;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}
.banner .wrapstaticcontent .wrapcontentinside .bannertext .atag a:hover{
	background: #a4956c;
}
.banner .wrapstaticcontent .wrapcontentinside .formwrap{
	background: #24315d;
	padding:20px;
}
.banner .wrapstaticcontent .wrapcontentinside .formwrap label{
	color:#a4a4a4;
}
.banner .wrapstaticcontent .wrapcontentinside .formwrap i.fa{
	position: absolute;
	color: #fff;
	right: 24px;
	bottom: 28px;
}
.banner .wrapstaticcontent .wrapcontentinside .formwrap form input[type=text],
.banner .wrapstaticcontent .wrapcontentinside .formwrap form input[type=email],
.banner .wrapstaticcontent .wrapcontentinside .formwrap form input[type=number],
.banner .wrapstaticcontent .wrapcontentinside .formwrap form select{
	background: #182655;
	border-radius: 0;
	border:none;
	color:#fff;
	outline: 0;
	padding:0 32px 0 10px;
	height: 44px;
}
.banner .wrapstaticcontent .wrapcontentinside .formwrap form input[type=submit]{
	background: #4abfea;
	color: #fff;
	border: none;
	position: absolute;
	height: 132px;
	top: -20px;
	right: -5px;
	width: 185px;
	font-weight: 700;
	font-size: 20px;
	outline: 0;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}
.banner .wrapstaticcontent .wrapcontentinside .formwrap form input[type=submit]:hover{
	background: #3a9ec2;
}
.fixtop{
	box-shadow: 0 0 12px #000;
	position: fixed;
	z-index: 9999;
	width: 100%;
	background: #24315d;
	padding: 10px 0;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}

/*-------------------------------
5. Form Right Side
--------------------------------*/
.formlead{
	position: absolute;
    width: 100%;
    top: 0;
    z-index: 999;
    padding-top: 250px;
}
.formlead .leadcaption{
	width: 500px;
}
.formlead .leadcaption h1{
	color:#fff;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 52px;
	margin:0 0 20px;
}
.formlead .leadcaption h1 span{
	font-weight: 900;
	background: #4abfea;
	padding: 0 18px;
}
.formlead .leadcaption p{
	color: #d0d0d0;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
	font-size: 22px;
	margin: 0 0 100px;
}
.formside{
	width: 500px;
	right: 30px;
	background: #24315d;
	padding: 25px;
	position: absolute;
	right: 0;
	margin: 0 0 0 auto;
	top: 0;
}
.formside label{
	color:#a4a4a4;
}
.formside i.fa{
	position: absolute;
	color: #fff;
	right: 24px;
	bottom: 28px;
}
.formside form input[type=text],
.formside form input[type=email],
.formside form input[type=number],
.formside form select{
	background: #182655;
	border-radius: 0;
	border:none;
	color:#fff;
	outline: 0;
	padding:0 32px 0 10px;
	height: 44px;
}
.formside form input[type=submit]{
    background: #4abfea;
    color: #fff;
    border: none;
    position: relative;
    height: 56px;
    top: 0;
    right: 0;
    width: 100%;
    font-weight: 700;
    font-size: 20px;
    outline: 0;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
}
.formside form input[type=submit]:hover{
	background: #3a9ec2;
}

/*-------------------------------
6. Section About
--------------------------------*/
.sectionabout{
	padding:100px 0 170px;
}
.sectionabout .preview img:first-child{
	width: 400px;
	display: block;
	margin: 0 auto;
	position: absolute;
	bottom: -64px;
}
.sectionabout .preview img:last-child{
	width: 400px;
	display: block;
	margin:0 auto;
}
.sectionabout h3{
	color:#b9b9b9;
	font-size: 25px;
	letter-spacing: 10px;
	font-weight: 600;
}
.sectionabout h1{
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 50px;
	color:#24315d;
	margin:0 0 30px;
}
.sectionabout p{
	line-height: 30px;
}
.sectionabout .atag{
	margin:50px 0 0 0;
}
.sectionabout .atag a{
	display: block;
	width: 200px;
	background: #c2b080;
	color:#fff;
	text-align: center;
	text-decoration: none;
	padding:20px;
	border-radius: 40px;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}
.sectionabout .atag a:hover{
	background: #a4956c;
}

/*-------------------------------
7. Section Amenities
--------------------------------*/
.sectionamenities{
	height: 600px;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
}
.sectionamenities .wraptext{
	width: 100%;
}
.sectionamenities .wraptext .wrapinside{
	width: 500px;
	float: right;
	background: #4abfea;
	padding: 50px;
	position: relative;
	bottom: 100px;
}
.sectionamenities .wraptext .wrapinside ul{
	margin:30px 5px 0;
	text-align: center;
}
.sectionamenities .wraptext .wrapinside ul li{
	display: inline-block;
	width: 180px;
	margin:5px;
	list-style-type: none;
	background: #24315d;
	color: #fff;
	padding: 8px 14px;
}
.sectionamenities .wraptext .wrapinside ul li:before{
	content: "\f05d";
	font-family: fontAwesome;
	color:#fff;
	position: relative;
	left:-6px;
	font-size: 20px;
}
.sectionamenities .wraptext .wrapinside h3{
	color: #fff;
	font-size: 25px;
	letter-spacing: 10px;
	font-weight: 600;
}
.sectionamenities .wraptext .wrapinside h1{
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 50px;
	color: #24315d;
	margin: 0 0 30px;
}
.sectionamenities .wraptext .wrapinside p{
	line-height: 30px;
	color:#fff;
}

/*-------------------------------
8. Section Rooms
--------------------------------*/
.sectionrooms{
	padding:100px 0;
}
.sectionrooms .bigimg{
	width: 100%;
	height: 800px;
	display: block;
	margin:0 auto;
}
.sectionrooms .imgwrap{
	position: absolute;
	z-index: 999;
	width: 1040px;
}
.sectionrooms .splitimg{
	float: left;
	width: 500px;
	margin-right: 20px;
	position: relative;
}
.sectionrooms .splitimg a{
	opacity: 1;
	display: block;
	background: #24315d96;
	top: 0;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
	text-align: center;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}
.sectionrooms .splitimg a:hover{
	opacity: 0;
}
.sectionrooms .splitimg a .wrapbar{
	width: 40px;
	display: block;
	margin:0 auto;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transform:translate(0,0);
	-webkit-transform:translate(0,0);
	-moz-transform:translate(0,0);
	-ms-transform:translate(0,0);
	-o-transform:translate(0,0);
}
.sectionrooms .splitimg a:hover .wrapbar{
	width: 40px;
	display: block;
	margin:0 auto;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transform:translate(0, -20px);
	-webkit-transform:translate(0,-20px);
	-moz-transform:translate(0,-20px);
	-ms-transform:translate(0,-20px);
	-o-transform:translate(0,-20px);
}
.sectionrooms .splitimg a .bar{
	width: 40px;
	height: 1px;
	background: #fff;
}
.sectionrooms .splitimg a .bar:last-child{
	transform:rotate(90deg);
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	-o-transform:rotate(90deg);
}
.sectionrooms h3{
	color:#b9b9b9;
	font-size: 25px;
	letter-spacing: 10px;
	font-weight: 600;
}
.sectionrooms h1{
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 50px;
	color:#24315d;
	margin:0 0 30px;
}
.sectionrooms p{
	line-height: 30px;
}
.sectionrooms .atag{
	margin:50px 0 75px;
}
.sectionrooms .atag a{
	display: block;
	width: 200px;
	background: #c2b080;
	color:#fff;
	text-align: center;
	text-decoration: none;
	padding:20px;
	border-radius: 40px;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}
.sectionrooms .atag a:hover{
	background: #a4956c;
}

/*-------------------------------
9. Section Includes
--------------------------------*/
.sectionincludes{
	padding:100px 0;
	background: #f3f3f3;
}
.sectionincludes h3{
	color:#b9b9b9;
	font-size: 25px;
	letter-spacing: 10px;
	font-weight: 600;
}
.sectionincludes h1{
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 50px;
	color:#24315d;
	margin:0 0 30px;
}
.sectionincludes p{
	line-height: 30px;
	margin: 0 0 50px;
}
.sectionincludes p.custom{
	text-align: center;
}
.sectionincludes p.custom i.fa{
	font-size: 60px;
	text-align: center;
	color: #bccaf7;
}
.sectionincludes h4{
	text-align: center;
	color: #fff;
	text-transform: uppercase;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 2px;
}
.sectionincludes .wrap{
	display: block;
	margin:0 auto;
	background: #24315d;
	width: 200px;
	height: 250px;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	position: relative;
	z-index: 9;
}
.sectionincludes .atag{
	margin:50px 0 0;
}
.sectionincludes .atag a{
	display: block;
	width: 200px;
	margin:0 auto;
	background: #c2b080;
	color: #fff;
	text-align: center;
	text-decoration: none;
	padding: 20px;
	border-radius: 40px;
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}
.sectionincludes .atag a:hover{
	background: #a4956c;
}
.sectionincludes .wrap:hover{
	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transform: perspective(400px) rotateY(45deg);	
}

/*-------------------------------
10. Section Footer
--------------------------------*/
.sectionfooter{
	position: relative;
	padding:100px 0;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-ms-background-size: cover;
	-o-background-size: cover;
}
.sectionfooter .footinside{
	position: relative;
	z-index: 5;
}
.sectionfooter:after{
	content: "";
	background: #ffffff9c;
	position: absolute;
	z-index: 1;
	top: 0;
	width: 100%;
	height: 100%;
}
.sectionfooter h3{
	color:#24315d;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 30px;
	letter-spacing: 2px;
	margin:0 0 60px;
}
.sectionfooter ul{
	width: 100%;
	display: block;
	text-align: center;
	margin:0 0 20px;
}
.sectionfooter ul li{
	display: inline-block;
	list-style-type: none;
	position: relative;
}
.sectionfooter ul li a:after{
	content: "\f111";
	font-family: fontAwesome;
	font-weight: 600;
	color: #888d9f;
	position: absolute;
	right: -5px;
	font-size: 7px;
	top: 7px;
}
.sectionfooter ul li:last-child a:after{
	display: none;
}
.sectionfooter ul li a{
	color:#4abfea;
	display: block;
	padding:0 15px;
	text-decoration: none;
	color:#3c4244;
}
.sectionfooter ul li a:hover{
	color:#4867cc;
}
.sectionfooter p{
	font-family: 'Montserrat', sans-serif;
	text-align: center;
	color: #24315d;
	font-size: 16px;
	padding: 60px 0 0;
	font-weight: 600;
}
.sectionfooter ul.sosmed li a{
	font-size: 24px;
	padding:0 25px;
	line-height: 13px;
}

/*-------------------------------
11.Media Query ( Resposive Part )
--------------------------------*/
@media only screen and (max-width: 1480px){
	.sectionrooms .splitimg{
		width: 350px;
	}
	.sectionrooms .imgwrap{
		width: 740px;
	}
	.sectionrooms .bigimg{
		height: 900px;
	}
	.formlead{
		padding-top:150px;
	}
}
@media only screen and (max-width: 1199px){
	.barmenu{
		display: block;
	    float: right;
	}
	.barmenu a{
		display: block;
	}
	.barmenu a .barmenuline{
		width: 50px;
		height: 2px;
		background: #fff;
		margin-bottom: 12px;
	}
	.barmenu a .barmenuline:last-child{
		margin-bottom:0;
	}
	.navigation{
		padding:20px;
	}
	.navigation .wrapnav{
		width: 100%;
	}
	.banner .wrapstaticcontent .wrapcontentinside {
	    width: 100%;
	    padding: 0 20px;
	}
	.navigation .wrapnav .nav {
	    float: none;
	    margin: 0;
	    padding: 0;
	    position: absolute;
	    display: none;
	    opacity: 0;
	    z-index: -1;
	    top: 70px;
	    background: #24315d;
	    width: 100%;
	    left: 0;
	    text-align: center;
	    transition: all 0.3s ease-in-out;
	    -webkit-transition: all 0.3s ease-in-out;
	    -moz-transition: all 0.3s ease-in-out;
	    -ms-transition: all 0.3s ease-in-out;
	    -o-transition: all 0.3s ease-in-out;
	    transform:translate(0, -30px);
	    -webkit-transform:translate(0, -30px);
	    -moz-transform:translate(0, -30px);
	    -ms-transform:translate(0, -30px);
	    -o-transform:translate(0, -30px);
	}
	.navigation .wrapnav .navopen{
		display: block;
		opacity: 1;
		z-index: 9999;
		transition: all 0.3s ease-in-out;
	    -webkit-transition: all 0.3s ease-in-out;
	    -moz-transition: all 0.3s ease-in-out;
	    -ms-transition: all 0.3s ease-in-out;
	    -o-transition: all 0.3s ease-in-out;
	    transform:translate(0, 0);
	    -webkit-transform:translate(0, 0);
	    -moz-transform:translate(0, 0);
	    -ms-transform:translate(0, 0);
	    -o-transform:translate(0, 0);
	}
	.navigation .wrapnav .nav ul{
		width: 100%;
	}
	.navigation .wrapnav .nav ul li{
		float:none;
		display: block;
	}
	.navigation .wrapnav .nav ul li a{
		padding:15px 0;
		border-bottom:1px solid #245567;
	}
	.navigation .wrapnav .nav ul li a:hover{
		border-bottom:1px solid #4abfea;
	}
	.navigation .wrapnav .nav ul li:last-child a{
		padding:15px 0;
		border-bottom:none;
	}
	.fixtop {
    	padding: 10px 20px;
	}
	.banner .owl-banner .owl-dots{
		width: 100%;
		padding-left:20px;
	}
	.banner .wrapstaticcontent .wrapcontentinside .bannertext h1{
		font-size: 50px;
	}
	.banner .wrapstaticcontent .wrapcontentinside .bannertext p{
		font-size: 18px;
	}
	.sectionabout {
    	padding: 100px 0 200px;
	}
	.formlead{
		position: relative;
		padding:100px 0 0;
	}
	.banner_formside{
		height: 400px;
	}
	.formlead .leadcaption h1 {
	    color: #24315d;
	    font-family: 'Montserrat', sans-serif;
	    font-weight: 700;
	    font-size: 52px;
	    margin: 0 0 20px;
	}
	.formlead .leadcaption p{
		color:#929292;
		margin: 0 0 50px;
	}
	.formlead .leadcaption {
    	width: 100%;
	}
	.formside {
	    width: 100%;
	    right: 30px;
	    background: #24315d;
	    padding: 25px;
	    float: none;
	    position: relative;
	    right: 0;
	    margin: 0 auto;
	}
}

@media only screen and (max-width: 991px){
	.banner{
		height: 1200px;
	}
	.banner .owl-banner .cover{
		height: 1200px;
	}
	.banner .owl-banner, .banner .owl-banner .owl-stage-outer, .banner .owl-banner .owl-stage-outer .owl-stage, .banner .owl-banner .owl-stage-outer .owl-stage .owl-item, .banner .owl-banner .owl-stage-outer .owl-stage .owl-item .owlitem{
		height: 1200px;
	}
	.banner_formside{
		height: 400px;
	}
	.banner_formside .owl-banner, .banner_formside .owl-banner .owl-stage-outer, .banner_formside .owl-banner .owl-stage-outer .owl-stage, .banner_formside .owl-banner .owl-stage-outer .owl-stage .owl-item, .banner_formside .owl-banner .owl-stage-outer .owl-stage .owl-item .owlitem{
		height: 400px;
	}
	.banner_formside .owl-banner .cover{
		height: 400px;
	}
	.banner .wrapstaticcontent{
		bottom: 0;
    	top: 200px;
	}
	.banner .wrapstaticcontent .wrapcontentinside .formwrap form input[type=submit] {
	    position: relative;
	    height: 56px;
	    top: 0;
	    right: 0;
	    width: 100%;
	}
	.sectionabout .preview img:first-child{
		bottom:0;
	}
	.sectionabout h3{
		margin:50px 0 0;
	}
	.boxadditional .wrapadditional{
		width: 100%;
	}
	.sectionrooms .imgwrap{
		position: relative;
		width: 100%;
	}
	.sectionrooms .splitimg {
	    width: 100%;
	    margin-bottom: 30px;
	}
	.sectionrooms .bigimg {
    	height: 400px;
	}
	.sectionincludes .box{
		margin-bottom: 30px;
	}
	.sectionabout h1,
	.sectionamenities .wraptext .wrapinside h1,
	.sectionrooms h1,
	.sectionincludes h1{
		font-size: 35px;
	}
	.sectionabout h3,
	.sectionamenities .wraptext .wrapinside h3,
	.sectionrooms h3,
	.sectionincludes h3{
		font-size: 22px;
	}
}
@media only screen and (max-width: 620px){
	.banner .wrapstaticcontent .wrapcontentinside .bannertext h1 {
    	font-size: 34px;
	}
	.sectionabout h1,
	.sectionamenities .wraptext .wrapinside h1,
	.sectionrooms h1,
	.sectionincludes h1{
		font-size: 28px;
	}
	.sectionabout h3,
	.sectionamenities .wraptext .wrapinside h3,
	.sectionrooms h3,
	.sectionincludes h3{
		font-size: 18px;
	}
	.formlead .leadcaption h1{
		font-size: 34px;
	}
	.formlead .leadcaption p{
		font-size: 18px;
	}
	.sectionabout .preview img:first-child {
	    width: 100%;
	    display: block;
	    margin: 0 auto 30px;
	    position: relative;
	}
	.sectionabout .preview img:last-child{
		width: 100%;
	}
	.sectionamenities .wraptext .wrapinside {
	    width: 100%;
	    float: none;
	    background: #4abfea;
	    padding: 30px;
	    position: relative;
	    bottom: 0;
	}
	.sectionamenities {
		height: auto;
		position: relative;
	}
	.sectionamenities .wraptext .wrapinside ul li{
		width: 100%;
		display: block;
	}
	.boxadditional .wrapadditional {
	    width: 100%;
	    display: block;
	    margin: 0 auto;
	    height: 100%;
	    background: #2a3a6c;
	    box-shadow: 0 0 24px #9fa5b94d;
	    padding: 80px 15px;
	}
	.formlead {
    	position: relative;
    	padding: 50px 0 0;
	}
}

@media only screen and (max-width: 340px){
	.banner{
		height: 1300px;
	}
	.banner .owl-banner, .banner .owl-banner .owl-stage-outer, .banner .owl-banner .owl-stage-outer .owl-stage, .banner .owl-banner .owl-stage-outer .owl-stage .owl-item, .banner .owl-banner .owl-stage-outer .owl-stage .owl-item .owlitem{
		height: 1280px;
	}
	.banner .owl-banner .cover{
		height: 1300px;
	}
	.banner_formside{
		height: 300px;
	}
	.banner_formside .owl-banner, .banner_formside .owl-banner .owl-stage-outer, .banner_formside .owl-banner .owl-stage-outer .owl-stage, .banner_formside .owl-banner .owl-stage-outer .owl-stage .owl-item, .banner_formside .owl-banner .owl-stage-outer .owl-stage .owl-item .owlitem{
		height: 300px;
	}
	.banner_formside .owl-banner .cover{
		height: 300px;
	}
}