/* * * * * * * * * * * * * * * * * * */
/*  PRODUCT PAGE - PREMIUM SWATCHES  */
/* * * * * * * * * * * * * * * * * * */
.mb-product-col .variations__swatch-wrap {
    display: grid;
    grid-template-rows: auto auto auto auto; /* create three rows */
    grid-template-columns: repeat(5, 1fr);
}

.mb-product-col .swatch__standard-title {
    grid-row: 1; /* place this element in the first row */
    grid-column: 1 / -1; /* make it span the full width */
    order: 1; /* make sure it appears first */
}

.mb-product-col .variations__swatch-container {
    /* grid-row: 2; */ /* place these elements in the first row */ 
    order: 2; /* make sure these appear first */
}

.mb-product-col .swatch__premium-title {
    grid-row: 3; /* place this element in the second row */
    grid-column: 1 / -1; /* make it span the full width */
    order: 3; /* make sure it appears in the middle */
}

.mb-product-col .variations__swatch-container[data-premium] {
    grid-row: 4; /* place these elements in the third row */
    order: 4; /* make sure these appear last */
}

.variations__swatch-container[data-premium] .variations__swatch-description{
	display: none;
    visibility: hidden;
    position: relative;
    border: #F7F3ED 1px solid;
    border-radius: 8px;
    background-color: #F7F3ED;
    font-weight: bolder !important;
    left: 3.5em;
    bottom: 0.5em;
    z-index: 1;
}

.variations__swatch-container[data-premium]:hover .variations__swatch-description{
    visibility: hidden;
}

.variations__swatch-wrap[data-taxonomy="pa_mounting-style"] {
    display: flex;
}

.swatch__premium-title {
    font-size: 0.7em !important;
}

.swatch__standard-title{
    font-size: 0.7em !important;
}

.premium-colors__tooltip-icon{
	display: none;
    font-weight: lighter;
}
.premium-color_label_tooltip-icon{
    align-items: center;
    background: #626569;
    border-radius: 50%;
    color: #fff;
    display: none;
    /*display: inline-flex;*/
    font-family: serif;
    font-size: .75em !important;
    font-style: italic;
    font-weight: 900 !important;
    height: 1.25em;
    justify-content: center;
    margin: 0 0.5em;
    text-align: center;
    user-select: none;
    vertical-align: super;
    width: 1.25em;
}

.premium-colors__tooltip-icon .premium-colors__tooltip-text{
	display: none;
    visibility: hidden;
    cursor: default;
    border: #000000 2px solid;
    border-radius: 5px;
    background-color: #F7F3ED;
    position: absolute;
    z-index: 1;
    width: 19%;
    margin-left: 8.25em;
    padding: 2em !important;
    font-weight: bolder;
    font-size: 1em;
    line-height: normal;
}

.premium-colors__tooltip-text::before{
	display: none;
    content:"";
    position: absolute;
    top: -7px;
    left: 15px;
    margin:auto;
    height: 10px;
    width: 10px;
    border:1px solid #F7F3ED;
    transform:rotate(135deg);
    background-color: #F7F3ED;
    border-bottom:2px solid #000;
    border-left:2px solid #000;
}

.premium-colors__tooltip-icon:hover .premium-colors__tooltip-text{
display: none;
    visibility: visible;
}

@media (max-width: 980px) {
    .premium-colors__tooltip-icon .premium-colors__tooltip-text{
    	display: none;
        width: 35%;
    }
    
    .premium-color_label_tooltip-icon{
    	display: none;
    	height: 2.7em;
    	width: 2.7em;
    }
}

@media (max-width: 780px){
    .premium-colors__tooltip-icon .premium-colors__tooltip-text{
    	display: none;
        width: 50%;
    }
}

@media (max-width:740px ){
    .premium-colors__tooltip-icon .premium-colors__tooltip-text{
    	display: none;
        width: 50%;
    }
}

