/* =========================================================
GLOBAL RESET
========================================================= */

html,
body {
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
overflow-x: hidden;
}

*,
*::before,
*::after {
box-sizing: border-box;
}

section {
margin: 0;
}

/* =========================================================
PUBLIC CONTENT - FULL WIDTH
========================================================= */

main.public-content {
display: block !important;


width: 100% !important;
max-width: none !important;

margin: 0 !important;
padding: 0 !important;

overflow-x: hidden !important;


}

main.public-content > #heroSlider {
display: block !important;


width: 100% !important;
max-width: none !important;

margin: 0 !important;
padding: 0 !important;


}

/* =========================================================
HOMEPAGE HERO SLIDER
========================================================= */

#heroSlider {
position: relative !important;


display: block !important;

width: 100% !important;
max-width: 100% !important;

height: 800px !important;
min-height: 800px !important;
max-height: 800px !important;

margin: 0 !important;
padding: 0 !important;

overflow: hidden !important;

background: #000 !important;


}

#heroSlider .carousel-inner {
position: relative !important;


width: 100% !important;
max-width: 100% !important;

height: 800px !important;
min-height: 800px !important;
max-height: 800px !important;

margin: 0 !important;
padding: 0 !important;

overflow: hidden !important;


}

#heroSlider .carousel-item {
position: absolute !important;


top: 0 !important;
left: 0 !important;

width: 100% !important;
height: 800px !important;

margin: 0 !important;
padding: 0 !important;

display: block !important;

visibility: hidden !important;
opacity: 0 !important;

z-index: 1 !important;

overflow: hidden !important;

transition: opacity .6s ease-in-out !important;


}

#heroSlider .carousel-item.active {
visibility: visible !important;
opacity: 1 !important;
z-index: 2 !important;
}

/* =========================================================
HERO IMAGE
========================================================= */

#heroSlider {
position: relative !important;
width: 100% !important;
height: auto !important;
min-height: 100% !important;
overflow: hidden !important;
}

#heroSlider .hero-image {
position: absolute !important;


top: 0 !important;
left: 0 !important;

width: 100% !important;
height: 100% !important;

min-width: 100% !important;
min-height: 100% !important;

max-width: none !important;
max-height: none !important;

margin: 0 !important;
padding: 0 !important;

display: block !important;

transform: none !important;

object-position: center center !important;

z-index: 1 !important;


}



/* =========================================================
HERO OVERLAY
========================================================= */

#heroSlider .hero-overlay {
position: absolute !important;


top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;

width: 100% !important;
height: 100% !important;

margin: 0 !important;
padding: 30px !important;

display: flex !important;

align-items: center !important;
justify-content: center !important;

box-sizing: border-box !important;

background: rgba(0, 0, 0, .28) !important;

z-index: 3 !important;


}

#heroSlider .hero-content {
width: 100% !important;
max-width: 1000px !important;


margin: 0 auto !important;
padding: 0 !important;

color: #fff !important;

text-align: center !important;


}

#heroSlider .hero-content h1 {
margin: 0 0 20px !important;


color: #fff !important;

font-size: 56px;
line-height: 1.15;
font-weight: 700;


}

#heroSlider .hero-content p {
margin: 0 0 30px !important;


color: #fff !important;

font-size: 22px;
line-height: 1.5;


}

#heroSlider .hero-button {
display: inline-block !important;


padding: 13px 30px !important;

color: #fff !important;
background: #222 !important;

border: 1px solid #fff !important;

text-decoration: none !important;

transition:
    color .25s ease,
    background-color .25s ease !important;


}

#heroSlider .hero-button:hover {
color: #222 !important;
background: #fff !important;
}

/* =========================================================
HERO INDICATORS
========================================================= */

#heroSlider .carousel-indicators {
position: absolute !important;


right: 0 !important;
bottom: 0 !important;
left: 0 !important;

z-index: 10 !important;

display: flex !important;

justify-content: center !important;

padding: 0 !important;
margin: 0 0 20px !important;


}

#heroSlider .carousel-indicators button {
width: 45px !important;
height: 5px !important;


