/* ikona pro přihlášení */
#klic img {width: 30px;}

body {
  /* background: url("../../img/bg_textura.png") left top 100px repeat, linear-gradient(to right, #EECDEE 10%, #BDEEFF 50%, #FFFFBA 90%); */
  /* background: url("../img/bg_textura.png"), linear-gradient(to right, #E6D72A 0%, #FFFFBA 10%, #FFFFBA 90%, #E6D72A 100%); */
  background: url("../img/bg_textura.png"), linear-gradient(to right, #FFFFBA 0%, #E7FFF5 20%, #E7FFF5 80%, #FFFFBA 100%);
  min-width: 920px;
}

h1 {
  margin: 0px;
  padding: 0px;
}
img {border: none;}

.upozorneni {
  color: #5BC8AC;
  font-style: italic;
}

.stranka {
  margin: auto;
  width: 70vw;
  min-width: 920px;
}


/* MENU */

#menu {
  position: fixed;
  width: 15vw;
  min-width: 150px;
  margin: 15vh 0px 0px 0px;
  display: flex;
  flex-direction: column;
}
#menu a {border: none;}

#menu .polozka {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
#menu .kategorie {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
  padding: 10px 10px 0px 10px;
  background-color: white;
  border-left: 3px solid white;
  -webkit-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.15);
  box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.15);
}
#menu .kategorie:last-child {margin-bottom: 0px;}
#menu #vse {margin-bottom: 30px;}
#menu .podkategorie {
  background: linear-gradient(to top, #F18D9E 0%, #FFCCE6 50%, #F18D9E 100%); 
  margin-bottom: 10px;
  margin-left: -25px;
  border-left: 3px solid white;
}

#menu .kategorie > a:first-child {margin-bottom: 10px; padding-left: 5px;}
#menu .podkategorie span, #menu .kategorie a:first-child {
  display: block;
  font-variant: small-caps;
  font-size: 2.6ex;
  text-align: left;
}
#menu .podkategorie span {
  padding: 10px 0px 12px 20px;
  position: relative;
  left: 0px;
}
#menu .podkategorie img {
  height: 24px;
  float: left;
  margin: 7px 10px;
}

#menu .polozka .sipka {
  width: 30px;
  height: 30px;
  float: right;
  transform: rotate(45deg);
  position: relative;
  -webkit-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.15);
  box-shadow: 3px -3px 5px 0px rgba(0,0,0,0.15);
}
#menu .kategorie > a:first-child .sipka {
  background-color: white;
  top: -3px;
}
#menu .podkategorie .sipka {
  background: linear-gradient(-45deg, #F18D9E 0%, #FFCCE6 50%, #F18D9E 100%);
  top: 7px;
}
#menu .podkategorie.vybrano {
  background: linear-gradient(to top, #5BC8AC 0%, #98DBC6 50%, #5BC8AC 100%);
  color: white;
}
#menu .podkategorie.vybrano .sipka {
  background: linear-gradient(-45deg, #5BC8AC 0%, #98DBC6 50%, #5BC8AC 100%);
  left: 15px;
}

#menu .kategorie.vybrano {background: linear-gradient(to bottom, #5BC8AC 0%, #98DBC6 20px, #5BC8AC 40px);}
#menu .kategorie.vybrano > a:first-child {color: white;}
#menu .kategorie.vybrano > a:first-child .sipka {
  background: linear-gradient(-45deg, #5BC8AC 5px, #98DBC6 22px, #5BC8AC 40px);
  left: 25px;
}

#menu .podkategorie:not(.vybrano) > .sipka { /* počáteční stav před animaci */
  left: -10px;
  opacity: 0;
}
#menu .podkategorie:not(.vybrano) > .sipka {transition: left 0.1s, opacity 0.1s;} /* spouštěč animace */
#menu .podkategorie:not(.vybrano):hover > .sipka { /* konečný stav po animaci */
  left: 15px;
  opacity: 1;
}

#menu .kategorie:not(.vybrano) a:first-child .sipka { /* počáteční stav před animaci */
  opacity: 0;
  left: 0px;
}
#menu .kategorie:not(.vybrano) .sipka {transition: left 0.1s, opacity 0.1s;} /* spouštěč animace */
#menu .kategorie:not(.vybrano) > a:first-child:hover .sipka { /* konečný stav po animaci */
  left: 25px;
  opacity: 1;
}

