body, html {height: 100%;}
body {margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; color: #fff; background: #75c2e4;}

#HeaderAreaImage {height: 361px; box-sizing: border-box; position: fixed; top: 0; left: 0; width: 100%; z-index: -1000;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
#HeaderAreaImage div {position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-repeat: no-repeat; background-size: cover; background-position: center center;
	-ms-transition: opacity 1.5s ease-in; -webkit-transition: opacity 1.5s ease-in; -moz-transition: opacity 1.5s ease-in; -o-transition: opacity 1.5s ease-in; transition: opacity 1.5s ease-in;
}

#PageContainer {min-height: 100%;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
	align-items: stretch;
	width: 100%;
}

#HeaderContainer {background: #000 url(/images/area/default_2015.jpg) no-repeat; background-position: top center; background-size: 100% auto;
	max-width: 336px; min-width: 200px;
	-webkit-flex: 1;
	flex: 1;
}

#ContentContainer {background: #fff; margin-top: 360px; position: relative;
	flex: auto;
	-webkit-flex: 2;
	flex: 2;
}

#Logo {
	background: rgba(195, 8, 114, 0.80);
	background: -o-linear-gradient(top,  rgba(195,8,114,1) 1%,rgba(195,8,114,0) 40%), -o-linear-gradient(left,  rgba(219,9,128,0.8) 0%,rgba(195,8,114,0.8) 100%);
	background: -ms-linear-gradient(top,  rgba(195,8,114,1) 1%,rgba(195,8,114,0) 40%), -ms-linear-gradient(left,  rgba(219,9,128,0.8) 0%,rgba(195,8,114,0.8) 100%);
	background: linear-gradient(to bottom,  rgba(195,8,114,1) 1%,rgba(195,8,114,0) 40%), linear-gradient(to right,  rgba(219,9,128,0.8) 0%,rgba(195,8,114,0.8) 100%);
	height: 200px;
	line-height: 200px;
	text-align: center;
}
#Logo img {width: 74%; vertical-align: middle;}

#HeaderDetails {
	background: -o-linear-gradient(left,  rgba(165,121,98,0.8) 0%,rgba(147,108,87,0.8) 100%);
	background: -ms-linear-gradient(left,  rgba(165,121,98,0.8) 0%,rgba(147,108,87,0.8) 100%);
	background: linear-gradient(to right,  rgba(165,121,98,0.8) 0%,rgba(147,108,87,0.8) 100%);
	font-size: 14.5px; line-height: 21px; text-align: center; padding: 19px 0; text-shadow: 0 1px 3px #876350;
}
#HeaderDetails a:link, #HeaderDetails a:visited {color: #fff; text-decoration: none;}
#HeaderDetails a:hover {color: #fff; text-decoration: underline;}

#MenuButton {display: none; font-size: 14.5px;}

#Menu {font-size: 26px; font-weight: bold; text-align: right; text-shadow: 0 2px 10px rgba(37,17,0,0.3);
	background: -o-linear-gradient(left,  rgba(244,126,24,0) 40%,rgba(244,126,24,0.4) 100%);
	background: -ms-linear-gradient(left,  rgba(244,126,24,0) 40%,rgba(244,126,24,0.4) 100%);
	background: linear-gradient(to right,  rgba(244,126,24,0) 40%,rgba(244,126,24,0.4) 100%);
}
#Menu a {-webkit-transition: padding-right 0.3s linear; -moz-transition: padding-right 0.3s linear; -o-transition: padding-right 0.3s linear; transition: padding-right 0.3s linear;}
#Menu a:link, #Menu a:visited {color: #fff; text-decoration: none;}
#Menu a:hover {color: #fff; text-decoration: none; -webkit-transition: padding-right 0.1s linear; -moz-transition: padding-right 0.1s linear; -o-transition: padding-right 0.1s linear; transition: padding-right 0.1s linear; padding-right: 5px;}

#Menu ul {margin: 0 13% 0 0; padding: 40px 0;}
#Menu li {list-style-type: none; margin: 0; padding: 6px 0 7px 0;}