margin: 0 5px !important;
padding: 0 !important;

border: 0 !important;
border-radius: 0 !important;

background-color: #555 !important;

opacity: 1 !important;

cursor: pointer !important;


}

#heroSlider .carousel-indicators button.active {
background-color: #fff !important;
}

/* =========================================================
ART & MIRROR HANGING
========================================================= */

#artMirrorHanging {
width: 100%;
padding: 80px 0;
background: #fff;
}

#artMirrorHanging .section-image {
width: 100%;
display: block;
}

#artMirrorHanging h2 {
margin: 0 0 20px;


font-size: 42px;
line-height: 1.2;
font-weight: 700;


}

#artMirrorHanging p {
margin: 0 0 25px;


font-size: 18px;
line-height: 1.7;


}

#artMirrorHanging .learn-more {
display: inline-block;


padding: 12px 25px;

color: #fff;
background: #222;

text-decoration: none;


}

/* =========================================================
PROFESSIONAL ART & MIRROR HANGING
========================================================= */

#professionalHanging {
position: relative;


width: 100%;
min-height: 600px;

display: flex;

align-items: center;
justify-content: center;

text-align: center;

background:
    url('https://spiershanging.com/home/view/14')
    center center / cover no-repeat;

background-attachment: fixed !important;


}

#professionalHanging::before {
content: "";


position: absolute;

inset: 0;

background: rgba(0, 0, 0, .35);

z-index: 1;


}

#professionalHanging .container {
position: relative;
z-index: 2;
}

#professionalHanging h2 {
margin: 0 0 20px;


color: #fff;

font-size: 48px;
line-height: 1.2;
font-weight: 700;


}

#professionalHanging p {
margin: 0 0 30px;


color: #fff;

font-size: 22px;


}

#professionalHanging .section-button {
display: inline-block;


padding: 13px 30px;

color: #222;
background: #fff;

text-decoration: none;


}

/* =========================================================
WHY CHOOSE
========================================================= */

#whyChoose {
width: 100%;


padding: 80px 0;

background: #fff;


}

#whyChoose .section-image {
width: 100%;
display: block;
}

#whyChoose h2 {
margin: 0 0 20px;


font-size: 42px;
line-height: 1.2;
font-weight: 700;


}

#whyChoose p {
font-size: 18px;
line-height: 1.7;
}

/* =========================================================
CONSULTATIONS
========================================================= */

#consultations {
width: 100%;


padding: 80px 0;

background: #2f2c27;


}

#consultations .section-image {
width: 100%;
display: block;
}

#consultations h2 {
margin: 0 0 20px;


color: #fff;

font-size: 42px;
line-height: 1.2;
font-weight: 700;


}

#consultations p {
color: #fff;


font-size: 18px;
line-height: 1.7;


}

/* =========================================================
PROFESSIONAL GALLERY
========================================================= */

#professionalGallery {
width: 100%;


padding: 80px 0;

background: #fff;


}

#professionalGallery .gallery-heading {
max-width: 900px;


margin: 0 auto 45px;

text-align: center;


}

#professionalGallery .gallery-heading h2 {
margin: 0 0 15px;


font-size: 42px;
line-height: 1.2;
font-weight: 700;


}

#professionalGallery .gallery-heading p {
margin: 0;


font-size: 18px;
line-height: 1.7;


}

#professionalGallery .gallery-card {
height: 100%;


overflow: hidden;

cursor: pointer;

border: 0;
border-radius: 4px;

background: #fff;

box-shadow: 0 5px 18px rgba(0, 0, 0, .12);


}

#professionalGallery .gallery-card-image {
height: 240px;
overflow: hidden;
}

#professionalGallery .gallery-card-image img {
width: 100%;
height: 100%;


display: block;

object-fit: cover;
object-position: center center;

transition: transform .3s ease;


}

#professionalGallery .gallery-card:hover img {
transform: scale(1.04);
}

#professionalGallery .gallery-card-body {
padding: 18px 15px;


text-align: center;


}

#professionalGallery .gallery-card-title {
margin: 0;


font-size: 18px;
line-height: 1.4;
font-weight: 600;


}