#menu .kategorie:not(.vybrano) > a {transition: padding-left 0.1s;} /* spouštěč animace */
#menu .kategorie:not(.vybrano) > a:first-child:hover {padding-left: 20px;} /* konečný stav po animaci */

#menu .podkategorie:not(.vybrano) > span {transition: left 0.1s;} /* spouštěč animace */
#menu .podkategorie:not(.vybrano):hover > span {left: 10px;} /* konečný stav po animaci */

#menu #vse {background: linear-gradient(to right, transparent 0%, transparent 10%, #eee 10.5%, #eee 90%, transparent 90.5%, transparent 100%);}
#menu #vse .kategorie:first-child {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-bottom-right-radius: 10px;
}
#menu #vse .kategorie:not(.vybrano):first-child {background: linear-gradient(to top, #eee 0%, white 50%, #eee 100%);}
#menu #vse .kategorie:not(.vybrano):first-child .sipka {background: linear-gradient(-45deg, #eee 0%, white 18px, #eee 100%);}
#menu #vse.vybrano {background: linear-gradient(to right, transparent 0%, transparent 10%, #5BC8AC 10.5%, #5BC8AC 90%, transparent 90.5%, transparent 100%);}

#pruh {
  width: 100vw;
  height: 75px;
  margin-top: 3vh;
  position: fixed;
  background-color: white;
  opacity: 0.5;
  z-index: -5;
}
#nadpis {
  /* background: linear-gradient(to bottom, #F18D9E 0%, #FFEEFF 50%, #F18D9E 100%); */
  /* background: linear-gradient(to right, #F18D9E 0%, #FFEEFF 10%, #FFEEFF 90%, #F18D9E 100%); */
  background: linear-gradient(to right, #E7FFF5 0%, #F8E2EE 20%, #F8E2EE 80%, #E7FFF5 100%);
  width: calc(70vw - 15vw - 10px); /* calc(#stranka:width - #menu:width - margin) */
  min-width: 750px;
  height: 75px;
  margin-top: 3vh;
  position: fixed;
  z-index: 5;
}

#nadpis .vintage {
  max-height: 170px;
  max-width: 250px;
  height: auto;
  width: auto;
  position: absolute;
  margin: -25px 0px 0px -70px;
}

#nadpis #kosik {
  border: none;
  display: block;
  float: right;
  margin: 10px 10px 0px 0px;
}
#nadpis #kosik img {height: 50px;}
#nadpis #kosik span:not(.vKosiku) {
  border-radius: 50%;
  display: inline-block;
  position: relative;
  left: -25px;
  padding: 5px;
  width: 15px;
  height 10px;
  background-color: #F18D9E;
  text-align: center;
  color: white;
}
#nadpis #kosik ul {
  background-color: rgba(240, 240, 240, 0.75);
  border-bottom-left-radius: 10px;
  position: absolute;
  list-style-position: outside;
  padding: 0px;
  padding-left: 30px;
  margin: 5px 0px 5px -145px;
  
  max-height: 0px;  /* počáteční stav před animaci */
  overflow: hidden;
}
#nadpis #kosik li {
  width: 200px;
  padding: 5px 10px 5px 0px;
}
#nadpis #kosik li:last-child {padding-bottom: 15px;}
#nadpis #kosik li:first-child {padding-top: 15px;}
#nadpis #kosik a ~ ul {transition: max-height 0.2s;} /* spouštěč animace */
#nadpis #kosik a:hover ~ ul { /* konečný stav po animaci */
  max-height: 100vh;
}

#vypis #filtr {margin: 15vh 20px 0px 65px;}
#vypis #filtr span {
  position: relative;
  top: -8px;
  margin-right: 10px;
}
#vypis #filtr a {
  border: 2px solid white;
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 10px;
  -webkit-box-shadow: 1px 0px 3px 0px rgba(0,0,0,0.21);
  -moz-box-shadow: 1px 0px 3px 0px rgba(0,0,0,0.21);
  box-shadow: 1px 0px 3px 0px rgba(0,0,0,0.25);
  color: #ccc;
  text-align: center;
}
#vypis #filtr .vybrano {  
  position: relative;
  top: -9px;
  margin-bottom: -9px;
}
#vypis #filtr img {
  width: 20px;
  height: auto;
  position: relative;
  top: -2px;
}
#vypis #filtr img:hover {cursor: pointer;}

