.
* Creates:
* .l-content (base centering)
* .l-content-w--narrow | .l-content-w--medium | .l-content-w--standard | .l-content-w--wide | .l-content-w--full
* Requires Bootstrap mixins: media-breakpoint-up().
*/
.l-content {
margin-inline: auto;
}
.l-content-w--narrow {
margin-inline: auto;
max-width: 100%;
}
@media (min-width: 576px) {
.l-content-w--narrow {
max-width: 95%;
}
}
@media (min-width: 768px) {
.l-content-w--narrow {
max-width: 720px;
}
}
@media (min-width: 992px) {
.l-content-w--narrow {
max-width: 800px;
}
}
@media (min-width: 1140px) {
.l-content-w--narrow {
max-width: 880px;
}
}
.l-content-w--medium {
margin-inline: auto;
max-width: 100%;
}
@media (min-width: 768px) {
.l-content-w--medium {
max-width: 900px;
}
}
@media (min-width: 992px) {
.l-content-w--medium {
max-width: 960px;
}
}
@media (min-width: 1140px) {
.l-content-w--medium {
max-width: 1040px;
}
}
.l-content-w--standard {
margin-inline: auto;
max-width: 100%;
}
@media (min-width: 768px) {
.l-content-w--standard {
max-width: 980px;
}
}
@media (min-width: 992px) {
.l-content-w--standard {
max-width: 1140px;
}
}
@media (min-width: 1140px) {
.l-content-w--standard {
max-width: 1200px;
}
}
.l-content-w--wide {
margin-inline: auto;
max-width: 100%;
}
@media (min-width: 768px) {
.l-content-w--wide {
max-width: 1100px;
}
}
@media (min-width: 992px) {
.l-content-w--wide {
max-width: 1280px;
}
}
@media (min-width: 1140px) {
.l-content-w--wide {
max-width: 1440px;
}
}
.l-content-w--full {
margin-inline: auto;
max-width: 100%;
}
@media (min-width: 768px) {
.l-content-w--full {
max-width: 100%;
}
}
@media (min-width: 992px) {
.l-content-w--full {
max-width: 100%;
}
}
@media (min-width: 1140px) {
.l-content-w--full {
max-width: 100%;
}
}
/* File: assets/scss/layout/_l-content-gx.scss */
/**
* Content container horizontal gutters (inline padding) applied to
* the section content container
that also carries .l-container--*.
*
* This creates:
* .l-content-gx--compact | .l-content-gx--standard | .l-content-gx--expanded | .l-content-gx--none
*
* Each sets padding-inline at sm/md/lg using Bootstrap mixins.
*
* Requires Bootstrap mixins: media-breakpoint-up().
* Assumes Bootstrap SCSS mixins (media-breakpoint-up) are available.
*/
.l-content-gx--compact {
padding-inline: 1rem;
}
@media (min-width: 768px) {
.l-content-gx--compact {
padding-inline: 2rem;
}
}
@media (min-width: 992px) {
.l-content-gx--compact {
padding-inline: 2rem;
}
}
.l-content-gx--standard {
padding-inline: 2rem;
}
@media (min-width: 768px) {
.l-content-gx--standard {
padding-inline: 3rem;
}
}
@media (min-width: 992px) {
.l-content-gx--standard {
padding-inline: 4rem;
}
}
.l-content-gx--expanded {
padding-inline: 2.5rem;
}
@media (min-width: 768px) {
.l-content-gx--expanded {
padding-inline: 5rem;
}
}
@media (min-width: 992px) {
.l-content-gx--expanded {
padding-inline: 6rem;
}
}
.l-content-gx--none {
padding-inline: 0;
}
@media (min-width: 768px) {
.l-content-gx--none {
padding-inline: 0;
}
}
@media (min-width: 992px) {
.l-content-gx--none {
padding-inline: 0;
}
}
.entry-content-wrap {
padding-left: 0 !important;
padding-right: 0 !important;
}
#inner-wrap {
background-color: white;
display: flex !important;
flex-direction: column !important;
}
.content-container.site-container {
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.content-area {
margin-top: 0 !important;
}
.entry-header {
margin-bottom: 0 !important;
}
.single-content {
margin: 0 !important;
}
.layout-width--contained {
width: 100%;
max-width: 1200px;
}
.single-wi-cpt-second .content-container.site-container {
max-width: 100% !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
.type-wi-cpt-second.content-bg:not(.loop-entry) {
max-width: 100% !important;
margin: 0 !important;
}
.webscape-page--contained {
width: 100%;
max-width: 1140px;
margin-left: auto;
margin-right: auto;
margin-bottom: 2rem;
padding-left: 2rem;
padding-right: 2rem;
}
@media (min-width: 576px) {
.webscape-page--contained {
padding-left: 3rem;
padding-right: 3rem;
}
}
@media (min-width: 768px) {
.webscape-page--contained {
padding-left: 4rem;
padding-right: 4rem;
}
}
.webscape-page-wrapper {
background-color: white;
}
.webscape-page-wrapper--fullwidth {
width: 100%;
box-sizing: border-box;
flex: 1 0 auto;
}
.bg-secondary {
background-color: #ae9969;
color: #222222;
}
.bg-primary {
background-color: #fdfdfd;
}
.bg-white {
background-color: #002789;
}
.bg--light-7 {
background-color: rgb(217.8, 217.8, 217.8);
}
.bg--grey-dark {
background-color: rgb(84, 84, 84);
color: #f2f2f2;
}
.bg--dark-65opac {
background: rgba(34, 34, 34, 0.65) !important;
color: #f2f2f2 !important;
}
.bg--fixed {
background-attachment: fixed;
}
.bg-grad-prmry-to-scndry, .contact-reviews-row {
background-image: linear-gradient(45deg, #002789 0%, #ae9969 100%);
}
.entry-related-inner-content.alignwide {
padding: 2rem 0;
}
.bg-gradient--light {
background: linear-gradient(294deg, #fdfdfd 40%, #f2f2f2 100%);
}
.card--title-image {
display: flex;
justify-content: center;
align-items: center;
}
.card--title-image__image-box {
width: 110px;
height: 110px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}
.card--title-image__image-box > img {
width: 91px;
height: 91px;
padding: 0 !important;
}
.text--accent-lt {
color: #f9d895;
}
.divider__icon {
display: flex;
justify-content: center;
align-items: center;
}
.divider--line-with-icon {
display: grid;
grid-template-areas: "left icon right";
align-items: center;
gap: 0.75rem;
grid-template-columns: 1fr 2.5em 1fr;
}
.divider--line-with-icon .line:first-child {
grid-area: left;
}
.divider--line-with-icon .divider__icon {
grid-area: icon;
}
.divider--line-with-icon .line:last-child {
grid-area: right;
}
.divider--thin {
border-top-width: 1px;
}
.divider--solid {
border-top-style: solid;
}
.divider--primary {
border-top-color: #002789 !important;
}
.divider--secondary {
border-top-color: #ae9969 !important;
}
.divider--line-double {
border-top: double 3px;
color: inherit;
}
.divider--fullwidth {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;
}
.d-flex-col {
display: flex;
flex-direction: column;
}
.d-flex-center {
display: flex;
justify-content: center;
align-items: center;
}
.d-flex-wrap {
display: flex;
flex-wrap: wrap;
}
.d-flex-col-center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.d-flex-stretch {
display: flex;
align-items: stretch;
justify-content: center;
}
.u-gap-1 {
gap: 1rem !important;
}
.u-gap-2 {
gap: 2rem !important;
}
.u-gap-3 {
gap: 3rem !important;
}
.u-col-gap-1 {
column-gap: 1rem !important;
}
.u-col-gap-2 {
column-gap: 2rem !important;
}
.u-col-gap-3 {
column-gap: 3rem !important;
}
.u-row-gap-1 {
row-gap: 1rem !important;
}
.u-row-gap-2, .brands--logo-grid__row {
row-gap: 2rem !important;
}
.u-row-gap-3 {
row-gap: 3rem !important;
}
.my-1-mid {
margin-block: 1.5rem !important;
}
.col-group--stacked-h .col:first-child {
z-index: 1;
}
.col-group--stacked-h .col:nth-child(2) {
z-index: 2;
}
.col-group--stacked-h .col:last-child {
z-index: 3;
}
.col-group--light-alternating .col:first-child {
background-color: #fdfdfd;
}
.col-group--light-alternating .col:nth-child(2) {
background-color: #f9f9f9;
}
.col-group--light-alternating .col:last-child {
background-color: #fdfdfd;
}
.w-30 {
width: 30% !important;
}
.max-w-550 {
max-width: 550px !important;
}
.mx-auto, .brands--logo-grid__row {
margin-left: auto;
margin-right: auto;
}
.max-w-400 {
max-width: 400px !important;
}
.bgsize--full {
height: 100% !important;
}
@media (max-width: 575.98px) {
.bgsize--full {
max-height: none;
min-height: 590px;
}
}
@media (max-width: 767.98px) {
.bgsize--full {
min-height: 575px;
}
}
@media (min-width: 768px) {
.bgsize--full {
min-height: 550px;
}
}
@media (min-width: 992px) {
.bgsize--full {
min-height: 525px;
}
}
.bgsize--short {
height: 100%;
height: max(250px, 35vh);
max-height: 350px;
}
@media (min-width: 992px) {
.bgsize--short {
max-height: 300px;
}
}
.bgsize--tall {
min-height: max(450px, 75vh);
}
.bgsize--short.section-bg--media {
max-height: 350px !important;
}
@media (min-width: 992px) {
.bgsize--short.section-bg--media {
max-height: 300px !important;
}
}
.full-height {
overflow: hidden;
width: 100%;
min-height: 500px;
max-height: 650px;
height: 100vh;
}
@media (min-width: 576px) {
.full-height {
max-height: 600px;
}
}
.py-8 {
padding-top: 8rem;
padding-bottom: 8rem;
}
.icon path {
fill: currentColor;
}
.divider__icon-svg { /* <- the actual