/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* custom css starts here... */

/*getting rid of scrollbars in chrome*/
::-webkit-scrollbar {
	display: none;
}
@font-face {
	font-family: 'Roboto Condensed';
	src: url(font/RobotoCondensed-Regular.ttf);
}

body {
	font-family: 'Roboto Condensed';
	font-size: 1.25vw;
	font-weight: 400;
	text-align: center;
	background-image: url('../images/background-paper.jpg');
}
section {
	opacity: 0.0;
}
img {
	outline: 0;
}
a {
	outline: 0;
}
/*remove mobile landing page*/
#mlanding-page, #mheader  {
	display: none !important;
}
#landing-page {
	position: fixed;
	top: -5vw;
	width: 100vw;
	overflow: hidden;
}
#landing-page img {
	width: 100%;
	z-index: 1;
}
.landing-tabs {
	position: absolute;
	display: inline-block;
	width: 80vw;
	height: 3vw;
	top: 9vw;
	left: 10vw;
	z-index: 2;
}
.landing-tabs ul li {
	display: inline;
	margin: 0 2vw;
}
.landing-tabs ul li:first-child {
	margin-left: 0;
}
.landing-tabs ul li:last-child {
	margin-right: 0;
}
.landing-tabs ul li a {
	padding: 2vw 12vw 4vw;
	outline: 0;
}

h1 {
	font-family: 'Roboto Condensed';
	font-size: 1.5vw;
	padding: 1vw;
	text-align: left;
}
/*mobile screen*/
@media only screen and (max-aspect-ratio:1/1){
	body {font-size: 3vw;}
}
/*header and fonts*/
header {
	position: fixed;
	top: -2vh;
	left: 0;
	width: 100vw;
	opacity: 0.0;
}
header .logo {
	width: 100%;
	z-index: 4;
}
#logo-link {
	position: absolute;
	top: 1.5vw;
	right: 5vw;
	width: 8vw;
	height: 8vw;
	z-index: 6;
	outline: 0;
	/*border: .1vw solid red;*/
}
section #logo-link {/*extra one in section to complete the square*/
	top: -4vw;
	right: 0;
}
.top-nav {
	position: absolute;
	display: inline-block;
	width: 75vw;
	height: 3vw;
	top: 4vw;
	left: 4vw;
	z-index: 5;
}
.top-nav ul li {
	display: inline;
}
.top-nav ul li a {
	width: 100%; /*maximize clickable area?*/
	height: 100%;
	outline: 0;
	transition: padding 0.5s;
}
.top-nav ul li a:focus, .top-nav ul li a:hover {
	padding: 0 3vw;
}
.top-nav ul li a img {
	width: 8vw;/*sets the size of the list elements*/
	margin: 0 1.5vw;
}

/*final home page*/
#panel-container {
	position: fixed;
	bottom: 1vh; /*do it from the bottom later???*/
	left: 5vw;
	width: 90vw;
	height: 90vh;
	overflow: hidden;
	/*border: .1vw solid black;*/
	z-index: 5;
}
.top-bottom-tabs {
	position: absolute;
	display: inline-block;
	width: 68vw;
	height: 3vw;
	top: 3.5vw;
	left: 8vw;
	z-index: 5;
}
.bottom-tabs {
	top: 41vw;
	left: 14vw;
}
.top-bottom-tabs ul li {
	display: inline;
	margin: 0 1vw;
	padding: 0 4.5vw 1vw;
	/*border: .1vw solid red;*/
	z-index: 5;
	cursor: pointer; /* to make the hand cursor appear*/
}
.top-bottom-tabs ul li:first-child {
	margin-left: 2.5vw;
}
.top-bottom-tabs ul li:last-child {
	margin-right: 0;
}
.side-tabs {
	position: absolute;
	width: 3vw;
	height: 40vw;
	top: 3vw;
	left: 7vw;
	z-index: 6;
	/*border: .1vw solid black;*/
}
.right-tabs {
	top: 12vw;
	left: 78vw;
	height: 30vw;
}
.side-tabs ul li {
	margin: 1vw 0;
	padding: 4vw 0;
	z-index: 6;
	cursor: pointer; /* to make the hand cursor appear*/
	/*border: .1vw solid red;*/
}
.side-tabs ul li:first-child {
	margin-top: 2vw;
}
.panel-background {
	position: absolute;
	top: -5vw;
	left: 6vw;
	width: 76vw;
	z-index: 1;
}
.panel-background img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: none;
}
.write-form {
	position: absolute;
	top: 20vw;
	left: 50vw;
	width: 27vw;
	height: 20vw;
	display: none;
	z-index: 5;
	/*border: .1vw solid black;*/
}
.write-form img {
	position: absolute;
	top: -7.25vw;
	left: -6vw;
	width: 140%;
}
.write-form form {
	position: absolute;
	top: -3vw;
	left: 2vw;
	width: 100%;
	/*border: .1vw solid red;*/
	text-align: left;
	font-size: 1vw;
}
.write-form form textarea {
	width: 65%;
	height: 7vw;
}
.write-form form input {
	width: 65%;
	height: 2vw;
}
.write-form form #submit {
	margin-left: 15vw;
	width: auto;
}
.panel-heading {
	position: absolute;
	width: 8vw;
	top: 4vw;
	left: 11vw;
	z-index: 9999;
	outline: 0;
}
.panel-heading img {
	width: 100%;
}
#panel-content, #panel-content-nothome {
	position: absolute;
	top: 7vw;
	left: 12vw;
	z-index: 2;
	width: 65vw;
	height: 32vw;
	overflow-y: auto;
	overflow-x: hidden;
	outline: 0;
	text-align: left;
	/*how to hide scroll bar??*/
}

