/***



Theme Name: Jamahal Resort & Spa

Theme URI: http://www.jamahal.net

Author: Erwin Yusrizal

Author URI: http://www.erwinyusrizal.me

Description: Jamahal Wordpress Custom Theme

Version:1.0;



*/



@import url(//fonts.googleapis.com/css?family=Raleway:400,300);

@import url(fonts/fonts.css);



body{

	overflow: hidden;

	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

	color: #aaa;

	font-size: 14px;

}





/***

 * Common

 */



h1{

	font-family: 'Raleway', sans-serif;

	font-size: 34px;

	color: #aaa;

	font-weight: lighter;

	background: url('images/fading-h-line.png') no-repeat 100% 100%;

	line-height: 1;

    margin: 10px 0;

    padding: 0 0 10px;

    text-transform: lowercase;

}



a, a:hover, a:focus, a:active{

	text-decoration: none;

	outline: 0;

	color: #fff;

}



a:hover, a:focus, a:active{

	color: orange;

}



em strong{

	color: orange;

}



.quote{

	border: none;

	color: #aaa;	

	font-family: 'Raleway', sans-serif;

	font-weight: 300;

	font-size: 18px;

}



.quote b{

	font-family: 'SinaNova-Regular';

	font-size: 24px;

	line-height: 1em;

}



.quote strong{

	color: #fafafa;

	font-weight: 400;

	text-shadow: 0 0 6px #FFF;	

}



.quote.left{

	text-align: left;

}

.metaslider .caption-wrap {
	background: transparent!important;
}


.excerpt{

	font-size: 12px;

	text-align: justify;

	margin: -30px 250px 20px 0;

	top: -85px;

	outline: 0;

	clear: both;
	display: none;

}



.thumbnail a>img, .thumbnail>img {

	height: 300px;

}



table{

	width: 100%;

	margin-bottom: 20px;

}



table tr, table tr.even {

    background: rgba(0, 0, 0, 0.063) none repeat scroll 0 0;

}



table tr td, table tr th {

    border: 1px solid #666;

    padding: 4px 9px;

    text-align: left;

}



.table-responsive{

	border: none;

}



.container{

	max-width:865px;

}



#footer .container{

	max-width: 1000px;

}



#background{

	height: auto;

	width: 100%;

	position: absolute;

	top: 0;

	left: 0;

	background-size: cover;

}



#background img{

	width: 100%;

	height: 100%;

	image-rendering: optimizequality;

}



#background .overlay-shadow{

	position: relative;

	width: 100%;

	height: 100%;

}



#background .overlay-shadow > div{

	height: 100%;

	position: relative;

	width: 100%;

}



#background .overlay-shadow .left{

	background: url('images/shadow-overlay-left.png') repeat-y;

	float: left;

}



#background .overlay-shadow .right{

	background: url('images/shadow-overlay-right.png') repeat-y 100% 0;

}



.blur{

	 -webkit-filter: blur(3px);

  	-moz-filter: blur(3px);

  	-o-filter: blur(3px);

  	-ms-filter: blur(3px);

  	filter: blur(3px);

  	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";

	filter: alpha(opacity=70);

	-moz-opacity: 0.7;

	-khtml-opacity: 0.7;

	opacity: 0.7;



}





/***

 * WYSIWYG

 */



.wysiwyg .row{

	padding: 0;

	margin:0;

}



.wysiwyg .row .wysiwyg-left,

.contact .row .col-md-9{

	padding-left: 0 !important;

}



.wysiwyg, .wysiwyg .row{

	position: relative;

}



.wysiwyg ul,

.wysiwyg ol{

	padding-left: 15px;

}



.wysiwyg h2, .wysiwyg h3{

	color: orange;

	font-style: italic;

	font-family: 'Raleway', sans-serif;

	font-size: 18px;

	font-weight: 300;

	text-transform: uppercase;

}



.wysiwyg .rates{

	position: fixed;

	max-width: 380px;

}







/***

 * Page

 */





