/*
Theme Name: Divi ModularityNET Child
Description: A child theme to house custom coding which modifies the
			 Divi parent theme by Elegant Themes. Includes default line
			 numbers where the code was taken from in the parent theme.
Author: Modularity Networks
Author URI: https://www.modularitynet.com/
Template: Divi
Version: 1.0.0
*/

/*
Use "Find/Search" feature to skip ahead to the section you need to ammend or edit
-------------------------------------------------------------------------------------
Contents
————————
- General
- Scrollbars
- Navigation
- Global Buttons
- Forms
- Testimonials
- Homepage
- Internal Pages
- Post Archives
- Single Post Page
- Search Archives
- Miscellaneous
- Footer Area
- Media Queries

-------------------------------------------------------------------------------------
*/

:root {
    /* Colors */
    --accent-primary: #ed1c24;
    --accent-darkprimary: #c0141b;
    --accent-secondary: #1a2435;
    --accent-darkgray: #313a49;
    --accent-input: #2b3544;
    --accent-border: #565d6a;
    --accent-gray: #666666;
    --accent-lightgray: #d1d3d6;
    --accent-lightergray: #e0e0e0;
    --accent-offwhite: #f5f5f5;

    /* Fonts */
    --font-oswald: 'Oswald', Impact;
    --font-source-sans: 'Source Sans 3';
    --font-awesome: "Font Awesome 7 Pro";
    --font-awesome-brands: "Font Awesome 7 Brands";

    /* Transition */
    --transition: all .2s ease 0s;
}

/************************************************************************************
 *
 *			General
 *
 ***********************************************************************************/

body {
    color: var(--accent-gray);
    font-family: var(--font-source-sans), sans-serif;
    font-size: 16px !important;
    font-weight: 400;
    line-height: 1.75em;
}

p {
    font-size: 1.125em;
    font-weight: 400;
}

p:empty {
    display: none;
}

p > a:not(.btn) {
    color: var(--accent-primary);
    font-weight: bold;
}

p > a:not(.btn):is(:hover, :focus) {
    color: var(--accent-secondary);
}

.et_pb_bg_layout_dark p > a:not(.btn):is(:hover, :focus) {
    color: var(--accent-offwhite);
    text-decoration: underline;
}

strong {
    color: var(--accent-secondary);
}

.et_pb_bg_layout_dark strong {
    color: #ffffff;
}

a, a::before, a::after,
.transition, .transition *, svg, svg *,
button, input, textarea, select {
    transition: var(--transition);
}

h1, h2, h3, h4, h5, .heading, .oswald {
    color: var(--accent-secondary);
    font-family: var(--font-oswald), sans-serif;
    font-weight: 700;
    line-height: 1.25em;
    text-transform: uppercase;
}

h1,
.heading.one {
    font-size: 2em;
    line-height: 1.05em;
    padding-bottom: 15px;
}

h2,
.heading.two {
    font-size: 1.25em;
    padding-bottom: 15px;
}

h3,
.heading.three {
    font-size: 1.125em;
    line-height: 1.25em;
    padding-bottom: 15px;
    text-transform: none;
}

h4,
.heading.four {
    font-size: 1em;
    letter-spacing: 1px;
    line-height: 1.25em;
    padding-bottom: 15px;
}

:is(h1, h2, h3, h4):last-child {
    padding-bottom: 0;
}

:is(h1, h2, h3, h4, .heading) strong {
    color: var(--accent-primary);
    font-weight: inherit;
}

:is(p, ul, ol) + :is(h2, h3, h4),
p:last-of-type + :is(ul, ol) {
    padding-top: 25px;
}

:is(table, p:last-of-type, .wp-block-image, .btn-container) + :is(p, h2, h3, h4) {
    padding-top: 40px;
}

.subheader {
    color: var(--accent-lightgray);
    font-size: 1.25em;
    font-weight: 300;
    letter-spacing: 2px;
    line-height: 1.125em;
    padding-bottom: 15px;
    text-transform: uppercase;
}

:is(.et_pb_text, .et_pb_toggle, #single-post-content) :is(ul, ol) {
    list-style-position: outside;
    list-style-type: disc;
    padding: 0 0 1em 1em;
}

:is(.et_pb_text, .et_pb_toggle, #single-post-content) p + :is(ul, ol) {
    padding-top: calc(25px - 1em);
}

:is(.et_pb_text, .et_pb_toggle, #single-post-content) p:not(.has-background):last-of-type + :is(ul, ol) {
    padding-top: 25px;
}

:is(.et_pb_text, .et_pb_toggle, #single-post-content) ol {
    list-style-type: decimal;
}

:is(.et_pb_text, .et_pb_toggle, #single-post-content) :is(ul, ol):last-child {
    padding-bottom: 0;
}

:is(.et_pb_text.et_pb_text_align_center, .et_pb_text.mobile-centered) :is(ul, ol) {
    list-style-position: inside;
}

:where(.et_pb_text, .et_pb_toggle, #single-post-content) li {
    font-size: 1.125em;
    line-height: 1.75rem;
    margin-bottom: 15px;
}

:where(.et_pb_text, .et_pb_toggle, #single-post-content) li:last-of-type {
    margin-bottom: 0;
}

:where(.et_pb_text, .et_pb_toggle, #single-post-content) li::marker {
    color: var(--accent-primary);
}

:where(.et_pb_text, .et_pb_toggle, #single-post-content) li ul {
    list-style-type: circle;
    padding-bottom: 0;
}

:where(.et_pb_text, .et_pb_toggle, #single-post-content) li ol {
    list-style-type: lower-alpha;
    padding-bottom: 0;
}

:where(.et_pb_text, .et_pb_toggle, #single-post-content) li :is(ul, ol) li {
    font-size: inherit;
}