/* =========================================================
GALLERY POPUP
========================================================= */

#professionalGalleryPopup {
position: fixed;


inset: 0;

z-index: 99999;

display: none;

align-items: center;
justify-content: center;

padding: 30px;

background: rgba(0, 0, 0, .92);


}

#professionalGalleryPopup.active {
display: flex;
}

#professionalGalleryPopup .professional-gallery-popup-inner {
position: relative;


width: 100%;
max-width: 1200px;
max-height: 90vh;

text-align: center;


}

#professionalGalleryPopupImage {
display: block;


width: auto;
max-width: 100%;

height: auto;
max-height: 72vh;

margin: 0 auto;


}

#professionalGalleryPopupTitle {
margin: 20px 0 8px;


color: #fff;

font-size: 26px;
line-height: 1.3;


}

#professionalGalleryPopupDescription {
max-width: 800px;


margin: 0 auto;

color: #fff;

font-size: 16px;
line-height: 1.6;


}

.professional-gallery-close,
.professional-gallery-prev,
.professional-gallery-next {
position: absolute;


z-index: 5;

width: 45px;
height: 45px;

border: 0;
border-radius: 50%;

color: #fff;
background: rgba(255, 255, 255, .18);

cursor: pointer;


}

.professional-gallery-close {
top: 20px;
right: 20px;


font-size: 28px;


}

.professional-gallery-prev {
top: 50%;
left: 20px;


transform: translateY(-50%);

font-size: 30px;


}

.professional-gallery-next {
top: 50%;
right: 20px;


transform: translateY(-50%);

font-size: 30px;


}

/* =========================================================
OUR CLIENTS
========================================================= */

#clients {
position: relative;


width: 100%;
min-height: 600px;

display: flex;

align-items: center;
justify-content: center;

text-align: center;

background:
    url('https://spiershanging.com/home/view/35')
    center center / cover no-repeat;

background-attachment: fixed !important;


}

#clients .clients-heading {
max-width: 900px;


margin: 0 auto 45px;

text-align: center;


}

#clients .clients-heading h2 {
margin: 0 0 20px;


color: #fff;

font-size: 42px;
line-height: 1.2;
font-weight: 700;


}

#clients .clients-heading p {
margin: 0;


color: #fff;

font-size: 18px;
line-height: 1.7;


}

#clients .row {
align-items: stretch;
}

#clients .row > [class*="col-"] {
display: flex;
}

#clients .client-card {
width: 100%;
height: 100%;


min-height: 230px;

display: flex;
flex-direction: column;

overflow: hidden;

border: 0;
border-radius: 6px;

background: #fff;

box-shadow: 0 6px 22px rgba(0, 0, 0, .18);

transition:
    transform .25s ease,
    box-shadow .25s ease;


}

#clients .client-card:hover {
transform: translateY(-5px);


box-shadow: 0 12px 30px rgba(0, 0, 0, .25);


}

#clients .client-card-image {
width: 100%;


height: 140px;
min-height: 140px;
max-height: 140px;

flex: 0 0 140px;

display: flex;

align-items: center;
justify-content: center;

padding: 16px;

overflow: hidden;

background: #fff;


}

#clients .client-card-image img {
display: block;


width: 166px !important;
height: 108px !important;

min-width: 166px !important;
min-height: 108px !important;

max-width: 166px !important;
max-height: 108px !important;

margin: 0 !important;
padding: 0 !important;

flex: 0 0 166px;

object-fit: fill !important;
object-position: center center !important;


}

#clients .client-card-body {
flex: 1 1 auto;


min-height: 80px;

display: flex;

align-items: center;
justify-content: center;

padding: 18px 15px;

text-align: center;

background: #fff;


}

#clients .client-card-title {
width: 100%;


margin: 0;

color: #222;

font-size: 18px;
line-height: 1.35;
font-weight: 600;

text-align: center;


}

/* =========================================================
ABOUT + CONTACT GLOBAL
========================================================= */

.about-page,
.contact-page {
width: 100%;


margin: 0;
padding: 0;

overflow-x: hidden;


}

