/*
Theme Name: John Bright Fencing 2021
Description: Another bespoke template by Key Digital.
Version: 1.0.20
Author: Adam Montague
Author URI: https://key.digital
*/

/*! opensans bold */
@font-face{
	font-family: "opensans bold";
	src: url("fonts/opensans-bold.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
/*! opensans semibold */
@font-face{
	font-family: "opensans semibold";
	src: url("fonts/opensans-semibold.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
/*! opensans regular */
@font-face{
	font-family: "opensans regular";
	src: url("fonts/opensans-regular.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}
/*! optima */
@font-face{
	font-family: "optima";
	src: url("fonts/optima.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/*!----- A modern CSS reset -----*/
*,
*::before,
*::after{box-sizing: border-box;}

ul[class],
ol[class]{padding: 0;}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd{margin: 0;}

pre{white-space: break-spaces;}

body{
    font-family: "opensans regular", sans-serif;
    min-height: 100vh;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeSpeed;
    line-height: 1.2;
    color: #333;
}

ul[class],
ol[class]{list-style: none;}

a:not([class]){text-decoration-skip-ink: auto;}

img{
    max-width: 100%;
    height: auto;
    display: block;
}

.flow > * + *,
article > * + *{margin-top: 1em;}

.no-flow{margin-top: 0;}

input,
button,
textarea,
select{font: inherit;}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea{
	-webkit-appearance: none;
    border-radius: 5px;
    border: 1px solid #ddd;
    padding: .5em;
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"]{
	-webkit-appearance: none;
	display: inline-block;
	margin: 1em auto;
	padding: .5em 1.5em;
	border: none;
	font-family: "opensans regular";
	font-size: 1em;
	text-decoration: none;
	cursor: pointer;
	text-align: center;
	transition: all .3s linear;
}

blockquote,
q{
    font-size: 1.6rem;
    quotes: none;
    padding: 2em;
    color: #fff;
    background-color: #d2232a;
    margin-bottom: 1em;
	text-align: center;
}

blockquote p{
	font-family: "optima", serif;
	font-style: italic;
	max-width: 75%;
	margin: auto;
}

cite{
    display: block;
    padding: 1em 0;
    font-size: .65em;
    color: inherit;
}

blockquote:before,
blockquote::after,
q:before,
q::after{content:none;}

hr{
    width: 80%;
    margin-bottom: 1em;
    border: none;
    border-bottom: 2px solid #d2232a;
}

figure,
figure.alignnone,
figure.aligncenter,
figure.alignleft,
figure.alignright{display: table;}

figcaption{
    display: table-caption;
    caption-side: bottom;
    font-size: .85em;
	font-style: italic;
}

h1,
h2,
h3,
h4,
h5,
h6{
	font-family: "optima";
	font-weight: normal;
	line-height: 1.2;
}

h1{
    font-size: 2.25rem;
	text-align: center;
}

h2{font-size: 2.25rem;}

h3{font-size: 2em;}

h4,
h5,
h6{font-size: 1.3rem;}

p,
ul,
li{
    font-family: "opensans regular";
    font-size: 1em;
	line-height: 1.5;
}

strong,
p strong,
li strong{font-family: "opensans semibold";}

button,
.button{
	-webkit-appearance: none;
	display: block;
	max-width: 250px;
	margin: 1em auto;
	padding: 1em 1.5em;
	border: none;
	border-radius: 0;
	background-color: #d2232a;
	font-family: "opensans regular";
	font-size: 1em;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	text-align: center;
	transition: all .2s ease-in-out;
}

	button:hover,
	.button:hover,
	input[type="submit"]:hover,
	input[type="button"]:hover,
	input[type="reset"]:hover{transform: scale(1.05);}

blockquote,
q{quotes:none;}

blockquote::before,
blockquote::after,
q::before,
q::after{content:none;}

/*!--------------- Main Elements / Classes ----------------*/
.alignleft,
.alignright,
.aligncenter,
.alignnone{
	float: none;
	margin: 0 auto 1.5em;
}

@media (min-width: 25em){

	.alignright{
    	display: block;
    	float: right;
    	margin: 1em 0 1em 1em;
	}

	.alignleft{
		display: block;
		float: left;
		margin: 1em 1em 1em 0;
	}

	.aligncenter,
	.alignnone{
		display: block;
		margin: auto;
		margin-bottom: 1em;
	}

}

.full-width{
	background: #fff;
	width: 100%;
	padding: 1.5em 0;
}

.container{
	max-width: 1280px;
	margin-left: auto;
	margin-right: auto;
}

body.page article{margin-top: 1.5rem;}

article .block:last-of-type{margin-bottom: 1.5em;}

.block h1 a,
.block h2 a,
.block h3 a,
.block h4 a,
.block h5 a,
.block h6 a,
.block li a,
.block p a,
table td a:not(.button){
	text-decoration: none;
	color: #d2232a;
	background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
				linear-gradient(to right, rgba(179, 41, 46, 1), rgba(179, 41, 46, 1), rgba(255, 255, 255, 0));
	background-size: 100% .15em, 0 .15em;
	background-position: 100% 100%, 0 100%;
	background-repeat: no-repeat;
	transition: background-size 400ms;
}

	.block h1 a:hover,
	.block h2 a:hover,
	.block h3 a:hover,
	.block h4 a:hover,
	.block h5 a:hover,
	.block h6 a:hover,
	.block li a:hover,
	.block p a:hover,
	table td a:hover{background-size: 0 .15em, 100% .15em;}

.wysiwyg-block table ul li::before{display: none;}

/*! Flex */
.flex-container{
	display: -moz-box;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: -ms-flex;
	display: box;
	display: flex;
}
.reverse{
	-ms-flex-direction: row-reverse;
	-moz-flex-direction: row-reverse;
	-webkit-flex-direction: row-reverse;
	flex-direction: row-reverse;
}
.spaced{
	-ms-flex-pack: justify;
	-moz-justify-content: space-around;
	-webkit-justify-content: space-around;
	justify-content: space-around;
}
.spaced-between{
	-ms-flex-pack: justify;
	-moz-justify-content: space-between;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.centered{
	-ms-flex-align: center;
	-moz-align-items: center;
	-webkit-align-items: center;
	align-items: center;
}
.axis-centered{
	-ms-flex-pack: center;
	-moz-justify-content: center;
	-webkit-justify-content: center;
	-moz-align-items: center;
	-webkit-align-items: center;
	justify-content: center;
	align-items: center;
}
.start{
	-ms-flex-align: start;
	-moz-align-content: flex-start;
	-webkit-align-items: flex-start;
	-webkit-align-content: flex-start;
	-moz-align-items: flex-start;
	align-content: flex-start;
	align-items: flex-start;
}
.end{
	-ms-flex-align: end;
	-moz-align-items: flex-end;
	-webkit-align-items: flex-end;
	align-items: flex-end;
}
.columns{
	-ms-flex-direction: column;
	-moz-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
}
.wrap{
	-ms-flex-wrap: wrap;
	-moz-flex-wrap: wrap;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}

	.flex-item{
		-ms-flex: 0 0 auto;
		-moz-box-flex: 0 0 auto;
		-webkit-flex: 0 0 auto;
		flex: 0 0 auto;
	}
	.flex-item-33{
		width: 31.333%;
		margin: 0 1% 0;
	}
	.flex-item-50{
		width: 98%;
		margin: 0 1% 1.5em;
	}

	@media (min-width: 43.75em){

	    .flex-item-50{width: 48%;}

	}

	    .flex-content{
            display: flex;
            flex-direction: column;
        }
            .flex-content > *{flex: 1 0 auto;}

.gap{gap: 1rem;}

.gutter{margin-bottom: 1.5em;}

.gutter-small{margin-bottom: 1em;}

.gutter-large{margin-bottom: 3em;}

.guttering{
	padding-top: 1em;
	padding-bottom: 1em;
}

/*!------------------- Header --------------------*/
.top-bar{
	background-color: #373737;
	height: 40px;
	font-family: "opensans regular";
}

	.top-bar a{
		color: #fff;
		text-decoration: none;
	}

	.top-bar-login-text{display: none;}

	.top-bar-login,
	.top-bar-cart{
		display: flex;
		border: 1px solid #fff;
		width: 28px;
		height: 28px;
		border-radius: 50%;
		position: relative;
	}

		.top-bar-cart .basket-count{
			position: absolute;
			display: flex;
			justify-content: center;
			align-items: center;
			top: -5px;
			right: -10px;
			background-color: #fff;
			font-size: .7rem;
			color: #111;
			width: 16px;
			height: 16px;
			border-radius: 50%;
		}

	.top-bar > div > div{
		display: flex;
		text-align: center;
		height: 40px;
		border-left: 1px solid #555555;
	}

	.top-bar > div > div:nth-of-type(1){
		width: 20%;
		border-left: none;
	}
	.top-bar > div > div:nth-of-type(2){width: 49%;}
	.top-bar > div > div:nth-of-type(3),
	.top-bar > div > div:nth-of-type(4){width: 15%;}

.burger{
	position: relative;
	width: 32px;
	height: 32px;
	cursor: pointer;
}

	.burger span{
		display: block;
		width: 32px;
		height: 4px;
		background-color: #fff;
		transition: all .5s ease;
	}

	.burger span:nth-of-type(2),
	.burger span:nth-of-type(3){margin-top: 4px;}

	.burger.active span:nth-of-type(2){opacity: 0;}

	.burger.active span:nth-of-type(1){
		width: 35px;
		transform: rotate(-45deg) translate(-5px, 7px);
	}

	.burger.active span:nth-of-type(3){
		width: 35px;
		transform: rotate(45deg) translate(-4px, -6px);
	}

.logo{
	width: 270px;
	margin: auto;
	padding: 1em 0;
}

@media (min-width: 48em){

	.logo-search{padding: 0 1.5em;}

	.top-bar > div{justify-content: space-between;}

	.top-bar > div > div{border-left: none;}

	.top-bar > div > div:nth-of-type(2){
		width: auto;
		flex: 2 0 auto;
		justify-content: flex-start;
		padding-left: 1.5em;
	}

	.top-bar > div > div:nth-of-type(3){
		width: 130px;
		align-content: flex-end;
	}

	.top-bar > div > div:nth-of-type(4){
		width: 50px;
		margin-right: 1.5em;
	}

	.top-bar-login-text{
		display: inline-block;
		padding-right: 1em;
	}

	.logo-search{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

}

@media (min-width: 81em){

	.top-bar > div > div:nth-of-type(2){padding-left: 0;}

	.top-bar > div > div:nth-of-type(4){margin-right: 0;}

	.logo-search{padding: 0;}

}

/*! ---- Search ---- */
.dgwt-wcas-search-wrapp{
	font-family: "opensans regular";
	width: calc(100% - 3em);
	margin: 0 auto 1em;
}

	.dgwt-wcas-suggestions-wrapp,
	.dgwt-wcas-details-wrapp{font-family: "opensans regular";}

		.dgwt-wcas-suggestions-wrapp a{text-decoration: none;}

.dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input{
	max-width: 590px;
	height: 45px;
	border-color: #333;
	border-width: 1px;
	border-radius: 0;
	border: 1px solid #333;
	font-size: 1.1rem;
	opacity: 1;
}

.dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder{
	opacity: 1;
	font-style: normal;
	color: #333;
}

.dgwt-wcas-no-submit .dgwt-wcas-ico-magnifier{
	left: auto;
	right: 20px;
	opacity: 1;
	max-height: none;
	max-width: none;
	width: 25px;
	height: 25px;
}

.dgwt-wcas-active .dgwt-wcas-ico-magnifier{display: none;}

.dgwt-wcas-no-submit .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input{padding: 10px 40px 10px 15px;}

.dgwt-wcas-pd-addtc-form .input-text.qty{max-width: 75px;}

@media (min-width: 48em){

	.logo-search .dgwt-wcas-search-wrapp{max-width: 400px;}

	.logo-search .dgwt-wcas-search-wrapp{margin: 0;}

}

/*! Menu - Product menu - Mobile */
#desktop-product-menu{display: none;}

#product-menu{
	display: none;
	position: absolute;
	top: 2.6rem;
	left: 0;
	width: 100%;
	background-color: #fff;
	z-index: 200;
}

	.product-menu .sub-menu{display: none;}

	.product-menu span{display: block;}

	.product-menu li > span{padding: .75rem 1rem;}

	.product-menu > li > span{
		width: 100%;
		background-color: #d2232a;
		border-bottom: 1px solid #c7c7c7;
		position: relative;
		text-align: center;
	}

	.product-menu .menu-odd > li.menu-item-has-children span{position: relative;}

	.product-menu .menu-odd > li.menu-item-has-children > span::after{
		content: "";
		display: block;
		position: absolute;
		right: 1rem;
		top: .55rem;
		width: 22px;
		height: 22px;
		background-image: url(images/right-chevron-menu.svg);
		background-repeat: no-repeat;
		background-position: center center;
		background-size: 22px;
		transition: all .25s ease;
	}

	.product-menu .menu-odd > li.menu-item-has-children > span.show::after{transform: rotate(90deg);}

	.product-menu > li a{
		font-family: "opensans regular", sans-serif;
		font-size: 1.6rem;
		color: #fff;
		text-decoration: none;
	}

.sub-menu{background-color: #c7c7c7;}

.sub-sub-menu{background-color: #f2f2f2;}

.product-menu .sub-menu li a{
	font-family: "opensans regular", sans-serif;
	color: #222;
}

.sub-menu > li a{font-size: 1.2rem;}

.sub-sub-menu > li a{font-size: 1rem;}

.sub-sub-menu > li.current-menu-item a{text-decoration: underline;}

.sub-sub-menu > li a:hover{text-decoration: underline;}

/*! Menu - Product menu - Desktop */
@media (min-width: 64em){

	/* force the mobile to close if window is resized */
	#product-menu,
	.top-bar > div > div:nth-of-type(1){display: none !important;}

	#desktop-product-menu{
		display: block;
		background-color: #d2232a;
	}

	nav > .container{margin: auto;}

	.desktop-product-menu{
		position: relative;
		width: 100%;
	}

	.desktop-product-menu > li{width: 20%;}

	.desktop-product-menu .sub-menu-desktop{
		visibility: hidden;
		opacity: 0;
		position: absolute;
		z-index: -1;
		top: 100%;
		left: 0;
		width: 100%;
		background-color: #fff;
		box-shadow: 0 10px 10px 5px rgba(33, 33, 33, .2);
		transition: all 0s ease;
	}

	.desktop-product-menu > .menu-item-has-children{position: static;}

	.desktop-product-menu > .menu-item{
		display: flex;
		align-items: center;
		justify-content: center;
		padding: .715rem 1.8rem;
		border-left: 1px solid #fff;
	}

		.desktop-product-menu > .menu-item > a{
			display: block;
			font-family: "opensans regular", sans-serif;
			font-size: 1.2rem;
			color: #fff;
			text-decoration: none;
			text-align: center;
		}

	.desktop-product-menu > .menu-item:first-of-type{border-left: none;}

	.desktop-product-menu > .menu-item.menu-item-has-children:hover{background-color: #fff;}

		.desktop-product-menu > .menu-item.menu-item-has-children:hover a{color: #333;}

	/* desktop large sub-menu - begin */
	.desktop-product-menu > .menu-item.menu-item-has-children:hover > .sub-menu-desktop{
		display: flex;
		visibility: visible;
		opacity: 1;
		flex-direction: row-reverse;
		justify-content: space-between;
		max-width: 1400px;
		height: auto;
		min-height: 420px;
		transition-delay: .15s;
		overflow: hidden;
		z-index: 9;
	}

	.outer-menu-items{width: 66%;}

	.sub-menu-image{
		display: flex;
		flex-direction: column;
		position: relative;
		min-width: 345px;
		max-width: 345px;
		min-height: 392px;
	}

		.sub-menu-image img{
			object-fit: cover;
			width: 100%;
		}

		.sub-menu-image-desc{
			width: 100%;
			padding: .7em 1em;
			background-color: #333;
			color: #fff;
			flex-grow: 1;
		}

			.sub-menu-image-desc a{
				color: inherit;
				text-decoration: none;
			}

			.sub-menu-image-desc p{line-height: 1.2;}

	@media (min-width: 67.5em){

		.sub-menu-image{
			min-width: 345px;
			max-width: 345px;
		}

	}

	@media (min-width: 73.75em){

		.sub-menu-image{
			min-width: 345px;
			max-width: 345px;
		}

	}

	@media (min-width: 76em){

		.sub-menu-image{
			min-width: 425px;
			max-width: 425px;
		}

	}

	@media (min-width: 90em){

		.desktop-product-menu > .menu-item.menu-item-has-children:hover > .sub-menu-desktop{height: 500px;}

		.sub-menu-image{
			min-width: 475px;
			max-width: 475px;
		}

	}

	.inner-menu-items{
		display: flex;
		min-height: 420px;
	}

	@media (min-width: 90em){

		.inner-menu-items{min-height: 500px;}

	}

	.desktop-sub-sub-menu li{border-bottom: 1px solid #e0e0e0;}

	.desktop-sub-sub-menu li:last-of-type{border-bottom: none;}

	/* sub-menu parent container */
	.inner-menu-items > .desktop-sub-sub-menu{
		position: relative;
		min-height: 100%;
		max-height: 420px;
		width: 50%;
		border-right: 1px solid #c7c7c7;
	}

	/* sub-menu parent item*/
	.inner-menu-items > .desktop-sub-sub-menu > .menu-item{width: 100%;}

	.inner-menu-items > .desktop-sub-sub-menu > .menu-item > a{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		font-family: "opensans regular", sans-serif;
		font-size: 1.2rem;
		text-decoration: none;
		color: #222;
	}

	.inner-menu-items > .desktop-sub-sub-menu > .menu-item-has-children > a::after{
		content: "";
		display: inline-block;
		width: 25%;
		height: 14px;
		background-image: url("images/right-chevron-menu.svg");
		background-repeat: no-repeat;
		background-position: right;
		transition: all .25s ease;
		z-index: 999;
	}

	.inner-menu-items > .desktop-sub-sub-menu > .menu-item-has-children:hover > a::after{transform: translateX(3px);}

	/* dropdown sub-menus */
	.inner-menu-items .menu-item-has-children > ul{
		position: absolute;
		top: 0;
		left: 100%;
		max-width: 455px;
		visibility: hidden;
		padding: 0;
		list-style: none;
		opacity: 0;
		transition: all .25s ease;
		z-index: 9;
		width: 100%;
		min-height: 100%;
		max-height: 320px;
		border-right: 1px solid #c7c7c7;
		overflow-y: scroll;
		overflow-x: hidden;
	}

	@media (min-width: 90em){

		.inner-menu-items .menu-item-has-children > ul{max-height: 500px;}

	}

	/* Custom Scrollbar for WebKit browsers */
	.inner-menu-items .menu-item-has-children > ul::-webkit-scrollbar{width: 10px;}

	/* Track */
	.inner-menu-items .menu-item-has-children > ul::-webkit-scrollbar-track{background: #fff;}

	/* Handle */
	.inner-menu-items .menu-item-has-children > ul::-webkit-scrollbar-thumb{background: #888;}

	/* Handle on hover */
	.inner-menu-items .menu-item-has-children > ul::-webkit-scrollbar-thumb:hover{background: #555;}

		.inner-menu-items .menu-item a{
			display: block;
			padding: .75em .5em;
			width: 100%;
		}

			.inner-menu-items .menu-item:hover > a{background-color: #f2f2f2;}

		/* sub-menu child item */
		.inner-menu-items > .desktop-sub-sub-menu > li > .desktop-sub-sub-menu > li{min-width: 380px;}

		/* sub-menu child item a:link */
		.inner-menu-items > .desktop-sub-sub-menu > li > .desktop-sub-sub-menu > li a{
			font-size: 1.2rem;
			color: #222;
			text-decoration: none;
			padding: .75em .5em;
		}

	.inner-menu-items .menu-item-has-children:hover > ul{
		visibility: visible;
		opacity: 1;
	}

}

/*!------------------- Footer --------------------*/
footer{
	background-color: #363636;
	color: #fff;
	font-size: .85rem;
	padding-top: 3em;
	border-top: 2px solid #545454;
}

	footer h4{
		text-transform: uppercase;
		margin-bottom: .75em;
	}

	address{
		font-style: normal;
		line-height: 1.3;
	}

	footer ul li{line-height: 2;}

	footer a{
		color: #fff;
		text-decoration: none;
	}

	footer > .container > div{
		border-top: 2px solid #545454;
		padding: 1.5em;
	}

	footer > .container > div:first-of-type{border-top: none;}

	p.johnbright-address{margin-bottom: 1em;}

	.footer-links li{line-height: 1.5;}

	.footer-opening-times{line-height: 1.8;}

	.social-item::before{
		display: inline-block;
		content: " ";
		width: 32px;
		height: 32px;
		background-size: 18px;
		background-repeat: no-repeat;
		background-color: #d2232a;
		background-position: center;
		border-radius: 50%;
		margin: 5px;
	}

	.social-facebook::before{background-image: url("images/icon-facebook.svg");}
	.social-twitter::before{background-image: url("images/icon-twitter.svg");}
	.social-instagram::before{background-image: url("images/icon-instagram.svg");}
	.social-whatsapp::before{background-image: url("images/icon-whatsapp.svg");}
	.social-linkedin::before{background-image: url("images/icon-linkedin.svg");}
	.social-youtube::before{background-image: url("images/icon-youtube.svg");}
	.social-pinterest::before{background-image: url("images/icon-pinterest.svg");}

.copyright{
	background-color: #363636;
	color: #fff;
	padding: 1.5em;
	border-top: 2px solid #545454;
}

	.copyright p{line-height: 2;}

@media (min-width: 48em){

	footer > .container{
		flex-direction: row;
		flex-wrap: wrap;
	}

	footer > .container > div{
		width: 50%;
		border-top: none;
		border-left: 2px solid #545454;
	}

	.footer-contact{order: 4;}
	.footer-links-1{order: 1;}
	.footer-links-2{order: 2;}
	.footer-opening{order: 3;}

	.container .footer-socials{
		order: 5;
		width: 100%;
	}

	.footer-opening img{margin: 0;}

	.copyright small{text-align: center;}

}

@media (min-width: 64em){

	footer > .container > div{width: 25%;}

	.footer-contact{order: 1;}
	.footer-links-1{order: 2;}
	.footer-links-2{order: 3;}
	.footer-opening{order: 4;}
	.footer-socials{
		order: 5;
		width: 100%;
	}

	footer > .container > div.footer-contact{border: none;}

	footer > .container > div.footer-socials{border: none;}

	.footer-socials > div{justify-content: flex-start;}

	footer .container.copyright{
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-between;
	}

		.copyright .footer-term-links,
		.copyright small{width: 50%;}

		.footer-term-links{
			display: flex;
			justify-content: flex-end;
		}

			.footer-term-links li{padding-left: 1em;}

			.footer-term-links li::before{
				content: " | ";
				display: inline-block;
				padding-right: 1em;
			}

			.footer-term-links li:first-of-type::before{content: none;}

}

@media (min-width: 90em){

	footer > .container > div{padding: 0;}

		footer > .container > div.footer-contact{
			padding: 0;
			border: none;
		}

		.container.copyright{
			padding: 1em 0;
		}

		footer > .container > div.footer-links-1,
		footer > .container > div.footer-links-2,
		footer > .container > div.footer-opening{padding-left: 1.5em;}

		footer > .container > div.footer-socials{padding: 1em 0;}

}

/*!------ Default WP Galleries ------*/
.gallery{
	padding: 0;
	list-style-type: none;
	margin: 0 auto 18px;
}

.gallery::after{
	display: block;
	content: " ";
	clear: both;
}

	.gallery .gallery-item{
		float: left;
		margin-top: 0;
		text-align: center;
		width: 33%;
	}

		.gallery .gallery-item .gallery-icon{display: inline-block;}

	.gallery-columns-2 .gallery-item{width: 50%;}

	.gallery-columns-4 .gallery-item{width: 25%;}

	.gallery img{padding: 8px;}

	.gallery img:hover{background: white;}

	.gallery-columns-2 .attachment-medium{
		max-width: 92%;
		height: auto;
	}

	.gallery-columns-4 .attachment-thumbnail{
		max-width: 84%;
		height: auto;
	}

	.gallery .gallery-caption{
		color: #888;
		font-size: 12px;
		margin: 0 0 12px;
	}

	.gallery dl,
	.gallery dt{margin: 0;}

	.gallery br + br{display: none;}

/*!------ Thickbox overrides -------*/
	#TB_overlay {
		background: #000;
		opacity: 0.7;
		filter: alpha(opacity=70);
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 100050;
	}

	#TB_window {
		position: fixed;
		background-color: #fff;
		z-index: 100050;
		visibility: hidden;
		text-align: left;
		top: 50%;
		left: 50%;
		-webkit-box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
		box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 );
	}

	#TB_window img#TB_Image {
		display: block;
		margin: 15px 0 0 15px;
		border-right: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		border-top: 1px solid #666;
		border-left: 1px solid #666;
	}

	#TB_caption{
		height: 25px;
		padding: 7px 30px 10px 25px;
		float: left;
	}

	#TB_closeWindow {
		height: 25px;
		padding: 11px 25px 10px 0;
		float: right;
	}

	#TB_closeWindowButton {
		position: absolute;
		left: auto;
		right: 0;
		width: 29px;
		height: 29px;
		border: 0;
		padding: 0;
		background: none;
		cursor: pointer;
		outline: none;
		-webkit-transition: color .1s ease-in-out, background .1s ease-in-out;
		transition: color .1s ease-in-out, background .1s ease-in-out;
	}

	#TB_ajaxWindowTitle {
		float: left;
		font-weight: 600;
		line-height: 29px;
		overflow: hidden;
		padding: 0 29px 0 10px;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: calc( 100% - 39px );
	}

	#TB_title {
		background: #fcfcfc;
		border-bottom: 1px solid #ddd;
		height: 29px;
	}

	#TB_ajaxContent {
		clear: both;
		padding: 2px 15px 15px 15px;
		overflow: auto;
		text-align: left;
		line-height: 1.4em;
	}

	#TB_ajaxContent.TB_modal {
		padding: 15px;
	}

	#TB_ajaxContent p {
		padding: 5px 0px 5px 0px;
	}

	#TB_load {
		position: fixed;
		display: none;
		z-index: 100050;
		top: 50%;
		left: 50%;
		background-color: #E8E8E8;
		border: 1px solid #555;
		margin: -45px 0 0 -125px;
		padding: 40px 15px 15px;
	}

	#TB_HideSelect {
		z-index: 99;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #fff;
		border: none;
		filter: alpha(opacity=0);
		opacity: 0;
		height: 100%;
		width: 100%;
	}

	#TB_iframeContent {
		clear: both;
		border: none;
	}

	.tb-close-icon {
		display: block;
		color: #666;
		text-align: center;
		line-height: 29px;
		width: 29px;
		height: 29px;
		position: absolute;
		top: 0;
		right: 0;
	}

	.tb-close-icon:before {
		content: "\f158";
		font: normal 20px/29px dashicons;
		speak: never;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	#TB_closeWindowButton:hover .tb-close-icon,
	#TB_closeWindowButton:focus .tb-close-icon {
		color: #006799;
	}

	#TB_closeWindowButton:focus .tb-close-icon {
		-webkit-box-shadow:
			0 0 0 1px #5b9dd9,
			0 0 2px 1px rgba(30, 140, 190, .8);
		box-shadow:
			0 0 0 1px #5b9dd9,
			0 0 2px 1px rgba(30, 140, 190, .8);
	}


div#TB_window{
	width: 100%;
	max-width: 930px;
	overflow: hidden;
	background-color: #fff;
	border-radius: 0;
	box-shadow: 0 0 25px 5px rgba(33,33,33,.25);
	margin-top: 0 !important;
	top: 5%;
}