:where(.et_pb_text, .et_pb_toggle, #single-post-content) li > a {
    color: var(--accent-primary);
}

::selection {
    background: var(--accent-darkprimary); /* WebKit/Blink Browsers */
    color: #ffffff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .25);
}

::-moz-selection {
    background: var(--accent-darkprimary); /* Gecko Browsers */
    color: #ffffff;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .25);
}

.divider-line {
    background-color: var(--accent-primary);
    height: 4px;
    margin: 0 auto 25px 0;
    width: 60px;
}

.divider-line:last-child {
    margin-bottom: 0;
}

:where(.mobile-centered, .et_pb_text_align_center) .divider-line {
    margin: 0 auto 25px;
}

.hidden-label {
    position: relative;
}

.hidden-label label {
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

.circle {
    aspect-ratio: 1/1;
    border-radius: 50%;
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.circle * {
    display: block;
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
}

.border-radius-img {
    border-radius: 6px;
    overflow: hidden;
}

.et_pb_bg_layout_dark :is(h1, h2, h3, h4, h5) a {
    color: inherit;
}

.mobile-centered,
.et_pb_module.et_pb_text_align_left.mobile-centered,
.et_pb_module.et_pb_text_align_right.mobile-centered,
.et_pb_text_align_center {
    text-align: center;
}

#lightbox {
    z-index: 100000;
}

#lightboxOverlay {
    z-index: 99999;
}

.lb-nav a.lb-prev {
    background: url(/wp-content/themes/modularity-divi-child/includes/lightbox/images/prev.png) left 48% no-repeat;
}

.lb-nav a.lb-next {
    background: url(/wp-content/themes/modularity-divi-child/includes/lightbox/images/next.png) right 48% no-repeat;
}

.equal-hgt-img {
    position: relative;
}

.equal-hgt-img::after {
    content: "";
    display: block;
    padding-bottom: 56.25%;
}

.equal-hgt-img :is(img, .et_pb_image_wrap),
#page-container #et-boc .equal-hgt-img :is(img, .et_pb_image_wrap) {
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
}

:is(.post-feat-img, .equal-hgt-img).top-aligned img {
    object-position: top;
}

#page-container #et-boc #et-main-area .et_flex_row > .et_flex_column {
    margin: 0;
}

.two-col-img-right > div:first-child {
    order: 1;
}

.mobile-hide {
    display: none;
}

blockquote {
    background: var(--accent-offwhite);
    border-left: 4px solid var(--accent-primary);
    padding: 20px 24px;
    border-radius: 0 6px 6px 0;
    margin: 24px 0;
}

blockquote:last-child {
    margin-bottom: 0;
}

.et_pb_with_background blockquote {
    background-color: #ffffff;
}

.clear {
    clear: both;
}

/************************************************************************************
 *
 *			Scrollbars
 *
 ***********************************************************************************/

/* ---- Webkit Scrollbar ---- */

::-webkit-scrollbar {
    width: auto;
}

::-webkit-scrollbar-track {
    background-color: var(--accent-darkgray);
}

::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, .5);
    border: 2px solid var(--accent-darkgray);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--accent-lightgray);
}

::-webkit-scrollbar-corner {
    background-color: var(--accent-secondary);
}

::-webkit-scrollbar-button:single-button {
    background-color: rgba(255, 255, 255, .5);
    background-repeat: no-repeat;
    background-size: 10px;
    display: block;
}

/* Up */
::-webkit-scrollbar-button:single-button:vertical:decrement {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgba(255, 255, 255, .5)'><polygon points='50,00 0,50 100,50'/></svg>");
    background-position: center 7px;
    background-size: 7px auto;
}

/* Down */
::-webkit-scrollbar-button:single-button:vertical:increment {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgba(255, 255, 255, .5)'><polygon points='0,0 100,0 50,50'/></svg>");
    background-position: center 6px;
    background-size: 7px auto;
}

/* Left */
::-webkit-scrollbar-button:single-button:horizontal:decrement {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgba(255, 255, 255, .5)'><polygon points='0,50 50,100 50,0'/></svg>");
    background-position: 7px center;
    background-size: 7px auto;
}

/* Right */
::-webkit-scrollbar-button:single-button:horizontal:increment {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgba(255, 255, 255, .5)'><polygon points='0,0 0,100 50,50'/></svg>");
    background-position: 6px center;
    background-size: 7px auto;
}

/* ---- Firefox Scrollbar ---- */

* {
    scrollbar-width: auto;
    scrollbar-color: rgba(255, 255, 255, .5) var(--accent-darkgray);
}

/************************************************************************************
 *
 *			Navigation
 *
 ***********************************************************************************/

#et-main-area {
    padding-top: 131px;
}

.et-vb-app-ancestor[data-et-app-view="wireframe"] #et-main-area {
    padding-top: 0;
}

#main-header,
#page-container #et-boc #main-header {
    border-bottom: 3px solid var(--accent-primary);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .1);
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}

.et-vb-app-ancestor #et-boc.et-boc #main-header {
    position: fixed;
}

body.admin-bar #main-header,
body.admin-bar #page-container #et-boc #main-header {
    position: absolute;
    top: 1px;
}

#topbar {
    background-color: var(--accent-secondary);
}

#page-container #tagline {
    display: none;
}

#tagline p {
    color: var(--accent-lightgray);
    font-size: .875em;
    font-style: italic;
}

#company-phone {
    width: 100%;
}

#page-container #company-phone .et_pb_widget {
    margin: 0;
    width: 100%;
}

#company-phone .wp-block-paragraph a {
    font-size: .875rem;
}

#company-phone .wp-block-paragraph a::before {
    content: "\f095";
    font-family: var(--font-awesome);
    font-size: .75em;
    margin-right: 5px;
}

#page-container #company-phone .wp-block-paragraph a:is(:hover, :focus) {
    color: var(--accent-primary);
    text-decoration: none;
}

