/* -------------------------------------------------------------------------------------------------------
CONTENT
------------------------------------------------------------------------------------------------------- */
/*Change this color code to set the title color of all headers*/

h1,
h2,
h3,
h4,
h5,
h6,
.wsite-content-title,
#banner h2,
.blog-title,
h2,
h2 span#wsite-com-title {
    color: #2f2f2f
}

/*Change this color code to set the paragraph text and body text color*/
p,
.paragraph,
div.paragraph span,
p span {
    color: #525252
}

/*Change this color code to set the Colors of Titles within the Parallax Section*/
#parallax-bg h1,
#parallax-bg h2,
#parallax-bg h3,
#parallax-bg h4,
#parallax-bg h5,
#parallax-bg h6,
#parallax-bg .wsite-content-title,
#parallax-bg h2#wsite-com-title,
#parallax-bg h2 span {
    color: #fff!important
}

/*Change this color code to set the Colors of Text/Content within the Parallax Section*/
#parallax-bg p,
#parallax-bg .paragraph,
#parallax-bg div.paragraph span {
    color: #fff!important
}

/* -------------------------------------------------------------------------------------------------------
GENERAL ACCENT COLORS - CHANGE ALL OF THE COLOR CODES IN THIS SECTION TO THE ACCENT COLOR OF YOUR CHOICE
main accent color - default = #7dd1e3
------------------------------------------------------------------------------------------------------- */
#topbar .wsite-social-item:hover,
#main-content .wsite-social-item,
.header-section h1::after,
.header-section h2::after,
.header-section h3::after,
.header-section h4::after,
.my_custom_menu li a:hover,
.wsite-button,
.blog-button,
.title-page #banner h2,
.tall-header-page #banner h2,
.landing-page #banner h2 {
    background: #7dd1e3 !important
}
hr.color_hr {
    background-color: #7dd1e3 !important
}
.color,
.form-required,
#footer-wrap a:hover,
#footer-bar a:hover,
#footer-bar a span:hover {
    color: #7dd1e3!important
}
blockquote {
    border-left: 2px solid #7dd1e3 !important
}

/* -------------------------------------------------------------------------------------------------------
OTHER BACKGROUND COLORS
------------------------------------------------------------------------------------------------------- */
/*Change this color code to set the title text color on grey backgrounds (DEFAULT = #7c7c7c)*/
.grey-bg h1 .grey-bg h2,
.grey-bg h3,
.grey-bg h4,
.grey-bg h5,
.grey-bg p {
    color: #7c7c7c
}

/*Change this color code to change the light grey background (DEFAULT = #f6f6f6)*/
.light-grey-bg {
    background: #f6f6f6;
    border-top: 1px solid #e2e2e2
}

/*Change this color code to change the grey background (DEFAULT = #f4f4f4)*/
.grey-bg {
    background: #f4f4f4
}

/*Change this color code to change the Dark grey background (DEFAULT = #f4f4f4)*/
.dark-bg {
    background: #404347
}

/*Change this color code to change the Secondary background color (DEFAULT = #393c40)*/
.color-bg {
    background: #393c40
}

/* -------------------------------------------------------------------------------------------------------
HEADER AND INFO BAR
------------------------------------------------------------------------------------------------------- */
/*Change this color code to set the background color of the top header - Where the logo resides (DEFAULT = #fff)*/
#header-wrap {
    background: #fff
}

/*Change this color code to set the backgroud color and border color of the info-bar at the very top of page
DEFAULT BACKGROUND = #f6f6f6
DEFAULT BORDER BOTTOM = #7dd13e  */
.info-bar {
    background: #f6f6f6;
    border-bottom: 2px solid #7dd1e3
}

/*Change this color to set the text color of the text in the info bar (DEFAULT = #737373)*/
.info-bar .ibcontact,
.info-bar .ibquote {
    color: #444;
}