#TB_window a img#TB_Image{
	margin: 0;
	width: 100%;
}

div#TB_closeWindow{
	float: none;
	position: absolute;
	top: 0;
	right: .5em;
	width: 41px;
	height: 41px;
	background-image: url(images/quantity-plus.svg);
	background-repeat: no-repeat;
}

	#TB_closeWindow .tb-close-icon::before{display: none;}

	button#TB_closeWindowButton{
		background-image: url(images/quantity-plus.svg);
		background-repeat: no-repeat;
		background-size: 34px;
		background-color: #fff;
		background-position: center;
		border-radius: 50%;
		width: 41px;
		height: 41px;
		margin: 0;
		transform: rotate(45deg);
	}

	div#TB_caption{
		height: auto;
		padding: 1em;
	}

@media (min-width: 64em){

	div#TB_window{
		border-radius: 10px;
		height: auto;
		min-height: 0;
		max-height: 90vh;
	}

}


/*!------ Tidy up, helper classes ------*/

/*! Contains floats? Clearfix it! */
.cf::after{
	content: " ";
	display: block;
	clear: both;
}

/*!------ debug ------*/
/* html body.logged-in *{outline: 1px dotted lime;} */
/**********************/


/** Dedicated styling for the Price By Quantity For WooCommerce pricing tables
 *  ------------------------------------------------------------------------------------------------
**/

