/*
	(c)2017 - visuallizard.com

	Responsive Styles
	Sets responsive style breakpoints templates.
*/

:root {
	--black: #000000;
	--white: #ffffff;
	--ltgrey: #dddddd;
	--grey: #999999;
	--dkgrey: #333333;
	--yellow: #ffcc00;
	--green: #339900 ;
	--red: #aa0000;
	--blue: #0077cc;

	/* brand colouring - primary */
	--riverclayred: #5c0f0f;
	--deepcurrant: #380a0a;
	--wintersun: #fff5ed;
	--gatheringglow: #eb6340;
	/* brand colouring - secondary */
	--canopygreen: #82874a;
	--canopygreen-deep: #404f36;
	--canopygreen-lite: #e3e899;
	--prairieochre: #b58030;
	--prairieochre-deep: #81471e;
	--prairieochre-lite: #ffcd4d;
	--bigskyblue: #5778c4;
	--bigskyblue-deep: #1c1c54;
	--bigskyblue-lite: #d5e6ff;
	--twilightthistle: #bfadd4;
	--twilightthistle-deep: #743e68;
	--twilightthistle-lite: #e9e6ff;
}

/* !Media Queries ============================== */



/* 1600px wide+ (laptop and desktop browsers) */
@media only screen and (min-width: 1601px) {
	body.debug::before { content: 'x-large'; }
	.mobile-menu-toggle { display: none; }
	h1, .h1 { font-size: 9.60rem; }
	h2, .h2 { font-size: 6.80rem; }
	h3, .h3 { font-size: 4.20rem; }
	h4, .h4 { font-size: 3.50rem; }
	h5, .h5 { font-size: 3.00rem; }
	h6, .h6 { font-size: 2.70rem; }
	p { font-size: 2rem; margin: 0 0 3.6rem 0; }
	ul, ol { margin: 0 0 3.6rem 0.8rem; font-size: 2rem; }

	header > .container,
	aside#social-bar > .container { max-width: 1400px; }
	main .container,
	main.internal > .container,
	main.internal section > .container { max-width: 1300px; }
	footer > .container { max-width: 1400px; }

	div.attraction div.brief > h3,
	div.event-listing > div.body > h3,
	div.profile > h3 { font-size: 2.5rem; }

}
/* ! standard monitors and desktop browsers) */
@media only screen and (max-width: 1600px) {
	body.debug::before { content: 'large'; }
	.mobile-menu-toggle { display: none; }

}

/* ! tablets landscape display */
@media only screen and (max-width: 1200px) {
	body.debug::before { content: 'large'; }

	h1, .h1 { font-size: 8.60rem; }
	h2, .h2 { font-size: 5.80rem; }
	h3, .h3 { font-size: 3.20rem; }
	h4, .h4 { font-size: 2.50rem; }
	h5, .h5 { font-size: 2.00rem; }
	h6, .h6 { font-size: 1.70rem; }

	.container { max-width: 100%; }
	aside#social-bar > .container { justify-content: flex-start; }

	.site-title { max-width: 35%; }
	nav .nav-1 { font-size: 1.8rem; }


	div.internal-banner { max-height: 40vh; padding: 0; overflow: hidden; }
	div.internal-banner div.banner > img { top: auto; width: 100%; height: 100%; object-fit: cover; object-position: 0% 100%; }

	section#bibliography { padding: 0; }


}

