/* public/mxb-base.css */
/*
(c)2019 - visuallizard.com
Inspired by:
Skeleton www.getskeleton.com
Bootstrap twitter.github.com/bootstrap/
HTML5 ✰ Boilerplate h5bp.com
*/
/*
COLORS
#244053 Dark blue
#e36a5b Pink
#dda657 Orange
#e8a445 Tulip tree
#eed665 Golden send
#525a66 Trout gray
#555E84 Kashmir blue
FONTS
'Podkova', serif;
medium 500
'Work Sans', sans-serif;
medium 500
semi-bold 600
bold 700
*/
/* 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%;
}
body {
font: 300 14px/1.36 "Work Sans", sans-serif;
background: #fff;
color: #58595b;
position: relative;
min-height: 100%;
display: flex;
flex-direction: column;
}
main {
position: relative;
z-index: 1;
flex-grow: 1;
/* padding-bottom: 4em; */
}
*, *:before, *:after {
box-sizing: inherit;
}
body:before {
position: absolute;
}
/* !Typography ============================== */
h1, h2, h3, h4, h5, h6 {
font-weight: 400;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; color: inherit; }
h1, .h1 { font-size: 56px; line-height: 50px; margin-bottom: 14px;}
h2, .h2 { font-size: 2.0em /* 28px */; line-height: 1.2; margin: 0 auto .5em; text-align: center; max-width: 750px; }
h3, .h3 { font-size: 1.5em /* 21px */; line-height: 1.2; margin-bottom: .75em; }
h4, .h4 { font-size: 1.2em /* 00px */; line-height: 1.1; margin-bottom: .25em; margin-top: .25em; font-weight: 600; }
h5, .h5 { font-size: 1.2em; line-height: 1.2; color: rgb(102, 102, 102); }
h6, .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: #e36a5b; 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; }
ul.aligned { max-width: 400px; text-align: center; display: inline-block; }
ul.aligned > li { text-align: left; }
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;
}
.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: .75em 3em;
margin-top: .25em;
min-width: 150px;
color: #fff;
background-color: #e36a5b;
background-repeat: no-repeat;
background-origin: border-box;
background-image: url(https://mxb.visuallizard.com/img/mxb/icon-star-o50.t1559752057.svg), url(https://mxb.visuallizard.com/img/mxb/icon-star-o50.t1559752057.svg);
background-position: .75em center, right .75em center;
background-size: 1.5em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.05em;
font-family: Podkova, serif;
/* font-weight: 400; */
font-size: 14px;
line-height: 1;
border: none;
border-radius: 1px;
cursor: pointer;
transition: 0.1s linear all;
}
.button.alt {
background-color: #dda657;
}
.button.outline {
background-color: transparent;
border: 2px solid currentColor;
color: rgba(255,255,255, .75);
}
.button.outline.dark {
color: #244155;
background-image: url(https://mxb.visuallizard.com/img/mxb/icon-star-dark-o50.t1561559625.svg), url(https://mxb.visuallizard.com/img/mxb/icon-star-dark-o50.t1561559625.svg);
}
.button.dark {
background-color: #244053;
}
.button.trout {
background-color: #525a66;
}
.button.large {
background-image: none;
padding: .65em 1.5em;
font-size: 160%;
margin-bottom: 1.5em;
}
.button.plus {
background-image: url(https://mxb.visuallizard.com/img/mxb/icon-star.t1559752057.svg), url(https://mxb.visuallizard.com/img/mxb/icon-star-plus.t1559752057.svg);
}
.button .icon {
display: inline-block;
vertical-align: bottom;
width: 1.2em;
height: 1.2em;
margin-right: .25em;
}
button:hover,
.button:hover {
background-color: #dda657;
color: #fff;
text-decoration: none;
}
.button.alt:hover {
background-color: #e36a5b;
}
.button.outline:hover {
background-color: rgba(200,200,200,.3);
}
.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="email"],
textarea,
select {
border: 1px solid #ccc;
padding: .5em .5em;
outline: none;
border-radius: 3px;
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: .5em;
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 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: 1em;
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: .5em;
margin-right: 1em;
display: inline-block;
font-size: 1rem;
font-weight: normal;
}
/* 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;
}
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;
}
/* 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 {
height: 2.5em;
margin: 2em 0;
color: #666;
font-weight: 500;
-moz-user-select: none;
user-select: none;
}
.pagination ul {
/* float: left; */
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
.pagination li {
display: inline;
margin: 0;
}
.pagination a,
.pagination .current {
color: inherit;
float: left;
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;
}
/* !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: 25%; }
.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:before {
content: attr(class);
position: fixed;
top: -99px;
right: 10px;
color: #ddd;
z-index: 1000;
font-size: 10px;
}
body.debug:before {
top: 2px;
}
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/mxb-layout.css */
/*
(c)2019 - 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: 800px;
margin: 0 auto;
padding: 0 15px;
position: relative;
}
.full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
.section {
text-align: center;
}
.section > .container {
padding-top: 4em;
padding-bottom: 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;
}
.section.inverse {
background-color: #859db8;
color: #fff;
}
.section.type-1 {
/* light grey */
background-color: #eee;
}
.section.type-2 {
/* blue */
background-color: #244155;
color: #fff;
text-align: center;
}
.section.type-3,
.section.type-10 {
/* pink */
background-color: #e36a5b;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
color: #fff;
position: relative;
}
.section.type-3:before,
.section.type-10:before {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(227, 107, 91, 0.85);
background-repeat: no-repeat;
background-position: center center;
}
.section.type-3 a {
color: #fff;
text-decoration: underline;
}
.section.type-3 a:hover {
color: rgba(255,255,255, .75);
}
.section.type-3 .button {
border: 2px solid currentColor;
color: rgba(255,255,255, 1);
text-decoration: none;
background-color: #244053;
}
.section.type-3 .button b {
font-weight: inherit;
color: #e8a445;
}
.section.type-4 {
/* tulip tree */
background-color: #e8a445;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
color: #fff;
position: relative;
}
.section.type-4:before {
content: '';
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(232, 164, 69, 0.85);
background-repeat: no-repeat;
background-position: center center;
}
.section.type-5 {
/* Golden Send */
background-color: #eed665;
color: #59595b;
}
.section.type-6 {
/* Trout gray */
background-color: #525a66;
color: #fff;
}
.section.type-7 {
/* Kashmir Blue */
background-color: #555e84;
color: #fff;
}
.section.type-8 {
/* Light Blue */
background-color: #00a7d7;
color: #fff;
}
.section.type-9 {
/* Dark Blue */
background-color: #1e2e53;
color: #fff;
}
.section.type-10 {
/* Light Blue */
background-color: #00a7d7;
color: #fff;
}
.section.type-10:before {
background-color: rgba(0, 167, 215, 0.90);
}
.section.type-10 .button {
border: 2px solid currentColor;
}
.section.type-11 {
/* Blue Dianne (like footer) */
background-color: #244053;
color: #fff;
}
.section.type-12 {
/* Casper (Employee Benefits) */
background-color: #a9b8d2;
color: #fff;
}
.section.type-13 {
/* Manatee (Employee Benefits) */
background-color: #898a94;
color: #fff;
}
.section.type-14 {
/* Ship Cove (Employee Wellbeing) */
background-color: #7693b9;
color: #fff;
}
.section.type-15 {
/* Citrine White (Employee Wellbeing) */
background-color: #f8e7d2;
}
.section.align-left h2,
.section.align-left h3,
.section.align-left h4,
.section.align-left h5 {
text-align: left;
max-width: none;
}
p > .button:only-child {
margin: 1em auto;
}
.columns-3 {
columns: 3 250px;
}
.section.cke-split .cke .c2 + .c2 {
border-left: 1px solid #6f8bab;
}
.section.abstract-bg-1 { background-image: url(https://mxb.visuallizard.com/img/mxb/abstract-bg-1.t1559752056.jpg); }
.section.abstract-bg-2 { background-image: url(https://mxb.visuallizard.com/img/mxb/tandem-n.t1559752058.svg); background-size: auto 90%; }
.section.abstract-bg-3 { background-image: url(https://mxb.visuallizard.com/img/mxb/abstract-bg-3.t1560371653.jpg); }
.section.abstract-bg-10 { background-image: url(https://mxb.visuallizard.com/img/mxb/abstract-bg-10.t1581458856.jpg); background-position: center top; }
/* Header */
.site-header {
width: 100%;
margin: 0;
padding: 0;
background: none;
z-index: 2;
}
.site-header .container {
display: flex;
justify-content: space-between;
flex-wrap: nowrap;
align-items: center; /* vertical centering for Safari */
margin: 0 auto;
padding: 17px 15px;
}
.site-header .container:after {
display: none; /* no need to clear floats here - flex is used */
}
.site-logo {
font-size: 56px;
line-height: 70px;
margin-bottom: 14px;
font-weight: 400;
display: block;
margin: 5px 5% 0 0;
padding: 0;
width: 30%;
max-width: 170px;
text-indent: -9999px;
}
.site-logo-link {
display: block;
width: 100%;
background-image: url(https://mxb.visuallizard.com/img/mxb/logo-en.t1561065302.png);
background-image: url(https://mxb.visuallizard.com/img/mxb/logo-en.t1561065302.svg), linear-gradient(transparent, transparent);
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center center;
transition: all .2s;
overflow: hidden;
}
.site-logo-link:hover {
transform: scale(1.05);
}
html[lang="fr"] .site-logo-link {
background-image: url(https://mxb.visuallizard.com/img/mxb/logo-en.t1561065302.png);
background-image: url(https://mxb.visuallizard.com/img/mxb/logo-fr.t1561065302.svg), linear-gradient(transparent, transparent);
}
/* 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;
padding: 2px 15px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .03em;
}
nav ul li a:hover,
nav ul li.at a {
color: #e36a5b;
}
/* ! Main Nav */
.main-nav {
width: auto;
margin-top: 5px;
margin-left: auto;
}
.main-nav .nav_1,
.header-tools {
display: inline-flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
height: 100%;
}
.main-nav .nav_1 > li,
.header-tools > li {
display: inline-block;
flex-grow: 1;
margin: 0;
}
.main-nav .nav_1 > li:first-child {
}
.main-nav .nav_1 > li:last-child {
}
.main-nav .nav_1 > li > a,
.header-tools > li > a {
display: block;
display: flex;
flex-direction: column;
justify-content: center;
/* min-height: 4em; */
padding: 2px 15px 3px;
font-size: 14px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .03em;
}
[lang="fr"] .main-nav .nav_1 > li > a {
padding: 2px 10px 3px;
}
.main-nav .nav_1 > li:hover > a,
.main-nav .nav_1 > li.on > a {
color: #e36a5b;
}
.main-nav .nav_1 > li.page-type-node:hover > a {
color: inherit;
}
/* chevron down
.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://mxb.visuallizard.com/img/icon-chevron-dark.t1500672520.svg');
background-size: 100%;
background-repeat: no-repeat;
background-position: center center;
}
*/
/* Drop-downs */
.main-nav .nav_2 {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
width: 200px;
padding: .75em 0;
margin: 0;
list-style: none;
background-color: #244053;
}
.main-nav .nav_1 > li:hover > .nav_2 {
display: block;
}
.main-nav .nav_2 li {
display: block;
margin: 0;
}
.main-nav .nav_2 a {
color: #fff;
display: block;
font-weight: normal;
padding: .5em 1.4em;
}
.main-nav .nav_2 li > a:hover,
.main-nav .nav_2 li.on > a,
.main-nav .nav_2 li.at > a {
color: #e36a5b;
}
.main-nav .nav_3 {
margin-left: 1rem;
margin-bottom: .5rem;
}
.header-tools {
margin-top: 1.5em;
margin-left: 0;
}
/* Popups */
body .mfp-bg {
/* background-color: #516789; */
background-color: rgba(26, 65, 85, .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;
}
.lead-form input {
display: inline-block;
width: 100%;
}
.lead-form .search-button {
border: none;
padding: .5em;
margin: -.25em 0 0 -3em;
border-radius: 100%;
min-width: 0;
}
.lead-form .search-button .icon {
font-size: 20px;
}
.lead-form .mfp-close {
min-width: 0;
top: .75em;
right: -2em;
color: #fff !important;
}
.mfp-content .container {
max-width: 600px;
padding: 1em;
color: #fff;
text-align: center;
}
.mfp-content p {
font-size: 20px;
line-height: 1.25;
}
/*
.lead-form {
overflow: auto;
z-index: 10;
}
*/
/* all forms in popoup */
.mfp-content form {
font-size: 16px;
width: 100%;
text-align: left;
margin: 1em auto;
}
.mfp-content form p {
color: #fff;
font-size: 80%;
}
.mfp-content form label {
color: #fff;
font-size: 80%;
}
.mfp-content form .text input {
font-size: 16px;
}
.mfp-content form .button {
}
.mfp-content form .button:hover {
}
.mfp-content .mfp-close {
position: fixed;
min-width: 0;
color: #fff;
right: 10%;
left: auto;
top: 2rem;
margin: 0 auto;
float: right;
width: auto;
font-family: inherit;
font-size: 20px;
font-weight: 400;
vertical-align: middle;
}
.lead-frm form {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
}
.lead-frm .input {
width: 48%;
}
.lead-frm .input:nth-child(6),
.lead-frm .input:nth-child(7),
.lead-frm .input:nth-child(8) {
width: 30%;
}
.lead-frm .input.textarea {
width: 100%;
}
.lead-frm .input.submit,
#mc-embedded-subscribe {
display: block;
width: auto;
margin: auto;
}
.mc-embed {
max-width: 450px;
margin: auto;
}
.mc-embed .indicates-required {
text-align: right;
}
.mc-field-group {
margin-bottom: 2em;
}
/* Banners */
.banner-text {
position: absolute;
top: 52%;
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.5vw + 1em);
margin-bottom: 0;
}
.banner-text h3 {
margin-bottom: 0;
color: #1a4155;
font-weight: 400;
font-size: 20px;
font-size: calc(1vw + 1em);
}
.banner-text p {
font-size: 22px;
line-height: 1.25;
}
.hero-banners {
margin: 0;
padding: 0;
background-color: #333;
}
.hero-banners .banner {
position: relative;
}
.hero-banners .banner > a {
display: block;
margin: 0;
padding: 0;
width: 100%;
}
.hero-banners .banner > a[href^="#"] {
pointer-events: none;
}
.hero-banners .banner > a img {
display: block;
margin: 0;
padding: 0;
width: 100%;
}
.hero-banners .banner-text {
text-align: left;
max-width: 800px;
padding-right: 280px;
padding-right: 30%;
top: 50%;
}
.hero-banners h2 {
text-align: left;
line-height: 1;
font-family: Podkova, serif;
font-size: calc(2.25vw + 2em);
}
[lang="fr"] .hero-banners h2 {
font-size: calc(1.75vw + 1.5em);
}
.hero-banners h3 {
margin-top: .5em;
margin-bottom: .5em;
}
.hero-banners img[src*="icon"] {
width: .8em;
vertical-align: middle;
margin-top: -.2em;
}
.hero-banners img.icon2 {
width: 60px;
}
.hero-banners .banner-text .button {
display: inline-block;
vertical-align: middle;
margin: .5em auto;
/* background-color: transparent; */
border: 2px solid currentColor;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: 0.1s linear all;
}
[lang="fr"] .hero-banners .banner-text .button {
font-size: 80%;
}
.hero-banners .banner-text a:hover,
.hero-banners .banner-text .button:hover {
background-color: transparent;
color: #fff;
opacity: .8;
}
.hero-banners a[title="Tandem"] + .banner-text {
padding-right: 0;
top: 10%;
transform: translateY(0);
}
.hero-banners a[title="Tandem"] + .banner-text img {
display: block;
margin: 0 auto;
width: 50%;
}
/* Footer */
.site-footer {
background-color: #244053;
background-image: url(https://mxb.visuallizard.com/img/mxb/decor-waves.t1559934459.svg), url(https://mxb.visuallizard.com/img/mxb/decor-dots.t1559934459.svg);
background-position: right bottom, left center;
/* background-size: 500px 100px, 130px 154px; */
background-size: 700px auto, 350px auto;
background-repeat: no-repeat;
color: #fff;
padding: 2rem 0 0;
}
.site-footer a {
color: inherit;
text-decoration: none;
}
.site-footer a:hover {
color: #999;
}
.site-footer .container {
/* padding: 0; */
display: flex;
justify-content: space-between;
flex-wrap: wrap;
min-height: 200px;
}
.site-footer .footer-col {
width: 50%;
padding-bottom: 2em;
/* background: pink; */
}
.site-footer .footer-col-2 {
width: 45%;
background: url(https://mxb.visuallizard.com/img/mxb/decor-hands.t1559770873.svg) right bottom no-repeat transparent;
background-size: 80px auto;
margin-left: auto;
}
.site-footer .footer-info > *:last-child {
margin-bottom: 0;
}
.footer-jg-logo {
font-size: 10px;
}
.footer-col-2 .cke .c1,
.footer-col-2 .cke .c2 {
padding: 0;
}
.footer-col-2 .cke .c2.first {
padding-right: 1rem;
width: 65%;
}
.footer-col-2 .cke .c2:last-child {
width: 35%;
padding-top: 1rem;
}
/* ! Footer Nav */
.footer_nav_1 {
list-style: none;
padding: 0;
margin: 0 0 1rem;
}
.footer_nav_1 a {
display: block;
padding: .03em 0;
}
.footer_nav_1 > li {
display: block;
margin: 0 2rem 1rem 0;
max-width: 200px;
overflow: hidden;
}
.footer_nav_1 > li:first-child {
float: left;
padding-bottom: 4rem;
}
.footer_nav_1 > li > a {
font-weight: 700;
letter-spacing: .05em;
text-transform: uppercase;
}
.footer_nav_1 li.on > a {
opacity: .5;
}
/* level 2 */
.footer_nav_2 {
list-style: none;
padding-left: 0;
margin-left: 0;
}
.footer_nav_2 > li {
margin-top: .25em;
}
.footer_nav_2 > li > a {
font-weight: 500;
}
.footer_nav_3 {
list-style: none;
margin-bottom: .5em;
}
.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;
}
/*! Sitemap */
.sitemap_1 {
text-align: left;
list-style: none;
}
/* 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;
}
/* public/mxb-style.css */
/*
(c)2019 - 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: #e36a5b;
}
.more a:hover:after {
margin-left: 1em;
}
.back a:hover:before {
margin-left: -2em;
}
*/
.icon2 {
max-height: 70px;
/* margin-bottom: 1rem; */
}
.icon100 {
max-height: 100px;
}
.content-logo {
margin-top: 1rem;
max-height: 60px;
max-width: 250px;
}
.content-logo-2 {
max-height: 50px;
max-width: 200px;
}
.download {
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;
}
.download:hover:after,
.download:hover > em:after {
margin-left: 1em;
}
.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 a[href^="tel:"],
.section a[href^="fax:"],
.section a[href^="mailto:"] {
color: inherit;
}
.section a[href^="tel:"]:hover,
.section a[href^="fax:"]:hover,
.section a[href^="mailto:"]:hover {
color: #e36a5b;
}
/* immitate columns or tables */
.flex {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.flex > div + div {
margin-left: 2em;
}
/* special heading for "Max as you Go" */
.h-mayg {
display: inline-block;
vertical-align: middle;
color: #525a66;
text-transform: uppercase;
letter-spacing: 0.02em;
font-family: Podkova, serif;
font-size: calc(1.75vw + 1.75em);
}
h2 .icon {
display: inline-block;
vertical-align: text-bottom;
width: 1em;
height: 1em;
margin-right: .15em;
position: relative;
top: -.1em;
}
/* Announcement Ribbon */
.announcement {
background: #e36a5b;
padding: .5rem 0;
color: #fff;
}
.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: #244053;
}
/* News/Blog */
.home .special-title {
display: none;
}
.news-index-item {
margin-bottom: 2em;
}
/* ! 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;
text-align: left;
}
.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: #e36a5b;
}
.cards img {
display: block;
width: 100%;
margin: 0 auto;
transition: all .5s ease;
}
.card-link {
display: block;
width: calc(100% + 2em);
margin: 0 -1em 1.5em;
overflow: hidden;
}
.card-link:hover img {
transform: scale(1.1);
}
.cards h4 {
color: #58595b;
}
/* 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%;
}
/* Home page articles */
.home .cards {
text-align: center;
}
.home .cards img {
width: 80%;
}
.home .cards p {
color: #485869;
}
.home .cards li .more {
margin-top: 0;
}
/* ! Blog */
.blog.index .articles-list > .container {
overflow: hidden; /* prevent margin hanging on pagination */
}
.articles-list .cards li {
width: 40% !important;
margin: 0 5% 10% 5% !important;
padding: 0 2em 2em;
box-shadow: 0 0 15px 5px rgba(0,0,0,.1);
max-width: 400px;
}
.articles-list .card-link {
width: calc(100% + 4em);
margin: 0 -2em 1.5em;
}
/* Blog: Read */
.blog.read {
}
.blog.read .hero-banners {
display: none;
}
.blog.read .blog-title {
text-align: left;
line-height: 1;
font-family: Podkova, serif;
font-size: calc(1.5vw + 1.5em);
color: #244053;
}
.blog-img {
display: block;
max-width: 100%;
}
.blog-body {
padding: 2rem 0;
margin-bottom: 2rem;
background: #fff;
text-align: left;
}
.blog-body + h2 {
/* heading for More Articles */
color: #244053;
}
/* ! Documents */
.documents-block {
clear: both;
}
.documents-block + .documents-block {
border-top: 1px dotted #e36a5b;
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: #516689;
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: #e36a5b;
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 .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 .documents-block:nth-child(1):before { background-image: url(https://mxb.visuallizard.com/img/icon-news.svg); }
.special-blocks .documents-block:nth-child(2):before { background-image: url(https://mxb.visuallizard.com/img/icon-info.svg); }
.special-blocks .documents-block:nth-child(3):before { background-image: url(https://mxb.visuallizard.com/img/icon-interest.svg); }
.special-blocks-2 .documents-block:nth-child(1):before { background-image: url(https://mxb.visuallizard.com/img/logo-mybenefits-white.png); width: 70%; }
[lang="fr"] .special-blocks-2 .documents-block:nth-child(1):before { background-image: url(https://mxb.visuallizard.com/img/logo-mybenefits-fr-white.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;
}
/* ! 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://mxb.visuallizard.com/img/cliplet-1.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: #e36a5b;
font-weight: 600;
}
.cliplet-title em sup {
font-style: normal;
}
.cliplet-content .button {
margin: .5em auto;
}
/* FAQ */
.faq-toggles {
/* border: 1px solid rgb(128,128,128); */
border-bottom: 0;
margin: 2em auto;
max-width: 500px;
}
.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;
padding: .75em 3em;
margin-top: 1em;
background-color: #dda657;
background-repeat: no-repeat;
background-origin: border-box;
background-image: url(https://mxb.visuallizard.com/img/mxb/icon-star.t1559752057.svg), url(https://mxb.visuallizard.com/img/mxb/icon-star-plus.t1559752057.svg);
background-position: .75em center, right .75em center;
background-size: 1.5em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.05em;
/* font-family: Podkova, serif; */
/* font-weight: 400; */
font-size: 14px;
line-height: 1;
border: none;
border-radius: 1px;
cursor: pointer;
transition: 0.1s linear all;
}
.faq-toggles .faq-question.is-toggle-on {
background-image: url(https://mxb.visuallizard.com/img/mxb/icon-star.t1559752057.svg), url(https://mxb.visuallizard.com/img/mxb/icon-star-minus.t1559752057.svg);
}
.faq-toggles .faq-question .faq-title {
font-size: 1em;
margin: 0;
cursor: pointer;
}
.faq-toggles .faq-question .toggle {
/*
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;
*/
display: none;
}
.faq-toggles .faq-question:hover .faq-title,
.faq-toggles .faq-question:hover .toggle {
/* color: #e36a5b; */
}
.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); */
margin: 0;
padding: 1em 2em 1em 3em;
max-height: 5555px;
background-color: #fff;
color: #58595b;
opacity: 1;
transition: all .3s ease-in-out;
text-align: left;
font-size: 115%;
}
.faq-toggles .faq-answer a {
color: #e36a5b;
text-decoration: none;
}
.faq-toggles .faq-answer a:hover {
color: inherit;
}
.faq-toggles .is-toggle-on {
}
.faq-toggles .is-toggle-off + .faq-answer {
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-toggles .faq-answer > *:last-child {
margin-bottom: 0;
}
/* FAQ */
.testimonials-toggles {
/* border: 1px solid rgb(128,128,128); */
border-bottom: 0;
margin: 2em auto;
/* max-width: 500px; */
}
.testimonials-toggles:last-child {
margin-bottom: 1em;
}
.testimonials-toggle-item {
background: #fff;
margin-bottom: 2em;
}
.testimonials-toggles .testimonials-question {
position: relative;
cursor: pointer;
padding: .75em 3em;
margin-top: 1em;
background-color: #244053;
background-repeat: no-repeat;
background-origin: border-box;
background-image: url(https://mxb.visuallizard.com/img/mxb/icon-star.t1559752057.svg), url(https://mxb.visuallizard.com/img/mxb/icon-star-plus.t1559752057.svg);
background-position: .75em center, right .75em center;
background-size: 1.5em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.05em;
/* font-family: Podkova, serif; */
/* font-weight: 400; */
font-size: 14px;
line-height: 1;
border: none;
border-radius: 1px;
cursor: pointer;
transition: 0.1s linear all;
}
.testimonials-toggles .is-toggle-on .testimonials-question {
background-image: url(https://mxb.visuallizard.com/img/mxb/icon-star.t1559752057.svg), url(https://mxb.visuallizard.com/img/mxb/icon-star-minus.t1559752057.svg);
}
.testimonials-toggles .testimonials-question .toggle-title {
color: #fff;
}
.testimonials-toggles .testimonials-question:hover,
.testimonials-toggles .is-toggle-on .testimonials-question {
background-color: #e36a5b;
}
.testimonials-toggles .testimonials-question .testimonials-trigger:focus {
outline: 1px dotted currentColor;
}
.testimonials-toggles .testimonials-answer {
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-answer {
position: relative;
z-index: 999;
}
.testimonials-toggles .is-toggle-off .testimonials-answer {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
overflow: hidden;
}
.testimonials-toggles .testimonials-answer > *:last-child {
margin-bottom: 0;
}
.testimonials-toggles .testimonials-preview,
.testimonials-toggles .testimonials-answer,
.testimonials-toggles .testimonials-meta {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.testimonials-toggles .testimonials-img {
display: block;
max-height: 100px;
max-width: 500px;
margin: 0 auto 1em;
}
.testimonials-toggles .testimonials-preview {
padding: 2em 2em 0;
}
.testimonials-toggles .testimonials-meta {
padding: 0 2em 1px;
text-align: right;
}
.cross-block {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 2em auto;
}
.cross-item {
width: 50%;
flex-grow: 1;
text-align: center;
padding: 2em;
border: 0 solid #ccc;
}
.cross-item:not(:nth-child(1)):not(:nth-child(2)) {
border-top-width: 1px;
}
.cross-item:nth-child(2n) {
border-left-width: 1px;
}
.cross-item img {
max-width: 90%;
max-height: 80px;
margin: 1em auto;
}
.community-logos img {
padding: 1em .5em;
max-width: 150px;
max-height: 70px;
vertical-align: middle;
}
/* Contact page grid - overwrites float columns with CSS grid for more complex layout */
@supports (display: grid) {
.contact-grid .cke {
display: grid;
grid-gap: 1em;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-areas:
"office phone fax email"
"office phone descr descr";
}
.contact-grid .cke::before,
.contact-grid .cke::after {
content: none;
}
.contact-grid .cke .c1,
.contact-grid .cke .c4 {
width: auto;
padding: 0;
flex-direction: column;
/* background-color: rgba(0,0,0,0.1); */
}
.contact-grid .cke .c4.first {
grid-area: office;
}
.contact-grid .cke .c4.first + .c4 {
grid-area: phone;
}
.contact-grid .cke .c4.first + .c4 + .c4 {
grid-area: fax;
}
.contact-grid .cke .c4.first + .c4 + .c4 + .c4 {
grid-area: email;
}
.contact-grid .cke .c1 {
grid-area: descr;
border-top: 1px solid #e36a5b;
padding-top: 1em;
margin-top: -3em;
}
.contact-grid .cke .c1 > :last-child,
.contact-grid .cke .c4 > :last-child {
margin-bottom: 0;
}
.contact-grid img[src$=".svg"] {
max-height: 50px;
}
}
/* Zebra grid */
.zebra-grid .cke {
display: grid;
grid-template-columns: 1fr 1fr;
justify-content: center;
}
.zebra-grid .cke::before,
.zebra-grid .cke::after {
content: none;
}
.zebra-grid .cke .c2 {
width: auto;
padding: 4em 4em;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.zebra-grid .cke .c2:nth-child(4n+2),
.zebra-grid .cke .c2:nth-child(4n+3) {
background-color: #eee;
}
.zebra-grid img[src$=".svg"] {
max-height: 8em;
max-width: 8em;
margin-bottom: 2em;
}
/* Hanging icon grid */
.hanging-grid .cke {
display: grid;
grid-template-columns: 1fr 1fr;
justify-content: center;
text-align: left;
}
.hanging-grid .cke::before,
.hanging-grid .cke::after {
content: none;
}
.hanging-grid .cke .c2 {
position: relative;
width: auto;
padding: 0 2rem 2rem 5rem;
}
.hanging-grid img[src$=".svg"] {
max-height: 4em;
max-width: 4em;
margin-bottom: 2em;
position: absolute;
left: 0em;
top: 1em;
}
.hanging-grid h2 {
text-align: left;
}
/* Tandem page */
.tandem-salmon-icon {
max-height: 70px;
margin-bottom: 1em;
}
/* quote-like blocks */
.tandem-flow blockquote {
position: relative;
border: none;
padding: 1em;
max-width: 400px;
margin: 0 auto;
z-index: 0;
text-align: left;
}
.tandem-flow blockquote,
.tandem-flow blockquote p {
font-size: 14px;
line-height: normal;
}
.tandem-flow blockquote:before {
content: '';
display: block;
position: absolute;
left: -4em;
top: 0;
width: 25%;
height: 100%;
background: transparent no-repeat left top url("data:image/svg+xml;utf8,");
z-index: -1;
}
.tandem-flow blockquote p strong:only-child {
display: block;
text-align: right;
position: relative;
}
.tandem-flow blockquote p strong:only-child:after {
content: '';
display: block;
position: absolute;
right: -1.5em;
top: -.5em;
width: 4em;
height: 4em;
background: transparent no-repeat left top url("data:image/svg+xml;utf8,");
z-index: -1;
}
/* Memebers page */
.form-downloads .button.plus {
display: block;
max-width: 500px;
margin: 0rem auto 0;
color: #fff;
}
/* ! Partners logos */
.insurers-banners {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
margin: 1em 0% 1em;
padding: 0;
list-style-type: none;
justify-content: center;
}
.insurers-banners .banner {
width: auto;
margin: 1em 3%;
padding: 0 ;
}
.insurers-banners .banner-link {
display: block;
width: 100%;
margin: 0 0 0;
}
.insurers-banners .banner-img {
display: block;
height: 100%;
width: auto;
min-height: 30px;
margin: 0;
transition: all .5s ease;
}
.insurers-banners .banner:hover .banner-img {
transform: scale(1.1);
}
/* ! Teladoc */
.teladoc-icon {
max-height: 70px;
margin-bottom: 1em;
}
.checks-list {
list-style: none;
margin-top: 2em;
text-align: left;
columns: 3 180px;
column-gap: 4em;
}
.checks-list li {
display: inline-block;
margin-bottom: .5em;
}
.checks-list li:before {
content: '';
display: inline-block;
vertical-align: middle;
margin-left: -1.25em;
margin-right: .25em;
width: 1em;
height: 1em;
background: url(https://mxb.visuallizard.com/img/mxb/icon-teladoc-checkmark.t1581458858.svg);
background-size: contain;
}
.teladoc-logo {
max-width: 200px;
margin: 1em 4em;
}
/* Booklet-block */
.booklet-block {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 2rem auto;
text-align: left;
}
.booklet-block dt,
.booklet-block dd {
width: 50%;
margin: 0;
padding: 2rem 2rem 1rem;
}
.booklet-block dt {
background: #e8a445;
color: #fff;
font-size: 1.5rem;
position: relative;
}
.booklet-block dt:before,
.booklet-block dt:after {
content: "";
position: absolute;
display: block;
top: 2rem;
}
.booklet-block dt:before {
left: 100%;
width: 15%;
height: 40px;
background-color: #e8a445;
}
.booklet-block dt:after {
left: calc(100% + 15%);
width: 0;
height: 0;
border-left: 20px solid #e8a445;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
}
.booklet-block dd {
padding-left: 15%;
background: #f8e7d2;
color: #1a4155;
}
.booklet-block dd > strong {
display: block;
font-family: Podkova, serif;
font-size: 2rem;
}
.booklet-block dd > p {
max-width: 18ch;
margin-bottom: 0;
}
.max-sub-controls .logo-max-artwork {
max-width: 4rem;
margin-bottom: 1rem;
}
.subsection-nav {
list-style: none;
display: flex;
flex-direction: row;
padding: 0;
margin: 1rem auto 2rem;
}
.subsection-nav > li {
width: 25%;
padding: 0 1rem;
font-size: 1.5em;
}
.subsection-nav a {
display: block;
color: #fff;
transition: .2s all;
}
.subsection-nav .icon {
display: block;
margin: 1rem auto;
width: 4rem;
height: 4rem;
transition: .2s all;
}
.subsection-nav a:hover:not(.active) .icon {
transform: scale(1.1);
}
.subsection-nav a.active {
opacity: .25;
}
.max-sub-cta img[alt^="logo-max"] {
max-height: 70px;
}
.max-sub-cta .button {
background-image: none;
}
/* Employee Benefits */
.vitruvian-list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
margin: 2rem auto;
padding-left: 50%;
background: url(https://mxb.visuallizard.com/img/mxb/decor-vitruvian-man.t1581458856.svg) left center no-repeat transparent;
background-size: 45% auto;
text-align: left;
}
.vitruvian-list li {
margin: .5rem;
}
.vitruvian-list li > strong:first-child {
display: block;
font-size: 1.2em ;
font-weight: 600;
}
/* Max Nav */
.max-nav {
display: block;
width: 100%;
height: auto;
max-width: 700px;
margin: 0rem auto;
}
.max-nav-home-button.max-nav-home-button {
margin-bottom: 4rem;
}
.max-nav-shadow .cke a {
color: inherit;
}
.max-nav-shadow .cke a:hover {
color: #000;
}
/* from SVG */
.max-nav .max-shape {
fill: #f1f0f2;
transition: all .2s;
}
.max-nav a:hover .max-shape {
fill: #f8e7d2;
}
.max-nav text {
font-family: "Work Sans", sans-serif;
}
/* .txt-bh { fill: #1a4155; }
.txt-eb { fill: #4c7ba8; }
.txt-ew { fill: #00679b; }
.txt-wi { fill: #e8a445; }
.item:hover text { fill: #f8e7d2; }
.item-bh a:hover .max-shape { fill: #1a4155; }
.item-eb a:hover .max-shape { fill: #4c7ba8; }
.item-ew a:hover .max-shape { fill: #00679b; }
.item-wi a:hover .max-shape { fill: #e8a445; } */
.max-nav .cls-1 {
display: none;
}
.max-nav .cls-h,
.max-nav .cls-t {
fill: #585856;
}
.max-nav .cls-h {
font-size: 14px;
}
[lang="fr"] .max-nav .cls-h {
font-size: 13px;
}
.max-nav .cls-t {
font-size: 10px;
}
[lang="fr"] .max-nav .cls-t {
font-size: 9px;
}
.max-nav #icons {
pointer-events: none;
}
/* public/mxb-responsive.css */
/*
(c)2019 - 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'; }
.hero-banners .banner-text { padding-right: 18%; }
.hero-banners h2 { font-size: calc(2vw + 2em); }
[lang="fr"] .hero-banners h2 { font-size: calc(1.5vw + 1.5em); }
}
@media only screen and (max-width: 1480px) {
body:before { content: 'large'; }
.site-logo { width: 35%; margin-right: 5%; }
.hero-banners .banner-text { max-width: 70%; margin-top: 20px; }
.hero-banners .banner-text p { font-size: 1em; font-size: calc(.75vw + .5em); margin-bottom: .5em; }
.site-footer { background-position: right bottom, -200vmin -200vmin; }
}
@media only screen and (min-width: 800px) {
.main-nav #nav_li_item_393 { margin-left: 2em; }
.main-nav #nav_li_item_375 > a { background-color: #244053; color: #e36a5b; }
.main-nav #nav_li_item_375 > a:hover { opacity: .7; }
}
@media only screen and (max-width: 800px) {
body { font-size: 16px; }
body:before { content: 'medium'; /* mobile nav. mode kicks in */ }
.site-header .container { padding: 10px 10px 10px 3.5vw; }
.site-logo { margin-left: 5px; margin-right: 0; width: 65%; font-size: 40px; font-size: calc(2vw + 1em); line-height: 2.5; }
.section > .container { padding: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }
.h3 { font-size: 1em; }
.home-blog > .container > h3,
.cards-section h3 { font-size: 2em; text-align: left; }
.quote-text h2 { font-size: 1.5em; }
.hero-banners { overflow: hidden; }
.hero-banners .banner > a { width: 140%; margin: 0 -20%; }
.hero-banners .banner-text { max-width: 80%; margin-top: 10px; }
.hero-banners .banner-text h2 { font-size: 1.8em; font-size: calc(2vw + 1em); }
.hero-banners .banner-text h3 { font-size: 1.25em; font-size: calc(1vw + .75em); }
.hero-banners .banner-text p { font-size: 1em; font-size: calc(.75vw + .5em); margin-bottom: .5em; }
.hero-banners .banner-text .button { font-size: 12px; }
.hero-banners .banner-text h2 br { display: none; }
.hero-banners img.icon2 { width: 30px; }
/* Adjustments specific to Memebrs FR page's banner */
.members .hero-banners .banner > a { width: 200%; margin: 0 -50%; }
.members .hero-banners .banner-text { max-width: 90%; }
.nav-toggle { min-width: auto; width: 32px; height: 32px; border-radius: 0; background: none; color: #e36a5b; appearance: none; padding: 6px; margin: 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,
.nav-toggle:focus { background: none; color: #fff; }
.main-nav { position: relative; top: 0; left: auto; width: 100%; z-index: 0; transition: all .2s ease-in; background-color: #244053; padding: 2em 0; }
.js .main-nav { position: absolute; top; 0; left: -100%; padding: 4em 0 0; }
.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; padding-bottom: 0; }
.main-nav .nav_2 > li { }
.main-nav .nav_2 > li > a { font-size: 16px; padding-left: 2rem; }
.main-nav .nav_3 > li > a { font-size: 14px; padding-left: 3rem; }
.header-tools { position: relative; margin: 0; justify-content: flex-end; }
.header-tools > li { margin-right: 1em; }
.header-tools > li > a,
.header-tools > li > .nav-toggle { border: 1px solid currentColor; padding: 4px; color: #e36a5b; font-size: 14px; text-align: center; width: 32px; height: 32px; }
.header-tools > li > .nav-toggle { padding: 6px; }
.header-tools .icon { width: 100%; height: 100%; }
.header-tools > li > a:focus,
.header-tools > li > .nav-toggle:focus { outline-color: skyblue; }
.cke div.c3 { width: auto; float: none; padding: 0; }
.cards li { width: 47%; }
/* Blog */
.articles-list .cards li {
width: 100% !important;
margin-left: 0 !important; margin-right: 0 !important;
padding: 0 2em 2em;
box-shadow: 0 0 15px 5px rgba(0,0,0,.1);
}
.documents-category > blockquote { float: none; width: auto; max-width: 500px; margin: 3.5em 0 1em 0; }
.cross-item { width: 100%; }
.cross-item:nth-child(2n) { border-left-width: 0; border-top-width: 1px; }
.zebra-grid .cke { grid-template-columns: 1fr; }
.zebra-grid .cke .c2 { padding: 2em 1em; }
.zebra-grid .cke .c2:nth-child(4n+2),
.zebra-grid .cke .c2:nth-child(4n+3) { background-color: #fff; }
.zebra-grid .cke .c2:nth-child(2n) { background-color: #eee; }
.zebra-grid img[src$=".svg"] { max-width: 5em; max-height: 5em; margin-bottom: 1em; }
.hanging-grid .cke { grid-template-columns: 1fr; }
.booklet-block { margin-left: -2rem; margin-right: -2rem; }
.booklet-block dt { font-size: 1.2rem; }
.booklet-block dd > strong { font-size: 1.5rem; }
.subsection-nav { font-size: .5rem;}
.subsection-nav .icon { width: 2rem; height: 2rem; }
.tandem-salmon-icon { margin-top: 1em; margin-bottom: 0; }
.testimonials-toggles .testimonials-img { max-height: 50px; }
.vitruvian-list { display: block; margin: 2rem auto; padding: 50vw 0 0; background-position: center top; background-size: auto 40vw; }
.vitruvian-list li { width: 100%; }
@supports (display: grid) {
.contact-grid .cke {
grid-gap: 0em;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"office phone"
"fax email"
"descr descr";
}
.contact-grid .cke .c1 { margin-top: 0; }
.contact-grid .cke .c4 { padding: 1em; }
.contact-grid .cke .c4.first + .c4 + .c4,
.contact-grid .cke .c4.first + .c4 + .c4 + .c4 { padding-top: 1em; border-top: 1px solid #e36a5b; }
.contact-grid img[src$=".svg"] { max-height: 50px; max-width: 120px; }
}
.site-footer .container { }
.site-footer .footer-col-1,
.site-footer .footer-col-2 { width: 100%; max-width: 370px; margin-left: 0; margin-right: 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; }
.lead-frm .input,
.lead-frm .input:nth-child(6),
.lead-frm .input:nth-child(7),
.lead-frm .input:nth-child(8) { width: 100%; }
.flex { display: block; }
.flex > div + div { margin: 0 0 1em 0; }
}
@media only screen and (max-width: 480px) {
body:before { content: 'small'; }
.site-logo { }
.header-tools { }
.header-tools .icon { }
.hero-banners .banner-text { }
.hero-banners .banner-text h2 { font-size: 1.5em; font-size: calc(1vw + 1em); }
/* .hero-banners .banner-text p:not(.with-button) { display: none; } */
.hero-banners .banner-text a,
.hero-banners .banner-text .button { font-size: 12px; padding: .6em 1em .4em; }
.button { margin-top: 1em; }
.button + .button { margin-left: 0; }
.section > .container { padding: 2rem 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; }
.site-footer .footer-col-1 { margin-right: 0; max-width: none; }
.footer_nav_1 > li:first-child { padding-bottom: 0; }
.footer_nav_1 a { padding: .1em 0; }
.footer-col-2 .cke .c2.first,
.footer-col-2 .cke .c2:last-child { width: auto; padding: 0; max-width: 200px; }
.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; }
.booklet-block { margin-left: -1rem; margin-right: -1rem; }
}