.theme-johnbright2021 .pbq_quantity_pricing_tables {
	margin: 0 auto 2rem;
}

.theme-johnbright2021 .pbq_quantity_pricing_tables p {
	font-size: 0.9rem;
	margin-bottom: 1em;
	font-weight: bold;
}

.theme-johnbright2021 .pbq_quantity_pricing_tables table {
	text-align: left;
	border-collapse: collapse;
}

.theme-johnbright2021 .pbq_quantity_pricing_tables th {
	border-bottom: 1px solid #d2232a;
}

.theme-johnbright2021 .pbq_quantity_pricing_tables tr:nth-child(2n+1) td,
.theme-johnbright2021 .pbq_quantity_pricing_tables tr:nth-child(2n+1) th {
	padding: 0.5rem;
	background: #f9f9f9 !important;
	color: #333333 !important;
}

.theme-johnbright2021 .pbq_quantity_pricing_tables tr:nth-child(2n+2) td,
.theme-johnbright2021 .pbq_quantity_pricing_tables tr:nth-child(2n+2) th {
	padding: 0.5rem;
	background: #fcfcfc !important;
	color: #333333 !important;
}

.theme-johnbright2021 .pbq_quantity_pricing_tables tr:not(tr:first-child) {
	cursor: pointer;
}

