/* public/base.css */
/*
(c)2017 - visuallizard.com
Inspired by:
Skeleton www.getskeleton.com
Bootstrap twitter.github.com/bootstrap/
HTML5 ✰ Boilerplate h5bp.com
*/
/*
COLORS
#d4a129 gold
#708cab blue
#516789 dark blue
FONTS
Whitney Family from Typography.com
300 Whitney Ligh
400 Whitney Book
500 Whitney Medium
600 Whitney Semibold
700 Whitney Bold
800 Whitney Black [not included]
*/
/* Table of Content
#Reset & Basics
#Basic Styles
#Site Styles
#Typography
#Links
#Lists
#Images
#Buttons & Messages
#Tabs
#Forms
#Misc */
/* !Reset & Basics ============================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img,
ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
/*
::-moz-selection { background: #85c446; color: #fff; text-shadow: none; }
::selection { background: #85c446; color: #fff; text-shadow: none; }
*/
/* !Basic Styles ============================== */
html {
box-sizing: border-box;
font-size: 100%;
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
height: 100%;
scroll-padding-top: 80px; /* Anchor padding for Sticky header (height of sticky header + some additional spacing) */
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
body {
font: 300 14px/1.36 "Whitney A", "Whitney B", sans-serif;
background: #f8f8f8;
color: #555;
position: relative;
min-height: 100%;
display: flex;
flex-direction: column;
}
main {
position: relative;
z-index: 1;
flex-grow: 1;
}
*, *:before, *:after {
box-sizing: inherit;
}
body:before {
position: absolute;
}
/* !Typography ============================== */
h1, h2, h3, h4, h5, h6 {
color: #d4a129;
font-weight: 400;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
h1 { font-size: 56px; line-height: 50px; margin-bottom: 14px;}
h2 { font-size: 3.4285em /* 48px */; line-height: 1.2; margin: 0 auto .25em; text-align: center; max-width: 750px; }
h3 { font-size: 2.2857em /* 32px */; line-height: 1.1; margin-bottom: .3em; color: #516789; }
h4 { font-size: 1.7143em /* 24px */; line-height: 1.2; margin-bottom: .75em; margin-top: .25em; color: #666; font-weight: 600; }
h5 { font-size: 1.2em; line-height: 1.2; color: rgb(102, 102, 102); }
h6 { font-size: 14px; line-height: 1.2; }
p { margin: 0 0 1em 0; }
p img { margin: 0; max-width: 100%; height: auto !important; }
p.lead { font-size: 21px; line-height: 1.25; }
i, em { font-style: italic; }
b, strong { font-weight: bold; }
small { font-size: 80%; }
/* Blockquotes */
blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; }
blockquote { margin: 0 0 20px; padding: 10px 20px 0 15px; border-left: 5px solid #ddd; }
blockquote cite { display: block; font-size: 12px; color: #666; }
blockquote cite:before { content: "\2014 \0020"; }
blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #666; }
/* !Links */
a { color: #708cab; outline: 0; text-decoration: none; }
a:hover { color: #000; outline: 0;}
a:focus { color: #000; outline: thin dotted; }
a:active { outline: 0; }
p a { line-height: inherit; }
/* !Lists */
ul, ol { margin: 0 0 1em 1em; }
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; }
ul.unstyled { list-style: none; margin-left: 0; }
dl { margin-bottom: 1em; }
dl dt, dl dd { line-height: inherit; }
dl dt { font-weight: bold; }
dl dd { margin-left: 1em; }
dd:after {
/* http://lea.verou.me/2012/02/flexible-multiline-definition-lists-with-2-lines-of-css/ */
content: '\D\A';
white-space: pre;
}
/* !Images */
img {
border: 0;
-ms-interpolation-mode: bicubic;
}
img.scale-with-grid {
max-width: 100%;
height: auto;
}
.img_left {
float: left;
margin: 0 2em 2em 0;
}
.img_right {
float: right;
margin: 0 0 2em 2em;
}
iframe {
width: 100%;
}
.svg-icon,
.icon-svg,
svg.icon {
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: 12px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
code {
background-color: #eee;
color: rgba(0, 0, 0, 0.75);
padding: 1px 3px;
}
pre {
background-color: #f5f5f5;
display: block;
padding: 8.5px;
margin: 0 0 18px;
line-height: 18px;
font-size: 12px;
border: 1px solid #ddd;
border: 1px solid rgba(0, 0, 0, 0.15);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
hr {
clear: both;
height: 0;
margin: 20px 0 19px;
border: 0;
border-bottom: 1px solid #ddd;
}
address {
display: block;
line-height: 18px;
margin-bottom: 18px;
}
.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.5em;
}
sub {
/* Move the subscripted text down, but only
half as far down as the superscript moved up */
bottom: -0.25em;
}
/* !Buttons & Messages ============================== */
.button.danger,
.message.danger,
.button.danger:hover,
.message.danger:hover,
.button.error,
.message.error,
.button.error:hover,
.message.error:hover,
.button.success,
.message.success,
.button.success:hover,
.message.success:hover,
.button.info,
.message.info,
.button.info:hover,
.message.info:hover {
color: #fff;
}
.button .close,
.message .close,
.remove {
font-family: Arial, sans-serif;
line-height: 1;
}
.message.danger,
.message.error {
background-color: #c43c35;
background-image: linear-gradient(to bottom, #ee5f5b, #c43c35);
}
.button.danger,
.button.error {
border-color: #c43c35;
color: #c43c35;
}
.button.danger:hover,
.button.error:hover {
background-color: #c43c35;
}
.button.success,
.message.success {
background-color: #57a957;
background-image: linear-gradient(to bottom, #62c462, #57a957);
}
.button.info,
.message.info {
background-color: #339bb9;
background-image: linear-gradient(to bottom, #5bc0de, #339bb9);
}
button,
.button {
display: inline-block;
vertical-align: middle;
padding: 1em 2em;
min-width: 150px;
color: #708cab;
background-color: transparent;
background-repeat: no-repeat;
background-repeat: repeat-x;
background-origin: border-box;
text-align: center;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.01em;
font-weight: 600;
font-size: 16px;
line-height: 1;
border: 2px solid #708cab;
/* border-radius: 15% / 40%; */
border-radius: 1em;
border-bottom-left-radius: 0;
cursor: pointer;
transition: 0.1s linear all;
}
button.flipped,
.button.flipped {
border-bottom-left-radius: 1em;
border-bottom-right-radius: 0;
}
button:hover,
.button:hover {
background-color: #708cab;
color: #fff;
text-decoration: none;
}
.button:active {
border-color: #b3d4fc;
}
.button:focus {
outline: 1px dotted #666;
outline-offset: 1px;
}
.button.primary {
color: #fff;
background-color: #0064cd;
background-image: linear-gradient(to bottom, #049cdb, #0064cd);
}
.button.active, .btn:active {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.button.disabled {
cursor: default;
background-image: none;
opacity: 0.65;
box-shadow: none;
}
.button[disabled] {
cursor: default;
background-image: none;
opacity: 0.65;
box-shadow: none;
}
.button + .button {
margin-left: 1em;
}
button.link-button {
border:none; padding:0;
margin: 0;
width:auto;
min-width:0;
font-weight:normal;
text-transform: none;
color: #708cab; outline: 0; text-decoration: none;
font-size: 14px;
}
button.link-button:hover {
background: inherit;
color: #000; outline: 0;
}
.close {
float: right;
color: #000000;
font-size: 20px;
font-weight: bold;
line-height: 13.5px;
text-shadow: 0 1px 0 #fff;
opacity: 0.25;
}
.close:hover{
color: #000000;
text-decoration: none;
opacity: 0.4;
}
a.remove, a.progress_action {
margin: 0;
width: auto;
height: auto;
padding: 0;
line-height: 1;
font-size: 18px;
font-weight: bold;
color: #c43c35;
text-decoration: none;
text-align: center;
border-radius: 4px;
opacity: .8;
}
a.remove:hover, a.progress_action:hover {
opacity: 1;
}
.message {
position: relative;
padding: .5em 1em .5em;
margin-bottom: 1em;
color: #444;
background-color: #eedc94;
background-repeat: repeat-x;
background-image: linear-gradient(to bottom, #fceec1, #eedc94);
border: 1px solid rgba(0, 0, 0, .05);
}
.message .close {
text-decoration: none;
margin-top: 1px;
}
.message a {
font-weight: bold;
color: #404040;
}
.message.danger p a,
.message.error p a,
.message.success p a,
.message.info p a {
color: #fff;
}
.message *:last-child {
margin-bottom: 0;
}
#flashMessage {
text-align: center;
font-size: 2em;
}
/* !Forms ============================== */
form {
margin-bottom: 1em;
}
div.input {
margin-bottom: 2em;
}
fieldset {
margin-bottom: 1em;
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="tel"],
input[type="email"],
textarea,
select {
border: 1px solid #ccc;
padding: 1em 1em;
outline: none;
border-radius: 2px;
border-radius: 1em;
border-bottom-left-radius: 0;
font: 16px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #777;
margin: 0;
width: 300px;
width: 100%;
max-width: 100%;
display: block;
/* margin-bottom: 20px; */
background: #fff;
}
select {
padding: initial;
padding: 1em;
padding-right: 1.5em;
border: 1px solid #ccc;
min-width: 5em;
height: auto;
-webkit-appearance: none;
-moz-appearance: none;
-moz-appearance: none;
background: #fff;
/* background: #fff no-repeat 96% center url("data:image/svg+xml;utf8,"); */
background: #fff no-repeat 98% center url("data:image/svg+xml;utf8,");
background-size: auto 32px;
cursor: pointer;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus {
border: 1px solid #aaa;
color: #444;
-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
box-shadow: 0 0 3px rgba(0,0,0,.2); }
textarea {
min-height: 60px;
min-width: 210px;
}
label,
legend {
display: block;
font-size: 1.5em;
line-height: 1.2;
margin-bottom: .25em;
margin-top: .75em;
color: #666;
font-weight: 600;
}
.input.checkbox label,
.input.radio label {
margin-left: 5px;
margin-top: 0;
margin-right: 1em;
display: inline-block;
vertical-align: text-top;
font-size: 1rem;
font-weight: normal;
max-width: calc(100% - 1em - 20px);
}
.input.checkbox {
}
/* Grid of Radios */
/* Grid of Checkboxes */
.input.select .checkbox label {
font-size: 1rem;
margin: 0 1em 0 .25em;
font-weight: normal;
}
/* cat4 required field indicator */
.required > label:after,
.required-field > label:after {
content: " *";
}
/* for jquery.overlabel */
label.overlabel-apply {
position: absolute;
top: 3px;
left: 5px;
z-index: 1;
font-weight: normal;
color: #777;
}
div.overlabel-wrapper {
position: relative;
}
input[type=checkbox], input[type=radio] {
width: auto;
height: auto;
padding: 0;
margin: 3px 0;
*margin-top: 0;
/* IE6-7 */
line-height: normal;
border: none;
display: inline-block;
vertical-align: text-top;
}
input[type=file] {
background-color: #ffffff;
padding: initial;
border: initial;
line-height: initial;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
input[type=button], input[type=reset], input[type=submit] {
width: auto;
height: auto;
}
select[multiple] {
height: inherit;
background-color: #ffffff;
}
textarea {
height: auto;
}
.poll label .description {
font-weight: normal;
}
.input.file p {
margin: 0;
}
input.form-error {
margin-bottom: 0;
}
.error-message {
color: #ee5f5b;
margin-top: 5px;
margin-bottom: 10px;
font-weight: bold;
letter-spacing: .02em;
}
/* Recaptcha */
#recaptcha_image {
margin: 1em 0;
}
#recaptcha_widget_div {
margin-bottom: 20px;
}
/* !Media grid ============================== */
.media-grid {
margin-left: -20px;
margin-bottom: 0;
zoom: 1;
}
.media-grid:before, .media-grid:after {
display: table;
content: "";
zoom: 1;
}
.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;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
}
.media-grid a img {
display: block;
}
.media-grid a:hover {
border-color: #7a2;
-webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
-moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
}
.media-grid .caption {
display: block;
}
/* !Tabs (activate in tabs.js) ============================== */
/* New Tabs */
.tabs-nav {
display: block;
margin: 0 0 0 0;
padding: 0;
/* border-bottom: solid 1px #ddd; */
}
.tabs-nav li {
display: block;
width: auto;
height: 30px;
padding: 0;
float: left;
margin-bottom: 0;
}
.tabs-nav li a {
display: block;
text-decoration: none;
width: auto;
height: 29px;
padding: 0px 20px;
line-height: 30px;
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;
height: 30px;
position: relative;
top: -4px;
padding-top: 4px;
border-left-width: 1px;
margin: 0 0 0 -1px;
color: #111;
-moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 32px;
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;
-moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
}
.tabs-nav li:last-child a {
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
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 {
width: 100%;
margin-bottom: 18px;
padding: 0;
font-size: 13px;
border-collapse: collapse;
}
table th, table td {
padding: 10px 10px 9px;
line-height: 18px;
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-table and .bordered-table */
.condensed th, .condensed td {
padding: 5px 5px 4px;
}
.bordered {
border: 1px solid #ddd;
border-collapse: separate;
*border-collapse: collapse; /* IE7, collapse table to remove spacing */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.bordered th + th, .bordered-table td + td, .bordered th + td {
border-left: 1px solid #ddd;
}
.bordered thead tr:first-child th:first-child, .bordered tbody tr:first-child td:first-child {
-webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
border-radius: 4px 0 0 0;
}
.bordered thead tr:first-child th:last-child, .bordered tbody tr:first-child td:last-child {
-webkit-border-radius: 0 4px 0 0;
-moz-border-radius: 0 4px 0 0;
border-radius: 0 4px 0 0;
}
.bordered tbody tr:last-child td:first-child {
-webkit-border-radius: 0 0 0 4px;
-moz-border-radius: 0 0 0 4px;
border-radius: 0 0 0 4px;
}
.bordered tbody tr:last-child td:last-child {
-webkit-border-radius: 0 0 4px 0;
-moz-border-radius: 0 0 4px 0;
border-radius: 0 0 4px 0;
}
/* 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;
filter: alpha(opacity=60);
-khtml-opacity: 0.6;
-moz-opacity: 0.6;
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;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
filter: alpha(opacity=60);
-khtml-opacity: 0.6;
-moz-opacity: 0.6;
opacity: 0.6;
}
/* !Pagination ============================== */
.pagination {
margin: 2em 0;
color: #666;
font-weight: 500;
text-align: center;
-moz-user-select: none;
user-select: none;
}
.pagination ul {
display: block;
margin: 0;
padding: 0;
}
.pagination li {
display: inline-block;
margin: 0;
}
.pagination a,
.pagination .current {
display: inline-block;
color: inherit;
padding: 0 .5em;
line-height: 2.5em;
text-decoration: none;
}
.pagination .active a,
.pagination .current {
/* background-color: #708cab; */
/* background-color: rgba(112, 140, 171, .3); */
text-decoration: underline;
}
.pagination a:hover {
color: #859db8;
}
.pagination .disabled a,
.pagination .disabled a:hover {
background-color: transparent;
color: #bfbfbf;
}
.pagination .last a {
border: 0;
}
/* ! Slick Slider default styles ============================== */
.slick-slider {
position: relative;
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list {
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus {
outline: none;
}
.slick-list.dragging {
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
-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;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after {
display: table;
content: '';
}
.slick-track:after {
clear: both;
}
.slick-loading .slick-track {
visibility: hidden;
}
.slick-slide {
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[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 Slider additional project specific styles */
.slick-arrow {
position: absolute;
top: calc(50% - 1.5rem);
width: 3rem;
height: 3rem;
padding: 0rem;
min-width: 0;
text-indent: -20em;
overflow: hidden;
border: none;
border-radius: 50%;
color: #eee;
background-color: rgba(255,255,255,0);
background-position: center center;
background-repeat: no-repeat;
background-size: 70% 70%;
transition: all .2s;
opacity: .75;
cursor: pointer;
z-index: 100;
}
.slick-arrow:hover {
background-color: rgba(255,255,255,.5);
}
.slick-prev { left: 5px; background-image: url('data:image/svg+xml;utf8,'); background-position: 30% 50%; }
.slick-next { right: 5px; background-image: url('data:image/svg+xml;utf8,'); background-position: 80% 50%; }
/* Banner dots */
.slick-dots {
list-style: none;
/* position: absolute; */
/* bottom: 1em; */
margin: .5rem auto;
text-align: center;
width: 100%;
left: 0;
right: 0;
line-height: 1;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.slick-dots > li {
display: inline-block;
margin: 0 .25em;
text-align: center;
}
.slick-dots > li > button {
display: block;
border: 1px solid rgba(100,100,100,.90);
border-radius: 100%;
background: rgba(255,255,255,.70);
text-indent: -10em;
overflow: hidden;
margin: 0;
padding: 0;
width: 16px;
height: 16px;
min-width: 0;
cursor: pointer;
}
.slick-dots > li:hover > button,
.slick-dots > li.slick-active > button {
background: rgba(255,255,255,1);
}
/* !Non-semantic helper classes ============================== */
/* For image replacement */
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }
/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
.clear { clear: both; }
/* Self Clearing Goodness */
.container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }
/* !Catalyst specific ============================== */
.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%; }
.h1 { height: 1em; }
.h2 { height: 2em; }
.h3 { height: 3em; }
.h4 { height: 4em; }
.h5 { height: 5em; }
.h6 { height: 6em; }
.h7 { height: 7em; }
.h8 { height: 8em; }
.h9 { height: 9em; }
.h10 { height: 10em; }
.h11 { height: 11em; }
.h12 { height: 12em; }
.h13 { height: 13em; }
.h14 { height: 14em; }
.h15 { height: 15em; }
.h16 { height: 16em; }
.h17 { height: 17em; }
.h18 { height: 18em; }
.h19 { height: 19em; }
.h20 { height: 20em; }
.block { display: block; }
.inline { display: inline; }
.hidden { display: none; }
.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }
.cke div.c1,
.cke div.c2,
.cke div.c3,
.cke div.c4,
.cke div.c5,
.cke div.c6 {
padding: 1em 2em;
float: left;
}
.cke div.c2 { width: 50%; }
.cke div.c3 { width: 33.33%; }
.cke div.c4 { width: 23.5%; }
.cke div.c5 { width: 18.4%; }
.cke div.c6 { width: 15%; }
.cke div.c1,
.cke div.first {
clear: both;
padding-left: 0;
}
.cke div.c1 {
float: none;
padding-left: 0;
padding-right: 0;
}
.cke .c2.first + .c2 {
padding-right: 0;
}
.cke:before, .cke:after { content: "\0020"; display: block; height: 0; visibility: hidden; }
.cke:after { clear: both; }
.cke:after { zoom: 1; }
/* !Debug & CakePHP Debug SQL table ============================== */
/*
body.debug:before {
content: attr(class);
position: fixed;
top: 0px;
right: 10px;
color: #ddd;
z-index: 1000;
font-size: 10px;
}
*/
table.cake-sql-log {
display: none;
clear: both;
width: 100%;
max-width: 1200px;
margin: 0 auto;
text-align: left;
border-top: 1px solid #000;
border-left: 1px solid #000;
color: #333;
background-color: #eee;
}
table.cake-sql-log td,
table.cake-sql-log th {
border-bottom: 1px solid #999;
border-right: 1px solid #999;
padding: 0.5em;
}
table.cake-sql-log caption {
text-align: center;
background-color: #900;
color: #fff;
font-weight: bold;
font-size: 1.5em;
padding: 0.5em;
}
/* public/magnific-popup.css */
/* Magnific Popup CSS */
.mfp-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1042;
overflow: hidden;
position: fixed;
background: #0b0b0b;
opacity: 0.8;
filter: alpha(opacity=80); }
.mfp-wrap {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1043;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden; }
.mfp-container {
text-align: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.mfp-container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle; }
.mfp-align-top .mfp-container:before {
display: none; }
.mfp-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 1045; }
.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
width: 100%;
cursor: auto; }
.mfp-ajax-cur {
cursor: progress; }
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
cursor: zoom-out; }
.mfp-zoom {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in; }
.mfp-auto-cursor .mfp-content {
cursor: auto; }
.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; }
.mfp-loading.mfp-figure {
display: none; }
.mfp-hide {
display: none !important; }
.mfp-preloader {
color: #cccccc;
position: absolute;
top: 50%;
width: auto;
text-align: center;
margin-top: -0.8em;
left: 8px;
right: 8px;
z-index: 1044; }
.mfp-preloader a {
color: #cccccc; }
.mfp-preloader a:hover {
color: white; }
.mfp-s-ready .mfp-preloader {
display: none; }
.mfp-s-error .mfp-content {
display: none; }
button.mfp-close, button.mfp-arrow {
overflow: visible;
cursor: pointer;
background: transparent;
border: 0;
-webkit-appearance: none;
display: block;
outline: none;
padding: 0;
z-index: 1046;
-webkit-box-shadow: none;
box-shadow: none;
min-width: 0; }
button::-moz-focus-inner {
padding: 0;
border: 0; }
.mfp-close {
width: 44px;
height: 44px;
line-height: 44px;
position: absolute;
right: 0;
top: 0;
text-decoration: none;
text-align: center;
opacity: 0.65;
padding: 0 0 18px 10px;
color: white;
font-style: normal;
font-size: 28px;
font-family: Arial, Baskerville, monospace; }
.mfp-close:hover, .mfp-close:focus {
opacity: 1; }
.mfp-close:active {
top: 1px; }
.mfp-close-btn-in .mfp-close {
color: #333333; }
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close {
color: white;
right: -6px;
text-align: right;
padding-right: 6px;
width: 100%; }
.mfp-counter {
position: absolute;
top: 0;
right: 0;
color: #cccccc;
font-size: 12px;
line-height: 18px; }
.mfp-arrow {
position: absolute;
opacity: 0.65;
margin: 0;
top: 50%;
margin-top: -55px;
padding: 0;
width: 90px;
height: 110px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.mfp-arrow:active {
margin-top: -54px; }
.mfp-arrow:hover, .mfp-arrow:focus {
opacity: 1; }
.mfp-arrow:before, .mfp-arrow:after, .mfp-arrow .mfp-b, .mfp-arrow .mfp-a {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
margin-top: 35px;
margin-left: 35px;
border: medium inset transparent; }
.mfp-arrow:after, .mfp-arrow .mfp-a {
border-top-width: 13px;
border-bottom-width: 13px;
top: 8px; }
.mfp-arrow:before, .mfp-arrow .mfp-b {
border-top-width: 21px;
border-bottom-width: 21px; }
.mfp-arrow-left {
left: 0; }
.mfp-arrow-left:after, .mfp-arrow-left .mfp-a {
border-right: 17px solid white;
margin-left: 31px; }
.mfp-arrow-left:before, .mfp-arrow-left .mfp-b {
margin-left: 25px;
border-right: 27px solid #3f3f3f; }
.mfp-arrow-right {
right: 0; }
.mfp-arrow-right:after, .mfp-arrow-right .mfp-a {
border-left: 17px solid white;
margin-left: 39px; }
.mfp-arrow-right:before, .mfp-arrow-right .mfp-b {
border-left: 27px solid #3f3f3f; }
.mfp-iframe-holder {
padding-top: 40px;
padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content {
line-height: 0;
width: 100%;
max-width: 900px; }
.mfp-iframe-holder .mfp-close {
top: -40px; }
.mfp-iframe-scaler {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%; }
.mfp-iframe-scaler iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: black; }
/* Main image in popup */
img.mfp-img {
width: auto;
max-width: 100%;
height: auto;
display: block;
line-height: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 40px 0 40px;
margin: 0 auto; }
/* The shadow behind the image */
.mfp-figure {
line-height: 0; }
.mfp-figure:after {
content: '';
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
background: #444444; }
.mfp-figure figure {
margin: 0; }
.mfp-figure small {
color: #bdbdbd;
display: block;
font-size: 12px;
line-height: 14px; }
.mfp-bottom-bar {
margin-top: -36px;
position: absolute;
top: 100%;
left: 0;
width: 100%;
cursor: auto; }
.mfp-title {
text-align: left;
line-height: 18px;
font-size: 1.2rem;
color: #f3f3f3;
word-wrap: break-word;
padding-right: 36px; }
.mfp-image-holder .mfp-content {
max-width: 100%; }
.mfp-gallery .mfp-image-holder .mfp-figure {
cursor: pointer; }
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
/**
* Remove all paddings around the image on small screen
*/
.mfp-img-mobile .mfp-image-holder {
padding-left: 0;
padding-right: 0; }
.mfp-img-mobile img.mfp-img {
padding: 0; }
.mfp-img-mobile .mfp-figure {
/* The shadow behind the image */ }
.mfp-img-mobile .mfp-figure:after {
top: 0;
bottom: 0; }
.mfp-img-mobile .mfp-figure small {
display: inline;
margin-left: 5px; }
.mfp-img-mobile .mfp-bottom-bar {
background: rgba(0, 0, 0, 0.6);
bottom: 0;
margin: 0;
top: auto;
padding: 3px 5px;
position: fixed;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.mfp-img-mobile .mfp-bottom-bar:empty {
padding: 0; }
.mfp-img-mobile .mfp-counter {
right: 5px;
top: 3px; }
.mfp-img-mobile .mfp-close {
top: 0;
right: 0;
width: 35px;
height: 35px;
line-height: 35px;
background: rgba(0, 0, 0, 0.6);
position: fixed;
text-align: center;
padding: 0; } }
@media all and (max-width: 900px) {
.mfp-arrow {
-webkit-transform: scale(0.75);
transform: scale(0.75); }
.mfp-arrow-left {
-webkit-transform-origin: 0;
transform-origin: 0; }
.mfp-arrow-right {
-webkit-transform-origin: 100%;
transform-origin: 100%; }
.mfp-container {
padding-left: 6px;
padding-right: 6px; } }
.mfp-ie7 .mfp-img {
padding: 0; }
.mfp-ie7 .mfp-bottom-bar {
width: 600px;
left: 50%;
margin-left: -300px;
margin-top: 5px;
padding-bottom: 5px; }
.mfp-ie7 .mfp-container {
padding: 0; }
.mfp-ie7 .mfp-content {
padding-top: 44px; }
.mfp-ie7 .mfp-close {
top: 0;
right: 0;
padding-top: 0; }
/* public/layout.css */
/*
(c)2017 - visuallizard.com
General Layout Styles.
Sets major blocking (and minor styles) to genaral elements in the template.
All can be removed and started from scratch or elemnts can be adjusted individually.
*/
.container {
/*
Set site width only here and use this class to centre the content in browser window.
Default width is 960px and can be changed in skeleton.css to maintain resposivnes.
*/
max-width: 960px;
margin: 0 auto;
padding: 0;
position: relative;
}
.full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
.section {
display: flow-root; /* prevent margin collapsing */
--fg: #555;
--bg: #f8f8f8;
color: var(--fg);
background-color: var(--bg);
}
.section > .container {
padding-top: 2em;
padding-bottom: 2em;
padding: 2em 4em;
}
.section.no-padding > .container {
padding-top: 0;
padding-bottom: 0;
}
.section.no-padding-top > .container {
padding-top: 0;
}
.section.no-padding-bottom > .container {
padding-bottom: 0;
}
.unsection > .container {
padding: 0;
}
/*
.section:nth-child(odd) {
background-color: #fff;
}
.section:nth-child(even){
background-color: #f8f8f8;
}
*/
.section.inverse {
background-color: #859db8;
color: #fff;
}
.section.type-1 {
background-color: #fff;
}
.section.type-2 {
background-color: #f8f8f8;
}
.section.type-3,
.section.type-4 {
background-color: #859db8;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
color: #fff;
font-weight: 500;
}
.section.type-4 {
background-color: #516789;
}
.section.type-5 {
background-color: #444;
background-repeat: no-repeat;
background-position: center center;
background-size: auto 120%;
color: #fff;
}
.section.type-6 {
background-color: #333;
color: #fff;
}
.section.type-7 {
background-color: #d4a129;
color: #fff;
}
.section.type-3 h2,
.section.type-4 h2,
.section.type-5 h2,
/* .section.type-6 h2, */
.section.type-7 h2,
.section.type-3 h3,
.section.type-4 h3,
.section.type-5 h3,
.section.type-6 h3,
.section.type-7 h3,
.section.type-3 h4,
.section.type-4 h4,
.section.type-5 h4,
.section.type-6 h4,
.section.type-7 h4 {
color: #fff;
text-align: center;
}
.section.align-left h2,
.section.align-left h3,
.section.align-left h4 {
text-align: left;
max-width: none;
}
.section.align-center h2,
.section.align-center h3,
.section.align-center h4,
.section.align-center h5,
.section.align-text-center p {
text-align: center;
}
.section.type-3 .button,
.section.type-4 .button,
.section.type-5 .button,
.section.type-6 .button,
.section.type-7 .button {
color: #fff;
border-color: #fff;
}
.section.type-3 .button:hover,
.section.type-4 .button:hover,
.section.type-5 .button:hover,
.section.type-6 .button:hover,
.section.type-7 .button:hover {
color: #708cab;
background-color: #fff;
border-color: #fff;
}
.section.type-3 a,
.section.type-4 a {
color: #d4a129;
text-decoration: none;
}
.section.type-3 a:hover,
.section.type-4 a:hover {
color: #fff;
}
.section.type-7 a {
color: #708cab;
}
.section.type-custom {
color: var(--fg);
background-color: var(--bg);
}
.section.type-custom h2,
.section.type-custom h3,
.section.type-custom h4,
.section.type-custom a {
color: inherit;
}
.section.type-custom a:not(:hover):not(.button) {
text-decoration: underline;
}
.abstract-bg-1 { background-image: url(https://www.chamberplan.ca/img/abstract-bg-1.t1720724924.jpg); }
.abstract-bg-2 { background-image: url(https://www.chamberplan.ca/img/abstract-bg-2.t1720724924.jpg); }
.abstract-bg-3 { background-image: url(https://www.chamberplan.ca/img/abstract-bg-3.t1720724924.jpg); }
.abstract-bg-4 { background-image: url(https://www.chamberplan.ca/img/abstract-bg-4.t1720724924.jpg); }
.abstract-bg-5 { background-image: url(https://www.chamberplan.ca/img/abstract-bg-5.t1720724924.jpg); }
.abstract-bg-6 { background-image: url(https://www.chamberplan.ca/img/abstract-bg-6.t1720724924.svg); }
.abstract-bg-7 { background-image: url(https://www.chamberplan.ca/img/abstract-bg-7.t1720724924.jpg); }
.columns-2 {
columns: 2 300px;
}
.columns-3 {
columns: 3 250px;
}
.section.cke-split .cke .c2 + .c2 {
border-left: 1px solid #708cab;
}
.section.align-text-center .c3 p,
.section.align-text-center ul {
text-align: left;
}
/* Header */
.site-header {
width: 100%;
margin: 0;
padding: 0;
background: none;
z-index: 2;
position: absolute;
top: 0;
left: 0;
border-bottom: 1px solid rgba(255,255,255,.5);
transform: translateY(0);
transition: all .4s ease;
}
.site-header .container {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
align-items: center; /* vertical centering for Safari */
margin: 0 auto;
padding: .5em 0;
}
.site-header .container:after,
.site-footer .container:after { /* remove AFTER as it interferes with FLEX and isnt needed */
display: none;
}
.header-away {
opacity: 0;
transform: translateY(-100%);
}
.header-fixed {
position: fixed;
background-color: #fff;
box-shadow: 0 4px 10px -8px rgba(0,0,0,0.45);
opacity: 1;
transform: translateY(0);
}
.header-fixed .main-nav .nav_1 > li > a { color: #000; }
.header-fixed .header-tools > li > a { color: #666; }
.header-fixed.site-header .main-nav .nav_1 > li:hover > a,
.header-fixed.site-header .main-nav .nav_1 > li.on > a { color: #708cab; }
.site-logo {
font-size: 56px;
line-height: 50px;
margin-bottom: 14px;
font-weight: 400;
display: block;
margin: 5px 3% 0 0;
padding: 0;
width: 30%;
max-width: 275px;
text-indent: -9999px;
}
.site-logo-link {
display: block;
width: 100%;
background-image: url(https://www.chamberplan.ca/img/logo-chambers-white.t1720724926.png);
background-image: url(https://www.chamberplan.ca/img/logo-chambers-white.t1720724926.svg), linear-gradient(transparent, transparent);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center center;
transition: opacity .2s;
}
.header-fixed .site-logo-link {
background-image: url(https://www.chamberplan.ca/img/logo-chambers-black.png);
background-image: url(https://www.chamberplan.ca/img/logo-chambers-black.t1720724926.svg), linear-gradient(transparent, transparent);
}
[lang="fr"] .site-logo-link {
background-image: url(https://www.chamberplan.ca/img/logo-chambers-fr-white.t1720724926.png);
background-image: url(https://www.chamberplan.ca/img/logo-chambers-fr-white.t1720724926.svg), linear-gradient(transparent, transparent);
}
[lang="fr"] .header-fixed .site-logo-link {
background-image: url(https://www.chamberplan.ca/img/logo-chambers-fr-black.t1720724926.png);
background-image: url(https://www.chamberplan.ca/img/logo-chambers-fr-black.t1720724926.svg), linear-gradient(transparent, transparent);
}
.site-logo-link:hover {
opacity: .75;
}
/* Navigations */
nav {
display: block;
position: relative;
width: 100%;
margin: 0;
clear: both;
}
nav ul {
clear: both;
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
display: inline-block;
position: relative;
padding: 0;
margin: 0;
}
nav ul li a {
display: block;
position: relative;
padding: 0 10px;
color: #000;
font-size: 15px;
text-decoration: none;
transition: all .2s;
}
nav ul li a:hover,
nav ul li.at a {
color: #708cab;
}
/* ! Main Nav */
.main-nav {
width: auto;
margin-right: 0%;
}
.main-nav .nav_1 {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
height: 100%;
}
.main-nav .nav_1 > li {
display: inline-block;
flex-grow: 1;
margin: 0;
}
.main-nav .nav_1 > li:first-child {
display: none;
}
.main-nav .nav_1 > li:last-child {
}
.main-nav .nav_1 > li > a {
display: block;
display: flex;
flex-direction: column;
justify-content: center;
/* min-height: 4em; */
color: #fff;
font-size: 14px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .03em;
}
.site-header .main-nav .nav_1 > li:hover > a,
.site-header .main-nav .nav_1 > li.on > a {
/* color: #708cab; */
/* color: #000; */
/* color: #ccc; */
opacity: .75;
}
.main-nav .nav_1 > li > a:not(:only-child) {
margin-left: 1em;
}
[lang="fr"] .main-nav .nav_1 > li > a:not(:only-child) { margin-left: 2em; }
.main-nav .nav_1 > li > a:not(:only-child):before {
content: '';
display: inline-block;
position: absolute;
left: -.5em;
top: 50%;
transform: translateY(-50%);
width: 1em;
height: 1em;
background-image: url('https://www.chamberplan.ca/img/icon-chevron-white.t1720724925.svg');
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
}
.header-fixed .main-nav .nav_1 > li > a:not(:only-child):before {
background-image: url('https://www.chamberplan.ca/img/icon-chevron-dark.t1720724925.svg');
}
.main-nav #nav_li_item_245 {
display: none;
}
/* Drop-downs */
.main-nav .nav_2 {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
width: 200px;
padding: .5em 0;
margin: 0;
list-style: none;
background-color: #000;
}
.main-nav .nav_1 > li:hover > .nav_2 {
display: block;
}
.main-nav .nav_2 > li {
display: block;
margin: 0;
}
.main-nav .nav_2 > li > a {
color: #fff;
display: block;
font-weight: normal;
padding: .25em 1em;
}
.main-nav .nav_2 li:hover > a,
.main-nav .nav_2 li.on > a,
.main-nav .nav_2 li.at > a {
color: #708cab;
}
.main-nav .nav_3 {
margin-left: 1rem;
}
.main-nav .nav_3 > li {
}
.main-nav .nav_3 > li > a {
color: #fff;
display: block;
font-size: 14px;
/* font-weight: normal; */
opacity: .9;
padding: .1em 1em;
}
.header-tools {
margin: 0 0 0 2%;
white-space: nowrap;
display: flex;
flex-direction: row;
align-items: center;
font-size: 10px;
}
.header-tools > li {
display: inline-block;
margin: 0 0 0 0.75em;
}
.header-tools > li > a {
display: block;
color: #fff;
text-decoration: none;
transition: all .2s;
}
.site-header .header-tools > li:hover > a {
color: #708cab;
}
.header-tools .icon-svg {
width: 100%;
height: 100%;
}
.header-tools .icon {
color: inherit;
display: inline-block;
width: 2em;
height: 2em;
}
.header-tools .icon + .label {
margin-left: .25em;
}
.header-tools .label {
font-size: 0;
line-height: 0;
opacity: 0;
text-decoration: none;
}
@media only screen and (min-width: 800px) {
.header-tools .login-link .label,
.header-tools .login-link .icon {
color: #fff;
}
.header-tools .login-link .label {
color: #fff;
opacity: 1;
font-size: 12px;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
letter-spacing: .03em;
}
.header-tools .login-link {
display: flex;
align-items: center;
background-color: #c8922c;
padding: .4em .6em;
}
.header-tools .login-link:hover {
background-color: #000;
color: #708cab;
}
.header-tools .login-link .icon {
width: 1em;
height: 1em;
}
}
/* Popups */
body .mfp-bg {
/* background-color: #516789; */
background-color: rgba(81, 103, 137, .95);
opacity: 1;
}
button.mfp-close {
display: none;
}
.mfp-wrap {
-webkit-overflow-scrolling: touch;
-webkit-transform: translateZ(0);
}
.mfp-wrap button.mfp-close {
display: block;
}
.search-form input {
display: inline-block;
width: 100%;
}
.search-form .search-button {
border: none;
padding: .5em;
margin: -.25em 0 0 -3em;
border-radius: 100%;
min-width: 0;
}
.search-form .search-button .icon {
font-size: 20px;
}
.search-form .mfp-close {
min-width: 0;
top: .75em;
right: -2em;
color: #fff !important;
}
.mfp-content .container {
max-width: 600px;
padding: 1em;
}
.quote-text {
text-align: center;
color: #fff;
}
.quote-text h2 {
color: #d4a129;
font-weight: 400;
font-size: 60px;
line-height: 1;
}
.quote-text h2 strong {
display: block;
color: white;
font-weight: 500;
font-size: 1.25em;
margin: 0;
}
.quote-text p {
font-size: 20px;
line-height: 1.25;
}
.quote-form {
overflow: auto;
z-index: 10;
}
.quote-form .company-block {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.quote-form .company-block .input {
width: 48%;
}
/* all forms in popoup */
.mfp-content form {
font-size: 16px;
width: 100%;
text-align: left;
margin: 2em auto;
}
.mfp-content form label {
font-size: 1em;
font-weight: normal;
color: #fff;
}
.mfp-content form .text {
width: 100%;
/* white-space: nowrap; */
}
.mfp-content form .checkbox {
margin-bottom: 1em;
}
.mfp-content form .checkbox label {
color: #fff;
opacity: 0.65;
display: inline;
}
.mfp-content form p {
color: #fff;
opacity: 0.65;
white-space: normal;
}
.mfp-content form .text label,
.mfp-content form .select label,
.mfp-content form .textarea label {
/* visuallyhidden */
border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
}
.mfp-content form .text input {
padding: 1em 3em 1em 1.5em;
font-size: 16px;
border-radius: 1em;
border-bottom-left-radius: 0;
border: none;
}
.mfp-content form .button {
padding: 1em 3em;
color: #fff;
font-size: 14px;
font-weight: 300;
text-transform: none;
border-color: currentColor;
border-width: 1px;
border-radius: 1em;
border-bottom-left-radius: 0;
background-color: #708cab;
}
.mfp-content form .button:hover {
border-color: #fff;
background-color: #fff;
color: #333;
text-decoration: none;
}
.mfp-content #quote-form .mfp-close {
position: static;
min-width: 0;
color: #fff;
right: auto;
left: auto;
top: auto;
margin: 0 auto;
float: right;
width: auto;
font-family: inherit;
font-size: 16px;
font-weight: 400;
vertical-align: middle;
}
.mfp-content #quote-promo-code {
max-width: 200px;
}
/* General Popup copy (probably not needed) */
/*
.popup-copy {
color: #fff;
}
.popup-copy h2 {
color: #d4a129;
font-weight: 400;
font-size: 60px;
}
.popup-copy h2 strong {
display: block;
color: white;
font-weight: 500;
font-size: 1.25em;
margin: 0;
}
.popup-copy h3 {
color: #fff;
}
.popup-copy p {
font-size: 20px;
line-height: 1.25;
}
.popup-copy .mfp-close {
min-width: 0;
top: .75em;
right: -2em;
color: #fff !important;
}
*/
/* JotForms customisations */
.mfp-iframe-scaler.frame-jotform {
min-height: 400px;
padding-top: 70%;
}
.mfp-iframe-scaler.frame-jotform iframe {
background-color: #f8f8f8;
}
/* Banners */
.hero-banners {
margin: 0;
padding: 0;
min-height: 70px; /* height of header */
max-height: 540px;
overflow: hidden;
background-color: #333;
}
.hero-banners .banner {
position: relative;
}
.hero-banners .banner > a {
display: block;
margin: 0;
padding: 0;
width: 100%;
pointer-events: none;
}
.hero-banners .banner > a img {
display: block;
margin: 0;
padding: 0;
width: 100%;
max-height: 500px;
object-fit: cover;
}
/* Reduced banner heigh for some pages */
.your-advisor .hero-banners .banner > a img,
.find-an-advisor .hero-banners .banner > a img { max-height: 350px; }
/* set Yellow copy */
.group-benefits .hero-banners .banner-text { color: #f7d046; font-weight: 500; }
.banner-text {
position: absolute;
top: 50%;
left: 0;
right: 0;
width: 100%;
max-width: 450px;
margin: 0 auto 0;
transform: translateY(-50%);
color: white;
text-align: center;
pointer-events: auto;
}
.banner-text > * {
margin-left: auto;
margin-right: auto;
}
.banner-text :last-child {
margin-bottom: 0;
}
.banner-text h2 {
color: white;
font-weight: 500;
/* font-size: 75px; */
font-size: calc(2.2vw + 1em);
margin-bottom: 0;
}
.banner-text h3 {
margin-bottom: 0;
color: #d4a129;
font-weight: 400;
font-size: 35px;
font-size: calc(1.5vw + 1em);
}
.banner-text p {
font-size: 20px;
line-height: 1.25;
}
.hero-banners .banner-text {
max-width: 600px;
}
.home .hero-banners .banner-text {
max-width: 500px;
}
.hero-banners .banner-text a,
.hero-banners .banner-text .button {
display: inline-block;
vertical-align: middle;
padding: 1em 1em;
margin: .5em auto;
color: #fff;
background-color: #D4A129;
background-repeat: no-repeat;
background-repeat: repeat-x;
background-origin: border-box;
text-align: center;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.01em;
font-weight: 600;
font-size: 16px;
line-height: 1;
border: 1px solid #fff;
border-radius: 1em;
border-bottom-left-radius: 0;
cursor: pointer;
transition: 0.1s linear all;
}
.hero-banners .banner-text a:hover,
.hero-banners .banner-text .button:hover {
background-color: transparent;
color: #fff;
}
.hero-banners .banner-text a.download,
.hero-banners .banner-text .button.download {
padding-inline: 2em;
}
.hero-banners .banner-text blockquote {
color: #fff;
margin: 0;
padding: 0;
border: 0;
}
.hero-banners .banner-text blockquote p {
color: inherit;
font-size: 2em;
}
/* Footer */
.site-footer {
background-color: #333;
color: white;
font-size: 12px;
}
.advisor-resources .login-options,
.chamber-and-board-access .login-options {
margin-top: 1em;
display: none;
}
.site-footer a {
color: white;
text-decoration: none;
}
.site-footer a:hover {
color: #999;
}
.site-footer .container {
padding: 2em 0;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.footer-nav_1 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 65%;
margin: 0;
font-size: 13px;
}
.footer-nav_1 > li {
display: block;
/* flex-grow: 1; */
width: 33%;
width: 25%; /* changing width after merging two nav branches under Members node took place on November 2020 */
margin-bottom: 1em;
}
.footer-nav_1 > li > a {
display: block;
margin-bottom: 0.5em;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
}
.footer-nav_2 > li:hover > a,
.footer-nav_2 li.on > a {
color: #999;
}
.footer-nav_2 {
display: block;
width: 100%;
margin: 0;
}
.footer-nav_2 > li {
display: block;
width: 100%;
margin-bottom: .5em;
}
.footer-nav_1 > li.first {
display: none;
}
.site-footer .footer-info {
width: 30%;
padding-left: 4em;
border-left: 1px dotted #666;
}
.site-footer .footer-info form {
margin-bottom: 2em;
}
.site-footer .footer-info > *:last-child {
margin-bottom: 0;
}
#footer-nav_li_item_429 {
display: none; /* Hide Chumbers Nodebranch in footer nav as those links are already available in footer-info block and users are used to see them there */
}
/* Access Form */
.login-form {
}
.login-form .login-options {
margin-top: 1rem;
}
.footer-info h3 {
margin: 0 0 1em;
text-transform: uppercase;
line-height: 1.2;
font-size: 14px;
font-weight: 600;
color: #d4a129;
}
.footer-info .input {
margin-bottom: 1em;
}
.footer-info .input input[type="text"],
.footer-info .input input[type="password"] {
margin: 0;
padding: .5em 1em;
border-radius: .5em;
border-bottom-left-radius: 0;
border: none;
}
.footer-info .button {
padding: .5em 2em;
color: #fff;
font-size: 14px;
font-weight: 300;
text-transform: none;
border-color: currentColor;
border-width: 1px;
border-radius: .5em;
border-bottom-left-radius: 0;
}
.footer-info .button:hover {
border-color: #fff;
background-color: #fff;
color: #333;
text-decoration: none;
}
.footer-info p + h3 {
margin-top: 2em;
}
.site-bottom {
padding: 25px 0;
background-color: #516789;
color: white;
font-size: 14px;
}
.site-bottom a {
color: white;
text-decoration: underline;
}
.site-bottom .container {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
align-items: center;
column-gap: 1rem;
}
.site-bottom .container > * {
/* flex-grow: 1; */
}
.site-bottom .copyright {
text-align: center;
margin: 0;
flex-grow: 1;
}
.social-media {
margin: 0;
padding: 0;
list-style-type: none;
}
.social-media li {
display: inline-block;
margin: 0 .5em 0 0;
}
.social-media li:last-child {
margin-right: 0;
}
.social-media li a {
display: block;
width: 3em;
height: 3em;
padding: .3em;
border-radius: 100%;
background-color: rgba(255,255,255, .2);
}
.social-media li i {
display: block;
width: 100%;
height: 100%;
}
.social-media li b {
display: none;
}
.back-to-top {
display: flex;
flex-shrink: 0;
flex-basis: max-content;
justify-content: flex-end;
align-items: center;
z-index: 10;
width: 3rem;
height: 3rem;
background-color: #516789;
border-radius: .25rem;
}
.back-to-top[hidden] {
visibility: hidden;
}
.back-to-top:hover {
background-color: #708cab;
}
.back-to-top:focus {
outline: 1px dotted #666;
outline-offset: 1px;
}
.back-to-top .icon {
width: inherit;
height: inherit;
}
@media only screen and (max-width: 1200px) {
.back-to-top #back-to-top-label[hidden] {
display: block;
visibility: visible;
padding-inline: .5rem;
}
}
@media only screen and (min-width: 1200px) {
.back-to-top {
position: fixed;
bottom: 1rem;
right: 1rem;
}
.site-bottom .copyright {
text-align: right;
}
}
/* Content layout (appearence) */
.content-display {
}
.content-display:after { clear: both; }
.content-display .content-block {
width: 45%;
float: left;
margin: 0 2.5% 0 0;
}
/* single */
.content-display.type-0 {
}
/* double */
.content-display.type-1 .content-block {
}
/* double, wide-top */
.content-display.type-2 .content-block:nth-child(3n+1) {
width: 100%;
clear: both;
float: none;
margin: 0;
}
/* double, wide-bottom */
.content-display.type-3 .content-block:nth-child(3n+3) {
width: 100%;
clear: both;
float: none;
margin: 0;
}
/* triple */
.content-display.type-4 .content-block {
width: 30%;
margin-right: 3%;
float: left;
}
/* Hide content that requires JavaScript unless JavaScript is running. */
body .requires-js { display: none; }
/* Forms */
.input.description label {
font-weight: normal;
font-size: 2.2857em /* 32px */; line-height: 1.1; margin-bottom: .3em; color: #516789;
}
/* Pressly 3rd party script/styles fixes */
#__px_modal_container__pxEmbedContainer button:hover {
background-color: transparent;
}
/* public/style.css */
/*
(c)2017 - visuallizard.com
General styles. Template, view, plugin specific, etc.
*/
time {
font-size: .8425em;
font-weight: 500;
}
.more a,
.back a {
display: inline-block;
color: #666;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
}
.back a {
padding-left: 1.5em;
position: relative;
}
.more a:after,
.back a:before {
content: '';
color: inherit;
transition: all .3s ease;
position: absolute;
}
.more a:after {
content: '→';
margin-left: .5em;
}
.back a:before {
content: '←';
margin-left: -1.5em;
}
.more a:hover,
.back a:hover {
color: #708cab;
}
.more a:hover:after {
margin-left: 1em;
}
.back a:hover:before {
margin-left: -2em;
}
/* For debugging purposes */
#main a[href="#"],
#main .more a[href="#"] {
color: red !important;
}
.download,
.arrow-down {
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
color: inherit;
}
.download > em {
font-style: normal;
font-size: small;
display: block;
max-width: 150px;
}
.download:after,
.download > em:after {
content: '→';
margin-left: .5em;
color: inherit;
transition: all .3s ease;
position: absolute;
}
.arrow-down:after {
content: '↓';
margin-left: .25em;
margin-top: 0;
color: inherit;
transition: all .3s ease;
position: absolute;
}
.download:hover:after,
.download:hover > em:after {
margin-left: 1em;
}
.arrow-down:hover:after {
margin-top: .25em;
}
.download > img {
display: block;
box-shadow: 0 0 5px rgba(0,0,0, .1);
margin-bottom: .5em;
}
.download.thumbnail:after,
.download.img_left:after,
.download.img_right:after {
display: none;
}
.download.no-after:after,
.download + .download:after {
content: none;
}
.sharethis-inline-share-buttons {
margin: 2em 0;
}
.section.type-3 .download,
.section.type-4 .download,
.section.type-5 .download,
.section.type-6 .download,
.section.type-7 .download {
color: #fff !important;
}
/* Login button with following Signup link */
.button + strong {
display: inline-block;
vertical-align: middle;
margin-left: .5em;
}
.button + strong a {
display: block;
}
.buttons-list {
list-style: none;
margin: 2rem auto;
padding: 0;
text-align: center;
}
.buttons-list > li {
margin: 1em .5em;
display: inline-block;
vertical-align: middle;
}
.buttons-list .button {
display: flex;
align-items: center;
padding: .5em 1em;
border-width: 1px;
border-radius: 2em;
border-bottom-left-radius: 0;
font-size: 15px;
}
.buttons-list .icon {
display: inline-block;
width: 2em;
height: 2em;
margin-left: .5em;
}
.marked {
max-width: 400px;
margin: 0 auto 1em;
}
.marked li {
position: relative;
list-style: none;
display: inline-block;
width: 100%;
margin: .5em 0;
padding-left: 2em;
text-align: left;
font-weight: 500;
}
.marked li::before {
content: '';
position: absolute;
background-repeat: no-repeat;
background-image: url(https://www.chamberplan.ca/img/checkmark.t1720724924.svg);
background-size: contain;
width: 1.5em;
height: 1.5em;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.marked.columns-2 {
columns: 2 250px;
column-gap: 2em;
max-width: 700px;
}
/* ul.aligned { max-width: 600px; text-align: center; display: inline-block; margin: 0 auto 1em; }
ul.aligned > li { text-align: left; } */
/* List with items inline */
.inline-list > li {
display: inline list-item;
}
/* List with lines above and below */
.lined-list {
text-align: center !important;
padding: 1em 0;
border: .5px solid #516788;
border-left: 0;
border-right: 0;
}
/* imitate columns or tables */
.flex {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.flex > div + div {
margin-left: 2em;
}
.flex.v-center {
align-items: center;
}
/* Announcement Ribbon */
.announcement {
background: #ee5f5b;
padding: 1rem 0;
color: #fff;
font-size: 150%;
text-align: center;
}
.announcement > .container > * {
color: #fff;
}
.announcement > .container > *:last-child {
margin-bottom: 0;
}
.announcement a {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1.5px;
}
.announcement a:hover {
color: #516789;
}
/* Hide Announcement on COVID-19 page */
.covid-19 .announcement {
display: none;
}
/* Home */
.home-content .cke h3,
.column-content .cke h3 {
text-align: center;
padding-bottom: .25em;
border-bottom: 1px dotted #516789;
margin-bottom: .5em;
}
.column-content .cke h3 {
font-size: 1.3em;
}
.column-content h2 {
font-size: 2.5em;
}
/* News/Blog */
.special-title,
.cards-section h3 {
text-align: center;
font-size: 3.4285em;
line-height: 1.3;
color: #516789;
}
.news-index-item {
margin-bottom: 1em;
}
.blog-index-list img[src*='placeholder'] {
background-color: #708cab;
}
/* ! Cards general class - used for multiple modules */
.cards.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;
}
.cards li {
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;
}
.cards li .more,
.cards li .download {
font-size: .8425em;
}
.cards li .more {
margin-top: auto; /* to push item to the end of flex axis */
margin-bottom: 0;
flex-grow: 0;
}
.cards li .download:hover {
color: #708cab;
}
.cards 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 img {
transform: scale(1.1);
}
.cards h4 {
font-size: 1.1428em;
color: #000;
}
/* for 4, 8, 12, 4n… */
.cards li:nth-last-child(2):first-child,
.cards li:nth-last-child(2):first-child ~ li,
.cards li:nth-last-child(4n):first-child,
.cards li:nth-last-child(4n):first-child ~ li {
width: 45%;
margin-left: 2%;
margin-right: 2%;
}
/* ! Documents */
.documents-block {
clear: both;
}
.documents-block + .documents-block {
border-top: 1px dotted #708cab;
margin-top: 2em;
padding-top: 2em;
}
.documents-category {
clear: both;
}
.documents-category > blockquote {
position: relative;
display: block;
float: right;
width: 35%;
margin: 2.5em 0 2em 2em;
padding: 1em 1.5em;
background-color: #516789;
color: #fff;
border: none;
border-radius: 1em;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.documents-category > blockquote p {
color: inherit;
font-size: 14px;
line-height: 1.36;
}
.documents-category > blockquote > *:last-child {
margin-bottom: 0;
}
.documents-category > blockquote:before {
display: block;
content: 'Best Practice Tip';
position: absolute;
top: -2.4em;
left: 0;
padding: .5em 1.5em;
background-color: #708cab;
color: #fff;
font-weight: 700;
text-transform: uppercase;
border-radius: 1em;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
[lang="fr"] .documents-category > blockquote:before {
content: 'Pratique exemplaire';
}
.documents-list {
list-style: none;
margin-left: 0;
}
.documents-list.direct {
max-width: 60%;
}
.documents-list.direct .list-item {
font-size: 12px;
margin-bottom: .25em;
}
/* Special Documents as blue gradient rectangles */
.special-blocks > .container {
display: flex;
flex-direction: row;
flex-grow: 1;
padding-top: 0;
padding-bottom: 0;
}
.special-blocks .more a {
text-transform: none;
color: #fff;
}
.special-blocks .more a:hover {
color: #d4a129;
}
.special-blocks .documents-block {
position: relative;
width: 33.33%;
min-height: 18em;
flex-grow: 1;
margin: 0;
padding: 1em 2em;
color: #fff;
}
.special-blocks .documents-block:nth-child(1) { background-color: rgba(81, 103, 137, 1); }
.special-blocks .documents-block:nth-child(2) { background-color: rgba(107, 126, 155, 1); }
.special-blocks .documents-block:nth-child(3) { background-color: rgba(112, 140, 171, 1); }
.special-blocks.three-blocks .documents-block:nth-child(1) { background-color: rgba(81, 103, 137, 1); }
.special-blocks.three-blocks .documents-block:nth-child(2) { background-color: rgba(107, 126, 155, 1); }
.special-blocks.three-blocks .documents-block:nth-child(3) { background-color: rgba(112, 140, 171, 1); }
.special-blocks.two-blocks .documents-block:nth-child(1) { background-color: rgba(107, 126, 155, 1); }
.special-blocks.two-blocks .documents-block:nth-child(2) { background-color: rgba(112, 140, 171, 1); }
.special-blocks .documents-block:before {
content: '';
display: block;
margin: 0.5em auto 1em;
width: 3em;
height: 3em;
background-repeat: no-repeat;
background-position: center center;
background-color: transparent;
background-size: 100% auto;
z-index: 1;
}
.special-blocks.three-blocks .documents-block:nth-child(1):before { background-image: url(https://www.chamberplan.ca/img/icon-news.t1720724925.svg); }
.special-blocks.three-blocks .documents-block:nth-child(2):before { background-image: url(https://www.chamberplan.ca/img/icon-info.t1720724925.svg); }
.special-blocks.three-blocks .documents-block:nth-child(3):before { background-image: url(https://www.chamberplan.ca/img/icon-interest.t1720724925.svg); }
.special-blocks .documents-block:nth-child(1):before { background-image: url(https://www.chamberplan.ca/img/icon-news.t1720724925.svg); }
.special-blocks .documents-block:nth-child(2):before { background-image: url(https://www.chamberplan.ca/img/icon-info.t1720724925.svg); }
.special-blocks .documents-block:nth-child(3):before { background-image: url(https://www.chamberplan.ca/img/icon-interest.t1720724925.svg); }
.special-blocks.two-blocks .documents-block:nth-child(1):before { background-image: url(https://www.chamberplan.ca/img/icon-info.t1720724925.svg); }
.special-blocks.two-blocks .documents-block:nth-child(2):before { background-image: url(https://www.chamberplan.ca/img/icon-interest.t1720724925.svg); }
.special-blocks-2 .documents-block:nth-child(1):before { background-image: url(https://www.chamberplan.ca/img/logo-mybenefits-white.t1720724926.png); width: 70%; }
[lang="fr"] .special-blocks-2 .documents-block:nth-child(1):before { background-image: url(https://www.chamberplan.ca/img/logo-mybenefits-fr-white.t1720724926.png); width: 70%; min-height: 5em; }
.special-blocks-2.three-blocks .documents-block:nth-child(1):before { background-image: url(https://www.chamberplan.ca/img/logo-mybenefits-white.t1720724926.png); width: 70%; }
[lang="fr"] .special-blocks-2.three-blocks .documents-block:nth-child(1):before { background-image: url(https://www.chamberplan.ca/img/logo-mybenefits-fr-white.t1720724926.png); width: 70%; min-height: 5em; }
.special-blocks .documents-list.direct {
max-width: none;
}
.special-blocks .documents-list.direct .list-item {
font-size: small;
}
.special-blocks h3 {
font-size: 18px;
text-transform: uppercase;
margin: 1em auto;
}
.special-blocks .documents-list.direct a {
color: #fff;
}
.special-blocks .documents-list.direct a:hover {
color: #d4a129;
}
.quick-links {
padding: 0;
background-color: #859db8;
text-align: center;
display: flex;
width: 100%;
}
.quick-links .banner {
position: relative;
display: block;
width: 33.33%;
min-height: 33.33%;
}
.quick-links .banner > a {
display: block;
background-color: #000;
pointer-events: none;
}
.quick-links .banner a img {
display: block;
width: 100%;
opacity: 0.75;
}
.quick-links .banner-text {
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
padding: 1em;
transform: translateY(0);
display: flex;
flex-direction: column;
justify-content: center;
pointer-events: none;
}
.quick-links .banner-text h2,
.quick-links .banner-text h3 {
color: #fff;
font-weight: 500;
font-size: 18px;
margin: 0 0 1em 0;
text-transform: uppercase;
text-decoration: none;
}
.quick-links .banner-text p {
font-weight: 600;
font-size: 16px;
line-height: 1.25;
margin-bottom: 1em;
}
.quick-links .banner-text a {
color: inherit;
text-transform: uppercase;
text-decoration: none;
background-color: transparent;
pointer-events: auto;
display: inline-block;
}
.quick-links .banner-text a:hover {
text-decoration: underline;
}
#advisor-map {
display: block;
width: 96%;
height: 400px;
padding: 0;
margin: 2%;
}
/* ! Cliplet */
.cliplets:empty {
display: none;
}
.cliplet {
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto;
background-color: white;
min-height: 400px;
}
.cliplet:after {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
margin-left: 52vw;
width: 50vw;
height: 50vw;
border-top-left-radius: 100%;
border-bottom-left-radius: 100%;
background-image: url(https://www.chamberplan.ca/img/cliplet-1.t1720724924.jpg);
background-position: 100% center;
background-repeat: no-repeat;
background-size: 100%;
}
.cliplet-content {
width: 46%;
margin: 2em 4em;
display: flex;
flex-direction: column;
justify-content: center;
flex-grow: 1;
min-height: 400px;
}
.cliplet-title {
font-size: 35px;
text-align: left;
margin: 0 0 .5em 0;
}
.cliplet-title em {
display: block;
color: #708cab;
color: #516789;
font-weight: 600;
}
.cliplet-title em sup {
font-style: normal;
}
.cliplet-title:empty {
display: none;
}
.cliplet-content .button {
margin: .5em auto;
}
/* FAQ */
.faq-toggles {
border: 1px solid rgb(128,128,128);
border-bottom: 0;
margin: 2em 0;
}
.faq-toggles:last-child {
margin-bottom: 1em;
}
.faq-toggles .faq-question {
position: relative;
padding: 1em 2em 1em 4em;
/* border-top: 1px solid rgb(128,128,128); */
border-bottom: 1px solid rgb(128,128,128);
cursor: pointer;
}
.faq-toggles .faq-question .faq-title {
text-transform: uppercase;
font-size: 1em;
margin: 0;
cursor: pointer;
}
.faq-toggles .faq-question .toggle {
content: '';
display: inline-block;
padding: 0;
position: absolute;
left: 1.25em;
top: 1em;
transform: rotate(0deg);
transition: transform .5s;
transform-origin: center center;
min-width: 0;
width: 1em;
height: 1em;
color: rgb(128,128,128);;
background-color: transparent;
border: none;
}
.faq-toggles .faq-question:hover .faq-title,
.faq-toggles .faq-question:hover .toggle {
color: #708cab;
}
.faq-toggles .faq-question .toggle:focus {
outline: 1px dotted currentColor;
}
.faq-toggles .is-toggle-on .toggle {
transform: rotate(90deg);
}
.faq-toggles .faq-question.is-toggle-on + .faq-answer {
position: relative;
z-index: 999;
}
.faq-toggles .faq-answer {
border-bottom: 1px solid rgb(128,128,128);
padding: 1em 2em 1em 4em;
max-height: 5555px;
opacity: 1;
transition: all .3s ease-in-out;
}
.faq-toggles .is-toggle-on {
}
.faq-toggles .is-toggle-off + .faq-answer {
border-bottom: none;
max-height: 0;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
overflow: hidden;
display: none;
}
.faq-toggles .is-toggle-off + .faq-answer .download:after {
content: ''; /* fix for IE. pseudo-elements would show up even if answer is hidden */
}
.faq-display h3 {
text-align: center;
}
/* FAQ */
.testimonials-toggles {
/* border: 1px solid rgb(128,128,128); */
border-bottom: 0;
margin: 2em auto;
max-width: 600px;
}
.testimonials-toggles:last-child {
margin-bottom: 1em;
}
.testimonials-toggle-item {
background: #fff;
margin-bottom: 2em;
text-align: center;
}
.testimonials-toggles .testimonials-toggle {
position: relative;
padding: .75em 3em;
margin-top: 1em;
border: none;
border-radius: 0;
background-color: #708cab;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: bolder;
font-size: 14px;
line-height: 1;
letter-spacing: 0.05em;
cursor: pointer;
transition: 0.1s linear all;
}
.testimonials-toggles .testimonials-toggle:hover {
background-color: #000;
}
.testimonials-toggles .testimonials-toggle:focus {
outline: 1px solid skyblue;
}
.testimonials-toggles .testimonials-toggle:after {
content: '+';
position: absolute;
right: .65em;
margin: 0;
font-size: 20px;
line-height: .7;
}
.testimonials-toggles .is-toggle-on .testimonials-toggle {
background-color: #d4a129;
}
.testimonials-toggles .is-toggle-on .testimonials-toggle:after {
content: '–';
}
.testimonials-toggles .is-toggle-on .toggle-title-off { display: none; }
.testimonials-toggles .is-toggle-off .toggle-title-on { display: none; }
.testimonials-toggles .testimonials-body {
margin: 0;
padding: 0 2em 1em 2em;
max-height: 5555px;
background-color: #fff;
color: #58595b;
opacity: 1;
transition: all .3s ease-in-out;
}
.testimonials-toggles .is-toggle-on .testimonials-body {
position: relative;
z-index: 999;
}
.testimonials-toggles .is-toggle-off .testimonials-body {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
overflow: hidden;
}
.testimonials-toggles .testimonials-body > *:last-child {
margin-bottom: 0;
}
.testimonials-toggles .testimonials-body:empty + .testimonials-toggle {
pointer-events: none;
opacity: 0;
padding: 0;
height: 1px;
}
.testimonials-toggles .testimonials-breif,
.testimonials-toggles .testimonials-body,
.testimonials-toggles .testimonials-meta {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.testimonials-toggles .testimonials-img {
display: block;
max-height: 100px;
max-width: 400px;
margin: 0 auto 1em;
}
.testimonials-toggles .testimonials-breif {
padding: 2em 2em 0;
font-size: 130%;
}
.testimonials-toggles .testimonials-meta {
margin-bottom: 1em;
padding: 0 2em 1px;
text-align: center;
font-weight: bold;
}
/* Home page previews */
.testimonials-previews {
}
.testimonials-previews .testimonials-preview-item {
text-align: center;
outline: none;
}
.testimonials-previews .testimonials-preview-item a {
display: block;
color: #fff;
}
.testimonials-previews .testimonials-preview-item a:hover {
opacity: .8;
}
.testimonials-previews .testimonials-preview {
font-size: 200%;
}
.testimonials-previews .testimonials-meta {
font-size: 20px;
font-weight: 600;
}
/* Form */
/* Advisor form */
.form-advisor label {
border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
}
.form-advisor .input.text {
max-width: 300px;
margin: 0;
white-space: nowrap;
}
.form-advisor input.text {
display: inline-block;
padding: 1em 3em 1em 1.5em;
font-size: 16px;
border-radius: 1em;
border-bottom-left-radius: 0;
width: 100%;
}
.form-advisor .search-button {
border: none;
padding: .5em;
margin: -.25em 0 0 -3em;
border-radius: 100%;
min-width: 0;
}
/* Mini form on Cliplet */
.form-mini-find-advisor label {
border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
}
.form-mini-find-advisor .input.text {
width: 300px;
margin: 0;
white-space: nowrap;
}
.form-mini-find-advisor input.text {
display: inline-block;
padding: 1em 3em 1em 1.5em;
font-size: 16px;
border-radius: 1em;
border-bottom-left-radius: 0;
width: 100%;
}
.form-mini-find-advisor .search-button {
border: none;
padding: .5em;
margin: -.25em 0 0 -3em;
border-radius: 100%;
min-width: 0;
background-color: #708cab;
color: #fff;
}
.form-mini-find-advisor .search-button:hover {
background-color: #516789;
}
.form-mini-find-advisor .search-button .icon {
width: 1.5em;
height: 1.5em;
}
.form-mini-find-advisor h2 {
color: #fff;
text-align: left;
margin: 0 0 .5em 0;
font-size: 2.5em;
}
.cliplet-content .form-mini-find-advisor {
position: absolute;
left: 65%;
top: 45%;
z-index: 1;
/* width: 80%; */
max-width: 600px;
}
/* ! Your Advisor */
.advisor-heading {}
.advisor-data p { font-size: 1.5em; }
.lead-form {
}
.lead-form > .container {
padding-top: 1em;
padding-bottom: 1em;
}
.lead-form p,
.lead-form h3 {
max-width: 550px;
text-align: center;
margin: 0 auto 1em;
}
.lead-form label {
color: #fff;
}
.lead-form .text label,
.lead-form .select label,
.lead-form .textarea label {
border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
}
.lead-form .quote-form {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: calc(100% + 1em);
}
.lead-form .quote-form .c1 {
width: 100%;
}
.lead-form .quote-form .c2 {
width: 50%;
}
.lead-form .quote-form .company-block .input {
width: 50%;
}
.lead-form .quote-form .input {
padding-right: 1em;
margin-bottom: 1em;
}
.lead-form .quote-form .input.checkbox {
width: 100%;
margin-bottom: .25em;
}
.lead-form .quote-form .input.checkbox {
}
.lead-form .quote-form .input#quote-promo-code {
width: 25%;
}
.lead-form .quote-form .input.submit {
margin-left: auto;
margin-top: .5em;
width: auto;
float: right;
}
.lead-form .quote-form .error-message {
margin-bottom: 0;
}
.lead-form .quote-form .recaptcha-block {
float: right;
width: auto;
padding-right: 1rem;
margin-bottom: 1rem;
}
/* select2 - customisations over select2 plugin */
.select2-container--default .select2-selection--single {
padding: 1em 2em 1em 1em;
border-color: #ccc;
border-radius: 1em;
border-bottom-left-radius: 0;
height: auto;
font: normal 16px/1 "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #777;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: normal;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
transform: translateY(50%);
right: 5px;
width: 32px;
background: #fff no-repeat 98% center url("data:image/svg+xml;utf8,");
background-size: auto 32px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
display: none;
}
.right-place {
padding-top: 0; /* Add extra padding to compensate for sticky header when anchor jumping to section. */
}
.right-place .loud {
display: block;
font-style: normal;
font-size: 150%;
margin: .5em auto;
color: #d4a129;
}
.right-place p {
max-width: 600px;
margin: 0 auto;
}
.right-place .cke .c3 p {
text-align: center;
max-width: 200px;
}
.right-place img[src$=".svg"] {
max-height: 50px;
/* max-width: 100px; */
margin: 0 auto 1em;
}
/* public/upload.css */
form div.files.single {
position: relative;
overflow: hidden;
min-width: 210px;
max-width:100%;
height: 21px;
margin: 0;
padding:0;
border: none;
}
form div.files.single div.fade {
position:absolute;
top: 0;
left: 0;
background-color: #fff;
border: none;
width: 210px;
width:100%;
height: 21px;
}
form div.files a.x {
position:absolute;
top: 0;
right: 0;
}
.files .progress {
opacity: 0.50
}
.fileupload-processing .fileupload-loading {
display: block;
}
.progress {
height: 21px;
margin: 0;
overflow: hidden;
background-color: transparent;
background-repeat: repeat-x;
}
.progress .bar {
width: 0;
height: 21px;
font-size: 12px;
color: #ffffff;
text-align: center;
background-color: #0e90d2;
}
.progress-danger .bar {
background-color: #dd514c;
}
.progress-success .bar {
background-color: #5eb95e;
}
.progress-info .bar {
background-color: #4bb1cf;
}
.progress-warning .bar {
background-color: #faa732;
}
/* public/responsive.css */
/*
(c)2017 - visuallizard.com
Mobile styles using Media Queries
*/
/* !Media Queries ============================== */
/* Larger Desktop sizes (more than 1480px): */
@media only screen and (min-width: 1480px) {
body:before { content: 'x-large'; }
.home .hero-banners .banner-text { max-width: 500px; }
.hero-banners .banner-text h2 { font-size: 50px; }
[lang="fr"] .hero-banners .banner-text h2 { font-size: 45px; }
.hero-banners .banner-text h3 { font-size: 35px; }
}
@media only screen and (max-width: 1480px) {
body:before { content: 'large'; }
.site-logo { width: 35%; margin-right: 2.5%; }
.banner-text { max-width: 70%; margin-top: 30px; }
.site-footer .container { padding: 2em; }
}
@media only screen and (max-width: 800px) {
body { font-size: 16px; }
body:before { content: 'medium'; /* mobile nav. mode kicks in */ }
.site-header .container { padding: 0; }
.site-logo { margin-left: 5px; margin-right: 0; width: 65%; font-size: 40px; font-size: calc(2vw + 1em); line-height: 2.2; }
.section > .container { padding: 2em; }
h2 { font-size: 2.5em; }
.cards-section h3 { font-size: 2em; text-align: left; }
.quote-text h2 { font-size: 2em; }
.hero-banners { overflow: hidden; }
.hero-banners .banner > a { /* width: 140%; margin: 0 -20%; */}
.hero-banners .banner-text blockquote { padding: 1em; }
.hero-banners .banner-text blockquote p { font-size: calc(.5vw + 1em); }
.banner-text { top: 60%; max-width: 90%; margin-top: 0; }
.banner-text h2 { font-size: 1.8em; font-size: calc(2vw + 1em); }
.banner-text h3 { font-size: 1.5em; font-size: calc(1vw + 1em); }
.banner-text p { font-size: 1em; font-size: calc(.75vw + .75em); margin-bottom: .5em; }
.nav-toggle { min-width: auto; width: 32px; height: 32px; border: none; border-radius: .5em; background: none; color: #fff; appearance: none; padding: 0; margin: 0 5px 0 0; z-index: 100; transition: all .2s ease-in; -webkit-tap-highlight-color:rgba(0,0,0,0); }
.nav-toggle svg { pointer-events: none; }
.nav-toggle:hover { background: none; color: #708cab; }
.main-nav { position: relative; top: 0; left: auto; width: 100%; z-index: 0; transition: all .2s ease-in; background-color: #000; padding: 2em 0; }
.js .main-nav { position: absolute; top; 0; left: -100%; }
.js .nav-on .main-nav { left: 0; }
.no-js .main-nav { display: none; /* Footer nav can be used instead */}
.main-nav .nav_1 { width: 100%; height: auto; display: block; }
.main-nav .nav_1 > li { display: block; margin-bottom: 1em; }
.main-nav .nav_1 > li:first-child,
.main-nav #nav_li_item_245 { display: block; }
.main-nav .nav_1 > li > a { color: #fff; font-size: 16px; min-height: 0; padding-left: 1em; }
.main-nav .nav_1 > li > a:not(:only-child) { margin-left: 0; }
.main-nav .nav_1 > li > a:not(:only-child)::before { display: none; content: none; }
.site-header .main-nav .nav_1 > li:hover > a,
.site-header .main-nav .nav_1 > li.on > a { color: #fff; }
.main-nav .nav_2 { position: static; left: auto; top: auto; display: block; width: auto; padding-top: 0; }
.main-nav .nav_2 > li { }
.main-nav .nav_2 > li > a { font-size: 16px; }
.main-nav .nav_3 > li { display: block; }
.main-nav .nav_3 > li > a { padding: .25rem 1rem; }
.header-tools { position: relative; margin: 0; justify-content: flex-end; }
.header-tools > li { margin-left: .75em; }
.header-tools .icon { width: 32px; height: 32px; }
.cliplet-content { margin: 2em; width: auto; min-height: 0; display: block; }
.cliplet::after { position: static; left: auto; top: auto; transform: none; margin-left: 0; width: 100%; height: 60vw; background-size: cover; background-repeat: no-repeat; border-radius: 0; }
.cliplet-title { font-size: 2em; }
.cliplet-title em { display: inline; }
.cke div.c3 { width: auto; float: none; padding: 0; }
.cards li { width: 47%; }
.documents-category > blockquote { float: none; width: auto; max-width: 500px; margin: 3.5em 0 1em 0; }
.form-advisor .input.text { width: 100%; }
.site-footer .container { display: block; }
.footer-nav_1 { width: 100%; }
.site-footer .footer-info { width: auto; padding-left: 0; padding-top: 2em; border-left: 0; border-top: 1px dotted #666; margin-top: 2em; }
.site-bottom { padding: 2em; }
.search-form .mfp-close { display: block; right: auto; top: .5em; left: auto; margin: 0 auto; text-align: center; position: relative; width: 60px; height: 60px; }
.flex { display: block; }
.flex > div + div { margin: 0 0 1em 0; }
.form-mini-find-advisor { margin: 0 auto; }
.form-mini-find-advisor h2 { color: #708cab; }
.cliplet-content .form-mini-find-advisor { position: static; left: 0; top: auto; width: 100%; }
.quote-form .company-block { display: block; }
.quote-form .company-block .input,
.lead-form .quote-form .company-block .input { width: 100% }
.lead-form { padding-top: 0; }
.lead-form .quote-form,
.lead-form .quote-form .c2 { width: 100%; }
.lead-form .quote-form .input,
.lead-form .quote-form .input.textarea,
.lead-form .quote-form .input.checkbox { width: 100%; padding-right: 0; }
.lead-form .quote-form .input#quote-promo-code { width: 150px; }
.lead-form .quote-form .input.submit { float: none; }
.lead-form-icon { display: none; }
.right-place .cke .c3 { display: none; }
.right-place .cke .c3 p { max-width: 100% }
.mfp-iframe-scaler.frame-jotform { padding-top: 60vh; }
.testimonials-previews .testimonials-meta { font-size: 16px; }
.home .hero-banners .banner > a img { min-height: 65vh; object-position: 65%; }
.home .hero-banners + .type-5 { min-height: 35vh; }
.quick-links { display: block; }
.quick-links .banner { width: auto; }
.quick-links .banner-text p { display: block !important; }
}
@media only screen and (max-width: 480px) {
body:before { content: 'small'; }
.site-logo { /* font-size: 20px; */ line-height: 1.8; width: 50%; }
.header-tools { width: 50%; }
.header-tools .icon { width: 24px; height: 24px; }
h2 { font-size: 2em; }
.cards-section h3 { font-size: 1.5em; }
.quote-text h2 { font-size: 1.5em; }
.banner-text { top: 65%; }
.banner-text p:not(.with-button) { display: none; }
.hero-banners .banner-text blockquote p { display: block; /* don't hide blockquote paragraphs */ }
.hero-banners .banner-text a,
.hero-banners .banner-text .button { font-size: 12px; padding: .6em 1em .4em; }
.slick-arrow { width: 2rem; height: 2rem; top: calc(50% - 1rem); }
.section > .container { padding: 1em; }
.cke div.c2 { width: auto; float: none; padding: 0; }
.section.cke-split .cke .c2 + .c2 { border: none; }
.cards li,
.cards li:nth-last-child(2):first-child,
.cards li:nth-last-child(2):first-child ~ li,
.cards li:nth-last-child(4n):first-child,
.cards li:nth-last-child(4n):first-child ~ li { width: 100%; margin-left: 0; margin-right: 0; }
/* Special Blocks */
.special-blocks > .container { display: block; }
.special-blocks .documents-block { width: auto; min-height: 0; }
.special-blocks .documents-block:before { width: auto; min-height: 0; background-size: auto 100%; }
.footer-nav_1 > li { width: 50%; margin-bottom: 1em; }
.mfp-ready ~ main,
.mfp-ready ~ .site-header,
.mfp-ready ~ .site-footer,
.mfp-ready ~ .site-bottom { pointer-events: none; /* attempt to prevent body scroll when popup is on */ }
.mfp-content form .text input { padding: .75em 1em; }
.mfp-content form input[type="checkbox"] { width: 24px; height: 24px; }
.mfp-content form .button { -webkit-appearance: none; margin-bottom: 0; }
.pagination a,
.pagination .current { padding: 0 .2em; }
.testimonials-previews .testimonials-preview { font-size: 100%; }
.testimonials-toggles .testimonials-img { max-width: 100% }
.lead-form-icon { display: none; }
.right-place .cke .c3 p { max-width: 100% }
.img_left { float: none; }
}