*{
	margin:0;
	padding:0;
}
::-webkit-scrollbar { 
    display: none; 
}
body{
	background-image: url(home.jpg);
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	font-family: 'maridavidregular';
}
.content{
	width: 63.5em;
	margin:auto;
}
.home-page{
	height: 65em;
}
header{
	display: flex;
	justify-content: space-between;
}
header>.book{
	position: fixed;
	right:0;
	color: #FFF6E8;
	font-size: 3em;
	text-align: center;
	padding: .1em;
	border-bottom-left-radius: .1em;
	width: 2em;
	background-color: #646664;
	box-shadow: inset 0px 0px 20px 1px rgba(0,0,0,.5);
	z-index: 1000;
}
header>.book:hover{
	color: #D6BEBE;
	cursor: pointer;
}
header>.fa{
	color: #646664;
	font-size: 3em;
	padding: .5em;
	padding-top: .25em;
}
.content>img{
	width: 11em;
	position: absolute;
	display: block;
	top:35%;
	left:50%;
	transform: translateX(-50%);
}
.nav ul{
	display: flex;
	flex-direction: column;
}
.nav ul li{
	font-size: 3em;
	list-style-type: none;
	color: #646664;
	padding-left: .5em;
}
.nav ul li:last-child{
	padding-bottom: .5em;
}
.nav ul li:hover{
	color: #D6BEBE;
	cursor: pointer;
}
.nav2{
	display: none;
	margin-top: 1em;
}
.nav2.fixed{
	position: fixed;
	top:0;
	left:50%;
	margin: 0 auto;
	z-index: 60;
	transform: translateX(-50%);
	width: 100%;
	box-shadow: 0px 3px 7px -2px rgba(0,0,0,0.75);}

.nav2 ul{
	display: flex;
}
.nav2 ul li{
	font-size: 2.5em;
	list-style-type: none;
	color: #646664;
	padding-right: .5em;
	padding-left: .5em;
}
.nav2 ul li:hover{
	color: #D6BEBE;
	cursor: pointer;
}
.bg{
	background: white}
.fa-angle-up,.fa-angle-down{
	position: absolute;
	left:50%;
	transform:translate(-50%,-50%);
	font-size: 3em;
	color: white;
	z-index: 40;
	opacity: 1;
	transition: all ease .5s;

}

.fa.hide{
	opacity: 0
}
.fa-angle-up{
	position: fixed;
	top:18%;
}
.fa-angle-down{
	position: fixed;
	top:82%;
}
.fa-angle-left,.fa-angle-right{
	display: none;
}


#fade{
	position: fixed;
	background-color: rgba(0,0,0,0.8);
	width: 100%;
	height: 100%;
	visibility: visible;
	z-index: 10;
	top: 0;
	left: 0;
	transition: all ease .5s;
	}
#fade.hide{
	visibility: hidden;
	background-color: rgba(0,0,0,0);
}

h1{
	font-size: 3em;
	text-align: center;
	color: #646664;
	padding-bottom: .5em;
	width: 100%;
}
.gallery{
	background-color: rgba(255,255,255,0.85);
	width: 100%;
	height: 65em;
	padding-top: 2em;
	padding-bottom: 15em;
}
.gallery-content{
	transform: translateY(50%);
}

.thumbnails{
	background-color:#FFF6E8;
	display: flex;
	flex-wrap: wrap;
	width:21.5em;
	height: 22em;
	overflow: scroll;
	margin:0 auto;
	padding-top: .5em;
	margin-bottom: 4em;
	position: relative;
}


.thumbnails img{
	flex:0 0 20%;
	display: block;
	height: 10em;
	margin-left: .5em;
	margin-bottom: .5em;
}

.slide-container{
	display: flex;
}

.prev-img{
	position: fixed;
	width:0em;
	top:23%;
	left:50%;
	transform:translate(-50%,-50%);
	opacity: 0;
	transition: all ease 1s;
	z-index: 30;
	background-color: white;
	transition: all ease 1s;

}
.prev-img.show{
	width: 10em;
	opacity: 1;
}
.prev-img>img{
	display: block;
	margin:auto;
	margin-top: .25em;
	margin-bottom:.25em;
	width: 95%;
	opacity: 0.75;
	transition: ease all .2s;
}
.prev-img>img:hover{
	opacity: 1;
}