.theme-johnbright2021 .pbq_quantity_pricing_tables tr:hover td {
	background: #eeeeee !important;
	color: #222222 !important;
}

/** Expandable Content that doesn't rely on JS
 *  ------------------------------------------------------------------------------------------------
 *  Default layout:
<div class="expandable-content expandable-content--checkbox">
  <input class="visuallyhidden--always" id="123" type="checkbox">
  <label class="expandable-content-trigger" for="123"><span class="button">Click Me</span></label>
  <div class="expandable-content__content">...content here</div>
</div>
**/
.visuallyhidden:not(:focus):not(:active),
.screen-reader-text:not(:focus):not(:active),
.visuallyhidden--always {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	border: 0;
	padding: 0;
	white-space: nowrap;
	clip-path: inset(100%);
	clip: rect(0 0 0 0);
	overflow: hidden;
}

.flow > .visuallyhidden:first-child:not(:focus):not(:active) + *,
.flow > .screen-reader-text:first-child:not(:focus):not(:active) + *,
.flow > .visuallyhidden--always:first-child + * {
	margin-top: 0;
}

.expandable-content {
	position: relative;
	text-align: left;
}

.expandable-content--right {
	text-align: right;
}

.expandable-content--center {
	text-align: center;
}

.expandable-content .expandable-content__content {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	border: 0;
	padding: 0;
	white-space: nowrap;
	clip-path: inset(100%);
	clip: rect(0 0 0 0);
	overflow: hidden;
	opacity: 0;
	transition: opacity 600ms ease;
}

