﻿@charset "UTF-8";

/* LSJA */

body {  font-family: "Inter", sans-serif;  }
@media print
{    
    .no-print, .no-print *
    {
        display: none !important;
    }
}

.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
    font-family: "Inter", sans-serif;
    font-weight: 900;
    color: #ababab;
}

h1 {    font-weight: 200; text-align: right}

@media print, screen and (max-width: 64em) {
.h1, h1  {font-size: 2rem}
}
.grecaptcha-badge {display: none; visibility: hidden}


/** OFF CANVAS **/
.off-canvas {
    background: #f3f3f3;
}
.position-top {
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    height: 40px;
}

/**  **/

.section {    background-color: #f3f3f3;}
.section.dark {    background-color: #ababab;}

.grid-container { max-width: 80rem;
    padding-right: 2rem;
    padding-left: 2rem;
}
.container {max-width: 80rem;   margin: 0 auto}
.full-container {width: 100%; margin: 0;}
.shadow-top { box-shadow: 0 -2px 10px 1px rgba(0, 0, 0, 0.2); overflow: visible; position: relative}

.callout {box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.2); border: none}

.divider {border-right: 1px solid #ababab; padding-right: 2rem}
.divider:last-child {border: none; padding-right: 0}
@media print, screen and (max-width: 40em) {
  .divider  {padding: 0; border-right: none;}
  .divider:last-child {padding-right: 0; border: none;}
  
}
.features .h4 {font-weight: 400}
@media print, screen and (max-width: 40em) {.features .h4:first-child {margin-top: 2rem;}}

.news .h5 {font-weight: 400}
.news .date {font-weight: 900; color: #a3a3a3; font-size: .8rem; text-transform: uppercase}

#nav .menu, #navb .menu {background-color: #fff;   min-width: 300px;}
.dropdown.menu>li>a {    background: transparent;    padding: .625rem 1.8125rem;}

#nav a, #navb a {font-weight: 200;
    color: #ababab}
.fnav a {font-weight: 300;  text-transform: uppercase;   padding: .625rem 1.8125rem 0 0;}

#nav .mainitem a, #navb .mainitem a
{font-weight: 700}
.mainitemRED {color:red !important}


#nav li.selected>a, .fnav li.selected>a, #navb li.selected>a {color: #00c1a6;}

#nav li .submenu a:hover, #navb li .submenu a:hover {
    background-color: #00c1a6;
    color: #fff;
}
.teal {color: #00c1a6 !important;}

#nav .menu .submenu a, #navb .menu .submenu a  {
    font-weight: 300;
    padding: 0.625rem 2.375rem 0.625rem 1.8125rem;
}

#navb .vertical.menu li a.has-drop-down-a::before {
    position: absolute;
    content: "\e908";
    top: 8px;
    right: 5px;
    font-family: icomoon;
    font-size: 16px;
}

#navb .vertical.menu li a.has-drop-down-a::after {
    display: none;
}


.dropdown.menu {z-index: 50}
/** smaller than large **/
@media print, screen and (max-width: 64em) {
    #nav .menu, #nav li {background-color: #00c1a6;}
    #nav a, #navb a {color: #ffffff; }
#nav li:hover { background-color: #008774;}

    #nav li.selected>a, #navb li.selected>a {color: #ffffff;  }
    .dropdown.menu>li>a {
    background: #00c1a6;
    padding: .625rem 1.8125rem;}
    
    #navb > dropdown.menu>li>a {
    background: white;
    padding: 0.625rem 1.8125rem;}
 }
 
 /***  Shop Nav  ***/
.bnavBars {padding: 2rem; font-weight: 700;color: #ababab;}
 
 .menu-icon.shop::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: orange;
    box-shadow: 0 7px 0 #fff, 0 14px 0 #fff;
    content: '';
}

.menu-icon.shop:hover::after {
    background-color: #008572;
    box-shadow: 0 7px 0 #008572, 0 14px 0 #008572;
}
@media print, screen and (max-width: 64em){
#navb .menu, #navb li, #navb li, #navb .menu {
    background-color: grey;
}
 #navb li:hover {
    background-color: #727375;
}   
    
    
}

#main {  min-height: 30rem}

.footerlogo {  float: left;}
.color-block {  background-color: #eeeeee;}

#header .service-information { display: block;}

#header .login-nav {-ms-flex-pack: end;   justify-content: flex-end;}

#header .grid-x {
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-flow: row;
    flex-flow: row;
}
#header .grid-x .navblock {justify-content: flex-end;   -ms-flex-pack: end;}

.top-bar .top-bar-left {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;}

.top-bar .top-bar-right {
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    margin-left: auto;}