/*Change this color to set the backgroud and icon color of the icons in the info bar
DEFAULT BACKGROUND = #7dd1e3
DEFAULT ICON COLOR = #fff  */
.info-bar i {
    background: #7dd1e3;
    color: #fff
}

/*Change this color to set the text color of links in the info bar (DEFAULT = #737373)*/
.info-bar a {
    color: #737373
}

/*Change this color code to set the background and icon color of the social icons in the info bar
DEFAULT BACKGROUND = #7dd1e3
DEFAULT ICON COLOR = #fff  */
.info-bar .wsite-social-item {
    background: #7dd1e3!important;
    color: #fff
}

/*Change this color code to set the backgroud and icon color of the social icons in the info bar when hovering
DEFAULT BACKGROUND = #404347
DEFAULT ICON COLOR = #fff  */
.info-bar .wsite-social-item:hover {
    background: #404347!important;
    color: #fff
}

/*Change this color code to set the icon color of the phone/map icons in the header (DEFAULT = #7dd1e3)*/
.header-details i {
    color: #7dd1e3
}

/*Change this color code to set the text action link color of the phone/map in the header (DEFAULT = #2f2f2f)*/
#topbar .entry-title a {
    color: #2f2f2f
}

/*Change this color code to set the sub text action link color of the phone/map in the header (DEFAULT = #737373)*/
#topbar .entry-content a {
    color: #737373
}

/*Change this color code to set the color of the main text in the header/top bar (DEFAULT = #2f2f2f)*/
#topbar .entry-title .wsite-text,
#topbar .entry-title .wsite-text {
    color: #2f2f2f
}

/*Change this color code to set the color of the sub text in the header/top bar (DEFAULT = #737373)*/
#topbar .entry-content .wsite-text,
#topbar .entry-content .wsite-text {
    color: #737373
}

/*Change this color code to set the backgroud color of the menu bar (DEFAULT = #404347)*/
#header {
    background: #404347
}

/*Change this color code to set the backgroud color of the menu bar when collapsed (DEFAULT = rgba(22, 22, 22, 0.9))*/
.collapse #header {
    background: rgba(22, 22, 22, 0.9)
}

/* -------------------------------------------------------------------------------------------------------
MENU COLORS - DESKTOP/LAPTOP
------------------------------------------------------------------------------------------------------- */
/*Change this color code to set the color of the menu items (DEFAULT = #fff)*/
.nav li a,
.collapse .nav li a {
    color: #fff
}

/*Change this color code to set the color of menu items after they have been clicked on (DEFAULT = #7dd1e3)*/
.nav ul li a:after {
    background-color: #7dd1e3
}

/*Change this color code to set the color of menu items when hovering on them (DEFAULT = #7dd1e3)*/
.nav li a:hover,
.nav li a:focus,
.wsite-menu li a:hover,
.wsite-menu li a:focus,
.nav li#active a,
.nav li:hover a {
    color: #7dd1e3
}

/*Change this color code to set the active menu background color (DEFAULT = rgba(0, 0, 0, 0.1))*/
.nav li a:hover,
.nav li#active a,
.wsite-menu li a:hover {
    background: rgba(0, 0, 0, 0.1)
}

/*Change this color code to set the color of menu icons (DEFAULT = #fff)*/
.wsite-nav-1:before,
.wsite-nav-2:before,
.wsite-nav-3:before,
.wsite-nav-4:before,
.wsite-nav-5:before,
.wsite-nav-6:before,
.wsite-nav-7:before,
.wsite-nav-8:before,
.wsite-nav-9:before,
.wsite-nav-10:before,
.wsite-nav-11:before {
    color: #fff
}

/*Change this color code to set the color of sub menu backgroud and sub-menu items
DEFAULT BACKGROUND = #404347
DEFAULT COLOR = #fff	*/
#wsite-menus .wsite-menu li a {
    background: #404347!important;
    color: #fff
}

