@CHARSET "ISO-8859-1";

/* Reset CSS

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

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,

form,fieldset,input,textarea,p,blockquote,th,td {

    padding: 0;

	margin: 0;

	font-family: 'Tajawal' !important;

}

a{

	text-decoration:none;

}

table {

    border-spacing: 0;    

}

fieldset,img {

    border: 0;

}

address,caption,cite,code,dfn,em,strong,th,var {

    font-weight: normal;

    font-style: normal;

}

strong{

	font-weight: bold;

}

ol,ul {

    list-style: none;

    margin:0;

    padding:0;

}

caption,th {

    text-align: left;



}

h1,h2,h3,h4,h5,h6 {

    font-weight: normal;

    font-size: 100%;

    margin:0;

    padding:0;

    color:#444;

}

q:before,q:after {

    content:'';

}

abbr,acronym { border: 0;

}





@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);

@import url(http://fonts.googleapis.com/css?family=Satisfy);

@import url(https://fonts.googleapis.com/css?family=Cairo:200,300,400,600,700,900&subset=arabic);

@import url(https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&subset=arabic);



/* #PAGE LOAD */



body.royal_loader {

    background: none;

    visibility: hidden;

}

#royal_preloader {

    font-family: Tajawal;

    font-size: 12px;

    visibility: visible;

    position: fixed;

    top: 0px;

    right: 0px;

    bottom: 0px;

    left: 0px;

    z-index: 9999999999;

    -webkit-transition: opacity 0.2s linear 0.8s;

       -moz-transition: opacity 0.2s linear 0.8s;

        -ms-transition: opacity 0.2s linear 0.8s;

         -o-transition: opacity 0.2s linear 0.8s;

            transition: opacity 0.2s linear 0.8s;

}

#royal_preloader.complete {

    opacity: 0;

}

#royal_preloader .background {

    position: absolute;

    top: 0px;

    bottom: 0px;

    left: 0px;

    right: 0px;

    background-color: #000000;

    -webkit-transition: background 0.5s linear;

       -moz-transition: background 0.5s linear;

        -ms-transition: background 0.5s linear;

         -o-transition: background 0.5s linear;

            transition: background 0.5s linear;

}

#royal_preloader.number .name {

    position: absolute;

    top: 20%;

    left: 0px;

    right: 0px;

    text-transform: uppercase;

    color: #000;

    text-align: center;

    opacity: 0;

    -webkit-transition: -webkit-transform 0.3s linear;

       -moz-transition: -moz-transform 0.3s linear;

        -ms-transition: -ms-transform 0.3s linear;

         -o-transition: -o-transform 0.3s linear;

            transition: transform 0.3s linear;

    -webkit-animation: fly 0.3s;

       -moz-animation: fly 0.3s;

        -ms-animation: fly 0.3s;

         -o-animation: fly 0.3s;

            animation: fly 0.3s;

}

#royal_preloader.number .percentage {

    color: #fff;

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

	font-weight:400;

    text-align: center;

    margin: -35px 0px 0px -110px;

    background-image: url('../images/footer_logo.png');

    background-repeat: no-repeat;

    background-position: 50% 0;

	background-size:145px 70px;

    padding-top: 75px;

    width: 220px;

    position: absolute;

    font-size: 16px;

    top: 50%;

    left: 50%;

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

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

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

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

            transition: all 0.3s linear 0.5s;

}

#royal_preloader.text .loader {

    position: absolute;

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

	font-weight:600;

	color: #edb112;

	text-shadow: 0 0 15px rgba(0,0,0,0.3);

	text-transform:uppercase;

    top: 50%;

    left: 50%;

    height: 40px;

    line-height: 40px;

    margin-top: -20px;

    letter-spacing: 0px;

    font-size: 18px;

    white-space: nowrap;

}

#royal_preloader.text .loader div {

    position: absolute;

    top: 0px;

    right: 0px;

    bottom: 0px;

    left: 0%;

    background-color: #000000;

    opacity: 0.7;

    filter: alpha(opacity=70);

    -webkit-transition: left 0.3s linear;

       -moz-transition: left 0.3s linear;

        -ms-transition: left 0.3s linear;

         -o-transition: left 0.3s linear;

            transition: left 0.3s linear;

}

