/*
Theme Name: Western States Glass
Theme URI: https://www.wsglass.com/
Author: Singularity Solution
Author URI: https://www.singularity.is
Description: Western States Glass
Version: 1.0

* For the full copyright and license information, please view
* the LICENSE file that was distributed with this source code.
*/

html { scroll-behavior: smooth; }

body { 
    font-family: 'Mulish', sans-serif;
    overflow-x: hidden;
}

/* custom variables START */
:root {
    --black-custom: #1A1A1A;
    --red: #ED1C24;
    --red-light: #EC1C24;
    --red-dark: #961D16;
    --red-about: #c61f1d;
    --gray-light: #c4c4c4;
    --gray-transparent: #00000026;
    --gray-muted: #E6E6E6;
    --dark-custom: #1A1A1A;
    --bg-red-gradiant: transparent radial-gradient(closest-side at 50% 50%, #EC1C24 0%, #961D16 100%) 0% 0% no-repeat padding-box;
    --red-left-to-right-gradient: linear-gradient(90deg, rgba(150,29,22,1) 50%, rgba(236,28,36,1) 100%, rgba(236,28,36,1) 100%);

    --bg-light: #F9F9F9;

    --fs-15: 15px;
    --fs-14: 14px;
    --fs-13: 13px;
    --fs-10: 10px;
    --fw-black: 900;
    --fw-bold: 800;

    --text-shadow: 0px 3px 3px #00000066;
}
/* custom variables END */

/* Font [family, size, weight] START */
h1 { font-size: 37px; }
h2 { font-size: 36px; }
h3 { font-size: 28px; }
h4 { font-size: 22px; }
h5 { font-size: 20px; }
p  { font-size: 16px; }

.fs-52 { font-size: 52px; }
.fs-32 { font-size: 32px; }
.fs-30 { font-size: 30px; }
.fs-27 { font-size: 27px; }
.fs-22 { font-size: 22px; }
.fs-21 { font-size: 21px; }
.fs-20 { font-size: 20px; }
.fs-18 { font-size: 18px; }
.fs-17-misc { font-size: 17px; }
.fs-17 { font-size: 17px; }
.fs-16 { font-size: 16px; }
.fs-15 { font-size: 15px; }
.fs-14 { font-size: 14px; }
.fs-14-cards { font-size: 14px; }
.fs-13 { font-size: var(--fs-13); }
.fs-12 { font-size: 12px; }
.fs-10 { font-size: 10px; }
.font-custom-page { font-size: 55px; }

h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-black); }
h2, h3 { color: black; }

