/* general */
* { margin: 0px; padding: 0px; }
html, body { font-family: 'Open Sans', sans-serif; font-size: 13px; color: #333; }
input, select, textarea { font-family: 'Open Sans', sans-serif; font-size: 14px; color: #333; }
body { background: #fff; }
img { border: 0px; }
a:focus { outline: none; }

a, button, input, textarea, select {  transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -webkit-transition: .25s ease-in-out; }

/* global classes */
.clear { clear: both; height: 1px; }

/* wrapper */
#wrapper { width: 100%; height: auto; min-height: 100%; float: left; overflow: hidden; }

	/*  main  */
	.main { margin: 0 auto; width: 1023px; }
	
		/* header wrapper */
		#headerWrapper { width: 100%; float: left; position: relative; z-index: 9999; }	
		
			/* logo arae */
			.logoArea { position: absolute; top: 7px; right: 44%; }
			
			/* contact arae */
			.contactArea { padding: 12px 0; float: left; }
			.contactArea p { margin: 0 15px 0 0; float: left; font-size: 14px; color: #fff; }
			.contactArea a { color: #fff; text-decoration: none; }
			.contactArea .fa { margin: 0 7px 0 0; font-size: 14px;  color: #fff; }
			
			/* booking arae */
			.boobkingArea { padding: 12px 3px 12px 0; float: right; }
			.boobkingArea p { margin: 0 7px 0 0; float: left; font-size: 14px; color: #003366; text-transform: uppercase; }
			.boobkingArea a { color: #003366; text-decoration: none; }
			.boobkingArea a.username { padding: 4px 0 4px 35px; background: url('../images/username-bg.png') left no-repeat; }
			.boobkingArea .fa { margin: 0 7px 0 0; font-size: 16px;  color: #003366; }
			
			/* language arae */
			.languageArea { padding: 12px 0; float: right; }
			.languageArea select { padding: 0 0 0 9px; width: 82px; height: 25px; font-size: 14px; font-weight: 300; line-height: 25px; border: 1px solid #d6d6d6; -webkit-appearance: none; -moz-appearance: none; background: #fff url('../images/select-to.png') 94% no-repeat;  }
			
			/* menu arae */
			#menuArea { width: 100%; float: left; background: #fff; }
			
				/* main menu */
				.mainMenu { overflow: hidden; float: left; height: 64px; }
				.mainMenu ul { list-style: none; }
				.mainMenu li { padding: 0 25px 0 0; float: left; }
				.mainMenu li.last { padding: 0; }
				.mainMenu li.right { margin: 0 0 0 280px; }
				.mainMenu li a { font-family: 'STHeiti'; font-size: 17px; color: #333366; line-height: 64px; text-decoration: none; text-transform: uppercase; }	
				.mainMenu li.active a,.mainMenu li:hover a { color: #ff1d6e; }
		
		/* scroll header */
		#scrollHeader { padding: 20px 0; width: 100%; float: left; position: fixed; top: 0; left: 0; z-index: 9999999; background: #fff; }
		#scrollHeader.menudefault { display: none; }
		#scrollHeader.menufixed { display: block; }
		#scrollHeader .scrollmain { width: 1023px; position: relative; margin: 0 auto; }
		#scrollHeader .logodiv { position: absolute; top: -20px; left: 0; }
		#scrollHeader .logodiv img { margin: 5px 0 0 0; width: auto; height: 70px; }
		#scrollHeader .scrollMenu { float: right; }
		#scrollHeader .scrollMenu ul { list-style: none; }
		#scrollHeader .scrollMenu li { padding: 0 0 0 35px; float: left; }
		#scrollHeader .scrollMenu li a { padding: 0; float: left; font-family: 'STHeiti'; font-size: 17px; color: #333366; text-decoration: none; text-transform: uppercase; }	
		#scrollHeader .scrollMenu li.active a,#scrollHeader .scrollMenu li:hover a { color: #ff1d6e; }
		
		/* banner wrapper */
		#bannerWrapper { margin: -112px 0 0 0; width: 100%; float: left; position: relative; z-index: 999; }
			
			/* banner area */
			.bannerImageArea { width: 100%; float: left; position: absolute; top: 0; left: 0; }
			.bannerImageArea .items { display: none; width: 100%; float: left; height: 930px; }
			
			/* banner area */
			.bannerArea { width: 100%; float: left; height: 900px; position: relative; }
			.bannerArea .subjectArea { margin: 195px 0 0 0; width: 90%; height: 100px; float: left; }	
			.bannerArea .subjectArea .brief { display: none; width: 100%; float: left; height: 930px; }
			.bannerArea .subjectArea h1 { font-family: 'STHeiti'; font-size: 57px; color: #fff; font-weight: bold; line-height: 70px; }	
			.bannerArea .subjectArea span { font-weight: normal; display: block; }	
			.bannerArea .subjectArea h2 { font-family: 'STHeiti'; font-size: 45px; color: #fff; font-weight: bold; line-height: 48px; }
			.bannerArea .subjectArea h3 { font-family: 'STHeiti'; font-size: 35px; color: #fff; font-weight: bold; line-height: 36px; }
			.bannerArea .subjectArea h4 { font-family: 'STHeiti'; font-size: 24px; color: #000; font-weight: bold; line-height: 36px; }
			.bannerArea .subjectArea h5 { font-family: 'STHeiti'; font-size: 16px; color: #000; font-weight: bold; line-height: 36px; }
			.bannerArea .subjectArea span.date { margin: 0 17px 0 0; width: 91px; height: 91px; float: left; color: #fff; text-align: center; display: block; border-radius: 50%; background: #003366; }
			.bannerArea .subjectArea span.date b { font-size: 39px; font-weight: 700; line-height: 65px; }
			.bannerArea .subjectArea span.date em { font-size: 17px; font-weight: 200; font-style: normal; display: block; line-height: 0px; }
			
			.bannerArea .googleMap { margin: 36px 0 0 0; width: 100%; float: left; }
			.bannerArea .googleMap .left { padding: 0 0 8px 0; width: 550px; height: 467px; float: left; overflow: hidden; position: relative; border: 5px solid #fff; border-radius: 2px; background: #fff url('../images/google-bottom-shadow.png') left bottom no-repeat; }
			.bannerArea .googleMap .left ul { list-style: none; position: absolute; left: 10px; top: 10px; z-index: 99; }
			.bannerArea .googleMap .left ul li { padding: 0 10px 0 0; float: left; }
			.bannerArea .googleMap .left ul li a { padding: 0 10px; float: left; color: #fff; text-decoration: none; line-height: 29px; text-align: center; text-transform: uppercase; background: #003366; }
			.bannerArea .googleMap .left ul li a:hover,.bannerArea .googleMap .left ul li a.active { background: #57c3f1; }
			.bannerArea .googleMap .left .displayItem { display: none; width: 100%; float: left; }
			.bannerArea .googleMap .left img { width: 100%; height: auto; }
			
			.bannerArea .googleMap .left .popup { width: 490px; position: absolute; top: 112px; left: 20px; border: 10px solid #fff; border-radius: 2px; background: url(../images/map-indicator.png) bottom center no-repeat; }
			.bannerArea .googleMap .left .popup .image { width: 100%; float: left; position: relative; }
			.bannerArea .googleMap .left .popup h4 { padding: 0 0 0 20px; width: 96%; float: left; height: 38px; line-height: 38px; font-size: 18px; color: #fff; font-weight: 600; position: absolute; bottom: 0px; left: 0px; opacity: .7; background: #000; }
			
			.bannerArea .googleMap .right { margin: -31px 0 0 0; width: 438px; float: right; background: url('../images/banner-repeator-shadow.png') left bottom no-repeat; }
			.bannerArea .googleMap .right ul { list-style: none; }
			.bannerArea .googleMap .right ul li { margin: 0 0 3px 0; overflow: hidden; border-right: 4px solid #3e6179; border-radius: 3px; background: url('../images/banner-repeator-bg.png') repeat; }
			.bannerArea .googleMap .right ul li h5 { margin: 0 15px 0 0; padding: 35px 10px; width: 125px; min-height: 30px; float: left; font-size: 16px; color: #57c3f1; font-weight: 700; text-align: center; line-height: 21px; border-radius: 3px; background: #3e6078;  }
			.bannerArea .googleMap .right ul li h5 span { font-size: 13px; color: #fff; font-weight: normal; display: block; }
			.bannerArea .googleMap .right ul li p { margin: 35px 0; padding: 0 63px 0 0; width: 211px; min-height: 30px; float: right; font-size: 14px; color: #000; line-height: 20px;  }
			.bannerArea .googleMap .right a.scrd { margin: 10px auto; width: 10px; height: 16px; text-decoration: none; text-indent: -9999px; display: block; background: url('../images/clickdown.png') center no-repeat; }
			.bannerArea .googleMap .right a.scru { margin: 10px auto; width: 16px; height: 10px; text-decoration: none; text-indent: -9999px; display: block; background: url('../images/up.png') center no-repeat; }		
			
		    .bannerArea .main .infoicon { float: right; position: relative; top: 150px}
			.bannerArea .services { width: 100%; float: left; position: relative; }
			.bannerArea .services .jcarousel { padding: 212px 0 0 0; width: 100%; float: left; overflow: hidden; }
			.bannerArea .services .jcarouselIn { width: 20000em; position: relative; }
			.bannerArea .services .item { margin: 0 22px 0 0; width: 237px; height: 185px; overflow: hidden; float: left; position: relative; transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -webkit-transition: .25s ease-in-out; border: 1px solid #fff; }
			.bannerArea .services .item:hover { margin: -140px 22px 0 0; height: 325px; }
			.bannerArea .services .item img { width: 100%; height: 325px; display: block; position: absolute; bottom: 0; left: 0; }
			.bannerArea .services .item.lake { margin-right: 0; }
			.bannerArea .services .item strong { margin: 0 0 0 12px; display: block; position: absolute; bottom: 12px; left: 0px; font-size: 26px; color: #fff; font-weight: 900; line-height: 26px; text-transform: uppercase; }
			
			.bannerArea .services .item .shareDiv { position: absolute; top: 12px; left: 0; width: 100%; }
			.bannerArea .services .item a.print { margin: 0 12px 0 12px; width: 56px; height: 24px; float: left; font-family: 'SegoePrint'; font-size: 16px; color: #fff; text-decoration: none; text-align: center; line-height: 20px; border: 1px solid #99191d; border-radius: 5px; background: url('../images/print-bg.png') repeat-x; }
			.bannerArea .services .item a.send { padding: 0 6px; width: 56px; height: 24px; float: left; color: #000; font-weight: 600; text-align: center; text-decoration: none; line-height: 23px; border-radius: 5px; background: #fff; }
			.bannerArea .services .item a.send span { padding: 0 0 0 22px; background: url('../images/pointer.png') left no-repeat; }
			.bannerArea .services .item span.icon { margin: 0 12px 0 0; width: 38px; height: 26px; float: right; border-radius: 5px; background: #fff url('../images/heart.png') center no-repeat; }
				
			.bannerArea .services a.jcarousel-control-prev { width: 16px; height: 28px; display: block; text-indent: -9999px; position: absolute; top: 73%; left: -44px; background: url('../images/previous.png') center no-repeat; }
			.bannerArea .services a.jcarousel-control-next { width: 16px; height: 28px; display: block; text-indent: -9999px; position: absolute; top: 73%; right: -44px; background: url('../images/next.png') center no-repeat; }	
			
			/* choose us area */
			.chooseusArea { margin: -159px 0 0 0; padding: 0 0 40px 0; width: 100%; float: left; position: relative; z-index: 500; background: url('../images/chooseus-top-shadow.png') center no-repeat; }
			.chooseusArea .chooseUs { width: 100%; float: left; position: relative;}
			.chooseusArea .chooseUs h2 { width: 100%; float: left; font-family: 'SegoePrint'; font-size: 32px; color: #333366; font-weight: bold; text-align: center; background: url('../images/upcomming-title-bg.png') center no-repeat; }
			.chooseusArea .chooseUs h2 span { padding: 0 20px; }
			.chooseusArea .chooseUs span.flower { margin: 0px auto; width: 90px; height: 61px; display: block; background: url('../images/flower.png') center no-repeat; }
			.chooseusArea .chooseUs .repeator { margin: 15px 49px 0 0; width: 219px; float: left; text-align: center; }
			.chooseusArea .chooseUs .repeator.last { margin: 15px 0 0 0; }
			.chooseusArea .chooseUs .repeator span { margin: 0px auto; width: 122px; height: 122px; display: block;  border-radius: 50%; background: #6699cc; }
			.chooseusArea .chooseUs .repeator span img { margin: 30px 0 0 0; width: 50%; }
			.chooseusArea .chooseUs .repeator h3 { margin: 25px 0 15px 0; font-size: 18px; color: #000; font-weight: normal; line-height: 24px; }
			.chooseusArea .chooseUs .repeator p { font-size: 13px; }
			
		/* slider wrapper */
		#sliderWrapper { padding: 30px 0 0 0; width: 100%; float: left; }
		
			/* slider area */
			.sliderArea { width: 100%; float: left; position: relative; }
			.sliderArea h2 { width: 100%; float: left; font-family: 'SegoePrint'; font-size: 32px; color: #333366; font-weight: bold; text-align: center; background: url('../images/kivi-title-bg.png') center no-repeat; }
			.sliderArea h2 span { padding: 0 20px; background: #fff; }
			.sliderArea span.icon { margin: 0px auto; width: 80px; height: 63px; display: block; background: url('../images/slider-icon-top.png') no-repeat; }
			.sliderArea .slider { padding: 20px 0; width: 100%; float: left; position: relative; }
			.sliderArea .slider .jcarousel-wrapper { overflow: hidden; }
			.sliderArea .slider ul { list-style: none; width: 20000em; position: relative; }
			.sliderArea .slider li { margin: 0 48px 0 0; float: left; }
			.sliderArea .slider li img { max-width: 100%; height: auto; }
			.sliderArea .slider li.last { margin: 0; }
			.sliderArea .slider li a { text-decoration: none; }
			
			.sliderArea .slider a.jcarousel-control-prev { width: 16px; height: 28px; display: block; text-indent: -9999px; position: absolute; top: 40%; left: -40px; background: url('../images/previous.png') center no-repeat; }
			.sliderArea .slider a.jcarousel-control-next { width: 16px; height: 28px; display: block; text-indent: -9999px; position: absolute; top: 40%; right: -40px; background: url('../images/next.png') center no-repeat; }
			
		/* footer wrapper */
		#footerWrapper { padding: 120px 0 0 0; width: 100%; float: left; background: url(../images/footer-bg.png) center no-repeat; }
		
			/* footer top */
			#footerTop { width: 100%; float: left; }
			
				/* quicl link area */
				.quicklinkArea { width: 586px; float: left; }
				.quicklinkArea h4 { display: block; font-family: 'SegoePrint'; font-size: 18px; color: #fff; font-weight: normal; background: url('../images/span-right.png') right no-repeat; }
				.quicklinkArea ul { list-style: none; }
				.quicklinkArea li { padding: 3px 27px 3px 0; float: left; }
				.quicklinkArea li.last { padding: 0; }
				.quicklinkArea li a { font-size: 14px; color: #999; text-decoration: none; }	
				.quicklinkArea li.active a,.quicklinkArea li:hover a { color: #ff1d6e; }
				
				/* contact us area */
				.contactUsArea { padding: 20px 0; width: 586px; float: left; }
				.contactUsArea h4 { display: block; font-family: 'SegoePrint'; font-size: 18px; color: #fff; font-weight: normal; background: url('../images/span-right.png') right no-repeat; }
				.contactUsArea p { padding: 3px 0; float: left; font-size: 14px; color: #999; }
				.contactUsArea .right { float: right; }
				.contactUsArea .right .fa { margin: 0 0 0 7px; font-size: 14px;  color: #999; }
				
				/* coppy right area */
				.coppyRightArea { padding: 25px 0 0 0; width: 620px; float: left; }
				.coppyRightArea p { padding: 3px 0; float: right; font-size: 13px; color: #999; text-align: right; }
			
			/* footer bottom */
			#footerBottom { margin: 5px 0 0 0; width: 100%; float: left; height: 58px; background: url('../images/bot-footer.png') repeat; }
			
				/* footer logo area */
				.footerlogoArea { margin: -35px 0 0 0; float: left; position: relative; z-index: 999; }	
				
				/* member area */
				.memberArea { margin: 0 0 0 10px; width: 460px; float: left; }
				.memberArea a { font-family: 'SegoePrint'; font-size: 20px; color: #000; font-weight: 700; line-height: 58px; text-decoration: none; }
				.memberArea a.right { float: right; }
				.memberArea a .fa { margin: 0 7px 0 0; font-size: 20px; color: #000; }
				
				/* social area */
				.socialArea { margin: 0 5px 0 0; width: 170px; float: right; }
				.socialArea a { margin: 0 15px 0 0; text-decoration: none; line-height: 70px; }
				.socialArea a .fa { font-size: 23px; color: #000; }
				
				/* language arae */
				.footerlangArea { padding: 20px 10px; width: 66px; float: right; background: url('../images/select-bg.png') repeat; }
				.footerlangArea select { padding: 0 0 0 9px; width: 55px; height: 23px; font-size: 14px; font-weight: 300; color: #fff; line-height: 23px; border: 0px;  -webkit-appearance: none; -moz-appearance: none; background: url('../images/web-app.png') 94% no-repeat; }

/* aboutus */
.aboutus {position: fixed; top: 200px; left: 10%; margin: auto;  width: 80%; height: 60%; padding: 10px; background-color: #ffffff; border-radius: 10px; overflow:scroll;}
/* terms */
.terms {position: fixed; top: 200px; left: 10%; margin: auto;  width: 80%; height: 60%; padding: 10px; background-color: #ffffff; border-radius: 10px; overflow:scroll;}
/* privacy */
.privacy {position: fixed; top: 200px; left: 10%; margin: auto;  width: 80%; height: 60%; padding: 10px; background-color: #ffffff; border-radius: 10px; overflow:scroll;}
/* trade */
.trade {position: fixed; top: 200px; left: 10%; margin: auto;  width: 80%; height: 60%; padding: 10px; background-color: #ffffff; border-radius: 10px; overflow:scroll;}
/* recruiting */
.recruiting {position: fixed; top: 200px; left: 10%; margin: auto;  width: 80%; height: 60%; padding: 10px; background-color: #ffffff; border-radius: 10px; overflow:scroll;}

/* route_booking */
.route_booking {position: fixed; top: 200px; left: 10%; margin: auto;  width: 80%; height: 70%; padding: 10px; background-color: #ffffff; border-radius: 10px; overflow:scroll;}

/* dialogue */
.dialogue { position: fixed; top: 200px; z-index: 999; left: 35%; margin: auto;  width: 30%; height: 20%; padding: 10px; background-color: #ffffff;border-style: solid;border-width: 2px; border-color:#d0d0d0; border-radius: 20px; overflow:scroll; text-align: center;}
.dialogue p{margin:0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

/* page_mask */
.page_mask { position: fixed; top: 0px; z-index: 998; left: 0%; margin: auto;  width: 100%; height: 100%; padding: 10px; background-color: #000000; opacity: 0.5;}

.button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
}

.booking_button {
    border-radius:3px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.booking_button:hover {
    border-radius:3px;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.vertical-carousel ul.vertical-carousel-list {
    position: relative;
}

.x-field-error {
    margin-left: 5px;
}
.x-field-error .x-icon {
      padding: 1px;
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      border-radius: 8px;
      position: relative;
      top: 3px;
}
.x-field-error .x-field-error-text {
    padding-left: 5px;
    color: #eb4f38;
    font-size: 12px;
}

.selector-left {
    position: absolute;
    left: 35%;
    top: 50%;
    width: 140px;
    height: 140px;
    margin-top: -70px;
    margin-left: -70px;
}

.selector-left, .selector-left button {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
}

.selector-left button {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px;
    background: #428bca;
    border-radius: 50%;
    border: 0;
    color: white;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
    transition: all .1s;
}

.selector-left button:hover {
    background: #3071a9;
}

.selector-left button:focus {
    outline: none;
}

.selector-right {
    position: absolute;
    right: 35%;
    top: 50%;
    width: 140px;
    height: 140px;
    margin-top: -70px;
    margin-left: -70px;
}

.selector-right, .selector-right button {
    font-family: 'Oswald', sans-serif;
    font-weight: 300;
}

.selector-right button {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px;
    background: #428bca;
    border-radius: 50%;
    border: 0;
    color: white;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
    transition: all .1s;
}

.selector-right button:hover {
    background: #3071a9;
}

.selector-right button:focus {
    outline: none;
}