.about-page *,
.about-page *::before,
.about-page *::after,
.contact-page *,
.contact-page *::before,
.contact-page *::after {
box-sizing: border-box;
}

/* =========================================================
PAGE HERO
========================================================= */

#pageHero {
position: relative;


width: 100%;
height: 800px;

margin: 0;
padding: 0;

overflow: hidden;

background: #222;


}

#pageHero .page-hero-image {
position: absolute;


top: 0;
left: 0;

width: 100%;
height: 100%;

margin: 0;
padding: 0;

display: block;

object-fit: cover;
object-position: center center;

z-index: 1;


}

#pageHero .page-hero-overlay {
position: absolute;


inset: 0;

width: 100%;
height: 100%;

background: rgba(0, 0, 0, .30);

z-index: 2;


}

#pageHero .page-hero-content {
position: absolute;


inset: 0;

width: 100%;
height: 100%;

display: flex;

align-items: center;
justify-content: center;

z-index: 3;

padding: 30px;

text-align: center;


}

#pageHero .page-hero-content .container {
width: 100%;
max-width: 1140px;
}

#pageHero .page-hero-title {
margin: 0;


color: #fff;

font-size: 56px;
line-height: 1.15;
font-weight: 700;

text-align: center;


}

/* =========================================================
ABOUT CONTENT
========================================================= */

.about-page article {
width: 100%;


margin: 0;

padding-top: 70px;
padding-bottom: 70px;

background: #fff;


}

.about-page article .container {
width: 100%;
max-width: 1140px;


margin: 0 auto;

text-align: left;


}

.about-page article .row {
margin-left: 0;
margin-right: 0;
}

.about-page article .col-lg-9 {
font-size: 18px;
line-height: 1.75;


color: #555;

text-align: left;


}

.about-page article h2 {
margin-top: 0;
margin-bottom: 30px;


color: #222;

font-size: 42px;
line-height: 1.2;
font-weight: 700;

text-align: left;


}

.about-page article p {
margin-top: 0;
margin-bottom: 1.5rem;


color: #555;

font-size: 18px;
line-height: 1.75;

text-align: left;


}

.about-page .about-video {
width: 100%;


margin: 35px auto;

text-align: center;


}

.about-page .about-video iframe {
display: inline-block;


width: 560px;
max-width: 100%;

height: 315px;

border: 0;


}

/* =========================================================
CONTACT DETAILS
========================================================= */

.contact-details-section {
width: 100%;


margin: 0;

padding: 70px 20px;

background: #fff;


}

.contact-details-section .container {
width: 100%;
max-width: 1200px;


margin: 0 auto;


}

.contact-detail-card {
width: 100%;
height: 100%;


min-height: 190px;

padding: 35px 25px;

background: #f7f7f7;

border: 1px solid #e5e5e5;
border-radius: 4px;

display: flex;

flex-direction: column;

align-items: center;
justify-content: center;

text-align: center;

transition:
    transform .25s ease,
    box-shadow .25s ease;


}

.contact-detail-card:hover {
transform: translateY(-4px);


box-shadow: 0 8px 24px rgba(0, 0, 0, .10);


}

.contact-detail-icon {
width: 62px;
height: 62px;


min-width: 62px;
min-height: 62px;

margin-bottom: 18px;

border-radius: 50%;

background: #2f2c27;
color: #fff;

display: flex;

align-items: center;
justify-content: center;

font-size: 27px;


}

.contact-detail-title {
margin: 0 0 10px;
padding: 0;


color: #2f2c27;

font-size: 20px;
line-height: 1.3;
font-weight: 600;


}

.contact-detail-text {
margin: 0;
padding: 0;


color: #555;

font-size: 16px;
line-height: 1.6;


}

.contact-detail-text a {
color: #555;


text-decoration: none;


}

.contact-detail-text a:hover {
color: #2f2c27;


text-decoration: underline;


}

/* =========================================================
CONTACT INTRODUCTION
========================================================= */

.contact-introduction {
width: 100%;


margin: 0;

padding: 75px 20px;

background: #f5f3f0;

text-align: center;


}

.contact-introduction .container {
width: 100%;
max-width: 900px;


margin: 0 auto;


}