.page-wrapper{

	background: url('images/page-bg-lite-60-dark.png') repeat-x;

	display: block;

	height: 500px;

	max-height: 500px;

	position: fixed;

	top: 40%;

	left: 0;

	margin-top: -250px;

	width: 100%;

}



body.home .page-wrapper{

	background: url(images/page-bg-lite.png);

}





/***

 * Main

 */



.main{

	text-align: center;

}



.main a{

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

	filter: alpha(opacity=50);

	-moz-opacity: 0.5;

	-khtml-opacity: 0.5;

	opacity: 0.5;

}



.main a:hover{

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

	filter: alpha(opacity=100);

	-moz-opacity: 1;

	-khtml-opacity: 1;

	opacity: 1;

}



.landing .wysiwyg{

	margin-top: 20px;

}



.thumbnail{

	background: none;

	border-radius: 0;

	border:none;

	padding: 0;

}



.link,

.link:focus,

.link:active{

	display: block;

	font-size: 14px;

	color: #fff;

	margin-bottom: 7px;

}



.link:hover{

	color: orange;

}



.link .fa{

	margin-right: 10px;

	font-size: 16px;

}



.booking-form{

	margin-top: 20px;

}





/***

 * Footer

 */

footer, #footer{

	position: fixed;

	bottom: 0;

	left: 0;

	width: 100%;

	background: rgba(0,0,0, 0.5);

	padding: 10px 0;

	-webkit-transform: translateY(0px);

	-moz-transform: translateY(0px);

	-ms-transform: translateY(0px);

	-o-transform: translateY(0px);

	transform: translateY(0px);

	-webkit-transition: all 0.5s linear 0s;

	-moz-transition: all 0.5s linear 0s;

	-ms-transition: all 0.5s linear 0s;

	-o-transition: all 0.5s linear 0s;

	transition: all 0.5s linear 0s;

	height: 65px;

}



footer.expanded,

#footer.expanded{

	bottom: -40px;

	-webkit-transform: translateY(0px);

	-moz-transform: translateY(0px);

	-ms-transform: translateY(0px);

	-o-transform: translateY(0px);

	transform: translateY(0px);

}



#footer .package{

	padding: 0;

	text-align: right;

	background: url(images/p-n-p.png) no-repeat -4px 0;

	display: block;

	font-size: 0;

	height: 70px;

	overflow: hidden;

	text-indent: -9000px;

	width: 170px;

	position: absolute;

	top: -70px;

}



#footer .package:hover{

	background: url(images/p-n-p.png) no-repeat -4px -90px;	

}



#footer .package a{

	background-image: url(images/p-n-p-shimmer.png);

	background-repeat: no-repeat;

	background-position: -180px 0;

	font-size: 0;

	height: 60px;

	transition: background-position 1.5s ease;

	-webkit-transition: background-position 1.5s ease;

	-webkit-border-top-left-radius: 15px;

	-webkit-border-top-right-radius: 15px;

	-moz-border-radius-topleft: 15px;

	-moz-border-radius-topright: 15px;

	border-top-left-radius: 15px;

	border-top-right-radius: 15px;

	margin-top: 10px;

	display: block;

	line-height: 30px;

}



#footer .row{

	padding-top:10px;

	padding-bottom: 10px; 

}



#footer .logo{

	margin-bottom: 30px;

	display: block;

}



#footer .social-page a{

	color: #333;

}



#footer .social-page a .fa-circle{

	color: #fff;

}





/***

 * Menu

 */



#menu-main-menu,#menu-main-menu-1{

	/*padding-left: 15px;*/

	list-style: none;

	margin-top: 7px;

	display: table;

	width: 100%;

	padding-bottom: 50px;

}



#menu-main-menu > li,#menu-main-menu-1 > li {

	display: block;	

	width: 11%;

	margin: 0 10px;

}



#menu-main-menu li a,#menu-main-menu-1 li a{	

	padding: 0;

	font-size: 12px;

	color: #aaa;

	text-transform: lowercase;

}



#menu-main-menu-1 li a:hover,

#menu-main-menu-1 li a:active,