#royal_preloader.logo .loader {

    width: 140px;

    height: 40px;

    position: absolute;

    left: 50%;

    top: 50%;

    margin: -70px 0px 0px -20px;

    overflow: hidden;

    background-position: 50% 50%;

    background-repeat: no-repeat;

    background-size: cover;

}

#royal_preloader.logo .loader div {

    position: absolute;

    bottom: 0%;

    left: 0px;

    right: 0px;

    height: 100%;

    opacity: 0.7;

    filter: alpha(opacity=70);

    -webkit-transition: bottom 0.3s linear;

       -moz-transition: bottom 0.3s linear;

        -ms-transition: bottom 0.3s linear;

         -o-transition: bottom 0.3s linear;

            transition: bottom 0.3s linear;

}

#royal_preloader.logo .percentage {

    position: absolute;

    width: 80px;

    height: 40px;

    line-height: 40px;

    top: 50%;

    left: 50%;

    margin: 40px 0px 0px -40px;

    color: #000;

    text-align: center;

    font-family: 'Tajawal';

    font-size: 12px;

    font-weight: bold;

}



@-webkit-keyframes fly {

    0% { opacity: 0; top: 50%; }

    20% {opacity: 1; top: 40%; }

    100% { opacity: 0; top: 20%;}

}

@-moz-keyframes fly {

    0% { opacity: 0; top: 50%; }

    20% {opacity: 1; top: 40%; }

    100% { opacity: 0; top: 20%;}

}

@-ms-keyframes fly {

    0% { opacity: 0; top: 50%; }

    20% {opacity: 1; top: 40%; }

    100% { opacity: 0; top: 20%;}

}

@-o-keyframes fly {

    0% { opacity: 0; top: 50%; }

    20% {opacity: 1; top: 40%; }

    100% { opacity: 0; top: 20%;}

}

@keyframes fly {

    0% { opacity: 0; top: 50%; }

    20% {opacity: 1; top: 40%; }

    100% { opacity: 0; top: 20%;}

}







.section{

	text-align:center;

}









/* Morph Button: Default Styles */



.morph-button {

	position: relative;

	display: block;

	margin: 0 auto;

  -webkit-transition: all .3s ease-in-out;

  -moz-transition: all .3s ease-in-out;

  -o-transition: all .3s ease-in-out;

  transition: all .3s ease-in-out;

}

@font-face {

	font-weight: normal;

	font-style: normal;

	font-family: 'awesome';

	src:url('../fonts/awesome/fontawesome-webfont.eot');

	src:url('../fonts/awesome/fontawesome-webfont.eot') format('embedded-opentype'),

		url('../fonts/awesome/fontawesome-webfont.woff') format('woff'),

		url('../fonts/awesome/fontawesome-webfont.ttf') format('truetype'),

		url('../fonts/awesome/fontawesome-webfont.svg') format('svg');

}