.contact-introduction h2 {
margin: 0 0 25px;
padding: 0;


background: transparent !important;

color: #2f2c27 !important;

font-size: 38px;
line-height: 1.25;
font-weight: 600;


}

.contact-introduction p {
max-width: 850px;


margin: 0 auto;
padding: 0;

color: #555;

font-size: 18px;
line-height: 1.8;


}

/* =========================================================
SERVICE REGION
========================================================= */

#serviceRegion {
width: 100%;


margin: 0;

padding: 70px 20px 0;

background: #fff !important;

color: #2f2c27;


}

#serviceRegion .container {
width: 100%;
max-width: 1200px;


margin: 0 auto;


}

#serviceRegion .service-region-title {
display: block;


width: 100%;

margin: 0 0 35px;
padding: 0;

background: transparent !important;

border: 0 !important;
border-radius: 0 !important;

box-shadow: none !important;

color: #2f2c27 !important;

font-size: 38px;
line-height: 1.25;
font-weight: 600;

text-align: center;


}

#serviceRegion .service-region-title::before,
#serviceRegion .service-region-title::after {
display: none !important;


content: none !important;


}

#serviceRegion .service-region-title i {
display: inline-block;


margin-right: 10px;

background: transparent !important;

color: #2f2c27 !important;


}

#serviceRegionMap {
width: 100%;


height: 600px;
min-height: 600px;

margin: 0;
padding: 0;

overflow: hidden;

background: #ddd;

border: 0;


}

.contact-page .leaflet-container {
width: 100%;
height: 100%;


font-family: inherit;


}

.contact-page .leaflet-popup-content {
line-height: 1.5;
}

/* =========================================================
CONTACT OPTIONAL CONTENT
========================================================= */

.contact-page-content {
width: 100%;


margin: 0;

padding: 60px 20px;

background: #fff !important;

color: #555;


}

.contact-page-content .container {
width: 100%;
max-width: 1000px;


margin: 0 auto;


}

.contact-page-content h1,
.contact-page-content h2,
.contact-page-content h3,
.contact-page-content h4,
.contact-page-content h5,
.contact-page-content h6 {
display: block;


width: 100%;

margin: 0 0 25px;
padding: 0;

background: transparent !important;

color: #2f2c27 !important;

border: 0 !important;
border-radius: 0 !important;

box-shadow: none !important;

text-align: left;


}

.contact-page-content h1::before,
.contact-page-content h1::after,
.contact-page-content h2::before,
.contact-page-content h2::after,
.contact-page-content h3::before,
.contact-page-content h3::after,
.contact-page-content h4::before,
.contact-page-content h4::after,
.contact-page-content h5::before,
.contact-page-content h5::after,
.contact-page-content h6::before,
.contact-page-content h6::after {
display: none !important;


content: none !important;


}

.contact-page-content h1 {
font-size: 42px;
line-height: 1.25;
font-weight: 600;
}

.contact-page-content h2 {
font-size: 36px;
line-height: 1.25;
font-weight: 600;
}

.contact-page-content h3 {
font-size: 30px;
line-height: 1.3;
font-weight: 600;
}

.contact-page-content p {
margin: 0 0 20px;
padding: 0;


color: #555;

font-size: 17px;
line-height: 1.7;


}

.contact-page-content a {
color: #2f2c27;
}

.contact-page-content img {
max-width: 100%;
height: auto;
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 991.98px) {


#heroSlider {
    height: 650px !important;
    min-height: 650px !important;
    max-height: 650px !important;
}

#heroSlider .carousel-inner {
    height: 650px !important;
    min-height: 650px !important;
    max-height: 650px !important;
}

#heroSlider .carousel-item {
    height: 650px !important;
    min-height: 650px !important;
    max-height: 650px !important;
}

#heroSlider .hero-image {
    width: 100% !important;
    height: 100% !important;

    min-width: 100% !important;
    min-height: 100% !important;

    object-fit: cover !important;
    object-position: center center !important;
}

#heroSlider .hero-content h1 {
    font-size: 48px;
}

#heroSlider .hero-content p {
    font-size: 20px;
}

