/*

  _    _                                  _        __          __  _        _____       _       _   _                 
 | |  | |                                | |       \ \        / / | |      / ____|     | |     | | (_)                
 | |__| | __ _ _ __ _ __ ___   __ _  __ _| |_ ___   \ \  /\  / /__| |__   | (___   ___ | |_   _| |_ _  ___  _ __  ___ 
 |  __  |/ _` | '__| '__/ _ \ / _` |/ _` | __/ _ \   \ \/  \/ / _ \ '_ \   \___ \ / _ \| | | | | __| |/ _ \| '_ \/ __|
 | |  | | (_| | |  | | | (_) | (_| | (_| | ||  __/    \  /\  /  __/ |_) |  ____) | (_) | | |_| | |_| | (_) | | | \__ \
 |_|  |_|\__,_|_|  |_|  \___/ \__, |\__,_|\__\___|     \/  \/ \___|_.__/  |_____/ \___/|_|\__,_|\__|_|\___/|_| |_|___/
                               __/ |                                                                                  
                              |___/                                                                                   

*/
/*
//header: header classes (if not done in partials), sticky x2, hamburger type, hamburger breakpoint (along with other menu styles), header width
//footer: column widths, branding
//sliders: front page height (0 == 100hv), arrows, indicators (default to flat?), caption x4 inc. background colour, inner page height, inner page style (background/background-colour unless is image), inner page h1 style
//typography: font families (do the import seperately in line with cookie banner plugin), font weights, header transforms, body font size (leave the rest as browser defaults), colours (heading to primary) - set these as variables
//other: button border radii, button text colour, form fields, 50 50 widgets, cards, breadcrumbs (unless yoast will be handling it), gallery columns, gallery masonry, gallery lightbox, section spacing, content width (for widths, consider everything else full width for background colours)
*/
.sr-only{
	display:none;
}
a{
	color:var(--text-colour);
	text-decoration: none;
}
img {
    max-width: 100%;
}
.colour-bg {
	padding-block: var(--spacing-widget-vertical);
}
.grey-bg{
	background-color:var(--grey-colour);
}
.primary-bg{
	background-color:var(--primary-colour);
}
.primary-bg *{
	color:#fff;
}
/* Header */
/*
header classes, sticky x2, hamburger display (the above breakpoint will go in functions.php) (include menu & hamburger styling)
header max width, hamburger opening types
*/
header.meta-header {
    /*width: 100%;*/
    display: flex;
    column-gap: var(--spacing-horizontal);
    padding: var(--spacing-widget-vertical) var(--spacing-horizontal);
	z-index: 1;
    position: relative;
	background: var(--accent-colour);
}

header.main-header, aside.sidebar-navigation {
    background: var(--primary-colour);
}

body {
    margin: 0;
}
.logo-wrapper img {
    max-width: 100%;
	max-height: 100px;
}
header.main-header .header-wrapper, aside.sidebar-navigation {
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding-left: var(--spacing-horizontal);
    padding-right: var(--spacing-horizontal);
    padding-top: var(--spacing-widget-vertical);
    padding-bottom: var(--spacing-widget-vertical);
}

/*header.main-header .header-wrapper .collapse .nav {
    display: none;
}*/

header.main-header .header-wrapper .hamburger-wrapper, aside.sidebar-navigation .hamburger-wrapper {
	margin-left: auto;
	cursor: pointer;
}

header.main-header .header-wrapper .collapse.navbar-collapse, aside.sidebar-navigation .collapse.navbar-collapse, .sidebar-widget-wrapper.collapse {
    display: none;
}

header.main-header .header-wrapper .navbar-collapse, aside.sidebar-navigation .navbar-collapse {
    height: 100%;
    transition: height 2.4s, 0.6s;
}

header.main-header .header-wrapper .menu-wrapper, aside.sidebar-navigation .menu-wrapper {
    width: 100%;
}

header.main-header .header-wrapper .logo-wrapper, aside.sidebar-navigation .logo-wrapper {
    max-width: 90%;
    max-width: calc(100% - 40px);
}

ul.nav.navbar-nav {
    list-style-type: none;    
    font-size:16px;
}
ul.nav.navbar-nav a {
    font-size:14px !important;
    text-align: center;
}
ul.sub-menu {
	list-style-type: none;
	padding-left: var(--spacing-horizontal);
    padding-right: var(--spacing-horizontal);
}

