@charset "utf-8";
/* CSS Document */
/*----*****---- << Responsive >> ----*****----*/

#product-float-right { border:none; float:right;width:380px; margin-left:40px;} /*created for spectra df-500 page */
#product-float-right figcaption {text-align:center;}

/* Horizontal display of contact form labels and fields for wider screen format */
.wide-form .contact-form-labels {
    width: 250px;
    float: left;
    text-align: right;
    line-height: 3em;
}
.wide-form .contact-form-labels + div {
    float: left;
    margin-left: 10px;
    display: inline;
}
.recaptcha-wideform {
    margin-left: 250px;
}
.tinynav {
    display: none;
    background-color: #ffffff;
    background-position: center right;
    background-repeat: no-repeat;
    border: none;
    border-radius: 0px;
    width: 100%;
    margin: 6px 0px 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}
/* For the labels on customer info form, request-for-quote page.  */
table.no-see-um {
    border: none;
}
table.no-see-um > tbody > tr > td {
    border-width: 0px;
    background: none; 
    font-size: 16px;
    line-height: 1.5em;
    vertical-align: text-top;
}
/* This is to line up text following the the checkboxes.  */
table.no-see-um > tbody > tr > td:first-child {
    width: 20px;
}
table.no-see-um-labels > tbody > tr > td {
    border-width: 0px;
    border: none;
    background: white;
    font-size: 14px;
    vertical-align: bottom;
    text-align: left;
    padding-bottom: 0;
    height: 2em;
}
#order_form_contact div {
    width: 98%;
}
/*	added 10/20/17 CEG for SASS 2300 and 3100 parts orderforms so labels will align correctly. */
#order_form_contact table.no-see-um-labels > tbody > tr > td {
    text-align: left;
    width: 90%;
}
/* ----- added feb 3 2020 to accommodate larger container width set on line 219 of style.css ----  */
@media only screen and (min-width: 990px) and (max-width: 1100px) {
    .container {
        width: 960px;
    }
    /* Horizontal display of contact form labels and fields for wider screen format */
    .wide-form .contact-form-labels {
        width: 250px;
        float: left;
        text-align: right;
        line-height: 3em;
    }
    .wide-form .contact-form-labels + div {
        float: left;
        margin-left: 10px;
        display: inline;
    }
}
/*----*****---- << Tablet (Portrait) >> ----*****----*/
/* Note: Design for a width of 768px, Gutter: 30px, Unit: 32px */
@media only screen and (min-width: 768px) and (max-width: 989px) {
    .container {
        width: 750px;
    }
    /*	Horizontal display of contact form labels and fields for wider screen format */
    .wide-form .contact-form-labels {
        width: 250px;
        float: left;
        text-align: right;
        line-height: 3em;
    }
    .wide-form .contact-form-labels + div {
        float: left;
        margin-left: 10px;
        display: inline;
    }
    /*----*****---- << Menu >> ----*****----*/
    ul.menu li a {
        padding: 0px 18px;
    }
  /*  ul.menu li a {
        font-size: 12px;*/
    
    ul.menu li ul li a {
        text-transform: none;
    }
    ul.menu li ul {
        width: 300px;
    }
    ul.menu li ul ul {
        left: 250px;
    }
    ul.menu-rounded li a {
        padding: 0px 15px;
    }
    ul.menu-rounded li {
        margin: 10px 3px;
    }
    /*----*****---- << Main >> ----*****----*/
    .content {
        width: 518px;
    }
    .content-full-width {
        width: 100%;
    }

    .tabs-vertical-frame-content {
        width: 75.5%;
    }
    ul.tabs-vertical-frame {
        width: 18%;
    }
    ul.tabs-vertical-frame li a {
        width: 76.5%;
    }
    .toggle-frame {
        width: 94.5%;
    }
    ul.tabs-frame {
        width: 97.5%;
    }
    .tabs-frame-content {
        width: 95.8%;
    }
    /*----*****---- << Contact >> ----*****----*/
    .main-contact-details ul.contact-details li a {
        font-size: 12px;
    }
    .main-contact-details ul.contact-details li {
        margin: 0px 0.5% 10px;
    }
    /*----*****---- << Features >> ----*****----*/
    .main-content {
        width: 73%;
    }
    /*----*****---- << Footer >> ----*****----*/
    #footer .widget ul.contact-details li p a {
        font-size: 12px;
    }
    #footer .widget h2.widgettitle {
        font-size: 16px;
    }
    #footer .widget form label {
        float: left;
        margin-bottom: 5px;
    }
    #footer .widget form input[type="text"], #footer .widget form textarea {
        width: 92%;
    }
    .footer-copyright ul li {
        margin-bottom: 10px;
    }
    td {
        height: 2.3em;
        vertical-align: bottom;
        /*text-align: right;*/
    }
    /*august 2019 moved this from style.css, was interfering with share buttons */
    img {
        /*	display: block; */
        margin: 0 auto;
        max-width: 100%;
    }
    .separator {
        margin-right: 10px;
        border-right: thin solid silver;
    }}

