/*
	CSS DOCUMENT
	Author: New Generation Technology
	Website: www.ngtechja.com
	Template: Tours
*/

body{
	margin: 0px;
	padding: 0px;
	font-family: sans-serif, arial, tahoma;
	font-size: 16px;
	color:#272727;
}

p{font-family: sans-serif;}
h1, h2, h3, h4{font-family: sans-serif;}
a{font-size:16px; text-decoration:none;}

input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]), textarea, select{
	display: block;
    font-family: inherit;
    font-size: 1rem;
    border: 1px solid #e6e6e6;
    border-radius: 0;
    box-sizing: border-box;
    margin: 0;
    /*-webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    background-color: transparent;*/
    color: #666;
    padding: 1rem;
}

input[type="checkbox"]{height:16px; width:16px; display:inline;}

/*======== IDs =======*/
#wrapper{width:100%; overflow:hidden;}

#contents{}

#logo{float:left; width:25%; }
#logo img{height:94px; padding:0px; border:none; transition:0.75s;}

#navbar{position:fixed; width:100%; z-index:9999999; transition:0.75s;}
#nav{float:right; width:70%; padding:0px;}
#nav ul{list-style:none; width:100%; text-align:right;}
#nav li{display:inline-block; padding:12px 8px;}
#nav li a{text-decoration:none; color:#fff; font-size:14px; text-transform:uppercase; letter-spacing:1px; padding:7px 0px; transition:0.75s;}
#nav li a:hover{color:#ffcc23; border-bottom:1px solid #ffcc23;}
#nav li ul{position:absolute; z-index:9999999; padding:2px 0px; margin-top:10px; width:170px; background:#fff; border:1px solid #ddd; box-shadow:0px 0px 4px #ddd; border-radius:4px; display:none; transition:0.64s; animation:fadeout 0.64s;}
#nav ul ul li{display:block; border:none; padding:0px; transition:0.42s;} #nav ul ul li:hover{background:#276759;}
#nav li li a{display:block; border-bottom:1px solid #ddd; padding:8px !important; text-align:left; font-size:14px; color:#555; transition:0.24s;} #nav li li a:hover{padding-left:12px !important; color:#fff;}
#nav li:hover ul{display:block; animation:fadein 0.64s;}

#mobilelink{padding-right:20px;}
#mobilelink ul{list-style:none;}
#mobilelink li{display:inline-block;}
#mobilelink div{background:#000; width:35px; height:5px; margin:6px 0px;}

#menudrop{background: #fff;	padding:0px; position:absolute; width:100%; left: 0px; height:100vh; z-index: 4000; display: none; transition:1s;}
#menudrop ul{list-style: none; padding: 0px; margin: 0px;}
#menudrop ul li{display: block; padding:12px; text-align:left; border-bottom: 1px solid #eee;}
#menudrop ul li a{color: #282828; text-decoration: none; padding: 12px 0px;}	

/*==================== SLIDESHOW  ====================*/
#banner{display:block; width:100%; height:85vh; margin:auto;}
#bannerContainer{display:block; width:100%; height:85%;}
#prev{background-image: url('../images/left.png'); background-size:50%; background-repeat: no-repeat; background-position: center center; left:0px; height:85%; width:100px; position:absolute; z-index: 9999; cursor: pointer; opacity:.9; transition:0.64s;}
#next{background-image: url('../images/right.png'); background-size:50%; background-repeat: no-repeat; background-position: center center; right:0px; height:85%; width:100px; position:absolute; z-index: 9999; cursor: pointer; opacity:.9; transition:0.64s;}
#slider{display:block; height:100vh; width:100%; position:absolute; overflow:hidden;}
#slider .slides{background-size:cover; height:85vh; width:100%;}
#bannerContainer section{position:absolute; margin-left:15%; margin-top:12%; padding:0px; z-index:999;}
#slider section{position:absolute; width:350px; left:3%; top:8%; background:rgba(0,0,0,0.5); padding:24px; color:#fff; font-weight:bold; font-family:arial; z-index:99999;}

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