/*Change this color to set the color of sub menu backgroud and sub-menu items when hovering
DEFAULT BACKGROUND = #7dd1e3
DEFAULT COLOR = #fff	*/
#wsite-menus .wsite-menu li a:hover {
    background: #7dd1e3!important;
    color: #fff
}

/*Change this for the border at top of no header pages on tablet & mobile devices (DEFAULT = #eee)*/
@media only screen and (max-width: 1023px) {
    #wrapper {
        border-top:1px solid #eee
    }
}
/* -------------------------------------------------------------------------------------------------------
MENU COLORS - MOBILE / TABLET
------------------------------------------------------------------------------------------------------- */
/*Change this color code to set the backgroud color of mobile menu (DEFAULT = #f3f3f3)*/
#navmobile {
    background: #f3f3f3
}

/*Change this color code to set the Menu border color on custom sidebar menu (DEFAULT = #ddd)*/
.my_custom_menu li a {
    border-top: 1px solid #ddd
}

/*Change this color code to set the Mobile Menu item color when hovering on custom sidebar menu (DEFAULT = #fff)*/
.my_custom_menu li a:hover {
    color: #fff!important
}

/*Change this color code to set the color of mobile "hamburger" menu icon (DEFAULT = #fff)*/
#nav-trigger {
    color: #fff !important
}

/*Change this color code to set the color of the menu item link in the mobile menu (DEFAULT = #333)*/
#navmobile a {
    background: none!important;
    color: #333
}

/*DO NOT CHANGE THIS VALUE*/
.wsite-mobile-menu li a:after {
    display: none
}
/*DO NOT CHANGE THIS VALUE*/
@media only screen and (max-width: 1023px) {
    #nav-trigger {
        background-color: #fff
    }
}
/* -------------------------------------------------------------------------------------------------------
SLIDER/VIDEO HEADER AND SLIDER/VIDEO HEADER CAPTIONS
------------------------------------------------------------------------------------------------------- */
/*Change this color code to set the color and background of video header title
DEFAULT BACKGROUND = rgba(0, 0, 0, 0.5)
DEFAULT TEXT COLOR = #fff	*/
.video-caption h1 span {
    color: #fff;
    background: rgba(0, 0, 0, 0.5)
}

/*Change this color code to set the color and background of video header sub-title
DEFAULT BACKGROUND = rgba(0, 0, 0, 0.5)
DEFAULT TEXT COLOR = #fff	*/
.video-content p span {
    color: #fff;
    background: rgba(0, 0, 0, 0.5)
}

/*Change this color code to set the color of slider image overlay (DEFAULT = rgba(0, 0, 0, 0.7))*/
.tp-dottedoverlay {
    background-color: rgba(0, 0, 0, 0.7)!important
}

/*Change this color code to set the color and background of slider header caption
BORDER = #fff
DEFAULT BACKGROUND = rgba(0, 0, 0, 0.1)
DEFAULT TEXT COLOR = #fff	*/
.wft-slide-caption {
    border: 5px solid #ffffff!important;
    color: #ffffff!important;
    background: rgba(0, 0, 0, 0.1)!important
}

/* -------------------------------------------------------------------------------------------------------
PARALLAX SECTION
------------------------------------------------------------------------------------------------------- */
/*Change this color code to set the color of the parallax overlay (DEFAULT rgba(22, 22, 22, 0.8))*/
.para-overlay {
    background: rgba(22, 22, 22, 0.8)
}

/* -------------------------------------------------------------------------------------------------------
STANDARD WEEBLY BUTTON STYLE
------------------------------------------------------------------------------------------------------- */
/*Change this color code to set the text color of the blog button (DEFAULT = #fff)*/
.wsite-button,
.blog-button,
.wsite-button-inner {
    color: #fff!important
}

/*====== BUTTON VARIATION 1 - BLACK BY DEFAULT ======*/
/*Change this color code to set the backgroud and text color of button
DEFAULT BACKGROUND = #222
DEFAULT COLOR = #fff	*/
.wsite-button.wsite-button-normal {
    background: #222!important;
    color: #fff!important
}

