@charset "utf-8";
/* CSS Document */
*{font-family:"Segoe UI",Arial, Helvetica, "Microsoft JhengHei Correct", 'Microsoft JhengHei',PMingLiU,sans-serif;}
body{font-size:16px;line-height:1.3em;}





.size{ width:970px;margin:auto;position:relative; display:block; z-index: 2}
.size::after { content:" "; display:block; clear:both;}
.header .size{height: 100%;overflow: hidden;text-align:center;}
.header{position: relative; overflow: hidden;background: url(../images/header2.jpg) repeat-x center -50px;height: 360px;}
.header .size::before{content:" ";display:inline-block;width:1%;height: 100%;vertical-align: middle;}
.header h1 {display:inline-block;width: 98%; font-size:4.8em;line-height: 1.3em; color: #FFF;margin:0 auto 0 auto;position: relative;z-index: 2;vertical-align: middle;}
.header h1 em{display: block;font-size: 0.4em;font-style: normal;line-height: 1.3em;margin: -2px 0 0 0.2em;position: relative;}
.header p{font-size:0.9em;margin:-2.2% auto 0 auto;width:842px;padding:2em 1.5em;color: #fff;}
#content{margin: 1em auto;width:970px}
#content h3{margin:1.5em 3% 0 0%;color: #333;}
#content h2{font-size:1.5em;padding: 2em 3% 0.5em 0%;color: #333;}
#content p{font-size:0.9em;color:#C00;margin:0% 3% 0 0;}
#content p.text{color: #333;font-size:1.2em; line-height: 1.5em; margin:2em 3% 1em 0;}
#content input, 
#content textarea{ width: 100%; border:1px solid #CCC;font-size: 1em; line-height: 2.5em;padding: 0em 0.6em;transition:border 0.5s;}
#content select{width: 100%;border:1px solid #CCC;font-size: 1em; line-height: 2.5em;height: 2.5em;padding: 0em 0.3em;transition:border 0.5s;}
#content option{font-size: 1em; line-height: 2.5em;padding: 0.3em 0.6em;}

#content label{display: block;position: relative;}
#content label .txt{color: #333;display: block;left:5px;position: absolute;top:8px;z-index: 5;padding: 0 5px;transition:top 0.5s,color 0.5s;}
#content label .txt::after{transition:background 0.2s;content:" "; background:rgba(255,255,255,0);width: 100%;height: 2px;position: absolute;top:12px;left: 0;z-index: -1}
#content label.active .txt{top:-12px;color:#999}
#content label.active .txt::after{background:rgba(255,255,255,1);}
#content label.active:hover .txt,
#content label:hover .txt{color:#069}

#content label:hover select,
#content label:hover input,
#content label:hover textarea,
#content label.active:hover select,
#content label.active:hover input,
#content label.active:hover textarea{border:1px solid #09C;}
#content label.active select,
#content label.active input,
#content label.active textarea{border:1px solid #DDD;}
#content label::before { content:" "; display:block; clear:both;}

#content .pickup .txt{content:"Pickup Location";}
#content .drop .txt{content:"Drop-off Location";}
#content .date .txt{content:"Date";}
#content .time .txt{content:"Time";}
#content .passengers .txt{content:"Passengers";}
#content .luggage .txt{content:"Luggage";}
#content .name .txt{content:"Name";}
#content .number .txt{content:"Contact Number";}
#content .email .txt{content:"Email";}
#content .special .txt{content:"Special Requests";}



form{display: block;position: relative;}
form::before{content:"";display: block;clear: both;}
.w1 {width: 98.6%;margin:1em 1.4% 0 0%;}
.w2 {float: left; width: 48.6%;margin:1em 1.4% 0 0%;}
.w3{float: left; width: 20%;margin:1em 1.4% 0 0%;}
.g-recaptcha{margin:0.9em 0 0 0;}
.date input{background: #FFF url(../images/calendar.svg) no-repeat center right;background-size: 36px 16px;
}
.time input{background: #FFF url(../images/time.svg) no-repeat center right;background-size: 36px 16px;
}
#content button{border: 0; background: #ccc;font-size: 1em; line-height: 2.5em;padding: 0em 0.6em;}
#content button:hover{background: #FA0;color: #fff}
#tour_list{margin: 3em 1.4% 3em 0;position: relative;}
#tour_list h2{}
.tour_list{width: 100%;display: block}
.tour_list::after { content:" "; display:block; clear:both;}
#tour_list .swiper-slide{width:240px;}
#tour_list .swiper-slide a{display: block;position: absolute;left: 0;top: 0;width: 100%;height: 100%; z-index: 2;background:rgba(0,0,0,0);transition:background 0.5s;}
#tour_list .swiper-slide a:hover{background:rgba(0,0,0,0.15)}
#tour_list .pic,
#tour_list h3,
#tour_list .address,
#tour_list .prices{width: 100%;}
#tour_list .pic{height: 150px;overflow: hidden;background-size:cover;background-position: center center;}
#tour_list .pic img{width: 100%;}
#tour_list h3{margin: 0.4em 0 0 0;height: 3.8em;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
#tour_list .address{font-size:0.9em;margin: 0.3em 0 0 0;height: 3em;}
#tour_list .address::before {font-size:1.4em; content:" "; display:inline-block;height: 1em;width: 1em;vertical-align: middle;background-image: url("../../_inc/gridlist/images/hotellist_icon.png");background-size: 2em auto;background-position: -1em -2em;}
#tour_list .prices{text-align: right; font-size:0.9em;vertical-align:baseline;padding:0.6em 0 0 0;}
#tour_list .prices em{font-style: normal;font-size:1.6em;color:#C00;vertical-align:baseline;}
#tour_list .more{display: block;text-align: right;padding:0;margin: 0.5em 0 0 0;color: #069; }
#tour_list .more:hover{color: #C00;}
#tour_list .more::after{content:" ";display:inline-block; width:0;height:0;line-height: 0; border:5px solid #069;
  border-right: none;margin: 0 0 0 0.5em;
  border-bottom-color: transparent;
  border-top-color: transparent;}
#tour_list .more:hover:after{border-left-color:#c00}
.swiper-button-next,
.swiper-button-prev{background:rgba(0,0,0,0.0);top: auto;bottom:2em;height:204px;width: 40px;margin-top:0;transition:background 0.5s;}
.swiper-button-next:hover,
.swiper-button-prev:hover{background:rgba(0,0,0,0.5); }
.swiper-button-next{right:0px;left: auto;}
.swiper-button-prev{left:0px;right: auto;}

.swiper-button-next::after,
.swiper-button-prev::after{content:" "; display:block;font-size:20px;width:1em;height:1em;border:0.2em solid #ddd;border-width:0.2em 0.2em 0 0;margin:67px auto 0 auto;}
.swiper-button-next::after{transform: rotate(45deg)translate(-3px,3px)}
.swiper-button-prev::after{transform: rotate(-135deg)translate(-3px,3px)}
@media screen and (max-width:970px) {
	.size{width:100%;}
	#content{width:97%;margin:1em 0 1em auto;}
		.header p{width: 90%;padding:1em 1.5em;}
	
.w1,
.w2,
.w3{float: none; width: 97%;margin:1em 3% 0 0%;}
	
}
@media screen and (max-width:600px) {
	.header {height: 250px; background-position: 72% 25%;/*background-size: auto 100%;*/}
	.header h1{font-size: 3em;width:6em;max-width:95%;margin: 0 0 0 0;}
#content p.text{font-size:1em; line-height: 1.5em;}
	
}
@media screen and (min-width:1100px) {

	.size,#content{width:1100px;}}

@keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 1920px 0; }
}   
@keyframes tt {
  from { bottom: -1px;}
  to { bottom: -2px; }
}