/* CSS Document */

/*	J • S K A G G S
=================================================================================================
	jt@jonnyballer.com

*/


/*	Resets
============================================================================================== */
:root {
  --color-navy: #002853;
  --color-blue: #224b7a;
  --color-gold: #af9670;
  --color-gray: #e7e8e9;
}
html, body, h2, h3, h4, p, ul, li, form, fieldset, label, img, div {
	margin: 0;
	padding: 0;
	border: none;
	-webkit-text-size-adjust: none;
}
html, body {
	height: 100%;
	min-height: 100%;
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5em;
	color: var(--color-navy);
}
html { background: #ffffff; }
a[href^="tel"] { cursor: pointer; }
sup,
sub {
    position: relative;
	font-size: 0.75em;
	line-height: 0;
}
sup { top: 0.2em; }
.centre {
    position: relative;
    margin: 0 auto 0;
    padding: 100px 50px 150px;
	max-width: 1140px;
	z-index: 10;
}
body:has(.footer.cta) .content-wrapper .panel:last-child .centre { padding-bottom: 175px; }
.clearfix, .centre { zoom: 1; }
.clearfix:before, .centre:before  { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after, .centre:after { content: "\0020"; display: block; height: 0; overflow: hidden; clear: both; }
.scrollTo,
.scrollTo:hover,
.csst,
.csst:hover,
.csst *,
.csst *:hover,
.btn,
.btn:hover {
    -webkit-transition: all 0.165s ease;
    -moz-transition: all 0.165s ease;
    -ms-transition: all 0.165s ease;
    -o-transition: all 0.165s ease;
    transition: all 0.165s ease;
}
.link,
.link:hover {
	color: var(--color-blue) !important;
	font-size: 0.75em;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
    -webkit-transition: all 0.165s ease;
    -moz-transition: all 0.165s ease;
    -ms-transition: all 0.165s ease;
    -o-transition: all 0.165s ease;
    transition: all 0.165s ease;
	cursor: pointer;
}
.link:hover { color: var(--color-gold) !important; }
.border-box {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.fauxlink, .fauxlink:hover { cursor: pointer; }
.elem-flip {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}
p + h2, p + h3, p + h4, p + h5, p + h6,
p + .h2, p + .h3, p + .h4, p + .h5, p + .h6,
ul + h2, ul + h3, ul + h4, ul + h5, ul + h6,
ul + .h2, ul + .h3, ul + .h4, ul + .h5, ul + .h6,
ol + h2, ol + h3, ol + h4, ol + h5, ol + h6,
ol + .h2, ol + .h3, ol + .h4, ol + .h5, ol + .h6
{ margin-top: 45px; }
.centre a,
.centre a:hover {
  text-decoration: none;
  -webkit-transition: all 0.165s ease;
  -moz-transition: all 0.165s ease;
  -ms-transition: all 0.165s ease;
  -o-transition: all 0.165s ease;
  transition: all 0.165s ease;
}
input[type=text],
input[type=email],
input[type=number],
input[type=tel],
input[type=password],
select,
textarea {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 1.125em;
	color: #a2aaad;
}

.center { text-align: center; }
img, iframe { max-width: 100%; }
img.framed {
    background: #fff;
    padding: 15px;
    border: 1px solid #d0d3d4;
    box-shadow: 3px 3px 7px rgba(0,0,0,0.10)
}
.wrapper { min-height: 100%; }




/*	Base Classes
============================================================================================== */
.btn {
    position: relative;
    display: inline-block;
    min-width: 150px;
    margin: 75px auto 0;
    padding: 0.75em 1.5em;
	border: 2px solid transparent;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
	letter-spacing: 0.2em;
    cursor: pointer;
}
.btn:hover {

}
.btn.gold {
    color: #ffffff !important;
    background: var(--color-gold);
    border: 2px solid var(--color-gold);
}
.btn.gold:hover {
    color: var(--color-gold) !important;
    background: #ffffff;
    border: 2px solid var(--color-gold);
}
.btn.ghost {
    color: var(--color-navy) !important;
    background: transparent;
    border: 2px solid var(--color-navy);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
.btn.ghost:hover {
    color: var(--color-gold) !important;
    background: var(--color-navy);
    border: 2px solid var(--color-navy);
}
.btn.ghost.white {
    color: #ffffff !important;
    background: transparent;
    border: 2px solid #ffffff;
}
.btn.ghost.white:hover {
    color: var(--color-gold) !important;
    background: #ffffff;
    border: 2px solid #ffffff;
}
.btn.ghost.gold {
    color: var(--color-gold) !important;
    background: transparent;
    border: 2px solid var(--color-gold);
}
.btn.ghost.gold:hover {
    color: #ffffff !important;
    background: var(--color-gold);
    border: 2px solid var(--color-gold);
}
.btn.mini {
    font-size: 11px;
}
p + .btn,
ol + .btn,
ul + .btn { margin-top: 0; }
.btn .fa,
.btn .fas,
.btn .fab {
	margin: 0 0.33em;
	font-size: 0.9em;
	vertical-align: baseline;
}
.btn.mini .fa,
.btn.mini .fas,
.btn.mini .fab {}
.imgWhite {
    filter: brightness(0) invert(1);
    -moz-filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
}
.panel.dark *::selection,
.header *::selection,
.footer *::selection,
.banner *::selection,
.mainNav *::selection,
.excerpt .simplesearch-highlight {
	color: #ffffff;
    background:  rgba(34, 75, 122, 0.5); /* WebKit/Blink Browsers */
}
.panel.dark *::-moz-selection,
.header *::-moz-selection,
.footer *::-moz-selection,
.banner *::-moz-selection,
.mainNav *::-moz-selection {
	color: #ffffff;
    background:  rgba(34, 75, 122, 0.5); /* Gecko Browsers */
}
.panel *::selection {
    color: #1d252d;
    background:  rgba(34, 75, 122, 0.5); /* WebKit/Blink Browsers */
}
.panel *::-moz-selection {
    color: #1d252d;
    background:  rgba(34, 75, 122, 0.5); /* WebKit/Blink Browsers */
}
h1, .h1,
h2, .h2,
h3, .h3 {
    display: block;
	position: relative;
    margin: 0 auto 0.6em;
	font-family: 'ivypresto-display', serif;
	font-weight: 600;
	line-height: 0.9em;
}
h4, h5, h6,
.h4, .h5, .h6 {
    display: block;
	position: relative;
    margin: 0 auto 0.6em;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-weight: 600;
	line-height: 0.9em;
	text-transform: uppercase;
	letter-spacing: -0.025em;
}
h1, .h1 { font-size: 3.75em; }
h2, .h2 { font-size: 2.75em; }
h3, .h3 { font-size: 1.50em; }
h4, .h4 { font-size: 1.25em; }
h5, .h5 { font-size: 1.125em; font-weight: 700; color: inherit; }
h6, .h6 { font-size: 1.125em; font-weight: 300;
    color: inherit;
    letter-spacing: 0;
    margin-bottom: 0.25em;
}
.xcaps {
	font-size: 0.75em;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}



/*	LAYOUT
============================================================================================== */

/*	Header
============================================================================================== */
.header {
	position: fixed;
    top: 0;
    width: 100%;
    height: 50px;
    background: rgba(255, 255, 255, 1);
    z-index: 200;
    opacity: 1;
    box-shadow: 0 0px 15px 0 rgba(0, 0, 0,0.15);
    -webkit-transition: all 0.165s ease;
    -moz-transition: all 0.165s ease;
    -ms-transition: all 0.165s ease;
    -o-transition: all 0.165s ease;
    transition: all 0.165s ease;
}
.header:hover,
.header.fixed:hover {
	opacity: 1;
    -webkit-transition: all 0.165s ease;
    -moz-transition: all 0.165s ease;
    -ms-transition: all 0.165s ease;
    -o-transition: all 0.165s ease;
    transition: all 0.165s ease;
}
.header .centre {
    height: 100%;
}
.header .logo {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}
.header .logo img {
	display: block;
}
.header .logo:hover img { filter: invert(1) brightness(0.8); }
.header .fa-light {
	position: absolute;
	top: 5px;
	display: block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 18px;
	color: var(--color-navy);
}
.header .fa-light:hover {
	color: var(--color-gold);
}
.header .fa-bars-staggered,
.header .fa-xmark {
	left: 40px;
}
.header .fa-xmark { display: none; }
.header .fa-search {
	right: 40px;
}



/*	Nav
============================================================================================== */
.mainNav {
	display: block;
    position: fixed;
    top: 50px;
    bottom: 0;
    width: 375px;
    left: 0;
    max-width: 100%;
    background: rgba(255,255,255,0.98);
    z-index: 9;
    box-shadow: 0 0px 15px 0 rgb(0 0 0 / 0%);
    padding: 25px 0px;
    transform: translateX(-100%);
}
.menuOpen .mainNav {
    transform: translateX(0%);
    box-shadow: 0 0px 15px 0 rgb(0 0 0 / 15%);
}
.mainNav ul {
	list-style-type: none;
}
.mainNav > ul {}
.mainNav > ul > li {}
.mainNav > ul > li > a {
    display: block;
    margin: 0 auto;
	padding: 0.25em 50px;
    font-family: 'ivypresto-display', serif;
    font-size: 1.75em;
    font-weight: 600;
    line-height: 0.9em;
    color: var(--color-navy);
	text-decoration: none;
}
.mainNav > ul > li > a:hover {
    color: var(--color-gold);
	text-decoration: none;
}
.mainNav > ul > li > ul {}
.mainNav > ul > li > ul > li {}
.mainNav > ul > li > ul > li > a {
	display: block;
    margin: 0 auto;
	padding: 0.5em 62px;
	font-size: 0.75em;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-navy);
	text-decoration: none;
}
.mainNav > ul > li > ul > li > a:hover {
    color: var(--color-gold);
	text-decoration: none;
}



/*	Footer
============================================================================================== */
.footer {
    position: relative;
    margin: -50px 0 0 0;
    padding: 50px;
    background: #ffffff;
    text-align: center;
    z-index: 1;
}
.footer::before {
	content: "";
	display: block;
	position: absolute;
	top: 70px;
	left: 50px;
	right: 50px;
	height: 1px;
	background: var(--color-gray);
	z-index: 1;
}
.footer .logo {
	position: relative;
    padding: 0 25px;
    background: #ffffff;
	z-index: 2;
}
.footer p {
    font-size: 0.75em;
}
.footer .credits {
    opacity: 0.25;
    margin: 25px auto 0;
}
.footer .links a,
.footer .links span {
	margin: 0 0.125em;
	padding: 0 0.5em;
	color: var(--color-blue);
	text-decoration: none;
}
.footer .links a:hover,
.footer .links span:hover {
	color: var(--color-gold);
	text-decoration: none;
}



/*	Banner
============================================================================================== */
.banner {
    margin: 50px 0 0;
	padding: 0;
	background: #1d252d;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position: relative;
	z-index: 1;
}
.banner-home {
    min-height: 820px;
}
.banner .centre {
	padding: 50px 50px;
}
.banner-home .centre {
	padding: 40px 50px 200px;
}
.banner .bg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    opacity: 1;
    z-index: -2;
}
.banner .overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    z-index: -1;
    background: transparent;
    box-shadow: inset 0 0 20vw #000;
}
.banner h1 {
    color: var(--color-navy);
    line-height: 1em;
}
.banner-home h1 {
    margin: 20% 0 0;
    color: #fafafa;
	text-align: center;
    text-shadow: 0 0 10px rgb(0 0 0 / 20%);
}
	@keyframes h1_em {
		0%   {top: -0.25em; }
		50%  {top: -0.15em; }
		100% {top: -0.25em; }
	}
	@keyframes h1_em_after {
		0%   {bottom: -0.25em; }
		50%  {bottom: -0.15em; }
		100% {bottom: -0.25em; }
	}
.banner-home h1 em {
    position: relative;
    top: -0.25em;
	display: inline-block;
    /* border-bottom: 3px solid var(--color-gold); */
	font-style: normal;
	animation-name: h1_em;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}
.banner-home h1 em:after {
	content: "";
	display: block;
	position: absolute;
    bottom: -0.25em;
	width: 100%;
	height: 3px;
	background: var(--color-gold);
	animation-name: h1_em_after;
	animation-duration: 2s;
	animation-iteration-count: infinite;
}
.banner .ctas { text-align: center; }
.crumbContainer {
	margin: 0 0 0 -12px;
}
.crumbContainer .crumb {
	color: var(--color-navy);
}
.crumbContainer .crumb:after {
    font-variant: normal;
    font: var(--fa-font-solid);
    content: "\f054";
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-size: 0.75em;
	color: var(--color-navy);
	opacity: 0.25;
}
.crumbContainer .crumb.current:after {
	content: "";
}
.crumbContainer .crumb.current{
	padding: 0 1em;
	opacity: 0.25;
}
.crumbContainer .crumb a {
	padding: 5px 1em;
	color: var(--color-navy);
	opacity: 0.25;
	text-decoration: none;
}
.crumbContainer .crumb a:hover {
	color: var(--color-gold);
	opacity: 1;
}
.tpl_7 .crumbContainer .crumb.current { display: none; }




/*	Template Panels
============================================================================================== */
.content-wrapper {
    margin: -1px auto;
    padding: 1px 0;
    background: #ffffff;
}
.panel {
	position: relative;
	margin: -50px 0 0;
	background: #ffffff;
	z-index: 1;
}
.panel.bg-gray { background: var(--color-gray); }
.panel.bg-navy { background: var(--color-navy); }
.panel.bg-blue { background: var(--color-blue); }
.panel.bg-gold { background: var(--color-gold); }
.panel .bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.panel .content p,
.panel .content ul,
.panel .content ol {
	margin: 0 auto 1em;
}
.panel .content ul,
.panel .content ol {
	padding-left: 1.15em;
}
.panel .content ul {
	list-style-type: none;
}
.panel .content ul li {
    position: relative;
    margin: 0 0 0.5em;
    line-height: 1.5em;
}
.panel .content p a,
.panel .content ul a,
.panel .content ol a {
    color: var(--color-blue);
    text-decoration: none;
    cursor: pointer;
}
.panel .content p a:hover,
.panel .content ul a:hover,
.panel .content ol a:hover {
    color: var(--color-gold);
    text-decoration: none;
    cursor: pointer;
}
.panel h2:before,
.panel .h2:before {
	content: "";
	display: block;
	width: 50px;
	height: 4px;
	position: absolute;
	top: -0.5em;
	left: 50%;
	background: var(--color-gold);
	transform: translateX(-50%);
}
.buckets {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-column-gap: 50px;
    grid-row-gap: 50px;
}
.panel-buckets h2 {
	text-align: center;
}
.panel-buckets .buckets + h2 {
	margin-top: 100px;
}
.buckets .category {
	text-align: center;
}
.buckets .category i {
	display: block;
	color: var(--color-gold);
	height: 100px;
	line-height: 100px;
	font-size: 50px;
}
.buckets .category a {
	display: block;
	color: var(--color-gold);
	text-decoration: none;
}
.buckets .category:hover i,
.buckets .category:hover a,
.buckets .category a:hover {
	color: var(--color-blue);
	text-decoration: none;
}
.buckets .product {}
.buckets .product img {}
.buckets .product:hover img { transform: scale(1.05); }
.buckets .product .brand {
	display: block;
	color: var(--color-navy);
}
.buckets .product .variant,
.product_overview .content .variant {
	display: block;
	color: var(--color-navy);
	opacity: 0.25;
}
.buckets .product a {
    display: block;
    margin: 0 auto 0.25em;
    font-family: 'ivypresto-display', serif;
	font-size: 2.25em;
    font-weight: 600;
    line-height: 0.9em;
	color: var(--color-navy);
}
.buckets .product:hover a,
.buckets .product a:hover {
	color: var(--color-gold);
}
.panel-plainContent h2 {
    text-align: center;
}
.panel-mediaFeatured .bg {
	width: 50%;
	left: 50%;
}
.panel-mediaFeatured.content-right .bg {
	left: unset;
	right: 50%;
}
.panel-mediaFeatured .content {
	max-width: calc(50% - 100px);
	margin-left: 0;
}
.panel-mediaFeatured.content-right .content {
	max-width: calc(50% - 100px);
	margin-left: auto;
	margin-right: 0;
}
.panel-mediaFeatured .content h2,
.panel-mediaFeatured .content .h2 {
	text-align: left;
}
.panel-form .content h2:before,
.panel-form .content .h2:before,
.panel-mediaFeatured .content h2:before,
.panel-mediaFeatured .content .h2:before {
	left: 0;
}
.product_overview {
	padding-top: 50px;
}
.product_overview .media {
	position: relative;
    float: left;
    width: 480px;
}
.product_overview .content {
	position: relative;
    float: right;
    width: calc(100% - 580px);
}
.product_overview h1 {
	margin-bottom: 0.1em;
}
.product_overview .crumbContainer {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--color-gray);
}
.product_overview .ctas .btn {
	display: block;
}
.product_overview .btn > span {
	white-space: nowrap;
}
.product_overview .content .ctas {
	margin-bottom: 50px;
}
.product_overview .dscr {
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--color-gray);
}
.product_overview .attributes {}
.product_overview .attr {
	display: grid;
	grid-template-columns: 0.8fr 1fr;
	grid-column-gap: 25px;
	margin: 0 0 12px;
}
.product_overview .attr .label {
	opacity: 0.5;
}
.product_overview .attr .value {
	text-align: right;
}
.product_related {
	clear: both;
	margin: 0 0 0;
}



