@font-face {font-family: FontAwesome; src: url(../font-awesome/fonts/fontawesome-webfont.woff) format('woff'),  url('../font-awesome/fonts/fontawesome-webfont.ttf') format('truetype');  font-weight: normal;
  font-style: normal;}
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');

body{background:#ffffff url(../img/bg.jpg) no-repeat fixed bottom; margin: 0px; font-size: 0.875rem;
//font-family: "Comic Sans MS", "Trebuchet MS", Arial, sans-serif;
font-family: "Comic Neue", Arial, sans-serif;
color:#444; letter-spacing: 0.02rem; line-height: 1.5;}
body {padding: 0em; margin: 0em}
a{color:#46a935;text-decoration:none;}
a:hover{text-decoration:none;}
.pointer {cursor: pointer;}
.clearbox {width: 1200px; margin: 0px auto}

 /** Hlavička **/
.header-main {width: 100%; background: #46a935;}
.header {width: 1220px; height: 100px; margin: 0px auto; background: #46a935; display: flex; justify-content:space-between; align-items: center;}
.header-left img {height: 80px; padding-left: 20px;}

.header-center-search {position: relative; border: #999999 1px solid; margin-top:10px; width: 403px; height: 40px; display: flex; justify-content:space-between; align-items: stretch;}
.header-center-search form {background-color: white}
.header-center-search input[type="search"] {padding: 5px !important; border: none !important} 
.header-center-search input[type="search"]:focus { outline: none;}
.header-center-search-glass {background: #FFD700; color: #fff; border: none; height: 40px;}
.search-result {position: absolute; top: 40px; left: -1px; background-color: #fff; width: 405px; z-index: 10; font-size: 0.675rem; }
.search-result-01 {border: #999999 1px solid;}
.search-result-container {padding: 5px; display: flex; flex-direction: row; align-items: center;}
.search-result-container:hover {background-color: #f7f7f7;}
.header-center-menu, .header-center-menu a, .header-center-menu a:hover {color: #FFD700; text-decoration:none;}

.header-right {position: relative; display: flex;  justify-content:space-between; width: 450px; height: 100px;}
.header-right .user, .header-right .shopping-cart{ width: 215px;height: 100px;padding: 0px 5px;display: flex;align-items: center; justify-content: space-evenly;}
.header-right .user{position: absolute; right: 215px;}
.header-right .shopping-cart{position: absolute; right:0px;}
.header-right .user:hover, .header-right .shopping-cart:hover {background-color: #419133;}
.header-right .ring {display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; border-color: white; border-style: solid; border-width: 2px;}
.header-right .fa-stack {height: 0em !important; }
.header-right .user .text, .header-right .shopping-cart .text {color: #FFD700}
.header-right a, .header-right a:hover {color: #FFD700; text-decoration:none;}

#shopping-cart_detail .arrow {content: "";position: absolute;right: 45px;top: -1px;width: 0;z-index: 10000;height: 0;border-color: #419133 transparent transparent;border-style: solid;border-width: 14px 14px 0;}
#shopping-cart_detail:hover + .shopping-cart, .shopping-cart:hover { color: #fff}
#shopping-cart_detail {height: 0px;width: 0px;background: yellow;visibility: hidden; position: fixed;}
.shopping-cart:hover + #shopping-cart_detail, #shopping-cart_detail:hover {position: absolute;top: 100px;left: 0px;height: auto;width: 430px;padding: 10px;background-color: whitesmoke;visibility : visible;box-shadow: 2px 2px 10px 0px rgba(70, 169, 53, 0.5); z-index: 100;}

.shopping_cart_container {border-bottom: #999999 solid 1px; padding: 3px 0px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: center;}
.shopping_cart_transport {display: flex; align-items: center;justify-content: space-between;}
.shopping_cart_container_price {border-top: #999999 solid 1px; padding-top: 10px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-around; align-items: center;}
.shopping_cart_container_price .shopping_cart_item .price {font-size: 20px;font-weight: bold;}
.shopping_cart_container_price .shopping_cart_item .info {font-size: 12px;font-weight: normal;font-style: italic;color: #999999;}
.shopping_cart_container_price .shopping_cart_item > p {margin: 0px;padding: 0px;}
.shopping_cart_container_price input[type="button"] {
    background-color: #515151;
    border: #515151 1px solid;
    padding: 6px 7px 6px 7px;
    color: #fff;
    cursor: pointer;
}

/** Bannery + menu **/
.aside-main {width: 100%;}
.aside {width: 1220px; margin: 0px auto; background: #fff; display: flex;  justify-content: space-between;}
.aside-full {width: 1220px; margin: 0px auto; background: #fff;}

.menu {width: 300px; background: #FFD700;}
.home {text-align: left; padding: 15px 0px 10px 0px;  width: 920px;}  
.home-top {height: auto}
.aside .aside-detail {text-align: left; width: 920px;} 
.aside .aside-detail section {padding: 0px 10px}
.aside-full .aside-detail {text-align: left; /*width: 1200px;*/} 
.home-bottom {width: 920px; display: flex; justify-content:space-between; align-items: stretch;}

/** Produkty **/
.article-main {width: 100%;}
.article {width: 1220px; margin: 0px auto; background: #fff;}

/** Náhled produktů **/
#product-container {width: 100%;
    margin: 0px auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: whitesmoke;
    justify-content: center;}
#product-container .product-item {width: 276px;margin: 5px 5px;padding: 5px 5px; border: 2px solid #fff; border-bottom-color: #e0e0e0; position: relative; background-color: #fff}
#product-container .product-item:hover{border-color: #46a935 !important}
#product-container .product-item::before{background-color:#fff}
.product-image {position: relative;padding: 0.625rem 0;text-align: center;}
.product-image .corner-red, .img-main .corner-red {position: absolute;content: "";border: 50px solid transparent; width: 0px; height: 0px; display: inline-block;  border-left: 50px solid red;color: #fff;border-top: 0; left: 0px; top: 0;}
.product-image .corner-yellow, .img-main .corner-yellow {position: absolute;content: "";border: 50px solid transparent; width: 0px; height: 0px; display: inline-block;  border-left: 50px solid #FFD700; color: #000000;border-top: 0; left: 0px; top: 0;}
.product-image .corner-green, .img-main .corner-green {position: absolute;content: "";border: 50px solid transparent; width: 0px; height: 0px; display: inline-block;  border-left: 50px solid #46a935; color: #fff;border-top: 0; left: 0px; top: 0;}
.product-image .sale, .img-main .sale {position: absolute;left: -50px; top: 10px;transform: rotate(-45deg);}
.product-image .sale-green, .img-main .sale-green {position: absolute;left: -46px; top: 4px;transform: rotate(-135deg);}
.product-item .product-code {position: absolute;top: 0;right: 0;}
.product-item .product_star {position: absolute;bottom: 0;right: 0;}
.product_code {color: #444;}
small {font-size: 80%;line-height: inherit;} 

.product-info a {color: #515151; font-size: 15px !important; font-weight: bold}
.product-info a:hover {color: #46a935}
.product-detail {margin-bottom: 70px}
.product-cart {position: absolute; width: 277px; height: 30px; bottom: 10px; right: 5px; clear: both}
.product-cart .product-price {float: left; line-height: 30px; font-size: 140%; font-weight: bold; color: #eb0000; width: 140px; text-align: left; padding-left: 10px;}
.product-cart .product-shopping-cart{float: right;line-height: 30px; width: 125px; text-align: center;  color: #fff; position: relative; }
.product-cart .product-shopping-cart a {background-color: #515151; display: block; color: #fff; text-decoration:none;}
.product-cart .product-shopping-cart a:hover {text-decoration:none;}
.product-shopping-cart input[type="number"] {border: #515151 1px solid; padding:6px 0px 6px 5px;}
.product-shopping-cart input[type="submit"] {background-color: #515151; border: #515151 1px solid; padding:5px 7px 5px 7px; color: #fff; cursor: pointer; }


/** Patička **/
.footer-main-line {background: #46a935; width: 100%;}
.footer-main-text {background-color: white;; width: 100%;}
.footer-line {background: #46a935; height: 40px; width: 1220px; margin: 0px auto; display: flex;flex-direction: row;flex-wrap: wrap; justify-content:space-between; align-items: center; color: #fff;}
.footer-text {background: #fff; width: 1220px; margin: 0px auto; display: flex;flex-direction: row;flex-wrap: wrap; justify-content: space-around}
.footer-text-item {width: 279px;margin: 5px 5px;padding: 5px 5px; }
.footer-signature {background: #46a935; height: 40px; width: 1220px; margin: 0px auto; display: flex;flex-direction: row;flex-wrap: wrap; justify-content:space-between; align-items: center; color: #fff;font-size: 90%;font-style: italic;}
.footer-signature-item {margin: 0px 5px}
.footer-text #item-3, .footer-text #item-4  {text-align: center;}
.footer-text #item-3 {}
.footer-signature-item a {color: #fff;}
.footer-signature-item a:hover {color: #fff;}
.footer-text-item > ul {list-style-type: none; margin: 0px;padding: 0px;}
.footer-text-item > ul a {color:#444}
.footer-text-item > ul a:hover {color:#46a935}
.footer-text-item > ul > li {padding: 2px 5px;}
.footer-text-item > ul > li::before {font-family: FontAwesome;font-size: 16px;content: "\f0da";color: #46a935;margin-right: 10px;}

/** Barvy **/
.green {background: #46a935}
.yellow {background: #FFD700}
.gold {color: #FFD700}
.red {color: red}
/** Icony **/
.icons {margin: 3px !important}
.icon-green, .icon-gray, .icon-red {margin: 3px 10px;}
.icon-green {color: #46a935;}
.icon-gray {color: #999999}
.icon-gold {color: #FFD700}
.icon-silver {color: #C0C0C0}
.icon-bronze {color: #CD7F32}
.icon-white {color: white;}
.icon-red {color: red;}

.svg-gray {fill: #999999}
.svg-green {fill: #46a935;}
.svg-white {fill: white}
.svg-red {fill: red}
.svg-green, .svg-gray, .svg-white, .svg-red  {margin: 0px 3px}


/** Fonty **/
.b {font-weight: bold;}

/** Strany **/
.center {text-align: center}
.left {text-align: left}
.right {text-align: right}

/** div **/
.flex {display: flex}

/** Formulare **/
input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="phone"], input[type="tel"], input[type="number"], input[type="submit"], input[type="date"] , input[type="select"], select {border: #46a935 1px solid; padding:10px 15px; background: #fff}
input:focus, select:focus { outline: none; color:#444}
input:active, select:active { outline: none; color:#444}
.w20 {width: 20px}
.w30 {width: 30px}                              .p25 {width: 25%}
.w35 {width: 35px}                              .p7 {width: 7%}
.w50 {width: 50px}      .h50 {height: 50px}     .p75 {width: 75%}
.w80 {width: 80px}      .h40 {height: 40px}     .p85 {width: 85%}
.w88 {width: 88px}                              .p97 {width: 97%}
.w130 {width: 130px}                            .p100 {width: 100%}
.w150 {width: 150px}                            .p5 {width: 5%}
.w200 {width: 200px}                            .p10 {width: 10%}
.w250 {width: 250px}                            .p20 {width: 20%}
.w350 {width: 350px}                            .p30 {width: 30%}
.w60 {width: 60px}                              .p43 {width: 43%}
.w240 {width: 240px}                            .p16 {width: 16%}
                                                .p60 {width: 60%}
                                                .p40 {width: 40%}

.control {
  display: block;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
}
.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}
.control__indicator {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 20px;
  width: 20px;
  background: #e6e6e6;
}
.control--radio .control__indicator {
  border-radius: 50%;
}
.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
  background: #ccc;
}
.control input:checked ~ .control__indicator {
  background: #46a935;
}
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
  background: #46a935;
}
.control input:disabled ~ .control__indicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}
.control__indicator:after {
  content: '';
  position: absolute;
  display: none;
}
.control input:checked ~ .control__indicator:after {
  display: block;
}
.control--checkbox .control__indicator:after {
  left: 8px;
  top: 4px;
  width: 3px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.control--checkbox input:disabled ~ .control__indicator:after {
  border-color: #7b7b7b;
}
.control--radio .control__indicator:after {
  left: 7px;
  top: 7px;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: #fff;
}
.control--radio input:disabled ~ .control__indicator:after {
  background: #7b7b7b;
}
.select {
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
  border: #46a935 solid 1px;
}
.select select {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  outline: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.select select::-ms-expand {
  display: none;
}
.select select:disabled {
  opacity: 0.5;
  pointer-events: none;
}
.select__arrow {
  position: absolute;
  top: 16px;
  right: 15px;
  width: 0;
  height: 0;
  pointer-events: none;
  border-style: solid;
  border-width: 8px 5px 0 5px;
  border-color: #7b7b7b transparent transparent transparent;
}
.select select:hover ~ .select__arrow,
.select select:focus ~ .select__arrow {
  border-top-color: #46a935;
}
.select select:disabled ~ .select__arrow {
  border-top-color: #ccc;
}

/********* Fieldset **********/
fieldset {border: #999999 1px solid; width: 90%; margin: 10px auto; padding: 20px 10px;}
fieldset legend {color: #444; text-align: left; border: none; font-weight: bolder; color: #46a935; text-transform: uppercase; padding: 4px 5px 4px 5px;}
fieldset div.row {width: 90%; margin: 10px auto; display: flex; align-items: baseline;}

/********* Tlačítka **********/
.button {clear: both; margin: 20px 0px}
.btn-danger {color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);background-color: #46a935; background-image: -moz-linear-gradient(top, #417d37, #46a935); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#417d37), to(#46a935)); background-image: -webkit-linear-gradient(top, #417d37, #46a935); background-image: -o-linear-gradient(top, #417d37, #46a935); background-image: linear-gradient(to bottom, #417d37, #46a935); background-repeat: repeat-x;}
.btn-empty {color: #fff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);background-color: #999999; background-image: -moz-linear-gradient(top, #417d37, #999999); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#417d37), to(#999999)); background-image: -webkit-linear-gradient(top, #417d37, #999999); background-image: -o-linear-gradient(top, #417d37, #999999); background-image: linear-gradient(to bottom, #417d37, #999999); background-repeat: repeat-x;}
.btn {font-family:"Wellfleet"; display: inline-block; padding: 6px 15px; margin-bottom: 0; font-size: 14px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer;  border-radius: 3px; border: 1px solid #c0c0c0; border-bottom-color: #999999; box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); }
.btn svg {height: 35px; vertical-align: middle;}

/** Nadpisy **/
h1{margin:0px;padding:0px;font-size:14px;font-family:"Wellfleet" !important; font-weight: 500 !important;} 
h2{margin:0px;padding:0px;font-size:15px;font-family:"Wellfleet"; font-weight: 300;}
h3{margin:0px;padding:0px;font-size:12px;font-family:"Wellfleet"}
.wrapper {text-align: center;position: relative;}
.wrapper:before {background: #999999;}
.wrapper:before {content: ""; position: absolute; top: 33%; left: 0; width: 100%; height: 1px;}
.even-nor, .h2-odd-nor, .h2-odd {background: #fff; color: #444}
.even-nor, .h2-odd-nor, .h2-odd {padding: 0 20px; display: inline-block; margin: 0.3125rem 0 1rem; text-transform: uppercase; position: relative;}
.even-nor svg {vertical-align: middle; height: 30px}
.h2-even {margin:7px 0px 7px 0px !important;font-size:20px !important;color: #46a935 !important; text-transform: uppercase;}
.h2-even span{font-size:17px;color:#ffcc00;}
.h1-even {margin:7px 0px 7px 0px;font-size:20px !important;color: #46a935 !important; text-transform: uppercase; text-align: center;}
.h1-even span{font-size:17px;color:#ffcc00;}  


/** Menu */
.menu__ul {
	list-style: none;
	padding: 0px;
    border-top: 2px solid #fff; 

}

.navigace > li {
    position: relative;
	height: 45px;
	cursor: pointer;
    border-bottom: 2px solid #fff;    
	transition: background-color .3s;
	-webkit-transition: background-color .3s;
	-moz-transition: background-color .3s;
	-o-transition: background-color .3s;
}


.menu__polozka_prvni  {}
.menu__polozka {}
.navigace > li:hover {
	background-color: #46a935;
    color: #fff;
}


.menu__odkaz {
	color: #eb0000;
	height: 45px;
	padding-right: 15px;
	line-height: 48px;
	padding-left: 15px;
	box-sizing: border-box;
	cursor: pointer;
	display: block;
	text-decoration: none;
    text-align: left;
} 
.menu__odkaz svg {fill: #eb0000; height: 14px;}
.menu__odkaz:hover svg {fill: #fff;}
.menu__odkaz:hover {
    color: #fff;
}
.menu__TelefonTlacitko {
	display: none;
	outline: none;
	border: none 0px transparent;
	background-color: transparent;
	font-size: 25px;
	cursor: pointer;
	color: #eb0000;
	padding-left: 5px;
	padding-right: 5px;
} 
.navigace li ul {display: none; position: absolute; left: 289px; top: -1px; width: 660px; background: #fff; border: 1px solid #444; border-bottom-width: 3px; z-index: 10}
.navigace li.hover ul {display: block;}

.navigace ul li {display: block; float: left; width: 200px; height: 40px; line-height: 40px; padding: 0px 10px}
.navigace ul li:hover {text-decoration: none; background: #46a935; color: #fff !important;}
.navigace ul li:hover a {color: #fff;}


/********** Navigační lišta **********/                       
.navigation-bar  {display: flex; justify-content: flex-start; width: 100%; color: #999999; font-size: 11px; padding: 5px 0px;}
.navigation-bar .navigation-bar-items  {}
.navigation-bar-item-reverse {display: flex; flex-direction: row;}
.navigation-bar .gap::before {
    display: inline-block;
    text-rendering: optimizeLegibility;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    content: "\00bb";
    color: rgb(144, 150, 160);
    margin-right: 0.5rem;
    margin-left: 0.5rem;
    width: 1em;
    text-decoration: inherit;
}


/* Hlášení */
#reports { position: absolute;  width: 900px; top:200px;  background: transparent; z-index: 10}
#report { width: 80%; margin: 0px auto;}
#bad, #good { font-weight: bold; font-size: 92%; text-align: center;  padding: 1.7em 2em }
#bad { border: solid 2px #C30F18; background-color: #F8E3E2;  margin: 5px auto 5px auto }
#good { border: solid 2px #138700; background-color: #D7F7C9;  margin: 5px auto 5px auto }

.a-tooltip {position: relative; padding: 0; text-decoration: none !important; font-size: 12px;}
.a-tooltip span {display: none; font-size: 12px; background-color: #fff; border:#46a935 1px solid;}
.a-tooltip:hover { background: transparent; text-decoration: none !important;}
.a-tooltip:hover span.tooltip { position: absolute; width: 200px; left: -75px; display: block; padding: 0; text-align: left; z-index: 5}
.a-tooltip:hover span.middle { font-weight: normal; display: block; padding: 10px; background: transparent bottom; text-decoration: none; color: #313131; text-align: center; font-size: 12px; }

/* Title */
[data-title]:hover:after {
    opacity: 1;
    transition: all 0.1s ease 0.5s;
    visibility: visible;
}
[data-title]:after {
    content: attr(data-title);
    background-color: #46a935;
    color: white;
    font-size: 100%;
    position: absolute;
    padding: 2px 5px 2px 5px;
    top: -30px;
    left: 0px;
    white-space: nowrap;
    box-shadow: 1px 1px 3px #999999;
    opacity: 0;
    z-index: 99999;
    visibility: hidden;
}
[data-title] {
    position: relative;
}

/********** Modal **********/
.size-modal {
  display:none;
  position:fixed;
  z-index:1000;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:auto;
  background-color: rgba(0,0,0,0.5);
}

.size-modal-content {
  background-color:#fff;
  margin:10% auto;
  padding:20px;
  border-radius:10px;
  max-width:70%;
  text-align:center;
  position:relative;
}

.size-modal-close {
  position:absolute;
  top:10px;
  right:15px;
  color:#46a935;
  font-size:28px;
  font-weight:bold;
  cursor:pointer;
  transition: color 0.2s;
}

.size-modal-close:hover {
  color:#aaa;
}