p a { color: orange;}

.ls_about .selected a {color: white;background-color: #00c1a6}

#header { position: relative}

#header .wrap {  box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);}

.logo {  padding: 1rem 0;}
.logo img { max-height: 5rem; }


@media print, screen and (min-width: 40.02em){
#header .wrap {
    padding: 13px 0 14px;}
}
@media print, screen and (max-width: 40em){
 .logo {  padding: 0;}  
 #header .wrap {
    padding: 10px 0;
    min-height: 50px;}
    #header .service-information {display: none; visibility: hidden; width: 0}
}

#header .color-block .top-bar a {  color: #222; transition: .3s color;}

.search-basket a, .search-basket button {color: #ababab }

@media print, screen and (min-width: 40em)
{.search-input {right: 0;left:0}}
    
.search-basket .form {    width: 300%;}
.search-basket li { padding: 0px 10px 0 10px;}    
.search-basket button i {cursor: pointer;}

#header .shop .icon-cart {
    font-size: 20px;
    display: block;
    padding: 0;
}
#header .shop.active:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0px;
    width: 7px;
    height: 7px;
    background-color: #00c1a6;
    border: 1px solid #fff;
    border-radius: 50%;
}



#wrapper { min-height: 50vh }

.social-networks { border-bottom: 1px solid #cacaca; margin: 0 0px;}
.social-networks li { border: none;  padding: 0 15px 0 0;}

.callout.success {  background-color: #c8ef7c;}

.footnote { font-size: .7rem}

.pagebanner {background-image: url('/LS/ui/background top emboss.png');
    background-repeat: repeat-x;
    background-position: center 0;
    background-size: 1500px;}

.intro {border-bottom: 1px solid #a3a3a3; font-weight: 700; line-height: 200%; margin-bottom: 2rem; padding-bottom: 1rem}

#footer {  box-shadow: 0 -2px 10px 1px rgba(0, 0, 0, 0.2); background: #ffffff;
    color: #ababab;
    overflow: hidden;
    width: 100%;
    padding: 0;
    font-size: .9rem;}
    
#footer .credits p a {color: #00c1a6;}

#footer .lists {
    -webkit-column-count: 1;
    -ms-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;}

#footer .h3, .forms.h3 {
    color: #ababab;
    text-transform: uppercase;
    font-weight: 400;
    font-size: 20px;
    margin: 2rem 0 13px;}

/** lrg and up **/
@media print,
screen and (min-width: 64em) {
    #footer .h3 {margin: -4px 0 13px;}
    #footer {padding: 30px 0 0;}
}

.navsection {padding-bottom: 3rem;}
.credits img {padding-right: 1rem}

.add-padding-top-1 {padding-top: 1rem}
.add-padding-bottom-1 {   padding-bottom: 1rem}

.contacts .links li {
    padding: 10px 2px;
    border-bottom: 1px solid #cacaca;
    margin: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
}

.sub-input form { position: relative}

.search-button-inside-sub {
    position: absolute;
    top: 11px;
    right: 12px;
    background-color: transparent;
    color: #cacaca;
    transition: color .3s;
    cursor: pointer;
    z-index: 10;}

.errorpg { margin: 0 auto;}
.errorbutton { padding: 2rem;  text-align: center;}
.errorbutton img { width: 5rem}
.errorbutton a {font-weight: 700;}

@media screen and (min-width: 40em) {}

.system {   font-size: 0.75rem}
.sys-right {text-align: right}

.lastupdate {   text-align: right;}



/***  PAGINATION ***/

.pagination ul li,
.paging ul li {height: 2rem; width: 2rem;
    padding: 0;
    line-height: 1.75rem;
    margin: 0 2px;
    text-align: center;
    display: inline-block;
    border: solid 2px #ffffff;
    border-radius: 50%;
}

.paging ul li:hover {
    border: solid 2px #00c1a6;
}
.pagination ul a {}
.pagination ul a:hover,
.paging ul a:hover {
    color: #00c1a6;
    background-color: transparent;
    border-radius: 50%;
}

.pagination ul .active,
.paging ul .active {
    border-radius: 50%;
}

.paging .next,
.paging .prev,
.paging li.next:hover,
.paging li.prev:hover {
    border-color: #ffffff;
}

/***  SHOPPING CART  ***/