@font-face {

    font-family: 'tajawal';

    src: url('../fonts/tajawal/tajawal-regular-webfont.woff2') format('woff2'),

		 url('../fonts/tajawal/tajawal-regular-webfont.woff') format('woff'),

		 url('../fonts/tajawal/Tajawal-Regular.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;



}



.morph-button > button {

	position: fixed;

	top:30px;

	left:30px;

	z-index:100;

	padding: 0 1em;

	font-family: 'awesome';

	font-size:14px;

	border: none;

	width:60px;

	height:60px;

	background-color: rgba(23, 52, 91, 0.9);

	color: #fff;

	text-transform: uppercase;

	cursor:pointer;

	letter-spacing: 1px;

	font-weight: 700;

	line-height: 60px;

	overflow: hidden;

  -webkit-transition: all .3s ease-in-out;

  -moz-transition: all .3s ease-in-out;

  -o-transition: all .3s ease-in-out;

  transition: all .3s ease-in-out;

}

.morph-button > button:hover {

	color: #999494;

}

.morph-button > button:before {

  -webkit-transition: all .3s ease-in-out;

  -moz-transition: all .3s ease-in-out;

  -o-transition: all .3s ease-in-out;

  transition: all .3s ease-in-out;

	content: "\f0c9";

}

.morph-button.open > button {

	pointer-events: none;

}



.morph-content {

	pointer-events: none;

	overflow:hidden;

	width:100%;

	height:100%;

}



.morph-button.open .morph-content {

	pointer-events: auto;

}



/* Common styles for overlay and modal type (fixed morph) */

.morph-button-fixed,

.morph-button-fixed .morph-content {

	width: 300px;

	height: 80px;

}



.morph-button-fixed > button {

	z-index: 1000;

	-webkit-transition: opacity 0.1s 0.5s;

	transition: opacity 0.1s 0.5s;

}



.morph-button-fixed.open > button {

	opacity: 0;

	-webkit-transition: opacity 0.1s;

	transition: opacity 0.1s;

}



.morph-button-fixed .morph-content {

	position: fixed;

	z-index: 900;

	opacity: 0;

	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;

	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;

}



.morph-button-fixed.open .morph-content {

	opacity: 1;

}



.morph-button-fixed .morph-content > div {

	visibility: hidden;

	height: 0;

	opacity: 0;

	-webkit-transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;

	transition: opacity 0.1s, visibility 0s 0.1s, height 0s 0.1s;

}



.morph-button-fixed.open .morph-content > div {

	visibility: visible;

	height: auto;

	opacity: 1;

	-webkit-transition: opacity 0.3s 0.5s;

	transition: opacity 0.3s 0.5s;

}



.morph-button-fixed.active > button {

	z-index: 2000;

}



.morph-button-fixed.active .morph-content {

	z-index: 1900;

}



/* Transitions for overlay button and sidebar button */

.morph-button-overlay .morph-content,

.morph-button-sidebar .morph-content {

	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;

	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;

}



.morph-button-overlay.open .morph-content,

.morph-button-sidebar.open .morph-content {

	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;

	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;	

}



/* Morph Button Style: Overlay */

.morph-button.morph-button-overlay {

	margin: 50px auto;

}



.morph-button-overlay .morph-content {

	overflow: hidden;

	background: rgba(23, 52, 91, 0.85);

}



.morph-button-overlay.open .morph-content {

	top: 0 !important;

	left: 0 !important;

	width: 100%;

	height: 100%;

}



/* Morph Button Style: Modal */

.morph-button-modal::before {

	position: fixed;

	top: 0;

	left: 0;

	z-index: 800;

	width: 100%;

	height: 100%;

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

	content: '';

	opacity: 0;

	-webkit-transition: opacity 0.5s;

	transition: opacity 0.5s;

	pointer-events: none;

}



.morph-button-modal.open::before {

	opacity: 1;

	pointer-events: auto;

}



.morph-button-modal.active::before {

	z-index: 1800;

}



.morph-button-modal .morph-content {

	overflow: hidden;

	-webkit-transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;

	transition: opacity 0.3s 0.5s, width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;

}



.morph-button-modal.open .morph-content {

	top: 50% !important;

	left: 50% !important;

	margin: -210px 0 0 -300px;

	width: 600px;

	height: 420px;

	-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;

	transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s, margin 0.4s 0.1s;

}





/* Let's add some nice easing for all cases */

.morph-button .morph-content,

.morph-button.open .morph-content,

.morph-button-modal-4 .morph-clone {

	-webkit-transition-timing-function: cubic-bezier(0.7,0,0.3,1);

	transition-timing-function: cubic-bezier(0.7,0,0.3,1);

}



/* Helper classes */

.noscroll {

	overflow: hidden;

}



.morph-button-overlay.scroll .morph-content {

	overflow-y: scroll;

}



.morph-button-sidebar.scroll .morph-content {

	overflow: auto;

}



/* No JS fallback: let's hide the button and show the content */

.no-js .morph-button > button {

	display: none;

}



.no-js .morph-button {

	margin: 10px 0;

	float: none;

}



.no-js .morph-button,

.no-js .morph-button .morph-content,

.no-js .morph-button .morph-content > div {

	position: relative;

	width: auto;

	height: auto;

	opacity: 1;

	visibility: visible;

	top: auto;

	left: auto;

	-webkit-transform: none;

	transform: none;

	pointer-events: auto;

}



.no-js .morph-button .morph-content .icon-close {

	display: none;

}



.no-js .morph-button-sidebar {

	width: 300px;

	position: fixed;

	top: 0;

	left: 0;

	margin: 0;

	height: 100%;

	background: #e85657;

	overflow: auto;

}



.no-transition {

	-webkit-transition: none !important;

	transition: none !important;

}



/* Media Queries */



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

	.morph-button-modal.open .morph-content {

		top: 0% !important;

		left: 0% !important;

		margin: 0;

		width: 100%;

		height: 100%;

		overflow-y: scroll;

		-webkit-transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;

		transition: width 0.4s 0.1s, height 0.4s 0.1s, top 0.4s 0.1s, left 0.4s 0.1s;

	}

}



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

	.morph-button-sidebar,

	.morph-button-sidebar .morph-content {

		width: 100% !important;

		height: 60px !important;

	}



	.morph-button-sidebar {

		bottom: 0px;

		left: 0px;

	}

}



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

	.morph-button-fixed,

	.morph-button-fixed .morph-content {

		width: 200px;

		height: 80px;

	}



	.morph-button-fixed > button {

		font-size: 75%;

	}



	.morph-button-inflow .morph-content .morph-clone {

		font-size: 0.9em;

	}



	.morph-button-modal-4,

	.morph-button-modal-4 .morph-content {

		width: 220px;

		height: 120px;

	}



	.morph-button-modal-4 > button {

		font-size: 100%;

		line-height: 50px;

	}



	.morph-button-modal-4 > button span {

		display: block;

	}



	.morph-button-modal-4 .morph-clone {

		right: 83px;

		bottom: 26px;

	}

}