.fw-black { font-weight: var(--fw-black); }
.fw-extra-bold { font-weight: 800; }
.fw-regular { font-weight: 400; }
.text-red { color: var(--red); }
.text-shadow { text-shadow: var(--text-shadow); }
.bg-black-custom { background-color: var(--black-custom); }
.bg-black { background-color: var(--dark-custom); }
.bg-black-standard { background: black; }
.bg-red { background-color: var(--red); }
.text-black { color: #000000; }
.text-gray-custom { color: #333333 };
.text-gray-light { color: var(--gray-light); }
.text-gray-light2 { color: var(--gray-light); }
.text-black-custom { color: var(--black-custom); }
.line-height-cards { line-height: 1.2; }
.text-red-gradient {
    background: #A12420;
    background: -webkit-linear-gradient(to right, #A12420 0%, #D01D1C 100%);
    background: -moz-linear-gradient(to right, #A12420 0%, #D01D1C 100%);
    background: linear-gradient(to right, #A12420 0%, #D01D1C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bg-red-product {
    background: rgb(161,36,32);
    background: linear-gradient(90deg, rgba(161,36,32,1) 45%, rgba(208,27,28,1) 100%);
}

.bg-red { background-color: var(--red-about);}

/* button override START */
.btn-danger { 
    background-color: var(--red);
    font-weight: 900;
    font-size: var(--fs-15);
}
.btn-danger:hover { background-color: var(--red-dark); }
/* button override END */


.padding-b-2 { padding-bottom: 2px; }

@media screen and (max-width: 992px) {
    h1 { font-size: 27px; }
    h2 { font-size: 25px; }
    h3 { font-size: 21px; }
    h4 { font-size: 15px; }
    h5 { font-size: 18px; }
    p  { font-size: 12px; }

    .font-custom-page { font-size: 36px; } 
    .fs-32 { font-size: 14px; }
    .fs-30 { font-size: 25px; }
    .fs-22 { font-size: 20px; }
    .fs-20 { font-size: 18px; }
    .fs-18 { font-size: 16px; }
    .fs-17-misc { font-size: 14px; }
    .fs-17 { font-size: 14px; }
    .fs-16 { font-size: 14px; }
    .fs-15 { font-size: 14px; }
    .fs-14-cards { font-size: 13px; }
    .fs-13 { font-size: 12px; }
    .fs-12 { font-size: 13px; }
    .fs-10 { font-size: 11px; }
    .fs-10 { font-size: 10px; }
}
/* Font [family, size, weight] END */


.standard-section {
    padding-top: 65px;
    padding-bottom: 65px;
}

.btn-arrow img { 
    height: 13px;
    padding-top: 1px;
}

.w-fit-content { width: fit-content; }
.bg-logo {
    background: var(--black-custom) url('img/logo-opacity2.svg') repeat-y;
    background-size: 100% auto;
}

.img-custom-page:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.img-custom-page img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


.products-card-hover .card:hover .bg-black-opacity {
    opacity: 1;
    background-color: black;
    transition: all .45s ease-in-out;
}
.products-card-hover .card:hover .card-img-overlay {
    background-color: rgba(0, 0, 0, 0.733);
    transition: all .45s ease-in-out;
}


.link-red a {
    text-decoration: none;
    color: var(--red);
}

.link-red a:hover {
    color: var(--red-dark);
}

.card-shadow-hover:hover {
    box-shadow: 0px 0px 12px #0000008e;
    opacity: 1;
}

/*****************************************
                NAVBAR
*****************************************/
header {
    transition: all 0.5s;
    box-shadow: 0px 1px 3px #0000004D;
}
header.scrollUp {
    transform: translateY(-115px);
    
}

.dropdown-item.active, .dropdown-item:active { background-color: unset; }

#nav-main > li > a {
    font-size:var(--fs-14);
    color: black;
    font-weight: var(--fw-black);
}
#nav-main li a:hover { color: var(--red); }
#nav-main li .active { color: var(--red); }

#nav-black-list > li > a {
    font-size:var(--fs-10);
    color: white;
    font-weight: 800;
}
#nav-black-list > li > a:hover { color: var(--red); }
#nav-black-list > li > .active { color: var(--red); }

.dropdown:hover .dropdown-menu { display: block; }

.black-nav {
    background: black;
}

/* navbar menu icon */
#wrapper {
	display:inline-block;
	position: relative;
	cursor: pointer;
}
.circle {
	width:25px;
	height:33px;
	position:relative;
}
.line {
    right: 1px;
	position: absolute;
	height: 2px;
	width: 100%;
	background: var(--dark-custom);
	border-radius: 6px;
	transition: all cubic-bezier(0.26, 0.1, 0.27, 1.55) 0.35s;
}
.top {
	top:18%;
}
.middle {
	top:48%;
}
.bottom {
	top:78%;
}
.icon.close .top {
	transform:rotate(45deg);
	top:48%;
}
.icon.close .middle, .icon.close .bottom {
	transform:rotate(-45deg);
	top:48%;
}


/* products on hover desk */
.products-hover {
    left: -320px;
    width: 800px;
    background-color: rgba(255, 255, 255, 0.671);
    overflow: hidden;
    box-shadow: 0px 1px 3px #0000004D;
}

.products-hover .products-mobile {
    max-width: unset;
}

.products-hover .dropdown-item:hover { 
    max-width: unset;
    background-color: unset;
}

.products-hover .card:hover .card-img-overlay {
    background-color: rgba(0, 0, 0, 0.733);
    transition: all .45s ease-in-out;
}

.products-hover .bg-black-opacity-products:hover {
    opacity: 1;
    transition: all .45s ease-in-out;
}

.products-hover h5 {
    font-size: 18px;
}


/*****************************************
                MAIN
*****************************************/
main { margin-top: 108.55px; }







/*****************************************
                HERO
*****************************************/
.hero, .hero-carousel, .hero-carousel div, .hero-carousel img { min-height: 490px; }

.hero h1 { text-shadow: var(--text-shadow); }
.hero p { text-shadow: var(--text-shadow); }

.hero-text {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hero-carousel .carousel-item img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}





/**********************************************
            HERO CUSTOM PAGE
***********************************************/
.hero-custom-page {
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 465px;
    clip-path: polygon(0 0, 100% 0, 100% 86%, 0% 100%);
}
.hero-custom-page h1 { text-shadow: var(--text-shadow); }









/**********************************************
            ORODUCTS
***********************************************/
.our-products .card:hover .card-img-overlay {
    background-color: rgba(0, 0, 0, 0.733);
    transition: all .45s ease-in-out;
}

.our-products .bg-black-opacity-products:hover {
    opacity: 1;
    transition: all .45s ease-in-out;
}









/**********************************************
            DOWNLOAD SECTION
***********************************************/
.bg-download-custom {
    background-image: url(img/logo-opacity2.svg);
    background-repeat: repeat-x;
    background-position: center;
    background-size: 65%;
    background-color: var(--black-custom);
}







/**********************************************
            INSULATED PAGE
***********************************************/
.insulated-cover { background-image: url('img/insulated-cover-edited.jpg'); }
.square-image { max-width: 50px; }
.insulated-products-img { max-width: 350px; }

.sculptured-grids .card {
    width: fit-content;
}

.text-section {
    margin-top: 25px;
    margin-bottom: 50px;
    -webkit-box-shadow: 0px 6px 19px -1px rgba(0,0,0,0.41);
    -moz-box-shadow: 0px 6px 19px -1px rgba(0,0,0,0.41);
    box-shadow: 0px 6px 19px -1px rgba(0,0,0,0.41);
}






/**********************************************
            TEMPERED PAGE
***********************************************/
.tempered-cover { background-image: url('img/tempered-cover.jpg'); }

.tempered-bottom {
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 390px;
    background-image: url('img/tempered-glass-bottom.jpg');
    clip-path: polygon(0 0, 100% 40%, 100% 100%, 0% 100%);
}






/**********************************************
            FABRICATION PAGE
***********************************************/
.fabrication-cover { background-image: url('img/fabrication-cover-edited.jpg'); }
.fabrication-bottom {
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 390px;
    background-image: url('img/fabrication-bottom.jpg');
    clip-path: polygon(0 0, 100% 40%, 100% 100%, 0% 100%);
}
.fabrication-bottom { min-height: 230px; }








/********************************************* 
            MIRRORS
**********************************************/
.mirrors-cover { background-image: url('img/mirrors-cover-edited.jpg'); }
.mirrors-bottom-img img { max-height: 424px; }

.mirrors-bottom {
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 390px;
    background-image: url('img/mirrors-bottom-w.jpg');
    clip-path: polygon(0 0, 100% 40%, 100% 100%, 0% 100%);
}
.mirrors-bottom { min-height: 230px; }




/********************************************* 
            LAMINATED GLASS
**********************************************/
.laminated-cover { background-image: url('img/laminated-glass-cover-edited.jpg'); }
.laminated-bottom {
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 390px;
    background-image: url('img/laminated-glass-bottom.jpg');
    clip-path: polygon(0 0, 100% 40%, 100% 100%, 0% 100%);
}
.laminated-bottom { min-height: 230px; }

.laminated-cards-img { max-width: 400px; }





/**********************************************
            SHOWER ENCLOSURES
***********************************************/
.shower-enclosures-cover { background-image: url('img/shower-enclosures-cover-edited.jpg'); }

.shower-gallery {
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
}

.shower-gallery .carousel-inner {
    max-height: 479px;
}






/********************************************* 
            SHOWER HARDWARE
**********************************************/
.shower-hardware-cover { background-image: url('img/shower-hardware-cover.jpg'); }
.shower-hardware-img { max-width: 360px; }
.shower-hardware-img-last { max-width: 690px; }





/********************************************* 
            INVENTORY
*********************************************/
.inventory-cover { background-image: url('img/inventory-cover.jpg'); }
.free-sample-box .container {
    height: 500px;
    background-image: url('img/bg-sample-box.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.bg-logo-sample-box {
    background-image: url('img/logo-opacity2.svg');
    background-repeat: no-repeat;
    background-position: right;
    background-size: 40%;
}





/********************************************* 
            MISC PRODUCTS
*********************************************/
.products-cover { background-image: url('img/tempered-cover.jpg'); }
.misc-catalogue {
    box-shadow: 0px 0px 4px #0000001a;
    opacity: 1;
}

.misc-catalogue:hover {
    box-shadow: 0px 0px 12px #0000008e;
    opacity: 1;
}





/**********************************************
            CAPABILITIES PAGE
***********************************************/
.capabilities-cover { background-image: url('img/capabilities-cover-edited.jpg'); }
.capabilities-bottom {
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 395px;
    background-image: url('img/capabilities-bottom-new.jpg');
}

.capabilities-card-img img { max-height: 240px; }





/********************************************* 
            CONTACT
*********************************************/
.contact-cover { background-image: url('img/contact-cover.jpg'); }







/********************************************* 
            RESOURCES
*********************************************/
.resources-cover { background-image: url('img/capabilities-cover-edited.jpg'); }




/*****************************************
                CARDS
*****************************************/
.cards-section { margin-top: -1px; }

.cards-box {
    padding-top: 36px;
    padding-bottom: 36px;
}
.cards-box.bg-red-gradiant .cards-icon img {
    filter: invert(11%) sepia(90%) saturate(5767%) hue-rotate(353deg) brightness(113%) contrast(89%);
}
.cards-text p {
    line-height: 1.2;
}

.icon-sm-cards { width: 28px;}
.img-card-sm > img { width: 48px; }

@media screen and (max-width: 576px) {
    .card-img-container {height: 38px;}
    .img-card-sm > img { max-width: 25px; }
}   

@media (min-width: 577px) and (max-width: 992px) {
    .img-card-sm > img { min-width: 28px; }
    
    .card-border {
        border: .5px solid #3b3b3b27;
    }
}

@media (min-width: 993px) and (max-width: 1399px) {
    .img-card-sm > img { width: 38px; }
}

.hover-red:hover {
    background: var(--red-left-to-right-gradient);
    cursor: pointer;
}
.hover-red:hover .cards-icon img {
    filter: invert(100%) sepia(45%) saturate(0%) hue-rotate(142deg) brightness(111%) contrast(101%);
} 

.red-line { 
    background-color: var(--red);
    padding-top: 6px;
}

@media screen and (min-width:1200px) {
    .sloped { clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%); }
    .sloped-map { clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%); }
}

.bg-black-opacity {
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0.8;
    transition: all .45s ease-in-out;
}

.card-img-overlay {
    transition: all .45s ease-in-out;

}

@media screen and (max-width: 767px) {
    .card-mobile-h {
        height: 158px;
    }
    .card-mobile-h > img {
        object-fit: cover;
    }

}
@media (min-width: 768px) and (max-width: 1399px) {
    .card-mobile-h img {
        max-height: 245px;
    }
    .card-mobile-h > img {
        object-fit: cover;
    }
}

.popular-section .card:hover .bg-black-opacity {
    opacity: 1;
    background-color: black;
    transition: all .45s ease-in-out;
}
.popular-section .card:hover .card-img-overlay {
    background-color: rgba(0, 0, 0, 0.733);
    transition: all .45s ease-in-out;
}



/*****************************************
                WESTERN
*****************************************/
.storage {
    background-image: url('img/sa.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}





/*****************************************
                FREQUENTLY ASKED
*****************************************/
.asked-section {
    z-index: 1;
    background-color: white;
}

.accordion-button:focus { 
    outline: none !important;
    border: 1px solid #EDEDED;
    box-shadow: none;
}

@media screen and (min-width: 1200px) {
    .accordion-h { text-transform: uppercase; }
}
.accordion-button:active { outline: none; }

.accordion-button {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 0.59px #00000026;
    opacity: 1;
    color: black;
    border: 1px solid #EDEDED;
    outline: none;
}


.accordion-button:not(.collapsed) {
    color: black;
    box-shadow: none;
    outline: none;
    background-color: unset;
    font-weight: var(--fw-bold);
}

.accordion-button::after {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin-left: auto;
    content: "";
    background-image: url('img/arrow-right.svg');
    background-repeat: no-repeat;
    background-size: .5rem;
    background-position: center;
    transition: transform .2s ease-in-out;
    outline: none !important;
    position: absolute;
    bottom: 18px;
}

.accordion-button:not(.collapsed)::after {
    background-image: url('img/arrow-right.svg');
    filter: invert(17%) sepia(93%) saturate(3219%) hue-rotate(346deg) brightness(101%) contrast(99%);
    background-position: center;
    transform: rotate(90deg);
    font-weight: 800;
}
.accordion-button:not(.collapsed) { font-weight: var(--fw-black); }
.accordion-body { background-color: var(--bg-light); }





/*****************************************
                TRUSTED
*****************************************/
.rating-starts {
    max-height: 13px;
    padding-bottom: 2px;
}

.user-rating { 
    border: 4px solid var(--red);
    border-top-left-radius: 20%;
    border-bottom-right-radius: 20%;
}

.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 13px;
    height: 13px;
    padding: 0;
    margin-right: 15px;
    margin-left: 15px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #fff;
    background-clip: padding-box;
    border: 1pt solid #CCCCCC;
    opacity: 1;
    transition: .6s ease;
}

.carousel-indicators .active {
    background-color: var(--red);
}

.trusted-from-img {
    width: 49%;
    position: absolute;
    bottom: 0;
    left: 0;
}






/*****************************************
                MAP
*****************************************/
.form-submit img {
    height: 13px;
    padding-top: 1px;
}
.form-textarea { min-height: 120px !important; }

textarea.form-control,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
.uneditable-input {   
  border-color: #E6E6E6 !important;
  color: black;
  font-weight: 700;
}

textarea.form-control:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
.uneditable-input:focus {   
  border-color: var(--red) !important;
}

.google-map { min-height: 280pt;}






/*****************************************
                OUR PRODUCTS
*****************************************/
.products-mobile > img {
    object-fit: cover;
}
@media screen and (max-width: 1199px) {
    .products-mobile img {
        max-height: 158px;
    }
}

@media screen and (min-width: 1200px) {
    #first-product img {
        min-height: 100%;
    }

    .products-mobile img {
        max-height: 130px;
    }
}

@media screen and (min-width: 1400px) {
    .products-mobile img {
        max-height: 150px;
    }
}

.bg-black-opacity-products {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(to right, rgba(5, 5, 5, 0.562) , rgba(80, 80, 80, 0.699));
    transition: all .45s ease-in-out;
}

.bg-black-opacity-products:hover {
    opacity: 1;
    transition: all .45s ease-in-out;
}








/*****************************************
                CATALOGUE
*****************************************/
.hero-glass-catalogue {
    /* background-image: url('img/hero-img-lg.jpg'); */
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 150px;
}
.hero-glass-catalogue h1 { text-shadow: var(--text-shadow); }
.hero-glass-catalogue p { text-shadow: var(--text-shadow); }


.card-catalogue img {
    max-height: 322px;
}

.bg-black-opacity-catalogue {
    background-color: rgba(0, 0, 0, 0.8);
    opacity: 0.8;
    transition: all .45s ease-in-out;
}

.glass-catalogue .card:hover .bg-black-opacity-catalogue {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.925);
    transition: all .45s ease-in-out;
}