@media only screen and (max-width: 1100px) {
	body.debug::before { content: 'medium'; }

	#search-block a.close-search { right: 5rem; }

	.mobile-menu-toggle { display: block; }

	nav#main-nav {
		display: block;
		position: fixed;
		top: 0;
		left: -100vw;
		bottom: 0;
		width: 100vw;
		z-index: 1;
		padding: 1rem 2rem;
		background-color: var(--deepcurrant);
		color: var(--wintersun);
	}
	nav#main-nav.show {
		left: 0;
	}
	nav#main-nav > div.site-title { display: none; }
	nav#main-nav.show > div.site-title {
		display: block;
		max-width: 35%;
		margin-top: 0.65rem;
	}
	nav#main-nav ul.nav-1 {
		display: block;
		position: relative;
		overflow: auto;
		width: 100%;
		max-height: 100vh;
		padding: 1rem 0;
		margin: 2rem 0 0 0;
		font-family: "Inter Tight", Arial, sans-serif;
	}
	.nav-item { display: block; }

	nav .nav-1 > li { margin-bottom: 2rem; }
	nav .nav-1 > li > a {
		text-align: unset; transition: none;
		text-transform: uppercase;
		letter-spacing: 15%;
	}
	nav .nav-1 span.submenu {
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		width: 30px;
		height: 30px;
	}
	li.has-sub > .sub-list {
		display: block;
		position: relative;
		width: 95%;
		height: 0;
		padding: 0 0 0 2rem;
		border: none;
		margin: 0;
		background: none;
		color: var(--wintersun);
		box-shadow: none;
		opacity: 0;
		transition: none;
	}
	li.has-sub.show > .sub-list,
	li.has-sub.has-active > .sub-list,
	li.has-sub.active > .sub-list {
		height: auto;
		visibility: visible;
		opacity: 1;
	}
	nav .nav-1 > li.active > a,
	nav .nav-1 > li.has-active > a { text-decoration: none; }
	li.has-sub.show > .sub-list a.nav-link,
	li.has-sub.has-active .sub-list a.nav-link { background: none; border-bottom: 1px solid transparent; color: inherit; }

	li.active > a.nav-link,
	li.has-sub.has-active > a.nav-link,
	li.has-sub.has-active .sub-list li.has-active > a.nav-link,
	li.has-sub.has-active .sub-list > li.active > a.nav-link { border-bottom: 1px solid var(--wintersun); }

	:nth-last-child(1) > .nav-2 .nav-list,
	:nth-last-child(2) > .nav-2 .nav-list { right: unset; }
	:nth-last-child(1) > .nav-2 .has-sub > .nav-link::after,
	:nth-last-child(2) > .nav-2 .has-sub > .nav-link::after { transform: scale(0.8) rotate(90deg); }

	nav .nav-2 { font-weight: 400 !important; }
	nav .nav-2 > li.has-sub > .sub-list { width: 100%; }
	nav .nav-2 > li.has-sub > .nav-link::after {
		background: no-repeat center center url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><path fill='%23ffffff' d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' /></svg>");
		width: 2rem;
		height: 2rem;
	}
	.nav-2 > li > a,
	.nav-2 > li.has-active > a,
	.nav-2 > li.active > a,
	.nav-2 > li > a:hover,
	.nav-2 > li > a:visited,
	.nav-2 > li > a:active,
	.nav-2 > li > a:focus { background: none; border-bottom: 1px solid transparent; color: inherit; }

}