/* Icons */

@font-face {

	font-weight: normal;

	font-style: normal;

	font-family: 'icomoon';

	src:url('../fonts/icomoon/icomoon.eot?i64fx9');

	src:url('../fonts/icomoon/icomoon.eot?#iefixi64fx9') format('embedded-opentype'),

		url('../fonts/icomoon/icomoon.woff?i64fx9') format('woff'),

		url('../fonts/icomoon/icomoon.ttf?i64fx9') format('truetype'),

		url('../fonts/icomoon/icomoon.svg?i64fx9#icomoon') format('svg');

}



.icon-close {

	z-index: 100;

	display: block;

	overflow: hidden;

	width: 3em;

	height: 3em;

	text-align: center;

	color: rgba(255,255,255,0.6);

	line-height: 3;

	cursor: pointer;

}



.icon:before {

	position: relative;

	display: block;

	width: 100%;

	height: 100%;

	text-transform: none;

	font-weight: normal;

	font-style: normal;

	font-variant: normal;

	font-family: 'icomoon';

	speak: none;

	-webkit-font-smoothing: antialiased;

	-moz-osx-font-smoothing: grayscale;

}



.icon-camera:before {

	content: "\e017";

}



.icon-server:before {

	content: "\e022";

}



.icon-heart:before {

	content: "\e024";

}



.icon-zoom-in:before {

	content: "\e037";

}



.icon-microphone:before {

	content: "\e048";

}



.icon-cloud:before {

	content: "\e066";

}



.icon-user:before {

	content: "\e074";

}



.icon-briefcase:before {

	content: "\e075";

}



.icon-globe:before {

	content: "\e078";

}



.icon-cog::before {

	content: "\e600";

}



.icon-close::before {

	content: "\e601";

}



.icon-play::before {

	content: "\e602";

}



.icon-pause::before {

	content: "\e603";

}



.icon-close {

	position: absolute;

	top: 20px;

	right: 20px;

}



.icon-close:hover {

	color: #fff;

}



/* Styles for dummy content */



/* Style for overlay */



.content-style-overlay {

	text-align: center;

}

.content-style-overlay .menu-in-overlay{

	position:absolute;

	width:100%;

	top:50%;

	left:0;

	z-index:1000;

	margin-top:-130px;

}

.content-style-overlay .menu-in-overlay li{

	width:100%;

	text-align:center;

	margin-top:25px;

	margin-bottom:25px;

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

	letter-spacing:0px;

	font-weight:700;

	text-transform:uppercase;

	font-size:16px;

	color:#fff;

}