#page-container #primary-navigation .et_pb_menu_inner_container {
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

#primary-navigation .et_pb_menu__logo-wrap {
    padding: 15px 0;
    width: 50%;
}

#primary-navigation .et_pb_menu__logo {
    margin: 0;
    max-width: 290px;
    width: 100%;
}

#primary-navigation .et-menu {
    gap: 10px 5px;
    margin: 0;
}

#page-container #primary-navigation .et-menu li {
    display: block;
    padding: 0;
}

#page-container #primary-navigation .et-menu li a {
    color: var(--accent-secondary);
    font-family: var(--font-oswald), sans-serif;
    font-size: 3rem;
    letter-spacing: .5px;
    line-height: 1.7em;
    padding: 0;
    text-transform: uppercase;
    transition: var(--transition);
}

#page-container #primary-navigation .mobile_menu_bar::before {
    color: var(--accent-secondary);
}

#page-container #primary-navigation .et_mobile_menu {
    border-top: 10px solid var(--accent-primary);
    left: -25px;
    padding: 25px;
    width: calc(100% + 50px);
}

#page-container #primary-navigation .et_mobile_menu li:not(:last-child) {
    border-bottom: 1px solid var(--accent-offwhite);
    margin-bottom: 10px;
    padding-bottom: 10px;
}

#page-container #primary-navigation .et_mobile_menu li a {
    background-color: transparent;
    border: 0;
    color: var(--accent-secondary);
    font-family: var(--font-oswald), sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .5px;
    padding: 0;
    text-transform: uppercase;
}

#page-container #primary-navigation .et_mobile_menu li.current_page_item a {
    color: var(--accent-primary);
}

#primary-navigation .et_mobile_menu .sub-menu,
#page-container #et-boc #primary-navigation .et_mobile_menu .sub-menu {
    display: none !important;
}

/************************************************************************************
 *
 *			Global Buttons
 *
 ***********************************************************************************/

.btn-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 20px;
    margin-top: 25px;
}

.btn-container:first-child,
:is(h1, h2, h3, h4) + .btn-container {
    margin-top: 0;
}

:is(ul, ol) + .btn-container {
    margin-top: calc(25px - 1em);
}

.mobile-centered .btn-container,
.et_pb_text_align_center-tablet .btn-container,
.et_pb_text_align_center .btn-container {
    justify-content: center;
}

.et_pb_text_align_right .btn-container {
    justify-content: flex-end;
}

.btn, input[type="submit"],
#gallery-pagination a,
#page-container .gform_wrapper .gform_footer button.gform_button,
#post-pagination ul li *, #seo-generator .page-numbers li * {
    background-color: transparent;
    border: 2px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    display: block;
    font-family: var(--font-oswald), sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1.125em;
    padding: 14px 28px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    white-space: normal;
    width: 100%;
}

.primary.btn:not(:hover, :focus),
input[type="submit"],
#gallery-pagination a,
#page-container .gform_wrapper .gform_footer button.gform_button {
    background-color: var(--accent-primary);
    color: #ffffff;
}

.dark.btn:not(:hover, :focus) {
    border-color: var(--accent-secondary);
    color: var(--accent-secondary);
}

.darkfill.btn:not(:hover, :focus) {
    background-color: var(--accent-secondary);
    color: #ffffff;
}

.light.btn:not(:hover, :focus) {
    border-color: #ffffff;
    color: #ffffff;
}

.btn:is(:hover, :focus),
input[type="submit"]:is(:hover, :focus),
#gallery-pagination a:is(:hover, :focus),
#page-container .gform_wrapper .gform_footer button.gform_button:is(:hover, :focus),
#post-pagination ul li a:is(:hover, :focus),
#seo-generator .page-numbers li a:is(:hover, :focus) {
    background-color: var(--accent-offwhite);
    color: var(--accent-secondary);
}

.et_pb_with_background .btn:is(:hover, :focus),
.et_pb_with_background #gallery-pagination a:is(:hover, :focus) {
    background-color: #ffffff;
}

.fullwidth.btn {
    display: block;
    width: 100%;
}

.phone.btn::before {
    content: "\f095";
    font-family: var(--font-awesome);
    font-size: .875em;
    font-weight: bold;
    margin-right: 5px;
}

/************************************************************************************
 *
 *			Forms
 *
 ***********************************************************************************/

/* --- Inputs --- */

#page-container .gform_wrapper ::placeholder {
    color: #5d6570;
    font-size: 1rem;
    opacity: 1;
}

#page-container .gform_wrapper ::-ms-input-placeholder { /* Internet Explorer 10+ and Edge */
    color: #5d6570;
    font-size: 1rem;
    opacity: 1;
}

body.et_divi_theme .gform_wrapper .gfield_label {
    letter-spacing: 1px;
    margin-bottom: 6px;
    text-transform: uppercase;
}

body.et_divi_theme .et_pb_bg_layout_dark .gform_wrapper .gfield_label {
    color: #a6aab1;
}

body.et_divi_theme .gform_wrapper input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]),
body.et_divi_theme .gform_wrapper textarea,
body.et_divi_theme .gform_wrapper select {
    background-color: var(--accent-offwhite);
    border: 1px solid var(--accent-lightergray);
    border-radius: 4px;
    color: var(--accent-secondary);
    font-size: 1rem;
    font-weight: normal;
    height: 47px;
    line-height: 1.5em;
    margin: 0;
    padding: 12px 16px;
    visibility: visible !important;
    -webkit-appearance: none;
}

body.et_divi_theme .et_pb_bg_layout_dark .gform_wrapper input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]),
body.et_divi_theme .et_pb_bg_layout_dark .gform_wrapper textarea,
body.et_divi_theme .et_pb_bg_layout_dark .gform_wrapper select {
    background-color: var(--accent-input);
    border-color: var(--accent-border);
    color: #ffffff;
}