/* ! tablets portrait display) */
@media only screen and (max-width: 850px) {
	body.debug::before { content: 'medium'; }

	h1, .h1 { font-size: 5.20rem; }
	h2, .h2 { font-size: 4.20rem; }
	h3, .h3 { font-size: 3.60rem; }
	h4, .h4 { font-size: 2.40rem; }
	h5, .h5 { font-size: 2.00rem; }
	h6, .h6 { font-size: 2.00rem; }
	p { font-size: 1.4rem; }
	main ul, main ol, footer ul { font-size: 1.4rem; }

	aside#social-bar > .container { padding-right: 6rem; }
	ul.social { justify-content: flex-end; width: 40%; column-gap: 1rem; }

	div.hero-banner { max-height: 70vh; }

	section#home-posts .container > h2 { flex: 0 0 58%; max-width: 58%; }
	section#home-posts .container > a { flex: 0 0 40%; max-width: 40%; }

	div.internal-banner { box-shadow: 0px -5rem 0px 0px var(--canopygreen-deep); }
	div.internal-banner.red { box-shadow: 0px -5rem 0px 0px var(--gatheringglow); }
	div.internal-banner.green { box-shadow: 0px -5rem 0px 0px var(--canopygreen); }
	div.internal-banner.dkgreen { box-shadow: 0px -5rem 0px 0px var(--canopygreen-deep); }
	div.internal-banner.blue { box-shadow: 0px -5rem 0px 0px var(--bigskyblue); }
	div.internal-banner.dkblue { box-shadow: 0px -5rem 0px 0px var(--bigskyblue-deep); }
	div.internal-banner.purple { box-shadow: 0px -5rem 0px 0px var(--deepcurrant); }

	main#content.home > section { padding: 5rem 0; }

	main.internal section > .container > h2,
	main.internal section > .container > div > h2,
	main.internal > .container > div > h2 { text-align: center; }
	section.attraction-set > div.attraction { flex: 0 0 48%; max-width: 48%; }
	div#attraction { max-width: 100%; }
	div#attraction > div.body { padding: 3rem 0; }

	div#profile > div.body { padding: 0; }

	form.calendar-filter { row-gap: 1rem; }
	form.calendar-filter div.filter { flex: 0 0 48% !important; max-width: 48% !important; }
	form.calendar-filter div.filter.daterange { flex: 0 0 70% !important; max-width: 70% !important; }
	#calendar-set { width: 50vw; }

	footer > .container:first-child section:nth-child(1) { flex: 0 0 100%; max-width: 100%; }
	footer > .container:first-child section:nth-child(2) { flex: 0 0 48%; max-width: 48%; }
	footer > .container:first-child section:nth-child(3) { flex: 0 0 48%; max-width: 48%; }
	footer > .container:first-child section:nth-child(4) { flex: 0 0 100%; max-width: 100%; }
	footer nav.footer-legal-nav { width: 100%; }
	footer nav.footer-legal-nav ul { justify-content: center; margin: 5rem auto 0 auto; }
	footer p.copyright { width: 100%; text-align: center; }

}

/* ! phone display landscape */
@media only screen and (max-width: 670px) {
	body.debug::before { content: 'small'; }

	button.btn,
	a.btn,
	a.btn-lite,
	a.btn-dark { font-size: 1.6rem; }

	.cke > .c1,
	.cke > .c2,
	.cke > .c3,
	.cke > .c4,
	.cke > .c5,
	.cke > .c6 { flex: 0 0 100%; max-width: 100%; }

	aside#social-bar > .container { flex-wrap: wrap; row-gap: 1rem; padding: 0; }
	div#weather-data { justify-content: center; flex: 0 0 100%; max-width: 100%; padding: 0; }
	ul.social { flex: 0 0 100%; max-width: 100%; justify-content: center; }

	section#home-posts .container > article.post { flex: 0 0 49%; max-width: 49%; }
	div.support-promo:last-child img.mosaic { top: -1rem; left: -1rem; bottom: auto; width: 8rem; height: 8rem; }
	div.support-promo:last-child img.logo { width: 130px; }
	main#content.home > section#home-railside { padding: 5rem 0 12rem 0; }
	section#home-railside .container div.railside-promo:first-child { max-width: 100%; padding: 3rem; }
	section#home-railside .container > div.railside-promo:last-child { max-width: 100%; bottom: -9rem; }
	section#home-railside .container div.railside-promo:last-child img.logo { right: 25%; width: 50%; height: auto; }

	main.internal { padding: 5rem 0; }
	main.internal section#intro { padding: 0; }

	div.internal-banner { max-height: 30vh; padding: 2rem 0 5rem 0; overflow: hidden; }
	div.internal-banner.red > div.img-gradient { background: linear-gradient(var(--gatheringglow), transparent); }
	div.internal-banner.green > div.img-gradient { background: linear-gradient(var(--canopygreen), transparent); }
	div.internal-banner.dkgreen > div.img-gradient { background: linear-gradient(var(--canopygreen-deep), transparent); }
	div.internal-banner.blue > div.img-gradient { background: linear-gradient(var(--bigskyblue), transparent); }
	div.internal-banner.dkblue > div.img-gradient { background: linear-gradient(var(--bigskyblue-deep), transparent); }
	div.internal-banner.purple > div.img-gradient { background: linear-gradient(var(--deepcurrant), transparent); }

	section.attraction-set > div.attraction,
	div.profile-set > div.profile,
	div.event-set > div.event-listing { flex: 0 0 48%; max-width: 48%; }

	section#trail-legend > ul { width: 100%; }
	section#trail-legend > ul > li { justify-content: flex-start; flex: 0 0 100%; max-width: 100%; }

	section#trail-set div.trail > h2 { order: 0; }
	section#trail-set div.trail > div.trail-image { flex: 0 0 100%; max-width: 100%; order: 2; }
	section#trail-set div.trail > div.trail-section { flex: 0 0 100%; max-width: 100%; order: 1; }

	section#trail-side div.notice { flex: 0 0 100%; max-width: 100%; padding: 3rem; }

	footer > .container section { flex: 0 0 100% !important; max-width: 100% !important; }
	footer > .container section.reconciliation > img { flex: 0 0 100%; max-width: 210px; }
	footer > .container section.reconciliation > div.treaty-notice { flex: 0 0 100%; max-width: 100%; }

}