/* * * * * * * * * * * * * */
/*  PRODUCT PAGE - GENERAL */
/* * * * * * * * * * * * * */
.woocommerce div.product .product_title {
    font-size: 1.7em;
    font-weight: 700;
}
.woocommerce-product-details__short-description {
    font-size: 1.2em;
    font-family: 'Brandon';
    line-height: 1.2em;
    font-weight: normal;
    padding-top: 1em;
    padding-bottom: 0;
}
.single-product #main-content .container {
    padding-top: 0 !important;
}
.single-product .container {
    max-width: none; 
    width: 100%;
}
.woocommerce_before_single_product_summary {
    width: 95vw;
    margin: 0 auto;
    display: flex;
}
.steel-product-template .woocommerce_before_single_product_summary > .clearfix {
    display: contents;
}
.single-product #left-area {
    padding-bottom: 0;
}
.steel-product-template .product_meta {
    display: none;
}
.single_variation_wrap {
    display: flex;
    flex-direction: column;
    padding-top: 1em;
}
.woocommerce-variation-add-to-cart {
    display: flex;
    align-items: center;
}
#page-container .woocommerce div.product div.summary {
    margin-bottom: 1em;
}
#page-container #main-content .product .quantity input.input-text.qty {
    padding: 0;
}
.woo-variation-gallery-wrapper img.product-badges {
    max-width: 90%;
    margin: auto;
    display: block;
}
/* This was adding 20px of white space after our footer... */
.ElementsWidget-prefix .ElementsWidget {
    margin-bottom: 0 !important;
}
/*  BACKWARDS COMPATABLE WITH DIVI PRODUCT TEMPLATES */
/* hide the Divi lighting badges */
.et_pb_section .et_pb_image_wrap img[title="badges-done"],
.et_pb_section .et_pb_image_wrap img[title="badges-300w-done"] {
    display: none;
}
/* fix Divi's double footer... */
.single-product footer #et-boc {
    display: none !important;
}
.et_pb_post .woo-variation-product-gallery {
    max-width: 100% !important;
}
@media (max-width: 981px) {
    .woocommerce_before_single_product_summary {
        flex-direction: column;
    }
    #main-content div.product div.summary {
        width: 100%;
        margin-bottom: 0;
    }
}
/* * * * * * * * * * * * * * */
/* ADDITIONAL IMAGES GALLERY */
/* * * * * * * * * * * * * * */
.additional-images-gallery {
    width: 90%;
    margin: auto;
}
.additional-images__section {
    max-width: 90%;
}
.additional-images-gallery__image {
    min-height: 25em;
    background-size: cover;
}
#slider-accordion-label {
    margin: 1em 0;
}
@media (max-width:980px) {
    .additional-images__section,
    #slider-accordion-label {
        display: none;
    }
}
/* * * * * * */
/* WOO TABS  */
/* * * * * * */
.woocommerce-tabs.wc-tabs-wrapper {
    width: 80%; 
    margin: auto !important;
    display: block;
}
.steel_tab_container {
    background-color: rgb(242 241 241);
    padding: 4em 0;
}
.steel_tab_container .woocommerce-Tabs-panel {
    background: rgb(255 255 255);
}
@media (max-width: 980px) {
    .woocommerce-tabs.wc-tabs-wrapper {
        width: 95%;
    }
}
/* * * * * * * * * * * * * * * */
/* THE STEEL LIGHTING BENEFITS */
/* * * * * * * * * * * * * * * */
.steel-lighting-benefits__flex-container {
    display: grid;
    max-width: 80%;
    margin: auto;
    padding: 3em 0;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.steel-lighting-benefits__column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}