/*****************************************
            CLEAR & TINTED
*****************************************/
.check-muted img {
    filter: grayscale(100%);
    opacity: .12;
}
.check-muted p {
    color: var(--gray-muted);
}

.glass-samples h1 { text-shadow: var(--text-shadow); }
.glass-samples p { text-shadow: var(--text-shadow); }
.fs-14-tinted { font-size: 14px; }
.card-tinted {
    box-shadow: 0px 0px 4px #0000001A;
    opacity: 1;
}

.card-tinted:hover {
    box-shadow: 0px 0px 12px #0000008e;
    opacity: 1;
}

.check-wrapper img {
    width: 18px;
}

.check-wrapper {
    display: flex;
    align-items: center;
}
.check-wrapper div {
    flex-grow: 1;
    flex-basis: 0;
}

@media (min-width: 386px) and (max-width: 406px) {
    .check-wrapper img {
        height: 15px;
        width: 15px;
    }
    .fs-14-tinted { font-size: 12px; }
    .fs-18 { font-size: 10px; }
    .fs-27 { font-size: 16px; }
}
@media (min-width: 407px) and (max-width: 480px) {
    .fs-14-tinted {font-size: 11px;}
    .check-wrapper img { width: 13px; }
    .fs-18 { font-size: 12px; }
}
@media (min-width: 481px) and (max-width: 590px) {
    .check-wrapper img { width: 16px; }
    .fs-18 { font-size: 16px; }
}
@media (min-width:768px) and (max-width: 991px) {
    .fs-14-tinted { font-size: 18px; }
    .check-wrapper img { width: 20px; }
    .fs-18 { font-size: 20px; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .fs-14-tinted { font-size: 12px; }
    .check-wrapper img { width: 15px; }
    .fs-18 { font-size: 15px; }
}









/*****************************************
                FOOTER
*****************************************/
.footer-nav > li > a:hover { color: var(--red); }
.footer-nav > li > .active { color: var(--red); }

.newsletter-div {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    opacity: 1;
    box-shadow: 0px 0px 4px #0000001A;
}

.footer-bottom-icons img { height: 30px; }






/*************************************************************
                RESPONSIVE
**************************************************************/
@media screen and (min-width: 1400px) {
    .footer-logo { width: 50%; }
    .bg-logo {
        background: var(--black-custom) url('img/logo-opacity2.svg') repeat-y;
        background-size: 70% auto;
    }
    /***************
       NEWSLETTER
    ***************/
    .newsletter-div {
        max-width: 775px;
        box-shadow: 0px 0px 4px #0000001A;
        overflow: overlay;
        clip-path: polygon(6% 0%, 100% 0%, 94% 100%, 0% 100%); 
        padding-right: 100px !important;
        padding-left: 100px !important;
    }
    .fs-27 { font-size: 24px; }
    .fs-14-tinted { font-size: 15px; }

    .misc-catalogue img {
        max-width: 280px;
    }
    
    .misc-card {
        width: fit-content;
    }
    
}

@media screen and (max-width: 1399px) {
    .bg-logo { background-size: 80% auto; }
    .footer-logo { width: 40%; }

    .bg-black-opacity {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-image: linear-gradient(to right, rgba(5, 5, 5, 0.562) , rgba(80, 80, 80, 0.699));
            transition: all .45s ease-in-out;
    }
    .bg-black-opacity:hover {
        opacity: 0;
        transition: all .45s ease-in-out;
    }

    .shower-hardware-img-last { max-width: 490px; }

    .fs-27 { font-size: 20px; }
}

@media screen and (min-width: 1200px) {
    .user-rating {
        min-height: 153px;
    }

    .col-overflow {
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
    }

    .our-products-card { max-width: 316px; }
}

@media (max-width: 1199px) {
    .bg-logo { background-size: 120% auto; }

    .fs-27 { font-size: 17px; }

    /***************
       USER RATING
    ***************/
    .user-rating {
        max-width: 120px;
    }


    /***************
       SOC. ICONS 
    ***************/
    .social-icon img { height: 37px; }
    .payment-icons img { height: 20px; }
}

@media screen and (min-width: 993px) {
    .bg-logo2 {
        background-image: url('img/logo-opacity2.svg');
        background-repeat: no-repeat;
        background-position: right;
        background-size: 60%;
    }
    .mirrors-bottom-img img {
        clip-path: polygon(20% 0%, 100% 66%, 100% 100%, 0% 100%);
    }

    .mirrors-body-img img {
        clip-path: polygon(0 7%, 100% 0, 91% 100%, 0 90%);
    }

    .bg-sample-box {
        background: linear-gradient(90deg, rgb(253, 253, 253) 30%, rgb(26, 26, 26) 70%);
    }
    
    .tempered-img, .fabrication-img {
        clip-path: polygon(0 0, 100% 0, 90% 100%, 8% 93%);
        max-height: 525px;
    }
    
}

@media (max-width: 992px) {
    .bg-logo2 {
        background-image: url('img/logo-opacity2.svg');
        background-repeat: no-repeat;
        background-position: top right;
        background-size: 100%;
    }

    /***************
       MAIN 
    ***************/
    main { margin-top: 77.55px; }
    .fs-27 { font-size: 27px; }


    /***************
       NAVBAR 
    ***************/
    #nav-black-list > li > a {
        padding: 3px;
    }




    /***************
       HERO 
    ***************/
    .hero, .hero-carousel, .hero-carousel div, .hero-carousel img { min-height: 230px; }
    .hero-custom-page { min-height: 230px; }

    .mirrors-bottom-img img { max-height: 424px; }

    .bg-logo-sample-box {
        background-image: url(img/bg-sample-box.jpg);
        background-repeat: no-repeat;
        background-position: bottom right;
        background-size: 100%;
    }


    .tempered-img {
        max-height: 325px;
    }

    .fabrication-img { display: none; }

    /*
        DOWNLOAD SECTION
    */
    .bg-download-custom {
        background-image: url(img/logo-opacity2.svg);
        background-repeat: no-repeat;
        background-position: top right;
        background-size: 70%;
        background-color: var(--black-custom);
    }
}

