/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


/* CUSTOMIZATION TABS */
.init-active-tab-hidden {
    height: 0px !important;
    z-index: -1;
    position: absolute;
    overflow: hidden;
}

#customization-tabs {
    padding: 25px;
}

#customization-tabs .elementor-tabs-wrapper{
    padding: 10px;
    gap: 25px!important;
}

/* START :: MOBILE CUSTOMIZATION TABS */
@media screen and (max-width: 767px){
    #customization-tabs.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-mobile-title {
        display: inline-flex;
        width: 100%;
        min-height: 250px;
        justify-content: center;
        text-align: center;
        align-items: center;
        position: relative;
    }
    
    #customization-tabs.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-mobile-title:before {
        content: ''!important;
        display: block!important;
        position: absolute!important;
        top: 0!important;
        left: 0!important;
        right: inherit!important;
        width: 100%!important;
        height: 100%!important;
        background-size: cover!important;
        background-repeat: no-repeat!important;
        z-index: -1!important;
    }
    
    #customization-tabs.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-mobile-title:nth-child(1):before { 
        background-image: url('https://ohiocraftfurniture.com/wp-content/uploads/2019/09/hardwood-american-made-bark-oak-furniture-wood-species.jpg')!important;
    } 
    #customization-tabs.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-mobile-title:nth-child(3):before { 
        background-image: url('https://ohiocraftfurniture.com/wp-content/uploads/2019/09/amish-furniture-staining-wood.jpg')!important;
    }
    #customization-tabs.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-mobile-title:nth-child(5):before { 
        background-image: url('https://ohiocraftfurniture.com/wp-content/uploads/2019/09/american-made-furniture-hardware.jpg')!important;
    }
    
    #customization-tabs.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-mobile-title:after {  
        content: ''!important;
        display: block!important;
        position: absolute;
        top: 0!important;
        left: 0!important;
        right: inherit!important;
        width: 100%!important;
        height: 100%!important;
        background-color: rgb(255 255 255 / 50%);
        z-index: -1;
        -webkit-transition: background-color .6s ease-out;
        -moz-transition: background-color .6s ease-out;
        -o-transition: background-color .6s ease-out;
        transition: background-color .6s ease-out;
    }
    #customization-tabs.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-mobile-title:hover:after,
    #customization-tabs.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-mobile-title.elementor-active:after {
        background-color: rgb(233 203 11 / 50%);
    }
}

/* START :: DESKTOP CUSTOMIZATION TABS */
@media screen and (min-width: 768px){
    #customization-tabs.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title {
        display: inline-flex;
        width: 33.33%;
        min-height: 250px;
        justify-content: center;
        text-align: center;
        align-items: center;
        position: relative;
    }
    
    #customization-tabs.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title:before {
        content: ''!important;
        display: block!important;
        position: absolute;
        top: 0!important;
        left: 0!important;
        right: inherit!important;
        width: 100%!important;
        height: 100%!important;
        background-size: cover;
        background-repeat: no-repeat;
        z-index: -1;
    }
    
    #customization-tabs.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title:nth-child(1):before { 
        background-image: url('https://ohiocraftfurniture.com/wp-content/uploads/2019/09/hardwood-american-made-bark-oak-furniture-wood-species.jpg');
    } 
    #customization-tabs.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title:nth-child(2):before { 
        background-image: url('https://ohiocraftfurniture.com/wp-content/uploads/2019/09/amish-furniture-staining-wood.jpg');
    }
    #customization-tabs.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title:nth-child(3):before { 
        background-image: url('https://ohiocraftfurniture.com/wp-content/uploads/2019/09/american-made-furniture-hardware.jpg');
    }
    
    #customization-tabs.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title:after {  
        content: ''!important;
        display: block!important;
        position: absolute;
        top: 0!important;
        left: 0!important;
        right: inherit!important;
        width: 100%!important;
        height: 100%!important;
        background-color: rgb(255 255 255 / 50%);
        z-index: -1;
        -webkit-transition: background-color .6s ease-out;
        -moz-transition: background-color .6s ease-out;
        -o-transition: background-color .6s ease-out;
        transition: background-color .6s ease-out;
    }
    #customization-tabs.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title:hover:after,
    #customization-tabs.elementor-widget-tabs.elementor-tabs-view-horizontal .elementor-tab-desktop-title.elementor-active:after {
        background-color: rgb(233 203 11 / 50%);
    }
}

/* END :: CUSTOMIZATION TABS */