/*CSS*/
@font-face{
	font-family: century_gothic;
	src: url('custom_fonts/GOTHIC.TTF'),url('custom_fonts/GOTHICB.TTF'),url('custom_fonts/GOTHICBI.TTF'),url('custom_fonts/GOTHICI.TTF');
}
@font-face{
	font-family: luna_bar;
	src: url('custom_fonts/LUNABAR.TTF');
}
body{padding:0px; margin:0px; font-family:century_gothic, arial; font-size:18px;}
a{font-family:verdana, tahoma;}

#wrapper{height:100%; width:100%; overflow:hidden;}

#navpanel{width:100%; margin:auto; background:#fff; transition:0.75s;}
#logo{display:inline-block; width:20%;} #logo img{height:60px; border:none !important; z-index:200; /*margin-left:5%;*/ transition:0.75s;}
#nav{display:inline-block; width:75%; text-align:right; vertical-align:top; padding:0px;}
#nav ul{list-style:none; margin:0px; padding:8px 0px;} 
#nav li{display:inline-block; text-align:center; padding:10px 0px; width:112px; overflow:hidden !important; } /*border-right:1px solid #eee;*/
#nav li section{position:relative; margin:auto; width:0px; padding:1px 0px; background:#fff; transition:0.64s;}
#nav li:hover section{display:block; background:#cd45b3; width:112px;}
#nav li a{text-decoration:none; padding:24px 8px; color:#aaa; font-family:century_gothic, arial; text-transform:uppercase; font-size:16px; transition:0.62s;}
#nav li a:hover{color:#cd45b3;} /*background:#02e3f2;*/
#nav li ul{position:absolute; z-index:9999999; margin-top:10px; width:160px; background:#fff; border-bottom:1px solid #ddd; display:none; transition:0.64s; animation:fadeout 0.64s;}
#nav ul ul li{display:block; border:none; padding:0px;} 
#nav li li a{display:block; border:none; padding:8px !important; text-align:left; font-size:14px; border:none !important;}
#nav li li a:hover{color:#333333;}
#nav li:hover ul{display:block; animation:fadein 0.64s;}
@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeout {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/*==================== CONTACT HEADER ================*/
#contact{
	position:relative;
	display:block;
	background: #222222;
	width: 100%;
	padding: 7px 0px;
}
#contact .text{
	width: 90%;
	margin: auto;
	text-align: right;
	font-size: 14px;
	color: #fff;
	padding: 7px 0px;
}

/*==================== SLIDESHOW  ====================*/
#banner{display:block; width:100%; height:100vh; margin:auto;}
#bannerContainer{display:block; float:left; width:100%; height:100vh;}
#prev{background-image: url('../images/left.png'); background-size:50%; background-repeat: no-repeat; background-position: center center; display: block; float: left; height:100%; width:100px; position:relative; z-index: 99; cursor: pointer; opacity:.2; transition:0.64s;}
#next{background-image: url('../images/right.png'); background-size:50%; background-repeat: no-repeat; background-position: center center; display: block; float: right; height:100%; width:100px; position: relative; z-index: 99; cursor: pointer; opacity:.2; transition:0.64s;}
#slider{display:block; height:100vh; width:100%; position:absolute; overflow:hidden;}
#slider section{position:absolute; left:0%; top:35%; width:100%; text-align:center; color:#fff; font-weight:bold; font-family:tahoma;}
#slider section div{font-size:42px;}

#banner-tour{height:340px; width:100%; background-image:url('../images/banner-tour.jpg'); background-repeat:no-repeat; background-size:cover; background-position:top;}
#banner-tour section{position:absolute; right:100px; margin-top:100px; padding:12px; text-align:left; font-family:century_gothic; font-size:42px; color:#fff; background:rgba(0,157,220,0.5);}

