/* 16.11.2022 */
@viewport{
  width: extend-to-zoom;
   zoom: 1.0; 
}

.copyright-string{}

#header-string{}

#strap-line{
	padding:0; 
  	margin:0; 
  	font:normal 15px/20px 'Montserrat', verdana, arial, sans-serif;
  	color:#fff; 
  	/* text-transform:uppercase; */
  	text-shadow: 2px 2px 5px #000;
}

@-ms-viewport{
  width: extend-to-zoom; 
   zoom: 1.0; 
}

html, body {
	font-family: 'Montserrat', sans-serif;
	font-size:100%; 
	padding:0; 
	margin:0; 
	background:#fff;
	min-width:320px;
}

body {
	font: 400 13px/2.0em 'Montserrat', Helvetica Neue, Helvetica, Arial;	/* required? */
}

#wrapper {
	width:100%; 
	position:relative; 
	transition:0s 1s;
}

table {
	font:normal 13px/18px 'Montserrat', verdana, arial, sans-serif;
	box-shadow:0 15px 10px -15px rgba(0,0,0,0.6);
	border-collapse:collapse;
	border-left: 1px solid #A7A37E;
	border-right: 1px solid #A7A37E;
	border-bottom: 1px solid #A7A37E;
}

#table-div {
	margin-left: 0px;
	margin-right: 0px;
}

td { 
	border-left: 0px solid #A7A37E;
	border-top: 1px solid #A7A37E;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}

th {
	font-weight: bold !important;
	/*
	background: url(images/gradient_bar.png) repeat-x;
	*/
	background-color: #93bead;
	/* 
	border-top: 1px solid #333333;
	border-bottom: 1px solid #333333; 
	*/
	padding-top: 3px;
	padding-bottom: 4px;
	padding-right: 10px;
	padding-left: 10px;	
	border-left: 0px solid #A7A37E;
	color: #FFF;
}

/* gradient horizontal rule, using css3, #66,00,00 = rgba( 102,0,0,1) */
hr.style-one {
	border: 0; 
	height: 1px; 
	/*
	background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,51,0,0.7), rgba(0,0,0,0)); 
	background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,51,0,0.7), rgba(0,0,0,0)); 
	background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,51,0,0.7), rgba(0,0,0,0)); 
	background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,51,0,0.7), rgba(0,0,0,0));
	*/
	background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(147,190,173,0.7), rgba(0,0,0,0)); 
	background-image: -moz-linear-gradient(left, rgba(0,0,0,0), rgba(147,190,173,0.7), rgba(0,0,0,0)); 
	background-image: -ms-linear-gradient(left, rgba(0,0,0,0), rgba(147,190,173,0.7), rgba(0,0,0,0)); 
	background-image: -o-linear-gradient(left, rgba(0,0,0,0), rgba(147,190,173,0.7), rgba(0,0,0,0));
}

.image-shadow {
	
	display: block; 
	margin-left: 10px; 
	margin-right: 20px;
	margin-bottom: 20px;
	float:left; 
	/*
	border:1px solid #ddd;
	*/
	box-shadow:0 15px 10px -15px rgba(0,0,0,0.6);
}

#activity-comment {
	padding-right: 20px;
	font: 'Montserrat', verdana, arial, sans-serif;
	font-size: 15px;
	font-weight: normal;
	color: #333;
}

.floatleft, .floatright {
	
	max-width: 365px;									/* no bigger than 400 pixels */
	display: block;
	margin: auto auto 1.5em;
	margin-top: 15px;
	margin-bottom: 15px;
	border:1px solid #ddd;
	/* drop shadow */
	box-shadow:0 15px 10px -15px rgba(0,0,0,0.6);
}

.floatleft {
	float: left;
	margin-right: 15px;
}

.floatright {
	float: right;	
	margin-left: 15px;
}

.greyed-text {
	color: #666;
}

.top-of-page-button, .book-your-room-button {
	background-color:#069;
	color: #FFF;
	text-decoration: none;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 7px;
	padding-right: 7px;
	border-radius: 4px;
	
	background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
	background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
	background-image: -o-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
	
	box-shadow: 0 15px 10px -15px rgba(0,0,0,0.6);
}

.book-your-room-button:before { content: "~ "; }
.book-your-room-button:after  { content: " ~"; }

.top-of-page a:hover {
	text-decoration: none;	
}