body.et_divi_theme .gform_wrapper .ginput_container_select,
body.et_divi_theme .gform_wrapper .ginput_address_state {
    position: relative;
}

body.et_divi_theme .gform_wrapper .ginput_container_select::after,
body.et_divi_theme .gform_wrapper .ginput_address_state::after {
    border-color: var(--accent-border) transparent transparent transparent;
    border-style: solid;
    border-width: 7px 4px 0 4px;
    /*content: "";*/
    height: 0;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
}

body.et_divi_theme .gform_wrapper select {
    padding: 12px 45px 12px 16px;
}

body.et_divi_theme .gform_wrapper select option {
    background-color: var(--accent-input);
    color: var(--accent-lightgray);
}

body.et_divi_theme .gform_wrapper textarea {
    line-height: 1.125em;
    padding: 14px 16px;
}

body.et_divi_theme .gform_wrapper input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]):focus,
body.et_divi_theme .gform_wrapper textarea:focus,
body.et_divi_theme .gform_wrapper select:focus {
    background-color: var(--accent-lightgray);
    border-color: var(--accent-primary);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .25);
}

body.et_divi_theme .et_pb_bg_layout_dark .gform_wrapper input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]):focus,
body.et_divi_theme .et_pb_bg_layout_dark .gform_wrapper textarea:focus,
body.et_divi_theme .et_pb_bg_layout_dark .gform_wrapper select:focus {
    background-color: var(--accent-darkgray);
}

/* --- Spacing Fixes --- */

.gform_wrapper {
    text-align: left;
}

.gform_wrapper .gform_heading .gform_required_legend {
    display: none;
}

body.et_divi_theme .gform-theme--foundation .gform_fields {
    gap: 16px;
}

body.et_divi_theme .gform_wrapper h4 {
    padding: 10px 0 0;
}

body.et_divi_theme .gform_wrapper .resume-upload {
    margin-bottom: 8px;
}

body.et_divi_theme .gform_wrapper .gform_footer {
    padding-bottom: 0;
    text-align: center;
}

body.et_divi_theme .gform_wrapper .gform_footer input.gform_button {
    margin-bottom: 0;
    width: 100%;
}

body.et_divi_theme .gform_wrapper .ginput_complex span:last-of-type {
    margin-bottom: 0;
}

/************************************************************************************
 *
 *			Testimonials
 *
 ***********************************************************************************/

#testimonial-carousel {
    margin: 0 -12.5px;
}

#testimonial-carousel .et_pb_group_carousel_track {
    align-items: normal;
}

#testimonial-loop-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}

.content-blurb {
    background-color: var(--accent-offwhite);
    border-radius: 8px;
    border-top: 4px solid var(--accent-primary);
    gap: 16px;
    height: 100%;
    padding: 25px;
}

.et_pb_with_background .content-blurb {
    background-color: #ffffff;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .07);
}

.content-blurb .et_pb_blurb_content,
#page-container #et-boc .content-blurb .et_pb_blurb_content {
    max-width: none;
}

.content-blurb p {
    font-size: .875rem;
    line-height: 1.65em;
}

.testimonial {
    width: 100%;
}

#testimonial-carousel .et_pb_group_carousel_slide .testimonial {
    margin: 0 12.5px;
    width: auto;
}

.testimonial .star-rating {
    color: var(--accent-primary);
    font-size: .875em;
}

.testimonial .star-rating > div {
    display: flex;
    gap: 5px 2px;
}

.testimonial-body {
    flex-grow: 1;
}

.testimonial-body p {
    font-size: 1.0625rem;
    font-style: italic;
}

.testimonial-body p:first-child::before {
    content: "\201c"
}

.testimonial-body p:last-child::after {
    content: "\201d"
}

.testimonial-author p {
    color: var(--accent-secondary);
    font-size: 1rem;
    font-weight: bold;
}

.testimonial-author p::before {
    content: "~ ";
}

/************************************************************************************
 *
 *			Homepage
 *
 ***********************************************************************************/

/* ------ Hero ------ */

#homepage-hero h1 {
    padding-bottom: 25px;
}

#homepage-hero ul {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 15px;
    list-style-type: none;
    padding: 0;
}

#homepage-hero ul li {
    align-items: center;
    background-color: var(--accent-primary);
    border-radius: 2px;
    display: flex;
    font-family: var(--font-oswald), sans-serif;
    font-size: .875em;
    gap: 5px;
    letter-spacing: 2px;
    padding: 6px 16px 8px;
    text-transform: uppercase;
}

#homepage-hero ul li::before {
    content: "\f005";
    font-family: var(--font-awesome);
    font-size: .5em;
    font-weight: bold;
}

#homepage-hero ul + .btn-container {
    margin-top: 25px;
}

/* ------- Services ------ */

.post-loop-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
}

.post-loop-wrapper .service {
    background-color: #ffffff;
    border-radius: 6px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .07);
    gap: 0;
    overflow: hidden;
    width: 100%;
}

.post-loop-wrapper .service:is(:hover, :focus) {
    box-shadow: 0 2px 16px rgba(0, 0, 0, .25);
    translate: 0 -5px;
}

.service-meta {
    gap: 14px;
    height: 100%;
    padding: 15px;
}

.service-meta p {
    font-size: .875em;
    line-height: 1.7em;
}

.service-meta .service-excerpt {
    flex-grow: 1;
}

.service-meta .post-meta {
    color: var(--accent-primary);
    font-family: var(--font-oswald), sans-serif;
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 1.25em;
    text-transform: uppercase;
}

/* ------- Service Areas ------ */

#page-container #location-loop-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
}

#page-container #location-loop-wrapper .location {
    background-color: var(--accent-secondary);
    border-radius: 6px;
    border-top: 4px solid var(--accent-primary);
    gap: 5px;
    padding: 25px;
    width: 100%;
}