#panel-content article, #panel-content-nothome article {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: none;
}
#panel-content-nothome .blog {
	position: relative;
	top: 1vw;
	left: 2vw;
	width: 60%;
	display: block;
}
#panel-content-nothome .blogindex {
	position: fixed;
	top: 12.5vw;
	left: 65vw;
	width: 15%;
	height: 32vw;
	display: block;
	overflow-y: auto;
}
#panel-content-nothome .blogindex div, #panel-content-nothome .blogindex img {
	position: absolute;
	top: 0;
	left: 0;
	padding: 0;
	width: 100%	;
	z-index: 2;
}
#panel-content-nothome .blogindex div {
	top: 1vw;
	left: 1vw;
	width: 90%;
	z-index: 3;
}
#panel-content-nothome .blog h1, #panel-content-nothome .blogindex h1, #panel-content-nothome .faq h1 {
	padding: 0;
}
#panel-content-nothome .blog p, #panel-content-nothome .blogindex p {
	font-size: 1.1vw;
	line-height: 1.5vw;
}
#panel-content-nothome .blog .postdate {
	text-align: right;
}
#panel-content-nothome .faq h2 {
	font-size: 1.5vw;
	line-height: 2.5vw;
}
#panel-content-nothome .faq p {
	line-height: 1.8vw;
}
#panel-content-nothome .faq .postcontent {
	width: 95%;
}
#panel-content-nothome .blog a, #panel-content-nothome .blogindex a {
	text-decoration: none;
	color: black;
	font-family: 'Roboto Condensed';
}
#panel-content-nothome .blogindex h2 {
	text-decoration: underline;
}
#panel-content-nothome .blogindex li {
	padding-top: 1vw;
}
#panel-content-nothome .blog .posttag {
	font-style: italic;
}
#panel-content-nothome .blog img {
	width: 38vw;
	padding: 1vw 0;
}
#panel-content-nothome .feedcontent {	
	width: 48vw;
}