#professionalHanging {
    min-height: 550px;
}

#professionalHanging h2 {
    font-size: 42px;
}

#consultations {
    padding: 70px 0;
}

#consultations h2 {
    font-size: 40px;
}

#clients {
    padding: 70px 0;
}

#pageHero {
    height: 650px;
}

#pageHero .page-hero-title {
    font-size: 48px;
}

.about-page article {
    padding-top: 60px;
    padding-bottom: 60px;
}

.about-page article h2 {
    font-size: 38px;
}

.contact-details-section {
    padding: 60px 20px;
}

.contact-introduction {
    padding: 65px 20px;
}

.contact-introduction h2 {
    font-size: 34px;
}

#serviceRegion {
    padding: 60px 20px 0;
}

#serviceRegion .service-region-title {
    font-size: 34px;
}

#serviceRegionMap {
    height: 550px;
    min-height: 550px;
}

.contact-page-content {
    padding: 55px 20px;
}


}

/* =========================================================
MOBILE
HOMEPAGE SLIDER = 450PX
========================================================= */

@media (max-width: 767.98px) {


#heroSlider {
    width: 100% !important;
    max-width: 100% !important;

    height: 450px !important;
    min-height: 450px !important;
    max-height: 450px !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
}

#heroSlider .carousel-inner {
    position: relative !important;

    width: 100% !important;

    height: 450px !important;
    min-height: 450px !important;
    max-height: 450px !important;

    overflow: hidden !important;
}

#heroSlider .carousel-item {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;

    height: 450px !important;
    min-height: 450px !important;
    max-height: 450px !important;

    display: block !important;

    visibility: hidden !important;
    opacity: 0 !important;

    overflow: hidden !important;
}

#heroSlider .carousel-item.active {
    visibility: visible !important;
    opacity: 1 !important;

    z-index: 2 !important;
}

#heroSlider .hero-image {
    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    min-width: 100% !important;
    min-height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;

    object-fit: cover !important;
    object-position: center center !important;

    display: block !important;

    z-index: 1 !important;
}

#heroSlider .hero-overlay {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    z-index: 3 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 20px !important;

    box-sizing: border-box !important;

    background: rgba(0, 0, 0, .28) !important;
}

#heroSlider .hero-content {
    width: 100% !important;
    max-width: 100% !important;

    padding: 0 !important;

    text-align: center !important;
}

#heroSlider .hero-content h1 {
    margin: 0 0 18px !important;

    font-size: 36px;
    line-height: 1.15;
}

#heroSlider .hero-content p {
    margin: 0 0 25px !important;

    font-size: 18px;
    line-height: 1.5;
}

#heroSlider .hero-button {
    padding: 12px 26px !important;
}

#heroSlider .carousel-indicators {
    bottom: 20px !important;

    z-index: 10 !important;
}


/* HOMEPAGE SECTIONS */

#artMirrorHanging,
#whyChoose,
#consultations,
#professionalGallery,
#clients {
    padding-top: 60px;
    padding-bottom: 60px;
}

#professionalHanging {
    min-height: 500px;

    background-attachment: fixed !important;
}

#professionalHanging h2 {
    font-size: 36px;
}

#professionalHanging p {
    font-size: 19px;
}

#whyChoose h2,
#consultations h2,
#professionalGallery .gallery-heading h2,
#artMirrorHanging h2,
#clients .clients-heading h2 {
    font-size: 36px;
}

#consultations p {
    font-size: 17px;
}


/* CLIENTS */

#clients {
    padding-left: 15px;
    padding-right: 15px;
}

#clients .clients-heading {
    margin-bottom: 35px;
}

#clients .client-card-image {
    height: 140px;
    min-height: 140px;
    max-height: 140px;

    flex-basis: 140px;
}

#clients .client-card-image img {
    width: 166px !important;
    height: 108px !important;

    min-width: 166px !important;
    min-height: 108px !important;

    max-width: 166px !important;
    max-height: 108px !important;
}

#clients .client-card-body {
    min-height: 78px;
}

#clients .client-card-title {
    font-size: 17px;
}