#location-loop-wrapper .location:is(:hover, :focus) {
    background-color: var(--accent-darkgray);
    translate: 0 -5px;
}

#location-loop-wrapper .location p {
    color: var(--accent-lightgray);
    font-size: .875em;
}

/* ------- Service Areas ------ */

#page-container #call-to-action .et_pb_widget {
    margin: 0;
    width: 100%;
}

#call-to-action .et_pb_widget p {
    font-size: 2.25rem;
    letter-spacing: 2px;
    line-height: 1.25em;
}

/************************************************************************************
 *
 *			Internal Pages
 *
 ***********************************************************************************/

/* ------ Breadcrumbs ------ */

#breadcrumbs {
    color: var(--accent-lightgray);
    font-size: .875em;
}

#breadcrumbs nav {
    text-align: center;
}

#breadcrumbs a {
    color: var(--accent-primary);
}

#breadcrumbs a:is(:hover, :focus) {
    color: #ffffff;
    text-decoration: underline;
}

/* ------ Gallery ------ */

#page-container #gallery .et_post_gallery {
    flex-direction: row;
}

#page-container #gallery .et_post_gallery::after {
    content: none;
}

#gallery .et_post_gallery .et_pb_gallery_item {
    width: 100%;
}

#gallery .et_post_gallery .et_pb_gallery_image {
    height: 100%;
}

#gallery .et_post_gallery .et_pb_gallery_image a {
    border-radius: 4px;
    display: block;
    height: 100%;
    overflow: hidden;
}

#gallery .et_post_gallery .et_pb_gallery_image img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

#gallery .et_post_gallery .et_pb_gallery_image a .et_overlay {
    border-radius: 4px;
}

/* ------ FAQs ------ */

#page-container #faqs .et_pb_accordion_item {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid var(--accent-lightergray);
    padding: 0 0 25px;
}

#page-container #faqs .et_pb_accordion_item .et_pb_toggle_title {
    color: var(--accent-secondary);
    font-size: 1.125em;
}

#page-container #faqs .et_pb_accordion_item .et_pb_toggle_title::before {
    color: var(--accent-primary);
    content: "\f078";
    font-family: var(--font-awesome), sans-serif !important;
}

#page-container #faqs .et_pb_accordion_item .et_pb_toggle_content {
    padding-top: 12px;
}

#page-container #faqs .et_pb_accordion_item .et_pb_toggle_content p {
    font-size: 1rem;
}

/* ------ Services ------ */

#services-landing .et_pb_row:not(:last-child) {
    border-bottom: 1px solid var(--accent-lightgray);
}

/* ------ Contact ------ */

#contact-page-body h3 {
    font-size: 1.5em;
}

#contact-page-body blockquote {
    border: 0;
    border-radius: 8px;
    padding: 25px;
}

#contact-page-body ul {
    column-count: 2;
    list-style-type: none;
    padding: 0;
}

#contact-page-body ul li {
    break-inside: avoid;
    font-size: .875em;
    margin-bottom: 6px;
}

#contact-page-body blockquote ul {
    column-count: 1;
}

#contact-page-body blockquote ul li {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.125em;
    gap: 14px;
    margin-bottom: 15px;
}

#contact-page-body blockquote ul li:last-child {
    margin-bottom: 0;
}

#contact-page-body blockquote ul li strong {
    width: 110px;
}

#contact-form-wrapper h3 {
    padding-bottom: 25px;
}

#contact-form-wrapper {
    background-color: var(--accent-secondary);
    border-radius: 8px;
    padding: 25px;
}

/************************************************************************************
 *
 *			Single Service Page
 *
 ***********************************************************************************/

#page-container .service-specialty-list ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style-type: none;
    padding: 0;
}

.service-specialty-list ul li {
    border-bottom: 1px solid var(--accent-lightergray);
    font-size: 1rem;
    margin: 0;
    padding: 0 0 10px 25px;
    position: relative;
}

.service-specialty-list ul li::before {
    color: var(--accent-primary);
    content: "\2023";
    font-size: 1.5em;
    position: absolute;
    left: 0;
    top: 0;
}

/************************************************************************************
 *
 *			Single Location Page
 *
 ***********************************************************************************/

#hero-form-cta {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
    padding: 25px;
}

#hero-form-cta h3 {
    padding-bottom: 5px;
    text-align: left;
}

#hero-form-cta h3 + p {
    display: none;
}

#hero-form-cta p {
    font-size: .875em;
    line-height: 1.5em;
}

#hero-form-cta .gform_description {
    padding-bottom: 18px;
}

#hero-form-cta .gform_wrapper {
    margin-bottom: 15px;
}

#why-choose-us ul {
    list-style-type: none;
    padding-left: 0;
}

#why-choose-us ul li {
    padding-left: 50px;
    position: relative;
}

#why-choose-us ul li::before {
    aspect-ratio: 1/1;
    background-color: var(--accent-primary);
    border-radius: 50%;
    color: #ffffff;
    content: "\f005";
    display: flex;
    flex-direction: column;
    font-family: var(--font-awesome);
    font-size: .7em;
    font-weight: bold;
    justify-content: center;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 30px;
}

#process .et_pb_row:has(.content-blurb) {
    counter-reset: blurb-counter;
}

#process .content-blurb .et_pb_module_header {
    align-items: flex-start;
    counter-increment: blurb-counter;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#process .content-blurb .et_pb_module_header::before {
    aspect-ratio: 1/1;
    background-color: var(--accent-secondary);
    border-radius: 50%;
    color: #ffffff;
    content: counter(blurb-counter);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    width: 34px;
}

.signs-list {
    background-color: #ffffff;
    border: 1px solid var(--accent-lightergray);
    border-radius: 8px;
    padding: 18px;
}

