element */ &:first-child { &:before { content: "\e838"; /* quotation mark (beginning) */ font-size: var(--quotation-font); font-family: fontello; color: var(--quotation-color); transform: rotate(180deg); display: inline-block; margin: 0 8px 0 0; line-height: 1; } } /* Add quotation mark after the last
element */
&:last-child {
&:after {
content: "\e838"; /* quotation mark (end) */
font-size: var(--quotation-font);
font-family: fontello;
color: var(--quotation-color);
display: inline-block;
margin: 0 0 0 8px;
position: absolute;
bottom: -4px;
}
}
}
}
author {
display: flex;
justify-content: center;
align-items: center;
gap: 0 10px;
margin: 0 auto;
font-size: 20px;
line-height: 35px;
star {
&:before {
content: '\e80f \e80f \e80f \e80f \e80f';
color: var(--review-star-color);
font-family: fontello;
font-size: 32px;
}
}
strong {
font-weight: 700;
color: var(--review-content-color);
&:before {
content: '\2014'; /* long dash character */
padding: 0 5px 0 0;
}
}
}
}
}
}
/*===========================================================================*/
/* Section -- Services */
/*===========================================================================*/
.location-page {
.location-services:not(.alt-background) {
padding: 60px 10px 80px;
.service-icons-container {
max-width: var(--service-images-container-width);
display: flex;
justify-content: center;
margin: 0 auto;
padding: 25px 0 0;
flex-wrap: wrap;
gap: 50px 20px;
.service {
flex: 0 1 var(--service-image-width);
margin: 0 auto;
padding: 0;
transition: 0.4s all;
max-width: max-content;
figure {
margin: 0;
padding: 0;
img {
max-width: 100%;
margin: 0 auto;
padding: 0;
}
}
h3 {
color: var(--image-h3-color);
display: grid;
font-size: var(--service-h3-image-font);
margin: 10px 0 0;
small {
color: var(--image-h3-color);
display: block;
padding: 0 0 3px;
}
}
}
/* H3 color when "off" class isn't present (For all icons) */
&:not(.off) {
.service {
/* H3 color when "off" class isn't present (For individual icons) */
&:not(.off) {
&:hover {
transform: scale(1.05);
transition: 0.4s all;
h3 {
color: var(--image-modal-h3-color-hover);
small {
color: var(--image-modal-h3-color-hover);
}
}
}
h3 {
color: var(--image-modal-h3-color);
small {
color: var(--image-modal-h3-color);
}
}
}
}
}
}
}
}
/*===========================================================================*/
/* Section -- Financing */
/*===========================================================================*/
.location-page {
.location-financing.alt-background {
margin: auto;
padding: 60px 10px;
.financing-icons-container {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
max-width: 1200px;
padding: 25px 0 0;
gap: 40px 0;
justify-content: space-around;
.location-icon {
flex: 0 1 250px;
gap: 5px 0;
margin: 0;
h3 {
font-size: var(--financing-h3-icon-font);
}
}
/* H3 color when "off" class isn't present (For all icons) */
&:not(.off) {
.location-icon {
/* H3 color when "off" class isn't present (For individual icons) */
&:not(.off) {
&:hover {
h3 {
color: var(--svg-modal-h3-color-hover);
}
}
h3 {
color: var(--svg-modal-h3-color);
}
}
}
}
}
}
}
/*===========================================================================*/
/* Section -- Find Our Office */
/*===========================================================================*/
.location-page {
.location-find-us:not(.alt-background) {
padding: 60px 10px 30px;
}
}
/*===========================================================================*/
/* Section -- FAQs */
/*===========================================================================*/
.location-page {
.location-faqs.alt-background {
padding: 60px 10px 45px;
.location-accordion {
border-top: var(--faq-border-type);
border-color: var(--faq-border-color);
border-left: var(--faq-border-type);
border-left-color: var(--side-border-color);
border-right: var(--faq-border-type);
border-right-color: var(--side-border-color);
border-width: var(--faq-border-width);
border-radius: var(--faq-border-radius);
border-bottom: none;
margin: 20px auto;
overflow: hidden;
text-align: left;
max-width: var(--faq-max-width);
.faq-wrapper {
.faq-toggle {
background: var(--faq-h3-background);
position: relative;
cursor: pointer;
clear: both;
display: block;
margin: 0 auto;
width: 100%;
padding: 10px 20px 10px 60px;
border-bottom: var(--faq-border-type);
border-color: var(--faq-border-color);
border-width: var(--faq-border-width);
/* Toggle Icon */
&:before {
content: '\e840';
font-family: fontello;
color: var(--faq-icon-color);
font-size: var(--faq-icon-size);
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
}
&:hover {
&:before {
color: var(--faq-icon-color-hover);
}
h3 {
color: var(--faq-h3-color-hover);
}
}
&.active {
border: none;
&:before {
content: '\e841';
color: var(--faq-icon-color-active);
}
h3 {
color: var(--faq-h3-color-active);
}
}
h3 {
color: var(--faq-h3-color);
font-size: var(--faq-h3-font);
text-align: left;
}
}
.faq-content {
background: var(--faq-content-background);
display: none;
padding: var(--faq-content-padding);
border-bottom: var(--faq-border-type);
border-color: var(--faq-border-color);
border-width: var(--faq-border-width);
/* Content color, excluding the HTML elements within the "not()" varirable */
*:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(a):not(button):not(input):not(select):not(textarea) {
color: var(--faq-content-color);
}
/* color & hover color, except for elements */
a:not(.btn):not(.btn-alt) {
color: var(--faq-a-color);
&:hover {
color: var(--faq-a-color-hover);
}
}
p {
margin: 0 0 20px;
padding: 0;
}
.btn,
.btn-alt {
margin: 20px 0;
&.center {
margin: 20px auto;
}
}
}
}
}
}
}
/*===========================================================================*/
/* Modal */
/*===========================================================================*/
/* disable scrolling for main body when modal is active */
html.disable-scroll,
body.disable-scroll {
overflow: hidden;
}
/* adjust for 17px scrollbar width */
html.disable-scroll {
padding: 0 17px 0 0;
}
.off {
pointer-events: none;
cursor: not-allowed;
}
.location-modals {
padding: 0 !important; /* over-ride site CSS, especially for the