.hamburger-menu-wrapper ul.nav.navbar-nav {
    margin-top: -1em;
    margin-bottom: -1em;
}

svg.open rect:nth-child(1) {transform: rotate(45deg);transform-origin: 0.5px 3px;}
svg.open rect:nth-child(2) {transform: rotate(-45deg);transform-origin: 3px 2px;}
svg.open rect:not(:last-child) {width: 6px;}
svg.open rect:last-child {width: 6px;transform: translateX(1px);}
svg rect {transition: 0.2s;}

header.main-header.sticky {
    position: sticky;
    top: 0;
	z-index: 12;
}
header.main-header.sticky aside, .main-header.partial-sticky aside{
    transition: padding 0.2s;
}
.scrolled header.main-header.sticky aside, .scrolled .main-header.partial-sticky aside {
    padding-top: 5px;
    padding-bottom: 5px;
}

 

/* Footer */
.footer-wrapper {
    display: flex;
    flex-wrap: wrap;
	justify-content: space-around;
    margin: auto;
	column-gap: var(--spacing-horizontal);
	row-gap: var(--spacing-widget-vertical);
	padding-inline: var(--spacing-horizontal);
	max-width: var(--content-max-width);
}


.footer-wrapper .footer-column-full {
    width: 100%;
    flex: auto;
}
.footer-column{
	/*width:100%;*/
	padding-left: var(--spacing-horizontal);
	padding-right: var(--spacing-horizontal);
	margin-top: var(--spacing-widget-vertical);
	margin-bottom: var(--spacing-widget-vertical);
}

/*footer.sitefooter .footer-wrapper{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--spacing-horizontal) var(--spacing-widget-vertical);
}*/
footer{
	background: var(--footer-background-colour);
	color: var(--footer-text-colour);
}
footer h1,footer h2,footer h3,footer h4,footer h5,footer h6{
	color: var(--footer-text-colour);
}

footer a {
    color: inherit;
    text-decoration: none;
}
footer .wp-block-image img {
    width: 100%;
    max-width: 250px;
}
footer.privacy{
	text-align: center;
	padding-top: var(--spacing-widget-vertical);
	padding-bottom: var(--spacing-widget-vertical);
}
footer.footer-bottom{
	text-align: center;
	background-color: #fff;
	padding-left: var(--spacing-horizontal);
	padding-right: var(--spacing-horizontal);
}

@media(min-width:768px){
	.footer-wrapper .footer-column {
		/*flex: 1;*/
		padding-left:0;
		padding-right:0;
	}
}

ul.social-icons {
    list-style: none;
    padding: 0;
    display: flex;
    column-gap: 10px;
}

ul.social-icons a {
    background-color: #0006;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 20px;
}

/* Carousels */
#front-carousel {
	height: 100vh;
	position: relative;
}
#front-carousel-wrapper .caption {
	position: absolute;
	color: var(--primary-colour);
	padding: var(--spacing-widget-vertical) var(--spacing-horizontal);
	margin: auto;
	top: 0;
	left: auto;
	right: auto;
	bottom: 0;
	background-color: #fff;
	background-color: #fff8;
	text-align: center;
}
#front-carousel-wrapper .caption p {
	max-width: var(--content-max-width);
}
#front-carousel-wrapper .caption.caption-standard{
	top: auto;
	bottom: auto;
}
#front-carousel-wrapper .caption.caption-full{
	width:100%;
	left: 0;
	right: 0;
	bottom: 60px;
	top:auto;
	padding-left:0;
	padding-right:0;
}

#front-carousel-wrapper .single-caption-wrapper .caption.caption-full {
    bottom: 75px;
    align-items: center;
    justify-content: center;
    display:flex;
}

#front-carousel-wrapper .caption.caption-left{
	top: auto;
	left: 0;
	bottom: auto;
	text-align:left;
}
#front-carousel-wrapper .caption.caption-left-angle{
	left: 0;
    background: transparent;
    text-align: left;
    display: flex;
    align-items: flex-start;
    z-index: 2;
    flex-direction: column;
    justify-content: center;
}
.single-caption-content {
    position: relative;
    z-index: 2;
}
#front-carousel-wrapper .caption.caption-left-angle:before{
	content: '';
	position: absolute;
	width: 300px;
	background-color: #fff;
	background-color: #fff8;
	height: 100%;
	top: 0px;
	left: 0;
	clip-path: polygon(0 0, 70% 0, 100% 100%, 0% 100%);
	z-index: 1;
}