#google-map-frame {
	height: 500px;
	padding-left: 5px;
	padding-right: 5px;
	box-shadow: 0 15px 10px -15px rgba(0,0,0,0.6);
}

.email-no-underline a {
	text-decoration: none;
}

.email-no-underline a:hover {
	text-decoration: none;
}

#facebook-left-align {
	text-align: left;
	padding-top: 20px;
	padding-bottom: 20px;
}

#facebook-center-align {
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}

#sn_menu_icon,		/* hamburger button dimensions */
.sn_menu_open,
.sn_menu_close {
	width:41px; 
	height:41px; 
}

#sn_menu_icon {
	display:block; 
	position:absolute; 
	right:15px;	/* was 25px, moved left from it's original position, 06.01.2023 */ 
	top:25px; 
	z-index:100020;
}

#sn_menu_icon .sn_menu_open {
	display:block; 
	background:#93bead; 
	cursor:pointer;
}

#sn_menu_icon .sn_menu_close {
	display:none;  
	background:rgba(0,0,0,0); 
	cursor:pointer; 
	position:absolute; 
	left:0; 
	top:0; 
	z-index:10;
	}

#sn_menu_icon .sn_menu_open .bar,		/* 3 bars within the hamburger button */
.sn_menu_open .bar::before,
.sn_menu_open .bar::after {
	display:block;
	background:#fff;
	position:absolute;  
	width:17px; 
	height:3px; 
}

#sn_menu_icon .sn_menu_open .bar {
	left:12px; 
	top:19px; 
	transition: 
	background 0s 0.3s
}

#sn_menu_icon .sn_menu_open .bar::before {
	content:""; 
	left:0; 
	top:-6px; 
	transform-origin:left top; 
	transition: 0.3s;
}

#sn_menu_icon .sn_menu_open .bar::after {
	content:"";   
	left:0; 
	top:6px; 
	transform-origin:left bottom; 
	transition: 0.3s;
}

#sn_menu_panel {
	width:100%; 
	height:100%; 
	position:fixed; 
	left:-100%; 
	top:0; 
	z-index:100010; 
	transition:0.5s 1s; 
	display:flex; 
	flex-direction:row; 
	flex-wrap:wrap; 
	justify-content:space-between;
}

#sn_menu_panel #sn_menu_left {
	width:50%; 
	height:100%; 
	background:#93bead;
	background-size:cover;
  	display:flex; 
	flex-direction:column; 
	flex-wrap:nowrap; 
	justify-content:center;
}

#sn_menu_panel #sn_menu_left h1 {
	text-align:center; 
	font:800 35px 'Montserrat', verdana, arial, sans-serif;
	/*  color:#3bc; */
	color: #000;
}

#sn_menu_panel #sn_menu_left #social {
	text-align:center; 
	width:100%;
}

#sn_menu_panel #sn_menu_left .social {
	/* color:#ccc;  */
	color: #000;
	display:inline-block; 
	font-size:20px; 
	margin:5px; 
	transition:0.2s;
}

#sn_menu_left a {
	/* color: #FFF;	 */
	color: #000;
}

#sn_menu_panel #sn_menu_left .social:hover {
	/* color:#ccc; */
	color: #000;
}

#sn_menu_panel #sn_menu_left p {
	font:300 14px/25px 'Montserrat', verdana, arial, sans-serif;
	/* color:#999; */
	color: #000;
	text-align:center;
}

#sn_menu_panel #sn_menu_right {
	order:2; 
	width:50%; 
	height:100%; 
	background:#fff; 
	font:400 'Montserrat', verdana, arial, sans-serif;
	color:#aaa; 
	overflow-y:auto; 
	-webkit-overflow-scrolling: touch;
	display:flex; 
	flex-direction:column; 
	flex-wrap:nowrap; 
	justify-content:center;
}

#sn_menu_panel #sn_menu_right .social {
	color:#aaa; 
	display:inline-block; 
	font-size:20px; 
	margin:5px; 
	width:25px; 
	text-align:left;
}

input[id*="sn_menu"] {display:none;}

#sn_menu_panel #sn_menu_right .menubox {
	width:98%; 
	max-width:300px; 
	margin:0 auto;
}
	
#sn_menu_panel #sn_menu_right .menubox p {
	padding:0 0 0 90px; 
	margin:0; 
	height:0; 
	overflow:hidden; 
	font:300 'Montserrat', verdana, arial, sans-serif;
	font-size: 25px;
	transition:0.5s;
}