.steel-lighting-benefits__image {
    min-height: 73px;
    width: auto;
}
@media (max-width: 981px) {
    .steel-lighting-benefits__flex-container {
        grid-template-columns: 1fr 1fr;
    } 
}
@media (max-width: 500) {
    .steel-lighting-benefits__flex-container {
        grid-template-columns: 1fr;
    } 
}
/* * * * * * * * * * * * * * */
/* BRING YOUR STORY TO LIGHT */
/* * * * * * * * * * * * * * */
.bring-your-story-to-light {
    text-align: center;
    background-color: rgb(242 241 241);
}
.bring-your-story-to-light h3 {
    font-size: 1.5em;
}
.bring-your-story-to-light__image-gallery {
    display: flex;
    justify-content: space-between;
}
.bring-your-story-to-light__image-gallery__image {
    height: 20em;
    width: 100%;
    background-size: cover;
    margin: 1em 1em 0 1em;
}
@media (max-width: 981px){
    .bring-your-story-to-light__image-gallery {
        flex-direction: column;
    }
    .bring-your-story-to-light__image-gallery__image {
        height: 20em;
        width: 100%;
        background-size: cover;
        margin: 1em 0 0 0;
    }
}
/* * * * * * * * * * */
/* ALL IN THE FAMILY */
/* * * * * * * * * * */
.steel-product-template .all-in-the-family__subtitle {
    max-width: 45em;
    margin: auto;
} 

