body, .sp-preloader {
    background-color: #FFFFFF;
    color: #252525
}

    .sp-preloader > div {
        background: #0345BF
    }

        .sp-preloader > div:after {
            background: #FFFFFF
        }
:root {
  /*--theme-color: #307A8B;*/
	--theme-color: #333333;
}
/*  contact btn  */
#contact {
    background: #000;
    color: #fff !important;
    padding: 10px 15px;
    /*border-radius: 4px;*/
    display: inline-block;
    text-decoration: none;
    transition: background 0.2s ease;
    line-height: initial;
}

    #contact:hover {
        background: #333;
        color: #fff !important;
    }
/*  Top Bar  */
#sp-top-bar {
    /*background: #333333;*/
    background: color-mix(in srgb, var(--theme-color) 80%, white);
    color: #AAAAAA
}

    #sp-top-bar a, #sp-top-bar .fas, #sp-top-bar .far {
        /*color: #AAAAAA;*/
		color: white;
    }

/*  Top Nav  */
#sp-header {
    background: #FFFFFF
}

/*  Page Title  */
.sp-page-title {
    /*background: #0345BF;*/
	/*background-color: color-mix(in srgb, var(--theme-color) 80%, white);*/
    background: var(--theme-color);
}
/*  home page   */
.esma-hero {
    background: var(--theme-color) !important;
}
/*  Category page   */
#section-id-1541584580065 {
    background: var(--theme-color) !important;
}
/*  Brochure Button  */
.esma-cat__btn {
    display: inline-block;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 14px 28px;
    border: 2px solid #000;
    background: #000;
    color: #fff;
    text-decoration: none;
    transition: background .16s ease,border-color .16s ease,color .16s ease;
}

    .esma-cat__btn:hover, .esma-cat__btn:focus {
        background: #333;
        border-color: #333;
        color: #fff;
        text-decoration: none;
    }

.esma-cat__copy a:not(.esma-cat__btn):not(.esma-cat__more) {
    color: #555;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

    .esma-cat__copy a:not(.esma-cat__btn):not(.esma-cat__more):hover {
        color: #000;
    }
/* RFQ Btn*/
.btn-color2 {
	background-color:white !important;
	color: black !important;
}
/*  Footer  */
#sp-footer, #sp-bottom {
    background: color-mix(in srgb, var(--theme-color) 80%, white);
    color: #FFFFFF
}

    #sp-footer a, #sp-bottom a {
        /*color: #A2A2A2;*/
		color: white;
    }

        #sp-footer a:hover, #sp-footer a:active, #sp-footer a:focus, #sp-bottom a:hover, #sp-bottom a:active, #sp-bottom a:focus {
            color: #FFFFFF
        }

    #sp-bottom .sp-module-content .latestnews > li > a > span {
        color: #FFFFFF
    }

/*  Specifications table  */
.spec-table {
    width: 100%;
    background-color: #dedede;
}

    .spec-table td {
        background-color: #dedede;
    }

.brochure-table tr {
    border: 3px solid #e5e7eb !important;
}

#sp-menu ul.social-icons a:hover, #sp-menu ul.social-icons a:focus {
    color: #0345BF
}

a {
    color: #0345BF
}

    a:hover, a:focus, a:active {
        color: #044CD0
    }

.tags > li {
    display: inline-block
}

    .tags > li a {
        background: rgba(3, 69, 191, 0.1);
        color: #0345BF
    }

        .tags > li a:hover {
            background: #044CD0
        }

.article-social-share .social-share-icon ul li a {
    color: #252525
}

    .article-social-share .social-share-icon ul li a:hover, .article-social-share .social-share-icon ul li a:focus {
        background: #0345BF
    }

.pager > li a {
    border: 1px solid #ededed;
    color: #252525
}

.sp-reading-progress-bar {
    background-color: #0345BF
}

.sp-megamenu-parent > li > a {
    color: #252525
}

.sp-megamenu-parent > li:hover > a {
    color: #0345BF
}

.sp-megamenu-parent > li.active > a, .sp-megamenu-parent > li.active:hover > a {
    color: #0345BF
}

.sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
    background: #FFFFFF
}

.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
    color: #252525
}

    .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover {
        color: #0345BF
    }

.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a {
    color: #0345BF
}

.sp-megamenu-parent .sp-mega-group > li > a {
    color: #252525
}

#offcanvas-toggler > .fa {
    color: #252525
}

    #offcanvas-toggler > .fa:hover, #offcanvas-toggler > .fa:focus, #offcanvas-toggler > .fa:active {
        color: #0345BF
    }

#offcanvas-toggler > .fas {
    color: #252525
}

    #offcanvas-toggler > .fas:hover, #offcanvas-toggler > .fas:focus, #offcanvas-toggler > .fas:active {
        color: #0345BF
    }

#offcanvas-toggler > .far {
    color: #252525
}

    #offcanvas-toggler > .far:hover, #offcanvas-toggler > .far:focus, #offcanvas-toggler > .far:active {
        color: #0345BF
    }

.offcanvas-menu {
    background-color: #FFFFFF;
    color: #252525
}

    .offcanvas-menu .offcanvas-inner a {
        color: #252525
    }

        .offcanvas-menu .offcanvas-inner a:hover, .offcanvas-menu .offcanvas-inner a:focus, .offcanvas-menu .offcanvas-inner a:active {
            color: #0345BF
        }

    .offcanvas-menu .offcanvas-inner ul.menu > li a, .offcanvas-menu .offcanvas-inner ul.menu > li span {
        color: #252525
    }

        .offcanvas-menu .offcanvas-inner ul.menu > li a:hover, .offcanvas-menu .offcanvas-inner ul.menu > li a:focus, .offcanvas-menu .offcanvas-inner ul.menu > li span:hover, .offcanvas-menu .offcanvas-inner ul.menu > li span:focus {
            color: #0345BF
        }

    .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler, .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .menu-separator > .menu-toggler {
        color: rgba(37, 37, 37, 0.5)
    }

    .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent .menu-toggler {
        color: rgba(37, 37, 37, 0.5)
    }

    .offcanvas-menu .offcanvas-inner ul.menu > li li a {
        color: rgba(37, 37, 37, 0.8)
    }

.btn-primary, .sppb-btn-primary {
    border-color: #0345BF;
    background-color: #0345BF
}

    .btn-primary:hover, .sppb-btn-primary:hover {
        border-color: #044CD0;
        background-color: #044CD0
    }

ul.social-icons > li a:hover {
    color: #0345BF
}

.layout-boxed .body-innerwrapper {
    background: #FFFFFF
}

.sp-module ul > li > a {
    color: #252525
}

    .sp-module ul > li > a:hover {
        color: #0345BF
    }

.sp-module .latestnews > div > a {
    color: #252525
}

    .sp-module .latestnews > div > a:hover {
        color: #0345BF
    }

.sp-module .tagscloud .tag-name:hover {
    background: #0345BF
}

.search .btn-toolbar button {
    background: #0345BF
}

.sp-comingsoon body {
    background-color: #0345BF
}

.pagination > li > a, .pagination > li > span {
    color: #252525
}

    .pagination > li > a:hover, .pagination > li > a:focus, .pagination > li > span:hover, .pagination > li > span:focus {
        color: #252525
    }

.pagination > .active > a, .pagination > .active > span {
    border-color: #0345BF;
    background-color: #0345BF
}

    .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span:hover, .pagination > .active > span:focus {
        border-color: #0345BF;
        background-color: #0345BF
    }

.error-code, .coming-soon-number {
    color: #0345BF
}
