/* 

Version 2.0
January 26, 2023

*/

* { box-sizing: border-box; margin: 0; padding: 0; line-height: 1; outline: none !important; }


/* HTML, BODY, CONTAINER */
html {	width: 100%; height: 100%;	background-color: var(--col-page-bg);;  font-size: var(--default-font-size);  min-width: 320px; transition: none; }
body {	font-size: var(--default-font-size); color: var(--col-text); font-family: var(--default-font); width: 100%; position: relative; margin: 0px auto; font-weight: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; transition: all .3s ease-out;}
html.loading  { height: 100vh; width: 100vw;	transition: none; }
html.loading body { }

html.overlay-active, html.overlay-active body { max-height: 100vh; overflow: hidden;}


#container {width: 100%; margin: 0 auto; display: block; position: relative; opacity: 1 !important	; transition: opacity 1s; overflow: hidden}
html.loading #container { opacity: 0 !important; }
header, #body, footer { width: 100%;  position: relative; margin: 0px auto; display: block; }

*::-webkit-scrollbar-track {background-color: rgba(var(--col-primary-rgb), 0.2)  }
*::-webkit-scrollbar { width: 6px; height: 6px }
*::-webkit-scrollbar-thumb { background-color: rgba(var(--col-primary-rgb),1)  }

/*HTML ELEMENTS*/
h1, h2, h3, h4, h5, h6 { font-weight: normal; display: block;}
p { line-height: var(--default-line-height); font-size: var(--default-font-size); color: var(--col-text); font-family: var(--default-font); display: block; margin-bottom: 30px;}
p.center { margin-left: auto; margin-right: auto;}
p:last-child, div:last-child, a:last-child, img:last-child { margin-bottom: 0 !important}
b,strong { font-weight: 700; }

section, div, p {position: relative; }

a { text-decoration: none; color:  var(--col-link)}
a:hover { color:  var(--col-link-hover)}
.attention { color: var(--col-attention)}
.warning { color: var(--col-warning)}

img {border: 0px; height: auto; max-width: 100%; display: block;}
img.center { display: block; margin: 0 auto;}


/*ul {list-style-type: none; margin: 0px; padding: 0px; }*/
ul.listing, ul.bullets { margin-bottom: 30px; }
ul.listing.shorter  { max-width: 550px; margin: 0 auto; }
ul.listing li, ul.bullets li { display: block; margin-bottom: 1px; line-height: 1.6; position: relative; text-align: center; font-size: var(--default-font-size); color: var(--col-text); font-family: var(--default-font); }
ul.bullets li { text-align: left; padding-left: 20px;}
ul.bullets li:before { content: ""; position: absolute; display: block; left: 0; top: 0.65em; width: 6px; height: 6px; border-radius: 6px; background: var(--col-text);}
ul.listing.left li  { text-align: left;}