@media (min-width: 769px) {
    .mirrors-bottom-list { width: 75%; }
}

@media (max-width: 768px) {    
    .hero-glass-catalogue {
        max-height: 100px;
    }
    
    .fs-27 { font-size: 19px; }

    .mirrors-bottom-img img { max-height: 350px; }

    .bg-logo-sample-box {
        background-position: bottom right;
        background-size: 100%;
    }

    .tempered-bottom { min-height: 230px; }
    .capabilities-bottom { min-height: 230px; }
    .capabilities-card-img img { max-height: 230px; }


}

@media screen and (max-width: 591px) {
    .standard-section {
        padding-top: 38px;
        padding-bottom: 38px;
    }

    .fs-17 { font-size: 10px; }
    .bg-logo { background-size: 150% auto; }
    .bg-logo2 {
        background-image: url(img/logo-opacity2.svg);
        background-repeat: no-repeat;
        background-position: top right;
        background-size: 190%;
    }

   
    .bg-logo-sample-box { 
        background-size: 120%;
        background-position: bottom right;
    }   
    .square-image {
        max-width: 42px;
    }

    .mirrors-bottom-img img { max-height: 320px; }

    .laminated-cards-img { max-width: 320px; }
    .shower-hardware-img { max-width: 320px; }
    .shower-hardware-img-last { max-width: 320px; }

    .fs-14-tinted { font-size: 10px; }
    .fs-27 { font-size: 16px; }
    .fs-14 { font-size: 11px; }

    .insulated-products-img { max-width: 290px; }

    .shower-gallery .carousel-inner {
        max-height: 260px;
    }

}

@media (max-width: 420px) {
    .fs-27 { font-size: 14px; }
}

@media (max-width: 385px) {
    .fs-14-tinted { font-size: 9px; }
    .fs-18 { font-size: 9px; }
    .fs-27 { font-size: 11px; }
    .check-wrapper img {
        height: 9px;
        width: 9px;
    }

    .bg-logo-sample-box { 
        background-size: 160%;
        background-position: bottom right;
    }   

    .shower-hardware-img-last { max-width: 280px; }
}