/*----*****---- << Mobile (Landscape) >> ----*****----*/
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .tinynav {
        display: block;
        background-image: url(../images/hamburger-menu.png);
		font-size:18px;  /* added 2/19/2021 trying to fix mobile menu */
	  }
	
	#product-float-right { border:none; float:none;} 
	#product-float-right img {max-width:90%;}
	
    /* Horizontal display of contact form labels and fields for wider screen format */
    .wide-form .contact-form-labels {
        float: left;
        margin-left: 10px;
        line-height: 1em;
        margin-top: 15px;
        text-align: left;
    }
    .wide-form .contact-form-labels + div {
        float: left;
    }
    .recaptcha-wideform {
        margin-left: 20px;
    }
    #top-menu ul.menu {
        display: none
    }
    .container {
        width: 460px;
    }
    /*----*****---- << Header >> ----*****----*/
    #logo {
        width: 100%;
        text-align: center;
    }
    .social-icons {
        width: 100%;
        text-align: center;
        margin: 20px 0px 10px;
    }
    .social-icons a {
        float: none;
        display: inline-block;
    }
    #searchform {
        width: 99.8%;
        margin: 5px 0px 10px;
    }
    #searchform input[type="text"], #searchform input[type="text"]:hover, #searchform input[type="text"]:focus {
        width: 405px;
    }
    /*----*****---- << Home Slider >> ----*****----*/
    .slider-content {
        width: 100%;
        text-align: center;
    }
    .slider-image {
        width: 100%;
        clear: both;
        text-align: center;
    }
    .slider-image img {
        max-width: 90%;
    }
    .slider-content ul, .slider-content .short-desc {
        display: none;
    }
    /*----*****---- << Columns >> ----*****----*/
    .column {
        margin: 0px;
    }
    .content .one-fourth, .content .one-half, .content .one-third, .content .three-fourth, .content .two-third, .content .one-fifth, .content .four-fifth, .content .three-fifth, .content .two-fifth {
        text-align: left;
    }
    .one-fourth, .one-half, .one-third, .three-fourth, .two-third, .one-fifth, .four-fifth, .three-fifth, .two-fifth {
        width: 100%;
    }
    .readmore {
        display: inline-block;
        float: none;
        text-align: left;
    }
    .home .gallery .column.one-third {
        margin-bottom: 20px;
    }
 
    /*----*****---- << Main >> ----*****----*/
    .content {
        width: 100%;
        padding: 0px 0px 30px;
        background: none;
        margin: 0px;
    }
    .inner-with-sidebar, .content.with-left-sidebar .inner-with-sidebar {
        display: none;
    }
 
    
    /*----*****---- << Styled Elements >> ----*****----*/
    .dropcap {
        float: none;
        margin-bottom: 15px;
        display: inline-block;
    }
    ul, ol {
        text-align: left;
    }
    ul.tabs-frame {
        width: 96.5%;
    }
    .tabs-frame-content {
        width: 92.8%;
        text-align: left;
    }
    ul.tabs-vertical-frame {
        margin-right: 32px;
    }
    .tabs-vertical-frame-content {
        width: 66%;
    }
    ul.tabs-vertical-frame li a.current span {
        right: -25px;
    }
    h5.toggle, .toggle-content, h5.toggle-accordion {
        text-align: left;
    }
    /*----*****---- << 404 >> ----*****----*/
    .errorpage-info h3, .errorpage-info h4 {
        line-height: normal;
    }
    /*----*****---- << Contact >> ----*****----*/
    .one-half form {
        text-align: left;
        margin-bottom: 20px;
        float: left;
        width: 100%;
    }
    .two-third textarea {
        width: 90%;
    }
    .one-third input[type="text"] {
        width: 90%;
    }
    /*----*****---- << Features >> ----*****----*/
    .side-nav-container {
        width: 100%;
        background: none;
        padding: 0px;
        border: none;
    }
    ul.side-nav {
        background: none;
    }
    .side-nav-bottom {
        background: none;
    }
    ul.side-nav li {
        width: auto;
        background: none;
        clear: none;
        display: inline;
        margin: 0px;
    }
    ul.side-nav li a {
        background: #ffffff;
        margin: 0px 5px 10px;
        width: auto;
        padding: 10px;
    }
    ul.side-nav li a:hover, ul.side-nav li.current_page_item a {
        background: #E5E5E5;
    }
    ul.side-nav li.current_page_item a span {
        background: none;
    }
    .main-content {
        width: 100%;
    }
    /*----*****---- << Footer >> ----*****----*/
   
    #footer .widget .testimonial-skin-carousel ul li {
        width: 450px;
        background: none;
        padding: 0px;
    }
    
    #footer .widget .social-icons a {
        float: left;
    }
    .footer-copyright.align-center .footer-logo {
        position: inherit;
        top: 0px;
    }
    #footer .widget form label {
        width: 37%;
    }
    .footer-copyright .copyright-content {
        width: 100%;
        margin: 10px 0px 0px;
        text-align: center;
    }
    .footer-copyright ul {
        margin: 0px;
        text-align: center;
    }
    .footer-copyright ul li {
        display: inline-block;
        text-align: center;
        float: none;
    }
    .footer-logo {
        width: 100%;
        text-align: center;
        margin: 10px 0px 0px;
    }
    table.no-see-um-labels > tbody > tr > td {
        text-align: left;
    } /* this is for the Request for Quote form */
    /*august 2019 moved this from style.css, was interfering with share buttons */
    img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
    }
	
	    /* for Top of Page button added 6/3/19 */
    #myBtn {
        bottom: 2px;
        right: 2px;
        font-size: 16px;
        padding: 0 7px 10px;
		
    }
}
/*----*****---- << Mobile >> ----*****----*/
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (min-width: 321px) and (max-width: 479px) {
    body {
        font: normal 16px;
        margin: 0;
    } /* 4/13/18 testing for larger text on phone display ceg */
	
	#product-float-right { border:none; float:none;max-width:90%;} 
	#product-float-right img {max-width:90%;}
	
    /* Horizontal display of contact form labels and fields for wider screen format */
    .wide-form .contact-form-labels {
        float: left;
        margin-left: 10px;
        line-height: 1em;
        margin-top: 15px;
        text-align: left;
    }
    .wide-form .contact-form-labels + div {
        float: left;
    }
    .recaptcha-wideform {
        margin-left: 20px;
    }
    .tinynav {
        display: block;
        background-image: url(../images/hamburger-menu.png);
		font-size:18px;  /* added 2/19/2021 trying to fix mobile menu */
    }
    #top-menu ul.menu {
        display: none
    }
    #download-quote-print-bar {
        font-size: .9em;
    } /* added 4/23/18 so line won't break*/
    /*	 .container { width:300px; } commented 4/23/18 */
    .container {
        width: 98%;
    }
    /*----*****---- << Header >> ----*****----*/
    #logo {
        width: 100%;
        text-align: center;
    }
    #header .float-right {
        width: 100%;
    }
    .social-icons {
        width: 100%;
        text-align: center;
        margin: 20px 0px 10px;
    }
    .social-icons a {
        float: none;
        display: inline-block;
        margin: 0px 2px;
    }
    #searchform {
        width: 99.8%;
        margin: 5px 0px 10px;
    }
    #searchform input[type="text"], #searchform input[type="text"]:hover, #searchform input[type="text"]:focus {
        width: 246px;
    }
    /*----*****---- << Home Slider >> ----*****----*/
    .banner-slider-container {
        width: 100%;
        height: 300px !important;
    }
    #banner-slider {
        height: 300px;
    }
    #banner-slider > li {
        max-height: 300px !important;
    }
    .slider-content h2 {
        font-size: 18px;
    }
    .slider-content {
        width: 100%;
        text-align: center;
    }
    .slider-image {
        width: 100%;
        clear: both;
        text-align: center;
    }
    .slider-image img {
        max-width: 90%;
    }
    .slider-content ul, .slider-content .short-desc {
        display: none;
    }
    /*----*****---- << Columns >> ----*****----*/
    .column {
        margin: 0px;
    }
    .content .one-fourth, .content .one-half, .content .one-third, .content .three-fourth, .content .two-third, .content .one-fifth, .content .four-fifth, .content .three-fifth, .content .two-fifth {
        text-align: left;
    }
    .one-fourth, .one-half, .one-third, .three-fourth, .two-third, .one-fifth, .four-fifth, .three-fifth, .two-fifth {
        width: 100%;
    }
    .readmore {
        display: inline-block;
        float: none;
        text-align: center;
    }
    .home .gallery .column.one-third {
        margin-bottom: 20px;
    }

    /*----*****---- << Tables >> ----*****----*/
    th, td {
        padding: 8px 6px;
        font-size: 12px;
    }
    /*----*****---- << Main >> ----*****----*/
    .content {
        width: 100%;
        padding: 0px 0px 30px;
        background: none;
        margin: 0px;
    }
    .inner-with-sidebar, .content.with-left-sidebar .inner-with-sidebar {
        display: none;
    }
    .sidebar {
        margin: 0px;
        width: 96%;
        padding-bottom: 20px;
        padding-left: 10px;
        background: none;
    }
 
   

    /*----*****---- << Contact >> ----*****----*/
    .one-half form {
        text-align: left;
        margin-bottom: 20px;
        float: left;
        width: 100%;
    }
    .main-contact-details ul.contact-details li {
        width: 100%;
    }
    .two-third textarea {
        width: 90%;
    }
    .one-third input[type="text"] {
        width: 90%;
    }
    /*----*****---- << Features >> ----*****----*/
    .side-nav-container {
        width: 100%;
        background: none;
        padding: 0px;
        border: none;
    }
    ul.side-nav {
        background: none;
    }
    .side-nav-bottom {
        background: none;
    }
    ul.side-nav li {
        width: auto;
        background: none;
        clear: none;
        display: inline;
        margin: 0px;
    }
    ul.side-nav li a {
        background: #ffffff;
        margin: 0px 5px 10px;
        width: auto;
        padding: 10px;
    }
    ul.side-nav li a:hover, ul.side-nav li.current_page_item a {
        background: #E5E5E5;
    }
    ul.side-nav li.current_page_item a span {
        background: none;
    }
    .main-content {
        width: 100%;
    }
    /*----*****---- << Footer >> ----*****----*/

    table.no-see-um-labels > tbody > tr > td {
        text-align: left;
    }
    /*august 2019 moved this from style.css, was interfering with share buttons */
    img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
    }
}
.separator {
    margin-right: 10px;
    border-right: none;
}

    /* for Top of Page button added 6/3/19 */
    #myBtn {
        bottom: 2px;
        right: 2px;
        font-size: 16px;
        padding: 0 7px 10px;
  }