#menu-main-menu li a:hover,

#menu-main-menu li a:active{

	color: orange;

	background: none !important;

}



#menu-main-menu-1 li ul,

#menu-main-menu li ul{

	padding-left: 0;

	display: none;	

	list-style: none;

	padding-top: 5px;

	border-top:1px solid #aaa;

	margin-top: 10px;

}



#menu-main-menu-1 li:hover > a,

#menu-main-menu-1 li.current-menu-parent > a,

#menu-main-menu-1 li.current-menu-item > a,

#menu-main-menu-1 li.current-page-ancestor > a

#menu-main-menu li:hover > a,

#menu-main-menu li.current-menu-parent > a,

#menu-main-menu li.current-menu-item > a,

#menu-main-menu li.current-page-ancestor > a,

ul.sub-menu li a:hover,

ul.sub-menu li.current-menu-item a{

	color: orange !important;

}





/***

 * Sub Menu

 */



#sub-menu ul{

	list-style: none;

	padding-left: 0;

}



#sub-menu ul li{

	display: inline-block;	

}



#sub-menu ul li a{

	color: #aaa;

}



#sub-menu ul li a{

	border-left:1px solid #aaa;

	padding-right: 3px;

	padding-left: 5px;

	text-decoration: none;

	outline: 0;

	text-transform: lowercase;

}



#sub-menu ul li a:hover,

#sub-menu ul li.active a{

	color: orange;

}



#sub-menu ul li:first-child a{

	border-left: none;

}



#sub-menu ul.pull-left li.first a{

	padding-left: 0;

}



#sub-menu ul.pull-right li.last a{

	padding-right: 0;

}





/***

 * Slider

 */

.accordion-slider .as-panels .as-panel > img{

	-webkit-filter: grayscale(1) !important;

  	-moz-filter: grayscale(1) !important;

  	-ms-filter: grayscale(1) !important;

  	filter: grayscale(1) !important;

}





/***

 * Popup

 */

.mfp-bg{

	background: none;

}



.mfp-zoom-in .mfp-with-anim {

	opacity: 0;

	transition: all 0.2s ease-in-out; 

	transform: scale(0.8); 

}



.mfp-zoom-in.mfp-bg {

	opacity: 0;

  	transition: all 0.3s ease-out;

}



.mfp-zoom-in.mfp-ready .mfp-with-anim {

  	opacity: 1;

  	transform: scale(1); 

}



.mfp-zoom-in.mfp-ready.mfp-bg {

    opacity: 0.8;

}



.mfp-zoom-in.mfp-ready.mfp-removing .mfp-with-anim {

	transform: scale(0.8); 

	opacity: 0;

}



.mfp-zoom-in.mfp-ready.mfp-removing.mfp-bg {

    opacity: 0;

}



.mfp-container{

	background: url(images/page-bg-lite-60-dark.png) repeat-x left 29%;

	background-color: transparent;

}



.mfp-bottom-bar{

	display: none;

}



.mfp-content{

	top: -10%;

	max-width: 800px !important;

}



.mfp-figure::after{

	background: none;

	box-shadow: none;

}



img.mfp-img{

	max-height: 480px !important;

}



.mfp-arrow:before, 

.mfp-arrow:after, 

.mfp-arrow .mfp-b, 

.mfp-arrow .mfp-a{

	border:none;

}



.mfp-arrow-left, 

.mfp-arrow-right{

	margin-top: -35px;

	width: 45px;

	height: 70px;

}



.mfp-arrow-left{

	left: -100px;

	background: url(images/nav-arrows.png) no-repeat 0 -158px !important;	

}



.mfp-arrow-left:hover,

.mfp-arrow-left:focus,

.mfp-arrow-left:active{

	background: url(images/nav-arrows.png) no-repeat 0 -239px !important;

	margin-top: -35px;

}



.mfp-arrow-right{

	right: -100px;

	background: url(images/nav-arrows.png) no-repeat 0 0 !important;	

}



.mfp-arrow-right:hover,

