﻿.tooltip { opacity: 1 !important; filter: alpha(opacity=100) !important; }

.tooltip-inner { border: solid 1px #e1dddd; font-size: 14px; font-family: "proxima-nova", "Helvetica Neue",Helvetica,Arial,sans-serif; box-shadow: 2px 2px #999; padding: 10px 15px; }

.dark-bg { background-color: rgba(0,0,0, 0.6) !important; border:solid 0px red !important; }
.white-bg { background-color: #fff !important; border:solid 0px blue !important; }

/*.owl-dots { display: none; }*/
.home_main_container { display: block; visibility: hidden; width: 1200px; min-height: 300px; margin: 0 auto; font-family: "proxima-nova", "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; margin-top: 20px; padding: 0 10px; }

    .home_main_container .sf-carousel-info { width: 100%; display: block; position: absolute; /*background-color: rgba(0,0,0, 0.6);*/ color: #fff !important; text-decoration: none; padding: 10px 12px; bottom: 0px; }

    .home_main_container .sf-carousel-info--header { font-size: 15px !important; font-weight: bold; }

    .home_main_container .sf-carousel-info--description { font-size: 13px; margin-top: 2px; margin-left: 5px; }

    .home_main_container .dir-holder { width: 100%; }

    .home_main_container .home-dir-listing { display: block; width: 25%; float: left; }

        .home_main_container .home-dir-listing .header-underline { font-weight: bold; border-bottom: solid 4px var(--bgcolor-theme); display: inline-block; margin: 0 0 5px 0; padding: 0 10px 0px 0; font-size: 1.2em; }

        .home_main_container .home-dir-listing ul { padding: 0; margin: 0; list-style: none; line-height: 2.1em; }

            .home_main_container .home-dir-listing ul li a { text-decoration: none; }

.supplier-rfq-container { margin-top: 20px; }

    .supplier-rfq-container .supplier-holder { width: 49%; float: left; }

    .supplier-rfq-container .rfq-holder { border: solid 3px var(--bgcolor-theme); width: 49%; float: right; height: 146px; background-color: #F4F4F4; text-align: center; position: relative; }

        .supplier-rfq-container .rfq-holder h3 { margin: 15px 0 5px 0; font-size: 22px; font-weight: bold; }

        .supplier-rfq-container .rfq-holder .rfq-search-input { border: solid 1px #CDCDCD; width: 75%; display: block; margin: 0 auto; height: 35px; margin-top: 5px; padding: 2px 10px; font-size: 1.1em; font-family: "proxima-nova", "Helvetica Neue",Helvetica,Arial,sans-serif; }

        .supplier-rfq-container .rfq-holder .rfq-search-button { border: none; background-color: var(--green); color: #fff; font-weight: bold; display: block; margin: 0 auto; padding: 5px 25px; margin-top: 15px; }

        .supplier-rfq-container .rfq-holder .rfq-tooltip { border-radius: 4px; display: inline-block; position: relative; right: 1px; height: auto !important; top: -12px; border: solid 1px #bdbcbc; padding: 1px 3px; background-color: #D9D9D9; }

            .supplier-rfq-container .rfq-holder .rfq-tooltip i { font-size: 6px; position: relative; top: 0px; color: #434343; display: block; }

.home_main_container .home-banner-slider { display: block; top: 0; margin-top: 0; width: 75%; float: right; }

    .home_main_container .home-banner-slider .home-carousel-container { position: relative; }

        .home_main_container .home-banner-slider .home-carousel-container .banner-prev { position: absolute; display: block; margin: 0; padding: 0; margin-top: -175px; left: 0; margin-left: 10px; z-index: 1 !important }

            .home_main_container .home-banner-slider .home-carousel-container .banner-prev i { font-size: 28px !important; color: #ECECEC; }

        .home_main_container .home-banner-slider .home-carousel-container .banner-next { position: absolute; display: block; margin: 0; padding: 0; margin-top: -175px; right: 0; margin-right: 10px; z-index: 1 !important }

            .home_main_container .home-banner-slider .home-carousel-container .banner-next i { font-size: 28px !important; color: #ECECEC; z-index: 99999 }

    .home_main_container .home-banner-slider .home-icon-panel { display: inline-block; width: 30%; text-align: center; vertical-align: top; }

        .home_main_container .home-banner-slider .home-icon-panel img { width: 28%; display: inline-block; }

        .home_main_container .home-banner-slider .home-icon-panel div { font-weight: bold; font-size: 16px; }

        .home_main_container .home-banner-slider .home-icon-panel span { line-height: 1.3em; min-height: 2.8em; }

.single-directory-row { border: solid 2px #f5f5f5; width: 100%; margin-top: 25px; padding: 0; vertical-align: top; position: relative }

    .single-directory-row img.screw-dark { position: absolute; display: block; width: 22px; height: 22px; bottom: 8px; left: 8px; z-index: 999; }

    .single-directory-row img.screw-light { position: absolute; display: block; width: 22px; height: 22px; bottom: 8px; right: 8px; z-index: 999; }

    .single-directory-row .directory-cell { background-color: #CDB273; display: inline-block; margin: 0; width: 15%; float: left; position: relative }

        .single-directory-row .directory-cell a { text-decoration: none; display: block; color: #333 !important; padding: 15px 10px 28px 10px; }

            .single-directory-row .directory-cell a h5 { font-weight: bold; font-size: 14px; margin: 0 auto; width: 120px; font-family: "proxima-nova", "Helvetica Neue",Helvetica,Arial,sans-serif; }

            .single-directory-row .directory-cell a img { margin: 0 auto; margin-top: 15px; width: 100px; }


    .single-directory-row .categories { display: inline-block; float: left; width: 85%; margin-top: 20px; }

        .single-directory-row .categories ul { list-style: none; padding: 0; margin: 0; }

            .single-directory-row .categories ul li { display: inline-block; width: 18%; margin-left: 1%; margin-right: 1%; text-align: center; vertical-align: top; }

                .single-directory-row .categories ul li a { display: inline-block; text-decoration: none; padding: 0; margin: 0; }

                    .single-directory-row .categories ul li a img { margin: 0 auto; }

                    .single-directory-row .categories ul li a h5 { font-weight: bold; vertical-align: middle; font-size: 13px; line-height: 1.4em; width: 80%; margin: 0 auto; margin-top: 15px; }

/*Hot Products*/
h2.hot-product-header { display: none; }

.single-hotproduct-row { border: solid 4px #E26814; width: 100%; margin-top: 25px; padding: 0; vertical-align: top; position: relative; }

    .single-hotproduct-row img.screw-light { position: absolute; display: block; width: 22px; height: 22px; bottom: 5px; right: 5px; z-index: 999; }

    .single-hotproduct-row .hotproduct-cell { background-color: #CDB273; display: inline-block; margin: 0; width: 16%; float: left; }

        .single-hotproduct-row .hotproduct-cell img { }

        .single-hotproduct-row .hotproduct-cell .hot-product-flame-header { font-size: 14px; color: #fff; font-weight: normal; position: absolute; top: 13px; left: 26px; }

    .single-hotproduct-row .products { display: inline-block; width: 80.5%; margin-top: 18px; margin-left: 20px; position: relative; }

        .single-hotproduct-row .products .hot-slider-cell { margin-top: 0px; }

            .single-hotproduct-row .products .hot-slider-cell a { text-decoration: none; }

                .single-hotproduct-row .products .hot-slider-cell a .product-title { font-size: 12px; min-height: 3.6em; line-height: 1.2em; display: block; margin: 5px 0; overflow: hidden; }

                .single-hotproduct-row .products .hot-slider-cell a .product-img { width: 78%; margin: 0 auto; }

                .single-hotproduct-row .products .hot-slider-cell a .product-logo { width: auto; margin: 0 auto; margin-top: 10px; }

                .single-hotproduct-row .products .hot-slider-cell a .product-video { padding: 0; font-size: 22px; display: inline-block; position: absolute; left: 10px; bottom: 5px; margin-left: 0; cursor: pointer; color: var(--textcolor-theme); }
                .single-hotproduct-row .products .hot-slider-cell a .product-price { background-color: var(--rfq-btn-bgcolor); padding: 3px 6px; font-weight: bold; font-size: 13px; display: inline-block; position: absolute; right: 21px; bottom: 5px; color: var(--textcolor-theme) }

        .single-hotproduct-row .products .hot-product-prev { position: absolute; display: block; margin: 0; padding: 0; margin-top: -145px; left: 0; margin-left: -20px; }

            .single-hotproduct-row .products .hot-product-prev span { font-size: 22px !important; color: #ECECEC; }

        .single-hotproduct-row .products .hot-product-next { position: absolute; display: block; margin: 0; padding: 0; margin-top: -145px; right: 0; margin-right: -20px; }

            .single-hotproduct-row .products .hot-product-next span { font-size: 22px !important; color: #ECECEC; }

/*Latest Article*/
.latest-articles { position: relative }

    .latest-articles img.screw-light { position: absolute; display: block; width: 22px; height: 22px; bottom: -15px; right: 0px; z-index: 999; }

    .latest-articles h2 { font-size: 16px; font-weight: bold; padding: 0; margin: 25px 0 10px 0; }

    .latest-articles ul { list-style: none; padding: 0; margin: 0; }

        .latest-articles ul li { display: inline-block; margin: 3px 0 15px 0; width: 33.3%; vertical-align: top; }

            .latest-articles ul li .article-cell { background-color: none; border: solid 1px #ECECEC; margin: 0 auto; width: 95%; vertical-align: top; }

            .latest-articles ul li:first-child .article-cell { margin-left: 0; }
            /*First article column*/
            .latest-articles ul li:nth-child(4n) .article-cell { margin-left: 0; }
            /*First article column*/
            .latest-articles ul li:nth-child(3n) .article-cell { margin-right: 0; }
            /*Last article column*/

            .latest-articles ul li .article-cell a { text-decoration: none !important; display: block; }

            .latest-articles ul li .article-cell .article-image { display: inline-block; width: 30%; }

            .latest-articles ul li .article-cell .article-content { display: inline-block; width: 68%; vertical-align: top; padding-left: 5px; }

                .latest-articles ul li .article-cell .article-content .article-title { display: block; margin-top: 5px; line-height: 1.3em; height: 3.9em; overflow: hidden }

                .latest-articles ul li .article-cell .article-content .article-author { margin-top: 15px; font-style: italic; }

            .latest-articles ul li .article-cell a:hover { }

                .latest-articles ul li .article-cell a:hover .article-content { text-decoration: underline; }


.newest-storefronts { }

    .newest-storefronts a { text-decoration: none; }

    .newest-storefronts h2 { font-size: 16px; font-weight: bold; padding: 0; margin: 25px 0 10px 0; }

    .newest-storefronts ul { list-style: none; padding: 0; margin: 0; }

        .newest-storefronts ul li { margin: 0; padding: 0; }

    .newest-storefronts .storefront-cell { background-color: #fff; vertical-align: top; }

        .newest-storefronts .storefront-cell .top { }

            .newest-storefronts .storefront-cell .top .storefront-banner { }

            .newest-storefronts .storefront-cell .top .storefront-logo-container { width: 100px; height: 100px; border: solid 2px #EDEDED; border-radius: 80px; overflow: hidden; background-color: #FFF; margin: 0 auto; margin-top: -50px; z-index: 999999; position: relative; }

                .newest-storefronts .storefront-cell .top .storefront-logo-container .storefront-logo { margin-top: 30%; width: 85%; margin-left: 8px; }

        .newest-storefronts .storefront-cell .bottom { }

            .newest-storefronts .storefront-cell .bottom .sf-name { font-weight: bold; margin-top: 10px; }

            .newest-storefronts .storefront-cell .bottom .sf-description { margin-top: 3px; line-height: 1.3em; min-height: 2.6em; }

    .newest-storefronts .sf-container { position: relative; }

        .newest-storefronts .sf-container .sf-prev { position: absolute; display: block; margin: 0; padding: 0; margin-top: -150px; left: 0px; margin-left: -25px; }

            .newest-storefronts .sf-container .sf-prev span { font-size: 22px !important; color: #ECECEC; }

        .newest-storefronts .sf-container .sf-next { position: absolute; display: block; margin: 0; padding: 0; margin-top: -150px; right: 0; margin-right: -25px; }

            .newest-storefronts .sf-container .sf-next span { font-size: 22px !important; color: #ECECEC; }

/*.owl-carousel { width: 100vw; }*/

.owl-carousel { display: none; }

.no-js .owl-carousel { display: block; }

.owl-carousel .owl-loaded { display: block; }

.owl-carousel .owl-wrapper,
.owl-carousel .owl-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); }

.toast-error { background-color: #434343; }

/*#region CALLBACK COMPONENT CSS */
.phone-reveal-modal .modal-dialog { width: 400px; }

    .phone-reveal-modal .modal-dialog .modal-content { background-color: #EFEFEF; padding: 30px 30px 25px 30px; border-radius: 0 !important; }

.phone-reveal-modal .message { font-size: 15px; font-family: 'proxima-nova'; text-align: center; margin-bottom: 12px; }

.phone-reveal-modal .phone-reveal-container .btn { width: 145px; border-radius: 0; background-color: #434343; padding-top: 8px; padding-bottom: 8px; }

.btn-submit-green { background-color: var(--green) !important; padding: 10px 20px 10px 20px; border-radius: 0; color: #fff; font-size: 15px; font-family: 'proxima-nova'; border: none; border-radius: 1px; }

.phone-reveal-textbox { font-size: 14px; padding: 6px; border-radius: 0px; margin-right: 5px; width: 100%; display: inline-block; }

.extra-info { margin-top: 30px; text-align: center; height: 0; display: none; margin-bottom: -22px; }

.small-text { font-family: 'proxima-nova'; font-size: 12px; position: relative; left: 0px; top: -2px; }

.revealed-phone-panel { margin-top: 20px; }

    .revealed-phone-panel .reveal-phone { font-size: 24px; text-decoration: underline; display: inline-block; margin-left: 8px; font-family: 'proxima-nova'; font-weight: bold; }

    .revealed-phone-panel i { font-size: 28px; display: inline-block; top: 6px; }

.phone-reveal-close { font-size: 16px; position: relative; float: right; top: -25px; right: -21px; cursor: pointer; }

#toast-container > .toast { opacity: 1; right: 10PX; font-family: 'proxima-nova'; font-size: 15px; }

.big-phone-number { text-align: center; font-size: 20px; font-weight: bold; }

    .big-phone-number .glyphicon { margin-right: 10px; top: 5px; }

hr { border: dashed 1px #888; margin-top: 25px; }

a.view-all { text-decoration: none !important; border: solid 1px var(--bgcolor-theme); padding: 5px 25px; display: block; position: relative; float: right; text-align: center; margin: 20px 1px 0px 0; vertical-align: middle; border-radius: 4px; color: #C7C7C7; }
    a.view-all:hover { text-decoration: underline !important; }
    a.view-all img { display: inline-block; width: 18px; height: 18px; left: 0; vertical-align: middle; margin-top: -3px; }
/*#endregion */

/*IPAD REGULAR SIZE */
@media screen and (max-width: 1199px) {
    .home_main_container { max-width: 100%; }
        .home_main_container .sf-carousel-info { display: none; }

    .supplier-rfq-container { margin-top: 0px; }
        /*.supplier-rfq-container .rfq-holder .rfq-tooltip {  }*/
        .supplier-rfq-container .supplier-holder { display: none; }
        .supplier-rfq-container .rfq-holder { width: 100% !important; margin-top: 20px; }

    .latest-articles ul li { width: 49.5%; }
    .supplier-rfq-container .supplier-holder { display: none; }
    .supplier-rfq-container .rfq-holder { width: 100% !important; margin-top: 20px; }

    /*LISTING VS BANNER */
    .home_main_container .home-dir-listing { width: 25%; padding-right: 10px; }
    .home_main_container .home-banner-slider { width: 75%; }

    /*4 MAIN DIRECTORIES*/
    .dir-holder { width: 24.2% !important; float: left; margin-right: 1%; }
        .dir-holder:nth-of-type(4n+1) { margin-right: 0 !important; }
    .single-directory-row { border: solid 2px #f5f5f5; width: 100%; margin-top: 25px; padding: 0; vertical-align: top; }
        .single-directory-row .directory-cell { background-color: #CDB273; display: inline-block; margin: 0; width: 100%; }
            .single-directory-row .directory-cell a { text-decoration: none; display: block; color: #333 !important; padding: 15px 5px 28px 5px; }
                .single-directory-row .directory-cell a h5 { font-weight: bold; font-size: 14px; line-height: 1.2em; min-height: 2.4em; max-height: 2.4em; margin: 0 auto; width: 100%; padding: 0 4px; }
                .single-directory-row .directory-cell a img { margin: 0 auto; margin-top: 15px; }
        .single-directory-row .categories { display: none; }
        .single-directory-row img.screw-light { display: none; }

    /*HOT PRODUCTS*/
    .owl-dots { display: none; }

    h2.hot-product-header { display: block; font-size: 16px; font-weight: bold; padding: 0; margin: 20px 0 -18px 0; }

    .single-hotproduct-row .hotproduct-cell { display: none; }
        .single-hotproduct-row .hotproduct-cell img { }
        .single-hotproduct-row .hotproduct-cell .hot-product-flame-header { font-size: 14px; color: #fff; font-weight: normal; position: absolute; top: 13px; left: 16px; }

    .single-hotproduct-row .products { display: block; width: 94%; margin: 5px auto; position: relative; vertical-align: middle !important; }
        .single-hotproduct-row .products .hot-slider-cell { margin-top: 0px; }
        .single-hotproduct-row .products .hot-product-prev { position: absolute; display: block; margin: 0; padding: 0; margin-top: -165px !important; left: 0; margin-left: -20px; }
            .single-hotproduct-row .products .hot-product-prev span { font-size: 22px !important; color: #ECECEC; }
        .single-hotproduct-row .products .hot-product-next { position: absolute; display: block; margin: 0; padding: 0; margin-top: -165px !important; right: 0; margin-right: -20px; }
            .single-hotproduct-row .products .hot-product-next span { font-size: 22px !important; color: #ECECEC; }

    /*LATEST ARTICLES*/
    .latest-articles ul li { width: 32%; padding: 0 0 0 0; margin-right: 1.8%; }
        .latest-articles ul li:nth-of-type(3n) { margin-right: 0; }
        .latest-articles ul li .article-cell { width: 100%; margin: 0; padding: 0; }
            .latest-articles ul li .article-cell .article-content .article-author { margin-top: 15px; min-height: 2.6em; line-height: 1.2em; }

    /*Home Banner*/
    .home_main_container .home-banner-slider .home-carousel-container .banner-prev { position: relative; display: block; float: left; margin: 0; top: 0; left: 0; margin-top: -19%; z-index: 99999; }
    .home_main_container .home-banner-slider .home-carousel-container .banner-next { position: relative; display: block; float: right; margin: 0; top: 0; left: 0; margin-top: -19%; z-index: 99999; }

    /*Storefront*/
    .newest-storefronts .sf-container .sf-prev { margin-top: -110px; left: 0px; margin-left: -8px; z-index: 999 !important }
    .newest-storefronts .sf-container .sf-next { margin-top: -110px; right: 0; margin-right: -8px; z-index: 999 !important }

    .hot-products-section { display: block !important; font-size: 16px; font-weight: bold; margin: 0 0 0 0; }
}

/*IPAD MEDIUM SIZE */
@media screen and (max-width: 768px) {
    /*LISTING VS BANNER */
    .home_main_container .home-dir-listing { display: none; }
    .home_main_container .home-banner-slider { width: 100%; }

    /*LATEST ARTICLES*/
    .latest-articles ul li { width: 49%; padding: 0 0 0 0; margin-right: 1.8% !important; }
        .latest-articles ul li:nth-of-type(2n) { margin-right: 0 !important; }
        .latest-articles ul li .article-cell { width: 100%; margin: 0; padding: 0; }
            .latest-articles ul li .article-cell .article-content .article-author { margin-top: 15px; min-height: 2.6em; line-height: 1.2em; }

    /*HOT PRODUCT*/
    .single-hotproduct-row .products .hot-product-prev { position: absolute; display: block; margin: 0; padding: 0; margin-top: -27% !important; left: 0; margin-left: -20px; border: solid 0px red; }
        .single-hotproduct-row .products .hot-product-prev span { font-size: 22px !important; color: #ECECEC; }
    .single-hotproduct-row .products .hot-product-next { position: absolute; display: block; margin: 0; padding: 0; margin-top: -27% !important; right: 0; margin-right: -20px; border: solid 0px red; }
        .single-hotproduct-row .products .hot-product-next span { font-size: 22px !important; color: #ECECEC; }

    .modal-dialog { display: inline-block; width: 70% !important; margin: 0 auto !important; padding: 0 !important; position: static; }
}

/*MOBILE */
@media screen and (max-width: 500px) {
    .owl-dots { display: none; }

    .home_main_container { }

        .home_main_container .sf-carousel-info { width: 100%; display: block; position: absolute; background-color: rgba(0,0,0, 0.6); color: #fff !important; text-decoration: none; padding: 3px 5px; bottom: 0px; line-height: 1em; }

        .home_main_container .sf-carousel-info--header { font-size: 11px !important; font-weight: bold; line-height: 1em; }

        .home_main_container .sf-carousel-info--description { font-size: 9px; margin-top: 2px; margin-left: 3px; line-height: 1em; }

        .home_main_container .home-dir-listing { display: none; }

        .home_main_container .home-banner-slider { width: 100%; }

            .home_main_container .home-banner-slider .home-icon-panel { display: none; }

    .supplier-rfq-container { margin-top: 0px; }

        .supplier-rfq-container .supplier-holder { display: none; }

        .supplier-rfq-container .rfq-holder { width: 100%; }

            .supplier-rfq-container .rfq-holder .rfq-tooltip { position: relative; top: -13px; right: 2px; }

    /*Home Banner*/
    .home_main_container .home-banner-slider .home-carousel-container .banner-prev { margin-top: -75px; left: 0; margin-left: 6px; z-index: 99999 }
    .home_main_container .home-banner-slider .home-carousel-container .banner-next { margin-top: -75px; right: 0; margin-right: 6px; z-index: 99999 }

    /*Latest Article*/
    .latest-articles img.screw-light { bottom: -20px; }

    .latest-articles ul li { display: inline-block; margin: 0; width: 100%; }

        .latest-articles ul li .article-cell { margin: 5px 0 8px 0; width: 100%; vertical-align: top; }

            .latest-articles ul li .article-cell .article-content .article-title { }

    /*DIRCTORIES WITH CATEGORIES*/
    .dir-holder { width: 49% !important; float: left; }

        .dir-holder:nth-child(2n) { float: right; }

    .single-directory-row { border: solid 2px #f5f5f5; width: 100%; margin-top: 25px; padding: 0; vertical-align: top; }

        .single-directory-row .directory-cell { background-color: #CDB273; display: inline-block; margin: 0; width: 100%; }

            .single-directory-row .directory-cell a { text-decoration: none; display: block; color: #333 !important; padding: 15px 5px 28px 5px; }

                .single-directory-row .directory-cell a h5 { font-weight: bold; font-size: 14px; line-height: 1.2em; min-height: 2.4em; margin: 0 auto; width: 80%; }

                .single-directory-row .directory-cell a img { margin: 0 auto; margin-top: 15px; }

        .single-directory-row .categories { display: none; }

        .single-directory-row img.screw-light { display: none; }

    /*Hot Products*/
    .single-hotproduct-row .hotproduct-cell .hot-product-flame-header { display: none; }

    .single-hotproduct-row img.screw-light { display: none; }

    .single-hotproduct-row .hotproduct-cell { display: none; }

    .single-hotproduct-row .products { display: block; width: 87%; margin: 5px 0 5px 24px; }
        .single-hotproduct-row .products .hot-product-prev { position: absolute; display: block; margin: 0; padding: 0; margin-top: -145px !important; left: 0; margin-left: -20px; }
        .single-hotproduct-row .products .hot-product-next { position: absolute; display: block; margin: 0; padding: 0; margin-top: -145px !important; right: 0; margin-right: -20px; }

    /*Storefront*/
    .newest-storefronts .sf-container .sf-prev { margin-top: -120px; left: 0px; margin-left: -8px; z-index: 999 !important }

    .newest-storefronts .sf-container .sf-next { margin-top: -120px; right: 0; margin-right: -8px; z-index: 999 !important }

    .modal-dialog { display: inline-block; width: 100% !important; position: absolute !important; }
}


[v-cloak] { display: none; }