#banner-hm{
	background-image:linear-gradient(to bottom,rgba(0, 0, 0,0.30), rgba(0, 0, 0,0.30)),url('../images/je-main.jpg');
	background-repeat: no-repeat;
	background-size:cover;
	background-attachment:fixed;
	background-position: center center;
	height: 100vh;
	width: 100%;
}
#banner-hm section{animation:fadein 2s; padding:12px; color:#fff; font-size:32px; position:absolute; right:150px; top:180px; text-align:center; text-shadow:2px 2px 4px #000;}
@keyframes fadein {from { opacity: 0} to   { opacity: 1}}
#banner-hm a{text-decoration:none; padding:12px 32px; border-radius:4px; background:#fff; color:#272727; font-size:18px; text-shadow:none; border:2px solid #fff; transition:1s;}
#banner-hm a:hover{background:none; color:#fff;}

#banner-pg{background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.42)),url('../images/ATV-Jamaica.jpg'); background-repeat: no-repeat; background-size:100% 400px; background-attachment: fixed; height:400px;}
#banner-pg div{text-transform:capitalize; font-size:42px; color:#fff; position:relative; top:70%; left:2%;}

.tour-banner{height:400px; width:100%; background-attachment:fixed; background-repeat:no-repeat; background-size:100%; background-position:top;}
.tour-banner div{position:absolute; left:0px; width:100%; margin-top:300px; 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%;}

#footer{background:#2a2a29; color:#fff; border-bottom:1px solid #ddd; padding:42px 0px;}

/* ======== CLASS ============ */
.content{margin-right:auto; margin-left:auto; width:80%; line-height:24px; font-size:18px; letter-spacing:1px;}
.center{text-align:center; padding:12px 0px;}
.desktop{}
.mobile{display:none;}

.logo{height:84px;}
.excurimage{vertical-align:middle; height:450px;}
.boldupper{font-weight:bold; text-transform:uppercase;}

.content-1{width:100%; margin:auto;}
.content-2{margin:auto; width:80%;}
.content-3{margin:auto; width:70%;}
.content-4{width:90%; margin:auto;}

/*============ ALIGNMENT ===========*/
.align-left{text-align:left;}
.align-right{text-align:right;}
.align-center{text-align:center;}
.align-justify{text-align:justify;}
.block{display:block;}
.inline{display:inline-block;}

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

/*============ FLOATERS ===========*/
.left{float:left;}
.right{float:right;}
.clear{clear:both;}

.perma-left{float:left;}
.perma-right{float:right;}

