@import url("initial.css");
@import url("fontface.css");
/*
.dhwidget.content-dhwidget img, .dhwidget.content-simplified-dhwidget img { height:auto !important; }
*/

/*
COLOR REFERENCE
#801922 - red
#f5a11c - yellow

#036 - blue
#06c - light blue
*/

body { font-family:"Roboto",Arial,sans-serif; font-size:14px; color:#000; line-height:1.5; }

h1 { font-size:2.1em; font-weight:normal; margin:.5em 0; color:#036; }
h2 { font-size:1.8em; font-weight:normal; margin:.5em 0; color:#06c; }
h3 { font-size:1.6em; font-weight:normal; margin:.5em 0; color:#036; }
h4 { font-size:1.3em; font-weight:normal; margin:.5em 0; color:#000; }
h1#title { font-size:2.5em; font-weight:100; margin:0; line-height:88px; }

a { color:inherit; }
a:hover,a:focus,a:active { text-decoration:none; }
img { max-width:100%; }


/* COLUMN STYLES -----*/
.width-1-00 { width:100%; margin:0; padding:2% 0; }
.width-0-50 { width:48%; margin:0; padding:2% 0; }
.width-0-25 { width:23%; margin:0; padding:2% 0; }
.width-0-33 { width:31%; margin:0; padding:2% 0; }
.width-0-67 { width:65%; margin:0; padding:2% 0; }
.width-0-75 { width:73%; margin:0; padding:2% 0; }

.width-0-50+.width-0-50,
.width-0-50+.width-0-50+.width-0-50+.width-0-50,
.width-0-33+.width-0-67,
.width-0-67+.width-0-33,
.width-0-25+.width-0-75,
.width-0-75+.width-0-25 { margin-left:4%; }
.width-0-33+.width-0-67+.width-0-33 { margin-left:0; }

.width-0-50+.width-0-50+.width-0-50 { margin-left:0; }

/* HEADER STYLES -----*/
#header { position:relative; height:100px; background-color:#fff; z-index:900; box-shadow:0 0 20px rgba(0,0,0,.5); }
#header-content { margin:0 auto; position:relative; max-height:100px; overflow:visible; }
#header-logo { width:170px; padding:10px 45px 30px 50px; background:transparent url(/media/images/logo-ellipse.png) no-repeat top left; }
#header-logo img { width:100%; }

#header .traditional-nav  { position:absolute; bottom:0; right:0;  }
#header .navigation li { padding:0; position:relative; }
#header .navigation>li+li { margin-left:8px; }
#header .navigation>li>a { padding:.5em 2em; display:inline-block; text-transform:uppercase; color:#fff; background-color:#00468d; background-image:linear-gradient(to bottom, #00468d, #003367);  font-size:1.1em; font-family:'Roboto Condensed'; font-weight:700; }

#header .navigation>li>ul>li>a { display:block; padding:5px 10px; color:#036; text-decoration:none; white-space:nowrap; font-weight:bold; }
#header .navigation>li>ul>li>a:hover,
#header .navigation>li>ul>li>a:focus,
#header .navigation>li>ul>li>a:active { color:#fff; background-color:#009ee3; }
#header .navigation>li>ul>li+li>a {  }

/*shop button
#header .navigation>li.id213>a,
#footer .store-link a { text-transform:uppercase; color:#000; font-size:1.1em; margin:16px 0 15px 4px; padding:4px 16px 4px 40px; border:1px solid #036; border-radius:16px; background:#06c url('../media/images/cart-icon.png') no-repeat center left; background-size:auto 100%; color:#036; font-weight:bold;  }
#footer .store-link a { margin-left:0; }
body #header .navigation>li.id213:hover>a { background:#06c url('../media/images/cart-icon.png') no-repeat 4px center; border-color:#06c; color:#06c; background-color:#036; }
#footer .store-link a:hover { border-color:#06c; color:#06c; text-decoration:none; background-color:#036; background-position:8px center; }
*/

/*mobile nav*/
#mobile-nav { background-color:#036; position:relative; z-index:3; padding:5px 0; }
#mobile-nav a { text-align:center; width:33%; display:block; height:30px; float:left; }
#mobile-nav img { height:100%; }
#mobile-nav img.close-menu { display:none; }

.header-info {   }
.header-info a { text-decoration:none; color:inherit; white-space:nowrap; }
.traditional-nav p { margin:0 0 .5em; color:#036; font-size:24px; font-style:italic; }
.traditional-nav a.phone { float:right; font-weight:700; text-decoration:none; }

/* HOME PAGE STYLES -----*/

body#index.id2 #pre-container { display:none; }
body#index.id2 #container,
body#index.id2 #container #container-center { width:100%; padding:0; max-width:none; float:none; }

.home-panorama-content,
.home-widgets { max-width:1024px; width:100%; margin:0 auto; padding:1px 0; }

.home-panorama { position:relative; height:50vh; min-height:300px; background:url('../media/images/qualityproduct-banner.jpg') no-repeat center center; background-size:cover; }
.home-panorama-wrapper { background-color:rgba(0,0,0,.5); position:absolute; bottom:0; width:100%; display:none; } /*could be used to have text overlaying image*/
.home-panorama-content { color:#fff; }

.home-widgets { padding:1em 0; }
.home-widgets .width-1-00 {  margin:0; padding:0; }
.home-widgets h1 { margin:0; }
.home-widgets .width-0-50 {  box-sizing:border-box; width:48%; padding:0; }

.home-product-categories { max-width:1024px; margin:2em auto 0; }
.product-category-link { width:50%; float:left; }
.product-category-link a { display:block; position:relative; padding:20px 20px 0; }
.product-category-link strong { display:block; position:absolute; box-shadow:3px 3px 0px rgba(0,0,0,.2); font-size:2em; top:0; left:0; color:#fff; font-weight:500; line-height:30px; padding:10px 30px 10px 20px; background-color:#00468d; background-image:linear-gradient(to bottom, #00468d, #003367); }
.product-category-link strong:after { display:block; content:''; position:absolute; top:50px; left:0; width:0; height:0; border-right:20px solid #003; border-bottom:20px solid transparent;}
.product-category-link strong span { position:absolute; top:0; right:10px; line-height:45px; font-size:1.4em; font-weight:300; }
.product-category-link a:hover strong,
.product-category-link a:focus strong,
.product-category-link a:active strong { background-color:#009de2; background-image:linear-gradient(to bottom, #009de2, #006caa); }
.product-category-link a:hover strong:after,
.product-category-link a:focus strong:after,
.product-category-link a:active strong:after { border-right-color:#225; }


/* CONTAINER STYLES -----*/
#pre-container { display:none; }
#pre-container-content { margin:0 auto; position:relative; max-width:1024px; width:100%; text-align:right; }
#container { margin:0 auto; }

/* BREADCRUMB STYLES -----*/
#breadcrumb { display:block; font-size:0.9em; border-bottom:1px solid #d7d7d7; max-width:1024px; width:100%; margin:0 auto; line-height:2em; clear:left; padding-bottom:1em; }
#breadcrumb li, .breadcrumb { display: inline; }
#breadcrumb li+li:before, .breadcrumb:before { content: "/"; margin: 0 3px; color:inherit;}
#breadcrumb a { color:inherit; text-decoration:none; }
#breadcrumb a:hover,
#breadcrumb a:focus,
#breadcrumb a:active { text-decoration:underline; }
#breadcrumb .breadcrumb-home { display:inline; color:#036; }

/* GALLERY STYLES -----
#gallery-content .cycle-prev,
#gallery-content .cycle-next,
#gallery-content .slide-overlay { visibility:hidden;}
#gallery-content img { max-height:65vh; box-sizing:border-box; border-color:#036!important; }
#gallery-content #thumbs-wrapper { position:relative; }
#gallery-controls .next,
#gallery-controls .prev { position:relative; }
#gallery-controls #pause { letter-spacing:normal; }

#gallery-content a.image-share,
#gallery-content a.lightbox { width:25px; height:25px; }

#gallery-content a.image-share{ display:inline-block; position:absolute; top:5px; left:5px; }
#thumbs-container { padding-bottom:6px; } /* enables bottom-border to be visible 

.gallery-topline { margin-top:2em; }
#gallery-content #gallery-controls { color:#036; }
#galleries-menu a { text-decoration:none; }
#galleries-menu a:hover {  background-color:#eee; color:#000; }
#gallery-content img { border-color:#036!important; }
#gallery-info .title { font-size:1.7em; font-weight:normal; margin:.5em 0; }
#gallery-controls #pause { letter-spacing:normal; }
*/

/* SIDENAV STYLES -----*/
.toggle-sidemenu { display:none; }
.category-navigation { margin-top:1em; }
.category-navigation ul,
.category-navigation li { list-style-type:none; margin:0; padding:0; }
.category-navigation li ul ul { padding-left:1em; }

.category-navigation li.product { display:none; }
.category-navigation ul a { text-decoration:none; color:inherit; font-weight:bold; }
.category-navigation ul a:hover span.category-name,
.category-navigation ul a:focus span.category-name,
.category-navigation ul a:active span.category-name { text-decoration:underline; color:#06c; }
.category-navigation ul a.active span.category-name  { color:#06c; font-weight:bold; }
.category-navigation ul a span.category-count { color:#888; }
.category-navigation li ul ul a { font-weight:normal; }


/* CATALOG STYLES -----*/
#share-tools {float: left; padding-right: 18px;}
	#share-tools > *:not(script) {display: inline-block; margin-right: 4px; vertical-align: top !important;}


.catalog-section { /*position:relative;*/ }
.catalog-section .width-0-33 { position:absolute; top:0; left:0; }
.catalog-section .width-0-67 { border-left: 1px solid #d7d7d7; padding-left:4%; margin-left:31%; min-height:50vh; }
.catalog-section .width-0-25 { /*position:absolute; top:0; left:0;*/ float: left; }
.catalog-section .width-0-75 { border-left: 1px solid #d7d7d7; padding-left:4%; width: 73%; box-sizing:border-box; /* margin-left:23%; min-height:50vh;*/ float: right; }
h1.alternate-headline-style { font-weight:700; font-size:2.2em; color:#444; margin:.3em 0; text-transform:uppercase; }

.product-container { width:30%; display:inline-block; vertical-align:top; padding:1em 2%; line-height:1.1; }
.product-container:nth-of-type(3n+1) { padding-left:0; }
.product-container:nth-of-type(3n+3) { padding-right:0; }
.product-container a,
.product-container .nolink { text-decoration: none; color: inherit; display: block; position: relative; padding-bottom: 4em; text-align:center; }
.product-container img { max-width:100%; width:100%; }
.product-container strong { font-weight:700; text-transform:uppercase; color:#036; display:block; margin:0 0 .5em; }
.product-container .link { position:absolute; bottom:0; left:0; width:100%; box-sizing:border-box; display:block; border:1px solid #036; border-radius:5px; background-color:#036; color:#fff; text-transform:uppercase; text-align:center; margin:1em 0; padding:.6em 0; }
.product-container a:hover .link,
.product-container a:focus .link,
.product-container a:active .link { border-color:#036; background-color:#06c; }

.product-button { display:inline-block; margin:.5em 1em .5em 0; border-radius:5px; border:1px solid #036; background-color:#036; color:#036; padding-left:15px; }
.product-button a { font-weight:700; display:block; border-radius:5px; padding:5px 15px; border-bottom-left-radius:0; border-top-left-radius:0; background-color:#fff; text-transform:uppercase; color:inherit; text-decoration:none; }

.product-button:hover,
.product-button:focus,
.product-button:active { border-color:#06c; background-color:#06c; color:#036; }

/*product panels
.product-panel { border:1px solid #444; border-radius:10px; margin:1px 0 0; }
.product-panel:hover { border-color:#036; }
.product-panel h3.toggle-panel { position:relative; margin:0; font-weight:normal;  }
.product-panel h3.toggle-panel a { text-decoration:none; display:block; background-color:#444; padding:5px 20px; color:#fff; text-transform:uppercase; font-size:1.2em; display:block; border-radius:9px; }
.product-panel:hover h3.toggle-panel a { background-color:#036;}
.product-panel h3.toggle-panel a:after { content:"+"; display:block; position:absolute; top:0; right:.4em; color:#fff; font-size:1.8em; line-height:1; }
.product-panel.visible h3.toggle-panel a:after { content:"-"; right:.55em; }
.product-panel-content { padding:10px 20px; display:none; }
.product-panel-column { float:left; }

.product-panel.visible .product-panel-content { display:block; }
*/
.product-panel-content table { width:100%; }
.product-panel-content td{ background-color:#fff; text-align:center; padding:.5em; border:1px solid #ccc; }
.product-panel-content td:first-child { background-color:#eee; text-align:left; }
.product-panel-content table tr:first-of-type td { background-color:#444; color:#fff; font-weight:bold; border-color:#fff; }

/*slideshow - default core (unused)
.product-slideshow { float:right; margin-left:10px; width:50%; position:relative; }
.product-slideshow .gallery-dhwidget-share { display:none; }
.product-slideshow .gallery-previous,
.product-slideshow .gallery-next { opacity:.2; }
.product-slideshow .gallery-previous:hover,
.product-slideshow .gallery-next:hover { opacity:.5; }
*/

/*slideshow w/thumbs*/
#product-gallery { width:300px; float:right; margin-left:20px; position:relative; }
#product-gallery #gallery { height:230px; width:100%; }
#product-gallery #gallery #image-container { width:100%; height:100%; background-size:cover; position:relative; display:block; overflow:hidden;  }
#product-gallery .image-title { font-size:2em; color:#fff5c3; margin-bottom:5px; font-weight:lighter;  }
#product-gallery #image-container ul,#captions ul { margin:0; padding:0; list-style:none;  }
#product-gallery #image-container ul li { position:absolute; opacity:0; transition:1s opacity; width:100%; height:100%;  }
#product-gallery #image-container li .image-title { position:absolute; font-family:sans-serif; font-size:.8em; bottom:.; right:.35em; padding:.25em; color:#fff; background:#000; background:rgba(0,0,0,.25); border-radius:2px;  }
#product-gallery #image-container li .image-caption { position:absolute; font-family:sans-serif; font-size:1em; bottom:0; padding:2%; color:#fff; background:#000; width:96%;  }
#product-gallery #image-container .image { width:100%; height:0; padding-bottom:66.67%; position:relative;  }
#product-gallery #image-container .image img { width:100%; position:absolute;  }
#product-gallery .show { opacity:1!important; position:static; transition:1s opacity; z-index:50;  }
#product-gallery .active-slide { border:2px solid #036!important;  }
#product-gallery #thumbs-wrapper { position:relative;  }
#product-gallery #thumbs-container { display:block; text-align:start; float:none; position:relative; top:auto; right:auto; bottom:auto; left:auto; z-index:auto; height:66px; margin:20px 0; overflow:hidden;  }
#product-gallery #thumbs { text-align:left; float:none; position:absolute; top:0; right:auto; bottom:auto; left:0; margin:0; height:66px; z-index:auto;  }
#product-gallery #thumbs .thumb div { width:62px; height:62px;  }
#product-gallery #thumbs .thumb { display:inline-block; border:1px solid #d7d7d7;  }
#product-gallery #thumbs .thumb+.thumb { margin-left:10px;  }
#product-gallery #thumbs-wrapper .prev,#thumbs-wrapper .next { position:absolute; background:transparent url(../includes/gallery/arrow_left2.png) no-repeat; background-size:cover; display:none; width:16px; height:26px; top:0; bottom:0; margin:auto; cursor:pointer;  }
#product-gallery #thumbs-wrapper .prev { left:0;  }
#product-gallery #thumbs-wrapper .next { right:0; transform:rotate(180deg);  }


/* CONTACT PAGE STYLES -----*/
input[type=submit] { float:right; display:inline-block; border:1px solid #036; border-left-width:15px; color:#036; font-weight:700; border-radius:5px; padding:5px 15px; background-color:#fff; text-transform:uppercase; text-decoration:none; }
input[type=submit]:hover,
input[type=submit]:focus,
input[type=submit]:active { border-color:#06c; color:#036; }


/* ANIMATION -----*/
.canDelete  { transition:all .1s; transition-timing-function:ease-in-out; }


/* FOOTER STYLES -----*/

#back-to-top { font-family:'Roboto Condensed'; text-transform:uppercase; background-color:#00468d; background-image:linear-gradient(to bottom, #00468d, #003367); color:#fff; text-align:center; padding:.25em 1em; cursor:pointer; position:fixed; right:10px; bottom:10px; border-radius:5px; display:none; z-index:1000; }
#back-to-top:hover,
#back-to-top:focus,
#back-to-top:active { background-color:#009de2; background-image:linear-gradient(to bottom, #009de2, #006caa); }

#footer { padding:2em 0; border-top:1px solid #ccc; }
#footer .navigation { margin-top:.5em; }
#footer .navigation li+li { margin-left:1em; border-left:1px solid #ccc; padding-left:1em; line-height:1; }
#footer .navigation a { color:#06c; }
#footer .navigation a:hover,
#footer .navigation a:focus,
#footer .navigation a:active { text-decoration:underline; }
#footer p { margin:0; }
.footer-head { float:right; text-align:right; font-size:24px; color:#036; font-style:italic; line-height:1; }
.footer-head a { font-size:30px; text-decoration:none; font-weight:700; font-style:normal;  }
#footer p.footer-copyright { font-size:12px; margin-top:.8em;  }
.footer-copyright a { color:inherit; text-decoration:none; }
.footer-copyright a:hover,
.footer-copyright a:focus,
.footer-copyright a:active { text-decoration:underline; }



.browser-warning { position:fixed; top:0; left:0; width:100%; text-align:center; margin:0; padding:.5em 0; background-color:#900; border-bottom:2px solid #600; color:#fff; font-weight:bold; text-transform:uppercase; z-index:9000; }
.browser-warning a { color:inherit; }

/* FLOAT CLEARING -----*/
#mobile-nav,
.product-panel-content { clear:both; *zoom:1; }
#mobile-nav:before,#mobile-nav:after,
.product-panel-content:before,.product-panel-content:after { content:" "; display:table; }
#mobile-nav:after,
.product-panel-content:after { clear:both; }


/* SEARCH PAGE -------*/
#search-content .product-item,
#search-content .content-item { padding-bottom: 1em; border-bottom: 1px solid #ccc; margin-bottom: 1em; }
#search-content .product-item .product-image { float:left; width:100px; margin-right:1em; }


/* RESPONSIVE STYLES -----*/
@media screen and (max-width: 1023px) {
    body { position:relative; right:0px;}
    #header,
    #header-content { height:auto; max-height:none; }
	#header .traditional-nav { position:fixed; top:0; left:auto; height:100vh; overflow:auto; background-color:#eee; }
    #header .traditional-nav p { display:none; }
    #header .navigation li { display:block; }
    #header .navigation>li+li { margin-left:0; }
    #header .navigation>li>ul { display:block;  }
    #header-logo { float:none; border-radius:0; text-align:center;width:100%; height:60px; padding:.25em 0; }
    #header-logo img { height:100%;; width:auto; }
    .header-info { position:static; width:100%; border-radius:0; }
    .header-info p { text-align:center; }

    #header .navigation { float:none; display:block; background-color:#eee; }
    #header .navigation>li>a { padding:.5em 2em; display:block; font-weight:bold; background-color:#eee; }
    #header .navigation>li>ul>li>a { padding:.5em 2em; background-color:#fff; }
    #header .navigation>li.id213 { display:none; }
    #header .navigation li { width:100%; }
    #header .navigation>li>ul>li+li>a ,
    #header .navigation li a { border:none; border-bottom:1px solid #d7d7d7; }
    #header .navigation>li>a:hover,
    #header .navigation>li>a:focus,
    #header .navigation>li>a:active { background-color:#009de2; background-image:linear-gradient(to bottom, #009de2, #006caa); color:#fff; }

    h1#title { padding: 0 5%; }

    #breadcrumb { padding-left:2%; padding-top:1em; }
    #container { width:96%; padding:0 2%; }
    .home-widgets { width:96%; padding:2%; }
    #index .home-widgets .width-0-50 { padding-top:0; padding-bottom:0; }


    /*animation*/
    body,
    .traditional-nav  { transition:all .2s; transition-timing-function:ease-in-out; }

    body.show-menu #header .traditional-nav { right:0; }
    body.show-menu #toggle-menu .show-menu { display:none; }
    body.show-menu #mobile-nav img.close-menu { display:inline; }



    /*menu width*/
    #header .traditional-nav { right:-30%; width:30%; }
    body.show-menu { right:30%; }

    /*footer styles*/
    #footer .footer-head,
    #footer .navigation,
    #footer .footer-copyright { float:none; text-align:center; }

    /*single-column styles*/
    .width-1-00,
    .width-0-50,
    .width-0-33,
    .width-0-25,
    .width-0-67,
    .width-0-75,
    .home-widgets .width-0-50,
    .catalog-section .width-0-25,
    .catalog-section .width-0-33,
    .catalog-section .width-0-67,
    .catalog-section .width-0-75 { width:100%; margin:0; padding:2% 0; box-sizing:border-box; }

    .width-0-50+.width-0-50,
    .width-0-50+.width-0-50+.width-0-50+.width-0-50,
    .width-0-33+.width-0-67,
    .width-0-67+.width-0-33,
    .width-0-25+.width-0-75,
    .width-0-75+.width-0-25 { margin-left:0; }

    /*catalog styles*/
    h1.alternate-headline-style { font-size:1.5em; }
    .catalog-section .width-0-67,
    .catalog-section .width-0-75 { border:none; }
    .catalog-section .width-0-25,
    .catalog-section .width-0-33 { position:static; top:0; left:0; }
    .product-container { width:46%; display:inline-block; vertical-align:top; padding:1em 0; line-height:1.1; }
    .product-container:nth-of-type(2n+0) { padding-left:4%; padding-right:0; }
    .product-container:nth-of-type(2n+1) { padding-left:0; padding-right:0; }

    .toggle-sidemenu { display:block; border:1px solid #036; padding:.5em 5px; border-radius:10px; color:#036; text-align:center; text-decoration:none; font-size:.9em; text-transform:uppercase; }
    .side-menu>ul { display:none; border:1px solid #036; border-top:none; padding:1em 0;  border-bottom-left-radius:10px; border-bottom-right-radius:10px; }
    .side-menu li { padding-left:5%; }
    .side-menu ul li a { padding:.5em 0; display:block; }
    .side-menu.show-menu .toggle-sidemenu { background-color:#036; color:#fff; border-bottom-left-radius:0; border-bottom-right-radius:0; }
    .side-menu.show-menu ul { display:block; }

    #product-gallery { float:none; margin:0; }

    #footer-form { display:block; width:100% !important; text-align:center; margin-top:16px; margin-bottom:16px; }
    #footer-form input[type=submit] { float:none;margin-left:12px; }
}

@media screen and (max-width: 750px) {
    /*menu width*/
    #header .traditional-nav { right:-70%; width:70%; }
    body.show-menu { right:70%; }

    .home-product-categories {  }
    .product-category-link { width:50%; float:left; }
    .product-category-link a { padding:10px 10px 0; text-decoration:none; }
    .product-category-link strong { position:static; box-shadow:none; font-size:14px; top:auto; left:auto; line-height:1; padding:10px 30px 10px 20px;  }
    .product-category-link strong:after,
    .product-category-link strong span { display:none; }

}

@media screen and (min-width: 1024px) {
	#mobile-nav {display:none; }
    /*drop-down*/
    #header .navigation>li>ul { display:none; position:absolute; background-color:#fff; box-shadow:0 0 10px rgba(0,0,0,.5); padding:.6em; z-index:800; }
    #header .navigation>li>ul>li { min-width:115px; }
    #header .navigation>li:hover>ul { display:block; }
    #header .navigation>li>a { border-top-left-radius:5px; border-top-right-radius:5px; }
    #header .navigation>li:hover>a,
    #header .navigation>li>a:focus,
    #header .navigation>li>a:active { background-color:#009de2; background-image:linear-gradient(to bottom, #009de2, #006caa); color:#fff; }
}