#vypis #drobecek { /* h2 */
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  margin: 30px 50px 50px 50px;
  padding: 20px 0px;
}

#vypis {
  width: calc(70vw - 15vw - 10px); /* #stranka:width - #menu:width - mezera */
  min-width: 750px;
  min-height: 100vh;
  float: right;
  background-color: white;
  -webkit-box-shadow: 5px 0px 10px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 5px 0px 10px 0px rgba(0,0,0,0.25);
  box-shadow: 5px 0px 10px 0px rgba(0,0,0,0.25);
}
#vypis .kontejner {margin: 0px 50px 50px 50px;}

#vypis > .vintage {
  max-height: 150px;
  max-width: 100px;
  transform: rotate(180deg);
  margin-right: -30px;
  
  position: absolute;
  right: 15vw;
  bottom: 0px;
}
@media only screen and (max-width: 1300px) {
  #vypis > .vintage {
    position: relative;
    right: 0px;
    float: right;
    margin-top: -100px;
  }
}


/* INDEX */

#nabidka .kontejner {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

#nabidka .kontejner > div {
  margin: 20px 15px;
  position: relative;
  z-index: 0;
}
#nabidka .vyrobek {
  border: 1px solid #eee;
  background-color: white;
  display: inline-block;
  width: 172px;
  padding: 15px;
  -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.15);
  box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.15);
}
#nabidka .kontejner .vyrobek:hover {
  -webkit-box-shadow: 3px 3px 7px 0px rgba(0,0,0,0.20);
  -moz-box-shadow: 3px 3px 7px 0px rgba(0,0,0,0.20);
  box-shadow: 3px 3px 7px 0px rgba(0,0,0,0.20);
  /*
  top: -1px;
  left: -1px;
  */
}
#nabidka .vyrobek a div {
  border: 1px solid #eee;
  width: 170px;
  height: 170px;
  margin-bottom: 10px;
  text-align: center;
}
#nabidka .vyrobek a div img {
  max-width: 100%;
  max-height: 100%;
}
#nabidka .vyrobek > div {
  text-align: center;
}
#nabidka .vyrobek b {
  padding-bottom: 10px;
  display: block;
  height: 25px;
}

#nabidka .cenovka {
  /*
  background-color: rgba(241, 141, 158, 0.75);
  color: white;
  */
  background-color: rgba(255, 255, 186, 0.75);
  color: #666;
  border-top-left-radius: 40px;
  font-size: 11px;
  text-align: right;
  padding: 20px 7px 0px 0px;
  width: 50px;
  height: 25px;
  position: absolute;
  margin: -56px 0px 0px 114px;
}

.miniKosik {
  border-radius: 50%;
  display: block;
  position: absolute;
  padding: 1px 5px;
  background-color: #F18D9E;
  text-align: center;
  color: white;
  margin-left: 20px;
  margin-top: -5px;
}
.miniKosik:not(.vKosiku) {display: none;}


/* DETAIL */

#detail #drobecci {
  margin: 15vh 50px 30px 50px;
  position: relative;
  z-index: 5;
}
#detail #drobecci img {
  height: 20px;
  position: relative;
  top: 5px;
}

#detail .kontejner {
  display: flex;
  gap: 20px;
}

#detail .kontejner #zbytek {flex-grow: 4;}

#detail .kontejner #zbytek #infohled {
  display: flex;
  gap: 20px;
}

#detail .kontejner #zbytek #infohled #nahled {
  border: 1px solid #ccc;
  text-align: center;
  width: 20vw;
  height: 20vw;
}
#detail .kontejner #zbytek #infohled #nahled a {border: none;}
#detail .kontejner #zbytek #infohled #nahled img {
  /* max-width: 100%; */
  max-height: 100%;
}

#detail .kontejner #zbytek #infohled #informace {
  flex-grow: 1;
}

#detail .kontejner #zbytek #popis {
  margin-top: 20px;
  text-align: justify;
  padding: 20px;
}