#panel-content div, #panel-content-nothome div {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	padding: 2vw 0;
}
#homestay_edibles img, #hostel_edibles img {
	position: relative;
	width: 100%;
}
/*deals section - don't get intimidated*/
#homestay_deals .deal-container, #hostel_deals .deal-container, #travels_adventures .deal-container, #travels_boutique .deal-container {
	position: relative;
	top: 3.5vw;
	left: 1vw;
	width: 36.5vw;
	height: 20vw;
	padding-right: 2vw;
	margin-bottom: 6vw;
	z-index: 8;
	outline: 0;
	overflow: auto;
}
#hostel_deals .deal-container {
	width: 35vw;
	height: 10vw;
}
#travels_adventures .deal-container, #travels_boutique .deal-container {
	width: 50vw;
	height: 16.5vw;
}
#homestay_deals .dealtxt, #hostel_deals .dealtxt, #travels_adventures .dealtxt, #travels_boutique .dealtxt {
	width: 100%;
}
#hostel_deals .right-align {
	width: 95%;
	text-align-last: right;
}
#homestay_deals .deal2, #homestay_deals .deal3,
	#hostel_deals .deal2, #hostel_deals .deal3, #hostel_deals .deal4,
		#travels_adventures .deal2, #travels_adventures .deal3, #travels_adventures .deal4,
			#travels_boutique .deal2, #travels_boutique .deal3, #travels_boutique .deal4 {
	display: none;
}
#homestay_deals .label, #hostel_deals .label, #travels_adventures .label, #travels_boutique .label {
	position: absolute;
	left: 2vw;
	cursor: pointer;
	z-index: 7;
}
#hostel_deals .label {
	padding-bottom: 1vw;
}
#homestay_deals .label1, #homestay_deals .label2, #homestay_deals .label4,
	#hostel_deals .label1, #hostel_deals .label2, #hostel_deals .label4, #hostel_deals .label7,
		#travels_adventures .label1, #travels_adventures .label2, #travels_adventures .label4, #travels_adventures .label7,
			#travels_boutique .label1, #travels_boutique .label2, #travels_boutique .label4, #travels_boutique .label7 {
		top: 3vw;
}
#homestay_deals .label3, #homestay_deals .label5,
	#hostel_deals .label3, #hostel_deals .label5, #hostel_deals .label8,
		#travels_adventures .label3, #travels_adventures .label5, #travels_adventures .label8,
			#travels_boutique .label3, #travels_boutique .label5, #travels_boutique .label8 {
		top: 5.5vw;
}
#homestay_deals .label6,
	#hostel_deals .label6, #hostel_deals .label9 {
	top: 8vw;
}
#hostel_deals .label10 {
	top: 11vw;
}
#travels_adventures .label9,  #travels_adventures .label6,
	#travels_boutique .label9,  #travels_boutique .label6 {
	top: 7.5vw;
}
#travels_adventures .label10, #travels_boutique .label10 {
	top: 10vw;
}
#homestay_deals .label7, #travels_adventures .label11 , #travels_boutique .label11 {
	bottom: 10vw;
}
#hostel_deals .label11 {
	 bottom: 17.5vw;
}
#homestay_deals .label8, #homestay_deals .label9,
		#travels_adventures .label12, #travels_adventures .label14,
		 	#travels_boutique .label12, #travels_boutique .label14 {
	bottom: 7.5vw;
}
#hostel_deals .label12, #hostel_deals .label14 {
	bottom: 14.5vw;
}
#travels_adventures .label13, #travels_adventures .label15, #travels_adventures .label16,
 	#travels_boutique .label13, #travels_boutique .label15, #travels_boutique .label16 {
	bottom: 5vw;
}
#hostel_deals .label13, #hostel_deals .label15, #hostel_deals .label16 {
	bottom: 12vw;
}
.label:hover {
	cursor: pointer;
}
#homestay_deals .dealimg, #hostel_deals .dealimg, #travels_adventures .dealimg, #travels_boutique .dealimg  {
	position: absolute;
	top: -10vw;
	left: -6vw;
	width: 110%;
	z-index: -1;
}
/*deals section over, phew...*/
#homestay_tariffs img, #hostel_tariffs img {
	position: relative;
	width: 60%;
}
#homestay_tariffs .extend {
	padding-bottom: 12vw;
}
#travels_educational .extend {
	padding-bottom: 20vw;
}
/*travel adventure and boutique are above with deals*/
#travels_shoestring .label, #travels_healing .label, #travels_customise .label {
	position: absolute;
	top: 2.5vw;
	left: 2vw;
}
#travels_shoestring .deal-container, #travels_healing .deal-container, #travels_customise .deal-container {
	position: relative;
	top: 6vw;
	left: 1.5vw;
	width: 50vw;
	height: 22vw;
	padding-right: 2vw;
	margin-bottom: 6vw;
	z-index: 6;
	outline: 0;
	overflow: auto;
}
#travels_shoestring .dealtxt, #travels_healing .dealtxt, #travels_customise .dealtxt  {
	width: 100%;
}
#travels_shoestring .dealimg, #travels_healing .dealimg, #travels_educational .dealimg, #travels_customise .dealimg  {
	position: absolute;
	top: -10vw;
	left: -5vw;
	width: 110%;
}
#panel-content h1, #panel-content h1 {
	font-size: 1.5vw;
	padding: 0;
}
#panel-content h2, #panel-content h2 {
	font-size: 1.2vw;
}
#panel-content p, #panel-content p {
	line-height: 1.5vw;
	font-size: 1vw;
	width: 60%;
}
#panel-content p em, #panel-content p em {
	font-weight: 600;
}
#panel-content .italp {
	font-style: italic;
	line-height: 1.2vw;
	font-size: 0.9vw;
	padding-left: 1vw;
}
#panel-content .bigital {
	font-size: 1vw;
}
#homestay_stay p {
	width: 45%;
}
#homestay_stay img {
	position: absolute;
	width: 45%;
	left: 50%;
	padding-top: 1%;
}
#hostel_stay p {
	width: 40%;
}
#hostel_stay img {
	position: absolute;
	width: 60%;
	left: 40%;
	top: -3%;
}
#homestay_facilities img {
	position: relative;
	width: 70%;
	left: 0;
}
#hostel_facilities img {
	position: relative;
	top: 2%;
	width: 85%;
}
#homestay_activities p {
	width: 80%;
}
/*book now*/
#panel-content-nothome .book_now form {
	font-size: 1.2vw;
	padding-bottom: 0;
}
#panel-content-nothome .book_now p {
	padding-left: 0.5vw;
}
#panel-content-nothome .book_now form input, #panel-content-nothome .book_now form select {
	margin: 1%;
	width: 22%;
	height: 4%;
}
#panel-content-nothome .book_now form select option[data-default] {
  color: #888;
}
#panel-content-nothome .book_now form #date-input {
	width: 47%;
}
#panel-content-nothome .book_now form textarea {
	position: relative;
	top: 0.5vw;
	width: 96%;
	margin: 1%;
}
#panel-content-nothome .book_now form #submit {
	width: 10%;
	margin: 2% 1% 0 88%;
}
#panel-content-nothome .pay-amount select {
	margin-top: 4vh;
	width: 10vw;
	height: 5vh !important;
}
#panel-content-nothome .book_now a {
	margin-left: 50vw;
	width: 11vw;
}
/*contact us*/
#panel-content-nothome .contact-us p {
	text-align: left;
	width: 100%;
	font-size: 1.2vw;
	line-height: 2vw;
}
#panel-content-nothome .contact-us a {
	color: #84131C;
}
#panel-content-nothome .contact-us form {
	position: relative;
	top: 0;
	font-size: 1vw;
}
#panel-content-nothome .contact-us form input {
	margin: 1vw 2vw 1vw 0;
	width: 18vw;
}
#panel-content-nothome .contact-us form textarea {
	position: relative;
	top: 1vw;
	width: 38.5vw;
	height: 4vw;
}
#panel-content-nothome .contact-us form #submit {
	margin-left: 8vw;
	width: 6vw;
}
/*about us*/
#panel-content-nothome .about-us div {
	width: auto;
	height: auto;
	padding: 0;
	margin: 0;	
}
@media screen and (-webkit-min-device-pixel-ratio:0) { /*adjust tripadvisor button only for chrome*/
    #panel-content-nothome .about-us div {
	top: -1vh;
	}
}
#panel-content-nothome .about-us p {
	font-size: 1.1vw;
	line-height: 1.6vw;
}

/*for mobile*/
@media only screen and (max-aspect-ratio:16/11), only screen and (max-width : 1023px) {
	/*remove pc landing page*/
	#landing-page, #panel-container, header {
		display: none !important;
	}

	#mlanding-page {
		display: block !important;
	}
	#mlanding-page img {
		position: relative;
		width: 90%;
		top: 6vh;
		padding: 2vh 0;
		z-index: 1;
	}
	#mlanding-page .mheader {
		position: fixed;
		top: 1vh;
		height: 8vh;
		width: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 2;
	}
	#mlanding-page h2 {
		font-family: 'Roboto Condensed';
		font-size: 2.8vh;
		font-weight: 400;
		padding: 1vh;
		color: #84131C;
	}
}