/*BUTTONS*/
div.buttons { display: flex; gap: 20px; margin-top: 20px; justify-content: center; align-items: center; }
a.btn { display: table; line-height: var(--button-height); color: var(--col-button); background-color: var(--col-button-bg); font-size: var(--button-font-size); font-family: var(--button-input-font); text-transform: uppercase; margin: 20px auto 0;}
a.btn.left { display: inline-block; margin: 20px auto 0 10px;}
a.btn:hover { color: #aaa; border-color: #aaa}
div.buttons > a.btn { display: inline-block; margin:0;}


/* OVERLAY */
div.overlay { width: 100vw; height: 100vh; position: fixed; left: 0; top: -200vh; z-index: 999;display: block; transition: opacity .3s ease-in .1s; opacity: 0; background: rgba(0,0,0,0.9); }
div.overlay.active { top: 0; opacity: 1;}
div.overlay > div{ width: 100%; height: 100%; display: block; position: relative; z-index: 3;}
div.overlay div.popup { width: 1180px; display: block; position: relative; z-index: 3; top: 50%; transform: translate3D(0,-50%, 0); max-width: 92%; margin: 0 auto; background: transparent; max-height: 92%; overflow: auto}
div.overlay > img { width: 100%; display: block;}
div.overlay a.close-overlay { position: absolute; display: block; width: 40px; height: 40px; border-radius: 40px; top:25px; right: 25px; z-index: 11; background: url(/lib/img/white/close.svg) var(--col-primary)  no-repeat center center; background-size: 20px 20px; }


/*CONTAINERS*/

#mainbody { position: relative; z-index: 2; padding-top: 0px; min-height: calc(100vh - 200px); }
article { width: 100%; position: relative; z-index: 2; background: #fff; left: 0; display: block; overflow: hidden; }
article > div, section > div { display: block; width: 100%; margin: 0 auto;}
article.no-masthead { padding-top: 0px; }


section { display: block; margin: var(--dim-default-space) auto; position: relative; padding: 0; width: 100%; max-width: var(--dim-site-width);}
section.flush {margin-top: 0; margin-bottom: 0;}
section.max {max-width: 100%; padding-left: 0; padding-right:0;}
section.masthead {max-width: 100%; margin-top: 0; margin-bottom: 0; padding-left: 0; padding-right:0;}
section.padded, .padded { padding-top: 80px; padding-bottom: 80px;}
section.spaced { margin: var(--dim-default-space) auto; }


iframe { display: block; width: 100%; aspect-ratio: 16/9; margin: 0 auto; border: 0; }
iframe.flipbook { aspect-ratio: 10/7}

/*FLEX AND GRID*/
div.grid { display: flex; gap: 40px; justify-content: space-between; align-items: flex-start;}
div.grid.x2 > div { width: 50%;}
div.grid.x3 > div { width: 33.33%;}
div.grid.x4 > div { width: 25%;}
div.grid.columns { flex-direction: column}
div.grid.start { justify-content: flex-start}
div.grid.center { justify-content: center}
div.grid.even { justify-content: space-evenly}
div.grid.around { justify-content: space-around}
div.grid.stretch { align-items: stretch;}
div.grid.middle { align-items: center;}
div.grid.bottom { align-items: flex-end;}
div.grid.top { align-items: flex-start;}

div.table { display: grid;width: 100%; }



/*MARGINS*/
.margin-top-250 { margin-top: 250px !important}
.margin-top-200 { margin-top: 200px !important}
.margin-top-150 { margin-top: 150px !important}
.margin-top-100 { margin-top: 100px !important}
.margin-top-80 { margin-top: 80px !important}
.margin-top-50 { margin-top: 50px !important}
.margin-top-40 { margin-top: 40px !important}
.margin-top-0 { margin-top: 0px !important}
.margin-bottom-0 { margin-bottom: 0px !important}
.margin-bottom-40 { margin-bottom: 40px !important}
.margin-bottom-50 { margin-bottom: 50px !important}
.margin-bottom-80 { margin-bottom: 80px !important}
.margin-bottom-100 { margin-bottom: 100px !important}
.margin-bottom-150 { margin-bottom: 150px !important}
.margin-bottom-200 { margin-bottom: 200px !important}
.margin-bottom-250 { margin-bottom: 250px !important}


/*CAPTIONS*/
div.caption { position: absolute; display: block; width: 100%;}
div.caption.left { left: 0}
div.caption.right { right: 0}
div.caption.top { top: 0}
div.caption.bottom { bottom: 0}
div.caption.center{ left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);  -ms-transform: translateX(-50%); }
div.caption.middle { top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%);  -ms-transform: translateY(-50%); }
div.caption.center.middle { transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%);  -ms-transform: translateY(-50%) translateX(-50%); }

/*BUTTONS*/