/*----*****---- << Mobile >> ----*****----*/
/* Crappy Android portrait Size (devices and browsers) */
@media only screen and (max-width:320px) {
    body {
        font: normal 16px;
        margin: 0;
    }
	
	#product-float-right { border:none; float:none;max-width:90%;} 
	#product-float-right img {max-width:90%;}
	
    /* Horizontal display of contact form labels and fields for wider screen format */
    .wide-form .contact-form-labels {
        float: left;
        margin-left: 10px;
        line-height: 1em;
        margin-top: 15px;
        text-align: left;
    }
    .wide-form .contact-form-labels + div {
        float: left;
    }
    .recaptcha-wideform {
        margin-left: 20px;
    }
    .tinynav {
        display: block;
		background-image: url(../images/hamburger-menu.png);
		font-size:18px;  /* added 2/19/2021 trying to fix mobile menu */
    }
    #top-menu ul.menu {
        display: none
    }
    .container {
        width: 95%;
        margin: auto;
    } /*changed from 220px 1/26/18 Goss because phone display too crowded*/
    /*----*****---- << Header >> ----*****----*/
    #logo {
        width: 100%;
        text-align: center;
    }
    #header .float-right {
        width: 100%;
    }
    .social-icons {
        width: 100%;
        text-align: center;
        margin: 20px 5px 40px 0;
    }
    .social-icons a {
        float: none;
        display: inline-block;
        margin: 0px 2px;
    }
    #searchform {
        width: 99.8%;
        margin: 5px 0px 10px;
    }
    #searchform input[type="text"], #searchform input[type="text"]:hover, #searchform input[type="text"]:focus {
        width: 165px;
    }
    
	/*----*****---- << Columns >> ----*****----*/
    .column {
        margin: 0px;
    }
    .content .one-fourth, .content .one-half, .content .one-third, .content .three-fourth, .content .two-third, .content .one-fifth, .content .four-fifth, .content .three-fifth, .content .two-fifth {
        text-align: left;
    }
    .one-fourth, .one-half, .one-third, .three-fourth, .two-third, .one-fifth, .four-fifth, .three-fifth, .two-fifth {
        width: 100%;
    }
    .readmore {
        display: inline-block;
        float: none;
        text-align: center;
    }
    .home .gallery .column.one-third {
        margin-bottom: 20px;
    }
    .one-half .subscribe-form {
        text-align: center;
    }
    .subscribe-form input[type="text"] {
        margin-left: 27px;
        font-size: 11px;
    }
    /*----*****---- << Tables >> ----*****----*/
    th, td {
        padding: 8px 0px;
        font-size: 11px;
    } /* 4/26/2018 changed font size from 8 - too small on phone */
    /*----*****---- << Buttons >> ----*****----*/
    .button.xlarge {
        font-size: 22px;
    }
    /*----*****---- << Main >> ----*****----*/
    .content {
        width: 100%;
        padding: 0px 0px 30px;
        background: none;
        margin: 0px;
    }
    .inner-with-sidebar, .content.with-left-sidebar .inner-with-sidebar {
        display: none;
    }

    td.formlabel {
        height: 2.3em;
        vertical-align: bottom;
        text-align: left;
        padding: 0;
    }
    
    
    /*----*****---- << Styled Elements >> ----*****----*/
    .dropcap {
        float: none;
        margin-bottom: 15px;
        display: inline-block;
    }
    ul, ol {
        text-align: left;
    }
    ul.tabs-frame {
        width: 90%;
    }
    .tabs-frame-content {
        width: 86%;
        text-align: left;
    }
    ul.tabs-frame li a {
        padding: 0px 2px;
        font-size: 11px;
        min-width: 40px;
    }
    ul.tabs-vertical-frame {
        margin-right: 22px;
    }
    .tabs-vertical-frame-content {
        width: 63%;
        padding: 10px;
    }
    ul.tabs-vertical-frame li a.current span {
        right: -18px;
        top: -8px;
    }
    ul.tabs-vertical-frame li a {
        padding: 6px 10px 4px;
        font-size: 11px;
        min-width: 40px;
    }
    h5.toggle, .toggle-content, h5.toggle-accordion {
        text-align: left;
        font-size: 12px;
    }
    /* .toggle-frame { width:87%; }		/* too narrow changed to 95% 4/26/18 */
    .toggle-frame {
        width: 92%;
    }
    blockquote.right, blockquote.left {
        width: 80%;
        margin-right: 0px;
        margin-left: 0px;
        padding-left: 36px;
    }
    #expand-toggle .expand {
        font-size: 12px;
        line-height: 20px;
        padding-top: 5px;
        padding-bottom: 5px;
    }
    #expand-toggle .one-third {
        width: 90%;
        padding: 0px 10px;
    }
    /*----*****---- << 404 >> ----*****----*/
    .errorpage-info h3, .errorpage-info h4 {
        line-height: normal;
    }
    /*----*****---- << Contact >> ----*****----*/
    .one-half form {
        text-align: left;
        margin-bottom: 20px;
        float: left;
        width: 100%;
    }
    .main-contact-details ul.contact-details li {
        width: 100%;
    }
    /*----*****---- << Features >> ----*****----*/
  
    .main-content {
        width: 100%;
    }
    /*----*****---- << Footer >> ----*****----*/
    
    #footer .widget form input[type="text"] {
        width: 51%;
    }
    #footer .widget .social-icons a {
        float: left;
    }
    .footer-copyright.align-center .footer-logo {
        position: inherit;
        top: 0px;
    }
    #footer .widget form label {
        width: 37%;
    }
    .footer-copyright .copyright-content {
        width: 100%;
        margin: 10px 0px 0px;
        text-align: center;
    }
    .footer-copyright ul {
        margin: 0px;
        text-align: center;
    }
    .footer-copyright ul li {
        display: inline-block;
        text-align: center;
        float: none;
    }
    .footer-logo {
        width: 100%;
        text-align: center;
        margin: 10px 0px 0px;
    }
    table.no-see-um-labels > tbody > tr > td {
        text-align: left;
    }
    /*august 2019 moved this from style.css, was interfering with share buttons */
    img {
        display: block;
        margin: 0 auto;
        max-width: 100%;
    }

.separator {
    margin-right: 10px;
    border-right: none;
}
    /* for Top of Page button added 6/3/19 */
    #myBtn {
        bottom: 2px;
        right: 2px;
        font-size: 16px;
        padding: 0 7px 10px;
		
    }
}