@import url(css/reset.css);
@import url(//fonts.googleapis.com/css?family=Zeyada);
@import url(//fonts.googleapis.com/css?family=Lato:100,300,400,700,900);
@import url(//fonts.googleapis.com/css?family=Reenie+Beanie);


html {
	overflow: hidden;
}

html, body {
	height:100%;
	
}

body {
	font:13px 'Lato';
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.homepage-wrapper, .homepage-wrapper nav {
	height: 100%;
}

.homepage-wrapper ul {
	overflow: hidden;
}

.homepage-wrapper a, .homepage-wrapper .beldi {
	display: block;
	height: 33.33%;
	width: 25%;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	border: 6px solid #fff;
}
	
	.homepage-wrapper .beldi { 
		left: 25%; 
		top: 33.33%; 
		height: 33.33%;
		height: 33.33vh;
	}
	.homepage-wrapper .beldi img { 
		display: block; 
		height: 80%;
		margin: 5% auto 0;
	}
	.homepage-wrapper .hotel { height: 66.66%; top:0; left: 0;}
	.homepage-wrapper .spa {bottom: 33.33%; right:0;}
	.homepage-wrapper .escape { width: 50%; bottom: 0; left: 25%; }
	.homepage-wrapper .events { bottom: 0; left: 0; }
	.homepage-wrapper .activities { top:0; left: 25%;}
	.homepage-wrapper .contact { bottom: 0; right: 0; }
	.homepage-wrapper .souk { top:33.33%; right: 25%; }
	.homepage-wrapper .restaurant { width: 50%; top:0; right:0;}
	
	.hotel { background-image:url(img/hotel.jpg); background-position: center right; }
	.spa { background-image:url(img/spa3.jpg); background-position: center; }
	.escape { background-image:url(img/escape.jpg); background-position: center 65%; }
	.events { background-image:url(img/events.jpg); background-position: center left; }
	.activities { background-image:url(img/activities.jpg); background-position: center }
	.contact { background-image:url(img/contact.jpg); background-position: bottom; }
	.souk { background-image:url(img/souk.jpg); background-position: center; }
	.restaurant { background-image:url(img/restaurant2.jpg); background-position:center; }
	.gardens { background-image:url(img/gardens.jpg); background-position:center; }

	
	.homepage-wrapper a span {
		position: absolute;
		bottom: 0px;
		width: 100%;
		padding-left: 20px;
		z-index: 999;
		display: block;
		opacity: 0;
		font:50px 'Zeyada';
		color: #fff;
		text-decoration: none;
	}
	
	.homepage-wrapper a:hover span { opacity:1}




.homepage-wrapper a:after {
	display: block;
	content: "";
	background: rgba(0,0,0,0.8);
	position: absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	opacity: 0;
	transition:0.2s opacity;
	
}

.homepage-wrapper a:hover:after  {
	opacity: 1;
}





#mobile-header {
    display: none;
    background: #fff;
    padding: 0 0 0 15px;
	height:50px;
	position: relative;
	z-index: 999;
}
	#mobile-header #responsive-menu-button {
		font-family: inherit;
		text-decoration: none;
		color: #333;
		font-size: 15px;
		text-transform: uppercase;
		line-height: 50px;
		float: right;
		padding: 0 15px;
	}
	#mobile-header #logo {
		float: left;
		display: inline-block;
		background: url(img/logo.jpg) no-repeat center center;
		background-size: auto 35px;
		color: transparent;
		margin: 0 auto;
		height: 50px;
		width: 50px;
	}
	








.container { height: 100%;}

.left-panel {
	width: 200px;
	height: 100%;
	background: #fff;
	float: left;
	color: #555;
	padding: 25px 25px 0;
	position: relative;
	overflow-y: auto;
}
.right-panel {
	margin-left: 200px;
	height: 100%;
	position: relative;
}

.right-panel h1 {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	height: 0;
}

.logo {
	display: block;
}
	.logo img { width: 100%; display: block;}

.lang { text-align: center; margin: 10px 0 30px;}
	.lang li { display: inline-block;}
	.lang a { padding: 5px; font-size: 11px !important;}

.left-panel a {
	text-transform: uppercase;
	line-height: 1.6;
	color: #555;
	text-decoration: none;
	font-size: 15px;
	font-weight: 300;
}
	.left-panel a:hover {
		color: #222;
	}
	
	.current a { color: #111; font-weight: 700;}
	

nav {
	position: relative;
	z-index: 99;
}

.left-panel a[href*='secure-hotel-booking.com'] {
    margin: 20px 0 20px -10px;
    background: #c76302;
    color: white;
    padding: 10px;
    display: block;
    margin-left: -10px;
    font-weight: 400;
}
.left-panel a[href*='secure-hotel-booking.com']:hover {
	background: #900;	
}
.secondary-nav {
	margin: 20px 0;	
}

.secondary-nav .lang {
	display: none;
}
	
.secondary-links {
	/*
position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #fff;
	padding:0 0 10px 28px;
*/
}
	.secondary-links p {
		line-height: 1.5;
	}
	
	

	.social-media-links {
		margin-top: 20px;
		display: flex;
		justify-content: space-between;
	}
	.social-media-links li {
		display: inline;
		padding-right: 10px;
		font-size: 15px;
	}
	.social-media-links a {
		text-transform: uppercase;
	}
	
	.social-media-links .fa {
		font-size: 24px;
	}
	
	
	.left-panel a[href^=mailto],
	.left-panel .tel { 
		text-transform: lowercase;
		font-size: 11px;
		font-weight: normal;
	}
	
/*
	i.fa.fa-envelope {
		font-size:16px;
	}
*/
	

	
	

.page-content {
	color: #fff;
	position: absolute;
	bottom: -10px;
	width:100%;
	line-height: 1.4;
}
	.label { 
		text-align: center;
		padding-bottom: 30px;
	}
	.label a {
		background: #000;
		font:36px/60px 'Reenie Beanie';
		height: 60px;
		padding: 0 20px;
		cursor: pointer;
		display: inline-block;
		transition: 0.3s all;
		color: #fff;
		text-decoration: none;
	}
	
	.page-content:hover .label a {
		opacity: 0;
	}
	
	
	.page-info {
		background: rgba(0,0,0,0.8);
		padding: 10px;
		overflow: hidden;
	}
	
	

		.three-col {
			width: 72%;
			float: left;
			padding: 10px;
	       	-moz-column-count: 2;
	       	-moz-column-gap: 25px;
	       	-webkit-column-count: 2;
	       	-webkit-column-gap : 25px;
	       	column-count: 2;
		   	column-gap: 25px;
		}
		.three-col p, 
		.three-col section,
		.full-width section {
			-moz-column-break-inside:avoid;
			-webkit-column-break-inside:avoid;
			column-break-inside:avoid;
		}
		
		.one-col {
			width: 28%;
			float: right;
			padding: 10px 0 10px 10px;
		}
		
		.full-width {
			-moz-column-count: 2;
	       	-moz-column-gap: 25px;
	       	-webkit-column-count: 2;
	       	-webkit-column-gap : 25px;
	       	column-count: 2;
		   	column-gap: 25px;
		   	padding: 10px;
		}
	
	.page-info h4 {
		text-transform: uppercase;
		color: #c00;
		color: #cc0055;
		font-weight: 900;
		font-size: 13px;
		display: inline;
		line-height: 1;
	}
	.page-info .kids {
		display: inline-block;
		font:22px 'Reenie Beanie';
		color: #fff;
		padding-left: 7px;
	}

	.page-info p {
		padding: 0 0 .5em;
	}
	.page-info a {
		text-decoration: none;
		color: #fff;
	}



	.escape-item {
		display: block;
		height: 100%;
		width: 50%;
		float: left;
		background-size: cover;
		cursor: pointer;
		position: relative;
		border: 5px solid #fff;
		border-width: 10px 5px 10px 5px;
	}
	.escape-item div {
		text-align: center;
		position: absolute;
		bottom: 30px;
		width: 100%;
	}
	
		
		.kasbah {
			background-image: url(img/bg/escapes/kasbah.jpg);
		}
		.liglesia {
			background-image: url(img/bg/escapes/liglesia.jpg);
		}
		
		.kasbah span, 
		.liglesia span {
			background: #000;
			font:30px/50px 'Reenie Beanie';
			height: 50px;
			padding: 0 20px;
			cursor: pointer;
			display: inline-block;
			transition: 0.3s all;
			color: #fff;
			text-decoration: none;
		}
		
		.escape-item:hover span {
			background: #cc0055;
		}
		
		



.button {
	background: #900;
	background: #c76302;
	color: #fff !important;
	padding: 0 10px;
	display: inline-block;
	line-height: 20px;
	font-weight: bold;
	text-transform: uppercase;
	margin: 1em 0 0;
	letter-spacing: 0.05em;
}
	.button:hover {
		background: #cc0055;
	}

.hide { display: none;}



.mobile {
	display: none !important;
}

@media(max-width: 959px) {
	.desktop, 
	.sidr-class-desktop {
		display: none !important;
	}	
	.mobile {
		display: inline-block !important;
	}
}



.contact-details {
	/* float: left; */
	font-size: 15px;
	padding: 250px 0 0 125px;
	background:url("img/map.jpg") no-repeat right center;
	background-size: contain;
	height: 100%;
}
.contact-details p { padding: 0 0 1em;}
.contact-details a {
	text-decoration: none;
	color: inherit;
}
.contact-details a:hover { color: #b00;}

.map {
	display: none;
}






.gallery-item {
	float: left;
	width:25%;
	height:50%;
	border:6px solid #fff;
	background-size: cover;
	cursor: pointer;
	position: relative;
}

.gallery-item span {
	background: rgba(0,0,0,0.4);
	font:30px/50px 'Reenie Beanie';
	height: 50px;
	padding: 0;
	cursor: pointer;
	display: inline-block;
	transition: 0.3s all;
	color: #fff;
	text-decoration: none;
	position: absolute;
	bottom: 0px;
	width: 100%;
	text-align: center;
	text-shadow: 0 1px 2px #000;
}
.gallery-item:hover span {
	background: rgba(0,0,0,0.8);
}

.hsb { display: none;}




.slide-nav {
	position: absolute;
	z-index: 999;
	top:30px;
	right:30px;
	display: none;
}
	.slide-nav li { display: inline;}
	.slide-nav a { 
		cursor: pointer;
		width: 50px;
		height: 50px;
		background: red;
		display: inline-block;
		background: rgba(0,0,0,0.1) url(img/arrows.png) no-repeat;
		background-size: auto 50px;
		transition:0.3s all;
	}
	.slide-nav a:hover { background-color: rgba(0,0,0,0.7);}
		.slide-nav a#prev { background-position: left center;}
		.slide-nav a#next { background-position: right center;}

.slide-bg .slide-nav { display: block;}






.contact-form {
	background: #b00;
	background: #6F946A;
	padding: 30px 10px 40px;
	overflow: hidden;
	position: relative;
}
#contact-form-message {
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	padding: 10px;
	letter-spacing: 1px;
	position: absolute;
	bottom:10px;
	left: 0;
	right: 0;
	display: none;
}
.success { background: yellow;}
.fail { background: red;}
.form-section {
	width: 25%;
	float: left;
	height:100%;
	padding: 0 20px;
}



.form-section.comments {
	width: 35%;
}
.form-section.submit {
	width: 15%;
}
.contact-form p {
	margin: 0 0 10px;
}
.contact-form label {
	line-height: 15px;
	font-weight: bold;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
	border:none;
	padding: 8px;
	font: 13px Arial;
	display: block;
	width: 100%;
	border-radius: 0;
	background: #fff;
}
.contact-form button[type=submit],
.contact-form textarea {
	height: 150px;
	resize: none;
	width: 100%;
}

.contact-form button[type=submit] {
	color: #fff;
	margin-top: 15px;
	border: none;
	background: #5c7a58;
	transition:0.3s background;
	cursor: pointer;
	font-size: 13px;
}

.contact-form button[type=submit]:hover {
	background: #496146;
}

#numrooms {
	display: inline !important;
	font-weight: bold;
	width: 20px;
	border: 0;
	padding: 0;
	background: transparent;
	color: #fff;
	font-size: 13px;
	text-align: center;
}

#close-form {
	position: absolute;
	right:10px;
	top:0;
	font-size: 25px;
	color: #5c7a58;
}
#close-form:hover { color: #496146; }