.single-caption-wrapper {
    position: absolute; 
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
	/*padding-top:10px;
	padding-bottom:10px;
	padding-left:15px;
	padding-right: 15px;*/
}

.slick-prev,.slick-next{
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: transparent;
	z-index: 3;
}
.slick-prev:hover,.slick-prev:focus,.slick-next:hover,.slick-next:focus{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,.slick-prev:focus:before,.slick-next:hover:before,.slick-next:focus:before{
    opacity: 1;
}
.slick-prev.slick-disabled:before,.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,.slick-next:before
{
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	color:#fff;
	font: var(--fa-font-solid);
}

.slick-prev{
    left: 15px;
}
.slick-prev:before
{
	content: '\f0a8';
}
.slick-next
{
	right: 15px;
}
.slick-next:before
{
	content: '\f0a9';
}

.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
	z-index: 3;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 5px;
    padding: 0 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: #fff;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li.slick-active button
{
    opacity: .75;
    color: #000;
}

#front-carousel .slick-list img {height: inherit;width:100%;object-fit: cover;}

#front-carousel .slick-list, #front-carousel .slick-track, #front-carousel .slick-list .slick-slide {
    height: inherit!important;
}

#front-carousel .slick-list .slick-slide {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
#front-carousel .slick-dots {
    bottom: 0px;
}

#front-carousel-wrapper {
    position: relative;
}

#front-carousel-wrapper #scroll-to-content {
    position: absolute;
    bottom: 30px;
    left: auto;
    right: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    color: #fff;
    cursor:pointer;
	z-index: 3;
}

#front-carousel-wrapper #scroll-to-content::after {
    content: '';
    width: 3px;
    border-radius:2px;
    height: 30px;
    position: absolute;
    animation: carousel-scroll-bar 2s infinite;
    top: 20px;
    background:#fff;
}

@keyframes carousel-scroll-bar {
    0%{
        height:0;
        opacity:1;
    }
    30%{
        top:25px;
        height:18px;
    }
    50%{
        opacity:1;
    }
    80%{
        top:45px;
        opacity:0;
    }
    100%{
        height:0;
        opacity:0;
    }
}


#inner-carousel{
	width: 100%;
	position: relative;
	display: flex;
}
#inner-carousel:has(+ .sidebar-wrapper.standard-width), #inner-carousel:has(+ .content-wrapper.standard-width), .single-post #inner-carousel {
    margin-bottom: 0;
}
#inner-carousel h1{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	text-shadow: 1px 1px 3px #000;
	text-align: center;
	padding: var(--spacing-widget-vertical) var(--spacing-horizontal);
	/*width: 100%;*/
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}
#inner-carousel img{
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.page-heading{
	/*width: 100%;*/
	color: var(--accent-colour);
	background-color: var(--primary-colour);
	padding: var(--spacing-horizontal);
}
.page-heading h1{
	max-width: var(--content-max-width);
	margin-inline: auto;
	text-align: center;
}

/* Typography */
h1,h2,h3,h4,h5,h6{
	color: var(--primary-colour);
}
body{
	color: var(--text-colour);
}
/* Miscellaneous */
/*
form input styles x2, sizes x3
50-50 style x6
card style x4
gallery x2 (masonry & not)
gallery columns (2/3/4/6)
gallery lightbox

woocommerce filter bar x2.5
*/

article.content-wrapper,.sidebar-wrapper aside{
	/*width: 100%;*/
	/*padding-left: var(--spacing-horizontal);
    padding-right: var(--spacing-horizontal);*/
    margin-top: var(--spacing-widget-vertical);
    margin-bottom: var(--spacing-widget-vertical);
}
article.content-wrapper.full-width{
	padding-inline:0;
}
article.content-wrapper.standard-width, .standard-width{
	margin-inline:auto;
	width:var(--content-max-width);
	max-width: 100%;
}
@media(min-width:992px){
	.sidebar-wrapper {
		display: grid;
		grid-template-columns: 2fr 1fr;
		grid-gap: var(--spacing-horizontal);
	}
	.page-template-template_left-sidebar .sidebar-wrapper  {
		grid-template-columns: 1fr 2fr;
	}
	.page-template-template_left-sidebar .sidebar-wrapper aside {
		order:-1;
	}
}
a.post-snippet {
    text-decoration: none;
}