/*============ COLOR ===============*/
.color-white{color:#fff !important;}
.color-black{color:#000;}
.color-grey{color:grey;}
.color-dark-grey{color:#555;}
.color-blue{color:#16bacf;}
.color-red{color:#f7665f;}
.color-theme{color:#00b0f0;}
.color-theme1{color:#1f2d30;}
.color-theme-text{color:#454545;}

/*============ FONT SIZE ===========*/
.font12{font-size:12px;}
.font14{font-size:14px;}
.font16{font-size:16px;}
.font18{font-size:18px;}
.font21{font-size:21px;}
.font28{font-size:28px;}
.font32{font-size:32px;}
.font42{font-size:42px;}
.font72{font-size:72px;}
.font92{font-size:92px;}
.font112{font-size:112px;}

/*============ WIDTH ===========*/
.half{width:50%;}
.quart{width:33%;}
.percent5{width:5%;}
.percent10{width:10%;}
.percent20{width:20%;}
.percent25{width:25%;}
.percent30{width:30%;}
.percent35{width:35%;}
.percent40{width:40%;}
.percent45{width:45%;}
.percent50{width:50%;}
.percent60{width:60%;}
.percent65{width:65%;}
.percent70{width:70%;}
.percent80{width:80%;}
.percent90{width:90%;}
.percent95{width:95%;}

.perma-percent5{width:5%;}
.perma-percent10{width:10%;}
.perma-percent20{width:20%;}
.perma-percent25{width:25%;}
.perma-percent30{width:30%;}
.perma-percent35{width:35%;}
.perma-percent40{width:40%;}
.perma-percent45{width:45%;}
.perma-percent50{width:50%;}
.perma-percent60{width:60%;}
.perma-percent65{width:65%;}
.perma-percent70{width:70%;}
.perma-percent80{width:80%;}
.perma-percent90{width:90%;}
.perma-percent95{width:95%;}

/*=========== BORDERS ================*/
.border-left{border-left:1px solid #bbb;}
.border-right{border-right:1px solid #bbb;}
.border-top{border-top:1px solid #bbb;}
.border-bottom{border-bottom:1px solid #bbb;}
.border-full{border:1px solid #bbb;}

.list-type1{width:90%; margin-right:auto; margin-left:auto; padding:42px 0px;}
.list-type1 ul{list-style:none;}
.list-type1 li{display: inline-block; width:350px; height:233px; text-align:center;}
.list-type1 li a{text-decoration:none; color:#272727;}
.itemimg, .iteminfo{position:absolute; transition:0.32s; cursor:pointer;}
.itemimg{z-index:10;}
.list-type1 li a:hover>.itemimg{margin-top:-80px; opacity:.45;}
.iteminfo{padding-top:170px; width:348px; height:231px; text-align:left; font-weight:bold;}

.list-type2{width:90%; margin-right:auto; margin-left:auto; padding:42px 0px;}
.list-type2 ul{list-style:none;}
.list-type2 li{display: inline-block; width:30%; height:320px; text-align:center;}
.list-type2 li a{text-decoration:none; color:#272727;}
.item2img, .item2info{position:absolute; transition:0.42s; cursor:pointer;}
.item2img{z-index:10; border:1px solid #ddd;}
.item2info{background:#ddd; padding-right:4px;}
.list-type2 li a:hover>.item2img{margin-left:-210px; opacity:.9;}
.item2info{width:348px; height:231px; text-align:right; font-weight:bold;}

.list-type3 ul{padding: 12px;}
.list-type3 li{display: inline-block; padding:12px;}
.list-type3 div{width: 300px; height:500px; overflow:hidden; background:#fff; box-shadow:0px 0px 4px #ddd; transition:0.32s;}
.list-type3 section{width:100%; letter-spacing:0px;} .list-type3 section section{width:90%; margin:auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.list-type3 li img{width: 300px; height: 250px;}
.list-type3 h3{color: #000;	border-bottom: none !important;}
.list-type3 p{padding: 7px; line-height:16px;}
.list-type3 div:hover{box-shadow:0px 0px 12px #aaa; transform: scale(1.1);}
/*.list-type3 div:hover > li img{}*/

.list-3 li{display:inline-block; width:310px; height:310px; overflow:hidden;}
.list-3 li div{width:98%; height:100%; overflow:hidden;}
.list-3 li div img{width:80%; height:80%; border-radius:50%; transition:0.32s;}
.list-3 li div section{height:20%;}
.list-3 li div section a:hover li div div img{transform:scale(1.05); opacity:0.7;}

/*==== FORMS ==========*/
.form-field{width:100%; padding:1rem 0rem;} .form-field div{padding:6px 0px; line-height:32px;} .form-field input, .form-field select, .form-field textarea{width:100%; max-width:100%; min-width:100%; border-radius:4px;}
.form-field-2{border:1px solid #ddd; background:#f5f5f5; font-family:arial;} .form-field-2 div{padding:12px 0px; width:80%; margin:auto;}
.form-field-2 input, .form-field-2 select{width:100%; border:1px solid #ddd; border-radius:4px; padding:4px; font-size:16px; height:42px;}
.form-field-2 textarea{min-width:80%; max-width:80%; border:1px solid #ddd; border-radius:4px; padding:4px; font-size:16px; font-family:arial; min-height:140px; max-height:140px;}
.robot{
    background:#F9F9F9;
    border:solid 1px #D3D3D3;
    border-radius:4px;
    width:260px;
    overflow:hidden;
    margin-left:auto; margin-right:auto;
    text-align:left;
    padding:12px 0px;
    background-image: url('../images/robot.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 20%;
}
.robot input[type=checkbox]{width:40px; float:left;}
.robot input[type=text]{width:200px; background: transparent; border:none;}

/* ===== Header Text =====*/
.head1{font-weight:bold; font-size:42px; line-height:normal; padding:10px 0px; font-family:arial; color:#77DD77; font-weight:bold; text-transform: uppercase;}
.head2{font-weight:bold; font-size:24px; line-height:normal; padding:10px 0px; font-family:arial; color:#B60202; text-transform: uppercase;}

/* ==== DIV HALF =====*/
/*.half{display:inline-block; width:48%;}
.left{float:left width:48%;}
.right{float:right width:48%;}*/

/*==== Padding ====*/
.padd4{padding:4px 0px;}
.padd7{padding:7px 0px;}
.padd12{padding:12px 0px;}
.padd14{padding:14px 0px;}
.padd18{padding:18px 0px;}
.padd24{padding:24px 0px;}
.padd30{padding:30px 0px;}
.padd42{padding:42px 0px;}
.padd64{padding:64px 0px;}
.padd72{padding:72px 0px;}
.padd92{padding:92px 0px;}
.pdtopbttm24{padding:24px 0px;}
.pdtopbttm42{padding:42px 0px;}

.space12{padding:0px 12px;}
.space24{padding:0px 24px;}
.space42{padding:0px 42px;}
.space64{padding:0px 64px;}

.padding7{padding:7px;}
.padding12{padding:12px;}
.padding14{padding:14px;}
.padding24{padding:24px;}

/* ===== Background =====*/
.teal{background:teal; color:#fff;}
.dark{background:#272727; color:#fff;}
.white{background:#fff; color:#272727;}
.grey{background:#ddd;}

/*===== Bottons =====*/
.btn1{background:#ffcc23; padding:7px 12px; text-decoration:none; color:#000;}
.btn2{border:2px solid #fff; padding:12px 24px; color:#fff; text-decoration:none;}
.btn3{border:#ffcc23 2px solid; padding:12px 24px; text-decoration:none; color:#000; transition:1s;}
.btn3:hover{background:#ffcc23;}

/*============ BUTTONS ===========*/
.btn{padding:12px 24px; font-size:14px; letter-spacing:1px; text-decoration:none; border:none; text-transform:uppercase; transition:0.75s;} .btn:hover{background:#222222; color:#fff;}
.btn-error{background:#fc4438; color:#fff;}
.btn-info{background:#009ddc; color:#fff;}
.btn-orange{background:#ee8031; color:#fff;}
.btn-yellow{background:#f7cd01; color:#fff;}
.btn-green{background:#22975e; color:#fff;}
.btn-white{background:#fff; color:#000;}

/*==== Link color ====*/
.link1{color:#fff; text-decoration:none;}

@media only screen and (max-width: 800px){	
	.desktop{display:none;}
	.mobile{display:block;}
	.content, .list-type1, .list-type2, .list-type3{width:100%;}
	.list-type1 ul, .list-type2 ul, .list-type3 ul{width:100%; padding:0px;}
	
	.half{width:100%; display:block; text-align:center;}
	.excurimage{height:200px;}
	
	#navbar{background:rgba(255, 255, 255, 0.5);}

	#logo{width:60%;}
	#nav{width:30%;}
	#logo img{height:54px; vertical-align:super; padding:0px 4px;}

	#bannerContainer section{margin-top:35%; margin-left:20%;}
	#bannerContainer section span{font-size:38px !important; font-weight:bold !important;}
	
	#banner-hm{background-image:url('../images/img_bg_2-mb.jpg'); background-size:cover; height:550px !important;}
	#banner-hm section{right:0px; left:0px;}
	#banner-pg{background-repeat: no-repeat; background-size:100% 200px; height:200px;}
	
	#footer .pdtopbttm24 div{
		display:block;
		width:100% !important;
		text-align: center;
		padding:7px 0px;
	}
	
	#footer .pdtopbttm24 a{display:inline-block;}

	 .percent20, .percent25, .percent30, .percent40, .percent45, .percent50, .percent60, .percent70, .percent80, .percent90, .percent95{width:100%; clear:both !important;}
}