@charset "UTF-8";
/* CSS Document */

@font-face
{
	font-family: bentonSansBook;
	src: url('fonts/BentonSans-Book.otf');
}

@font-face
{
	font-family: bentonSansRegular;
	src: url('fonts/BentonSans-Regular.otf');
}

@font-face
{
	font-family: bentonSansBold;
	src: url('fonts/BentonSans-Bold.otf');
}

html, body{
	margin:0px;
	padding:0px;
	width:100%;
	height:100%;
    font-family:'bentonSansRegular', Arial, Helvetica, sans-serif;
    font-size: 14px;
}

strong{
    font-family:'bentonSansBold', Arial, Helvetica, sans-serif;
    font-weight: bold;   
}

/* PRELOADER */
#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
}
#loader{
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #2F77BC;

    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */

    z-index: 1001;   
}
#loader-inner{
    text-align: center;
    color: #000;
    width: 100%;
    height: 100%;
    z-index: 1001;
    position: absolute;
    font-size: 0.8em;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    top: 50%;
    left: 0;
}
#loader-inner h1{
    font-weight: normal;
    color: #666666;
    display: inline-block;
    vertical-align: middle;
    margin: -0.4em 0em 0em;
    line-height: 100%;
    opacity: 1;
    font-size: 1.3em;
}
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #2F77BC;

    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #2F77BC;

    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}

@-webkit-keyframes spin {
    0%   { 
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   { 
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
#loader-wrapper .loader-section {
    position: fixed;
    top: 0;
    width: 51%;
    height: 100%;
    background: #ffffff;
    z-index: 1000;
    -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(0);  /* IE 9 */
    transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */
}
#loader-wrapper .loader-section.section-left {
    left: 0;
}
#loader-wrapper .loader-section.section-right {
    right: 0;
}
.loaded #loader-wrapper .loader-section.section-left {
    -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(-100%);  /* IE 9 */
    transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */
}
.loaded #loader-wrapper .loader-section.section-right {
    -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
    -ms-transform: translateX(100%);  /* IE 9 */
    transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */
}
.loaded #loader, .loaded #loader-inner {
    opacity: 0;
    -webkit-transition: all 0.3s ease-out; 
            transition: all 0.3s ease-out;
}
.loaded #loader-wrapper {
    visibility: hidden;
}
.loaded #loader-wrapper .loader-section.section-right,
.loaded #loader-wrapper .loader-section.section-left {
 
    -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000); 
                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
.loaded #loader-wrapper {
        -webkit-transform: translateY(-100%);
            -ms-transform: translateY(-100%);
                transform: translateY(-100%);
 
        -webkit-transition: all 0.3s 1s ease-out; 
                transition: all 0.3s 1s ease-out;
}

/* PAGE ELEMENTS */
#page-elements{
	overflow:hidden;
	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;	
}
#page-elements.scroll{
	overflow:auto;
}

#sky{
	position:absolute;
	left:0;
	bottom:0;
	z-index:1;
    height: 100%;
}
#clouds{
	position:absolute;
	top:0;
	bottom:0;
	z-index:2;	
}
#balloon{
	position: absolute;
	height: 100%;
	z-index:2;
}
#helicopter{
	position: absolute;
    height: 100%;
	z-index:2;
}
#background{
	position:absolute;
	height:100%;
	left:0;
	bottom:0;
	z-index:2;	
}
#foreground{
	position:absolute;
	height:100%;
	left:0;
	bottom:0;
	z-index:4;	
}

#establishments{
	position:absolute;
	/*height:100%;
	width:110%;*/
	left: 0;
	bottom:0;
	z-index:5;	
}
#establishments .establishment{
	position:absolute;
	bottom:0;
	left:0;
	z-index:6;	
}
/*#establishments .establishment.airport{
	margin-left:6%;
}
#establishments .establishment.hotel{
	margin-left:24%;
}
#establishments .establishment.restaurant{
	margin-left:42%;
}
#establishments .establishment.mall{
	margin-left:69%;
}
#establishments .establishment.spa{
	margin-left:94%;
}*/

.scene{
	position:absolute;
	top:0;
	z-index:3;
}

.offers{
    position: absolute;   
    top: 0;
    left: 0;
}
.offers a{
    color:#000000;
    text-decoration: none;
}
.offers .discount{
    font-size:2em;
    color: #fff;
    padding: 1em 0.8em;
    border-radius:100%;
    position: absolute;
    z-index: 4;
    font-family:'bentonSansBook', Arial, Helvetica, sans-serif;
    cursor: pointer;
    text-align: center;
    /*-webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);*/
}
.offers .hvr-outline-in:before{
    border-radius:100%;
}
.offers .discount small{
    font-size: 0.6em;
}
.offers .hvr-outline-in:before{
    border:2px solid;
}
.offers.style1 .discount, .offers.style1 .category, .offers.style1 .offer-link span{
    background-color: #51ae32;
    color: #fff;
}
.offers.style1 .hvr-outline-in:before{
    border-color: #51ae32;
}
.offers.style2 .discount, .offers.style2 .category, .offers.style2 .offer-link span{
    background-color: #ea5a0b;
    color: #fff;
}
.offers.style2 .hvr-outline-in:before{
    border-color: #ea5a0b;   
}
.offers.style3 .discount, .offers.style3 .category, .offers.style3 .offer-link span{
    background-color: #a01b63;
    color: #fff;
}
.offers.style3 .hvr-outline-in:before{
    border-color: #a01b63;   
}
.offers.style4 .discount, .offers.style4 .category, .offers.style4 .offer-link span{
    background-color: #183c6c;
    color: #fff;
}
.offers.style4 .hvr-outline-in:before{
    border-color: #183c6c;   
}
.offers.style5 .discount, .offers.style5 .category, .offers.style5 .offer-link span{
    background-color: #14a3c9;
    color: #fff;
}
.offers.style5 .hvr-outline-in:before{
    border-color: #14a3c9;
}
.offers.style6 .discount, .offers.style6 .category, .offers.style6 .offer-link span{
    background-color: #f4a200;
    color: #fff;
}
.offers.style6 .hvr-outline-in:before{
    border-color: #f4a200;   
}
.offers.double .discount{
    line-height: 0.7em; 
    padding: 0.8em 1em;
}
.offers.double2 .discount{
    line-height: 1em; 
    padding: 0.6em 0.8em;
}
.offers.double .discount small{
    font-size: 0.5em;
}

.offers .offer-body,
#mobile-offers-box .offer-body{
    position: absolute;
    width: 300px;
    margin:2em 0em 0em 5em;
    border-radius: 1.5em;
    overflow: hidden;
    display: none;
}
#mobile-offers-box #mobile-offers-body{
       
}
#mobile-offers-box .offer-body{
    width:65%;
    display: block;
    margin:2em 17.5%;
    text-align: left;
}
.offers.left .offer-body{
    position: absolute;
    width: 300px;
    margin:2em 0em 0em -20em;
    border-radius: 1.5em;
    overflow: hidden;
    display: none;
}
.offers.top .offer-body{
    position: absolute;
    width: 300px;
    margin:-10em auto 0em 3em;
    border-radius: 1.5em;
    overflow: hidden;
    display: none;
}

.offers .offer-body .category,
#mobile-offers-box .offer-body .category{
    text-align: right;
    font-size: 0.9em;
    letter-spacing: 1px;
    padding: 0.7em 1.5em;
    text-transform: uppercase;
    font-family:'bentonSansBold', Arial, Helvetica, sans-serif;
    font-weight: bold;
}
.offers.left .offer-body .category{
    text-align: left;
}
.offers .offer-description,
#mobile-offers-box .offer-description{
    padding: 0.7em 1.5em;
    background-color: #fff;
    font-size: 0.9em;
    border-radius: 0em 0em 1.5em 1.5em;
    position: relative;
    z-index: 3;
}
.offers .offer-description .merchant,
#mobile-offers-box .offer-description .merchant{
    float: left;
    text-transform: uppercase;
    font-family:'bentonSansBold', Arial, Helvetica, sans-serif;
    font-weight: bold;
    width: 75%;
}
.offers .offer-description .logo,
#mobile-offers-box .offer-description .logo{
    float: right;
    widows: 25%;
}
.offers .offer-description .logo.long,
#mobile-offers-box .offer-description .logo.long{
    width: 65px;
}
.offers .offer-description .logo.square,
#mobile-offers-box .offer-description .logo.square{
    width: 50px;
}
.offers .offer-description .logo.tall,
#mobile-offers-box .offer-description .logo.tall{
    width: 30px;
}
.offers .offer-description .clear-float,
#mobile-offers-box .offer-description .clear-float{
    clear: both;
    margin-bottom: 0.7em;
}

.offers .offer-link,
#mobile-offers-box .offer-link{
    text-align: right;
    position: relative;
    z-index: 1;
}
.offers .offer-link span,
#mobile-offers-box .offer-link span{
    padding: 1.5em 1.5em 0.7em 1.5em;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    text-transform: uppercase;
    margin-top: -1em;
    border-radius: 0em 0em 1.5em 1.5em;
    font-size: 0.8em;
}

#offer-etihad.offers{
    top:20%;
    left: 5%;
}
#offer-golden-class.offers{
    top:30%;
    left: 70%;
}
#offer-careem.offers{
    top:50%;
    left: 40%;
}
#offer-atlantis.offers{
    top:36%;
    left: 0%;
}
#offer-yas-viceroy.offers{
    top:25%;
    left: 70%;
}
#offer-meydan.offers{
    top:50%;
    left: 90%;
}
#offer-bab-alshams.offers{
    top:70%;
    left: 30%;
}
#offer-frioul.offers{
    top:35%;
    left: 0%;
}
#offer-brasserie.offers{
    top:52%;
    left: 54%;
}
#offer-nafoorah.offers{
    top:20%;
    left: 80%;
}
#offer-laporte.offers{
    top:-5%;
    left: 35%;
}
#offer-hour-choice.offers{
    top:0%;
    left: 0%;
}
#offer-eyezone.offers{
    top:20%;
    left: 90%;
}
#offer-rivoli.offers{
    top:60%;
    left: 30%;
}
#offer-pacha.offers{
    top:10%;
    left: 90%;
}
#offer-talise.offers{
    top:35%;
    left: 25%;
}
#offer-emirates-helicopter.offers{
    top:60%;
    left: -5%;
}
#helicopter #offer-emirates-helicopter.offers{
    top:-5%;
    left: -30%;
    font-size: 0.8em;
}
#offer-aquaventure.offers{
    top:50%;
    left: 80%;
}

#independent-offers{
    position: absolute;
    z-index: 20;
}
#independent-offers #independent-offer-yas-viceroy.offers,
#independent-offers #independent-offer-xclusive-yachts.offers,
#independent-offers #independent-offer-atlantis.offers{
    position: fixed;
    z-index: 20;
}

#scene1{
    position:fixed;
    z-index: 2;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    /*background: #4eb1d5;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRlYjFkNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjZWU3ZjQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #4eb1d5 0%, #cee7f4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4eb1d5), color-stop(100%,#cee7f4));
    background: -webkit-linear-gradient(top,  #4eb1d5 0%,#cee7f4 100%);
    background: -o-linear-gradient(top,  #4eb1d5 0%,#cee7f4 100%);
    background: -ms-linear-gradient(top,  #4eb1d5 0%,#cee7f4 100%);
    background: linear-gradient(to bottom,  #4eb1d5 0%,#cee7f4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4eb1d5', endColorstr='#cee7f4',GradientType=0 );*/
}
#scene1 #plane{
    position: absolute;
	margin:0px auto;
	text-align:center;
	width:100%;
	font-size:3em;
    z-index: 2;
	transform-origin: 0% 0%;
}
#scene2 #car{
	position:absolute;
	margin:0px auto;
	text-align:center;
	width:30%;
	bottom:9.5%;
	left:50%;
	margin-left:-15%;
	font-size:3em;
}

#helper{
	position:absolute;	
	left:0;
	top:0;
}
#helper .marker{
	position:relative;
	width:10px;
	background-color:transparent;
}

#message-overlay{
	display:none;
	position:fixed;
	z-index:5000;
	width:100%;
	height:100%;
	top:0;
	left:0;
	text-align:center;
	background-color:rgba(0,0,0,0.7);
}
#message-overlay #message{
	max-width:75%;
	margin:50% auto;
	padding:1em 1.5em;
	color:#ffffff;
	background-color:#000000;	
}

#intro-overlay{
	position:fixed;
	z-index:998;
	width:100%;
	height:100%;
	top:0;
	left:0;
	text-align:center;
	background-color:rgba(0,0,0,0.7);
}
#intro-message-close{
    cursor: pointer;
    color: #000000;
    text-align: right;
    text-transform: uppercase;
}
#intro-overlay #intro-message{
	max-width:80%;
    height: 70%;
	margin:5% auto 0%;
	padding:1em 1.5em;
	color:#000000;
    background: url("../images/homepage/skyline.svg") no-repeat center bottom;
    background-color: #ffffff;
    background-size: 130%;
}
#intro-overlay #intro-message .logo{
    float: left;
    display: inline;
    margin-right: 2%;
    width: 10%;
}
#intro-overlay #intro-message .message{
    float: left;
    display: inline;
    width: 88%;
}
#intro-overlay #intro-message p{
    font-size: 1.3em;
}
#intro-overlay #intro-message p.secondary{
    font-weight: bold;
}
#intro-overlay #intro-message #intro-button-close{
    display: inline-block;
    padding: 0.5em 1.5em;
    background-color: #2F77BC;
    color: #ffffff;
    border-radius: 1em;
    margin-top: 0px;
    cursor: pointer;
}

#mobile-offers-box{
    position:fixed;
    z-index: 4999;
    width:100%;
	height:100%;
	top:0;
	left:0;
    text-align:center;
	background-color:rgba(0,0,0,0.7);
    display: none;
}
#mobile-offers-close{
    cursor: pointer;
    color: #ffffff;
    text-align: right;
    padding: 1em;
    text-transform: uppercase;
}

@media ( max-width:992px ){

html, body{
    font-size: 12px;
}
    
#scene2 #car{
	bottom:8.5%;
}

}

@media ( max-width:762px ){
    
#scene2 #car{
	bottom:7.5%;
}
#intro-overlay #intro-message{
    background: transparent;
    background-color: #ffffff;
}
#intro-overlay #intro-message p{
    font-size: 1em;
}   
	
}

@media ( max-width:480px ){

#intro-overlay #intro-message p{
    font-size: 0.7em;
    line-height: 1em;
}
#scene2 #car{
	bottom:7%;
}

}