article.blog-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(300px, 1fr));
}
article.single-post{
	margin-bottom:var(--spacing-widget-vertical);
}

.button,.components-button{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 200px;
	min-height: 50px;
	padding-left: var(--spacing-horizontal);
	padding-right: var(--spacing-horizontal);
	transition: 0.3s;
	margin:0;
	background-color: var(--primary-colour);
	color: var(--button-text-colour);
	border:none;
}
.button.highlight{
	background-color: var(--contrast-colour);
}
.button:hover,.button:focus,.components-button:hover,.components-button:focus{
	filter: brightness(0.9);
	cursor: pointer;
}
.button-wrapper {
	display: flex;
    flex-wrap: wrap;
    column-gap: var(--spacing-horizontal);
    row-gap: var(--spacing-widget-vertical);
}
header .button{
	min-width:unset;
	margin-left:20px;
	text-align: center;
}
.center,.centre{
	text-align:center;
}
.center .button-wrapper,.centre .button-wrapper{
	justify-content:center;
}
.wpcf7 input,.wpcf7 textarea{
	font-family: inherit;
}
input[type="checkbox"]{
	min-height:unset;
}
.form-control,.woocommerce .quantity input, .woocommerce .variations select{
	background-color: #eee;
	min-height:34px;
	padding: 8px 10px;
	border:none;
}
.form-control.form-control-large{
	min-height: 50px;
	padding: 12px 20px;
}
.form-control.form-control-small{
	min-height: 28px;
	padding: 5px 8px;
}
.form-control.retro{
	background-color: transparent;
	border: 1px solid #8c8f94;
	border-radius: 4px;
}
#searchform div {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--spacing-horizontal);
    row-gap: var(--spacing-widget-vertical);
}
#searchform input#s{
	flex-grow: 1;
}