.content-style-overlay .menu-in-overlay li a {

	position: relative;

	outline: none;

	color: #fff;

	text-decoration: none;

	text-transform: uppercase;

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

	font-weight:400;

	letter-spacing:0px;

	font-size:16px;

	margin-left:18px;

}

.content-style-overlay .menu-in-overlay li a:hover,

.content-style-overlay .menu-in-overlay li a:focus {

	outline: none;

}



.content-style-overlay .menu-in-overlay li .cl-effect-11 a {

	color: #fff;

	text-shadow: none;

} 



.content-style-overlay .menu-in-overlay li .cl-effect-11 a::before {

	position: absolute;

	top: 0px;

	left: 0;

	overflow: hidden;

	max-width: 0;

	color: #edb112;

	content: attr(data-hover);

	-webkit-transition: max-width 0.5s;

	-moz-transition: max-width 0.5s;

	transition: max-width 0.5s;

	line-height: 16px;

	white-space: nowrap;

}



.content-style-overlay .menu-in-overlay li .cl-effect-11 a:hover::before,

.content-style-overlay .menu-in-overlay li .cl-effect-11 a:focus::before {

	max-width: 100%;

}







.content-style-overlay .icon-close {

	line-height: 2.8;

}



.content-style-overlay .icon-close:hover {

}











.logo{

position: fixed;

    top: 0;

    right: -20px;

    width: 110%;

    height: 110px;

    background: url(../images/logo.png)no-repeat right center rgba(0,0,0,0.55);

    background-size: 195px 70px;

	z-index: 10;

}





.just_pattern { 

	background-image: url(../images/pattern.png); 

	position: absolute; 

	opacity: 0.8; 

	left: 0px;

	top: 0px;

	right:0;

	bottom:0;

	width: 100%;

	height: 100%; 

	z-index: 1; 

}



#left1{

    background: url('../images/left1.jpg')no-repeat top right;

	background-size:cover;

}

#right1{

    background: url('../images/right1.jpg')no-repeat top left;

	background-size:cover;

}



#left2{

    background: url('../images/left2.jpg')no-repeat top right;

	background-size:cover;

}

#right2{

    background: url('../images/right2.jpg')no-repeat top left;

	background-size:cover;

}



#left3{

    background: url('../images/left3.jpg')no-repeat top right;

	background-size:cover;

}

#right3{

    background: url('../images/right3.jpg')no-repeat top left;

	background-size:cover;

}



#left4{

    background: url('../images/left4.jpg')no-repeat top right;

	background-size:cover;

}

#right4{

    background: url('../images/right4.jpg')no-repeat top left;

	background-size:cover;

}



#left5{

    background: url('../images/left5.jpg')no-repeat top right;

	background-size:cover;

}

#right5{

    background: url('../images/right5.jpg')no-repeat top left;

	background-size:cover;

}





#left6{

    background: url('../images/left6.jpg')no-repeat top right;

	background-size:cover;

}

#right6{

    background: url('../images/right6.jpg')no-repeat top left;

	background-size:cover;

}



.big-text { 

	position: absolute; 

	left:0;

	top:50%;

	margin-top:-75px;

	width:100%;

	font-family: 'Tajawal';

	text-shadow: 0 0 15px rgba(0,0,0,0.7);

	color:#eeeeee;

	text-align:center;

	font-size: 60px; 

	font-weight: bold;

	line-height:60px;

	z-index: 200; 

}

.text-line { 

	position: absolute; 

	left:50%;

	top:50%;

	margin-top:10px;

	width:120px;

	margin-left:-60px;

	height:0px;

	border-top:1px dashed #fff;

	z-index: 200; 

}

.small-text { 

	position: absolute;

	left:0;

	top:50%;

	margin:35px auto 0 auto;

	width:90%;

	color:#fff;

	font-family: 'Tajawal', cursive;

	text-shadow: 0 0 5px rgba(0,0,0,0.1);

	text-align:center;

	font-size: 18px; 

	line-height:44px;

	font-weight: 100;

	z-index: 200; 

}





.big-text-down { 

	position: absolute; 

	left:0;

	top:50%;

	margin-top:-60px;

	width:100%;

	font-family: 'Tajawal';

	text-shadow: 0 0 15px rgba(0,0,0,0.3);

	text-transform:uppercase;

	color:#eeeeee;

	text-align:center;

	font-size: 45px; 

	line-height:45px;

	z-index: 200; 

	font-weight: bold;

}