#page-container .signs-list:is(.et_pb_text, .et_pb_toggle, #single-post-content) ul {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style-type: none;
    padding: 0;
}

.signs-list:is(.et_pb_text, .et_pb_toggle, #single-post-content) ul li {
    border-bottom: 1px solid var(--accent-lightergray);
    margin: 0;
    padding: 0 0 12px 44px;
    position: relative;
}

.signs-list:is(.et_pb_text, .et_pb_toggle, #single-post-content) ul li:last-child {
    border: 0;
    padding-bottom: 0;
}

.signs-list:is(.et_pb_text, .et_pb_toggle, #single-post-content) ul li::before {
    aspect-ratio: 1/1;
    background-color: rgba(237, 28, 36, .1);
    border-radius: 50%;
    color: var(--accent-primary);
    content: "\f071";
    display: flex;
    flex-direction: column;
    font-family: var(--font-awesome);
    font-size: .75em;
    font-weight: 300;
    justify-content: center;
    left: 0;
    position: absolute;
    text-align: center;
    width: 30px;
}

/************************************************************************************
 *
 *			Gallery Archives
 *
 ***********************************************************************************/

/* ------ Job Sites ------ */

#job-sites .post-loop-wrapper .service {
    background-color: var(--accent-secondary);
    box-shadow: none;
}

#job-sites .post-loop-wrapper .service h3 {
    color: #ffffff;
}

#job-sites .post-loop-wrapper .service p {
    color: var(--accent-lightgray);
}

/* ------ Gallery Loop ------ */

#photo-gallery .et_pb_column {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}

#photo-gallery .et_pb_column .et_pb_module {
    border-radius: 4px;
    overflow: hidden;
    width: 100%;
}

#gallery-pagination:not(:empty) {
    margin-top: 40px;
}

#gallery-pagination a {
    align-items: center;
    color: #ffffff !important;
    display: flex;
    gap: 5px;
    justify-content: center;
}

#gallery-pagination a:is(:hover, :focus) {
    color: var(--accent-secondary) !important;
}

#gallery-pagination a::before,
#gallery-pagination a::after {
    font-family: var(--font-awesome);
}

#gallery-pagination .nav-previous a::before {
    content: "\f177";
}

#gallery-pagination .nav-next a::after {
    content: "\f178";
}

#gallery-pagination a * {
    color: inherit !important;
}

#gallery-pagination a .meta-nav {
    display: none;
}

/************************************************************************************
 *
 *			Post Archives
 *
 ***********************************************************************************/

#archive-main-area {
    flex-grow: 1;
    width: 100%;
}

.post-loop-item:not(:last-child) {
    border-bottom: 1px solid var(--accent-lightergray);
    padding-bottom: 40px;
}

#post-loop-wrapper .post-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    list-style-type: none;
    padding: 0;
}

#post-loop-wrapper .post-categories a {
    background-color: var(--accent-primary);
    border-radius: 2px;
    color: #ffffff;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 1em;
    padding: 6px 10px 4px;
    text-transform: uppercase;
}

#post-loop-wrapper .post-categories a:is(:hover, :focus) {
    background-color: var(--accent-offwhite);
    color: var(--accent-secondary);
}

.post-date {
    font-size: .75em;
}

.post-loop-header h2 {
    font-size: 1.625em;
    text-transform: none;
}

.post-loop-header h2:is(:hover, :focus) {
    color: var(--accent-primary);
}

.post-feat-img {
    aspect-ratio: 16/9;
    position: relative;
}

.post-feat-img:empty {
    background: linear-gradient(45deg, var(--accent-secondary), var(--accent-darkgray));
}

.post-feat-img::before {
    background: url("/wp-content/uploads/2026/08/logo-white.webp") no-repeat center;
    background-size: 75%;
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.post-feat-img :is(img, .et_pb_image_wrap) {
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
}

.post-link {
    align-items: center;
    color: var(--accent-primary);
    display: flex;
    gap: 5px;
}

.post-link::after {
    content: "\f178";
    font-family: var(--font-awesome);
    font-size: .875em;
}

.post-link:is(:hover, :focus) {
    color: var(--accent-secondary);
}

#post-archive-wrapper .service:not(:hover, :focus) {
    box-shadow: none;
}

#post-archive-wrapper .service .service-meta {
    background-color: var(--accent-offwhite);
}

#post-archive-wrapper .service:is(:hover, :focus) .service-meta {
    background-color: #ffffff;
}

    /* ------ Sidebar ------ */

#sidebar {
    padding: 0;
}

#sidebar .et_pb_widget_area::after {
    content: none;
}

#sidebar .et_pb_widget {
    background-color: var(--accent-offwhite);
    border-radius: 6px;
    display: block;
    margin: 0;
    padding: 15px;
    width: 100%;
}

#sidebar .et_pb_widget :is(.widgettitle, .wp-block-heading) {
    border-bottom: 2px solid var(--accent-primary);
    font-size: 1rem;
    letter-spacing: 1px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    text-transform: uppercase;
}

#sidebar .et_pb_widget ul li {
    border-bottom: 1px solid var(--accent-lightergray);
    font-size: .875em;
    line-height: 1.7em;
    margin-bottom: 8px;
    padding-bottom: 8px;
}

#sidebar .et_pb_widget ul li:last-child {
    border: 0;
    margin: 0;
    padding: 0;
}

#sidebar .et_pb_widget p {
    font-size: .875rem;
}

#sidebar .et_pb_widget ul li a {
    color: var(--accent-secondary);
}

#sidebar .et_pb_widget ul li a:is(:hover, :focus) {
    color: var(--accent-primary);
}

#sidebar :is(#block-15, #block-18) {
    background-color: var(--accent-secondary);
}

#sidebar :is(#block-15, #block-18) .widgettitle {
    color: #ffffff;
}

