/* CSS Document */

main{}
	main article{
		position: relative;
		padding: 3em 0;
		}
	main article > svg{
		position: absolute;
		top: -1em;
		left: 0;
		width: 100%;
		height: 1em;
		background: #45d1e8;
		fill: rgba(255,255,255,0.1);
		}
	main article+article{
		margin-top: 1em;
		}
	main h2{
		position: relative;
		text-align: center;
		}
		main h2 img{
			width: auto;
			max-width: 100%;
			vertical-align: top;
			}
	main h3{
		font-weight: 500;
		}
	main section{
		margin-top: 1em;
		}
	main section+section{
		margin-top: 2em;
		}

#main{
	width: 100%;
	padding-top: 0;
	color: #000;
	}

#hero{
	position: relative;
	}
	#hero p{
		line-height: 60vw;
		-webkit-animation: hero 1.5s 1 linear;
		animation: hero 1.5s 1 linear;
		}
		#hero p img{
			max-width: 80vw;
			background: rgba(69,209,232,0.9);
			vertical-align: middle;
			}
	#hero span{
		position: absolute;
		top: 0;
		width: 26%;
		height: 100%;
		background-position: center center;
		background-size: cover;
		-webkit-animation: hero 1s 1 ease-out;
		animation: hero 1s 1 ease-out;
		}
	#hero .wrap{
		position: relative;
		text-align: center;
		}
	#hero .image-01{
		left: 0;
		background-image: url(../images/heroPhoto-01.jpg);
		}
	#hero .image-02{
		left: 25%;
		background-image: url(../images/heroPhoto-04.jpg);
		}
	#hero .image-03{
		left: 50%;
		background-image: url(../images/heroPhoto-07.jpg);
		}
	#hero .image-04{
		left: 75%;
		background-image: url(../images/heroPhoto-10.jpg);
		}
	@-webkit-keyframes hero{
		0% {opacity: 0;}
		100% {opacity: 1;}
		}
	@keyframes hero{
		0% {opacity: 0;}
		100% {opacity: 1;}
		}

#about{
	position: relative;
	background: #fff3e1;
	padding-top: 2em;
	}
	#about:before{
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: url(../images/pattern.png);
		opacity: .8;
		}
	#about h2{
		text-align: left;
		}
		#about h2 img{
			height: 1.5em;
			}
	#about p{
		margin-top: 1em;
		font-size: 1.6rem;
		line-height: 1.6em;
		text-align: justify;
		}
	#about figure{
		float: left;
		width: 66.66%
		}
		#about figure:nth-child(n+2){
			float: right;
			width: 33.33%;
			}
	#about > svg{
		display: none;
		}
	#about .wrap{
		position: relative;
		}
		#about .wrap:nth-of-type(3){}
			#about .wrap:nth-of-type(3) h2 img{
				height: 3.6em;
				}
		#about .wrap div+div{
			margin-top: 1em;
			overflow: hidden;
			}
	#about .wrap+.wrap{
		padding-top: 2em;
		}
	#about .thumbBox{
		padding-top: 100%;
		background-size: cover;
		}

#booking{
	padding-bottom: 0;
	}
	#booking h2{}
		#booking h2 img{
			height: 3.6em;
			}
	#booking h2+p{
		text-align: justify;
		font-size: 1.4rem;
		line-height: 1.4em;
		padding: 1.4em 0;
		}
	#booking section{
		margin: 0 -15px;
		padding: 2em 15px 2.5em 15px;
		}
		#booking section:nth-of-type(even){
			background: #f2f2f2;
			}
		#booking section:last-child{
			padding-bottom: 3em;
			}
	#booking h3{
		position: relative;
		width: 100%;
		margin-bottom: 1em;
		padding: 0.8em;
		color: #fff;
		font-size: 1.8rem;
		font-family: "Rounded Mplus 1c";
		text-align: center;
		line-height: 1em;
		z-index: 1;
		}
		#booking h3:before,
		#booking h3:after{
			content: "";
			position: absolute;
			left: 50%;
			}
		#booking h3:before{
			top: 0;
			width: 12em;
			height: 100%;
			margin-left: -6em;
			background: #ff2c53;
			border-radius: 2px;
			z-index: -1;
			}
		#booking h3:after{
			bottom: -1.5em;
			margin-left: -0.8em;
			border: 0.8em solid transparent;
			border-top-color: #ff2c53;
			-webkit-transform: scale(0.8,1);
			-moz-transform: scale(0.8,1);
			}
	#booking h3+div{
		display: -webkit-flex;
		display: flex;
		-webkit-flex-flow: row wrap;
		flex-flow: row wrap;
		-webkit-justify-content: flex-start;
		justify-content: flex-start;
		margin: -0.5em;
		}
	#booking dl{
		position: relative;
		width: calc(50% - 1em);
		margin: 0.5em;
		}
	#booking dt{
		overflow: hidden;
		}
	#booking dd{
		position: absolute;
		padding: 0.5em;
		text-align: center;
		line-height: 1em;
		}
		#booking dd:nth-of-type(1){
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 0.8em;
			color: #fff;
			font-weight: bold;
			text-shadow: 0 0 2px #000;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			transition: background 0.2s ease-out;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-8 */
			}
		#booking dd:nth-of-type(2){
			top: 0;
			left: 1em;
			padding: 0.5em 0.8em;
			background: rgba(69,209,232,0.6);
			color: #fff;
			}
		#booking dd:nth-of-type(3){
			display: none;
			}
	#booking dl+div{
		width: 100%;
		margin-top: 1em;
		}
	#booking .thumbBox{
		padding-top: 100%;
		background-size: cover;
		transition: all 0.2s ease-out;
		}