.text-line-down { 

	position: absolute; 

	left:50%;

	top:50%;

	margin-top:10px;

	width:120px;

	margin-left:-60px;

	height:0px;

	border-top:1px dashed #fff;

	z-index: 200; 

}

.small-text-down { 

	direction: rtl;

	position: absolute;

	left:0;

	top:50%;

	margin-top:35px;

	width:100%;

	color:#fff;

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

	font-weight:400;

	text-shadow: 0 0 5px rgba(0,0,0,0.6);

	text-transform:uppercase;

	text-align:center;

	letter-spacing:0px;

	font-size: 18px; 

	line-height:34px;

	z-index: 200; 

}



.small-text-down p {

	padding: 0 20px;

}



.flippy {

	position: absolute;

	width:100%;

	left:0;

	top:50%;

}

.flippy > * {

	position: absolute;

	opacity: 0;

	width:100%;

	top:-100px;

}

.flippy > *:first-child {

	opacity: 1;

	top: 0;

}







.scrolling{

	position:absolute;

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

	font-weight:700;

	font-size:12px;

	color:#fff;

	text-transform: uppercase;

	text-align:center;

	top:50%;

	left:50%;

	margin-left:-60px;

	margin-top:-60px;

	width:120px;

	height:120px;

	margin-left:-59px;

	background:url('../images/scroll.gif')no-repeat center bottom;

	background-size:7px 50px;

	z-index:10;

}

.black-back { 

	background: rgba(0,0,0,.5); 

	position: absolute;  

	left: 0px;

	top: 0px;

	right:0;

	bottom:0;

	width: 100%;

	height: 100%; 

	z-index: 2; 

}



.sections-link{

	position:absolute;

	top:50%;

	left:0;

	text-align:center;

	margin-top:-10px;

	width:100%;

	height:60px;

	z-index:10;

	-webkit-transition: all 0.3s;

	-moz-transition: all 0.3s;

	transition: all 0.3s;

}



.sections-link a {

	position: relative;

	outline: none;

	color: #edb112;

	text-decoration: none;

	text-transform: uppercase;

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

	font-weight:400;

	letter-spacing:0px;

	font-size:12px; 

	padding:15px 50px;

	background:rgba(0,0,0,.7);

}

.sections-link a:hover,

.sections-link a:focus {

	outline: none;

}



.sections-link .cl-effect-11 a {

	color: #edb112;

	text-shadow: none;

	overflow: hidden;

} 



.sections-link .cl-effect-11 a::before {

	position: absolute;

	top: 0;

	left: 0;

	overflow: hidden;

	max-width: 0;

	height:14px;

	color: #fff;

	font-weight:400;

	margin-top:14px;

	margin-left:50px;

	content: attr(data-hover);

	-webkit-transition: max-width 0.8s;

	-moz-transition: max-width 0.8s;

	transition: max-width 0.8s;

}



.sections-link .cl-effect-11 a:hover::before,

.sections-link .cl-effect-11 a:focus::before {

	max-width: 100%;

}





.sections-link a:after {

	font-family: 'awesome';

	content: '\f105';

	position: absolute;

	font-size:12px;

	line-height:12px;

	width: 12px;

	height: 2px;

	top: 16px;

	left: 0px;

	color: #fff;

	opacity:0;

	z-index: 1;

	-webkit-transition: all 0.3s;

	-moz-transition: all 0.3s;

	transition: all 0.3s;

}



.sections-link:hover,

.sections-link:active {

}



.sections-link a:hover:after,

.sections-link a:active:after {

	left: 25px;

	opacity:1;

}









#map{

	position: absolute;

	top:0;

	left:0;

	bottom:0;

	right:0;

	z-index:1;

  display: block;

  width: 100%;

  height: 100%;

  margin: 0 auto;

}

.map-shadow{

	position: absolute;

	top:0;

	left:0;

	bottom:0;

	right:0;

	z-index:2;

  display: block;

  width: 100%;

  height: 100%;

  margin: 0 auto;

}

.overlay{

  display:block;

  z-index:10;

  text-align:center;

  height:80px;

  width:102px;

  background:transparent url(../images/marker.png)no-repeat bottom center;

}