.mfp-arrow-right:focus,

.mfp-arrow-right:active{

	background: url(images/nav-arrows.png) no-repeat 0 -78px !important;

	margin-top: -35px;

}



.btn-close,

.btn-close:focus,

.btn-close:active{

	background: url('images/exit.png') no-repeat;

	font-size: 0;

	height: 30px;

	position: absolute;

	left: -100px;

	text-indent: 9999px;

	bottom: 50px;

	top:auto;

	width: 64px;

	outline: 0;

	text-decoration: none;

}





/***

 * Scrollable

 */

.scrollable{

	width: 100%;

	height: 380px;

	overflow-y: auto;

	overflow-x: hidden !important;

}





/***

 * Video

 */

.videoWrapper, .mapWrapper {

    position: relative;

    padding-bottom: 56.25%; /* 16:9 */

    padding-top: 25px;

    height: 0;

    margin-bottom: 20px;

    margin-right: 0px;

}



.videoWrapper iframe, .videoWrapper video, .mapWrapper iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 80%;

}



.mapWrapper iframe{

	height: 100%;

}





/***

 * FORM

 */

form input[type="text"]{

	color: #000;

}



form input[type="text"].small{

	width: 30px;

}



form p{



}



form p strong{

	color: orange;

}



form button{

	color: #000;

	font-weight: bold;

}





/***

 * STAFF

 */



.staff .images-wrapper{

	height: 240px;

	overflow: hidden;

}



.staff .images{

	height: 240px;

	overflow: hidden;

	width: 10000px;

	margin-left: 0;

	position: relative;

}



.staff .images, .staff .detail{

	list-style: none;

	padding-left: 0;

}



.staff .images li{

	display: inline-block;

	margin-right: 8px;

	width: 152px;

	height: 240px;

	position: absolute;

}



.staff .images li.active{

	z-index: 999;

}



.staff .images li a img{

	-webkit-filter: grayscale(1) !important;

  	-moz-filter: grayscale(1) !important;

  	-ms-filter: grayscale(1) !important;

  	filter: grayscale(1) !important;

}



.staff .images li a:hover img, .staff .images li.active a img{

	-webkit-filter: grayscale(0) !important;

  	-moz-filter: grayscale(0) !important;

  	-ms-filter: grayscale(0) !important;

  	filter: grayscale(0) !important;

}



.staff .detail li{

	display: none;

}



.staff .detail li.active{

	display: block;

}





.staff .detail li .name{

	width: 150px;

	height: 140px;

	overflow: hidden;	

	float: left;

	padding-right: 10px;

}



.staff .detail li .name h3{

	color: #fff;

}



.staff .detail li .name h4{

	font-size: 16px;

}



.staff .detail li .name small{

	font-size: 12px;

}



.staff .detail li .about{

	display: block;

    padding: 10px 20px;

    overflow: hidden;

    height: 140px;

    border-left: 1px solid rgba(255,255,255, 0.3);

}



.staff .detail li .about .quote{



}



.staff .detail li .about .excerpt{

	position: relative;

	float: left;

	top: -40px;

	margin-right: 200px;

	margin-top: 0;

}





/***

 * AWARDS

 */

.awards ul{

	list-style: none;

	padding-left: 0;

	text-align: center;

}



.awards ul li{

	display: none;

}



.awards ul li.active{

	display: inline-block;

}



.awards ul li:first-child a{

	opacity:0.5

}



.awards ul li:first-child a:hover{

	opacity:1;

}





/***

 * TREATMENTS

 */



.treatments .col-md-4{

	padding-left: 0;

}



.treatments ul{

	list-style: none;

	float: left;

	padding-left: 0;

}



.treatments ul.list li{

	margin-bottom: 5px;

}



.treatments ul.list li.active, 

.treatments ul.list li:hover{

	color: orange;

	cursor: pointer;

}



.treatments ul.list-content li{

	display: none;

}



.treatments ul.list-content li.active{

	display: block;

}







/***

 * ERROR

 */

.error-notfound p{

	font-size:22px;	

}