/*COLOURS*/
.black { color: #000 !important}
.b-black { background-color: #000 !important}
.white { color: #fff !important}
.b-white { background-color: #fff !important}
.primary { color: --col-primary !important}
.b-primary { background-color: --col-primary !important}


/*TEXT*/
.txt-uc { text-transform: uppercase;}

/* GENERIC STYLES */

.width-full { display: block!important; width: 100% !important}

.center {text-align: center !important; }
.left {text-align: left !important; }
.right {text-align: right !important; }

.full { display: block; width: 100%;}
.inline {display: inline!important;}
.block {display: block!important;}

.align-left { margin-left: 0; margin-right: auto;}
.align-center { margin-left: auto; margin-right: auto;}
.align-right { margin-left:auto; margin-right: 0;}

.bold {font-weight: bold !important }
.italic {font-style: italic !important }
.normal {font-weight: normal !important }
.hidden {display: none !important;}
.block {display: block !important;}
.iblock {display: inline-block !important;}
.inline {display: inline !important;}
.relative {position: relative !important;}
.absolute {position: absolute !important;}
.invisible {opacity: 0 !important}
.visible {opacity: 1 !important}
.floatl { float: left !important;}
.floatr { float: right !important;}
.nofloat { float: none !important;}
.valign { position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%);  -ms-transform: translateY(-50%);}

/* PADDING AND MARGIN OVERRIDES */
.no-padding-top {	padding-top: 0 !important; }
.no-padding-bottom {	padding-top: 0 !important; }
.no-margin-top {	padding-top: 0 !important; }
.no-margin-bottom {	padding-top: 0 !important; }


/*FANCYBOX*/
div.fancybox { width: calc(100vw - 100px); height: calc(100vh - 100px); display: block; background: url() no-repeat center center; background-size: contain;}

/* FORM + INPUT STYLING*/


input, textarea { -webkit-appearance: none; -webkit-border-radius: 0;}
input[type="radio"] { -webkit-appearance: inherit;} 
input[type="submit"] { cursor: pointer;}


div.field > label { display: none}
div.field.missing label { color: var(--col-missing) !important}
div.field.warning label { color: var(--col-warning) !important}
div.field.missing div.checkbox label { color: var(--col-missing) !important}
div.field.missing span.error-message { color: var(--col-missing); display: block; font-size: 11px; position: absolute; top: 12px; right: 20px}
div.field.warning span.warning-message { color: var(--col-warning); display: block; font-size: 11px; position: absolute; bottom: -12px; left: 10px}

form { display: block; width: 100%; margin: 0; padding: 0; border: 0;  font-size: var(--default-input-font-size); font-family: var(--default-input-font)}
fieldset { display: block; width: 100%; margin: 0; padding: 0; border: 0; margin-bottom: 16px;}
div.form-col { display: flex; width: 100%; flex-direction: column; gap: 16px; justify-content: space-between; align-items: flex-start;}
div.form-row { display: flex; width: 100%; gap: 16px; margin-bottom: 16px;}
div.form-row:last-child { margin-bottom: 0px;}
div.form-row > div {width: 100%;}
div.form-row.x_2_31 > div {width: 25%;}
div.form-row.x_2_31 > div:first-child {width: 75%;}
div.form-row.x_3_21 > div {width: 33.34%;}
div.form-row.x_3_21 > div:first-child {width: 66.66%;}

div.radios { display: flex; width: 100%; justify-content: flex-start; align-items: center; gap: 40px;}
div.radios > label { padding-right: 20px;}
div.radio input[type="radio"] { display: none;}
div.radio label { display: block; position: relative; padding-left: 32px; padding-top: 2px; line-height: 1.25; min-height: 22px; width: auto; font-family: var(--default-input-font)}
div.radio label:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 22px; height: 22px; background-color: transparent; border: 1px solid var(--col-border); border-radius: 32px; box-sizing: border-box;}
div.radio label:after { content: ""; display: block; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background-color: transparent; border-radius: 16px;  border: 0px solid var(--col-border); box-sizing: border-box;}
div.radio input[type=radio]:checked + label:after { background-color: #ccc;   border: 3px solid var(--col-border);}

div.checkbox { display: block; text-align: left; position: relative; width: 100%; }
div.checkbox input[type="checkbox"] { display: none;}
div.checkbox label { display: block; color: var(--col-input);; font-family: inherit; text-align: left; position: relative; width: 100%; font-size: var(--default-input-font-size); padding-left: 31px; min-height: 20px; padding-top: 1px; line-height: 1.25; font-family: var(--default-input-font)}
div.checkbox label:before { content:""; position: absolute; left:0; top: 0; border: 1px solid var(--col-border); background: transparent; display: block; width: 20px; height: 20px; box-sizing: border-box;}
div.missing div.checkbox label:before { border-color: var(--col-error); -webkit-animation: pulse .5s 1; animation: pulse .5s 1; }
div.checkbox input:checked + label:before { background: url(/lib/img/dark/checkmark.svg) no-repeat center center; background-size: 14px 12px;}

div.file-upload input { display: none !important;}
div.file-upload label { display: block !important; position: relative; padding-left: 60px; line-height: 60px;}
div.file-upload label:after { content:""; display: block; position: absolute; width: 40px; height: 60px; left: 0; top: 0; background: url(/img/svg/upload.svg) no-repeat center center; background-size: contain;}
span.file-list:empty { display: none;}
span.file-list { display: block; text-align: left; font-size: 16px; line-height: 1.5; text-align: left; color: #000}

.select2-results__options::-webkit-scrollbar-track, form *::-webkit-scrollbar-track {background-color: rgba(var(--col-border-rgb), 0.2)  }
.select2-results__options::-webkit-scrollbar , form *::-webkit-scrollbar { width: 6px; height: 6px }
.select2-results__options::-webkit-scrollbar-thumb , form *::-webkit-scrollbar-thumb { background-color: rgba(var(--col-border-rgb),1)  }

input[type="text"], input[type="search"], input[type="tel"], input[type="number"], input[type="email"], input[type="password"] { display: block; width: 100%; line-height: var(--dim-input-height); min-height: var(--dim-input-height); border-color: var(--col-border); border-width: 1px; border-style:  solid; border-radius: 0px; padding: 0 10px; text-align: left; color: var(--col-input); font-family: var(--default-input-font); font-size: inherit; background-color: var(--col-input-bg)}
input[type="text"]:focus, input[type="search"], input[type="tel"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="password"]:focus { box-shadow:inset 0 0 15px 1px rgba(0,0,0,0.2); }
input[type="search"].highlighted, input[type="tel"].highlighted, input[type="number"].highlighted, input[type="text"].highlighted, input[type="email"].highlighted, input[type="password"].highlighted { background-color: var(--col-missing)}
input[type="search"].missing, input[type="tel"].missing, input[type="number"].missing, input[type="text"].missing, input[type="email"].missing, input[type="password"].missing { border-color: var(--col-missing)}
select { display: block; width: 100%; line-height: var(--dim-input-height); min-height: var(--dim-input-height); border-color: var(--col-border); border-width: 1px; border-style:  solid;  padding: 10px; line-height: 1.5; text-align: left; color: var(--col-input);  font-size: inherit; }
textarea { display: block; width: 100%; border-width: 1px; border-style:  solid; border-radius: 0px; border-color: var(--col-border); padding: 10px; line-height: 1.5; text-align: left; font-size: inherit}
button[type="submit"], button[type="button"] { display: table; width: auto; line-height: var(--dim-input-height); border: 0px; padding: 0 40px; text-align: center; background-color: var(--col-button-bg); color: var(--col-button);  font-size: var(--default-input-font-size); ; cursor: pointer; position: relative;}
button[type="submit"]:hover, button[type="button"]:hover { background-color: var(--col-accent)}

div.reveal-response { text-align: center;}
div.reveal-response p { font-size: 18px; }
.js-postal-code { text-transform: uppercase;}

form.validation-in-progress button[type="submit"], form.submit-in-progress button[type="submit"] {color: #000; position: relative;}
form.validation-in-progress button[type="submit"]:after { position: absolute; width: 100%; height: 100%; min-height: 40px; top: 0; left: 0; font-size: 0!important; content: ""; display: block; background: url(/lib/img/white/spin2.gif) transparent  no-repeat center center; background-size: 80px 10px;}
form.submit-in-progress button[type="submit"]:after { position: absolute; width: 100%; height: 100%; min-height: 40px; font-size: 0!important; content: ""; display: block; background: url(/lib/img/white/spin2.gif) var(--col-button) no-repeat center center !important; background-size: 34px 34px !important; top: 0; left: 0}
button.submit-in-progress, a.submit-in-progress { background: url(/lib/img/white/spin2.gif) var(--col-button) no-repeat center center !important; background-size: 34px 34px !important; font-size: 0!important; transition: none;}

.select2-container--default  { box-sizing: border-box; width: 100%!important}
.select2-container--default .select2-selection--single { border-radius: 0; border-color: var(--col-border)}
.select2-container .select2-selection--single { height: auto}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: inherit; font-size: inherit; line-height: var(--dim-input-height); padding-left: 10px; padding-right: var(--dim-input-height);}
.select2-container--default .select2-selection--single .select2-selection__arrow {width: var(--dim-input-height); height: 100%; right: 0; top: 0; background: url(/lib/img/dark/arrow-down.svg) no-repeat center center; background-size: 21px 12px; transform: rotate(0deg); transition: all .1s ease-out}
.select2-container--default .select2-selection--single .select2-selection__arrow:hover {background-size: 27px 17px; }
.select2-container--open .select2-selection--single .select2-selection__arrow {transform: rotate(180deg);}
.select2-container--default .select2-selection--single .select2-selection__arrow b { display: none;}
.select2-selection__rendered  { color: var(--col-input); }

.select2-results__option { font-size: var(--default-input-font-size); }


div.inline-response { height: 0; overflow: hidden; opacity: 0; margin: 0; padding: 0;}
form.form-done { display: none !important;}
div.reveal-response { margin: 0 auto; height: auto; opacity: 1; transition: opacity .5s}

div.grecaptcha-badge { right: -1600px !important}

.js-hidden-option { display: none !important}
.js-hidden-option.revealed { display: block !important}

/* PLACEHOLDERS */
*::-webkit-input-placeholder {  line-height: var(--dim-input-height);  color: var(--col-placeholder); font-size: var(--default-input-font-size); ; font-family: var(--default-input-font)}
*::-moz-placeholder {  line-height: var(--dim-input-height);  color: var(--col-placeholder); font-size: var(--default-input-font-size); ; font-family: var(--default-input-font)}
*:-ms-input-placeholder {  line-height: var(--dim-input-height);  color: var(--col-placeholder); font-size: var(--default-input-font-size); ; font-family: var(--default-input-font)}

textarea::-webkit-input-placeholder {  padding-top: 0px; line-height: 1.5;}
textarea::-moz-placeholder {  padding-top: 0px; line-height: 1.5;}
textarea:-ms-input-placeholder {  padding-top: 0px; line-height: 1.5;}

.select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--col-text); }

div.field.missing *::-webkit-input-placeholder { color:var(--col-missing) !important; }
div.field.missing *::-moz-placeholder { color:var(--col-missing) !important}
div.field.missing *:-ms-input-placeholder { color:var(--col-missing) !important}

div.field.warning *::-webkit-input-placeholder { color:var(--col-warning) !important; }
div.field.warning *::-moz-placeholder { color:var(--col-warning) !important}
div.field.warning *:-ms-input-placeholder { color:var(--col-warning) !important}


/*BURGER*/
div.burger { position: absolute; width: 60px; height: 60px; cursor: pointer; display: block; top: 0px; left: 0px; z-index: 100; transition: transform .2s ease-out;}
div.burger * { transition: transform .2s ease-out;}
div.burger ul { display: block; width: 20px; position: absolute; top: 22px; left: 19px; height: 20px; font-size: 0}
div.burger ul li { display: block; width: 100%; position: absolute; top: 0; left: 0; background: var(--col-burger); height: 2px; border: 0; transition: none;}
div.burger ul li:nth-child(2)  { top: 7px; }
div.burger ul li:nth-child(3) { top: 14px; }

div.burger { display: none;}

header.active  div.burger ul li:nth-child(2){ display: none;}
header.active  div.burger ul li:nth-child(1) { transform: rotate(45deg); transform-origin: 50% 0; top: 7px; transition: transform .1s ease-out }
header.active  div.burger ul li:nth-child(3) { transform: rotate(-45deg); transform-origin: 50% 0%; top: 7px; transition: transform .1s ease-out }

/*HEADER & FOOTER */
div.error { display: block; width: 100%; font-size: 0; position: fixed; top:-1px; left:0; max-height: 400px; z-index: 9999; overflow: hidden; opacity: 1;}
div.error p { display: block; width: 100%; background: var(--col-error); color: #fff; font-size: 18px; padding: 20px; text-align: center;}
div.error.hide { max-height: 0px; opacity:0}


/*CALENDAR*/
div.datepicker { z-index: 2; }
div.datepicker input { position: relative; z-index: 2; background: transparent; cursor: pointer; }
div.datepicker:after { content:""; border-left: 1px solid var(--border-colour); top: 0; right: 10px; position: absolute; width: 70px; height: 100%; background: url(/lib/img/dark/datepicker.svg) no-repeat center center; background-size: 37px 30px; cursor: pointer; z-index: 1;}
#ui-datepicker-div { display: block; width: 400px; background: #fff; max-width: 100vw; transform: translateY(10px); border: 1px solid var(--border-colour); box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.25); padding: 20px; position: relative; right: -1000vw; z-index: 999 !important}
table.ui-datepicker-calendar { width: 100%;}
table.ui-datepicker-calendar td { text-align: center; line-height: 2; font-size: 18px; color: var(--col-primary)}
table.ui-datepicker-calendar td a.ui-state-highlight { color: var(--col-primary)}
table.ui-datepicker-calendar td.ui-datepicker-today { background: var(--col-primary); color: #fff}
table.ui-datepicker-calendar td.ui-datepicker-today a { color: #fff}
table.ui-datepicker-calendar th { text-align: center; line-height: 2;}
.ui-datepicker-title { display: block; width: 100%; text-align: center; line-height: 1;}
.ui-datepicker-prev { font-size: 0; position: absolute; left: 20px; top: 25px; width: 30px; height: 30px; background: url(/lib/img/dark/arrow.svg) no-repeat center center; background-size: 6px 12px; cursor: pointer;}
.ui-datepicker-prev.ui-state-disabled { background: none;}
.ui-datepicker-next { font-size: 0; position: absolute; right: 20px; top: 25px; width: 30px; height: 30px; background: url(/lib/img/dark/arrow.svg) no-repeat center center; background-size: 6px 12px; transform: rotate(180deg); cursor: pointer;}
.ui-datepicker-header { padding-top: 0px; border-bottom: 1px solid var(--border-colour); padding-bottom: 5px; }
.ui-state-disabled { color: #aaa;}

/*SLICK SLIDER*/
button.slick-arrow { background: none; margin: 0; padding: 0; width: 15px; height: 30px; background: url(/lib/img/dark/arrow-right.svg) no-repeat center center; background-size: contain; top: 50%; margin-top: -15px; font-size: 0; position: absolute; z-index: 5;}
button.slick-arrow:hover { background-color: transparent;}
button.slick-arrow.slick-next { right: 0}
button.slick-arrow.slick-prev { left: 0; background-image: url(/lib/img/dark/arrow-left.svg) }

ul.slick-dots { position: absolute; bottom: 20px; width: 100%; text-align: center; font-size: 0}
ul.slick-dots li { display: inline-block; padding: 0; margin: 0 5px; font-size: 0; vertical-align: top}
ul.slick-dots li button { display: block; padding: 0; margin: 0; font-size: 0; background: #000; width: 10px; height: 10px; border-radius: 10px; opacity: .5}
ul.slick-dots li.slick-active button { opacity: 1}
ul.slick-dots li button:hover { background-color: #000}

/*ANIMATIONS*/
.js-reveal-item { opacity: 0; }
.js-reveal-item.in-view { opacity: 1; transition: all 1s cubic-bezier(0.6, 0.2, 0.1, 1) 0s}


@media only screen and (max-width: 600px) {
	/*FANCYBOX*/
	div.fancybox { width: calc(100vw - 80px); height: calc(100vh - 80px); }
}