.MnuItmOn a {border-bottom: 3px solid #75c2e4;}

#HeaderSocial {
	background: rgba(195, 8, 114, 0.80);
	background: -o-linear-gradient(left,  rgba(219,9,128,0.8) 0%,rgba(195,8,114,0.8) 100%);
	background: -ms-linear-gradient(left,  rgba(219,9,128,0.8) 0%,rgba(195,8,114,0.8) 100%);
	background: linear-gradient(to right,  rgba(219,9,128,0.8) 0%,rgba(195,8,114,0.8) 100%);
	text-align: center;
	padding: 16px 0;
}
#HeaderSocial a:link, #HeaderSocial a:visited, #HeaderSocial a:hover {color: #fff;}

@font-face {
	font-family: 'amanoregular';
	src: url('/styles/fonts/amano-webfont.eot');
	src: url('/styles/fonts/amano-webfont.eot?#iefix') format('embedded-opentype'),
			url('/styles/fonts/amano-webfont.woff2') format('woff2'),
			url('/styles/fonts/amano-webfont.woff') format('woff'),
			url('/styles/fonts/amano-webfont.ttf') format('truetype'),
			url('/styles/fonts/amano-webfont.svg#amanoregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

.HeaderSocialIcon {border-radius: 5px; display: inline-block; vertical-align: middle; width: 50px; height: 50px; margin-left: 17px;
	background-image: url(/images/site/icons.svg); background-repeat: no-repeat; background-size: 200px 50px;
	-webkit-transition: background-color 1s linear; -moz-transition: background-color 1s linear; -o-transition: background-color 1s linear; transition: background-color 1s linear;
}
.HeaderSocialIcon:hover {
	background-color: #75c2e4;
	-webkit-transition: background-color 0.1s linear; -moz-transition: background-color 0.1s linear; -o-transition: background-color 0.1s linear; transition: background-color 0.1s linear;
}
.HeaderSocialIcon span {display: none;}
#HeaderSocialIconFacebook {background-position: 0 center; margin-left: 0 !important;}
#HeaderSocialIconInstagram {background-position: -50px center;}
#HeaderSocialIconTripadvisor {background-position: -100px center;}
#HeaderSocialIconYelp {background-position: -150px center;}

#HeaderSocial div {padding-bottom: 16px; font-size: 14.5px;}

#PageTitle {left: 0; line-height: 40px; margin: 0; padding: 22px 0 18px 0; position: absolute; right: 0; top: -80px; text-shadow: 0 2px 10px rgba(0,15,37,0.5); font-weight: normal; font-size: 40px; font-family: 'amanoregular';
	-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
	background: rgba(117,194,228,0.75);
	background: -o-linear-gradient(left,  rgba(117,194,228,0.75) 50%,rgba(117,194,228,0.37) 100%), -o-linear-gradient(top,  rgba(0,0,0,0) 55%,rgba(0,0,0,0.09) 65%,rgba(0,0,0,0.5) 100%);
	background: -ms-linear-gradient(left,  rgba(117,194,228,0.75) 50%,rgba(117,194,228,0.37) 100%), -ms-linear-gradient(top,  rgba(0,0,0,0) 55%,rgba(0,0,0,0.09) 65%,rgba(0,0,0,0.5) 100%);
	background: linear-gradient(to right,  rgba(117,194,228,0.75) 50%,rgba(117,194,228,0.37) 100%), linear-gradient(to bottom,  rgba(0,0,0,0) 55%,rgba(0,0,0,0.09) 65%,rgba(0,0,0,0.5) 100%);
}
#PageTitle div, #PageContent {margin: auto; max-width: 760px; padding: 0 15%;}
#PageContent {color: #936c57; font-size: 1.125em; padding-bottom: 1px; padding-top: 1em;}
#PageContent a {-webkit-transition: color 1s linear; -moz-transition: color 1s linear; -o-transition: color 1s linear; transition: color 1s linear;}
#PageContent a:hover {-webkit-transition: color 0.1s linear; -moz-transition: color 0.1s linear; -o-transition: color 0.1s linear; transition: color 0.1s linear;}

#PageContent a:link, #PageContent a:visited, #PageContent a:hover {text-decoration: none;}
#PageContent a:link {color: #c30872;}
#PageContent a:visited {color: #a70764;}
#PageContent a:hover {color: #75c2e4;}

#PageContent img {max-width: 100%; height: auto;}
.OutsetImage img {width: 100%; height: auto; border-radius: 5px;}
.RightImage {max-width: 40% !important; border-radius: 5px; margin-left: 1.25em; margin-bottom: 0.75em; float: right;}

#Blackboard {
	text-shadow: 1px 1px 2px #000;
	float: right;
	color: #fff;
	background: #222 url(/images/site/blackboard_bg.jpg) no-repeat top;
	width: 30%;
	min-width: 182px;
	min-height: 100px;
	padding: 3px;
	margin: -170px -50px 8px 10px;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.5);
	font-size: 0.8em;
	-ms-transform: rotate(2deg); -moz-transform: rotate(2deg); -webkit-transform: rotate(2deg) translate3d(0,0,0); -o-transform: rotate(2deg); transform: perspective(1px) rotate(2deg);
}
#BlackboardBorder {border: 1px solid #999; padding: 10px 12px 0 12px; border-radius: 2px; position: relative;}
#Blackboard h3 {text-align: center; font-weight: normal; font-family: 'amanoregular'; font-size: 1.7em; margin: 0; color: #75c2e4;}
#BlackboardContent p {padding: 0 !important; margin: 11px 0 0 0;}
#BlackboardUpdated {padding-top: 12px; padding-bottom: 9px; font-size: 9px; text-align: center; color: #999;}