/*Change this color code to set the text color of black button inner (DEFAULT = #fff)*/
.wsite-button.wsite-button-normal .wsite-button-inner {
    background: none!important;
    color: #fff!important
}

/*Change this color code to set the color of button background when hovering (DEFAULT = #7dd1e3)*/
.wsite-button:hover {
    background: #7dd1e3!important
}

/*====== BUTTON VARIATION 2 - BLUE BY DEFAULT ======*/
/*Change this color code to set the backgroud and text color of button
DEFAULT BACKGROUND = #7dd1e3
DEFAULT COLOR = #fff	*/
.wsite-button.wsite-button-highlight {
    background: #7dd1e3!important;
    color: #fff!important
}

/*Change this color code to set the text color of black button inner (DEFAULT = #fff)*/
.wsite-button.wsite-button-highlight .wsite-button-inner {
    background: none!important;
    color: #fff!important
}

/*Change this color code to set the color of button background when hovering (DEFAULT = #222)*/
.wsite-button-highlight:hover {
    background: #222!important
}

/*Change this color code to set the color of buttons when active (for mobile devices)
DEFAULT BACKGROUND = #222
DEFAULT TEXT COLOR = #444	*/
.wsite-button:focus,
.wsite-button:active {
    color: #222!important;
    background: #444!important
}

/* -------------------------------------------------------------------------------------------------------
HEADER TYPE BANNER STYLING
------------------------------------------------------------------------------------------------------- */
/*Change this color code to set the color of link text in all banners (DEFAULT = #fff)*/
#banner a,
.landing-page #banner h2,
.landing-page #banner p,
.landing-page #banner p span,
.tall-header-page #banner h2,
.title-page #banner h2,
.title-page #banner {
    color: #fff
}

/* -------------------------------------------------------------------------------------------------------
ACTION AND FOOTER
------------------------------------------------------------------------------------------------------- */
/*Change this color code to set the footer backgroud and text color
DEFAULT BACKGROUND = #404347
DEFAULT TEXT COLOR = #FFF	*/
#footer-wrap {
    background: #404347;
    color: #fff
}

/*Change this color code to set the footer Title color (DEFAULT = #7dd1e3)*/
#footer-wrap h1,
#footer-wrap h2,
#footer-wrap h3,
#footer-wrap h4,
#footer-wrap h5,
#footer-wrap .wsite-content-title,
#footer-wrap h2 #wsite-com-title {
    color: #7dd1e3
}

/*Change this color code to set the backgroud and border color of the bottom footer (AKA Copyright section)
DEFAULT BACKGROUD = #404347
DEFAULT BORDER = rgba(255, 255, 255, 0.06)	*/
#footer-bar {
    background: #404347;
    border-top: 1px solid rgba(255, 255, 255, 0.06)
}

/*Change this color code to set the Text color of the bottom footer (AKA Copyright section) (DEFAULT = #aeaeae)*/
#footer-bar,
#footer-bar span {
    color: #aeaeae!important
}