.press-holder {
	overflow: auto;
	height: 100%;
	padding-top: 60px;
}

.press-article {
	display: block;
	float: left;
	padding: 20px 10px;
	width:25%;
	text-decoration: none;
	color: inherit;
	overflow: auto;
	white-space: nowrap;
}



.press-article img {
	height: 80px;
	width: 60px;
	opacity: 1;
	transition:0.3s opacity;
	float: left;
	margin-right: 10px;
}
img.press-read {
	width: 20px;
	height: auto;
	padding: 5px 0;
	opacity: 0.4;
	transition:none;
}
.press-article:hover .press-read {
	opacity: 1;
}

	.press-title {
		text-transform: uppercase;
		font-weight: bold;
		padding: 3px 0;
	}
	.press-country,
	.press-date {
		color: #777;
	}


/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 1024px) {
		.contact-details {
			padding-left: 30px;
			background-size:400px auto;
		}
	}

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) {}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 959px) {
				
		.container {
			height: auto;
		}
		
		html {
			height: 100%;
			overflow: auto;
		}
		
		body {
			overflow: auto;
			height: auto;
		}
		

		
		#mobile-header {
	        display: block;
	        height: 80px;
	    }
		    #mobile-header #responsive-menu-button {
				font-size: 25px;	
				line-height: 80px;
				}
			#mobile-header #logo {
				background-size: auto 60px;
				height: 80px;
				width: 80px;
			}

	    
	    .left-panel { display: none; }
	    .right-panel { 
	    	margin-left: 0;
			margin-top: -50px;
			padding-top: 50px;
/* 			height: 100%; */
	    }
		.page-content {
			position: static;
			background: rgba(0,0,0,0);
			color: #333;
			/* min-height: 100%; */
		}
		.label {
			display: none;
		}
		.page-info {
			padding: 20px;
			background: transparent;
		}
		.page-info p {
			text-align: justify;
		}
		.three-col, .one-col, .full-width {
			width: 100%;
			float: none;
			-webkit-column-count: 1;
			-moz-column-count: 1;
			column-count:1;
			padding: 0;
		}
		
		.one-col {
			padding-top: 30px;
		}
		
		.slide-bg .slide-nav {
			display: none;
		}
		
		
		.right-panel h1 {
			display: block;
			height: auto;
			text-indent: 0;
			text-align: center;
			font-size: 25px;
			text-transform: uppercase;
			font-weight: 300;
			color: #aaa;
			line-height: 70px;
			display: none;
		}
		
		.slide-bg .right-panel {
			padding-top: 350px;
		}
		
		section {
			padding: 0 0 20px;
		}
		
		.page-info .kids {
			font-size:18px;
			color: #555;
			padding-left: 5px;
		}


		.escape-item {
			display: block;
			height: auto;
			width: 100%;
			float: none;
			background-size: cover;
			padding: 180px 0;
			border-width: 1px;
		}
			.escape-item div {
				position: static;
			}
				
				.kasbah {
					background-position: center 80%;
				}
				.liglesia {
					background-position: center 80%;
				}
				
				.kasbah span, 
				.liglesia span {
					background: #000;
					font:30px/50px 'Reenie Beanie';
					height: 50px;
					padding: 0 20px;
					cursor: pointer;
					display: inline-block;
					transition: 0.3s all;
					color: #fff;
					text-decoration: none;
				}
				
				.escape-item:hover span {
					background: #b00;
				}
		
		
		
		.contact-details {
			padding: 20px;
			width: 100%;
			float: none;
		}
		.map {
			padding: 0;
			width: 100%;
			height: auto;
			float: none;
		}
		
				
		.homepage-wrapper {
			height: auto;
		}
		
		.homepage-wrapper .beldi { 
			position:absolute;;
			height: auto;
			margin-bottom: 0;
			width: 100%;
			border: none;
			left:0;
			right:0;
			top:15px;
		}
		.homepage-wrapper .beldi img { 
			display: block; 
			height: 100px;
			margin: 0 auto;
			z-index: 99999;
		}
		
		.homepage-wrapper a {
			height: auto !important;
			width: 50% !important;
			position:relative;
			padding: 5px;
			text-decoration: none;
			border-width: 2px;
			float: left;
			
		}
		.homepage-wrapper nav {
			margin-top: 80px;
		}
			
			.hotel,
			.spa, 
			.escape, 
			.events,			
			.activities, 
			.contact, 
			.souk,
			.restaurant {
				top:0 !important; 
				left: 0 !important;
			}
			
			.homepage-wrapper a span {
				position: relative;
				width: 100%;
				padding:10px 0 0;
				z-index: 999;
				display: inline-block;
				opacity: 1;
				font:40px/150px 'Zeyada';
				text-shadow: 0 0 2px rgba(0,0,0,1), 0 0 2px rgba(0,0,0,1), 0 0 4px rgba(0,0,0,1), 0 0px 4px rgba(0,0,0,1);;
				background: rgba(0,0,0,0.3);
				text-align: center;
				transition:0.3s all;
			}
			.homepage-wrapper a:hover span {
				background: rgba(0,0,0,0.9);
			}
			
			
					
		
		
		.homepage-wrapper a:after {
			display: block;
			content: "";
			background: rgba(0,0,0,0.8);
			position: absolute;
			top:0;
			bottom:0;
			left:0;
			right:0;
			opacity: 0;
			transition:0.2s opacity;
		}
		
		.homepage-wrapper a:hover:after  {
			opacity: 0;
		}
		
		.homepage #mobile-header { background: transparent;}
		.homepage #mobile-header #logo { display: none;}
		
		.contact-details {
			padding: 30px 0 30px 50px;
			background: none;
		}
		.map {
			display: block;
		}
		
		
		.contact-form { 
			color: #fff;
		}
		.form-section, 
		.form-section.comments,
		.form-section.submit{
			width: 100%;
			float: none;
		}
		
		.form-section {
			padding-bottom:20px;
		}
		.form-section.submit {
			padding: 0;
		}
		
		#contact-form-message {
			position: relative;
			bottom: 0;
		}
		.contact-form button[type=submit] {
			height: auto;
			padding: 10px 0;
		}
		#close-form {
			display: none;
		}
		
		
		#book-button {
			display: none;
		}
		
		.gallery-item {
			float: left;
			display: block;
			width: 50%;
			height: 200px;
			border:10px solid white;
			background-size: cover;
			cursor: pointer;
			margin-bottom: 5px;
		}		
		.hsb {
			display: none;
		}
		
		.press-holder {
			padding-top: 0;
		}
		.press-article {
			padding: 20px;
			width:50%;
			text-decoration: none;
			color: inherit;
			border-bottom: 1px solid #eee;
		}
		/*
.press-article:nth-child(odd) div { text-align: right;}
		.press-article:nth-child(odd) img {
			float: right;
			margin: 0;
		}
		.press-article:nth-child(odd) .press_cover {
			margin-left: 20px;
		}
*/

		img.press-read {
			opacity: 1;
		}
	}
	
	@media only screen and (max-width: 767px) {
		
		#mobile-header {
	        display: block;
	        height: 50px;
	    }
		    #mobile-header #responsive-menu-button {
				font-size: 15px;	
				line-height: 50px;
				}
			#mobile-header #logo {
				background-size: auto 35px;
				height: 50px;
				width: 50px;
			}
		
		.homepage-wrapper a span {
			font:30px 'Zeyada';
		}
		
		.slide-bg .right-panel {
			padding-top: 210px;
		}
	
		.gallery-item {
			float: none;
			display: block;
			width: 100%;
			border:none;
			background-size: cover;
			cursor: pointer;
			margin-bottom: 10px;
			height: 50px
		}	
		.hsb {
			display: none;
		}
		
		.escape-item {
			padding: 65px 0;
		}
		
		.press-article {
			display: block;
			float: none;
			padding: 20px;
			width:100%;
			text-decoration: none;
			color: inherit;
			border-bottom: 1px solid #eee;
		}
	
	
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {}