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

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.66;
	outline: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow:hidden;

}

img{ vertical-align:middle;max-width: 100%;}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

* {    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;}
img{ max-width:100%;}

.close-btn{
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 99;
	cursor:pointer;
	max-width: 52px;
    pointer-events: auto;
}

.BgShape{
    position: absolute;
    background: url(../images/bg.jpg) center;
    width: 100%;
    height: 100%;
    background-size: cover;
}
.BottomLogo{
    width: 9%;
    position: absolute;
    bottom: 0;
    right: 4%;
}
.Frame1Heading{
    width: 40%;
    position: absolute;
    top: 5%;
    left: 5%;
    opacity:0;
}
.Frame2Heading{
    width: 40%;
    position: absolute;
    top: 5%;
    left: 5%;
    opacity:0;
}
.Frame3Heading{
    width: 60%;
    position: absolute;
    top: 5%;
    left: 5%;
    opacity:0;
}
.Price{
    width: 55%;
    position: absolute;
    top: 35%;
    left: 5%; 
    opacity:0;
}
.logo {
    width: 20%;
    position: absolute;
    top: 80%;
    left: 5%;
    opacity:0;
}
.BookNowText {
    width: 13%;
    position: absolute;
    top: 35%;
    left: 70%;
    opacity:0;
}
.BookNowCta {
    width: 18%;
    position: absolute;
    top: 38%;
    left: 68.5%;
    opacity:0;
}
.desclaimer_lanscape {
    width: 22%;
    position: absolute;
    top: 55%;
    left: 69%;
    opacity:0;
}
.portrait{
    display:none;
}
.landscape{
    display: block;
}
.ClosedBox{
    width: 24%;
    position: absolute;
    top: 51%;
    right: 21%;
}
.OpenBox{
    width: 27%;
    position: absolute;
    top: 55%;
    right: 19.5%;
    opacity: 0;
}
.BackOpenBox{
    width: 27%;
    position: absolute;
    top: 40%;
    right: 20%;
    opacity: 0;   
}
.gift_container{
    width: 50%;
    height: 80%;
    top:0;
    right:0;
    position: absolute;
    opacity: 0;
}
.airplane{
    width: 5%;
    position: absolute;
    top: 26%;
    left: 33%;
}
.dragon{
    width: 18%;
    position: absolute;
    top: 65%;
    left: 5%;
}
.giraffe{
    width: 15%;
    position: absolute;
    top: 60%;
    left: 7%;
}
.palm_burj{
    width: 24%;
    top: 13%;
    left: 8%;
    position: absolute;
}
.camera{
    width: 24%;
    top: 65%;
    left: 28%;
    position: absolute; 
}
.palm{
    width: 20%;
    top: 35%;
    left: 38%;
    position: absolute;
}
.tower{
    width: 20%;
    top: 43%;
    left: 42%;
    position: absolute;
}
.icecream{   
    width: 10%;
    top: 32%;
    left: 60%;
    position: absolute;
}
.sun_glasses{
    width: 8%;
    top: 22%;
    left: 45%;
    position: absolute;
}
.sun{
    width: 6%;
    top: 38%;
    left: 15%;
    position: absolute;    
}
.swoosh_red{
    width: 25%;
    top: 15%;
    left: 20%;
    position: absolute;
} 
.swoosh_red2{
    width: 20%;
    top: 15%;
    left: 11%;
    position: absolute;
}
.swoosh_white{    
    width: 22%;
    top: -3%;
    left: 24%;
    position: absolute;
}
.swoosh_white2{
    width: 15%;
    top: 5%;
    left: 14%;
    position: absolute;
}
.cocktail_glass{
    width: 7%;
    top: 25%;
    left: 19%;
    position: absolute;  
}
.swoosh_darkred{
    width: 20%;
    top: 0%;
    left: 9%;
    position: absolute;
}