#sn_menu_panel #sn_menu_right .menubox p a {
	text-decoration:none; 
	color:#999;
}

#sn_menu_panel #sn_menu_right .menubox p a:hover {
	color:#000;
	/* font-weight: bold; */
}

/* hamburger button */
input[class*="ip01"]:checked ~ #wrapper {height:100%; overflow:hidden; transition:0s;}
input[class*="ip01"]:checked ~ #sn_menu_icon {position:fixed;}
input[class*="ip01"]:checked ~ #sn_menu_icon .sn_menu_open .bar {background:transparent; transition:0s;}
input[class*="ip01"]:checked ~ #sn_menu_icon .sn_menu_open .bar::before {transform: rotate(45deg); width:18px; left:3px;}
input[class*="ip01"]:checked ~ #sn_menu_icon .sn_menu_open .bar::after {transform: rotate(-45deg); width:18px; left:3px;}
input[class*="ip01"]:checked ~ #sn_menu_icon .sn_menu_close {display:block;}
input[class*="ip01"]:checked ~ #sn_menu_panel {left:0; transition:0.5s;}

input[class*="ipXX"]:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_0 p,
input[class*="ip00"]:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_0 p {
	height:55px;	/* value 1 */
}

input#sn_menu_0:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_0 p,
input#sn_menu_1:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_1 p,
input#sn_menu_2:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_2 p,
input#sn_menu_3:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_3 p,
input#sn_menu_4:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_4 p,
input#sn_menu_2_1:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_2_1 p,
input#sn_menu_2_2:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_2_2 p,
input#sn_menu_2_3:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_2_3 p,
input#sn_menu_2_1_1:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_2_1_1 p,
input#sn_menu_4_1:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_4_1 p,
input#sn_menu_4_2:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_4_2 p,
input#sn_menu_4_1_1:checked ~ #sn_menu_panel #sn_menu_right .sn_menu_4_1_1 p {
	height:55px		/* keep this equal to value 1 above */
}

li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9 {
	list-style-type: decimal !important; 
	font: 'Montserrat', verdana, arial, sans-serif;
	font-size: 16px;
	font-weight: normal;
	color:#999 !important;
}

#info p ul li a {
	font-size: 100px;
}

#wrapper {
	text-align:center;
}

/* page header */

header {
  height:80px; 
  position:absolute; 
  width:100%; 
  top:0; 
  left:0; 
  background-color: #93bead;	  /* duke william background */
  z-index:100002; 
  text-align:center; 
  backface-visibility: hidden;
}

.menus header {background:#93bead;}		/* duke william background, header colour */

header a {
	text-decoration: none;	
}

header img {
  display:block; 
  position:absolute; 
  left:10px; 
  top:10px;
}

header h1 {
  padding:15px 0 0 0; 
  margin:0; 
  font: 'Montserrat', verdana, arial, sans-serif;
  font-size: 30px;
  font-weight: normal;
  font-style: normal;
  color:#fff;
  text-shadow: 2px 2px 5px #000;
}



header p {
  padding:6px; 
  margin:0;
  font-family: 'Montserrat', verdana, arial, sans-serif;
  font-size: 18px;
  color:#fff; 
  /* text-transform:uppercase; */
  text-shadow: 2px 2px 5px #000;
}

/* end of page header */

#tutorial {
	padding-top:110px;		/* was 160px */ 
	padding-bottom:30px;
}

#info {
	max-width:750px; 
	padding:0 10px 20px 10px;	/* 20px from the bottom/footer */ 
	display:inline-block; 
	vertical-align:top; 
	text-align:left; 
	background:#fff;
	/* background:#CCC; */
}

#info {*display:inline;}

#info h1 {
	padding: 0;
	margin: 0;
	color: #000;
	font-family: 'Montserrat', verdana, arial, san-serif;
	font-size: 22px;
	font-style: normal;
	line-height: 30px;
	font-weight: normal;
	font-variant: normal;
}

#info h2 {
	color: #000;
	margin: 0;
	padding-top: 5px;
	text-align: left;
	font-family: normal 20px/25px 'Montserrat', verdana, arial, san-serif;
	font-weight: normal;
	font-variant: normal;
}

#info h2 a {
	color:#c00; 
	text-decoration:none;
}