.tour-banner{height:400px; width:100%; background-attachment:fixed; background-repeat:no-repeat; background-size:100%; background-position:middle;}
.tour-banner div{position:absolute; left:0px; width:100%; margin-top:200px; padding:12px 0px; text-align:left; font-family:century_gothic; font-size:30px; color:#fff; background:rgba(0,0,0,0.7);}
.tour-banner div section{margin:auto; width:90%;}

.banner{height:300px; background-image:url('../images/banner-pg.jpg'); background-size:100%; background-attachment:fixed; background-repeat:no-repeat; overflow:hidden;}
.banner div{margin-top:72px; padding:12px 42px; color:#fff; font-size:42px; font-family:century_gothic;}
.banner section{color:#fff; text-transform:uppercase; letter-spacing:1px; padding:0px 42px;}

#footer{background:#222222; color:#fff; clear:both;}
#footer a{color:#fff; text-decoration:none; font-family:century_gothic, arial; text-transform:uppercase; transition:0.64s;}
#footer a:hover{color:#02e3f2;}

.desktop{display:block;} .mobile{display:none;}

.social{background:#02e3f2; border-radius:24px; padding:12px 15px;}

.content{width:100%; margin:auto;}
.content-1{width:85%; margin:auto;}
.content2{width:75%; margin:auto;}

/*========== MAP ==============*/
 #map {
   width: 100%;
   height: 600px;
   background-color: grey;
 }

/*========== BOOKING ==========*/
.bookingshell{position:absolute; z-index: 99; display:flex; bottom:5%; width:100%;}
.bookcontainer{background:rgba(0,0,0,0.8); color:#fff; font-weight:bold; text-transform:uppercase; width:65%; margin:auto; padding:12px; text-align:center; transition:0.32s;} .bookcontainer:hover{background:rgba(255,255,255,1); color:#000;}
.bookcontainer div{display:inline-block; width:30%; padding:15px 5px; text-align:center;}
.bookcontainer div input{margin:auto; border:none; border-bottom:1px solid #aaa; padding:4px; font-family:tahoma; width:95%; height:32px; font-size:16px; transition:0.42s; outline:none; }
.bookcontainer div input:focus{border-bottom:1px solid #cd45b3;}


.bookform{margin:auto; width:50%; background:rgba(255,255,255,0.5);}
.bookbtnleft{float:left; width:50%; padding:14px 0px; background:#fe4e3f; color:#fff; cursor:pointer;}
.bookbtnright{float:right; width:50%; padding:14px 0px; background:#ff8383; color:#000; cursor:pointer;}
.airport{margin:auto; width:80%; padding:24px 0px;}
.bkformtext{width:94%; height:42px; font-size:18px; padding-left:34px; border:1px solid #aaa; background-image:url('../images/icon-send.png'); background-size:30px; background-repeat:no-repeat; background-position:left;}
.bkformtext1{width:94%; height:42px; font-size:18px; padding-left:34px; border:1px solid #aaa; background-image:url('../images/locator.png'); background-size:30px; background-repeat:no-repeat; background-position:left;}

/*========= PADDING ==========*/
.padd72{padding:72px 0px !important;}
.padd64{padding:64px 0px !important;}
.padd42{padding:42px 0px !important;}
.padd24{padding:24px 0px !important;}
.padd12{padding:12px 0px !important;}
.padd4{padding:4px 0px !important;}

.spacer12{padding:0px 12px;}
.spacer24{padding:0px 24px;}
.spacer42{padding:0px 42px;}

.padding12{padding:12px;}

.height500{height:500px !important;}

.leftside{display:inline-block; width:60%; vertical-align:top;}
.rightside{display:inline-block; width:35%; vertical-align:top;}
/*============ FLOATERS ===========*/
.left{float:left;}
.right{float:right;}
.clear{clear:both;}

/*============ WIDTH ===========*/
.half{width:50%;}
.quart{width:33%;}
.percent20{width:20%;}
.percent30{width:30%;}
.percent40{width:40%;}
.percent50{width:50%;}
.percent60{width:60%;}
.percent70{width:70%;}
.percent80{width:80%;}
.percent90{width:90%;}
.percent95{width:95%;}
.percent100{width:100%;}

/*============= Lines ================*/
.lightgrey{background:#f9f9f9; border-top:1px solid #e6e6e6; border-bottom:1px solid #e6e6e6;}
.grey{background:#222222; color:#fff;}
.teal{background:teal; color:#fff;}
.blue{background:#608eab; color:#fff;}

/*============= FONT SIZE ================*/
.font14{font-size:14px;}
.font18{font-size:18px;}
.font24{font-size:24px;}
.font32{font-size:32px;}
.font42{font-size:42px;}

/*============= FONT WEIGHT ================*/
.bold{font-weight:bold;}
.normal{font-weight:normal;}
.italic{font-weight:italic;}

/*========= BORDER LINES =====*/
.small-line{padding:4px; width:5%; margin:auto;}
.medium-line{padding:4px; width:10%; margin:auto;}
.large-line{padding:4px; width:15%; margin:auto;}

/*========= BACKGROUNDS =============*/
		/* Theme Colours */
.red{background: #fe4e3f;}
.yellow{background: #feb309;}
.purple{background: #cd45b3;}
.orange{background: #fd4d40;}

/*========= TEXT COLOR =============*/
.textgrey{color:#666666;}
.textwhite{color:#fff !important;}

/*============= BOTTONS ============*/
.btn1{padding:12px 18px; font-size:18px; border:2px solid #fff; color:#fff; text-decoration:none; cursor:pointer; transition:0.64s;}
.btn1:hover{color:#000; background:#fff;}
.btn2{padding:12px 21px; border:2px solid #fe4e3f; color:#fe4e3f; text-decoration:none; cursor:pointer; transition:0.64s;}
.btn2:hover{color:#fff; background:#fe4e3f;}
.btn3{color:#fff; font-size:18px; border:none; cursor:pointer; transition:0.24s;} .btn3:hover{background:#2f041b;}
.btn4{border:1px solid #fff; color:#fff; text-decoration:none; padding:10px 18px; transition:0.32s;} .btn4:hover{background:#fff; color:#000;}
.submitbtn{display:none; background:#FFC13C; border:none; color:#fff; padding:12px 0px; width:100%; font-size:18px;	font-weight:normal;	cursor:pointer; letter-spacing:2px; transition:0.75s;}
.submitbtn:hover{letter-spacing:7px; background:#333333;}
.callbtn{background:#fe4e3f; color:#fff !important; font-weight:bold; font-family:arial !important;}

.btn{padding:10px 12px; font-size:16px; color:#fff; text-decoration:none; border:none !important; transition:0.32s;} .btn:hover{background:#323a45;} 
.btn-error{background:#ff5c5d; color:#fff;}

#caller{position:fixed; z-index:99999999; right:24px; bottom:10%; opacity:0.5; transition:0.42s;}

/*============ ALIGNMENT ============*/
.center{text-align:center !important;}
.left-align{text-align:left !important;}
.right-align{text-align:right !important;}
.center-align{text-align: center; padding:12px 0px;}

.letterspace2{letter-spacing:2px;}

.head1{font-size:64px; color:#222222; padding:12px 0px;}
.head2{font-size:42px; color:#222222; padding:12px 0px;}
.head3{font-size:24px; color:#222222; font-weight:bold; padding:12px 0px;}

/*================= LISTS =================*/
.list1{padding:12px 0px; width:100%; margin-right:auto; margin-left:auto;}
.list1 ul{list-style:none; margin:0px; padding:0px;}
.list1 li{display:inline-block; padding:0px; width:33.33%;}
.list1 li div{width:100%; height:300px; color:#fff; overflow:hidden;}
.list1 li img{transition:0.62s;}
.list1 li div:hover img{opacity:.42;}
.fadein{display:none; background:rgba(0,0,0,0.75); padding:24px;}
.fadein{display:inline-block; animation:fadein 3s;}
.list1 li section{margin-top:180px; font-size:21px;}

.list2{padding:12px 0px; width:100%;}
.list2 ul{list-style:none; margin:0px; padding:0px;}
.list2 li{display:inline-block; padding:12px; width:22%;}
.list2 li div{width:100%; height:250px; border:1px solid #ddd; overflow:hidden !important; transition:0.64s;}
.list2 li section{background:#ddd; width:100%; padding:12px 1px; font-size:14px; letter-spacing:1px; text-transform:uppercase; text-align:left;}
.list2 li section article{margin:auto; width:80%; white-space:nowrap; overflow: hidden; text-overflow: ellipsis;}
.list2 li img{width:100%; height:250px; transition:0.42s;}
.image{width:100%; height:250px; overflow:hidden;}
.list2 a{width:100%; text-decoration:none; color:#333333;}
.list2 a:hover>div img{transform: scale(1.15);}

.list3{padding:12px 0px; width:90%; margin:auto;}
.list3 ul{list-style:none; margin:0px; padding:0px;}
.list3 li{display:inline-block; padding:15px; width:15%;}
.list3 li div{box-shadow:0px 0px 8px #aaa; padding:10px;  transition:0.64s;}
.list3 li div:hover{box-shadow:0px 0px 12px #333333;}
.list3 li img{width:100%; height:150px; padding-bottom:10px;}
.list3 li a{text-decoration:none; color:#333; font-weight:bold; font-size:10px;}

.list4{padding:12px 0px; width:90%; margin-right:auto; margin-left:auto;}
.list4 ul{list-style:none; margin:0px; padding:0px;}
.list4 li{display:inline-block; padding:12px; width:30%;}
.list4 li div{width:100%; height:500px; border-radius:4px; border:1px solid #eee; background:#fff; overflow:hidden; transition:0.64s;}
.list4 li div:hover{box-shadow:0px 0px 8px #ccc;}
.list4 li div div{width:100%; height:250px; overflow:hidden;}
.list4 li img{width:100%; height:250px; transition:0.75s;} .list4 li div:hover img{transform: scale(1.5);}
.list4 p{text-align:justify; padding:0px 10px;}
.list4 h3{padding:7px; text-align:justify;}

.list5{padding:12px 0px; width:90%; margin:auto;}
.list5 ul{list-style:none; margin:0px; padding:0px;}
.list5 li{display:inline-block; padding:12px; width:30%; vertical-align:middle;}
.list5 li div{width:100%; height:600px; border:1px solid #eee; background:#fff; overflow:hidden; transition:0.64s;}
.list5 li div:hover img{transform:scale(1.05);}
.list5 li img{width:100%; height:250px; transition:0.75s;} /*.list2 li img:hover{transform: scale(1.5);}*/
.list5 p{padding:14px 0px; text-align:center;}

.list6{margin:auto; width:90%;}
.list6 ul{padding:0px; list-style-type:none; position:relative;}
.list6 li{display: inline-block; padding:12px;}
.list6 li img{width:300px; height:300px;}
.list6 div{position:absolute; z-index:100; background:rgba(232,68,117,0.7); width:300px; height:50px; overflow:hidden; padding:10px 0px; color:#fff; font-family:century_gothic; text-align:center; transition:0.32s;}
.list6 li:hover div{height:100px; background:rgba(232,68,117,0.97); padding:100px 0px;}

.company{height:120px; width:160px; padding:4px 8px;}


/*============= POPUPS ============*/
.pop-out{background:#fff; margin:auto; padding:24px; margin-top:8%; width:70%;}
.shadow{display:none; background:RGBA(0,0,0,0.7); width:100%; height:100%; position:fixed; z-index:9000; top:0px; left:0px;}
#playvid{display:none; position:fixed; left:0px; top:0px; z-index:99999; width:100%; height:100%; padding-top:5%; background:rgba(0,0,0,0.5); text-align:center; vertical-align:middle;}
#playerid{width:760px; height:515px;} #playerid div{margin:auto; width:760px; text-align:right;}

.success, #success{padding:12px 0px; text-align:center; background:#4caf50; color:#fff; font-weight:bold; font-size:16px;}
.error, #error{padding:12px 0px; text-align:center; background:#ff3237; color:#fff; font-weight:bold; font-size:16px;}

.form-field{padding:32px 0px;}
.form-field div{padding:12px 0px;}
.form-field input, .form-field select{width:100%; border:none; border-bottom:1px solid #ddd; padding:4px; font-size:16px; font-family:century_gothic; height:42px; outline:none; transition:0.42s;}
.form-field input:focus, .form-field select:focus{border-bottom:1px solid #cd45b3;}
.form-field textarea{min-width:80%; max-width:80%; border:1px solid #ddd; border-radius:4px; padding:4px; font-size:16px; font-family:century_gothic; min-height:140px; max-height:140px; outline:none;}

.selimage{padding:0px 8px; height:150px; cursor:pointer;}

	#mbmenu{width:100%; background:#282828; height:100%; z-index:99999; position:absolute; display:none;}
	#mbmenu ul{list-style:none; margin:0px; padding:24px 0px;} 
	#mbmenu li{display:block; padding:24px 0px; border-bottom:1px solid #eee;}
	#mbmenu li a{text-decoration:none; color:#fff; text-transform:uppercase; font-family:tahoma; text-align:center; font-size:18px; transition:0.64s;}
	#mbmenu li a:hover{color:#fff; background:teal;}

	p{}

@media only screen and (max-width: 1250px){
	td{display:block !important;}
	p{padding-left:12px; padding-right:12px;}
	
	#banner, #bannerContainer, #prev, #next, #slider{height:300px;}
	#slider section{display:none;}
	#navpanel{position:relative !important;}
	#logo{width:100%; text-align:center; padding:0px !important;}  #logo img{height:42px !important; padding:0px; position:relative; left:0;}
	#nav{width:100%; text-align:center; padding:0px;}  #nav ul{padding:12px 0px;} #nav li{border:none; padding:0px; width:100%;} #nav li a{font-size:24px;}
	#footer img{height:62px !important;}	
	#footer span{clear:both !important; display:block !important; width:100% !important; text-align:center !important;}
		
	.bookingshell{position:relative;} .bookcontainer{width:98%; background:#cd45b3;} .bookcontainer div{display:block; width:100%;}
	.left, .right{border:none !important; display:block !important; clear:both !important; width:100%; height:auto !important; padding:0px !important; float:none; text-align:center !important;}
	.left, .right div{text-align:center !important;}


	.bookform{width:95%;} .airport{width:90%;} .bkformtext{width:100%; padding:0px; background-image:none;}

	
	.height500{height:300px !important;}
		
	.form-field{text-align:center;}
	.head1{font-size:42px;} .head2{font-size:24px;}
	.list1 li{padding:12px 0px !important; width:100%;} .list1 li div{border-radius:0px; width:100%;}
	
	.desktop{display:none;} .mobile{display:block;}

	.content, .content2{width:100%; padding:12px 0px;}

	.list5 li{display:block; width:100%; padding:12px 0px;}

	#playerid{width:100%; height:50%;} #playerid div{margin:auto; width:100%; text-align:right;}
}