/* Ref
lgreen: #51b047
dgreen: #349f42
lgrey: #3f3f3f
dgrey: #363636
*/

/* Main */
html {font-size:15px}
body {background-color:#363636;color:#ffffff;font-family: 'Open Sans', sans-serif;line-height:1.7}
.watermark {z-index: -1;position: absolute;left:0; top:0;bottom:0; right:0;background-image: url(../images/watermark.png); background-repeat: no-repeat;opacity: 0.1; background-position: 125% -5%;background-size: auto;}
img {max-width: 100%}
a {color:#ffffff; transition: 0.2s ease all; -webkit-transition: 0.2s ease all; -moz-transition: 0.2s ease all;}
a:hover, a:active, a:focus {color:#8bdf82;text-decoration: none}


/* Typgraphy */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');
@font-face {
    font-family: 'Eurostile';
    src: url('../fonts/EurostileLTStd-Demi.eot');
    src: url('../fonts/EurostileLTStd-Demi.eot?#iefix') format('embedded-opentype'),
         url('../fonts/EurostileLTStd-Demi.woff2') format('woff2'),
         url('../fonts/EurostileLTStd-Demi.woff') format('woff'),
         url('../fonts/EurostileLTStd-Demi.ttf')  format('truetype'),
         url('../fonts/EurostileLTStd-Demi.svg#Eurostile LT Std') format('svg');
    font-weight: 600;
}

@font-face {
    font-family: 'Eurostile';
    src: url('../fonts/EurostileLTStd-Bold.eot');
    src: url('../fonts/EurostileLTStd-Bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/EurostileLTStd-Bold.woff2') format('woff2'),
         url('../fonts/EurostileLTStd-Bold.woff') format('woff'),
         url('../fonts/EurostileLTStd-Bold.ttf')  format('truetype'),
         url('../fonts/EurostileLTStd-Bold.svg#Eurostile LT Std') format('svg');
    font-weight: 800;
}

@font-face {
    font-family: 'Eurostile';
    src: url('../fonts/EurostileLTStd.eot');
    src: url('../fonts/EurostileLTStd.eot?#iefix') format('embedded-opentype'),
         url('../fonts/EurostileLTStd.woff2') format('woff2'),
         url('../fonts/EurostileLTStd.woff') format('woff'),
         url('../fonts/EurostileLTStd.ttf')  format('truetype'),
         url('../fonts/EurostileLTStd.svg#Eurostile LT Std') format('svg');
    font-weight: 400;
}

h1, h2, h3, h4 {font-family: 'Eurostile', sans-serif;text-transform: uppercase;letter-spacing: 0.05em;line-height:1.3}
h1 {font-size:1.7rem; font-weight: 700}
h2 {font-size:1.5rem; font-weight: 600}
h3 {font-size:1.3rem}
h4 {font-size:1.1rem}

/* Buttons */
.btn {background-color:#51b047;color:#ffffff;border-radius: 0; font-family: 'Eurostile', sans-serif;text-transform: uppercase;font-weight: 600;letter-spacing:0.1em; font-size:0.8rem; padding:1rem 1.5rem; transition: 0.2s ease all; -webkit-transition: 0.2s ease all; -moz-transition: 0.2s ease all;}
.btn:hover {color:#ffffff;background-color: #349f42}
.btn2 {background-color:#ffffff;color:#51b047}
.btn2:hover {background-color:#f9f9f9; color:#000000}
.btn.stretch {width:100%}

/* Navigation */
.navbar-toggle {position: absolute;right:0; top:0}
.navbar-inverse {background:transparent; border:none;}
#navbar {min-height: 200px;}
#navbar .icons {font-size:1.5rem; padding: 15px; padding-bottom: 15px;}
#navbar .icons a{padding:0 1rem; position: relative;}
#navbar .icons a.cart .counter{position:absolute;top:-25%; right:0; font-size:0.8rem; background:#51b047; width:20px; height:20px; border-radius: 20px; text-align: center;line-height: 20px}
#navbar .icons a.cart:hover, #navbar .icons a.cart:focus {color:#51b047}
#navbar .icons a.cart:hover .counter, #navbar .icons a.cart:focus .counter {background: #ffffff;}
.navbar-brand.hidden-lg {height:auto;margin:-20px auto 0 auto; width:100%;}
.navbar-brand.hidden-lg img{margin: 0 auto;max-width: 350px}
.navbar-brand.hidden-xs {height:auto;max-width:550px;    margin-top:-30px;position: absolute;  left: 50%;  transform: translatex(-50%);}
.navbar-nav li{font-family: 'Eurostile', sans-serif;text-transform: uppercase;letter-spacing:0.1em}
.navbar-inverse .navbar-nav>li>a {color:#ffffff;}
.navbar-nav>li>.dropdown-menu {visibility: hidden;opacity: 0; transition: 0.2s ease all; -webkit-transition: 0.2s ease all; -moz-transition: 0.2s ease all;}
.navbar-nav>li:hover {background:#212121}
.navbar-nav>li:hover>.dropdown-menu {visibility: visible;opacity: 1}

/* Main */
section.main {padding:3% 0 5% 0}
.row.heading {text-align: center;padding:0 0 2rem 0}

/* Bottom */
section.bottom {background: #3f3f3f; padding:3rem 0; text-align: center;}
.bottom .feature i {font-size:3rem}
.bottom .feature .headline {font-size:1.2rem; padding:1rem 0}

/* Footer */
footer.footer {background: #363636; padding:3rem 0 1rem 0; font-size:1.1rem}
footer.footer .contact-details a{display: block;margin-bottom:0.5rem}
footer.footer .information ul {list-style: none}
footer.footer .copyright {font-size:0.8rem; margin-top:1rem}

/* Login */
.login-wrapper {padding:5rem 3rem; background: #3f3f3f; border-radius:0.8rem}
.login-wrapper .login-form input {margin-bottom:2rem}
.login-wrapper .login-form button {width: 100%}

/* Forms */
.form-control {border-radius: 0; background: #595959; border-color:#595959;height:50px; color:#ffffff}
.form-control:focus {border-color:#ffffff; -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(256 256 256 / 60%);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(256 256 256 / 60%);
}

/* Home Layout */
.main .container .category-row {margin-top:1rem;}
.main .container .category-row ~ .category-row{margin-top:2.5rem}
.category-row .category-item img {width: 100%}
.category-row .category-item .title h2{font-size:1.2rem; text-align:center}

/* Category Layout */
section.sidebar {background: #51b047; color:#ffffff; padding: 0}
section.sidebar .title {border-bottom:1px solid #ffffff;padding:0.5rem 2.5rem}
section.category.sidebar .category-list {padding:1.5rem 2.5rem}
section.category.sidebar .category-list ul{list-style: none; padding:0;}
section.category.sidebar .category-list ul li {margin-bottom:0.5rem}

section.mainbar .title h1{margin-top:0}
section.mainbar .product-list .product-item {align-items: center;display: flex;justify-content: space-between;margin-bottom:0.5rem; padding-bottom:0.5rem; border-bottom:1px solid #666666; flex-wrap: wrap;}
section.mainbar .product-list .product-item div:first-child {padding-left:0}
section.mainbar .product-list .btn.add-to-cart {padding:0.6rem 1.5rem}

/* Cart & Checkout Layout */
section.summary.sidebar .summary-list {padding:2rem 2.5rem}
section.summary.sidebar .summary-list .subtotal {border-bottom:1px solid #ffffff; padding-bottom:1rem}
section.summary.sidebar .summary-list .total {border-bottom:1px solid #ffffff; padding:1rem 0}
section.summary.sidebar .summary-list .name {text-transform: uppercase;}
section.summary.sidebar .summary-list .number {text-align: right}
section.summary.sidebar .summary-list .price .name, section.summary.sidebar .summary-list .total .name, section.summary.sidebar .summary-list .total .number {font-weight:500}
section.summary.sidebar .summary-list .vat {font-size:80%}
section.summary.sidebar .summary-list .btn {margin:1rem 0}
section.summary.sidebar .summary-list .back {color:#000000;font-size:90%}
section.summary.sidebar .summary-list .back i {margin-right: 0.5rem; font-size:0.7rem}

section.mainbar .list-item.headings {border-top:1px solid #666666;border-bottom:1px solid #666666; padding-top:0.3rem; padding-bottom:0.3rem; text-transform: uppercase;}
section.mainbar .list-item {align-items: center;display: flex;justify-content: space-between;margin-bottom:0.5rem;flex-wrap: wrap;margin}
section.mainbar .list-item.cart-item { border-bottom:1px solid #666666; }
section.mainbar .list-item div{margin-bottom:0; }
 section.mainbar .cart-item {padding:1.2rem 0;}
section.mainbar .cart-list .list-item div:last-child{text-align:right}
section.mainbar .cart-list .cart-item i.fa-trash{margin-left:0.5rem}
section.mainbar .checkout-list .headings {margin-bottom:2rem}

section.mainbar .qty .number {display: inline}
section.mainbar .qty .minus, section.mainbar .number .plus{cursor: pointer;line-height: 10px;width:30px;height:30px;background:#595959;padding:8px 5px 8px 5px;border:1px solid #595959;display: inline-block;
    vertical-align: middle;text-align: center;}
section.mainbar .qty input{height:30px;width: 50px;text-align: center;border:1px solid #595959; background: #595959;display: inline-block;vertical-align: middle;}


/* Bottom Banner */
section.banner {background-image:url(../images/bottom-background.jpg); background-repeat: none; background-size: cover;padding:5% 25%;background-position: center;}
section.banner .content {background: rgba(0,0,0,0.7); padding:4rem; text-align: center;}
section.banner .content h3 {margin-bottom:2rem;}
section.banner .content .description {font-size:1.1rem; line-height: 2}


/* Media Queries */
@media (max-width: 575.98px) {
  section.banner {padding:10%;}
  section.banner .content {padding:2rem}
  div[class^="col-"] {margin-bottom:1rem}
  section.bottom, footer.footer  { padding:1.5rem 0;text-align: center;}
  footer.footer .text-right {text-align: center;}
  footer.footer .text-center img{max-width: 200px}
  section.main {padding:0% 0 10% 0}

  section.mainbar .product-list .product-item div {flex-basis:100%}
  section.mainbar .product-list .product-item div:first-child {padding-left:15px}
}
@media (max-width: 767.98px) {
  section.banner {padding:10%;}

}
@media (max-width: 991.98px) {
  section.banner {padding:10%;}
      section.category.mainbar, section.summary.sidebar {margin-top:2rem}
      section.mainbar .cart-list .list-item div {padding:0}
      section.mainbar .cart-list .list-item.headings {display: none}
      section.mainbar .cart-list .list-item {padding:2rem}
      section.mainbar .cart-list .list-item div{flex-basis: 100%; text-align: left!important;}
      section.mainbar .checkout-list .list-item {display: block;}
}
@media (min-width: 1200px) {
  .container {width: auto;padding: 0 10%;}
}


.alert-custom{
  background-color:#51B047;
  color:#fff;
}

.alert-error{
  background-color: red;
  color:#fff;
}


.cart-tooltip span.cart-content{
  display: none;
color: #000;
text-decoration: none;
padding: 3px;
}


.cart-tooltip:hover span.cart-content{
  display: block;
  position: absolute;
  top: 30px;
  left : -150px;
  background-color: #51B047;
  border: 1px solid #515947;
  color: #FFFFFF;
  margin: 2px 10px;
  border-radius: 5px;  
  width: 200px;
  font-size : 12px;
}