/*
(c)2021 - visuallizard.com
Base Styles
*/
:root {
--black: #000000;
--white: #ffffff;
--ltgrey: #dddddd;
--grey: #999999;
--dkgrey: #333333;
--yellow: #ffcc00;
--green: #339900 ;
--red: #aa0000;
--blue: #0077cc;
/* brand colouring - primary */
--riverclayred: #5c0f0f;
--deepcurrant: #380a0a;
--wintersun: #fff5ed;
--gatheringglow: #eb6340;
/* brand colouring - secondary */
--canopygreen: #82874a;
--canopygreen-deep: #404f36;
--canopygreen-lite: #e3e899;
--prairieochre: #b58030;
--prairieochre-deep: #81471e;
--prairieochre-lite: #ffcd4d;
--bigskyblue: #5778c4;
--bigskyblue-deep: #1c1c54;
--bigskyblue-lite: #d5e6ff;
--twilightthistle: #bfadd4;
--twilightthistle-deep: #743e68;
--twilightthistle-lite: #e9e6ff;
}
::selection {
background: var(--ltgrey);
text-shadow: none;
}
html {
box-sizing: border-box;
font-size: 62.5%;
overflow-y: scroll;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
height: 100%;
/* Icons to be reused as background-image, mask-image, etc. */
--icon-external: url('data:image/svg+xml,');
--icon-pause: url('data:image/svg+xml;utf8,');
--icon-play: url('data:image/svg+xml;utf8,');
--icon-chevron-left: url('data:image/svg+xml;utf8,');
--icon-chevron-right: url('data:image/svg+xml;utf8,');
}
body {
font: 400 1rem/1.5 "Inter Tight", Arial, sans-serif;
background: var(--wintersun);
color: var(--riverclayred);
position: relative;
min-height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
main {
flex-grow: 1;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* !Typography ============================== */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
margin: 2.4rem 0;
font-family: "the-seasons", "Times New Roman", sans-serif;
font-weight: 400;
line-height: 1.1;
}
h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
font-family: "Inter Tight", sans-serif;
}
h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a, h6 a, .h6 a {
font-weight: inherit;
color: inherit;
}
h1, .h1 { font-size: 8.20rem; font-weight: 700; }
h2, .h2 { font-size: 5.80rem; font-weight: 700; }
h3, .h3 { font-size: 3.20rem; font-weight: 600; letter-spacing: 2%; }
h4, .h4 { font-size: 2.50rem; font-weight: 400; letter-spacing: 2%; }
h5, .h5 { font-size: 2.00rem; font-weight: 600; letter-spacing: 2%; }
h6, .h6 { font-size: 1.70rem; font-weight: 600; letter-spacing: 15%; }
p { display: block; font-size: 1.6rem; margin: 0 0 2.4rem 0; letter-spacing: 2%; }
p img { margin: 0; max-width: 100%; height: auto !important; }
p.lead { font-size: 2rem; line-height: 1.25; }
i, em { font-style: italic; }
b, strong { font-weight: bold; }
small, .small { font-size: 1.4rem; }
/* Blockquotes */
blockquote, blockquote p { margin: 0 0 1.5rem 0; font-size: 2rem; color: var(--black); }
blockquote { padding: 1rem; border-left: 0.5rem solid var(--green); background-color: var(--ltgrey) }
blockquote p { line-height: 1.25; }
blockquote cite { display: block; font-size: 12px; color: var(--dkgrey); }
blockquote cite:before { content: "\2014 \0020"; }
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: var(--dkgreen); }
/* !Links */
a { color: var(--riverclayred); outline: 0; text-decoration: underline; }
a:hover { color: var(--prairieochre-deep); outline: 0; }
a:focus { color: var(--prairieochre-deep); outline: dotted; }
a:active { outline: 0; }
p a { line-height: inherit; }
/* !Lists */
ul, ol { padding: 0 0 0 2rem; margin: 0 0 2.2rem 0.8rem; font-size: 1.6rem; }
ul ul, ul ol, ol ol, ol ul { margin-bottom: 0; }
ul ul { list-style: circle; }
ul { list-style: disc; }
ol { list-style: decimal; }
li { line-height: inherit; letter-spacing: 2%; }
ul.unstyled { list-style: none; margin-left: 0; }
dl { margin-bottom: 1.6rem; }
dl dt, dl dd { line-height: inherit; }
dl dt { font-weight: bold; }
dl dd { margin-left: 1rem; }
dd:after {
/* http://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css/ */
content: '\D\A';
white-space: pre;
}
/* !Images */
figure {
margin: 0 0 1.6rem 0;
}
img {
border: 0;
vertical-align: middle;
-ms-interpolation-mode: bicubic;
}
img.scale-with-grid {
max-width: 100%;
height: auto;
}
.img-left {
float: left;
margin: 0 2rem 2rem 0;
}
.img-right {
float: right;
margin: 0 0 2rem 2rem;
}
.svg-icon,
.icon-svg,
svg.icon,
.icon svg {
width: 100%;
height: 100%;
}
i.icon {
width: 1em;
height: 1em;
display: inline-block;
vertical-align: middle;
}
/* !Other */
code, pre {
padding: 0 3px 2px;
font-family: Monaco, Andale Mono, Courier New, monospace;
font-size: 1.2rem;
border-radius: 3px;
border: 1px solid var(--ltgrey);
}
code {
background-color: var(--ltgrey);
color: var(--black);
padding: 0.2rem;
}
pre {
background-color: var(--ltgrey);
display: block;
padding: 1rem;
border: 1px solid var(--ltgrey);
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
hr {
clear: both;
height: 0;
margin: 1.6rem 0;
border: 0;
border-bottom: 1px solid var(--ltgrey);
}
address {
display: block;
line-height: 1.25;
margin-bottom: 2.2rem;
}
.lower { text-transform: lowercase; }
.upper { text-transform: uppercase; }
sub, sup {
/* Specified in % so that the sup/sup is the
right size relative to the surrounding text */
font-size: 75%;
/* Zero out the line-height so that it doesn't
interfere with the positioning that follows */
line-height: 0;
/* Where the magic happens: makes all browsers position
the sup/sup properly, relative to the surrounding text */
position: relative;
/* Note that if you're using Eric Meyer's reset.css, this
is already set and you can remove this rule */
vertical-align: baseline;
}
sup {
/* Move the superscripted text up */
top: -0.8rem;
}
sub {
/* Move the subscripted text down, but only
half as far down as the superscript moved up */
bottom: -0.4rem;
}
/* ! Helper classes */
.hidden {
display: none !important;
visibility: hidden;
}
.visuallyhidden:not(:focus):not(:active):not(:focus-within),
.slick-sr-only:not(:focus):not(:active):not(:focus-within) {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
padding: 0;
border: 0;
margin: -1px;
font-size: min(1.6rem);
background-color: var(--white);
color: var(--black);
overflow: hidden;
}
.invisible {
visibility: hidden;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
/* ! Buttons ============================== */
.button {
display: inline-block;
vertical-align: middle;
padding: .8rem 1.6rem .6rem;
min-width: 10rem;
color: #fff;
background-color: var(--green);
background-repeat: no-repeat;
background-repeat: repeat-x;
background-origin: border-box;
text-align: center;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2%;
font-family: "Inter Tight", Arial, sans-serif;
font-size: 1.4rem;
line-height: 1.3;
border: 1px solid var(--black);
border-bottom-color: var(--black);
border-radius: 2px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
transition: 0.1s linear all;
}
.button:hover {
background-color: var(--dkgrey);
text-decoration: none;
}
.button:active,
.button.active {
border-color: var(--grey);
}
.button:focus {
outline: 1px dotted var(--dkgrey);
outline-offset: 1px;
}
.button.disabled,
.button[disabled] {
background-image: none;
opacity: 0.5;
box-shadow: none;
pointer-events: none;
cursor: default;
}
.button.outline {
color: var(--grey);
border-color: currentColor;
background-color: transparent;
}
.button.outline:hover {
color: var(--dkgrey);
}
/* ! FORMS ============================== */
form {
margin-bottom: 2em;
}
fieldset {
margin-bottom: 2em;
}
fieldset > :last-child {
margin-bottom: 0;
}
label,
legend {
display: block;
margin-bottom: auto;
font-size: 1.4rem;
font-weight: bold;
line-height: 1.25;
letter-spacing: 2%;
}
.required > label:after {
content: " *";
}
input,
select,
textarea,
output {
display: inline-block;
vertical-align: middle;
border: 1px solid var(--dkgrey);
padding: .6rem .8rem .7rem;
/* outline: none; */
border-radius: 2px;
font: 400 1.6rem/1.25 "Inter Tight", Arial, sans-serif;
letter-spacing: 2%;
color: var(--black);
margin: 0;
max-width: 100%;
min-width: 80px; /* ensure the input fields (such as with class .w5) are not too small when on narrow breakpoints */
background: var(--white);
accent-color: var(--grey);
}
input:focus,
select:focus,
textarea:focus,
output:focus {
border-color: var(--grey);
outline: 0;
box-shadow: inset 0 1px 1px var(--dkgrey),0 0 8px var(--grey);
}
select {
/* padding: initial; */
/* for custom selects: */
padding: .6rem .8rem .7rem;
padding-right: 2.2rem;
border: 1px solid var(--dkgrey);
border-radius: 2px;
min-width: 16rem;
max-width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: var(--white);
background-repeat: no-repeat;
background-size: auto 35%;
background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon fill='%235c0f0f' points='0,10 50,90 100,10'/%3E%3C/svg%3E");
background-position: 95% center;
background-position: right .5em top 55%;
cursor: pointer;
}
[class^='input-'] {
margin-bottom: 1.6rem;
}
[type="checkbox"],
[type="radio"] {
width: auto;
height: auto;
width: 2rem;
height: 2rem;
min-width: 0;
padding: 0;
margin: 0 .8rem 0 0;
line-height: initial;
border: none;
display: inline-block;
vertical-align: text-top;
}
.input-checkbox label,
.input-radio label {
margin-right: 1em;
display: inline-block;
vertical-align: text-top;
max-width: calc(100% - 4.8rem); /* to avoid dropping into new lines on narrow breakpoints. */
font-weight: normal;
}
/* Multiple sets */
.fm-checkbox > label:first-child,
.fm-radio > label:first-child {
display: block;
font-weight: bolder;
}
.input-check-option,
.input-radio-option {
display: block;
margin-bottom: 0;
/* Spread options into three columns */
display: inline-block;
vertical-align: text-top;
width: 33%;
min-width: 200px;
}
.input-check-option input,
.input-radio-option input {
float: left;
}
.input-check-option label,
.input-radio-option label {
display: block;
margin: 0 1.5em;
font-weight: normal;
}
/* File Input Upload */
.js [type="file"] {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
[type="file"] + label {
}
[type="file"] + label output {
display: flex;
flex-direction: row;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
[type="file"] + label output strong {
font-weight: normal;
color: var(--grey);
margin-left: auto;
}
[type="file"] + label output .icon {
margin-top: -0.25em;
margin-right: 0.25em;
}
[type="file"]:focus + label output,
[type="file"] + label:hover output {
color: var(--grey);
border-color: currentColor;
}
.no-js [type="file"] + label,
.no-js [type="file"] + label output {
display: none;
}
/* Input Error Messages */
.error-message {
margin-bottom: 0;
padding: .4rem .8rem;
background-color: var(--red);
color: var(--white);
line-height: 1.3;
font-size: small;
}
.input-checkbox .error-message {
margin-top: .25em;
}
.controls-group {
clear: both;
padding: 0;
margin: 0 0 1.6rem 0;
}
.controls-group > .button {
margin-bottom: .4rem;
}
.controls-group > .button + .button {
margin-left: 1.6rem;
}
.controls-group > .next {
float: right;
}
.form-row {
}
/* Form Module */
.fm-form {
max-width: 600px;
}
.fm-form [type="url"],
.fm-form [type="tel"],
.fm-form [type="text"],
.fm-form [type="email"],
.fm-form [type="number"],
.fm-form [type="password"],
.fm-form select,
.fm-form textarea {
width: 100%;
}
/* Auth Forms */
.auth-block {
max-width: 600px;
margin: 3.2rem auto;
}
.auth-form {
max-width: 300px;
}
.auth-form input {
width: 100%;
}
/* Display classes */
.block { display: block; }
.inline { display: inline; }
.inblock { display: inline-block; }
/* Alignment */
.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
/* Opacity levels */
.o0 { opacity: 0; }
.o10 { opacity: .1; }
.o20 { opacity: .2; }
.o30 { opacity: .3; }
.o40 { opacity: .4; }
.o50 { opacity: .5; }
.o60 { opacity: .6; }
.o70 { opacity: .7; }
.o80 { opacity: .8; }
.o90 { opacity: .9; }
.o100 { opacity: 1; }
/* Blocking widths */
.w5 { width: 5%; }
.w10 { width: 10%; }
.w15 { width: 15%; }
.w20 { width: 20%; }
.w25 { width: 25%; }
.w30 { width: 30%; }
.w35 { width: 35%; }
.w40 { width: 40%; }
.w45 { width: 45%; }
.w50 { width: 50%; }
.w55 { width: 55%; }
.w60 { width: 60%; }
.w65 { width: 65%; }
.w70 { width: 70%; }
.w75 { width: 75%; }
.w80 { width: 80%; }
.w85 { width: 85%; }
.w90 { width: 90%; }
.w95 { width: 95%; }
.w100 { width: 100%; }
/* Lines clamping (truncating) */
.l1, .l2, .l3, .l4, .l5, .l6, .l7, .l8, .l9, .l10 {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.l1 { -webkit-line-clamp: 1; }
.l2 { -webkit-line-clamp: 2; }
.l3 { -webkit-line-clamp: 3; }
.l4 { -webkit-line-clamp: 4; }
.l5 { -webkit-line-clamp: 5; }
.l6 { -webkit-line-clamp: 6; }
.l7 { -webkit-line-clamp: 7; }
.l8 { -webkit-line-clamp: 8; }
.l9 { -webkit-line-clamp: 9; }
.l10 { -webkit-line-clamp: 10; }
/* ! Content module columns */
.cke {
display: flex;
position: relative;
justify-content: flex-start;
align-items: stretch;
flex-wrap: wrap;
column-gap: 2%;
row-gap: 2rem;
width: 100%;
padding: 0;
margin: 0;
}
.cke > .c1,
.cke > .c2,
.cke > .c3,
.cke > .c4,
.cke > .c5,
.cke > .c6 { }
.cke > .c1 { flex-basis: 100%; max-width: 100%; }
.cke > .c2 { flex-basis: 49%; max-width: 49%; }
.cke > .c3 { flex-basis: 32%; max-width: 32%; }
.cke > .c4 { flex-basis: 23.5%; max-width: 23.5%; }
.cke > .c5 { flex-basis: 18.4%; max-width: 18.4%; }
.cke > .c6 { flex-basis: 15%; max-width: 15%; }
/* ! CSS columns */
.columns { columns: 3 15vw; column-gap: 2vw; }
.columns-2 { columns: 2 500px; column-gap: 3em; }
.columns-3 { columns: 3 250px; column-gap: 3em; }
.columns-4 { columns: 4 250px; column-gap: 3em; }
/* ! Debug Body Classes */
body.debug:after {
content: attr(class);
right: 0;
}
body.debug::before,
body.debug::after {
position: fixed;
top: 0px;
display: inline-block;
padding: 0 .5em;
color: var(--ltgrey);
background: var(--dkgrey);
z-index: 1100;
font-size: 10px;
}
/* ! Dev. Site indicator */
.debug-indicator {
display: block;
padding: .5em;
background-color: #fc0;
background-image: repeating-linear-gradient(45deg, transparent, transparent 7px, #330 7px, #330 14px);
text-align: center;
}
.debug-indicator p {
display: inline-block;
margin: 0;
padding: .293em 1em;
background-color: var(--black);
color: white;
line-height: 1.4em;
text-transform: uppercase;
font-size: 12px;
font-family: courier, serif;
font-weight: normal;
letter-spacing: 0.1em;
}
.debug-indicator span {
font-size: 1.5em;
line-height: 1;
cursor: help;
}
/* ! Messages ============================== */
#flashMessage {
}
.message {
position: relative;
padding: .8rem 1.6rem .6rem;
margin-bottom: 1.6rem;
font-size: 1.6rem;
letter-spacing: 2%;
color: var(--deepcurrant);
background-color: var(--wintersun);
border-left: 6px solid currentColor;
}
.message.success { background-color: var(--canopygreen-lite); color: var(--canopygreen-deep); }
.message.error { background-color: var(--red); color: var(--wintersun); }
.message.info { background-color: var(--bigskyblue-lite); color: var(--bigskyblue-deep);}
.message a {
font-weight: bolder;
color: inherit;
}
.message > :last-child {
margin-bottom: 0;
}
.message .close {
float: right;
color: var(--black);
font-size: 2rem;
font-weight: bold;
line-height: initial;
text-shadow: 0 1px 0 var(--white);
text-decoration: none;
opacity: 0.5;
}
.message .close:hover{
color: var(--black);
text-decoration: none;
opacity: 0.75;
}
/* ! Cards items */
.cards {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
width: 103%;
margin: 1em -1.5% 0;
padding: 0;
list-style-type: none;
}
.card {
width: 30%;
margin: .8em 1.5%;
padding: 0 1em 1em;
background-color: white;
box-shadow: 0 0 2px 2px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
}
.card .more {
margin-top: auto; /* to push item to the end of flex axis */
margin-bottom: 0;
flex-grow: 0;
}
.card-img {
display: block;
width: 100%;
margin: 0;
transition: all .5s ease;
}
.card-link {
display: block;
width: calc(100% + 2em);
margin: 0 -1em 1em;
overflow: hidden;
}
.card-link:hover .card-img {
transform: scale(1.1);
}
/* for 4, 8, 12, 4n… */
.card:nth-last-child(2):first-child,
.card:nth-last-child(2):first-child ~ .card,
.card:nth-last-child(4n):first-child,
.card:nth-last-child(4n):first-child ~ .card {
width: 45%;
margin-left: 2%;
margin-right: 2%;
}
/* !Media grid ============================== */
.media-grid {
margin-left: -20px;
margin-bottom: 0;
}
.media-grid:before, .media-grid:after {
display: table;
content: "";
}
.media-grid:after {
clear: both;
}
.media-grid li {
display: inline;
}
.media-grid a, .media-grid div.group {
float: left;
padding: 4px;
margin: 0 0 20px 20px;
border: 1px solid #ddd;
border-radius: 2px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
}
.media-grid a img {
display: block;
}
.media-grid a:hover {
border-color: #7a2;
box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}
.media-grid .caption {
display: block;
}
/* !Tabs (activate in tabs.js) ============================== */
.tabs-nav {
display: block;
margin: 0;
padding: 0;
}
.tabs-nav li {
display: block;
width: auto;
padding: 0;
float: left;
margin-bottom: 0;
}
.tabs-nav li a {
display: block;
text-decoration: none;
width: auto;
min-height: 34px;
padding: 10px 20px;
border: solid 1px #ddd;
border-width: 1px 1px 0 0;
margin: 0;
background: #f6f6f6;
font-size: 13px;
}
.tabs-nav li a:hover {
background: #f0f0f0;
}
.tabs-nav li a.active {
background: #fff;
position: relative;
padding-bottom: 11px;
margin-bottom: -1px;
border-left-width: 1px;
margin: 0 0 -1px -1px;
color: #111;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.tabs-nav li:first-child a.active {
margin-left: 0;
}
.tabs-nav li:first-child a {
border-width: 1px 1px 0 1px;
border-top-left-radius: 3px;
}
.tabs-nav li:last-child a {
border-top-right-radius: 3px;
}
.tabs-content { margin: 0; padding: 2em; border: 1px solid #ddd; display: block; list-style: none; clear: both;}
.tabs-content > .tab { display:none; }
.tabs-content > .tab.active { display: block; }
/* !Tables ============================== */
.table-wrap {
max-width: 100%;
overflow-x: auto;
-ms-overflow-style: none;
}
table {
/* table-layout: fixed; */
width: 100%;
margin-bottom: 2em;
padding: 0;
font-size: 14px;
border-collapse: collapse;
max-width: 100%;
overflow-x: scroll;
}
table th,
table td {
padding: .75em .75em .65em;
line-height: 1.125;
text-align: left;
}
table th {
padding-top: 9px;
font-weight: bold;
vertical-align: middle;
}
table td {
vertical-align: top;
border-top: 1px solid #ddd;
}
table tbody th {
border-top: 1px solid #ddd;
vertical-align: top;
}
/* table types: .condensed and .bordered */
.condensed th,
.condensed td {
padding: .25em .25em .2em;
}
.bordered {
border: 1px solid #ddd;
}
.bordered th + th,
.bordered td + td,
.bordered th + td {
border-left: 1px solid #ddd;
}
/* sortable and zebra-striped tables */
.striped tbody tr:nth-child(odd) td,
.striped tbody tr:nth-child(odd) th {
background-color: #f9f9f9;
}
.striped tbody tr:hover td,
.striped tbody tr:hover th {
background-color: #f5f5f5;
}
table .header {
cursor: pointer;
}
table .header:after {
content: "";
float: right;
margin-top: 7px;
border-width: 0 4px 4px;
border-style: solid;
border-color: #000 transparent;
visibility: hidden;
}
table .headerSortUp,
table .headerSortDown {
background-color: #85c446;
background-color: rgba(133,196,70,.3);
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
}
table .header:hover:after {
visibility: visible;
}
table .headerSortDown:after,
table .headerSortDown:hover:after {
visibility: visible;
opacity: 0.6;
}
table .headerSortUp:after {
border-bottom: none;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #000;
visibility: visible;
box-shadow: none;
opacity: 0.6;
}
/* !Pagination ============================== */
.pagination-links {
display: flex;
justify-content: center;
align-items: center;
column-gap: 1rem;
width: 100%;
margin: 5rem auto;
padding: 0;
font-family: "Inter Tight", Arial, monospace;
text-transform: uppercase;
overflow: hidden;
}
.pagination-links li {
display: block;
position: relative;
margin: 0;
padding: 0;
text-align: center;
line-height: 1;
letter-spacing: 15%;
}
.pagination-links li:not(.first, .last, .prev, .next) {
letter-spacing: unset;
}
.pagination-links a,
.pagination-links .current {
display: block;
padding: 0.75rem 1.25rem;
border-radius: 0.5rem;
text-decoration: none;
}
.pagination-links a:hover,
.pagination-links .active a,
.pagination-links .current {
background-color: var(--riverclayred);
color: var(--wintersun);
}
.pagination-links .disabled a,
.pagination-links .disabled a:hover {
background-color: transparent;
color: #bfbfbf;
}
/* ! Slick Slider default styles ============================== */
.slick-slider {
position: relative;
display: block;
box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
overflow: hidden;
display: block;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: 0;
}
.slick-list.dragging {
cursor: pointer;
}
.slick-slider .slick-list,
.slick-slider .slick-track {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track {
position: relative;
left: 0;
top: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:after,
.slick-track:before {
content: "";
display: table;
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
float: left;
height: 100%;
min-height: 1px;
display: none;
font-size: 0; /* VL - fix for extra space caused by inline style "inline-block" on banner */
}
.slick-slide .banner {
font-size: 1rem; /* VL - fix for extra space caused by inline style "inline-block" on banner */
}
[dir="rtl"] .slick-slide {
float: right;
}
.slick-slide img {
display: block;
}
.slick-slide.slick-loading img {
display: none;
}
.slick-slide.dragging img {
pointer-events: none;
}
.slick-initialized .slick-slide {
display: block;
}
.slick-loading .slick-slide {
visibility: hidden;
}
.slick-vertical .slick-slide {
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}
/* Slick Arrows */
.slick-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
aspect-ratio: 1;
width: clamp(1.6rem, 5%, 6.4rem);
min-width: 0;
margin: auto;
padding: 0;
border: none;
border-radius: 100%;
color: var(--green);
background-color: rgba(0,0,0,.03);
transition: all .2s;
cursor: pointer;
z-index: 100;
}
.slick-arrow:hover {
background-color: rgba(0,0,0,.15);
}
.slick-arrow:focus {
outline: none;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px currentcolor;
}
.slick-arrow:hover > span,
.slick-arrow:focus > span {
opacity: 1;
}
.slick-prev {
left: 1.6rem;
}
.slick-next {
right: 1.6rem;
}
.slick-prev-icon,
.slick-next-icon {
place-self: center;
margin: auto;
display: flex;
aspect-ratio: 1;
width: 100%;
background-color: currentcolor;
transition: all .2s;
opacity: .5;
}
.slick-prev-icon {
mask: var(--icon-chevron-left) center center / 100% auto no-repeat;
}
.slick-next-icon {
mask: var(--icon-chevron-right) center center / 100% auto no-repeat;
}
/* Play/Pause button */
.slick-autoplay-toggle-button {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
opacity: 0.75;
color: var(--green);
background: 0 0;
border: 0;
border-radius: 100%;
padding: 0;
margin: auto;
cursor: pointer;
aspect-ratio: 1;
width: 2rem;
}
.slick-autoplay-toggle-button:hover {
opacity: 1;
}
.slick-autoplay-toggle-button:focus {
opacity: 1;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px currentcolor;
}
.slick-autoplay-toggle-button .slick-pause-icon,
.slick-autoplay-toggle-button .slick-play-icon {
width: inherit;
height: inherit;
position: absolute;
inset: 0;
background-color: currentcolor;
mask-position: center center;
mask-size: 90% auto;
mask-repeat: no-repeat;
}
.slick-autoplay-toggle-button .slick-pause-icon {
mask-image: var(--icon-pause);
}
.slick-autoplay-toggle-button .slick-play-icon {
mask-image: var(--icon-play);
}
/* Slick dots */
.slick-dots {
list-style: none;
display: flex;
justify-content: center;
width: 100%;
margin: 0 auto;
padding: .4rem 0;
text-align: center;
line-height: 1;
}
.slick-dots > li {
position: relative;
display: inline-block;
margin: 0 .4rem;
text-align: center;
}
.slick-dots > li > button {
display: block;
border: 1px solid rgba(0,0,0,.5);
border-radius: 100%;
background: none;
margin: 0;
padding: 0;
aspect-ratio: 1;
width: 1rem;
cursor: pointer;
}
.slick-dots > li:hover > button,
.slick-dots > li.slick-active > button {
}
.slick-dots > li:hover > button {
opacity: 1;
border-color: var(--green);
}
.slick-dots > li > button:focus {
opacity: 1;
border-color: var(--green);
outline: 0;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
.slick-dots > li button .slick-dot-icon {
display: block;
margin: auto;
border-radius: inherit;
border: none;
position: absolute;
inset: 0;
}
.slick-dots > li.slick-active button .slick-dot-icon {
background-color: var(--green);
opacity: 1;
}
.slick-dots > li.slick-active button:focus .slick-dot-icon {
}
/* optional positioning when dots are enabled */
.slick-dotted {
margin-bottom: 2rem;
}
.slick-dotted .slick-dots {
position: absolute;
bottom: -3.2rem;
}
.slick-dotted .slick-autoplay-toggle-button {
bottom: -3.6rem;
right: unset;
}
/* ! Toggles - general ============================== */
/* These styles are mainly for functionality and usability.
* Overwrite as needed based on specific module.
*/
.toggle {
position: absolute;
border: none;
padding: 0;
margin: 0;
background: transparent;
left: auto;
right: 1.6rem;
top: 1.6rem;
color: inherit;
width: 3.2rem;
height: 3.2rem;
min-width: 0;
cursor: pointer;
transform-origin: center;
transition: transform .2s;
}
.toggle:hover {
background: transparent;
color: inherit;
}
.toggle:focus {
outline: 1px dotted currentColor;
}
.toggle .svg-icon {
display: block;
width: 100%;
height: 100%;
transform-origin: center;
}
.toggle-unit {
margin: 0 0 1.6rem 0;
position: relative;
z-index: 0;
}
.toggle-unit.is-toggle-on {
z-index: 1;
}
.toggle-unit.is-toggle-on .toggle {
transform: rotate(-90deg);
opacity: .8;
}
.toggle-details {
margin: 0;
padding: 0 3.2rem;
overflow: hidden;
max-height: 0;
transition: all .2s ease-in-out;
}
.is-toggle-on .toggle-details,
.no-js .toggle-details {
opacity: 1;
max-height: 99999px;
margin-bottom: 1.6rem;
padding: 1.6rem 3.2rem;
will-change: opacity, max-height, margin, padding;
}
.is-toggle-off .toggle-details {
opacity: 0;
max-height: 0;
margin-bottom: 0;
}
.toggle-head {
position: relative;
padding: .8rem 6.4rem .8rem 3.2rem;
margin: 0;
border-radius: 0;
color: var(--white);
background-color: var(--dkgrey);
z-index: 1;
cursor: pointer;
transition: .2s all;
}
.toggle-head:hover,
.is-toggle-on > .toggle-head {
background-color: var(--dkgrey);
}
.toggle-head > .toggle-title {
padding: 0;
margin-top: .8rem;
margin-bottom: .4rem;
line-height: 1.5;
color: inherit;
cursor: pointer;
}
/* ! Magnific Popup */
.default-popup {
position: relative;
background: var(--white);
padding: 20px;
width: auto;
max-width: 560px;
margin: 20px auto;
}
/* JS helper classes: */
.no-js .no-js-show {
display: block;
}
.no-js .no-js-hide {
display: none;
}
/* ! Skip Nav (Accessibility navigation) */
.skip-nav a {
border: 0;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
position: absolute;
left: 20px;
top: 20px;
white-space: nowrap;
z-index: 1;
padding: .25rem .5rem;
background: #ffffffcc;
color: var(--green);
}
.skip-nav a:focus,
.skip-nav a:active {
position: absolute;
margin: 0;
height: auto;
width: auto;
overflow: hidden;
clip: auto;
}
/* ! Tooltips */
[data-tooltip] {
position: relative;
text-decoration: underline;
text-decoration-style: dashed;
}
[data-tooltip]:before {
opacity: 0;
transition: opacity .2s;
}
[data-tooltip]:hover:before {
content: attr(data-tooltip);
display: block;
position: absolute;
bottom: 100%;
left: 1em;
transition: all .2s;
padding: .5em .75em;
background-color: var(--dkgrey);
color: #fefefe;
border-color: currentColor;
border-radius: .5rem;
border-bottom-left-radius: 0;
font-size: small;
font-weight: 100;
line-height: 1.25;
letter-spacing: normal;
min-width: 200px;
max-width: 400px;
box-shadow: 0 0 8px 2px rgba(0,0,0,.1);
opacity: 1;
}