.cartH {font-size: 1rem; color: #ababab }


/***  PRODUCT DETAIL VIEW  ***/

.goBack {padding-top: 2rem; text-align: right; color: orange}

.prodDetailSub {font-weight: 200;}
.outOfStock {color: orange}
.custom-select {color: #000000}

.filter { width: 30rem;  position: relative; text-align: left; }



/***  PRODUCT FILTER  ***/


.product-list .search {
    position: relative;
    margin-bottom: 0px;
}

.prodSearchForm {  position: relative}

.card-sidebar {
    border: 0px solid #cacaca;
    margin-bottom: 20px;
}

.product-list .card-sidebar .h4 {
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    font-size: 0.8rem;
    border: none;
}

.product-list .radio-list.content {  padding: 0;}

fieldset li {
    padding: 0;
    font-size: 0.8rem;}
    
fieldset li:not(:last-child) {   border-bottom: none;}

input[type=checkbox]+label,
input[type=radio]+label {
    margin: 0;
    font-size: 0.8rem;
    color: #ababab;
}

.product-list .calculator input {
    margin: 0;
    text-align: left;
    font-size: 0.9rem;
    padding: 0 0 0 10px;
    height: 1.5rem;
}

.product-list .content {padding: 0;}

/** SEARCH RESULT SUMMARY  **/

.searchSummary {
    font-size: .8rem
}

.searchSummary i {
    padding-right: 5px
}

.searchSummary li {
    padding: 0 5px;
    font-weight: 700;
}

.searchSummary li:first-child {
    border-radius: 20px 0 0 20px;
    padding-left: 0px;
}

.searchSummary li:last-child {
    border-radius: 0 20px 20px 0;
}

.searchSummary .total {
    background-color: #ffffff;
    color: orange;
    padding-right: 7px;
}

/** PRODUCT TAGS **/
.mark .new {
    background-color: orange;
}
.price .sale-price {color: red}


/** PRODUCTLIST  */

.prodlist {
    position: relative
}

.product-list .info {
    padding: 10px 20px 23px 20px;
}

.prodlist .titleblock {
    padding: 0 0 0 0;
    line-height: 90%;
}

.prodlist .h3 {
    font-weight: 700;
    font-size: 0.7rem;
    display: inline;
    text-transform: uppercase
}

.prodlist .h4 {
    font-weight: 400;
    font-size: 0.7rem;
    display: inline;
}

.product-list .titleblock .price {
    margin-bottom: 0px;
    font-size: 0.7rem;
}

.product-list .price li {
    display: inline-block;
    padding-right: 10px;
    font-size: 0.6rem;
}

.product-list .prod.info {
    background: transparent;
    padding: 0;
}

.prodContainer {
    position: relative;
    padding: 0
}

/** med and up **/
@media print,
screen and (min-width: 40em) {}

/** lrg and up **/
@media print,
screen and (min-width: 64em) {
    .prodContainer .prod.info {
        display: none;
        width: 100%;
        height: 100%;
    }

    .image:hover+.prod.info,
    .prod.info:hover {
        display: block;
        position: absolute;
        top: 0;
        z-index: 100
    }

    .prod.info .titleblock {
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: rgb(100, 100, 100, 0.75);
        width: 100%;
    }

}

/**  CATALOG LISTS  **/
.cataloglist {min-height: 10rem; position: relative;
    background-position: center 0;
    background-size: cover;
}
.cataloglist .info {position: absolute; bottom: 0; width: 50%}
.catalog .info .h4 {color: #fff; font-weight: 700;
    margin-bottom: 0px;
    font-size: 1rem;
}


/**  ORDER CONFIRMATION PAGE  **/

.system_page .system_title {font-size: 5rem; font-weight: 100;}
.system_page .system_title.success {color: #849708}
.system_page .system_title.error { color: orange}



/***  PACKING SLIP  ***/
table {
     border: none;
     border-color: transparent;}

tbody {border: none;}
tbody td, tbody th {padding: 5px;}
tbody tr:nth-child(even) {
    border: none;
    background-color: transparent; border: none;
}
thead {border: none;
    background: transparent;
}
.packingSlip, .packingSlip p {font-size: 0.75rem}
.packingSlip h3 {font-size: 1rem; margin: 0;}

@media print {.noPrint {display: none}}

.packingSlip ul:not([class]) li:before {
    position: absolute;
    left: 10px;
    top: 7px;
    border-radius: 50%;
    width: 0;
    height: 0;
    content: "";
    background-color:transparent;
}

.packingSlip ul:not([class]) li {font-size: 0.5rem; padding: 0; margin: 0}
@media print {
    a {text-decoration: none}
    a:after { content:''; }
    a[href]:after { content: none !important; }
.packingSlip h3 {font-size: 1rem; margin: 0; font-weight: 400}
}

.accordion-title {
    padding: .5rem;
    border: 1px solid #cacaca;
    font-size: 1.125rem;
    line-height: 1;
    color: #222;
}