#detail .kontejner #nahledy {
  flex-grow: 2;
  max-width: 100px;
  min-width: 50px;
  display: flex;
  gap: 20px;
  flex-direction: column;
}
#detail .kontejner #nahledy a {
  flex-grow: 1;
  display: block;
  width: 100%;
  max-height: 100px;
  min-height: 50px;
  overflow: hidden;
  border: 1px solid #ccc;
}
#detail .kontejner #nahledy img {
  width: 100%;
  height: auto;
  border: none;
}

.cena {
  color: crimson;
  font-weight: bold;
  font-size: 1.5em;
  margin: 20px 0px 10px 0px;
}
#detail .cena {display: block;}
#objednavka .cena {padding-left: 10px;} 


/* OBJEDNÁVKA */

#objednavka .kontejner, #dekujeme .kontejner, #kontakt .kontejner, #podminky .kontejner {margin-top: 15vh;}

#objednavka h2 {
  margin-top: 30px;
  margin-bottom: 10px;
}
#objednavka h2:first-child {margin-top: 15vh;}
#objednavka .formular > div {
  margin: 15px 0px;
}
#objednavka .formular input+input {margin-left: 5px;}
#objednavka .formular input {margin-bottom: 10px;}
#objednavka .formular textarea {width: 500px;}

#objednavka #shrnuti {margin-bottom: 20px;}
#objednavka #shrnuti td, #objednavka #shrnuti th {padding: 10px 20px;}

#objednavka #shrnuti tr:nth-child(odd) {background-color: rgba(248, 226, 238, 0.5);}
#objednavka #shrnuti tr:nth-child(even) {background-color: rgba(231, 255, 245, 0.5);}

#objednavka #shrnuti th {background-color: white;}
#objednavka #shrnuti th, #objednavka #shrnuti td:nth-child(1), #objednavka #shrnuti td:nth-child(3), #objednavka #shrnuti td:nth-child(4) {text-align: right;}
#objednavka #shrnuti th:nth-child(2), #objednavka #shrnuti td:nth-child(2) {
  min-width: 250px;
  text-align: left;
}

#objednavka #shrnuti .formular {margin-bottom: -5px;}

#objednavka #baleni {
  float: right;
  max-width: 300px;
  max-height: 200px;
  position: relative;
  right: 50px;
  bottom: 60px;
}

#objednavka #plus, #objednavka #minus {
  border-radius: 50%;
  padding: 0px 0px 0px 1px;
  width: 20px;
  height: 20px;
  margin-bottom: 3px;
}
#objednavka #plus {margin-left: 3px;}
#objednavka #minus {margin-right: 5px;}

#objednavka #balikovnaMapa {
  position: fixed;
  width: 90vw;
  height: 90vh;
  left: calc(5vw - 20px);
  top: calc(5vh - 20px);
  padding: 20px;
  z-index: 20;
  background-color: white;
  border: 1px solid #ccc;
}
#objednavka #zavritBalikovnu {
  background-color: white;
  border: 1px solid #ccc;
  width: 25px;
  padding: 5px 0px;
  text-align: center;
  font-weight: bold;
  position: fixed;
  top: calc(5vh - 20px);
  right: calc(5vw - 20px - 19px);
  z-index: 21;
}
#objednavka #zavritBalikovnu:hover {cursor: pointer;}


/* OBCHODNÍ PODMÍNKY */

#podminky li {
  padding: 5px 0px;
  text-align: justify;
}
#podminky ol {
  list-style-position: inside;
  list-style-type: upper-roman;
  padding-left: 0px;
  margin-bottom: 20px;
}
#podminky ol ol {
  list-style-position: outside;
  list-style-type: decimal;
  padding-left: 35px;
}

#podminky ol ol ul {list-style-type: disc;}


/* KONTAKT */

#kontakt ul {
  padding: 0px;
  margin: 5px 0px 30px 0px;
}

#kontakt ul li {
  list-style-type: none;
  padding-bottom: 5px;
}

#kontakt ul li span {
  display: inline-block;
  width: 90px;
}

#kontakt form {width: 500px;}
#kontakt form textarea {
  width: 488px;
  margin-top: 5px;
}