#recommend{
	background: #d7f1f2;
	}
	#recommend:before{
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: url(../images/pattern.png);
		opacity: .2;
		}
	#recommend h2{
		padding-bottom: 1em;
		}
		#recommend h2 img{
			height: 3.6em;
			}
	#recommend section{
		position: relative;
		}
	#recommend h3{
		position: relative;
		padding: 0.8em;
		background: #ff2c53;
		border-radius: 2px 2px 0 0;
		color: #fff;
		font-size: 1.8rem;
		font-family: "Rounded Mplus 1c";
		line-height: 1em;
		text-align: center;
		}
		#recommend h3:before{
			content: "";
			position: absolute;
			left: 50%;
			bottom: -1.5em;
			margin-left: -0.8em;
			border: 0.8em solid transparent;
			border-top-color: #ff2c53;
			-webkit-transform: scale(0.8,1);
			-moz-transform: scale(0.8,1);
			z-index: 1;
			}
	#recommend figure{}
	#recommend figure+div{
		background: #fff;
		border-radius: 0 0 2px 2px;
		padding: 1em;
		}
	#recommend h4{
		color: #805a00;
		font-size: 1.6rem;
		text-align: justify;
		}
	#recommend h5{
		color: #ff2c53;
		font-size: 1.4rem;
		padding-top: 0.8em;
		}
	#recommend p{
		margin-top: 1em;
		text-align: justify;
		}
	#recommend dl{
		position: relative;
		margin-top: 1em;
		border-bottom: 1px dotted #ccc;
		}
	#recommend dt{
		position: absolute;
		left: 0;
		width: 1.2em;
		height: 1.2em;
		margin-top: 0.6em;
		color: rgba(0,0,0,0);
		overflow: hidden;
		}
		#recommend dt svg{
			width: 1.2em;
			height: 1.2em;
			fill: #999;
			vertical-align: top;
			}
	#recommend dd{
		border-top: 1px dotted #ccc;
		padding: 0.5em 0;
		padding-left: 1.5em;
		line-height: 1.4em;
		}
	#recommend dl+div{
		margin-top: 1em;
		padding: 0.5em 0;
		text-align: center;
		}
		#recommend dl+div a{
			display: inline-block;
			margin: 0.5em 0;
			}
	#recommend footer{
		position: relative;
		margin-top: 80px;
		text-align: center;
		}
		#recommend footer h4{
			display: inline-block;
			margin: auto;
			padding: 0.8em 0;
			border-top: 1px solid #28b9ff;
			border-bottom: 1px solid #28b9ff;
			color: #28b9ff;
			font-size: 1.6rem;
			font-family: "Rounded Mplus 1c";
			text-align: center;
			line-height: 1em;
			z-index: 1;
			}
			recommend footer h4:before,
			recommend footer h4:after{
				content: "";
				position: absolute;
				left: 50%;
				}
			recommend footer h4:before{
				top: 0;
				width: 28em;
				height: 100%;
				margin-left: -14em;
				background: #28b9ff;
				border-radius: 2px;
				z-index: -1;
				}
			recommend footer h4:after{
				bottom: -1.5em;
				margin-left: -0.8em;
				border: 0.8em solid transparent;
				border-top-color: #28b9ff;
				-webkit-transform: scale(0.8,1);
				-moz-transform: scale(0.8,1);
				}
		#recommend footer ul{
			margin: -0.5em 1em;
			margin-top: 1em;
			}
		#recommend footer li{
			padding: 0.5em;
			}
			#recommend footer li a{
				display: block;
				padding: 0.8em;
				border-radius: 2px;
				background: #fff;
				color: #ff2c53;
				font-weight: bold;
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				}
				#recommend footer li a:hover{
					text-decoration: none;
					}
			#recommend footer li .thumbBox{
				margin-bottom: 0.5em;
				}
		#recommend footer .slick-arrow{
			position: absolute;
			top: 50%;
			width: 2em;
			height: 2em;
			margin-top: -1em;
			background: #45d1e8;
			border-radius: 100%;
			color: #fff;
			font-size: 1.6rem;
			text-align: center;
			line-height: 2em;
			z-index: 1;
			}
			#recommend footer .slick-arrow:hover{
				cursor: pointer;
				}
		#recommend footer .slick-prev{
			left: -1em;
			}
		#recommend footer .slick-next{
			right: -1em;
			}

.thumbBox{
	background-color: #ccc;
	}


/* ie */
@media all and (-ms-high-contrast: none){}