/* PAGE HERO */

#pageHero {
    height: 550px;
    min-height: 550px;
    max-height: 550px;
}

#pageHero .page-hero-image {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
}

.about-page #pageHero .page-hero-image {
    object-position: right center;
}

#pageHero .page-hero-content {
    padding: 20px;
}

#pageHero .page-hero-title {
    font-size: 38px;
    line-height: 1.15;
}


/* ABOUT */

.about-page article {
    padding: 50px 18px !important;
}

.about-page article .container {
    width: 100%;
    max-width: 100%;

    padding: 0;

    text-align: left;
}

.about-page article .col-lg-9 {
    width: 100%;
    max-width: 100%;

    font-size: 17px;
    line-height: 1.7;

    text-align: left;
}

.about-page article h2 {
    margin-bottom: 25px;

    font-size: 32px;
    line-height: 1.2;

    text-align: left;
}

.about-page article p {
    font-size: 17px;
    line-height: 1.7;

    text-align: left;
}

.about-page .about-video {
    width: 100%;

    margin: 30px auto;
}

.about-page .about-video iframe {
    width: 100%;
    height: auto;

    aspect-ratio: 16 / 9;
}


/* CONTACT */

.contact-details-section {
    padding: 50px 15px;
}

.contact-detail-card {
    min-height: 175px;

    padding: 30px 20px;
}

.contact-introduction {
    padding: 55px 18px;
}

.contact-introduction h2 {
    font-size: 30px;
}

.contact-introduction p {
    font-size: 17px;
    line-height: 1.7;
}


/* SERVICE REGION */

#serviceRegion {
    width: 100% !important;

    margin: 0 !important;

    padding: 55px 15px 0 !important;

    background: #fff !important;

    color: #2f2c27 !important;
}

#serviceRegion .container {
    width: 100% !important;

    margin: 0 auto !important;
    padding: 0 !important;
}

#serviceRegion .service-region-title {
    display: block !important;

    width: 100% !important;

    margin: 0 0 25px !important;
    padding: 0 !important;

    background: #fff !important;

    color: #2f2c27 !important;

    font-size: 28px !important;
    line-height: 1.3 !important;

    text-align: center !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}

#serviceRegion .service-region-title i {
    background: transparent !important;

    color: #2f2c27 !important;
}

#serviceRegionMap {
    width: 100% !important;

    height: 500px !important;
    min-height: 500px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #ddd !important;
}


/* CONTACT OPTIONAL CONTENT */

.contact-page-content {
    width: 100% !important;

    margin: 0 !important;

    padding: 45px 18px !important;

    background: #fff !important;
}

.contact-page-content .container {
    padding: 0 !important;
}

.contact-page-content h1,
.contact-page-content h2,
.contact-page-content h3,
.contact-page-content h4,
.contact-page-content h5,
.contact-page-content h6 {
    display: block !important;

    width: 100% !important;

    margin: 0 0 20px !important;
    padding: 0 !important;

    background: transparent !important;

    color: #2f2c27 !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    text-align: left !important;
}

.contact-page-content h1 {
    font-size: 34px !important;
}

.contact-page-content h2 {
    font-size: 28px !important;
}

.contact-page-content h3 {
    font-size: 24px !important;
}


}

/* =========================================================
SMALL MOBILE
HOMEPAGE SLIDER = 400PX
========================================================= */

@media (max-width: 480px) {


#heroSlider {
    height: 400px !important;
    min-height: 400px !important;
    max-height: 400px !important;
}

#heroSlider .carousel-inner {
    height: 400px !important;
    min-height: 400px !important;
    max-height: 400px !important;
}

#heroSlider .carousel-item {
    height: 400px !important;
    min-height: 400px !important;
    max-height: 400px !important;
}

#heroSlider .hero-image {
    width: 100% !important;
    height: 100% !important;

    min-width: 100% !important;
    min-height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    top: 0 !important;
    left: 0 !important;

    transform: none !important;

    object-fit: cover !important;
    object-position: center center !important;
}

#heroSlider .hero-content h1 {
    font-size: 30px;
    line-height: 1.15;
}