/*5050s
standard
6633
7525
contained image (5050)*/
.fifty-fifty {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
.fifty-fifty .text-wrapper {
	width: 100%;
	display:flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	margin-block: var(--spacing-widget-vertical);
}
.fifty-fifty > img {
	/*display: none;*/
	object-fit: cover;
}

@media( min-width: 992px ) {
	.fifty-fifty {
		flex-direction: row;
		min-height: 400px;
	}
	.fifty-fifty .text-wrapper {
		width:50%;
		padding: var(--spacing-widget-vertical) var(--spacing-horizontal);
		margin:0;
	}
	.fifty-fifty:nth-child(even) > .text-wrapper{
		padding-left:0;
	}
	.fifty-fifty > img {
		width:50%;
	}
	.fifty-fifty.fifty-fifty-contained > img {
		object-fit: contain;
	}
	.fifty-fifty.fifty-fifty-faded > img::after {
		content: "";
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.fifty-fifty.fifty-fifty-faded > img::after {
		box-shadow: inset 40px 0 40px -16px;
	}
	.fifty-fifty:nth-child(odd) > .text-wrapper {
		order: 1;
		padding-right:0;
	}
	.fifty-fifty:nth-child(odd) > img {
		order: 0;
	}
	.fifty-fifty.fifty-fifty-faded:nth-child(even) > img::after {
		box-shadow: inset -40px 0 40px -16px;
	}
	.fifty-fifty.fifty-fifty-rounded:nth-child(odd) > img {
		border-top-right-radius: 20px;
		border-bottom-right-radius: 20px;
	}
	.fifty-fifty.fifty-fifty-rounded:nth-child(even) > img {
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
	}
}

@media( min-width: 1200px ) {
	.fifty-fifty.thirds .text-wrapper {
		width:66.6%;
	}
	.fifty-fifty.quarters .text-wrapper {
		width:75%;
	}
	.fifty-fifty.thirds > img {
		width:33.3%;
	}
	.fifty-fifty.quarters > img {
		width:25%;
	}
}


/*cards*/

/*
standard
standard no image
image overlay
horizontal
*/
.card-wrapper{
	display: grid;
	grid-template-columns: 1fr;
	column-gap: var(--spacing-horizontal);
	row-gap: var(--spacing-widget-vertical);
}
.card{
	display: flex;
	flex-direction: column;
	
}
.card .card-content{
	padding: var(--spacing-widget-vertical) var(--spacing-horizontal);
}
.card.centre .card-content{
	text-align: center;
}
.card.overlay{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	height: 390px;
}
.card.overlay .card-content{
	position: absolute;
	left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.card.overlay .card-content::before {
    content: '';
    background: #0006;
    width: 100%;
    height: 100%;
    /* top: 0; */
    /* left: 0; */
    position: absolute;
    z-index: 0;
}
.card.overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card.overlay .card-content * {
    z-index: 1;
	color:#fff;
}
.card.horizontal .button{
	min-width: unset;
}
@media(min-width: 768px){
	.card.horizontal{
		display: flex;
		flex-direction: row;
	}
	.card.horizontal > img,.card.horizontal .card-content{
		width: 50%;
	}
}
@media(min-width:992px) {
	.card-wrapper{
		grid-template-columns: repeat(auto-fill,minmax(250px, 1fr));
	}
}

#breadcrumbs{}/*if not handled by Yoast*/

/*gallery
masonry gallery
lightbox
*/

.gallery-wrapper{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	column-gap: var(--spacing-horizontal);
	row-gap: var(--spacing-widget-vertical);

}
.gallery-wrapper .image-wrapper {
	width: 50%;
	min-width:200px;
}
.gallery-wrapper .image-wrapper.lightbox-trigger {
	cursor: pointer;
}
.gallery-wrapper.columns-3 .image-wrapper {
	width:33.3%;
}
.gallery-wrapper.columns-4 .image-wrapper {
	width:25%;
}
.gallery-wrapper.columns-6 .image-wrapper {
	width:16.67%;
}
.gallery-wrapper .image-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.gallery-wrapper.masonry{
	column-gap: var(--spacing-horizontal);
}
.gallery-wrapper.masonry .image-wrapper{
	margin-bottom: var(--spacing-widget-vertical);
}

#gallery-lightbox {
    display: none;
    justify-content: center;
    align-items: center;
}

#gallery-lightbox.open {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    background-color: #0008;
    cursor: pointer;
}

#gallery-lightbox.open img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
}
#gallery-lightbox a.lightbox-nav {
    font-size: 24px;
    color: #fff;
    margin-inline: 10px;
}
#gallery-lightbox.open::after {
    content: '\0000d7';
    color: #fff;
    position: absolute;
    top: 4vh;
    right: 4vw;
    font-size: 25px;
}

.notice-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #0008;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}

.notice-popup .popup-content {
    background: #fff;
    padding: 30px;
    position: relative;
    max-width: 80vw;
	color:var(--text-colour);
}

.notice-popup .popup-content h2 {
    text-align: center;
}

.notice-popup .popup-content .close-popup {
    content: '\f00d';
    position: absolute;
    color: #fff;
    right: -25px;
    top: -30px;
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    font-size: 29px;
	cursor:pointer;
}


/* SiteOrigin */
article.content-wrapper.full-width > .panel-layout > .panel-grid {
    /*width: 100%;*/
    margin-block: var(--spacing-widget-vertical);
}
.home article.content-wrapper.full-width > .panel-layout > .panel-grid:first-of-type,.home article.content-wrapper.full-width {
    margin-top: 0;
}

article.content-wrapper.full-width > .panel-layout > .panel-grid > .panel-grid-cell, 
article.content-wrapper.full-width > .panel-layout > .panel-grid.panel-has-style > .panel-row-style:not(.full-width) > .panel-grid-cell, 
article.content-wrapper.full-width > .panel-layout > .panel-grid.panel-has-style > .panel-row-style.standard-width{
    max-width: var(--content-max-width);
    margin-inline: auto;
	width:100%!important;
}
/*article.content-wrapper.full-width > .panel-layout > .panel-grid > .panel-grid-cell,
article.content-wrapper.full-width > .panel-layout > .panel-grid.panel-has-style > .panel-row-style > .panel-grid-cell{
	padding-inline: var(--spacing-horizontal)!important;
}*/

article.content-wrapper.full-width > .panel-layout > .panel-grid.panel-has-style > .panel-row-style {
    width: 100%;
}