/*	Forms
============================================================================================== */
.form {
    position: relative;
    max-width: 100%;
    margin: 0;
}
.form .row { margin: 0 -1em; }
.form .row .input {
    display: block;
    position: relative;
    float: left;
    margin: 0;
    padding: 0 12.5px;
    width: 50%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.form .row .input.full { width: 100%; }
.form .input label {
	position: absolute;
    width: 90px;
    top: 14px;
    left: 25px;
    font-size: 0.85em;
    font-style: oblique;
    color: var(--color-blue);
    z-index: 2;
    -webkit-transition: all 0.165s ease;
    -moz-transition: all 0.165s ease;
    -ms-transition: all 0.165s ease;
    -o-transition: all 0.165s ease;
    transition: all 0.165s ease;
}
.form .input label.required:after {
    content: " *";
    color: var(--color-gold);
}
.form .input label.focus {
	top: -22px;
	-webkit-transition: all 0.165s ease;
	-moz-transition: all 0.165s ease;
	-ms-transition: all 0.165s ease;
	-o-transition: all 0.165s ease;
	transition: all 0.165s ease;
	font-style: normal;
}
.form .input label.focus:after {
	content: "\f0d7";
	display: inline-block;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
	font-size: inherit;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin-left: 0.5em;
}
.form .input label.hidden { opacity: 0.0; }
.form label.error { display: none !important; }
.form .input input[type=text],
.form .input input[type=email],
.form .input input[type=number],
.form .input input[type=tel],
.form .input input[type=password],
.form .input select,
.form .input textarea {
    display: block;
    width: 100%;
    margin: 0 0 1.5em;
    padding: 12px 12.5px 12px 114px;
    outline: none;
    color: var(--color-navy);
    background: #f4f4f4;
    border: 0;
    border-top: 1px solid var(--color-gray);
    border-radius: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: auto;
}
.form .input input[type=text].error,
.form .input input[type=email].error,
.form .input input[type=number].error,
.form .input input[type=tel].error,
.form .input input[type=password].error,
.form .input select.error,
.form .input textarea.error {
	background: #FFB5B5 !important;
	border-top: 1px solid #900 !important;
}
.form .input select {}
.form .input textarea {
	min-width: 100%;
	max-width: 100%;
	min-height: 100px;
	max-height: 250px;
}
.form .input .radCheck {}
.form .input .radCheck:last-child {}
.form .input label + .radCheck {}
.form .input input[type=radio],
.form .input input[type=checkbox] {}
.form .btn {
    margin: 0;
    position: absolute;
    bottom: -55px;
    left: 50%;
    width: 50%;
    transform: translateX(-50%);
}
.form p.error {
    color: #900;
    background: #FFB5B5 !important;
    border: 1px solid #900 !important;
    margin: 0 0 1.5em;
    padding: 0.75em 1em;
    outline: none;
    border-radius: 4px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.token { color: transparent !important; }
.jbmodal-search {
    position: relative;
    height: 50px;
    width: auto;
}
.jbmodal-search input[type=text] {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    background: var(--color-navy);
    border: 0;
    border-radius: 0;
	outline: none;
    height: 50px;
    line-height: 50px;
    padding: 0 50px 0 25px;
    color: #ffffff;
    font-size: 1.5em;
    font-weight: 300;
    font-style: oblique;
    letter-spacing: .5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.jbmodal-search input[type=submit] {
    border: 0;
    height: 50px;
    width: 50px;
    position: absolute;
    top: 0px;
    left: auto;
    right: 0;
    background: transparent;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
}
.jbmodal-search i.fa {
    border: 0;
    height: 50px;
    width: 50px;
    line-height: 50px;
    position: absolute;
    top: 0px;
    left: auto;
    right: 0px;
    text-align: center;
    color: #ffffff;
    font-size: 20px;
    background: var(--color-gold);
    -webkit-transition: all 0.165s ease;
    -moz-transition: all 0.165s ease;
    -ms-transition: all 0.165s ease;
    -o-transition: all 0.165s ease;
    transition: all 0.165s ease;
}
.jbmodal-search input[type=submit]:hover+i.fa {
    color: #ffffff;
    background: var(--color-navy);
    -webkit-transition: all 0.165s ease;
    -moz-transition: all 0.165s ease;
    -ms-transition: all 0.165s ease;
    -o-transition: all 0.165s ease;
    transition: all 0.165s ease;
}




/*	Misc
============================================================================================== */
.jbmodal-bg {
    background-color: #001a37;
    opacity: 0.92;
    backdrop-filter: blur(15px);
}
.jbmodal-box {
    width: 1200px;
    padding: 50px 50px 50px;
    background: var(--color-blue);
    color: #ffffff;
    border: 0;
    border-radius: 0;
}
.jbmodal-box h2,
.jbmodal-box h3,
.jbmodal-box h4,
.jbmodal-box h5 {
}
.jbmodal-box .jbmodal-title {
	margin-bottom: 45px;
    color: #ffffff;
}
.jbmodal-box .jbmodal-controls i.fa {
    display: inline-block;
    width: 50px;
    height: 50px;
    font-size: 25px;
    line-height: 50px;
    text-align: center;
    background: transparent;
    color: var(--color-gold);
    border-bottom-left-radius: 0;
}
.jbmodal-box .jbmodal-controls i.fa:hover {
    color: #ffffff;
    background: transparent;
}
.jbmodal-box .video169 + p {
    margin-top: 25px;
}
.screenType {
    color: transparent;
    width: 1px;
    height: 1px;
    border: 0;
    position: fixed;
    bottom: 0;
    overflow: hidden;
}









/*	RESPONSIVE
============================================================================================== */

/*	Desktop			--	1024+
============================================================================================== */
@media only screen and (min-width: 1024px){

}




/*	Small Desktop	--	1024-1199
============================================================================================== */
@media only screen and (max-width: 1199px) {

}




/*	Tablets			--	768-1023
============================================================================================== */
@media only screen and (max-width: 1023px){
    .product_overview .content { width: 50%; }
    .product_overview .media { width: calc(50% - 60px); }
}
@media only screen and (max-width: 899px){
    .centre { padding: 45px 30px 60px; }
    .banner .centre { padding: 30px; }
    .header .logo { top: 15px; }
    .header .logo img { height: 20px; }
    .header .fa-bars-staggered,
    .header .fa-xmark { left: 20px; }
    .header .fa-search { right: 20px; }
    .buckets { grid-template-columns: 1fr 1fr; }
    .btn { margin-top: 25px; }
    h1, .h1 { font-size: 2.50em; }
    h2, .h2 { font-size: 2.00em; }
    h3, .h3 { font-size: 1.50em; }
    h4, .h4 { font-size: 1.25em; }
    h5, .h5 { font-size: 1.125em; font-weight: 700; color: inherit; }
    h6, .h6 { font-size: 1.125em; font-weight: 300;
        color: inherit;
        letter-spacing: 0;
        margin-bottom: 0.25em;
    }
    .banner-home h1 { font-size: 3.5em; }
    .panel,
    .footer { margin-top: -20px; }
    .panel h2:before,
    .panel .h2:before {
        width: 30px;
        height: 3px;
    }
    .panel-form .content h2:before,
    .panel-form .content .h2:before,
    .panel-mediaFeatured h2:before,
    .panel-mediaFeatured .h2:before {
        transform: none;
    }
}




/*	Phones			--	under 768
============================================================================================== */
@media only screen and (max-width: 767px){
    .mainNav { width: 100%; }
    .panel-mediaFeatured .bg {
        position: relative;
        left: 0;
        display: block;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%;
    }
    .panel-mediaFeatured .content {
        max-width: 100%;
    }
    .product_overview .content { width: 100%; }
    .product_overview .media {
        float: none;
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
    }
    .jbmodal-box {
        width: auto;
        margin: 0 30px;
        padding: 30px;
    }
}




/*	Phones Portrait	--	under 540
============================================================================================== */
@media only screen and (max-width: 539px){
    .buckets {
        /* grid-template-columns: 1fr; */
        grid-column-gap: 25px;
    }
    .buckets .product a {
        font-size: 1.75em;
    }
}




/*	Small Phones	--	under 375
============================================================================================== */
@media only screen and (max-width: 374px){

}




/*	SCREEN SIZE GLOBALS
============================================================================================== */
@media only screen and (min-width: 1024px){ /* desktop only */ .desktop { display: none; } }
@media only screen and (min-width: 768px) and (max-width: 1023px) { /* tablets */ .tablet { display: none; } }
@media only screen and (max-width: 767px) { /* phones */ .mobile { display: none; } }