/*
WordPress loves to add paragraphs
-
if we're adding these with a shortcode or using the <!--more--> tag then it's highly likely that the
first child of the content will be <p></p> or <br>
*/
.expandable-content__content > p:empty:first-child,
.expandable-content__content > p:empty:last-child,
.expandable-content__content > br:first-child {
	display: none;
}

.expandable-content__content > p:empty:first-child + *,
.expandable-content__content > br:first-child + * {
	margin-top: 0;
}

/* .expandable-content > label,
.expandable-content--readable.expandable-content--readable.expandable-content--readable .expandable-content__content {
	margin-left: auto;
	margin-right: auto;
} */

.expandable-content > label {
	display: inline-block;
}

.expandable-content > input:checked ~ .expandable-content__content,
.expandable-content__content:focus-within,
.expandable-content--forced-open .expandable-content__content {
	position: relative;
	width: auto;
	height: auto;
	margin: 0;
	clip-path: none;
	clip: auto;
	overflow: hidden;
	margin-top: 1rem;
	white-space: normal;
	opacity: 1;
}

.expandable-content-trigger:hover{
	cursor: pointer;
}

.expandable-content-trigger .button {
	/* prevents text select */
	user-select: none;
	position: relative;
	transition:
		color 600ms ease,
		background 600ms ease;
	text-decoration: underline;
	text-decoration-color: currentcolor;
	text-underline-offset: 0.3rem;
	padding: 0;
	margin: 0;
	transform: none;
	background: transparent;
	color: inherit;
}