#info h3 {
	color: #000;
	margin: 0;
	padding-top: 5px;
	padding-bottom: 15px;
	text-align: left;
	font-family: 'Montserrat', verdana, arial, san-serif;
	font-size: 13px;
	text-align: center;
	font-weight: normal;
	font-variant: normal;	
}

#info h4 {
	padding:0; 
	margin:0; 
	font:normal 20px/25px 'Montserrat', verdana, arial, sans-serif;
	color:#000;
}

#info h5 {
	padding:0; 
	margin:0; 
	font:normal 16px/20px 'Montserrat', verdana, arial, sans-serif;
	color:#000;
}

#info h5.date {
	color:#069;
}

#info p {
	padding:10px 0; 
	margin:0; 
	font: 'Montserrat', verdana, arial, sans-serif;
	font-size:15px;
	color:#333;
}

#info p a.link,
#info p a.link:visited {
	color:#c00;
}

#info ul {
	list-style-type: none;
}

#info li::before {
	content: "»";  				/* Add content: \2022 is the CSS Code/unicode for a bullet */
	font-size: 200%;
  	color: #93bead; 			/* Change the color */
  	font-weight: bold; 			/* If you want it to be bold */
  	display: inline-block; 		/* Needed to add space between the bullet and the text */
  	width: 1em; 				/* Also needed for space (tweak if needed) */
  	margin-left: -1em; 			/* Also needed for space (tweak if needed) */	
}

.center-img-container{
    text-align:center;
    /*
	border:1px solid #666;
	*/
}

.center-img{
    display:inline-block;
    margin:0px 5px;
    padding:0px;  
    /*
	border:1px solid #CCC;
	*/
}

#centred-div {
	display: flex;
	justify-content: center;
}

.footer {
	text-align:center;
	background-color: #93bead;	  /* duke william background */
}

.footer p {
	padding:10px 0; 
	margin:0; 
	font-family: 'Montserrat', verdana, arial, sans-serif;
	font-size: 16px;
	color:#FFF;
	text-shadow: 2px 2px 5px #000;
}

/*
#info h3.smartphone {
	padding:0; 
	margin:30px 0; 
	font:normal 20px/25px 'Montserrat', verdana, arial, sans-serif; 
	color:#c00; 
	display:none;
}
*/

/*
.numberlist li {
	padding:2px 0; 
	margin:0; 
	font:normal 15px/18px 'Montserrat', verdana, arial, sans-serif; 
	color:#333;
}
*/

@media only screen and (max-width:1150px) {
}

@media only screen and (max-width:1024px)and(orientation:portrait)
{
	#sliderFrame {
		display: none;
	}
}

/* tablets, portrait mode */
@media only screen and (max-width: 840px)	
{
	#sliderFrame {
		display: none;
	}
	
	header h1 {
    	font-size: 20px;
	}
}

@media only screen and (max-width: 640px)
{
	/*
	#header #sn_menu_icon {
		right:15px;
	}
	*/

	#sn_menu_panel #sn_menu_left {
		width:0; 
		display:none;
	}

	#sn_menu_panel #sn_menu_right {
		width:100%; 
		min-width:320px;
	}

	#sliderFrame{
		display: none;
	}
}

/* mobiles */
@media only screen and (max-width:480px) {

	header {position:absolute;}
	ul.main {position:absolute;}
	span.break {display:block;}

	header h1 {
    	font-size: 18px;	/* is normally 20px */
	}
}

@media only screen and (max-width:320px) 
{
/* #info .top-banner h1 {font:normal 13px/16px 'Montserrat', arial, sans-serif;} */
}

@media only screen and (min-width:320px) {
/*.adslot_1 {width:300px; height:250px; margin:0 auto;} */

/*
.width480 {display:none;}
.width800 {display:none;}
.width320 {display:block;}
*/
}

@media only screen and (min-width:480px) {
/* .adslot_1 {width:468px; height:60px; margin:0 auto;} */

/*
.width480 {display:block;}
.width800 {display:none;}
.width320 {display:none;}
*/
}

@media only screen and (min-width:760px) {
/* .adslot_1 {width:728px; height:90px; margin:0;} */

/*
.width480 {display:none;}
.width800 {display:block;}
.width320 {display:none;}
*/
}


#info .webmaster
{
	color: #F00;
	font-size:12px;
	font-family: 'Montserrat', sans-serif;
	font-style:italic;
}

#payment-details {
	text-align: center;
	padding-top: 10px;
	margin-left: 20px;
	margin-right: 20px;
	padding-bottom: 10px;	
}