.overlay_arrow{

  left:50%;

  margin-left:-16px;

  width:0;

  height:0;

  position:absolute;

}

.overlay_arrow.above{

  bottom:-13px;

  border-left:16px solid transparent;

  border-right:16px solid transparent;

  border-top:16px solid #000;

}

.overlay_arrow.below{

  top:-15px;

  border-left:16px solid transparent;

  border-right:16px solid transparent;

  border-bottom:16px solid #000;

}













/* #Media Queries

================================================== */





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

.morph-button > button {

	position: fixed;

	top:30px;

	left:30px;

	z-index:100;

	padding: 0 1em;

	font-family: 'awesome';

	font-size:14px;

	border: none;

	width:60px;

	height:60px;

	background-color: #17345b;

	color: #fff;

	text-transform: uppercase;

	cursor:pointer;

	letter-spacing: 1px;

	font-weight: 700;

	line-height: 60px;

	overflow: hidden;

  -webkit-transition: all .3s ease-in-out;

  -moz-transition: all .3s ease-in-out;

  -o-transition: all .3s ease-in-out;

  transition: all .3s ease-in-out;

}

.logo {

    position: fixed;

	right: -20px;

	top: 0;

    width: 110%;

    height: 110px;

    background: url(../images/logo.png)no-repeat right center rgba(0,0,0,0.55);

    background-size: 180px 60px;

	z-index: 10;

}



@media only screen and (min-width: 1200px) and (max-width: 1699px) {

.big-text { 

	margin-top:-60px;

	font-size: 45px; 

	line-height:45px;

} 

}



@media only screen and (min-width: 960px) and (max-width: 1199px) {

.big-text { 

	margin-top:-50px;

	font-size: 35px; 

	line-height:35px;

} 

.small-text { 

	font-size: 18px; 

	line-height:40px;

	padding: 0 15px;

	width: 90%;

}

}



@media only screen and (min-width: 768px) and (max-width: 959px) {

.black-back { 

	display:none;

}

.just_pattern {

	display:none; 

}

.scrolling{

	display:none;

}

.big-text { 

	margin-top:-50px;

	font-size: 35px; 

	line-height:35px;

	width:200%;

} 

.text-line {  

	left:100%;

}

.small-text { 

	font-size: 20px; 

	line-height:20px;

	width:200%;

}

.big-text-down { 

	margin-top:-80px;

	width:200%;

	font-size: 35px; 

	line-height:35px;

}

.text-line-down { 

	left:100%;

	margin-top:-20px;

}

.small-text-down { 

	margin-top:5px;

	width:200%;

}

#right2 .big-text-down,

#right4 .big-text-down{

	left:auto;

	right:0;

}

#right2 .text-line-down,

#right4 .text-line-down{

	left:auto;

	right:100%;

	margin-left:0px;

	margin-right:-60px;

}

#right2 .small-text-down,

#right4 .small-text-down{

	left:auto;

	right:0;

}

.sections-link{

	top:auto;

	margin-top:0px;

	bottom:30px;

	width:200%;

}

#right3 .sections-link,

#right5 .sections-link{

	left:auto;

	right:0;

}

#map{

	right:-100%;

	width: 200%;

}

.map-shadow{

	right:-100%;

	width: 200%;

}

}



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

#multiscroll-nav {

    margin-top: 52px;

}

.black-back { 

	display:none;

}

.just_pattern {

	display:none; 

}

.scrolling{

	display:none;

}

.big-text { 

	margin-top:-50px;

	font-size: 35px; 

	line-height:35px;

	width:200%;

} 

.text-line {  

	left:100%;

}

.small-text { 

	font-size: 20px; 

	line-height:20px;

	width:200%;

}

.big-text-down { 

	margin-top:-80px;

	width:200%;

	font-size: 35px; 

	line-height:35px;

}

.text-line-down { 

	left:100%;

	margin-top:-20px;

}

.small-text-down { 

	margin-top:5px;

	width:200%;

}

#right2 .big-text-down,

#right4 .big-text-down{

	left:auto;

	right:0;

}

#right2 .text-line-down,