/* -------------------------------------------------------------------------------------------------------
OTHER COLOR CODES - DO NOT CHANGE UNLESS YOU ARE COMFORTABLE WITH CSS THESE SHOULD NOT NEED CHANGING
------------------------------------------------------------------------------------------------------- */
#main-content .wsite-social-item {
    color: #fff !important
}
#main-content .wsite-social-item:hover {
    background: #444!important;
    color: #fff !important
}
#parallax-bg {
    color: #d9d9d9
}
#parallax-bg .callout-box {
    background: rgba(17, 140, 217, 0.8)
}
#parallax-bg .callout-box h3 {
    color: #fff
}
#parallax-bg .callout-box p {
    color: #eee
}
.blogCommentLevel1,
.blogCommentLevel2 {
    border-left: 8px solid #f3f3f3
}
@media only screen and (max-width: 1023px) {
    #nav-trigger {
        color: #fff !important
    }
    .postload #wsite-nav-cart-num {
        color: #fff
    }
    #main-content {
        background: #fff
    }
    .wsite-com-column {
        border: 1px solid #eee!important
    }
    .blog-sidebar .column-blog {
        border-top: 1px solid #e5e5e5
    }
}
.slider-page #call-wrap h3 {
    color: #2f2f2f!important
}
#call-wrap h3 {
    color: #fff!important
}
#call-wrap a {
    border: 2px solid #fff;
    color: #fff
}
#call-wrap a:hover {
    border: 2px solid #fff;
    background: #fff;
    color: #222
}
#call-wrap .clphone i {
    color: #fb5642
}
#footer-wrap hr {
    background: rgba(255, 255, 255, 0.06)
}
#footer-wrap div.paragraph,
#footer-wrap blockquote span,
#footer-wrap .contact-info-widget div {
    color: #bdc0c4!important
}
.img-hoover-wrap {
    background: #eee
}
.slider-container {
    border-bottom: 5px solid #7dd1e3
}
#wsite-content a,
.paragraph a,
.columnlist-blog a {
    color: #7dd1e3
}
#footer-wrap a,
#footer-wrap div.paragraph,
#footer-wrap .paragraph,
#footer-bar a,
#footer-wrap a span,
#footer-bar a span,
#footer-wrap .contact-info-widget ul li a {
    color: #bdc0c4
}
.wsite-form-field div.wsite-form-input-container .wsite-form-input {
    color: #c7c7c7
}
.wsite-form-input,
.wsite-search-element-input,
#commentPostDiv .field input[type=text],
#commentPostDiv .field textarea {
    border: 1px solid #ddd!important
}
.wsite-form-input:focus,
.wsite-search-element-input:focus,
#commentPostDiv .field input[type=text]:focus,
#commentPostDiv .field textarea:focus {
    border-color: #ddd!important
}
.jqTransformSelectWrapper {
    border: 1px solid #dcdcdc!important
}
.jqTransformSelectWrapper ul {
    background-color: #fff;
    border: 1px solid #dcdcdc!important
}
.jqTransformSelectWrapper ul a:active,
.jqTransformSelectWrapper ul a:hover,
.jqTransformSelectWrapper ul a.selected:hover {
    color: #525252
}
.jqTransformCheckbox {
    background: #eee;
    border: 2px solid #ddd
}
.form-field-error a.jqTransformChecked,
a.jqTransformChecked {
    background: #7dd1e3
}
.galleryCaptionHolderInnerBg,
.wsite-com-category-subcategory-name-bg {
    background: #fff
}
.galleryCaptionInnerTextHolder {
    background: rgba(255, 255, 255, .8)
}
.wsite-com-category-subcategory-name-text {
    color: #000!important
}
.galleryCaptionInnerText {
    color: #000!important
}
.fancybox-overlay {
    background: #fff!important
}
.col-right {
    width: 22%;
    position: relative;
    background: #f6f6f6;
    top: 0;
    bottom: 0;
    height: 100%;
    right: -95px;
    padding: 50px 40px 49px;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd
}
#wrapper-content {
    width: 100%;
    min-height: 100%;
    margin: 0 auto;
    background: #fff;
    overflow: hidden
}
body #header-wrap {
    width: 100%;
    top: 0;
    left: 0;
    padding: 0;
    box-sizing: border-box
}
.slider-page #main-wrap .content-wrap {
    background: #fff
}
.wsite-image {
    color: #222
}
.wsite-logo a {
    color: #000
}
.rs-fullvideo-cover {
    background: rgba(0, 0, 0, 0.4)!important
}
#call-right.col-right {
    background: #f6f6f6;
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd
}
#wsite-com-product-list .wsite-com-link-text,
#wsite-com-product-title {
    color: #000
}
#wsite-com-hierarchy .wsite-com-link:hover {
    color: #a6a6a6
}
.wsite-com-product-option-color-container {
    border: 1px solid #e5e5e5;
    background: #fff
}