/************Animation************/
.box-anim {
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-name: box-anim;
    animation-name: box-anim;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

@-webkit-keyframes box-anim{
    0% { opacity: 0;
        -webkit-transform: translateY(0);
    }
    7% { opacity: 0.6;
    }
    15% { opacity: 1;
        -webkit-transform: translateY(0);
    }
    16% { opacity: 1;
        -webkit-transform: translateX(2px);
    }
    18% { opacity: 1;
    -webkit-transform: translateX(-2px);
    }
    20% { opacity: 1;
    -webkit-transform: translateX(2px);
    }
    22% { opacity: 1;
    -webkit-transform: translateX(-2px);
    }
    24% { opacity: 1;
    -webkit-transform: translateX(2px);
    }
    26% { opacity: 1;
    -webkit-transform: translateX(0px);
    }
    50% { opacity: 1;
    -webkit-transform: translateX(0px) scale(0.8);
    }
    55% { opacity: 1;
    -webkit-transform: translateX(0px) scale(1);
    }
    60% { opacity:;
    -webkit-transform: translateX(0px) scale(1.17);
    }
     100% { opacity: 0;
    -webkit-transform: translateY(0) scale(1.17);
    }
}

@keyframes box-anim {
    0% { opacity: 0;
        -webkit-transform: translateY(0);
    }
    7% { opacity: 0.6;
    }
    15% { opacity: 1;
    transform: translateY(0);
    }
    16% { opacity: 1;
    transform: translateX(2px);
    }
    18% { opacity: 1;
    transform: translateX(-2px);
    }
    20% { opacity: 1;
    transform: translateX(2px);
    }
    22% { opacity: 1;
    transform: translateX(-2px);
    }
    24% { opacity: 1;
    transform: translateX(2px);
    }
    26% { opacity: 1;
    transform: translateX(0px);
    }
    50% { opacity: 1;
    transform: translateX(0px) scale(0.8);
    }
    55% { opacity: 1;
    transform: translateX(0px) scale(1);
    }
    60% { opacity: 0;
    transform: translateX(0px) scale(1.17);
    }
     100% { opacity: 0;
    transform: translateY(0) scale(1.17);
    }
}
.box-anim2 {
    -webkit-animation-duration: 0.6s;
    animation-duration: 0.6s;
    -webkit-animation-name: box-anim2;
    animation-name: box-anim2;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity:0;
}

@-webkit-keyframes box-anim2{
    0% { opacity: 1;
        -webkit-transform:scale(1.17);
    }

     100% { opacity: 1;
    -webkit-transform:  scale(1);
    }
}

@keyframes box-anim2 {
    0% { opacity: 1;
        transform:scale(1.17);
    }

     100% { opacity: 1;

    transform: scale(1);
    }
}
.swoosh-anim1 {
    -webkit-animation-duration: 0.8s;
    animation-duration: 0.8s;
    -webkit-animation-name: swoosh-anim1;
    animation-name: swoosh-anim1;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

@-webkit-keyframes swoosh-anim1 {
    0% { height: 0;
    }
    100% { height: 100%;

    }
}

@keyframes swoosh-anim1 {
    0% { height: 0;

    }
    100% { height: 100%;

    }
}
.opacity-in-box {
    -webkit-animation-duration: 0.1s;
    animation-duration: 0.1s;
    -webkit-animation-name: opacity-in-box;
    animation-name: opacity-in-box;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

@-webkit-keyframes opacity-in-box {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes opacity-in-box {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.camera-anim {
    -webkit-animation-duration: 0.6s;
    animation-duration: 0.6s;
    -webkit-animation-name: camera-anim;
    animation-name: camera-anim;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@-webkit-keyframes camera-anim {
    0% {
        opacity: 1;
        -webkit-transform: translate(0,0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(9px , -34px);
    }
}

@keyframes camera-anim {
    0% {
        opacity: 1;
        transform: transform: translate(0,0);
    }
    100% {
        opacity: 1;
        transform: translate(9px , -34px);
    }
}
.tower-anim {
    -webkit-animation-duration: 0.6s;
    animation-duration: 0.6s;
    -webkit-animation-name: tower-anim;
    animation-name: tower-anim;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@-webkit-keyframes tower-anim {
    0% {
        opacity: 1;
        -webkit-transform: translate(0,0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(19px , -48px);
    }
}

@keyframes tower-anim {
    0% {
        opacity: 1;
        transform: transform: translate(0,0);
    }
    100% {
        opacity: 1;
        transform: translate(19px , -48px);
    }
}
.giraffe-anim {
    -webkit-animation-duration: 0.6s;
    animation-duration: 0.6s;
    -webkit-animation-name: giraffe-anim;
    animation-name: giraffe-anim;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@-webkit-keyframes giraffe-anim {
    0% {
        opacity: 1;
        -webkit-transform: translate(0,0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(-12px , -62px);
    }
}

@keyframes giraffe-anim {
    0% {
        opacity: 1;
        transform: transform: translate(0,0);
    }
    100% {
        opacity: 1;
        transform: translate(-12px , -62px);
    }
}

.palm_burj-anim {
    -webkit-animation-duration: 0.6s;
    animation-duration: 0.6s;
    -webkit-animation-name: palm_burj-anim;
    animation-name: palm_burj-anim;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@-webkit-keyframes palm_burj-anim {
    0% {
        opacity: 1;
        -webkit-transform: translate(0,0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(-12px , -50px);
    }
}

@keyframes palm_burj-anim {
    0% {
        opacity: 1;
        transform:translate(0,0);
    }
    100% {
        opacity: 1;
        transform: translate(-12px , -50px);
    }
}
.palm-anim {
    -webkit-animation-duration: 0.6s;
    animation-duration: 0.6s;
    -webkit-animation-name: palm-anim;
    animation-name: palm-anim;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@-webkit-keyframes palm-anim {
    0% {
        opacity: 1;
        -webkit-transform: translate(0,0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(0 , -44px);
    }
}

@keyframes palm-anim {
    0% {
        opacity: 1;
        transform:translate(0,0);
    }
    100% {
        opacity: 1;
        transform: translate(0 , -44px);
    }
}
.dragon-anim {
    -webkit-animation-duration: 0.6s;
    animation-duration: 0.6s;
    -webkit-animation-name: dragon-anim;
    animation-name: dragon-anim;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@-webkit-keyframes dragon-anim {
    0% {
        opacity: 1;
        -webkit-transform: translate(0,0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(-19px , -19px);
    }
}

@keyframes dragon-anim {
    0% {
        opacity: 1;
        transform:translate(0,0);
    }
    100% {
        opacity: 1;
        transform: translate(-19px , -19px);
    }
}
.sun-anim {
    -webkit-animation-duration: 0.6s;
    animation-duration: 0.6s;
    -webkit-animation-name: sun-anim;
    animation-name: sun-anim;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@-webkit-keyframes sun-anim {
    0% {
        opacity: 1;
        -webkit-transform: translate(0,0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(-58px , -76px);
    }
}

@keyframes sun-anim {
    0% {
        opacity: 1;
        transform:translate(0,0);
    }
    100% {
        opacity: 1;
        transform: translate(-58px , -76px);
    }
}
.icecream-anim {
    -webkit-animation-duration: 0.6s;
    animation-duration: 0.6s;
    -webkit-animation-name: icecream-anim;
    animation-name: icecream-anim;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@-webkit-keyframes icecream-anim {
    0% {
        opacity: 1;
        -webkit-transform: translate(0,0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(42px , -86px);
    }
}

@keyframes icecream-anim {
    0% {
        opacity: 1;
        transform:translate(0,0);
    }
    100% {
        opacity: 1;
        transform: translate(42px , -86px);
    }
}
.cocktail_glass-anim {
    -webkit-animation-duration: 0.6s;
    animation-duration: 0.6s;
    -webkit-animation-name: cocktail_glass-anim;
    animation-name: cocktail_glass-anim;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@-webkit-keyframes cocktail_glass-anim {
    0% {
        opacity: 1;
        -webkit-transform: translate(0,0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(-32px , -80px);
    }
}

@keyframes cocktail_glass-anim {
    0% {
        opacity: 1;
        transform:translate(0,0);
    }
    100% {
        opacity: 1;
        transform: translate(-32px , -80px);
    }
}
.airplane-anim {
    -webkit-animation-duration: 0.6s;
    animation-duration: 0.6s;
    -webkit-animation-name: airplane-anim;
    animation-name: airplane-anim;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@-webkit-keyframes airplane-anim {
    0% {
        opacity: 1;
        -webkit-transform: translate(0,0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(0px , -69px);
    }
}

@keyframes airplane-anim {
    0% {
        opacity: 1;
        transform:translate(0,0);
    }
    100% {
        opacity: 1;
        transform: translate(0px , -69px);
    }
}
.sun_glasses-anim {
    -webkit-animation-duration: 0.6s;
    animation-duration: 0.6s;
    -webkit-animation-name: sun_glasses-anim;
    animation-name: sun_glasses-anim;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@-webkit-keyframes sun_glasses-anim {
    0% {
        opacity: 1;
        -webkit-transform: translate(0,0);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(41px , -75px);
    }
}

@keyframes sun_glasses-anim {
    0% {
        opacity: 1;
        transform:translate(0,0);
    }
    100% {
        opacity: 1;
        transform: translate(41px , -75px);
    }
}
/* +++++++++++++++++ media css +++++++++++++++++ */

/*Mob Port*/
@media only screen and (max-width: 350px) and (orientation: portrait){
.Frame1Heading {
    width: 60%;
        top: 2%;
}
 .BackOpenBox {
    width: 67%;
    position: absolute;
    top: 55%;
    right: 18%;
    }
 .OpenBox {
    width: 65%;
    position: absolute;
    top: 70%;
    right: 18%;      
    }
    .ClosedBox {
    width: 58%;
    position: absolute;
    top: 65%;
    right: 21%;
}
    .gift_container {
    width: 80%;
    }
    .BottomLogo {
    width: 18%;
    position: absolute;
    bottom: 0;
    right: 2%;
}
    .dragon {
    width: 35%;
    position: absolute;
    top: 85%;
    left: 1%;
}
    .giraffe {
    width: 35%;
    position: absolute;
    top: 85%;
    left: 2%;
}
    .palm_burj {
    width: 45%;
    top: 50%;
    left: 2%;
    position: absolute;
}
    .camera {
width: 42%;
    top: 90%;
    left: 28%;
    position: absolute;
}
    .palm {
    width: 30%;
    top: 70%;
    left: 45%;
    position: absolute;
}
    .tower {
    width: 30%;
    top: 80%;
    left: 52%;

    position: absolute;
}
    .swoosh_red {
    width: 45%;
    top: 35%;
    left: 25%;
    position: absolute;
}
    .swoosh_red2 {
    width: 40%;
    top: 35%;
    left: 2%;
    position: absolute;
}
    .swoosh_white {
    width: 35%;
    top: 30%;
    left: 32%;
    position: absolute;
}
    
.swoosh_white2 {
    width: 30%;
    top: 32%;
    left: 11%;
    position: absolute;
}
    .swoosh_darkred {
width: 35%;
    top: 30%;
    left: 5%;
    position: absolute;
}
    .sun {
    width: 10%;
    top: 62%;
    left: 20%;
    position: absolute;
}
    .cocktail_glass {
    width: 15%;
    top: 50%;
    left: 30%;
    position: absolute;
}
    .sun_glasses {
    width: 12%;
    top: 45%;
    left: 50%;
    position: absolute;
}
    .icecream {
    width: 12%;
    top: 65%;
    left: 45%;
    }
    .airplane {
    width: 10%;
    position: absolute;
    top: 47%;
    left: 40%;
}
    .Frame2Heading {
        width: 50%;
    }
        .Frame3Heading {
    width: 80%;
    }
    .Price {
    width: 90%;
    top: 20%;
    }
    .BookNowText {
    width: 35%;
    position: absolute;
    top: 42%;
    left: 5%;
    }
    .BookNowCta {
    width: 35%;
    position: absolute;
    top: 46%;
    left: 2%;
    }
    .desclaimer_lanscape {
    width: 50%;
    position: absolute;
    top: 55%;
    left: 5%;
    }
    .logo {
    width: 35%;
    }
}

/*Tab Port*/
@media only screen and (min-width: 350px) and (max-width: 500px) and (orientation: portrait){
.Frame1Heading {
    width: 60%;
        top: 2%;
}
 .BackOpenBox {
    width: 67%;
    position: absolute;
    top: 55%;
    right: 18%;
    }
 .OpenBox {
    width: 65%;
    position: absolute;
    top: 70%;
    right: 18%;      
    }
    .ClosedBox {
    width: 58%;
    position: absolute;
    top: 56%;
    right: 18%;
}
    .gift_container {
    width: 80%;
    }
    .BottomLogo {
    width: 18%;
    position: absolute;
    bottom: 0;
    right: 2%;
}
    .dragon {
    width: 30%;
    position: absolute;
    top: 85%;
    left: 1%;
}
    .giraffe {
    width: 30%;
    position: absolute;
    top: 80%;
    left: 2%;
}
    .palm_burj {
    width: 40%;
    top: 37%;
    left: 2%;
    position: absolute;
}
    .camera {
    width: 38%;
    top: 87%;
    left: 32%;
    position: absolute;
}
    .palm {
    width: 25%;
    top: 65%;
    left: 45%;
    position: absolute;
}
    .tower {
    width: 25%;
    top: 74%;
    left: 55%;
    position: absolute;
}
    .swoosh_red {
    width: 40%;
    top: 35%;
    left: 25%;
    position: absolute;
}
    .swoosh_red2 {
    width: 35%;
    top: 35%;
    left: 4%;
    position: absolute;
}
    .swoosh_white {
    width: 30%;
    top: 30%;
    left: 32%;
    position: absolute;
}
    
.swoosh_white2 {
    width: 25%;
    top: 32%;
    left: 13%;
    position: absolute;
}
    .swoosh_darkred {
width: 30%;
    top: 32%;
    left: 7%;
    position: absolute;
}
    .sun {
    width: 10%;
    top: 62%;
    left: 20%;
    position: absolute;
}
    .cocktail_glass {
    width: 15%;
    top: 50%;
    left: 30%;
    position: absolute;
}
    .sun_glasses {
    width: 12%;
    top: 45%;
    left: 50%;
    position: absolute;
}
    .icecream {
    width: 12%;
    top: 65%;
    left: 45%;
    }
    .airplane {
    width: 10%;
    position: absolute;
    top: 47%;
    left: 40%;
}
        .Frame2Heading {
        width: 50%;
    }
    .Frame3Heading {
    width: 75%;
    }
    .Price {
    width: 80%;
    top: 20%;
    }
    .BookNowText {
    width: 25%;
    position: absolute;
    top: 42%;
    left: 5%;
    }
    .BookNowCta {
    width: 30%;
    position: absolute;
    top: 46%;
    left: 2%;
    }
    .desclaimer_lanscape {
    width: 45%;
    position: absolute;
    top: 57%;
    left: 5%;
    }
    .logo {
    width: 30%;
    }
}

/*Tab Land*/
@media only screen and (max-width: 600px) and (orientation: landscape) {

.Price {
    width: 58%;
    position: absolute;
    top: 30%;
    left: 5%;
}
.Frame3Heading {
    width: 65%;
    position: absolute;
    top: 8%;
    left: 5%;
}
    .BookNowText {
    width: 15%;
    position: absolute;
    top: 33%;
    left: 70%;
    }
    .BookNowCta {
    width: 20%;
    }
    .desclaimer_lanscape {
    width: 25%;
    position: absolute;
    top: 50%;
    left: 69%;
    }
    .ClosedBox {
    width: 35%;
    top: 50%;
    right: 15%;
}
    .OpenBox {
    width: 38%;
    top: 54%;
    right: 14%;
 }
.BackOpenBox {
    width: 38%;
    position: absolute;
    top: 40%;
    right: 15%;
    }
    .dragon {
    width: 30%;
    position: absolute;
    top: 65%;
    left: 0%;
}
    .giraffe {
    width: 30%;
    position: absolute;
    top: 67%;
    left: -5%;
}
    .palm_burj {
    width: 35%;
    top: 25%;
    left: 2%;
    position: absolute;
}
    .camera {
    width: 34%;
    top: 70%;
    left: 25%;
    position: absolute;
}
    .tower {
    width: 25%;
    top: 55%;
    left: 42%;
    position: absolute;
}
    .palm {
    width: 25%;
    top: 48%;
    left: 40%;
    position: absolute;
}
    .icecream {
    width: 15%;
    top: 50%;
    left: 50%;
    position: absolute;
}
    .sun_glasses {
    width: 13%;
    top: 35%;
    left: 40%;
    position: absolute;
}
    .sun {
    width: 12%;
    top: 48%;
    left: 28%;
    position: absolute;
}
    .swoosh_red {
    width: 35%;
    top: 13%;
    left: 18%;
    position: absolute;
}
    .swoosh_red2 {
    width: 30%;
    top: 12%;
    left: 3%;
    position: absolute;
}
    .swoosh_white {
    width: 32%;
    top: -3%;
    left: 24%;
    position: absolute;
}
    .swoosh_white2 {
    width: 25%;
    top: 2%;
    left: 8%;
    position: absolute;
}
    .swoosh_darkred {
    width: 30%;
    top: -2%;
    left: 2%;
    position: absolute;
}
    .cocktail_glass {
    width: 10%;
    top: 38%;
    left: 25%;
    position: absolute;
}
    .airplane {
    width: 7%;
    position: absolute;
    top: 36%;
    left: 33%;
}
}

/*Mob land*/
@media only screen and (max-width: 700px) and (max-height:300px) and (orientation: landscape) {
.camera {
    top: 75%;
    }
    .tower {
    top: 58%;
}
    .airplane {
    top: 40%;
    left: 48%;
}
    .icecream {
    top: 66%;
    }
    .sun_glasses {
    top: 48%;
    }
    .sun {
    top: 60%;
    }
    .cocktail_glass {
    top: 50%;
    }
    .BackOpenBox {
    width: 39%;
    top: 35%;
    right: 14%;
}
    .BookNowText {
    top: 30%;
    }
    .desclaimer_lanscape {
    top: 53%;
    }
    .Price {
    top: 35%;
    }
}