.next-img{
	position: fixed;
	width:0em;
	top:77%;
	left:50%;
	transform:translate(-50%,-50%);
	opacity: 0;
	transition: all ease 1s;
	z-index: 29;
	background-color: white;
	transition: all ease 1s;
}
.next-img.show{
	width: 10em;
	opacity: 1;
}
.next-img>img{
	display: block;
	margin:auto;
	margin-top: .25em;
	margin-bottom:.25em;
	width: 95%;
	opacity: 0.75;
	transition: ease all .2s;
}
.next-img>img:hover{
	opacity: 1;
}

.popup-container{
	position: fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width: 0;
	opacity: 0;
	transition: all ease .5s;
	z-index: 80;
	background-color: white;
	box-shadow: 0px 0px 100px 50px rgba(0,0,0,1);
}
.popup-container.show{
	width: 20em;
	opacity: 1;
	

}

.popup-container>img{
	display: block;
	margin:auto;
	margin-top: .25em;
	margin-bottom:.25em;
	width: 97.5%;
}

.form-wrap{
	transform: translateY(10%);
	margin: 0 auto;
	width: 21.5em;
	background-color:rgba(255,255,255,0.85);

}
.booking-form{
	height: 65em;
	background-image: url(booking.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;	
}
.booking-form h1{
	font-size: 2em;
	padding-top: .25em;
}
.jotform-form ul{
	display: flex;
	flex-wrap: wrap;
}
.jotform-form ul li label{
	width: 100%;
}
.contact{
	background-color: rgba(255,255,255,0.85);
	width: 100%;
	height: 65em;
	padding-top: 2em;
	padding-bottom: 15em;
}
.contact>h1{
	padding-top: 5em;
}
.contact-content{
	padding: 2em;
	border: thin #646664 solid;
	border-radius: .5em;
	margin: 0 auto;
	width: 17.5em;
	transform: translateY(5%);
}
.contact-content h2, p{
	padding-bottom: 1em;
}


@media only screen and (min-width : 43.5em){
	.nav2{
		display: flex;
	}
	.fa-bars{
		display: none;
	}
	.nav ul{
		display: flex;
		flex-direction: row;
		padding-top: 6em;
	}
	.fa-angle-up,.fa-angle-down{
		display: none;
	}
	.fa-angle-left{
		display: block;
		position: fixed;
		top:17em;
		left:40%;
		transform:translate(-50%,-50%);
		font-size: 3em;
		color: white;
		z-index: 40;
		opacity: .5;
		transition: all ease .5s;
	}
	.fa-angle-right{
		display: block;
		position: fixed;
		top:17em;
		left:60%;
		transform:translate(-50%,-50%);
		font-size: 3em;
		color: white;
		z-index: 40;
		opacity: .5;
		transition: all ease 0.5s;
		
	}
	.fa-angle-left:hover{
		opacity: 1;
	}
	.fa-angle-right:hover{
		opacity: 1;
	}
	.thumbnails{
		background-color:#FFF6E8;
		display: flex;
		flex-wrap: wrap;
		width:42.5em;
		margin:0 auto;
		padding-top: .5em;
		margin-bottom: 10em;
	}
	.prev-img{
		position: fixed;
		width: 0em;
		top:50%;
		left:18%;
		transform:translate(-50%,-50%);
		opacity: 0;
		transition: all ease 1.5s;
		z-index: 30;
		background-color: white;
	}
	.prev-img.show{
		width: 12em;
		opacity: 1;
}
	.prev-img>img{
		display: block;
		margin:auto;
		margin-top: .25em;
		margin-bottom:.25em;
		width: 95%;
	}

	.next-img{
		position: fixed;
		width: 0em;
		top:50%;
		left:82%;
		transform:translate(-50%,-50%);
		opacity: 0;
		transition: all ease 1.5s;
		z-index: 30;
		background-color: white;
	}
	.next-img.show{
		width: 12em;
		opacity: 1;
	}
	.next-img>img{
		display: block;
		margin:auto;
		margin-top: .25em;
		margin-bottom:.25em;
		width: 95%;
	}

	.popup-container{
		position: fixed;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		width: 0;
		opacity: 0;
		transition: all ease 1s;
		z-index: 30;
	}

	.popup-container.show{
		width: 25em;
		opacity: 1;
		z-index: 50;
	}
	.form-wrap{
		transform: translateY(10%);
		margin: 0 auto;
		width: 42.5em;
		background-color:rgba(255,255,255,0.85);

	}
	.booking-form{
		height: 65em;
		background-image: url(booking.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;	
	}

	.jotform-form ul{
		display: flex;
		flex-wrap: wrap;
	}
	.jotform-form ul li{
		display: flex;
	}
	.jotform-form ul li label{
		width: 50%;
	}
	
	#id_30{
		display: flex;
		flex-wrap: wrap;
	}
	#label_30{
		width: 100%;
	}
	#input_30{
		width: 100%;
	}
	#input_2{
		width: 100%;
	}
	.contact-content{
		font-size: 1.25em;
		padding: 2rem;
		border: thin #646664 solid;
		border-radius: .5rem;
		margin: 0 auto;
		width: 38.5rem;
		transform: translateY(5%);
	}

}
@media only screen and (min-width : 70em){
	header>.book{
		border-bottom-right-radius: .1em;
		right:50%;
		transform: translateX(31.75rem);
	}
	.nav2{
		margin:1em auto;
	}
	.nav2 ul{
		margin:auto;
	}

	.thumbnails{
		background-color:#FFF6E8;
		display: flex;
		flex-wrap: wrap;
		width:63.5em;
		height: 30em;
		margin:0 auto;
		padding-top: .5em;

	}

	.thumbnails img{
		flex:0 0 15%;
		display: block;
		height: 12.1em;
		margin-left: .5em;
		margin-bottom: .5em;
	}
	.prev-img{
		position: fixed;
		width: 0em;
		top:50%;
		left:20%;
		transform:translate(-50%,-50%);
		opacity: 0;
		transition: all ease 2s;
		z-index: 30;
		background-color: white;
	}
	.prev-img.show{
		width: 15em;
		opacity: 1;
	}
	.prev-img>img{
		display: block;
		margin:auto;
		margin-top: .25em;
		margin-bottom:.25em;
		width: 95%;
	}

	.next-img{
		position: fixed;
		width: 0em;
		top:50%;
		left:80%;
		transform:translate(-50%,-50%);
		opacity: 0;
		transition: all ease 2s;
		z-index: 30;
		background-color: white;
	}
	.next-img.show{
		width: 15em;
		opacity: 1;
	}
	.next-img>img{
		display: block;
		margin:auto;
		margin-top: .25em;
		margin-bottom:.25em;
		width: 95%;
	}

	.popup-container{
		position: fixed;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		width: 0;
		opacity: 0;
		transition: all ease 1s;
		z-index: 30;
	}

	.popup-container.show{
		width: 28em;
		opacity: 1;
	}
	.form-wrap{
		transform: translateY(10%);
		margin: 0 auto;
		width: 63.5em;
		background-color:#fff;

	}
	.booking-form{
		height: 65em;
		background-image: url(booking.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;	
	}

	.jotform-form ul{
		display: flex;
		justify-content: space-between;
		padding:2em 5em 2em 5em;
	}
	.jotform-form ul li{
		display: flex;
		justify-content: flex-start;
	}
	.jotform-form ul li label{
		width: 40%;
	}
	#input_30{
		width:40em;
		margin-top: 1em;
	}
		.contact-content{
		font-size: 1.5em;
		padding: 2rem;
		border: thin #646664 solid;
		border-radius: .5rem;
		margin: 0 auto;
		width: 59.5rem;
		transform: translateY(5%);
	}
	
}