/* ! Phone display portrait */
@media only screen and (max-width: 520px) {
	body.debug::before { content: 'small'; }

	h1, .h1 { font-size: 4.60rem; }
	h2, .h2 { font-size: 3.40rem; }
	h3, .h3 { font-size: 2.40rem; }
	h4, .h4 { font-size: 2.00rem; }
	h5, .h5 { font-size: 1.80rem; }
	h6, .h6 { font-size: 1.80rem; }

	form.search-form { width: 80%; margin: 0; }
	form.search-form .input-search { flex: 0 0 60%; max-width: 60%; }
	form.search-form button[type="submit"] { max-width: 35%; }
	.site-title > a { height: 2.4rem; }
	div.hero-banner { max-height: 30vh; }
	div.hero-banner h1 { font-size: 3.2rem; }
	div.hero-banner > .container { gap: 0; padding: 0 2rem; }
	div.hero-banner .container img { width: 80px; margin: 0 auto; }
	section#home-posts .container > h2 { flex: 0 0 100%; max-width: 100%; }
	section#home-posts .container > a { flex: 0 0 80%; max-width: 80%; margin-bottom: 3rem; text-align: left; }
	section#home-posts .container > article.post { flex: 0 0 100%; max-width: 100%; margin-bottom: 3rem; }
	section#home-sustainability .container div.eco-promo:first-child { max-width: 100%; padding: 0 0 3rem 0; }
	section#home-sustainability .container div.eco-promo:last-child { max-width: 100%; padding: 0 3rem; }
	div.eco-promo:last-child img.book { top: 2rem; width: 12rem; height: 12rem; }
	div.eco-promo:last-child img.eco-tour { right: auto; width: 25rem; }
	section#home-support .container div.support-promo:first-child { flex: 0 0 100%; max-width: 100%; padding: 0 0 3rem 0; }
	section#home-support .container div.support-promo:last-child { flex: 0 0 100%; max-width: 100%; padding: 0; }
	div.support-promo:last-child img.foundation { width: 80%; }
	div.support-promo:last-child img.logo {  }
	div.support-promo:last-child img.mosaic { top: auto; left: 0; bottom: 0; }

	div.internal-banner h1 { font-size: 4.8rem; }
	div.internal-banner div.banner { height: 32vh; }
	div.internal-banner div.banner > img { object-position: center -3rem; filter: opacity(0.9); }

	section.attraction-set > div.attraction,
	div.profile-set > div.profile,
	div.event-set > div.event-listing { flex: 0 0 100%; max-width: 100%; }

	form.calendar-filter div.filter { flex: 0 0 100% !important; max-width: 100% !important; }
	div.filter.daterange { row-gap: 1rem; }
	div.filter.daterange .input-datepicker { flex: 0 0 100%; max-width: 100%; }
	#calendar-set { left: auto; width: 90vw; }

}