#intro,
	#summary-intro,
	#sub-nav ul,
	#sub-nav ul li,
	#more-about > div > *:not(.img),
	#more-about,
	#more-about > div,
	#gallery {
		display:flex;
		display:-webkit-flex;
	}	
		
	
	.bnr {
		border:none;	
		overflow-y: hidden;
		position: relative;
	}
	
	
	.bnr > .screen_tint {
		backdrop-filter: brightness(0.8);
		height: 100%; 
		margin: 0px;
	}
	
	
	
	.news_group .article.calendar h3 {
		color: #ab0701;
	}	

	
	

	#gallery {
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
	}	
	
	
	section#intro,
	section#summary-intro {
		text-align: left;
	}

		
	

	.loc_page,
	.loc_placemark {
		align-items: center;
		-webkit-align-items: center;
		min-width:70px;
	}
	
	
	
	
	
	
	#sub-nav {
		background-color: #f9f7f5;
		padding:0px 10vw;
	}
	
	#sub-nav.on {
		background-color: #fff;
		box-shadow: 0px 10px 10px rgb(100 100 100 / 5%);
		position:fixed;
		top: 80px;
		z-index: 99;
	}
	
	#sub-nav.on ul {
		border: 0px solid transparent;
		margin-bottom:0px;
	}
	
	#sub-nav.on + #intro,
	#sub-nav.on + #reservations {
		margin-top: 65px;
	}
	
	#sub-nav ul {
		border-bottom: 1px solid #dfd8c3;
		list-style:none;
		padding: 0 10px;
		z-index: 999;
	}
	
	#sub-nav ul,
	#sub-nav ul li {
		transition:all .4s;
		-webkit-transition:all .4s;
	}
	
	#sub-nav ul li {
		border-bottom:3px solid transparent;
		cursor:pointer;
		font-family: Gantari, arial, helvetica;
		font-size:14px;
		height:100%;
		letter-spacing:1px;
		padding: 17px 10px 12px 10px;
		text-transform:uppercase;
	}
	
	#sub-nav ul li.active,
	#sub-nav ul li:hover {
		border-bottom:3px solid #e7cd7d;
		color: #bb7000;
	}
	
	
	
	
	#intro .container {
		padding-bottom:3vw;
		padding-top:3vw;
	}
	
	/*#intro p:last-of-type {
		margin-bottom:0px;
	}*/
	



	#intro .btn,
	#more-about .btn,
	#summary-intro .btn {
		border: 2px solid #333;
		font-size: 1em;
		font-family: 'Radio Canada Big';
		font-weight: 600;
		margin-top: 20px;
		min-width: 50%;
		padding: 10px 15px;
		width:auto;
	}
	
	
	#top_banner h1 {
		font-size: 4rem;
	}
	
	

	#more-about,
	#more-about > div,
	#more-about > div.img_bg1 > *:not(.img),
	#more-about > div.img_bg2 > * {
		flex-direction:column;
		-webkit-flex-direction:column;
	}
	
	#more-about > div.img_bg1 {
		flex-direction:row;
		-webkit-flex-direction:row;
		background-color: #fff;
	}

	#more-about > div.img_bg1:nth-child(odd) {
		flex-direction: row-reverse;
		-webkit-flex-direction: row-reverse;
	}

	#sub-nav ul,
	#more-about > div {
		align-items:center;
		-webkit-align-items:center;
		justify-content:center;
		-webkit-justify-content:center;
	}

	#more-about {
		margin-top: 30px;
		padding: 20px;
	}

	#more-about > div {
		margin-bottom:calc(20px + 1vw);
	}
	
	#more-about > div.img_bg1 > *:not(.img) {
		height:100%;
		padding-bottom:3vw;
		padding-top:3vw;
	}
	
	#more-about img {
		max-width:100%;
	}
	
	#more-about div ul {
		font-size:inherit;
		text-align:left;
	}
	
	#more-about div ul li {
		font-size:inherit;
	}
	
	
	
	
	
	#intro p,
	#intro ul,
	#summary-intro p,
	#more-about p,
	#more-about div > ul,
	#more-about div > table {
		font-size: calc(0.9em + 0.3vw);
	}

	#intro h2,
	#summary-intro h2 {
		font-size: calc(3em + 1vw);
	}
	
	#intro p,
	#summary-intro p,
	#outro p {
		font-size: calc(20px + 0.4vw);
	}

	#more-about h3 {
		color: #240033;
		font-size: calc(1.9em + 0.5vw);
	}
	
	#intro p,
	#summary-intro p,
	#more-about p {
		margin-bottom: calc(0.5em + 0.5vw);
	}
	
	/*#intro li,
	#summary-intro li,
	#more-about li {
		margin-top: calc(0.5em + 0.5vw);
	}*/


	section#summary-intro {
		-webkit-justify-content: center;
		justify-content: center;
		border-bottom: 1px solid var(--pale-sky);
		margin-left: 7vw;
		margin-bottom: 2vw;
		padding-bottom: 2vw;
		padding-top: 1vw;
		width: calc(100% - 14vw);
	}


	#intro h2,
	#summary-intro h2,
	#more-about .img_bg1 h3,
	#more-about > div.img_bg2 > *.col_b {
		margin-bottom: 15px; 
	}
		
	#more-about div > table *  {
		font-size:inherit;
	}



	
	#gallery {
        flex-direction:row;
        -webkit-flex-direction:row;
		justify-content: center;
		-webkit-justify-content: center;
		padding-bottom: 30px;
		padding-top:30px;
	}
	
	#gallery picture {
		height:450px;
		margin: 1px;
		overflow:hidden
	}
	
	#gallery picture,	
	#gallery picture > img {
        max-width:450px;
		object-fit:cover;
	}
	
	#summary-intro picture, 
	#summary-intro picture img {
		object-fit: contain;
	}

	

	.panes .explainer .btn.calendar {
		border:2px solid #d9d4c9;
		margin-top: 0px;
		margin-bottom:20px;
		padding: 15px calc(15px + 0.4vw);
		width: 50%;
	}
	
	
	


	.btn.ani {
		flex-direction: column;
		-webkit-lex-direction: column;
		align-items: center;
		-webkit-align-items: center;
		justify-content: center;
		-webkit-justify-content: center;
		background-color: #03b;
		border: 2px solid #fff;
		color: var(--grey-dark);
		padding: 5px 15px;
		position: relative;
		display: flex;
		display: -webkit-flex;
		box-shadow: 0 0 0 rgb(100 100 100 / 0%);
		width: 40px;
		height: 2em;
		-webkit-transition: all .3s;
		-moz-transition: all .3s;
		-ms-transition: all .3s;
		overflow: hidden;
		text-decoration:none;
		transition: all .3s;
	}
	
	.btn.ani:after, 
	.btn.ani:before {
		float: left;
		font-size: calc(1rem + .3vw);
		transition: all .3s;
		-webkit-transition: all .3s;
		-moz-transition: all .3s;
		-ms-transition: all .3s;
		transition-delay: 0.2s;
		-webkit-transition-delay: 0.2s;
		-moz-transition-delay: 0.2s;
		-ms-transition-delay: 0.2s;
	}

	.btn.ani:before {
		content: ' ';
		background-color: #7a0000;
		width: 1.5em;
		height: 1.5em;
		position: absolute;
		border-radius: 1.5em;
		right: -10px;
		z-index:0;
	}
	
	[data-onclick]:hover .btn.ani:after, 
	.btn.ani:hover:after {
		color: #ffffff;
	}

	.btn.ani:after {
		color: #fff;
		content: "\e080";
		font-family: 'glyphicons halflings';
		font-size: calc(1rem + .4vw);
		height: 100%;
		line-height: 1px;
	}

	[data-onclick]:hover .btn.ani:before, 
	.banner.caption .btn.ani:after,
	.btn.ani:hover:before {
		color: #fff;
		font-weight: 700;
	}
	
	[data-onclick]:hover .btn.ani,
	.btn.ani:hover {
		color: #36e;
		cursor: pointer;
		box-shadow: -8px 0 10px rgb(200 200 200 / 40%);
		-webkit-transform: translate(5px);
		-moz-transform: translate(5px);
		-ms-transform: translate(5px);
		transform: translate(5px);
		width: 75px;
	}


	.btn.ani:hover:after {
		content: "Go";
		font-family: unset;
		z-index:1;
	}


	.btn.ani:hover:before {
		color: #ffffff;
		background-color: #00abff;
		height: 100px;
		width: 90px;
		z-index:0;
	}




	 @keyframes fade {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
			visibility: visible;
		}
	}



	@media screen and (min-width:1200px) {
		#sub-nav #enquiry-tab:after {
			content: 'enquiry';
			margin-left:0.25em;
		}
		#sub-nav #findus-tab:after {
			content: ' & directions';
			margin-left:0.25em;
		}
		
		#sub-nav ul li {
			padding: 17px 20px 12px 20px;
		}
		
		
		.panes .explainer h2 {
			flex-direction:row;
			-webkit-flex-direction:row;
			align-items:center;
			-webkit-align-items:center;
			margin-bottom: 20px;
			margin-top: 10px;
		}
		
		.panes .explainer > h2:after {
			color: #d9d4c9;
			content: "\e080";
			font-family: 'glyphicons halflings';
			font-size: calc(1rem + .4vw);
			margin-left:5px;
			margin-top: 3px;
		}
		

		#more-about div.img_bg1:nth-child(odd) div.img {
			padding-left: 5vw;
			padding-right: 1vw;
		}
		
		#more-about div.img_bg1:nth-child(even) div.img {
			padding-right: 5vw;
		}

		#more-about div.img_bg1 div.img {
			padding-bottom: 1vw;
			padding-top: 1vw;
			width: 50%;
		}

		#more-about > div.img_bg1 > *:not(.img) {
			padding-left:4vw;
			padding-right:4vw;
		}
		

		#intro .img,
		#summary-intro .img {
			padding:0px 0px 0px 20px;
		}
	}




	@media screen and (min-width:992px) {		
		
		#top_banner.bnr picture,
		#top_banner.bnr video {
			border-radius: 0px;
		}
		
		#intro {
			margin-bottom: 0px;
		}
		
		#intro {
			-webkit-align-items: center;
			align-items: center;
			padding: calc(30px + 1vw) 10vw;
		}
		
		#intro > * {
			margin: 0px auto;
			padding: 0;
		}
		
		#intro.lead_in,
		#outro.lead_in {
			border-radius: 0px 0px 5px 5px;
			padding: 0px 0px calc(30px + 1vw) 0px;
		}
		
		#intro.lead_in > * {
			border-radius: 0px 0px 5px 5px;
			padding: 0px 30vw 25px 14vw;
		}
		
		#outro.lead_in > * {
			background-color: transparent;
			padding: 0px 30vw 0px 14vw;
		}
		
		#intro.lead_in ol li {
			margin: 0px;
			width: 50%;
		}
		
		#intro .col_a {
			border-bottom: 5px solid #333;
			padding:0px 0vw 1vw 0px;
			width: calc(50% - 2vw);
		}
		
		
		#summary-intro .col_a {
			padding:0px 0px 2vw 0px;
		}
			
		
		#intro picture,
		#intro picture img,
		#summary-intro picture,
		#summary-intro picture img,
		#more-about picture,
		#more-about picture img {
			border-radius:5px;
		}
		
		#more-about picture,
		#intro picture,
		#summary-intro picture {
			max-height: 40vw;
			overflow:hidden;
		}
		
		#intro picture img,
		#summary-intro picture img {
			height: 30vw;
		}
		
		

		#intro .btn,
		#more-about .btn,
		#summary-intro .btn {
			padding-left:3vw;
			padding-right:3vw;
		}


		#more-about > div.img_bg2 > .img {
			padding: 0px calc(10vw - 20px);	
			width: 100%;
		}

		#more-about > div.img_bg2 > *.col_b {
			padding: 0px calc(20vw - 20px) 0px calc(10vw - 20px);
			width: 100%;
		}


		/*#more-about picture,
		#more-about img {
			object-fit:contain;
		}*/


		#more-about > div > div h3,
		#more-about > div > div p {
			max-width: 80vw;
			text-align: left;
		}
	}



	@media screen and (min-width:1600px) {
		#more-about {
			padding: 20px calc(8vw + 20px);
		}	
		
		#more-about picture,
		#intro picture,
		#summary-intro picture {
			max-height: 30vw;
		}
	}



	@media screen and (min-width:2300px) {
		
		#more-about picture,
		#intro picture,
		#summary-intro picture {
			max-height: 25vw;
		}
	}
	
		

	@media screen and (max-width:991px) {
		body#areas #intro,
		body#areas #summary-intro {
			padding-left: 15px;
			padding-right: 15px;
		}

		body#areas #intro.lead_in,
		body#areas #summary-intro {
			border: none;
			margin: 0px;
			padding-top: 0px;
			width: 100%;
		}

		body#areas #intro > div,
		body#areas #summary-intro > div {
			background-color: var(--pale-sky);
			border-radius: 10px;
			width: 100%;
		}

		body#areas #intro .col_a,
		body#areas #summary-intro .col_a {
			padding: 0px 15px 5px 15px;
		}

		body#areas #intro h2,
		body#areas #summary-intro h2 {
			font-size: clamp(2rem, 8vw, 3rem);
			line-height: 1.05;
		}

		body#areas #intro p,
		body#areas #intro ul,
		body#areas #summary-intro p,
		body#areas #more-about p,
		body#areas #more-about div > ul,
		body#areas #outro p {
			font-size: 1.0625rem;
			line-height: 1.65;
		}

		/*body#areas ol.poi {
			gap: 8px 0;
			margin-top: 8px;
		}*/

		body#areas #intro.lead_in ol li {
			width: 100%;
		}

		body#areas #more-about {
			margin-top: 20px;
			padding: 0px 15px 15px 15px;
		}

		body#areas #more-about > div {
			margin-bottom: 0;
			width: 100%;
		}

		body#areas #more-about > div > * {
			max-width: none;
			width: 100%;
		}

		body#areas #more-about > div .img {
			order: -1;
		}

		body#areas #more-about picture,
		body#areas #more-about picture img {
			border-radius: 0;
			height: auto;
			margin: 0;
			width: 100%;
		}

		body#areas #more-about picture {
			aspect-ratio: 5 / 3;
		}

		body#areas #more-about > div.img_bg1 > *:not(.img),
		body#areas #more-about > div.img_bg2 > *.col_b {
			margin-top: 0;
			padding: 20px;
		}

		body#areas #more-about h3 {
			font-size: clamp(1.6rem, 6vw, 2.3rem);
			line-height: 1.1;
			margin-bottom: 12px;
		}

		body#areas #more-about .btn,
		body#areas #summary-intro .btn,
		body#areas #intro .btn {
			font-size: 1rem;
			margin-top: 12px;
			min-width: 0;
			padding: 12px 18px;
			width: 100%;
		}
		
		#sub-nav {
			padding:0px;
		}
		
		#sub-nav.on {
			top:64px;
		}
		
		#sub-nav ul li {
			font-size: 0.7em;
		}
		
		
		#intro .col_a,
		#summary-intro .col_a {
			padding:20px 30px 30px 30px;
		}
				
				
		#intro .btn,
		#more-about .btn,
		#summary-intro .btn {
			font-size: 2rem;
			margin: 15px auto 0px auto;
			min-width: 75%
		}
						
		#intro .btn {
			background-color: var(--grey-dark);
			border: none;
			width: 70%;
		}
		
		.btn {
			padding-left: 6vw;
			padding-right: 6vw;
		}
		
		
		
		
		#gallery {
			margin: 0px 15px;
			width: 100%;
		}
		
		#more-about p,
		#intro .col_a,
		#summary-intro .col_a,
		#stay-in-the-know p {
			font-size:1.5rem;
		}
		
		#intro h2,
		#summary-intro h2,
		#more-about h3 {
			font-size: 2.6rem;
			font-weight: 600;
		}
		
		#intro p, 
		#intro ul, 
		#summary-intro p, 
		#more-about p, 
		#more-about div > ul {
			font-size: 2rem;
		}
		
		#more-about {
			padding:15px;
		}

		#more-about > div > * {
			max-width:calc(100% - 30px);
		}
		
		#more-about > div.img_bg1 > * {
			margin-bottom:10px;
			width:100%;
		}
		
		#more-about > div.img_bg1 > *:not(.img) {
			margin-top:10px;
			padding:3vw 10px;
		}					

		#more-about > div > img {
			margin:15px 0;
			max-width:100%;
		}
		
		#more-about > div.img_bg1 {
			align-items: center;
			-webkit-align-items: center;
		}
		
		#more-about picture,
		#more-about picture img {
			margin:0px;
		}
		
		
		#intro .col_a,
		#summary-intro .col_a,
		#more-about h3,
		#more-about p {
			text-align:left;
		}
		
		#intro,
		#summary-intro {
			flex-direction:column;
			-webkit-flex-direction:column;
		}
		
		
		
		

		#more-about > div,
		#more-about > div:nth-child(odd),
		#more-about > div:nth-child(even) {
            flex-direction:column !important;
            -webkit-flex-direction:column !important;
        }
		
		

		.panes .explainer .btn.calendar {
			border:2px solid #d9d4c9;
			margin-top: 0px;
			padding: 15px calc(15px + 0.4vw);
			width: 75%;
		}

	}

	@media screen and (max-width:640px) {
		body#areas #intro,
		body#areas #summary-intro,
		body#areas #more-about {
			padding-left: 20px;
			padding-right: 20px;
		}

		body#areas #intro > div,
		body#areas #summary-intro > div,
		body#areas #more-about > div {
			border-radius: 10px;
		}

		body#areas #intro .col_a,
		body#areas #summary-intro .col_a,
		body#areas #more-about > div.img_bg1 > *:not(.img),
		body#areas #more-about > div.img_bg2 > *.col_b {
			padding: 0px 15px 5px 15px;
		}

		body#areas #more-about picture {
			aspect-ratio: 4 / 3;
		}
	}
	
	
	
	/** Required CSS for animate-on-scroll. Adjust timings here */
	[data-animate] {
		animation-duration: 0.5s;
		animation-fill-mode: both;
		visibility: hidden;
	}

	/** Animate-on-scroll animations, add your animations here. Make sure they end in visiblity: visible; */
	@keyframes slideInLeft {
		from {
			transform: translateX(-2em);
			opacity: 0;
		}

		to {
			visibility: visible;
		}
	}

	@keyframes slideInUp {
		from {
			transform: translateY(2em);
			opacity: 0;
		}

		to {
			visibility: visible;
		}
	}


	 @keyframes fadeIn {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
			visibility: visible;
		}
	 }