#sidebar :is(#block-15, #block-18) p {
    color: var(--accent-lightgray);
}

#sidebar :is(#block-15, #block-18) .btn:is(:hover, :focus) {
    color: var(--accent-secondary);
}

/************************************************************************************
 *
 *			Single Post Page
 *
 ***********************************************************************************/

#single-post-content h2 {
    text-transform: none;
}

#single-post-content p:not(:last-child) {
    padding-bottom: 1em;
}

#single-post-content .post-feat-img {
    background: none;
}

#single-post-content .post-feat-img::before {
    content: none;
}

#single-post-content .wp-block-image {
    aspect-ratio: 16/9;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

#single-post-content .wp-block-image * {
    height: 100%;
    left: 0;
    object-fit: cover;
    position: absolute;
    top: 0;
    width: 100%;
}

#single-post-content table {
    border: 0;
    display: block;
    margin: 0;
    overflow-x: scroll;
}

#single-post-content table :is(thead, tbody) {
    display: table;
    width: 100%;
}

#single-post-content table tr,
#single-post-content :where(th, td) {
    border: 1px solid #000000;
    padding: 10px;
}

#single-post-content table p:last-of-type {
    padding-bottom: 0;
}

#single-post-content table tr:nth-of-type(odd) td {
    background-color: rgba(255, 255, 255, .1);
}

#single-post-content table tr:first-of-type :is(th, td) {
    background: var(--accent-primary) linear-gradient(var(--accent-primary), var(--accent-secondary));
    color: #ffffff;
    font-weight: bold;
    text-transform: uppercase;
}

#single-post-content table thead + tbody tr:first-of-type :is(th, td) {
    background-color: transparent;
}

#single-post-content .subheader {
    padding-bottom: 20px;
}

#single-post-content .call-to-action + :is(h2, h3) {
    padding-top: 25px;
}

#single-post-content a:not(.btn) {
    color: var(--accent-primary);
    font-weight: bold;
}

#single-post-content a:not(.btn):is(:hover, :focus) {
    color: var(--accent-secondary);
}

#single-post-content ol {
    list-style-type: decimal;
    padding: 0 0 25px 1em;
}

#single-post-content ol::marker {
    font-weight: bold;
}

#single-post-content :is(.post-feat-img, #video-embed) {
    background: none;
    line-height: 0;
    margin-bottom: 50px;
    overflow: hidden;
    padding: 0;
}

#single-post-content #video-embed .fluid-width-video-wrapper {
    margin: 0;
}

#single-post-content .post-feat-img:last-child {
    margin-bottom: 0;
}

#single-post-content .fluid-width-video-wrapper {
    margin-bottom: 15px;
}

#page-container #single-post-content .wp-block-gallery {
    gap: 10px;
}

#page-container #single-post-content .wp-block-gallery .wp-block-image:not(#individual-image) {
    flex-grow: 0;
    width: calc(33.33% - 6.67px);
}

#single-post-content .gform_wrapper,
#single-post-content .gform_wrapper :is(.gform_heading, .gform_body ul, .ginput_complex) {
    margin: 0;
    padding: 0;
}

#single-post-content .gform_wrapper .ginput_complex :is(input[type="text"], select) {
    margin: 16px 0 0;
}

/************************************************************************************
 *
 *			Search Archives
 *
 ***********************************************************************************/

/************************************************************************************
 *
 *			Miscellaneous
 *
 ***********************************************************************************/

/************************************************************************************
 *
 *			Footer Area
 *
 ***********************************************************************************/

#page-container #footer-widgets .et_pb_widget {
    margin: 0;
    width: 100%;
}

#footer-widgets .et_pb_widget_area::after {
    content: none;
}

#footer-widgets .et_pb_widget .wp-block-heading {
    border-bottom: 2px solid var(--accent-primary);
    font-size: 1em;
    letter-spacing: 1px;
    padding-bottom: 10px;
    text-transform: uppercase;
}

#footer-widgets .et_pb_widget ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#page-container #footer-widgets .et_pb_widget :is(p, li) {
    color: var(--accent-lightergray);
    font-size: .875em;
    line-height: 1.7em;
    margin: 0;
}

#page-container #footer-widgets .et_pb_widget a:not(.wp-block-social-link-anchor):is(:hover, :focus) {
    color: var(--accent-primary);
}

#footer-widgets .et_pb_widget .wp-block-social-links {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
}

#footer-widgets .et_pb_widget .wp-block-social-links li {
    background-color: transparent;
    border-radius: 0;
    transform: none;
}

#footer-widgets .et_pb_widget .wp-block-social-links li a {
    aspect-ratio: 1/1;
    background-color: var(--accent-darkgray);
    border-radius: 50%;
    display: flex;
    font-size: 1.5rem;
    justify-content: center;
    padding: 0;
    width: 36px;
}

#footer-widgets .et_pb_widget .wp-block-social-links li a:is(:hover, :focus) {
    background-color: var(--accent-primary);
}

#footer-bar {
    border-top: 1px solid var(--accent-darkgray);
    color: var(--accent-lightergray);
    font-size: .875em;
}

#footer-bar a {
    color: var(--accent-primary);
}

#footer-bar a:is(:hover, :focus) {
    color: #ffffff;
}

/************************************************************************************
 *
 *			Media Queries
 *
 ***********************************************************************************/

@media screen and (min-width: 450px) {

    h1,
    .heading.one {
        font-size: 2.25em;
    }

    h2,
    .heading.two,
    #single-post-content h2 {
        font-size: 1.5em;
    }

    h3,
    .heading.three {
        font-size: 1.25em;
    }

    .btn, input[type="submit"], #post-pagination a {
        display: inline-block;
        width: auto;
    }

    .testimonial,
    .post-loop-wrapper .service,
    #post-archive-wrapper .service,
    #page-container #location-loop-wrapper .location,
    #photo-gallery .et_pb_column .et_pb_module,
    #gallery .et_post_gallery .et_pb_gallery_item {
        width: calc(50% - 12.5px);
    }

    #sidebar .et_pb_widget {
        padding: 25px;
    }

}