#heroSlider .hero-content p {
    font-size: 16px;
    line-height: 1.5;

    margin-bottom: 20px !important;
}

#heroSlider .hero-button {
    padding: 11px 23px !important;
}


/* PROFESSIONAL HANGING */

#professionalHanging {
    min-height: 450px;

    background-attachment: fixed !important;
}

#professionalHanging h2 {
    font-size: 31px;
}

#professionalHanging p {
    font-size: 17px;
}


/* CONSULTATIONS */

#consultations h2 {
    font-size: 32px;
}

#consultations p {
    font-size: 16px;
}


/* CLIENTS */

#clients {
    padding-top: 55px;
    padding-bottom: 55px;
}

#clients .clients-heading h2 {
    font-size: 32px;
}

#clients .clients-heading p {
    font-size: 16px;
}

#clients .client-card-image {
    height: 140px;
    min-height: 140px;
    max-height: 140px;

    flex-basis: 140px;
}

#clients .client-card-image img {
    width: 166px !important;
    height: 108px !important;

    min-width: 166px !important;
    min-height: 108px !important;

    max-width: 166px !important;
    max-height: 108px !important;
}

#clients .client-card-body {
    min-height: 75px;
}

#clients .client-card-title {
    font-size: 16px;
}


/* PAGE HERO */

#pageHero {
    height: 500px;
    min-height: 500px;
    max-height: 500px;
}

#pageHero .page-hero-title {
    font-size: 32px;
}


/* ABOUT */

.about-page article {
    padding: 45px 15px !important;
}

.about-page article h2 {
    font-size: 29px;
}

.about-page article .col-lg-9,
.about-page article p {
    font-size: 16px;
    line-height: 1.7;
}


/* CONTACT */

.contact-detail-card {
    min-height: 165px;

    padding: 25px 15px;
}

.contact-detail-icon {
    width: 55px;
    height: 55px;

    min-width: 55px;
    min-height: 55px;

    margin-bottom: 14px;

    font-size: 23px;
}

.contact-detail-title {
    font-size: 18px;
}

.contact-detail-text {
    font-size: 15px;
}

.contact-introduction h2 {
    font-size: 27px;
}

#serviceRegion {
    padding: 45px 12px 0 !important;
}

#serviceRegion .service-region-title {
    font-size: 26px !important;

    margin-bottom: 22px !important;
}

#serviceRegionMap {
    height: 450px !important;
    min-height: 450px !important;
}


}

/* =========================================================
VERY SMALL MOBILE
HOMEPAGE SLIDER = 400PX
========================================================= */

@media (max-width: 375px) {


#heroSlider {
    height: 400px !important;
    min-height: 400px !important;
    max-height: 400px !important;
}

#heroSlider .carousel-inner {
    height: 400px !important;
    min-height: 400px !important;
    max-height: 400px !important;
}

#heroSlider .carousel-item {
    height: 400px !important;
    min-height: 400px !important;
    max-height: 400px !important;
}

#heroSlider .hero-image {
    width: 100% !important;
    height: 100% !important;

    min-width: 100% !important;
    min-height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    top: 0 !important;
    left: 0 !important;

    transform: none !important;

    object-fit: cover !important;
    object-position: center center !important;
}

#clients .client-card-image {
    height: 140px;
    min-height: 140px;
    max-height: 140px;

    flex-basis: 140px;
}

#clients .client-card-image img {
    width: 166px !important;
    height: 108px !important;

    min-width: 166px !important;
    min-height: 108px !important;

    max-width: 166px !important;
    max-height: 108px !important;
}

#pageHero {
    height: 500px;
    min-height: 500px;
    max-height: 500px;
}

#serviceRegion .service-region-title {
    font-size: 24px !important;
}

#serviceRegionMap {
    height: 420px !important;
    min-height: 420px !important;
}


}
.navbar-brand.logo img {
    width: 120px;
    height: auto;
}

@media (max-width: 767.98px) {
    .navbar-brand.logo img.mobile-logo {
        width: 50px !important;
        height: auto !important;
    }

    .navbar-brand.logo {
        padding: 3px 8px !important;
    }
}