@import "./fonts.css";
@import "./fontawesome.min.css";
@import "./solid.css";
@import "./labels.css";
@import "./magnific-popup.css?v1";
@import "./owl.carousel.css";
@import "./blog.css";


.container-fluid {padding: 0 30px;}
html        {height:100%; margin:0; padding:0; }
body        {font-family: 'Montserrat', sans-serif; color: #272223; height:100% !important;; }

h1,h2,h3       {color: #272223; font-weight: bold; font-family: 'Montserrat', sans-serif;}
a           {color: #272223;  transition: color .2s,background-color .2s,border-color .2s; }
a:hover, a:active, a:focus {color: #bf2a13; text-decoration: none; outline: 0 none;}
iframe      {border:none}
label       {font-weight: lighter; padding:0; cursor: pointer}
.required:after { content:" *"; color: #bf2a13; position: absolute; top:1rem; right:1rem; font-weight: bold;}


.fontawesome:before, .fontawesome:after {content:""; font-family: "Font Awesome 5 Free"; }
.hiden      {display:none}
.cover      {background-size: cover; -moz-background-size: cover; background-repeat: no-repeat; background-position: center}
.relative   {position: relative;}
.underline  {text-decoration: underline;}
.more-space {padding:3rem 0;}
.np {padding:0}
.ulreset {margin:0; padding:0; list-style-type: none;}
.shadow {box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 15px 0 rgba(0,0,0,.15); }
#top-alert {display:none; position:fixed; top:1.5rem; right: 2rem; border-radius:10px; opacity:0.9; font-size:1.2rem; color: green; font-weight: bold;z-index:1000;}

.btn {cursor: pointer; border-radius:5px; padding:.55rem 1.5rem; font-weight: bold; font-size: .85rem;}
.btn-danger {color: #fff; background-color: #bf2a13; border-color: #bf2a13; position: relative;}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {color:#fff;background-color:#7d2619 !important ;border-color:#7d2619 !important}
.btn:focus, .btn:active {color:#fff !important}
.btn-danger.arrow {padding-right: 2.5rem ;}
.btn-danger.arrow::after {content:""; background-image: url(../images/btn_arrow_right.svg); width:18px; height:18px; display: block; background-size: cover; position: absolute; top:10px; right:15px}

.btn-primary {color: #fff; background-color: #272223; border-color: #272223; }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active{color:#fff;background-color:#272223 !important ;border-color:#272223 !important}
.btn:focus, .btn:active:focus, .btn.active:focus, input:focus, textarea:focus {box-shadow: none !important}

.btn-back {margin-left: 2rem;}

.collapsible {display:none}
.form-control {border-radius:5px; height:auto}
.form-control:focus, .close:focus{border-color: #8fbdcd !important;  box-shadow: none !important;  outline: 0 !important;  transition: none;}
.input-group {margin-bottom:15px}

.custom-radio .custom-control-input:checked~.custom-control-label::before,
.custom-checkbox .custom-control-input:checked~.custom-control-label::before
{background-color: #bf2a13;}
.custom-control-label::before {    border: 1px solid #ced4da;}
.custom-control-input:focus ~ .custom-control-label::before {box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(255, 255, 255, 0.25);} /* disable focus*/

.navbar {padding:0}

.mfp-image-holder .mfp-close {font-size:3rem; top: -5px; font-weight: lighter; margin:0; padding:0}
.dropdown-menu {padding:0; border-radius:0;  box-shadow: 3px 3px 20px 0px rgba(105, 105, 105, 0.35); margin:0}


strike {text-decoration: none; position: relative;}

strike:before {
  position: absolute;
  content: "";
  left: -2px;
  top: 50%;
  right: -5px;
  border-top: 1px solid;
  border-color: inherit;

  -webkit-transform:rotate(-18deg);
  -moz-transform:rotate(-18deg);
  -ms-transform:rotate(-18deg);
  -o-transform:rotate(-18deg);
  transform:rotate(-18deg);
}

@media print {
  a[href]:after {content:none;} /* nevytlaci linky */
 .noprint, footer {display: none;}
 FORM input[type=text], FORM textarea {margin-bottom:10px; border:none !important}
}

.navbar-toggler span {
    display: block;
    background-color: #fff;
    height: 3px;
    width: 30px;
    margin-bottom: 4px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    position: relative;
    left: 0;
    opacity: 1;
 }
 
 .navbar-toggler span:nth-child(1),
 .navbar-toggler span:nth-child(3) {
    -webkit-transition: transform .35s ease-in-out;
    -moz-transition: transform .35s ease-in-out;
    -o-transition: transform .35s ease-in-out;
    transition: transform .35s ease-in-out;
 
 }
 
 .navbar-toggler:not(.collapsed) span:nth-child(1) {
     position: absolute;
     left: 12px;
     top: 10px;
     -webkit-transform: rotate(135deg);
     -moz-transform: rotate(135deg);
     -o-transform: rotate(135deg);
     transform: rotate(135deg);
     opacity: 0.9;
     margin-top: .75rem;
 }
 
 .navbar-toggler:not(.collapsed) span:nth-child(2) {
     height: 12px;
     visibility: hidden;
     background-color: transparent;
 }
 
 .navbar-toggler:not(.collapsed) span:nth-child(3) {
     position: absolute;
     left: 12px;
     top: 10px;
     margin-top: .75rem;
 
     -webkit-transform: rotate(-135deg);
     -moz-transform: rotate(-135deg);
     -o-transform: rotate(-135deg);
     transform: rotate(-135deg);
     opacity: 0.9;
 }


 
/*************** SCROLLBAR BASE CSS ***************/
 

.scroll-wrapper > .scroll-content {
    border: none !important;
    box-sizing: content-box !important;
    height: auto;
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none !important;
    overflow: scroll !important;
    padding: 0;
    position: relative !important;
    top: 0;
    width: auto !important;
}
 
.scroll-wrapper > .scroll-content::-webkit-scrollbar {
    height: 0;
    width: 0;
}
 
.scroll-element {
    display: none;
}
.scroll-element, .scroll-element div {
    box-sizing: content-box;
}
 
.scroll-element.scroll-x.scroll-scrollx_visible,
.scroll-element.scroll-y.scroll-scrolly_visible {
    display: block;
}
 
.scroll-element .scroll-bar,
.scroll-element .scroll-arrow {
    cursor: default;
}
 
.scroll-textarea {
    border: 1px solid #cccccc;
    border-top-color: #999999;
}
.scroll-textarea > .scroll-content {
    overflow: hidden !important;
}
.scroll-textarea > .scroll-content > textarea {
    border: none !important;
    box-sizing: border-box;
    height: 100% !important;
    margin: 0;
    max-height: none !important;
    max-width: none !important;
    overflow: scroll !important;
    outline: none;
    padding: 2px;
    position: relative !important;
    top: 0;
    width: 100% !important;
}
.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar {
    height: 0;
    width: 0;
}
 
 
 
 
/*************** SIMPLE INNER SCROLLBAR ***************/
 
.scrollbar-inner > .scroll-element,
.scrollbar-inner > .scroll-element div
{
    border: none;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 10;
}
 
.scrollbar-inner > .scroll-element div {
    display: block;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
}
 
.scrollbar-inner > .scroll-element.scroll-x {
    bottom: 2px;
    height: 8px;
    left: 0;
    width: 100%;
}
 
.scrollbar-inner > .scroll-element.scroll-y {
    height: 100%;
    right: 2px;
    top: 0;
    width: 8px;
}
 
.scrollbar-inner > .scroll-element .scroll-element_outer {
    overflow: hidden;
}
 
.scrollbar-inner > .scroll-element .scroll-element_outer,
.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
 
.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
    opacity: 0.4;
}
 
.scrollbar-inner > .scroll-element .scroll-element_track { background-color: #e0e0e0; }
.scrollbar-inner > .scroll-element .scroll-bar { background-color: #c2c2c2; }
.scrollbar-inner > .scroll-element:hover .scroll-bar { background-color: #919191; }
.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; }
 
 
/* update scrollbar offset if both scrolls are visible */
 
.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -12px; }
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -12px; }
 
 
.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -12px; }
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -12px; }

.material-switch > input[type="checkbox"] {
    display: none;
}

.material-switch > label {
    cursor: pointer;
    position: relative;
    left:-40px

}

.material-switch > label::before {
    background: rgb(0, 0, 0);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 16px;
    margin-top: -8px;
    position:absolute;
    opacity: 0.3;
    transition: all 0.4s ease-in-out;
    width: 40px;
    top:1px;
    left:0
}
.material-switch > label::after {
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 24px;
    left: -4px;
    margin-top: -8px;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease-in-out;
    width: 24px;
}
.material-switch > input[type="checkbox"]:checked + label::before {
    background: inherit;
    opacity: 0.5;
}
.material-switch > input[type="checkbox"]:checked + label::after {
    background: inherit;
    left: 20px;
}

.label-default {background-color: #238356;}

.cookies {word-wrap: break-word;}
#cookies {position:fixed; bottom:20px; left:20px; background-color:white;width:295px;  z-index:500; box-shadow: 3px 3px 20px 0px rgb(105 105 105 / 50%);}
#cookies .box {padding:30px 20px; font-size:13px; background-color: #fff; color: #000}
#cookies .box a {text-decoration:underline}
#cookies strong {font-size:16px; margin-bottom:10px; display: block;}
#cookies .accept-cookies {position: absolute; top:0; right:0; padding:2px 10px}
#cookies .box b {display: block; margin-bottom:1.1rem; line-height: 16px;}
#cookies .material-switch > label {left:0}

 
 .email-err, .email-ok {display:none;position:absolute; left:-30px; top:10px;z-index:1000;}

/* MODALS */

.modal-content {box-shadow: 0px 20px 40px #535353;}
.modal .btn-back {padding-left:0}
.modal-register {background: #e3e3e3; text-align: center; padding:3rem 0; border-radius: 0 0 0.3rem 0.3rem;}
.modal-register .btn-modal-register {color: #fff; background-color: #333; padding:.35rem 1.3rem; border-radius: .25rem; margin-top:1rem; display:inline-block}
.btn-modal-forgotten {margin-left:1.5rem}
#modal-insert-basket .price {font-size:1.1rem; font-weight: bold; display: block; margin:1rem 0}
#modal-insert-basket .form-control {width:40%; display:inline}
#modal-size-table  {font-size:13px}
#modal-size-table table {margin-bottom:2rem}
#modal-size-table h2 {font-size:1.1rem}
#modal-size-table .table td, #modal-size-table .table th {padding:.5rem}



.modal-backdrop.show {opacity: 1;}
 .header-overlay, .modal-backdrop.show{-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); will-change: backdrop-filter;}
.header-overlay { position: fixed;left: 0; right: 0; bottom: 0; top: 0; z-index: 3; background: rgba(99, 99, 99, 0.4) !important; height: 100%; transition: opacity .3s ease-in-out; }
.modal-backdrop {    background: rgba(99, 99, 99, 0.4) !important;}

.close {font-size:3rem; font-weight: lighter; cursor: pointer; position: absolute; top:1.5rem; right:1rem; z-index: 1272223 !important; color: #6c757d !important; top:0; opacity:1}
.close:hover {opacity:.5}
.modal-body {padding:2rem; color: #272223;}
.modal-body h2 {font-size: 1.3rem;}

.esc      {font-family: auto; border:none; position: absolute; top:.5rem; right:.5rem; width:30px; height:30px; font-size:2.5rem; line-height: 0; cursor: pointer; z-index:10; background-color: transparent; font-weight: lighter; padding:0; margin:0}
.esc span {margin-top:-3px; display: block;}
.esc:hover {color: #ce2929; border-radius:50px; opacity:.7}
.esc:focus, .esc:active { outline: 0 !important;  transition: none;}



.rating h3 {font-size:3rem}
.rating .fa-star {color: #e2e9eb}
.rating .active { color: #FBC02D}
.rating .frame { border: 1px solid #e2e9eb;  flex-wrap: wrap; display: flex; padding:2rem; border-radius:10px}
.rating .fa-user-circle {font-size:2rem; color: #e2e9eb; display: block; margin-bottom:.5rem}
.rating time {display: block; font-size:.9rem}
.rating-label { font-weight: bold } .rating-bar { width: 300px; padding: 8px; border-radius: 5px } .bar-container { width: 100%; background-color: #f1f1f1; text-align: center; color: white; border-radius: 20px; cursor: pointer }

.bar-10 { width: 100%; height: 10px; background-color: #FBC02D; border-radius: 20px }
.bar-9 { width: 90%; height: 10px; background-color: #FBC02D; border-radius: 20px }
.bar-8 { width: 80%; height: 10px; background-color: #FBC02D; border-radius: 20px }
.bar-7 { width: 70%; height: 10px; background-color: #FBC02D; border-radius: 20px }
.bar-6 { width: 60%; height: 10px; background-color: #FBC02D; border-radius: 20px }
.bar-5 { width: 50%; height: 10px; background-color: #FBC02D; border-radius: 20px }
.bar-4 { width: 40%; height: 10px; background-color: #FBC02D; border-radius: 20px }
.bar-3 { width: 30%; height: 10px; background-color: #FBC02D; border-radius: 20px }
.bar-2 { width: 20%; height: 10px; background-color: #FBC02D; border-radius: 20px }
.bar-1 { width: 10%; height: 10px; background-color: #FBC02D; border-radius: 20px }
.bar-0 { width: 0%; height: 10px; background-color: #FBC02D; border-radius: 20px }

.rating ul {margin:0; padding:0; list-style-type: none; position: relative;}
.rating li {padding-left:1.5rem;  }
.rating .plus li:before  {color: green; content:"\f055"; font-family: "Font Awesome 5 Free"; padding-right:.5rem; position: absolute; left:0}
.rating .minus li:before {color: #ce2929; content:"\f056"; font-family: "Font Awesome 5 Free"; padding-right:.5rem; position: absolute; left:0}

.bar-shipping { width: 100%; background-color: #f1f1f1; text-align: center; color: white; border-radius: 20px; cursor: pointer; text-align: right; } .bar { width: 100%; height: 10px; background-color: green; border-radius: 20px }
.bar-shipping .fas {color: green; font-size:1.2rem; top:-1.1rem;  position: relative; margin-right:10px; }

/* badges */
.badge {color:#fff; padding:.35rem .45rem; }
.sale {background-color: #ce2929;}
.new  {background-color: #242ead;}
.vypredaj {background-color: #ce2929;}
.tip {background-color: orange;}
.bestseller {background-color: #f35a00}
.freedelivery{background-color: #000;}
.import {background-color: black;}