/* 

Version 1.0
December 15, 2018

*/

* { box-sizing: border-box; margin: 0; padding: 0; line-height: 1; outline: none !important; }
*:not(.slick-track):not(.slick-list) {transition: all .3s ease-out;}
*:before { box-sizing: border-box; margin: 0; padding: 0; line-height: 1; outline: none !important; transition: all .3s ease-out;}
*:after { box-sizing: border-box; margin: 0; padding: 0; line-height: 1; outline: none !important; transition: all .3s ease-out;}

.js-accordion *, .bx-wrapper * { transition: all 0s ease-out; } 


/* HTML, BODY, CONTAINER */
html {	width: 100%; height: 100%;	background-color: #fff;  font-size: 10px; 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 { }

#container {width: 100%; margin: 0 auto; display: block; position: relative; opacity: 1; transition: opacity 1s; overflow: hidden}
html.loading #container { opacity: 0; }
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)  }


/*CONTAINERS*/

#mainbody { position: relative; z-index: 2; padding-top: 0px;}
article { width: 100%; position: relative; z-index: 2; background: #fff; left: 0; transition: left 0.5s; display: block; overflow: hidden; }
article > div, article > section, section > div { display: block; width: 100%; margin: 0 auto;}

section { margin: 0px auto; display: block;}
section, div.wrp { display: block; margin: 0 auto; position: relative; padding: 0; width: 100%; max-width: var(--dim-site-width);}
section.full { max-width: 100%;}
/*section.content { max-width: 1140px; padding: 0 20px; text-align: center; }*/
section.spaced { margin: var(--dim-default-space) auto; }
section.masthead { max-width: 100%;}
section.image > img, section.image > a > img { display: block; width: 100%;}

div.grid { display: block; margin: 0 auto; position: relative; padding: 0; width: 100%; font-size: 0; border-bottom: 1px solid transparent;}
div.grid > div:not(.burger) { display: inline-block; vertical-align: top; position: relative; font-size: var(--default-font-size);}
div.grid.grid-2 > div { width: 50%; }
div.grid.grid-3 > div { width: 33%; }
div.grid.grid-4 > div { width: 25%; }
div.grid.grid-5 > div { width: 20%; }
div.grid.grid-6 > div { width: 16.66%; }

div.iframe { display: block; width: 100%; height: 0; padding-bottom: 56.25%; position: relative; margin: 0 auto;}
iframe { display: block; width: 100%; border: 0}
div.iframe iframe { position: absolute; top: 0; left: 0; height: 100%;}

div.thumb { display: block; width: 100%; margin: 0 auto; position: relative}
div.thumb > img, div.thumb > a > img { display: block; width: 100%; margin: 0 auto; }

div.icon { display: block; width: 100%; margin: 0 auto; position: relative}
div.icon > img, div.icon > a > img { display: block; margin: 0 auto; }


/*SPLITTERS*/
div.splitter {display: block; width: 100%; font-size: 0; position: relative;}
div.splitter > div {display: inline-block; vertical-align: top}

div.splitter.s50_50 > div, div.splitter.split-2 > div { width: 50%; }

div.splitter.s50_50_spaced > div { width: 50%; padding-right: 10px;}
div.splitter.s50_50_spaced > div:last-child { width: 50%; padding-left: 10px; padding-right: 0px;}

div.splitter.s30_70 > div { width: 30%; }
div.splitter.s30_70 > div:last-child { width: 70%; }
div.splitter.s70_30 > div { width: 70%; }
div.splitter.s70_30 > div:last-child { width: 30%; }

div.splitter.split-3 > div { width: 33.33%; }
div.splitter.split-3 > div:nth-child(2) { width: 33.34%; }

div.splitter.split-4 > div  { width: 25%; }

/*MARGINS*/
.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}

/*CAPTIONS*/
div.caption { position: absolute; display: block; }
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*/
.buttons { display: block; width: 100%; font-size: 0; text-align: center;}

.btn { display: inline-block; text-align: center; text-decoration: none; cursor: pointer; }

.btn.btn-single { margin: 0 auto; display: table;}

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

/*KEYFRAMES*/
@keyframes pulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.2);}
    100% {transform: scale(1);}
}
@keyframes pulsemore {
    0% {transform: scale(1);}
    50% {transform: scale(1.5);}
    100% {transform: scale(1);}
}



/*HTML ELEMENTS*/
h1, h2, h3, h4, h5, h6 { font-weight: normal;}
p { line-height: 1.5; font-size: inherit; display: block; margin: 0px auto 30px;}
p:last-child { margin-bottom: 0}

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%; }

ul {list-style-type: none; margin: 0px; padding: 0px; }

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

/* GENERIC STYLES */
.center {text-align: center !important; }
.left {text-align: left !important; }
.right {text-align: right !important; }

.full { display: block; width: 100%;}

.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; }


/*MISC*/
#debug { display: none;}
.bx-wrapper .bx-viewport { box-shadow: 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*/
form { display: block; margin: 0 auto; font-size: var(--default-input-font-size)}
div.form-row { display: block; width: 100%; font-size: 0; position: relative;}
div.form-row-hidden { display: none}
div.field { display: block; width: 100%; font-size: var(--default-input-font-size); position: relative; margin-bottom: 10px; padding: 0 10px 0 0;}
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}

/*.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: inherit; 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; text-transform: uppercase; }
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); color: #fff;  font-size: var(--default-input-font-size); text-transform: uppercase; 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(../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(../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(../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);}
.select2-container--default .select2-selection--single .select2-selection__arrow {width: var(--dim-input-height); height: 100%; right: 0; top: 0; background: url(../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);  text-transform: uppercase}

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

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;}
div.checkbox label:before { content:""; position: absolute; left:0; top: 0; border: 1px solid #000; 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(../img/dark/checkmark.svg) no-repeat center center; background-size: 14px 12px;}

div.radios { display: block; width: 100%; text-align: left; font-size: 0}
div.radios > label, div.radios > div { display: inline-block; vertical-align: middle; margin: 0 0px;position: relative; }
div.radios > label { margin: 0 10px 0 0;}
div.radios > div.radio { margin-right: 20px;}
div.radio input[type="radio"] { display: none;}
div.radio label { display: inline-block; position: relative; padding-left: 32px; padding-top: 2px; line-height: 1.25; min-height: 22px; width: auto}
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.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}

.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-font); }
*::-moz-placeholder {  line-height: var(--dim-input-height);  color: var(--col-placeholder); font-size: var(--default-input-font-size); font-family: var(--default-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-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: fixed; 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: 1px; 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}

header { position: fixed; display: block; width: 100%; z-index: 99; background: var(--col-primary); top: -200px; left: 0}
header.visible { top: 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(../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;}
table.ui-datepicker-calendar { width: 100%;}
table.ui-datepicker-calendar td { text-align: center; line-height: 2;}
table.ui-datepicker-calendar th { text-align: center; line-height: 3;}
.ui-datepicker-title { display: block; width: 100%; text-align: center; line-height: 2;}
.ui-datepicker-prev { font-size: 0; position: absolute; left: 20px; top: 25px; width: 30px; height: 30px; background: url(../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(../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;}


/*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); }
}