#FooterToTop {
	clear: both;
	display: block; box-sizing: border-box;
	background: transparent url("/images/site/page_end.svg") no-repeat scroll center center / 100% auto;
	width: 150px; height: 75px; margin: 40px auto; padding: 12px 0 0 14px; text-decoration: none;
	font-size: 0.8em;
}
#FooterToTop:link, #FooterToTop:visited {color: #75c2e4 !important;}
#FooterToTop:hover {color: #c30872 !important;}


/* Gallery styles */

.Gallery {text-align: center;}
.GalleryThumb {display: inline-block; width: 21%; margin: 0 10px; padding-top: 6px; vertical-align: top;}
.GalleryThumb > div {padding: 10px 0; font-size: 0.75em;}
.GalleryImage {margin-bottom: 10px; overflow-x: auto;}
.Gallery img {width: 100%; padding-top: 0 !important; border: 1px solid #75c2e4; box-shadow: 0 4px 7px rgba(0, 0, 0, 0.2); border-radius: 5px;}


/* Contact */

.ContactItem {padding: 0.375em 0;}
#ContactForm label {box-sizing: border-box; display: inline-block; font-weight: bold; padding: 0.25em 0.375em 0.25em 0; text-align: right; vertical-align: top; width: 30%;}
#ContactForm label span {padding-right: 0.25em; color: #75c2e4;}
#ContactForm textarea {box-sizing: border-box; font-family: inherit; font-size: inherit; padding: 0.25em; width: 60%;}
#ContactForm input {padding: 0.25em; font-family: inherit; font-size: inherit;}
#ContactSubmit {text-align: right; box-sizing: border-box; width: 90%;}



/* Responsive adjustments */

@media screen and (max-width: 1080px) {
	.GalleryThumb {width: 28%;}
	.GalleryThumb > div {font-size: 0.65em;}
}

@media screen and (max-width: 840px) {
	#HeaderDetailsLocation {font-size: 12px;}
	#HeaderSocial div {padding-bottom: 10px; font-size: 12px;}
	.HeaderSocialIcon {margin-left: 10px; width: 43px; height: 43px; background-size: 172px 43px;}
	#SocialIconFacebook {background-position: 0 center; margin-left: 0 !important;}
	#HeaderSocialIconInstagram {background-position: -43px center;}
	#HeaderSocialIconTripadvisor {background-position: -86px center;}
	#HeaderSocialIconYelp {background-position: -129px center;}

	.OutsetImage {margin-left: -15%; margin-right: -15%;}

	.GalleryThumb {width: 40%;}

	#ContactForm label {width: auto;}
	#ContactForm label span {float: right; padding-left: 0.25em;}
	#ContactForm textarea {width: 100%;}
	#ContactSubmit {width: 100%; text-align: center;}
	#ContactForm textarea, #ContactForm input {display: block;}
	#ContactSubmit input {display: inline;}
}
@media screen and (max-width: 720px) {
	#Logo img {width: 84%;}
	#HeaderDetailsLocationPostcode, #HeaderSocialFindUs {display: none;}
	#Menu ul {margin: 0 8% 0 0;}

	.HeaderSocialIcon {margin-left: 6px; width: 37px; height: 37px; background-size: 148px 37px;}
	#SocialIconFacebook {background-position: 0 center; margin-left: 0 !important;}
	#HeaderSocialIconInstagram {background-position: -37px center;}
	#HeaderSocialIconTripadvisor {background-position: -74px center;}
	#HeaderSocialIconYelp {background-position: -111px center;}

	#Blackboard {font-size: 0.7em;min-width: 172px;}
	#Blackboard h3 {font-size: 1.6em;}
}
@media screen and (max-width: 600px) {
	#PageContainer {display: block;}
	#HeaderContainer {max-width: none; background: none;}
	#ContentContainer {margin-top: 140px;}

	#Logo {height: 90px; line-height: 90px; text-align: left; padding-left: 12px;}
	#Logo img {width: auto; height: 90%;}
	#HeaderDetails {padding: 6px 0; -webkit-backdrop-filter: blur(5px);}
	#HeaderDetails div {padding: 0 12px; display: inline-block;}
	#HeaderDetailsLocation, #MenuButtonToggle {font-size: 13px;}
	#HeaderDetailsLocationPostcode {display: inherit;}
	#HeaderSocial {position: absolute; top: 0; right: 14px; background: none; text-align: right;}

	.HeaderSocialIcon {margin-left: 5px; width: 32px; height: 32px; background-size: 128px 32px;}
	#SocialIconFacebook {background-position: 0 center; margin-left: 0 !important;}
	#HeaderSocialIconInstagram {background-position: -32px center;}
	#HeaderSocialIconTripadvisor {background-position: -64px center;}
	#HeaderSocialIconYelp {background-position: -96px center;}

	#Menu {text-align: center; font-size: 16px; text-shadow: 0 1px 5px rgba(255, 255, 255, 0.7);
		background: rgba(255,255,255,0.9);
		background: -o-linear-gradient(left,  rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.9) 50%);
		background: -ms-linear-gradient(left,  rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.9) 50%);
		background: linear-gradient(to right,  rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.9) 50%);
	}
	#Menu a {padding: 0 10px; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none;}
	#Menu a:link, #Menu a:visited {color: #3c1b00;}
	#Menu a:hover {-webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; padding-right: 10px; color: #c30872;}
	#Menu ul {margin: 0; padding: 0;}
	#Menu li {display: inline-block;}

	#HeaderAreaImage {height: 300px;}
	#Blackboard {margin: -110px -38px 8px 10px;}

	#PageTitle {padding: 6px 0 2px 0; font-size: 30px; top: -48px;}
	#PageTitle div {padding: 0 10%;}
	#PageContent {padding: 1px 10%;}
	.OutsetImage {margin-left: -10%; margin-right: -10%;}
	#FooterToTop {margin: 20px auto;}
}
@media screen and (max-width: 490px) {
	#Logo {height: 80px; line-height: 86px; padding-left: 9px;
		background: rgba(195, 8, 114, 0.80);
	background: -o-linear-gradient(top,  rgba(195,8,114,1) 1%,rgba(195,8,114,0) 100%), -o-linear-gradient(left,  rgba(219,9,128,0.5) 0%,rgba(195,8,114,0.5) 100%);
	background: -ms-linear-gradient(top,  rgba(195,8,114,1) 1%,rgba(195,8,114,0) 100%), -ms-linear-gradient(left,  rgba(219,9,128,0.5) 0%,rgba(195,8,114,0.5) 100%);
	background: linear-gradient(to bottom,  rgba(195,8,114,1) 1%,rgba(195,8,114,0) 100%), linear-gradient(to right,  rgba(219,9,128,0.5) 0%,rgba(195,8,114,0.5) 100%);
	}
	#Logo img {height: 102%;}
	#HeaderSocial {padding-top: 11px;}

	.MnuItmOn a {border-bottom: 0; color: #fff !important;
		background: rgba(195, 8, 114, 0.9) !important;
		background: -o-linear-gradient(top,  rgba(219,9,128,0.9) 0%,rgba(195,8,114,0.9) 100%) !important;
		background: -ms-linear-gradient(top,  rgba(219,9,128,0.9) 0%,rgba(195,8,114,0.9) 100%) !important;
		background: linear-gradient(to bottom,  rgba(219,9,128,0.9) 0%,rgba(195,8,114,0.9) 100%) !important;
	}

	#Menu {background: none; font-weight: normal;}
	#Menu li {padding: 0; box-sizing: border-box;}
	#Menu a {display: block; padding: 6px 0 5px 0 !important;
		background: rgba(255,255,255,0.9);
		background: -o-linear-gradient(left,  rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.9) 50%);
		background: -ms-linear-gradient(left,  rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.9) 50%);
		background: linear-gradient(to right,  rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.9) 50%);
	}
	#Menu a:hover {color: #fff !important;
		background: rgba(117, 194, 228, 0.9);
		background: -o-linear-gradient(top,  rgba(131,218,255,0.9) 0%,rgba(117,194,228,0.9) 100%);
		background: -ms-linear-gradient(top,  rgba(131,218,255,0.9) 0%,rgba(117,194,228,0.9) 100%);
		background: linear-gradient(to bottom,  rgba(131,218,255,0.9) 0%,rgba(117,194,228,0.9) 100%);
	}
	#Menu li:nth-child(1), #Menu li:nth-child(2), #Menu li:nth-child(3) {width: 33.3333%; border-bottom: 1px solid #fff;}
	#Menu li:nth-child(4), #Menu li:nth-child(5) {width: 50%;}
	#Menu li:nth-child(1), #Menu li:nth-child(2), #Menu li:nth-child(4) {border-right: 1px solid #fff;}

	#HeaderDetails {padding: 4px 0; margin-right: 60px; line-height: 19px;}
	#HeaderDetails div {padding: 0 4px;}
	#MenuButton {display: block; background-color: rgba(60, 27, 0, 0.8); right: 0; top: 80px; padding: 4px 0; line-height: 19px; width: 60px; position: absolute; cursor: pointer; background-repeat: no-repeat; background-image: url(/images/site/menu_button.svg); background-size: 60px 47px; text-align: center; -webkit-backdrop-filter: blur(5px);}
	#MenuButton div {display: inline-block; visibility: hidden;}

	#Menu {visibility: hidden;}
	.MenuActivated {visibility: visible !important;}
	.MenuButtonActivated {background-color: rgba(117, 194, 228, 0.8) !important;}

	#HeaderAreaImage {height: 332px;}

	#Blackboard {font-size: 0.6em; min-width: 132px; margin: -110px -4px 8px 10px;}
	#Blackboard h3 {font-size: 1.5em;}

	#PageContent {padding: 1px 16px;}
	.OutsetImage {margin-left: -16px; margin-right: -16px;}
	.OutsetImage img {border-radius: 0;}
	#PageTitle {
		background: rgba(117,194,228,0.75);
		background: -o-linear-gradient(left,  rgba(117,194,228,0.75) 30%,rgba(117,194,228,0.1) 90%), -o-linear-gradient(top,  rgba(0,0,0,0) 55%,rgba(0,0,0,0.09) 65%,rgba(0,0,0,0.4) 100%);
		background: -ms-linear-gradient(left,  rgba(117,194,228,0.75) 30%,rgba(117,194,228,0.1) 90%), -ms-linear-gradient(top,  rgba(0,0,0,0) 55%,rgba(0,0,0,0.09) 65%,rgba(0,0,0,0.4) 100%);
		background: linear-gradient(to right,  rgba(117,194,228,0.75) 30%,rgba(117,194,228,0.1) 90%), linear-gradient(to bottom,  rgba(0,0,0,0) 55%,rgba(0,0,0,0.09) 65%,rgba(0,0,0,0.4) 100%);
	}
	#PageTitle div {padding: 0 16px;}
}