/* we want focus styles on the `button` if the hidden input has focus */
/* this only works if the button is inside the expandable-content div */
/* if you need an external trigger then js has to fill in the gaps on focus */
/*
<div class="expandable-content expandable-content--checkbox">
	<input class="visuallyhidden--always" id="123" type="checkbox">
	<label class="expandable-content-trigger" for="123"><span class="button">Click Me</span></label>
	<div class="expandable-content__content">...content here</div>
</div>
*/
.expandable-content > input:focus-visible ~ label .button,
.expandable-content-trigger--input-has-focus .button {
	outline: 0.1rem dashed currentcolor;
	outline-offset: 0.2rem;
}

/** dropdown markers for modern browsers - in entry content
 *  ------------------------------------------------------------------------------------------------
**/

@supports (clip-path: inset(50%)) {

	.expandable-content:not(.expandable-content--no-toggle) > label {
		position: relative;
		padding-left: 1.5rem;
	}

	.expandable-content.expandable-content:not(.expandable-content--no-toggle) > label::after {
		content: ' ';
		display: block;
		height: 0.5rem;
		width: 0.5rem;
		background-color: currentcolor;
		border: inherit;
		position: absolute;
		top: 50%;
		left: 0;
		clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
		border-radius: 3px;
		opacity: 1;
		transition: transform ease 300ms;

		/*
		when the triangle is rotated on the diagonal it's √2 times as tall
		which translates to roughly 1.414 times taller than being unrotated
		(100*1.414) * 0.5 = 70.7%
		so we need to offset by -29.3% to compensate for the extra height...
		*/
		transform: translateY(-29.3%) rotate(-135deg);
	}

	.expandable-content.expandable-content:not(.expandable-content--no-toggle) > input:checked ~ label::after,
	.expandable-content--forced-open.expandable-content:not(.expandable-content--no-toggle) label::after,
	.expandable-content-trigger--input-is-active::after {
		transform: translateY(-50%) rotate(-45deg);
	}
}