@media screen and (min-width: 641px) {

    #page-container #tagline {
        display: block;
    }

    #company-phone {
        width: min-content;
    }

    #contact-page-body blockquote {
        padding: 32px;
    }

    #contact-form-wrapper {
        padding: 40px;
    }

}

@media screen and (min-width: 768px) {

    h1,
    .heading.one {
        font-size: 2.625em;
    }

    h2,
    .heading.two {
        font-size: 2.25em;
    }

    .testimonial,
    .post-loop-wrapper .service,
    #photo-gallery .et_pb_column .et_pb_module,
    #gallery .et_post_gallery .et_pb_gallery_item {
        width: calc(33.33% - 16.67px);
    }

}

@media screen and (min-width: 981px) {

    /* ----------------------------- General ------------------------------ */

    h1,
    .heading.one {
        font-size: 3.25em;
    }

    .et_pb_text ul,
    #single-post-content ul {
        list-style-position: outside;
        padding-left: 1em;
    }

    .mobile-centered,
    .et_pb_module.et_pb_text_align_left.mobile-centered {
        text-align: left;
    }

    .mobile-centered.right-aligned,
    .et_pb_module.et_pb_text_align_right.mobile-centered {
        text-align: right;
    }

    .mobile-centered .btn-container,
    .et_pb_text_align_center-tablet .btn-container {
        justify-content: flex-start;
    }

    .mobile-centered.right-aligned .btn-container {
        justify-content: flex-end;
    }

    .et_pb_text.mobile-centered :is(ul, ol) {
        list-style-position: outside;
    }

    .mobile-centered .divider-line {
        margin: 0 auto 25px 0;
    }

    .mobile-centered.right-aligned .divider-line {
        margin: 0 0 25px auto;
    }

    .equal-hgt-col {
        display: flex;
        overflow: hidden;
    }

    .equal-hgt-img {
        height: 100%;
    }

    .vert-center {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
    }

    .two-col-img-right > div:first-child {
        order: 0;
    }

    .desktop-hide {
        display: none;
    }

    .mobile-hide {
        display: block;
    }

    /* ----------------------------- Navigation ------------------------------ */

    body.admin-bar #main-header,
    body.admin-bar #page-container #et-boc #main-header {
        position: fixed;
        top: 32px;
    }

    #primary-navigation .et_pb_menu__logo-wrap {
        width: 25%;
    }

    #page-container #primary-navigation .et-menu {
        align-items: center;
        margin: 0;
    }

    #page-container #primary-navigation .et-menu li a {
        border-radius: 4px;
        font-size: .9375rem;
        padding: 10px 14px;
    }

    #page-container #primary-navigation .et-menu li.current_page_item > a {
        box-shadow: inset 0 -3px 0 var(--accent-primary);
        color: var(--accent-primary);
        opacity: 1;
    }

    #page-container #primary-navigation .et-menu li.request-quote {
        margin-left: 5px;
    }

    #page-container #primary-navigation .et-menu li.request-quote a {
        background-color: var(--accent-primary);
        box-shadow: none;
        color: #ffffff;
        letter-spacing: 1px;
        padding: 10px 20px;
    }

    #page-container #primary-navigation .et-menu li:not(.current_page_item) a:is(:hover, :focus) {
        background-color: var(--accent-offwhite);
        color: var(--accent-secondary);
        opacity: 1;
    }

    #page-container #primary-navigation .et-menu li.menu-item-has-children a {
        padding-right: 20px;
    }

    #page-container #primary-navigation .et-menu > li > .sub-menu {
        background-color: var(--accent-secondary);
        border-color: var(--accent-primary);
        border-radius: 0 0 4px 4px;
        display: flex;
        flex-direction: column;
        padding: 5px;
    }

    #page-container #primary-navigation .et-menu > li > .sub-menu a {
        color: #ffffff;
        display: block;
        line-height: 1.5em;
        padding: 6px 10px;
        width: 100%;
    }

    #page-container #primary-navigation .et-menu > li > .sub-menu a:is(:hover, :focus) {
        background-color: var(--accent-input);
        color: #ffffff;
    }

    /* ----------------------------- Homepage ------------------------------ */

    #homepage-hero ul {
        align-items: flex-start;
    }

    .post-loop-wrapper .service,
    #page-container #location-loop-wrapper .location,
    #gallery.four-col-gallery .et_post_gallery .et_pb_gallery_item {
        width: calc(25% - 18.75px);
    }

    /* ----------------------------- Internal Pages ------------------------------ */

    /* ----------------------------- Single Location Page ------------------------------ */

    body.single-locations #homepage-hero .et_pb_column:first-child {
        flex-grow: 1;
    }

    body.single-locations #homepage-hero .et_pb_column:last-child {
        max-width: 450px;
    }

    /* ----------------------------- Post Archives ------------------------------ */

    #archive-main-area {
        width: calc(66.6667% - var(--horizontal-gap-parent, 5.5%)*0.5/1.5);
    }

    #sidebar {
        max-width: 300px;
        width: calc(33.3333% - var(--horizontal-gap-parent, 5.5%)*2/3);
    }

    /* ----------------------------- Single Post Page ------------------------------ */

    /* ----------------------------- Search Archives ------------------------------ */

    /* ----------------------------- Footer Area ------------------------------ */

}

@media screen and (min-width: 1059px) {



}

@media screen and (min-width: 1280px) {

    #services-loop .service,
    #page-container #location-loop-wrapper .location {
        width: calc(20% - 20px);
    }

}