#right4 .text-line-down{

	left:auto;

	right:100%;

	margin-left:0px;

	margin-right:-60px;

}

#right2 .small-text-down,

#right4 .small-text-down{

	left:auto;

	right:0;

}

.sections-link{

	top:auto;

	margin-top:0px;

	bottom:30px;

	width:200%;

}

#right3 .sections-link,

#right5 .sections-link{

	left:auto;

	right:0;

}

#map{

	right:-100%;

	width: 200%;

}

.map-shadow{

	right:-100%;

	width: 200%;

}

}



@media only screen and (min-width: 320px) and (max-width: 479px) {

#multiscroll-nav {

    margin-top: 52px;

}

.black-back { 

	display:none;

}

.just_pattern {

	display:none; 

}

.scrolling{

	display:none;

}

.big-text {

	padding-top: 20px;

	margin-top: -100px;

	font-size: 25px; 

	line-height:25px;

	width:200%;

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

	height: 130px;

	text-align: center;

} 

.text-line {  

	margin-top: -40px;

	left:100%;

}

.small-text { 

	font-size: 16px; 

	line-height:16px;

	width:200%;

}

.big-text-down { 

	margin-top:-70px;

	width:200%;

	font-size: 25px; 

	line-height:25px;

	font-weight: bold;

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

    height: 120px;

	padding-top: 20px;

}

.text-line-down { 

	left:100%;

	margin-top:-10px;

}

.small-text-down { 

	margin:10px 0% 0 0%;

	width:200%;

	font-size: 16px; 

	line-height:22px;

	padding: 5px 0px;

}



.small-text-down p {

	padding: 5px;

	margin-top: -45px;

}



#right2 .big-text-down,

#right4 .big-text-down{

	left:auto;

	right:0;

}

#right2 .text-line-down,

#right4 .text-line-down{

	left:auto;

	right:100%;

	margin-left:0px;

	margin-right:-60px;

}

#right2 .small-text-down,

#right4 .small-text-down{

	left:auto;

	right:0;

}

.sections-link{

	top:auto;

	margin-top:0px;

	bottom:30px;

	width:200%;

}



#right6 .sections-link {

	width: 100%;

}



#right3 .sections-link,

#right5 .sections-link{

	left:auto;

	right:0;

}

#map{

	right:-100%;

	width: 200%;

}

.map-shadow{

	right:-100%;

	width: 200%;

}

}



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

#multiscroll-nav {

    margin-top: 52px;

}

.black-back { 

	display:none;

}

.just_pattern {

	display:none; 

}

.scrolling{

	display:none;

}

.big-text { 

	margin-top:-40px;

	font-size: 25px; 

	line-height:25px;

	width:200%;

} 

.text-line {  

	left:100%;

}

.small-text { 

	font-size: 16px; 

	line-height:16px;

	width:200%;

}

.big-text-down { 

	margin-top:-70px;

	width:200%;

	font-size: 25px; 

	line-height:25px;

}

.text-line-down { 

	left:100%;

	margin-top:-20px;

}

.small-text-down { 

	margin-top:5px;

	width:200%;

	font-size: 10px; 

	line-height:10px;

}

#right2 .big-text-down,

#right4 .big-text-down{

	left:auto;

	right:0;

}

#right2 .text-line-down,

#right4 .text-line-down{

	left:auto;

	right:100%;

	margin-left:0px;

	margin-right:-60px;

}

#right2 .small-text-down,

#right4 .small-text-down{

	left:auto;

	right:0;

}

.sections-link{

	top:auto;

	margin-top:0px;

	bottom:30px;

	width:200%;

}

#right3 .sections-link,

#right5 .sections-link{

	left:auto;

	right:0;

}

#map{

	right:-100%;

	width: 200%;

}

.map-shadow{

	right:-100%;

	width: 200%;

}

}













































@font-face {

    font-family: 'Sifonn-Basic';

    src: url('font/Sifonn-Basic.eot');

    src: url('font/Sifonn-Basic.eot?#iefix') format('embedded-opentype'),

         url('font/Sifonn-Basic.woff') format('woff'),

         url('font/Sifonn-Basic.ttf') format('truetype'),

         url('font/Sifonn-Basic.svg') format('svg');

    font-weight: normal;

    font-style: normal;

}



}