/** Styling newsletter in the footer
 *  ------------------------------------------------------------------------------------------------
**/
.footer-newsletter {
	padding: 0 1.5rem 3rem;
	text-align: center;
	font-size: 1rem;
}

.footer-newsletter > h2 {
	margin-bottom: 1rem;
}

.footer-newsletter .gform_heading {
	display: none;
}

.footer-newsletter .gform_wrapper form {
	display: block;
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

.footer-newsletter .gform_wrapper form .gfield_validation_message {
	/*
	this effectively hides the error message about the email address formatting
	but we still get the large one above the input...
	*/
	position: absolute;
	top: 100%;
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gform_validation_errors {
	max-width: 450px;
	margin: 0 auto 1rem;
	border-radius: 0;
	background: #d2232a;
	border: 0;
}

.footer-newsletter.footer-newsletter .gform_wrapper.gform_wrapper .gform_validation_errors h2 {
	color: white;
	font-size: 0.9rem;
	line-height: 1.3;
	font-family: inherit;
}

.footer-newsletter.footer-newsletter .gform_wrapper .gform_fields .ginput_container_email input,
.footer-newsletter.footer-newsletter .gform_wrapper .gform_fields .ginput_container_email input.medium {
	display: block;
	width: 100%;
	line-height: 1.3;
	padding: 0.75rem 100px 0.75rem 0.75rem;
	border: 0;
	border-radius: 0;
	font-size: 1rem;
}

.footer-newsletter .gform_confirmation_message {
	padding: 0.75rem;
	line-height: 1.3;
	font-size: 1rem;
}

.footer-newsletter.footer-newsletter .gform_wrapper form .gform_footer {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
}

.footer-newsletter .gform_wrapper .gform_footer .gform_button {
	margin: 0;
	height: 100%;
	position: absolute;
	top: 0;
	right: 0;
	border-radius: 0;
	transition: transform 200ms ease;
	font-size: 1rem;
}

.footer-newsletter .gform_wrapper .gform_footer .gform_button:hover,
.footer-newsletter .gform_wrapper .gform_footer .gform_button:focus {
	transform: scale(1.04);
}