.steel-product-template .all-in-the-family__container {
    margin: 2em;
    text-align: center;
}
.steel-product-template .all-in-the-family__grid { 
    margin: 2em 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 1em;
}
#main-content #content-area .steel-product-template .all-in-the-family .all-in-the-family__section { 
    display: flex;
    flex-direction: column;
    min-height: 38em;
    height: auto;
    border: 1px solid #000;
}
.steel-product-template .all-in-the-family__column-1 {
    max-width: 40%;
}
.steel-product-template .all-in-the-family__column-2 {
    max-width: 60%;
    text-align: left;
    padding-left: 1em;
}
.steel-product-template .all-in-the-family__header {
    padding: .5em 0;
}
.steel-product-template .all-in-the-family__sub-heading {
        font-size: 1.5em;
        text-transform: uppercase;
}
.steel-product-template .all-in-the-family__sub-title-text,
.steel-product-template .all-in-the-family__paragraph,
.steel-product-template .all-in-the-family__description-text {
    line-height: 1.2em;
    font-size: 1.2em;
}
.steel-product-template .all-in-the-family__where-to-use-it-text {
    text-transform: capitalize;
}
.steel-product-template .all-in-the-family__section .all-in-the-family__mounting-labels{
    text-align: center;
    display: block;
}
.steel-product-template .all-in-the-family__icon-container {
    max-width: 6em;
    margin: auto;
}
.steel-product-template .all-in-the-family__button-container {
    text-align: center;
    display: flex;
    justify-content: space-around;
    margin: 2em 0;
    width: 100%;
}
.steel-product-template .all-in-the-family__button {
    font-size: 1em;
    padding: .5rem 3rem;
    border-radius: 1em;
    transition-duration: 300ms;
}
.steel-product-template .all-in-the-family__button--blue {
    background-color:#2b668C;
    color: white !important;
}
.steel-product-template .all-in-the-family__button--blue:hover {
    background-color:white;
    color: #2b668C !important;
    border: 1px solid #2b668C;
}
.steel-product-template .all-in-the-family__button--outline {
    background-color: white;
    color: #2b668C !important;
    border: 1px solid #2b668C;
}
.steel-product-template .all-in-the-family__button--outline:hover {
    background-color: #2b668C;
    color: white !important; 
    border: 1px solid #2b668C;
}
.steel-product-template .all-in-the-family__top-row { 
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 1em;
}
.steel-product-template .all-in-the-family__available-mount-type-text {
    text-align: center;
    width: 100%;
}
.steel-product-template .all-in-the-family__available-mount-types-images {
    width: 100%;
    display: flex;
}
@media (max-width: 980px) {
    .steel-product-template .all-in-the-family__grid {
        grid-template-columns: 1fr;
    }
    .steel-product-template .all-in-the-family__top-row {
        flex-direction: column;
    }
    .steel-product-template .all-in-the-family__column-1 {
        max-width: 75%
    }
    .steel-product-template .all-in-the-family__column-2{
        max-width: 95%;
    }
    .steel-product-template .all-in-the-family__sub-title-text, 
    .steel-product-template .all-in-the-family__paragraph, 
    .steel-product-template .all-in-the-family__description-text  {
        font-size: 1.5em
    }
    .steel-product-template .all-in-the-family__header {
        font-size: 2.5em;
    }
    .steel-product-template .all-in-the-family__sub-heading {
        font-size: 2em;
    }
    .steel-product-template .all-in-the-family__available-mount-types-images {
        flex-wrap: wrap !important;
        width: 100%;
    }
    .steel-product-template .all-in-the-family__icon-container {
        min-width: 33%;
    }
    .steel-product-template .all-in-the-family__button {
        padding: 1em 1.5em;
        font-size: 1.2em;
    }
}
/* * * * * * * * * */
/* CUSTOM OPTIONS  */
/* * * * * * * * * */
.custom-options__section {
    background-color: rgb(242 242 241);
    display: flex;
    align-items: center;
    padding: 3em 0;
}
.custom-options__header {
    font-size: 2em;
    font-weight: 500;
}
.custom-options__column-1 {
    background-image: url(/wp-content/uploads/2019/06/CUSTOMCOLORS-red.jpg);
}
.custom-options__column-3 {
    background-image: url(/wp-content/uploads/2019/06/CUSTOMCOLORS-yellow.jpg);
}
.custom-options__column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 1em;
    min-height: 30em;
    width: 33%;
    margin: auto;
    background-size: cover;
    background-repeat: no-repeat;
}
.custom-options__inner-container {
    padding: 1em;
    background-color: rgb(255 255 255);
    min-height: 30em;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.custom-options__paragraph {
    margin: 1em 0;
}
.et_pb_button.custom-options__button {
    color: rgb(86 107 139);
    border-color: rgb(86 107 139) !important;
    border-radius: 100px;
    background-color: rgb(0 0 0 / 0%) !important;
    padding-right: 2em;
    padding-left: 2em;
}
@media (max-width: 981px) {
    .custom-options__column-1,
    .custom-options__column-3 {
        display: none;
    }
    .custom-options__section {
        background-color: white;
    }
    .custom-options__column {
        width: 100%;
        min-height: auto;
    }
}
/* * * * * * * * * * */
/* DISCOUNT PRICING  */
/* * * * * * * * * * */
.discount-pricing__section {
    background-image: url(/wp-content/uploads/2019/06/slc-bulk-2.png);
    background-size: cover;
    background-repeat: no-repeat;
    padding: 4em 3em;
    display: flex;
}
.discount-pricing__section .discount-pricing__column-email-optin {
    background-color: rgb(10 10 10 / 75%);
    padding: 3em 1em;
    min-width: 50%;
    margin: auto;
}
.discount-pricing__dialog {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: stretch;
    text-align: center;
    padding: 3em;
    min-height: 25em;
    width: 33%;
    margin: auto;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: rgb(255 255 255);
}
.discount-pricing__header {
    font-weight: 700;
    font-size: 29px;
    color: rgb(216 180 102);
    line-height: 1.2em;
}
.discount-pricing__button {
    color: rgb(255 255 255)!important;
    border-radius: 100px;
    background-color: rgb(215 179 108)  
}
@media (max-width: 980px) {
    .discount-pricing__section {
        flex-direction: column;
    }
    .discount-pricing__dialog {
        width: 95%;
        margin: auto;
        margin-top: 1em;
    }
    .discount-pricing__section .discount-pricing__column-email-optin {
        width: 95%;
        margin: auto;
    }
}