/*=============================================================
TEXT AND TITLES
==============================================================*/

/*heading and titles*/
h1,h2,h3,h4,h5,h6,.wsite-content-title,#banner h2,.blog-title,h2,h2 span#wsite-com-title{color:#2f2f2f} /*Changes Default Colors of all Titles*/

/*paragraph text*/
p,.paragraph,div.paragraph span,p span{color:#525252} /*Changes Default Colors of all Text*/

/*parallax background heading and titles*/
#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} /*Changes Default Colors of Titles within the Parallax Section*/

#parallax-bg p,#parallax-bg .paragraph, #parallax-bg div.paragraph span{color:#fff!important} /*Changes Default Colors of Text/Content within the Parallax Section*/


/*=============================================================
GENERAL ACCENT COLORS - CHANGE ALL OF THESE TO THE ACCENT COLOR OF YOUR CHOICE
==============================================================*/

/*main accent color - default = #289eba*/
#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,
.divider-title .section-line::before,.my_custom_menu li a:hover{background:#289eba !important}
hr.color_hr{background-color:#289eba !important}
.color{color:#289eba}
.form-required,#footer-wrap a:hover,#footer-bar a:hover,#footer-bar a span:hover{color:#289eba!important}
.wsite-button,.blog-button{background:#289eba!important}
blockquote{border-left:2px solid #289eba !important}
.title-page #banner h2,.tall-header-page #banner h2,.landing-page #banner h2{background:#289eba}

/*Other Background colors*/
.grey-bg h1 .grey-bg h2,.grey-bg h3,.grey-bg h4,.grey-bg h5,.grey-bg p{color:#7c7c7c}
.light-grey-bg{background:#f6f6f6;border-top:1px solid #e2e2e2}
.grey-bg{background:#f4f4f4}/*grey bg testimonial*/
.dark-bg{background:#404347}/*dark bg*/
.color-bg{background:#393c40}/*call wrap bg*/

/*=============================================================
HEADER AND INFO BAR
==============================================================*/

/*logo and header background*/
#header-wrap{background:#fff} /*Changes the default background color of the header wrap (where logo is positioned)*/

/*info bar*/
.info-bar{background:#f6f6f6;border-bottom:2px solid #0b683c} /*Changes backgroud color and border color of the info-bar at the very top of page*/
.info-bar .ibcontact,.info-bar .ibquote{color:#737373} /*Changes text color of the text in the info bar*/
.info-bar i{background:#0b683c;color:#fff} /*Changes backgroud and icon color of the icons in the info bar*/
.info-bar a{color:#737373} /*Changes text color of links in the info bar*/
.info-bar .wsite-social-item{background:#0b683c!important;color:#fff} /*Changes the background and icon color of the social icons in the info bar*/
.info-bar .wsite-social-item:hover {background:#404347!important;color:#fff} /*Changes the backgroud and icon color of the social icons in the info bar when hovering*/
@media screen and (max-width:1023px) {
.info-bar .ibcontact, .info-bar .ibquote{background:#404347;color:#fff} /*Changes backgroud color of the info bar on mobile devices*/
.info-bar a{color:#fff}} /*Changes link color of links in the info bar*/

/*top bar*/
.header-details i{color:#289eba} /*Changes the icon color of the phone/map icons in the header*/
#topbar .tbphone .wsite-text,#topbar .tbmail .wsite-text a {color:#2f2f2f}



/*Changes the color of the main text in the header/top bar*/
#topbar .tbphone-sub .wsite-text,#topbar .tbmail-sub .wsite-text {color:#737373} /*Changes the color of the sub text in the header/top bar*/
#topbar .tbphone-sub .wsite-text,#topbar .tbmail-sub .wsite-text a {color:#289eba} 


/*header*/
#header{background:#404347} /*Changes the backgroud color of the menu bar*/
.collapse #header{background:rgba(22,22,22,0.9)} /*Changes the backgroud color of the menu bar when collapsed*/

/*=============================================================
MENU
==============================================================*/

/*menu nav*/
.nav li a,.collapse .nav li a{color:#fff} /*Changes color of the menu items*/
.nav ul li a:after{background-color:#289eba} /*Changes color of menu items after they have been clicked on*/

.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:#289eba}/*Changes color of menu items when hovering on them*/

/*active menu background color*/
.nav li a:hover,.nav li#active a,.wsite-menu li a:hover{background:rgba(0,0,0,0.1)}

.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}/*Changes color of menu icons*/

#wsite-menus .wsite-menu li a{background:#404347!important;color:#fff}/*Changes color of sub menu backgroud and sub-menu items*/
#wsite-menus .wsite-menu li a:hover{background:#289eba!important;color:#fff}/*Changes color of sub menu backgroud and sub-menu items when hovering*/

/*mobile menu nav*/
#navmobile{background:#f3f3f3} /*Changes backgroud color of mobile menu*/

/*sidebar menu*/
.my_custom_menu li a{border-top:1px solid #ddd}/*Menu border color on custom sidebar menu*/
.my_custom_menu li a:hover{color:#fff!important}/*Menu item color when hovering on custom sidebar menu*/

/*mobile nav trigger*/
#nav-trigger{color:#fff !important}/*Changes color of mobile "hamburger" menu icon*/
#navmobile a{background:none!important;color:#333}
.wsite-mobile-menu li a:after{display:none}

/*transitions*/
@media only screen and (max-width: 1023px) {#nav-trigger {background-color: #fff}}

/*=============================================================
SLIDER/VIDEO HEADER AND SLIDER/VIDEO HEADER CAPTIONS
==============================================================*/

/*Video Header Captions*/
.video-caption h1 span{color:#fff;background:rgba(0,0,0,0.5)}/*Changes color of video header title*/
.video-content p span{color:#fff;background:rgba(0,0,0,0.5)}/*Changes color of video header sub-title*/

/*Slider Overlay*/
.tp-dottedoverlay{background-color:rgba(0,0,0,0.0)!important} /*Changes color of slider image overlay*/

/*Slider Captions*/
.wft-slide-caption{border:5px solid #ffffff!important;color:#ffffff!important;background:rgba(0,0,0,0.1)!important} /*Changes color of captions on normal image slider*/



/*=============================================================
PARALLAX AND OTHER OVERLAYS
==============================================================*/

/*parallax overlay
.para-overlay{background:rgba(18, 103, 62, 0.3)} /*Changes the color of the parallax overlay

/*=============================================================
WEEBLY BUTTON STYLING
==============================================================*/

/*wsite buttons*/
.wsite-button,.blog-button,.wsite-button-inner{color:#fff!important}/*Changes color of default blog button*/

/*BUTTON VARIATION 1 - BLACK BY DEFAULT*/
.wsite-button.wsite-button-normal{background:#222!important;color:#fff!important}/*Changes backgroud and text color of buttons*/
.wsite-button.wsite-button-normal .wsite-button-inner{background:none!important;color:#fff!important}/*Changes text color of black button inner*/
.wsite-button:hover{background:#289eba!important}/*Changes color of button backgroud when hovering*/

/*BUTTON VARIATION 2 - BLUE BY DEFAULT*/
.wsite-button.wsite-button-highlight{background:#289eba!important;color:#fff!important}/*Changes backgroud and text color of buttons*/
.wsite-button.wsite-button-highlight .wsite-button-inner{background:none!important;color:#fff!important}/*Changes text color of black button inner*/
.wsite-button-highlight:hover{background:#222!important}/*Changes color of button backgroud when hovering*/

/*active and focus*/
.wsite-button:focus,.wsite-button:active{color:#222!important;background:#444!important}/*Changes color of buttons when active*/


/*=============================================================
HEADER TYPE BANNER STYLING
==============================================================*/

/*header banners*/
#banner a{color:#fff}/*Changes color of link text in all banners*/

/*landing header page*/
.landing-page #banner h2{color:#fff} /*Changes color of h2 text in landing page banner*/
.landing-page #banner p,.landing-page #banner p span{color:#fff}/*Changes color of all other text in landing page banner*/

/*tall header page*/
.tall-header-page #banner h2{color:#fff}/*Changes color of h2 text in Tall Header banner*/

/*title page*/
.title-page #banner h2{color:#fff}/*Changes color of h2 text in Title Page banner*/
.title-page #banner{color:#fff}/*Changes color of all other text in Title Page banner*/

/*=============================================================
ACTION AND FOOTER
==============================================================*/

/*footer*/
#footer-wrap{background:#404347;color:#fff} /*changes footer backgroud and text color*/

#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:#289eba}/*Changes Title colors in footer*/


/*bottom footer bar*/
#footer-bar{background:#404347;border-top:1px solid rgba(255, 255, 255, 0.06)} /*Bottom footer (copyright) background and border*/
#footer-bar,#footer-bar span{color:#aeaeae!important} /*Changes bottom footer color*/



/*=============================================================
OTHER BITS (NORMALLY DO NOT NEED CHANGING)
==============================================================*/

/*social icons content and top bar*/
#main-content .wsite-social-item {color:#fff !important}
#main-content .wsite-social-item:hover {background:#444!important;color:#fff !important}

/*barallax background*/
#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}

#parallax-bg .callout-box a{color:#289eba}


.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}}

/*call section above footer on non-home page header types only*/
.slider-page #call-wrap h3{color:#2f2f2f}
#call-wrap h3{color:#fff}
#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}

/*other footer stuff*/
#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}


/*hover boxes*/
.img-hoover-wrap{background:#eee}


.slider-container{border-bottom:5px solid #289eba}

/*content a link color*/
#wsite-content a,.paragraph a,.columnlist-blog a{color:#289eba}


/*footer wrap and bar a hover*/
#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}


/*=============================================================
NORMALLY SHOULDNT BE TOUCHED UNLESS CSS EXPERIENCE IS PRESENT
==============================================================*/

/*forms*/
.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:#fffborder:1px solid #dcdcdc!important}
.jqTransformSelectWrapper ul a:active,.jqTransformSelectWrapper ul a:hover,.jqTransformSelectWrapper ul a.selected:hover{color:#525252}

/*gallery*/
.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}

/*Store*/
#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}