* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}



html {

  min-width: 100%;

  max-width: 100%;

  height: 100%;

  font-family: "Roboto", sans-serif;

  -ms-overflow-style: none;

  overflow-x: auto;

  position: absolute;

    scrollbar-width: none;



}



:root{

  --accent: rgb(255, 85, 0);

  --oDNR: rgb(220,220,220);

  --whity: white;

  --pGlowOne: rgba(255, 59, 0, 0.5);

  --pGlowTwo: rgba(255, 59, 0, 1);

  --vatColor: lightgray;

  --tASelect: #ccc;

  --cartIco: rgba(255, 85, 0,0.7);

  --cartC: rgb(255, 85, 0);

  --inStock: lime;

  --cBtn: rgba(255,59,0,1);

}



#fpsMeter{

width: 100px;

height: 40px;

background: #0a0a0a;

color:white;

position:absolute;

z-index: 999999999999999999999;

}



body{

  min-width: 100%;

  max-width: 100%;

      position: absolute;

  height: 100%;

  display: flex;

  flex-direction: column;

  background: url('stars.jpg');

background-size: cover;

background-repeat: no-repeat;

overflow: hidden;

scrollbar-width: none;

will-change: transform;

}



::-webkit-scrollbar {

 display: none;

 width: 0;

height: 0;

}





.borderPulse{

  border: var(--accent) 1px solid;

}



.widgetCloseBtn{

      position:absolute; top:12px;

      right:12px;

      z-index:2147483647;

    display:inline-block;

     padding:8px 12px;

      border:1px solid #ccc;

    background:#fff;

     border-radius:6px;

      font:14px/1 system-ui, sans-serif;

    cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.2);

}



.headCont{

  display: flex;

  padding-top: 10px;

  position: absolute;

  z-index: 6;

  align-items: center;

  width: 100%;

  height: 15vh;

  justify-content: space-between;

  align-self: center;

}



.cartCont{

  opacity: 0;

  display: flex;

  border-radius: 50%;

  height: 100%;

  aspect-ratio: 1 / 1;

  animation: fadeIn 1s ease forwards;

  margin-right: 1vw;

  cursor: pointer;

}



.cartIcon{

  width: 100%;

  height: 100%;

  background-size: contain;

  background-repeat: no-repeat;

  border-radius: 50%;

  background: var(--cartIco);

}



.cartCloseCont{

display: flex;

  width: 10vh;

  border-radius: 20% 20% 0 0;

  background: white;

  color: black;

  justify-content: center;

  align-items: center;

  font-weight: bold;

  cursor: pointer;

  user-select: none;

}



.cartTotal{

  color:white;

}



.regBtnCont{

  width: 100%;

  display: flex;

  justify-content: flex-end;

}



.cartScroll{

  width: 5px;

  height: 30px;

  border-radius: 0.2vh;

  background-color: #ffffff;

  position: relative;

}



.registerScroll{

  width: 5px;

  height: 30px;

  border-radius: 0.2vh;

  background-color: #ffffff;

  position: relative;

}



.toRegister{

display: flex;

  width: fit-content;

  height: fit-content;

  padding: 0.5vw;

  background-color: white;

  justify-content: center;

  align-items: center;

  border-radius: 0.5vw;

  cursor: pointer;

  right: 2.5vw;

  font-size: 1.5vw;

  bottom: 30.5vh;

}



.closeMsg{

  width: fit-content;

  background: rgb(255, 85, 0);

  padding: 0.5vw;

  border-radius: 1vh;

  margin-top: 2vh;

  display: flex;

  position: relative;

  align-self: center;

  cursor: pointer;

}



.cartCount{

position: absolute;

  align-self: flex-end;

  background-color: var(--cartC);

  border-radius: 50%;

  aspect-ratio: 1 / 1;

  height: 1.5vw;

  display: flex;

  justify-content: center;

  align-items: center;

  font-weight: bold;

  color:white

}



.openCartCont{

position: absolute;

  display: flex;

  flex-direction: column;

  gap: 2vh;

  width: 60%;

  height: 100%;

  background-color: #f88541;

  padding: 8vh;

  border-radius: 10vh;

  align-self: center;

  top: 20%;

  z-index: 10;

  animation: floatUpCart 1s ease forwards;

  background-image: url('cartHillsOptimized.png');

  background-size: cover;

  align-items: center;

}



.cartFoot{

  display: flex;

  width: 100%;

}



.removeCartBtn{

  display: flex;

  height: 2vw;

  font-weight: bold;

  color: black;

  background: white;

  padding: 0.1vw;

  aspect-ratio: 1 / 1;

  justify-content: center;

  align-items: center;

  font-size: 24px;

  border-radius: 50%;

  cursor: pointer;

  user-select: none;

}



@keyframes floatUpCart {

  0% {top:100%}

  100% {top:20%}

}





.eBCont{

  position: absolute;

  width: 70vw;

  height: fit-content;

  background: #bdb4af;

  color:white;

  align-self:center;

  top:20%;

  z-index: 99999999;

  padding: 3vh;

  border-radius: 5vh;

  align-items: center;

  display: flex;

  flex-direction: column;

  background-image: url('register.jpg');

  background-size: cover;

  background-position: bottom;

}



.eBText{

  display: flex;

  text-align: center;

  padding-top:2vh;

  justify-content: center;

}



.eBBody{

  display: flex;

  flex-direction: column;

}



.eBConfirmation{

  display: flex;

  width: 100%;

  justify-content: end;

  margin-top:3vh;

}



.eBHead{

  display: flex;

  justify-content: space-between;

  padding: 2vh;

  border-bottom: white 1px solid;

  width:95%;

  align-items: center;

}



.eBHeader{

  font-size: x-large;

}



.eBClose{

  background: white;

  color: gray;

  padding: 2vh;

  height: 5vh;

  aspect-ratio: 1/1;

  display: flex;

  justify-content: center;

  align-items: center;

  font-weight: bold;

  border-radius: 2vh;

  cursor: pointer;

}



.balikBtnD{

  width: 100%;

  height: 100%;

  background: url('balikovna.svg');

  background-size: contain;

  background-repeat: no-repeat;

  background-position: center;

}



.zasilBtnD{

  width: 100%;

  height: 100%;

    background: url('zasilkovna.svg');

  background-size: contain;

  background-repeat: no-repeat;

  background-position: center;

}



.pplBtnD{

  width: 100%;

  height: 100%;

    background: url('ppl.svg');

  background-size: contain;

  background-repeat: no-repeat;

  background-position: center;

}



.deliPricesCont{

  display: flex;

  flex-direction: column;

  color:white;

  align-items: center;

}



.deliOut{

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 2vw;

}



.deliPriceInner{

  display: flex;

    justify-content: center;

  align-items: center;

}



.balikOutParcelNum{

  font-size: 4vh;

}



.balikOutHomeNum{

  font-size: 4vh;

}



.zasilOutParcelNum{

  font-size: 4vh;

}



.zasilOutHomeNum{

  font-size: 4vh;

}



.pplOutParcelNum{

  font-size: 4vh;

}



.pplOutHomeNum{

  font-size: 4vh;

}



.paymentSelect{

  display: flex;

  gap:0.3vw;

}



.deliUnderInfo{

  margin-top: 2vh;

}



.paymentBtn{

  width: fit-content;

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: #ff6000;

  color: black;

  font-size: 24px;

  padding: 0.5vw;

  border-radius: 0.5vw;

  cursor:pointer;

}



.transferIcon{

  height: 80%;

  aspect-ratio: 1 / 1;

  background-image: url('transfer.svg');

  background-repeat: no-repeat;

  background-size: contain;

  background-position: center;

}



.cardIcon{

  height: 90%;

  aspect-ratio: 1 / 1;

  background-image: url('card.svg');

  background-repeat: no-repeat;

  background-size: contain;

  background-position: center;

}

.cashIcon{

  height: 90%;

  aspect-ratio: 1 / 1;

  background-image: url('cash.svg');

  background-repeat: no-repeat;

  background-size: contain;

  background-position: center;

}



.cartHead{

  color:white;

  display: flex;

  width: 100%;

  justify-content: space-between;

  font-size: 8vh;

  border-bottom: 2px white solid;

}



.cartItem{

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.cartItemCost{

  display: flex;

  width:10%;

}



.cartItemName{

  display: block;

  width: 15%;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;



}



.cartList{

  display: flex;

  flex-direction: column;

  width: 50vw;

  height: fit-content;

  color:white;

  overflow: clip scroll;

  mask-repeat: no-repeat;

  mask-size: 100% 100%;

}



.cartTotal{

  display: flex;

  width: 100%;

}



.deliServices{

  display: flex;

  justify-content: center;

  margin-top: 3vh;

}



.balikBtn{

  width:20vw;

  height: 10vh;

  background-color: white;

  cursor: pointer;

}



.balikBtn:hover{

  box-shadow: 0 0 20px white;

}



.zasilBtn{

  width:20vw;

  height: 10vh;

  background-color: #ba1b02;

  cursor: pointer;

}



.zasilBtn:hover{

  box-shadow: 0 0 20px #ba1b02;

}



.pplBtn{

  width:20vw;

  height: 10vh;

  background-color: #004b93;

  cursor: pointer;

}



.pplBtn:hover{

  box-shadow: 0 0 20px #004b93;

}



.totalCont{

  display: flex;

  width: 50vw;

  justify-content: end;

}



.registerBody{

  display: flex;

  width: 100%;

  height: fit-content;

  flex-direction: column;

  align-items: center;

  overflow-x: clip;

  overflow-y: scroll;

  max-height: 60vh;



}



.listTotal{

display: flex;

font-size: 5vh;

color: white;

}



.prodPriceLine{

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.prodSaleShow{

  font-size: 14px;

  color: gray;

}



#scroller{

  width: 100%;

  display: flex;

  flex-direction: column;

  min-height: 100%;

  overflow-y: auto;

  overflow-x: hidden;

  scrollbar-width: none;

  -ms-overflow-style: none;

  top: 0;

  position: relative;

  align-items: center;

  justify-content: flex-start;

}



#brochure{

width: 400px;

transition: width 0.5s;

animation: fadeIn 1s ease forwards;

}



#confMsg{

  margin-top: 20px;

  text-align: center;

}



#prodCont{

  width: 199.3px;

    height: 300px;

    display: flex;

    flex-direction: column;

    padding: 10px;

    border-radius: 10px;

    border: solid 2px rgb(255, 59, 0);

}



.orderDiv {

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  align-items: flex-start;

  max-width: 45vw;

  padding: 20px;

  border-radius: 10px;

   height: fit-content;

  will-change: backdrop-filter;

  opacity: 0;

    animation: fadeIn 0.5s ease forwards 1s;

}



.orderPrice{

  display:flex;

  flex-direction: column;

color:var(--whity);

font-weight: bold;

margin-right: 20px;

margin-left: 20px;

}



.continueButton{

  width: 150px;

  height: 50px;

  background: linear-gradient(190deg, rgba(10,10,10,1) 20%, var(--cBtn) 100%);

  color:white;

  font-size: 22px;

  font-weight: bold;

  border: none;

  border-radius: 5px;

  display: flex;

  justify-content: center;

  align-items: center;

  cursor:pointer;

  user-select: none;

}



.sliderDomain{

  display: flex;

  align-items: center;

  margin-right: 10px;



}



.limitWarn {

  color:white;

  display: flex;

  position: absolute;

  width: 70%;

  height: 10vh;

  background: black;

  border-top: none;

  border-right: 2px rgb(255, 59, 0) solid;

  border-bottom: 2px rgb(255, 59, 0) solid;

  border-left: 2px rgb(255, 59, 0) solid;

  border-radius: 0 0 1vh 1vh;

  z-index: 999;

  animation: downAndUp 5s ease-in-out forwards;

  align-self: center;

  align-items: center;

  justify-content: center;

}





@keyframes downAndUp {



  0%{top: -100%}

  10%{top: 0%}

  80%{top : 0%}

  100%{top: -100%}



}



.orderDivName_left{

color: var(--whity);

  font-size: 32px;

  font-weight: bold;

}



.orderDivName_right{

  color: var(--oDNR);

  font-size: 25px;

}





.orderRecapCont{

  color: white;

  display: flex;

  flex-direction: column;

  width: 100%;

  margin-bottom: 20px;

    gap: 10px;

}



.entryLeftName{

  white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;

width: 200px;



}



#totalDiv{

  display: flex;

  align-items: center;

  width: auto;

  color: white;

  font-size: 32px;

  font-weight: bolder;

  align-self: self-end;

    margin-bottom: 20px;

}



.totalP{

  margin-left: 10px;

}



.orderDivName {

    color: white;

    font-size: 32px;

    font-weight: bold;

    margin-bottom: 20px;

  animation: fadeIn 1s ease forwards;

    overflow: hidden;

    margin-bottom: 20px;

}



.productDesc {

  display: flex;

    color: var(--whity);

overflow: clip scroll;

  margin-bottom: 20px;

  max-height: 25vh;

}



.productDesc{

  animation: fadeIn 1s ease forwards;

}



.recapEntry {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 5px 0;

      animation: fadeIn 1s ease forwards;

}





.entryLeft {flex: 0 0 auto;}



.entryFill {

  flex: 1;

  margin: 0 5px;

  border-bottom: 1px solid #ffffff;

  align-self: flex-end;

  position: relative;

  bottom: 5px;

}



.entryRight {

  flex: 0 0 auto;

  text-align: right;

}







.indexProd{

display: flex;

  flex-direction: column;

  width: 230px;

  height: 307px;

  justify-content: center;

  align-items: center;

  color: white;

  font-size: 20px;

  background-color: rgba(255, 85, 0, 0.2);

  text-align: center;

  border-radius: 2vw;

  will-change: opacity, box-shadow;

  overflow: clip;

  position: relative;

  user-select: none;

  cursor: pointer;

}



.indexProdInner{

  width: 100%;

  height: 100%;

  background-color: rgba(255, 85, 0, 0.2);

  will-change: opacity, box-shadow;

}



.prodPic{

width: 60%;



}



.prodPicCont{

width: 100%;

  height: 70%;

  background-size: contain;

  background-repeat: no-repeat;

  background-position: center;

  margin: 1vh 0 2vh 0;

}





.prodP{

    display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  overflow: hidden;

  text-overflow: ellipsis;

}



.fxlayer{

width: 100%;

height: 100%;

background-size: cover;

mix-blend-mode: lighten;



position: absolute;

}



.saleNumlayer{

  color:rgba(255, 59, 0, 1);

width: fit-content;

  font-weight: bolder;

top:10%;

right: 10%;

position: absolute;

font-size: 1.7vw;

  transform: rotate(32deg);

}



.flipBrowser_IMG{

  height: 100%;

  background-size: contain;

  background-repeat: no-repeat;

  background-position: center;

}



@keyframes pulseGlow {

  0%, 100% {

    box-shadow: 0 0 2px var(--pGlowOne);

  }

  50% {

    box-shadow: 0 0 7px var(--pGlowTwo);

  }

}



@keyframes textPulseGlow {

  0% {

    transform: rotate(32deg) scale(1);

    color:rgba(255, 59, 0, 1);

    text-shadow: 0 0 20px rgba(255, 59, 0, 0.5);

  }

  50% {

    transform: rotate(23deg) scale(0.7);

    color:rgb(255, 153, 0);

    text-shadow: 0 0 12px rgb(255, 153, 0);

  }

  100% {

    transform: rotate(32deg) scale(1);

    color:rgba(255, 59, 0, 1);

    text-shadow: 0 0 20px rgba(255, 59, 0, 0.5);

  }

}



@keyframes scrollFire {

  from {

    background-position: 0 0;

  }

  to {

    background-position: 0 192%;

  }

}



.prodStretch{

  display: flex;

  width:100%;

  position: relative;

  margin-top: 10vh;

  margin-bottom: 10vh;

  /*height: 0vh;*/

}





.preview{

  display: flex;

  flex-direction: column;

  border-radius: 1vh;

  padding:1vh;

  justify-content: space-between;

  align-items: center;

  height: 100%;

}





.photoCont{

  display: flex;

    width: 100%;

    position: relative;

    align-items: center;

}





.flipBrowserCont{

  display: flex;

    justify-content: center;

    align-items: center;

    width: 100%;

    mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);

    mask-repeat: no-repeat;

    mask-size: 100% 100%;

    height: 24vw;

    padding-left: 15vw;

      opacity: 0;

    animation: fadeIn 0.5s ease forwards 1s;

}



.flipBrowser{

display: flex;

height: 150vh;

  width: 25vw;

  align-items: center;

}





.noscroll {

  overflow: hidden !important;

}





.flipperItem{

  width: 23vw;

  height: 23vw;

  display: block;

  position: absolute;

  overflow: hidden;

  touch-action: none;



}



.prodDetailMain{

width: 100%;

display: flex;

align-items: center;

}



.prodDetailA{

  width: 40vw;

}



.prodDetailB{

  width: fit-content;

}



.deliFormBasic {

    display: flex;

    flex-direction: column;

    gap: 15px;

    width: 100%;

    margin-top: 20px;

    justify-content: center;

    align-items: center;

}



.paySelectDiv{

  display: flex;

  justify-content: center;

  gap: 5px;

  width: 100%;

  margin-top: 15px;

  margin-bottom: 15px;

}

#vatDiv{

  font-size: 12px;

  color: var(--vatColor);

}



.orderPriceCont{

  display: flex;

  flex-direction: column;

  justify-content: center;

}



.paySelc{

  width: 300px;

  height: 50px;

  font-size: 24px;

  border: none;

  border-radius: 15px;

  background: rgba(255, 59, 0, 1);

  color: white;

  animation: fadeIn 1s ease forwards;

}



.paySelc:hover{

box-shadow: 0 2px 20px rgba(255, 59, 0, 1);

}

.adrBtnZ{

  position: absolute;

    left: 216px;

    z-index: 99999999999999999999;

    background: #ba1b02;

    color: white;

    width: 289px;

    height: 80px;

    padding-top: 9px;

    top: -6px;

    font-size: 30px;

    border: none;

    border-radius: 0px 0px 10px 10px;

    box-shadow: none; /* Výchozí stav bez stínu */

    transition: box-shadow 0.3s ease;

    animation: fadeIn 1s ease forwards;

    display: flex;

  justify-content: center;

  align-items: center;

}





  .adrBtnZ:hover {

      box-shadow: 0 4px 8px 0 #ba1b02, 0 6px 50px 0 #ba1b02; /* Vytváří vícevrstvý stín */

  }



  #confMsg{



    color:white;

    font-size: 12px;



  }



  .adrBtnB{

    position: absolute;

      left: 30%;

      z-index: 99999999999999999999;

      background: #14377d;

      color: white;

      width: 289px;

      height: 80px;

      padding-top: 9px;

      top: -6px;

      font-size: 30px;

      border: none;

      border-radius: 0px 0px 10px 10px;

      box-shadow: none; /* Výchozí stav bez stínu */

      transition: box-shadow 0.3s ease;

      animation: fadeIn 1s ease forwards;

      display: flex;

  justify-content: center;

  align-items: center;

  }



    .adrBtnB:hover {

        box-shadow: 0 4px 8px 0 #14377d, 0 6px 50px 0 #14377d; /* Vytváří vícevrstvý stín */

    }





.adrBtnP{

  position: absolute;

    left: 27%;

    z-index: 99999999999999999999;

    background: #004b93;

    color: white;

    width: 289px;

    height: 80px;

    top: -6px;

    font-size: 30px;

    border: none;

    border-radius: 0px 0px 10px 10px;

    box-shadow: none; /* Výchozí stav bez stínu */

    transition: box-shadow 0.3s ease;

    animation: fadeIn 1s ease forwards;

    display: flex;

  justify-content: center;

  align-items: center;

}





  .adrBtnZ:hover {

      box-shadow: 0 4px 8px 0 #004b93, 0 6px 50px 0 #004b93; /* Vytváří vícevrstvý stín */

  }







.form-group {

    display: flex;

    flex-direction: column;

    align-self: first baseline;

}



.deliLabel {

    font-weight: bold;

    margin-bottom: 5px;

    color:white;

    animation: fadeIn 1s ease forwards;



}



.deliInput {

    padding: 8px;

    min-width: 300px;

    font-size: 14px;

    border: 1px solid rgb(255,85,0);

    border-radius: 20px;

    width: 100%;

    background-color: #0a0a0a;

    color:white;

        z-index: 3;

        animation: fadeIn 1s ease forwards;

}



.srvTA {

    padding: 8px;

    min-width: 80%;

    height: 20vh;

    font-size: 14px;

    border: 1px solid white;

    border-radius: 20px;

    width: 100%;

    background-color: #0a0a0a;

    color:white;

        z-index: 3;

        animation: fadeIn 1s ease forwards;

        margin-top: 2vh;

}



.orderInputDiv{

  width: 100%;

margin-top: 20px;

display: flex;

align-items: center;

animation: fadeIn 1s ease forwards;

}



.ode{

  justify-content: end;

}



.priceCont{

  display: flex;

}



#submitButton {

  width: 150px;

  height: 50px;

  color:white;

  font-size: 22px;

  font-weight: bold;

  border: none;

  border-radius: 5px;

    align-self: flex-end;

    animation: fadeIn 1s ease forwards;

}



.submit-button:hover {

    background-color: #45a049;

}



.orderDiv1Under1{

  display: flex;

  min-width: 1076px;

  align-items: center;

  justify-content: center;

}



.checkBoxDiv{

  display: flex;

  margin-top: 15px;

  margin-bottom: 10px;

  position: relative;

  animation: fadeIn 1s ease forwards;

  align-items: center;

}





.selektysSmall{

  display: flex;

  width: 13vw;

  height: 3vw;

}



.selektysSmall_input{

background: none;

  color: white;

  font-size: 24px;

  font-weight: bold;

  width: 20vh;

  text-align: center;

  height: 3vw;

}



.selektysSmall_minusBtn{

background: white;

  height: 100%;

  color: rgb(255, 85, 0);

  font-size: 24px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: bold;

  border-radius: 10px 0 0 10px;

  border: none;

  user-select: none;

  aspect-ratio: 1 / 1;



}



.selektysSmall_plusBtn{

background: white;

  height: 100%;

  color: rgb(255, 85, 0);

  font-size: 24px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: bold;

  border-radius:  0 10px 10px 0;

  border: none;

  user-select: none;

  aspect-ratio: 1 / 1;

}



.selektysSmall_plusBtn:hover{

  cursor: pointer;

}



.selektysSmall_minusBtn:hover{

  cursor: pointer;

}



.selektysSmall_minusBtn,

.selektysSmall_plusBtn {

    transition: background-color 0.3s ease-in-out;

}



.selektysSmall_minusBtn.active,

.selektysSmall_plusBtn.active {

    animation: flashEffect 0.3s ease-in-out;

}





.selektys{

  display: flex;

}



.selektys_input{

  background: none;

    color: var(--whity);

    font-size: 41px;

    font-weight: bold;

    width: 150px;

    text-align: center;

    height: 50px;

}





.selektys_minusBtn{

    background: white;

  height: 50px;

    width: 50px;

      color:var(--accent);

    font-size: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    border-radius: 10px 0 0 10px;

    border: none;

    user-select: none;

}





.selektys_plusBtn{

  background: white;

  height: 50px;

  color:var(--accent);

    width: 50px;

    font-size: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: bold;

    border-radius: 0 10px 10px 0;

    border: none;

    user-select: none;

}





.selektys_plusBtn:hover{

  cursor: pointer;

}



.selektys_minusBtn:hover{

  cursor: pointer;

}



@keyframes flashEffect {

    0% { background-color: var(--accent) ; }

    100% { background-color: rgb(255, 255, 255) ; }

}



.selektys_minusBtn,

.selektys_plusBtn {

    transition: background-color 0.3s ease-in-out;

}



.selektys_minusBtn.active,

.selektys_plusBtn.active {

    animation: flashEffect 0.3s ease-in-out;

}





#countryBlocked{

  width: 100%;

  height: 100%;

  position: absolute;

  z-index: 9999999999999999999999999999999999999999999;

  backdrop-filter: blur(50px);

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  font-size: 50px;

  color: white;

  text-align: center;

  padding: 10px;

}



#maintenanceBlock{

  width: 100%;

  height: 100%;

  position: absolute;

  z-index: 999999999999999999;

  background: black;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  font-size: 40px;

  color: white;

  text-align: center;

  padding: 10px;

}



.wrongHint{

  color: red;

    font-weight: bold;

    margin-bottom: 5px;

    position: absolute;

    align-self: flex-end;

    margin-right: 1vw;

}



.inputInnerHint{

  display: flex;

    transform: translateY(142%);

    position: absolute;

    z-index: 9999999999999999;

    color: red;

    font-weight: bold;

    width: 20px;

    height: 20px;

    align-self: flex-end;

    margin-right: 0.2vw;

  }



.cICheckBox_Cont{

color: white;

  display: flex;

  gap: 0.1vw;

  align-items: center;

  justify-content: center;

  margin-top: 5vh;

}



@keyframes blinkEffect {

    0%, 50% { opacity: 1; }  /* Pauza na 100% */

    60% { opacity: 0.2; }    /* První bliknutí */

    65% { opacity: 1; }      /* Zpět na 100% */

    70% { opacity: 0.2; }    /* Druhé bliknutí */

    75% { opacity: 1; }      /* Zpět na 100% */

    80% { opacity: 0.2; }    /* Třetí bliknutí */

    90%, 100% { opacity: 1; } /* Zpět na 100% + pauza */

}

.deliInput{

  width: 300px;

}



#checkBoxP{

  margin-left: 10px;

  font-size: 20px;

  color:white;

  animation: fadeIn 1s ease forwards;

}



#linkHeader{

  display: flex;

  align-items: center;

  width: 100%;

  justify-content: space-between;

  padding-bottom: 15px;

}



.cICheckBox_False {

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    width: 30px;

    height: 30px;

    margin: 0;

    border: 2px solid rgb(255,85,0);

    border-radius: 50%;

    background-color: #fff;

    cursor: pointer;

    transition: background-color 0.3s, border-color 0.3s;

    animation: fadeIn 1s ease forwards;

}



.cICheckBox_True {

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    width: 30px;

    height: 30px;

    margin: 0;

    border: 2px solid rgb(255,85,0);

    border-radius: 50%;

    background-color: rgb(255, 85, 0);

    cursor: pointer;

    transition: background-color 0.3s, border-color 0.3s;

    animation: fadeIn 1s ease forwards;

}



@keyframes fadeIn {

  to {

    opacity: 1;

  }

}



@keyframes fadeInDelayed {

  0% { opacity: 0;}

  50% { opacity: 0;}

  100% { opacity: 1;}

}



#submitCont{

  display: flex;

  align-items: center;

  align-self: end;

  animation: fadeIn 1s ease forwards;

}



.submitConfDiv{

  display: flex;

  align-items: center;

  color:white;

  gap:5px;

  margin-right: 5px;

  animation: fadeIn 1s ease forwards;

}



#gdprBanner{

  position: absolute;

  align-self: end;

background: linear-gradient(190deg, rgba(10, 10, 10, 1) 20%, var(--cBtn) 100%);

  display: flex;

  align-items: center;

  width: 100%;

  z-index: 9999999999;

  justify-content: space-between;

  padding: 20px;

  bottom: 0;

  animation: fadeIn 1s ease forwards;

}



#gdprText{

  color: white;

  font-size: 20px;

  animation: fadeIn 1s ease forwards;



}



#linkDiv{

  position: absolute;

    color: white;

    width: 400px;

    height: 150px;

    background: rgba(10,10,10,1);

    z-index: 999999;

    padding: 25px;

    align-self: center;

    overflow-y: scroll;

    scrollbar-width: none;

    display: flex;

    flex-direction: column;

    text-align: center;

    border-radius: 20px;

      animation: fadeIn 1s ease forwards;

  }





#linsk{

  margin-top: auto;

  opacity: 0;

  padding: 2vh 0 0 0;

  color: var(--whity);

  display: flex;

  gap:25px;

  animation: fadeIn 1s ease forwards;

  z-index: 4;

  padding-bottom: calc(0.2vh + env(safe-area-inset-bottom));

}





.blockCONT{

  width: 100%;

  min-height: fit-content;

  position: relative;

  z-index: 4;

  flex:1 1 auto;

}



.prodLineup{

  position: relative;

/*  margin-top:10%; */

  display: flex;

  align-items: center;

  justify-content: center;

flex-wrap: wrap;

gap:0.5vw;

}



.link:hover{

  color: rgb(10, 10, 10);

  cursor: pointer;



}

#linkClose{

  color: white;

  background-color: rgba(10,10,10,1);

width: 20px;

height: 20px;

border:white 1px solid;

border-radius: 10px;



}





.companyInfoForm {

  display: flex;

  justify-content: center;

  color: white;

}



.deliInsScater{

justify-content: center;

  display: flex;

  flex-wrap: wrap;

  gap: 0.5vw;

  width: 70%;

  margin-top: 25px;

  position: relative;

}



.iframeBalik{

width: 95%;

height: 95%;

position: absolute;

z-index: 5;

}





.shopRegister{

  display: flex;

  flex-direction: column;

  align-items: center;

  width: 100%;

  height: 100%;

  background-color: #bdb4af;

  position: absolute;

  z-index: 50;

  background-image: url('register.jpg');

  background-size: cover;



}





.registerHeader{

  font-size: 7vh;

  color:white;

}



.registerHead{

height: 15vh;

  display: flex;

  justify-content: space-between;

  border-bottom: 2px white solid;

  width: 90%;

  margin-top: 5vh;

  margin-bottom: 2vh;

}



.registerLeaveBtn{

display: flex;

  width: 7vw;

  height: 6vh;

  background: white;

  justify-content: center;

  align-items: center;

  border-radius: 2vw;

  cursor: pointer;

}



.listOutCont{

  display: flex;

  flex-direction: column;

  align-items: center;

  color:white;



}



.listCont{

  width: 50vw;

  margin: 1vh;

}



.listItem{

  display: flex;

  justify-content: space-between;

  margin-bottom: 1vh;

  font-size: 25px;

}



.litem{

  max-width: 30%;

display: -webkit-box;

  -webkit-line-clamp: 1;

  -webkit-box-orient: vertical;

  overflow: hidden;

  text-overflow: ellipsis;

}



.listFill{

  flex: 1;

  margin: 0 5px;

  bottom: 4px;

    position: relative;

border-bottom: 1px solid #ffffff;

}



.listAddBtn{

  width: 50px;

  height: 50px;

  background:rgba(255, 59, 0, 1);

  display: flex;

  justify-content: center;

  border-radius:10px;

  cursor:pointer;

}



  .listAddBtn{

    cursor:pointer;

    font-weight: bold;

  }



.totalDivCont{

  display: flex;

  color: white;

  align-self: end;

  margin-right: 2vw;

}



.deliIns{

width: 100%;

margin-top: 30px;

display: flex;

justify-content: center;

align-items: center;

gap:5px;

color: white;

}



#zBtn {

    background-color: #ba1b02;

    border: none;

    padding: 5px 10px;

    color: white;

    cursor: pointer;

    border-radius: 4px;

    font-size: 0.9rem;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

    height: 70px;

    width: 250px;

    border-radius: 18px;

    background-image: url('zasilkovna.svg');

    background-position: 50% 50%;

    background-repeat: no-repeat;

    animation: fadeIn 1s ease forwards;

}



#balikovnaBnt {

    background-color: #ffffff;

    border: none;

    padding: 5px 10px;

    color: white;

    cursor: pointer;

    border-radius: 4px;

    font-size: 0.9rem;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);

    height: 70px;

    width: 250px;

    border-radius: 18px;

    background-image: url('balikovna.svg');

    background-position: 50% 50%;

    background-repeat: no-repeat;

    animation: fadeIn 1s ease forwards;

    font-size: 50px;

  text-align: right;

  color: red;

}



.deliInput_labeled{

display: flex;

flex-direction: column;

position: relative;

}



#hintContBalik{

  color: white;

  display: flex;

  flex-direction: column;

  gap:10px;

    position: relative;

    z-index: 9999999999999999999;

    position: absolute;

    align-self: center;

    justify-self: center;

    top: 45%;

  backdrop-filter: blur(7px) saturate(1.4);

  padding: 15px;

  max-height: 400px;

  border-radius: 20px;

  font-size: 30px;

box-shadow: 0 0px 11px 11px rgba(25, 25, 25, 0.3);

}





#hintContentBalik{

  position: relative;

    z-index: 99999999999999999992;

    color: white;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 10px;

}



#hintOkBtnBalik{

  width: 150px;

  height: 50px;

  font-size: 26px;

  font-weight: bold;

  border-radius: 13px;

  border: none;

  background: none;

  backdrop-filter: grayscale(100%);

  color: white;

  cursor:pointer;

}



#hintOkBtnBalik:hover{

  backdrop-filter: saturate(2);

}



.iframeWrapper{

  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  background-color: rgba(0, 0, 0, 0.5);

  display: flex;

  justify-content: center;

  align-items: center;

  z-index: 1000;

}



.saleDiv{

  display: flex;

  flex-direction: column;

  text-align: center;

  color: var(--whity);

  margin-right: 10px;

  animation: fadeIn 1s ease forwards;

}



.prodLineup{

  gap: 1.5vh;

  margin-top: 2vh;

}

#orderPriceVal{

  font-size: 32px;

}

#orderPriceCurr{

  font-size: 32px;

}



.saleDivTop{

font-size: 12px;

}



.cartHead{

  font-size: 5vh;

}



.back{

  position: absolute;

  z-index: -1000;

  display: flex;

  width: 100%;

  height: 100%;

  justify-content: center;

  align-items: center;

}



.vsvBack{

    position: absolute;

  z-index: -999;

  display: flex;

  width: 100%;

  height: 100%;

  justify-content: center;

  align-items: center;

  background: white;

 /* background: linear-gradient(0deg,rgba(37, 120, 170, 1) 0%, rgba(0, 105, 171, 1) 100%); */

}



.vsvBlock{

  position: absolute;

}



.stars{

  width: 100%;

  overflow: hidden;

  position: absolute;

  z-index: -998;

  mix-blend-mode: multiply; /* Smíchání vrstev */

}



.sunCont{

  width: 800px;

  height: 800px;

  position: absolute;

  z-index: -997;

    filter: drop-shadow(0px 0px 50px #ff6000);

  animation: floatUpMain 1.7s ease-in-out forwards;

  border-radius: 50%;

  will-change: transform;

}



.sunBack{

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background: #ff6000;

    position: absolute;

}



.sunL1{

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(255,134,61,1) 0%, rgba(255,134,61,0) 70%);

  position: absolute;

}



.hills{

  width: 100%;

  overflow: hidden;

  position: absolute;

  z-index: -995;

  bottom:0;

  filter: brightness(0%);

animation: brighten 3s ease-in-out forwards;

}





@keyframes brighten {

    from {

        filter: brightness(0%);

    }

    to {

        filter: brightness(100%);

    }

}





.vyk{

  font-family: "Asap", serif;

  font-weight: bolder;

  font-size: 50px;

  color: red;

  margin-left: 10px;

    animation: fadeIn 1s ease forwards ;

}





#deliOptLable{

  margin-right: 10px;

  color: white;

  font-size: 24px;

  font-weight: bolder;

    animation: fadeIn 1s ease forwards;

}



#fatZasikaCont{

  display: flex;

  align-items: center;

  margin-top: 20px;

  color:white;

    animation: fadeIn 1s ease forwards ;

}



.afterSubmitMsgDiv{

  color: white;

    position: absolute;

    align-self: center;

    top: 25%;

    display: flex;

    flex-direction: column;

    backdrop-filter: blur(48px);

    padding: 50px;

    justify-content: center;

    text-align: center;

    border-radius: 30px;

      animation: fadeIn 1s ease forwards ;

      z-index: 999999999999999999;

}



.bigB{

  font-size: 40px;

    text-align: center;



    position: relative;

}





#thanksMsg{

  font-size: 52px;

    font-weight: bold;

    margin-bottom: 20px;

}





#transferMsg{

  font-size: 28px;

  margin-bottom: 20px;

}



#transferAcc{

  font-size: 40px;

  margin-bottom: 20px;

  letter-spacing: 1px;

  font-weight: bold;



}



#transferVarMsg{

  font-size: 25px;

  margin-bottom: 20px;



}



#transferVar{

  font-size: 38px;

  letter-spacing: 3px;

  font-weight: bold;

}





#afterSubmitMsgDiv{

  margin-bottom: 20px;

  font-size: 20px;

}





input[type="text"],

input[type="email"],

input[type="tel"],

input[type="password"],

textarea {

    outline: none;

    border: 1px solid var(--tASelect);

    padding: 10px;



}



input[type="text"]:focus,

input[type="email"]:focus,

input[type="tel"]:focus,

input[type="password"]:focus,

textarea:focus {

    border-color: var(--accent);

    box-shadow: none;

}





#quantWarnDiv{

  display: flex;

  color: var(--inStock);

  align-items: center;

}



.warnQuant{

  font-size: 24px;

  font-weight: bold;

}



#warnQuantHint{

  margin-left: 5px;

    font-size: 30px;

    width: 30px;

    height: 30px;

    background-image: url('hintIco.svg');

    background-size: cover;



}



#warnQuantHint:hover{

    cursor: pointer;

}



.hintCloseBtn{

  min-width: 50px;

  min-height: 50px;

  justify-content: center;

  align-items: center;

  display: flex;

  color:white;

  border-radius: 25px;

  margin-left: 10px;

  background: rgb(255,85,0);

}



.hintCloseBtn:hover{



  background: white;

  color: black;

  cursor: pointer;



}



.hint{

  display: flex;

  padding: 10px 10% 10px 10%;

  width: 100%;

  min-height: 50px;

  font-size: 20px;

  color:white;

  backdrop-filter: blur(50px);

  position: absolute;

  text-align: center;

  z-index: 9999999999999999999;

  align-items: center;

  justify-content: center;

}



#zipFlagBall{

  display: flex;

  width: 33px;

  height: 33px;

  position: absolute;

  z-index: 99999999;

  align-self: flex-end;

  border-radius: 30px;

  align-items: center;

  justify-content: center;

  transform: translate(-5px, 22px);

}

.zipLoader {

    border: 4px solid #f3f3f3;

    border-top: 4px solid rgb(255,85,0);

    border-radius: 50%;

    width: 20px;

    height: 20px;

    animation: spin 1s linear infinite;

}



@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}





.urDeviceSlow{

  display: flex;

  flex-direction: column;

background: rgb(255, 85, 0);

width: 100%;

height: 70%;

justify-content: center;

align-items: center;

position:absolute;

z-index: 9999999999999999;

text-align: center;

padding: 2vw;

top:20%;

user-select: none;



}





.urDeviceSlowMsg{

  margin-bottom: 3vh;

}



.urDeviceSlowFps{

  font-size: large;

  margin-bottom: 1vh;

}



.urDeviceSlowChoice{

  display: flex;

  gap: 2vw;

  margin-bottom: 3vh;

}



.urDeviceSlowD{

  margin-top: 5vh;

  font-size: smaller;

  font-style: italic;

}



.urDeviceSlowBtn{

background: #0a0a0a;

padding: 2vh;

border-radius: 1.5vh;

font-weight: bold;

cursor: pointer;

min-width: 5vw;

user-select: none;

}



.urDeviceSlowBtnp{

color:white;

}



.urDeviceSlowQ{

  margin-bottom: 2vh;

}



.urDeviceSlowFpsInfo{

  display: flex;

  gap: 5vw;

  margin-bottom: 2vh;

}



.urDeviceSlowHeader{

  font-size: larger;

  margin-bottom: 1.5vh;

}



.deliInputsCont{

  display: flex;

  flex-direction: column;

  width: 100%;

}



.deliSetviceCont{

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}



/*

@media (max-width: 1500px) {

  .orderDiv1Under1 {

    align-items: center;

    flex-direction: column;



  }

  #brochure{

  width: 300px;



  }



  .orderDiv1Under1{

    min-width: 500px;

  }



  .orderDiv{

    margin-top: 100px;



  }

}

*/





@media (orientation: portrait) , (max-width: 1285px) {





.headCont{

  height: 10vh;

}



    .adrBtnZ{

font-size: 16px;

    left: 36%;

    width: 33vw;

    height: 7vh;

    top: 3%;

    padding-top: 0px;

    border-radius: 2vh;

    }

    .adrBtnB{

font-size: 16px;

    left: 38%;

    width: 37vw;

    height: 7vh;

    }



        .adrBtnP{

font-size: 16px;

    left: 37%;

    width: 38%;

    height: 8%;

    top: 0px;

    }



.paymentBtn{

  border-radius: 4.5vw;

  height: 6vh;

  width: 80%;

}



.paymentSelect{

  gap: 1vh;

  flex-direction: column;

  align-items: center;

  width: 80%;

  margin-top: 2vh;

}



.registerBody{

  height: 90vh;

}



.balikBtn{

  width: 80%;

}

.zasilBtn{

  width: 80%;

}



.pplBtn{

  width: 80%;

}







.registerLeaveBtn{

  width: 22vw;

}



.registerHead{

  height: 10vh;

}



.registerHeader{

  font-size: 5vh;

}



  .deliServices{

    flex-direction: column;

    gap:2vh;

  }



.listCont{

  width: 86vw;

}



.totalCont{

   width: 86vw;

}



.toRegister{

  border-radius: 2vw;

    padding: 2.5vw;

  font-size: larger;

}



  .prodDetailA{

    width: 100%;

  }



  .cartItemCost{

  width:15%;

}



.cartCloseCont{

  width: 8vw;

}



.flipBrowser{

height: 60vw;

  width: 100vw;

}



.saleNumlayer{

  top: 4%;

  right: 0%;

  font-size: 11.7vw;

}



.orderPrice{

  margin-top: 3vh;

  margin-left: 0;

}



#orderPriceVal{

  font-size: 8vh;

}



#orderPriceCurr{

  font-size: 6vh;

}



#vatDiv{

  font-size: 3vh;

}



.warnQuant{

  font-size: 3vh;

}





.priceCont{

  justify-content: center;

  align-items: last baseline;

}



.flipperItem{

  width: 100vw;

  height: 50vw;

}



.flipBrowserCont{

  padding-left: 0;

  height: 50vw;

}



  #transferAcc{

    font-size: 22px;

  }



  .cartCount{

    height: 4vh;

    transform: translate(-10px, 5px);

  }



.openCartCont{



  width: 100%;

border-radius: 2vw;

padding: 4vw;

}



.cartList{

  width: 87vw;

  gap: 1vh;

}



.selektysSmall_input{

  width: 16vw;

  height: 5vh;

}



.removeCartBtn{

  height: 7vw;

}



.selektysSmall{

  height: 5vh;

  width: auto;

}



.blockCONT{

  width: 100%;

  min-height: auto;

  position: relative;

  z-index: 4;

}



  .deliFormBasic {

      display: flex;

      gap: 2vh;

      margin-top: 2vh;

      color:white;

  }



  .hills{

    width: 365%;

        bottom: 0;

  }



    .orderDivName{

      font-size: 4vh;

      margin-top: 0;

    }

    #brochure{

    width: 250px;

    }

    .orderDiv1Under1{

      min-width: 200px;

    }



    .orderInputDiv{

      flex-direction: column;

      align-self: center;

      align-items: center;

    }



    #orderInputSlider{

      width: 300px;

    }



    #orderPriceP1{

      margin-right: 0;

    }



    .warnQuant{

      color: Lime;

      font-size: 16px;

      font-weight: bold;

    }





    .saleDiv{

      margin-right: 0;

      flex-direction: row;

      align-items: center;

      margin-bottom: 20px;

    }

    .saleDivTop{

      margin-right: 10px;

    }

    .sliderDomain{

      margin-right: 0;

      flex-direction: column;

      align-items: center;

    }

    .continueButton{

      width: 40vh;

    }

    .orderRecapCont{

      width: 300px;

    }

    .deliIns{

    flex-direction: column;



    }



    .paySelectDiv{

      width: auto;

      flex-direction: column;

    }

    #deliOptLable{

      margin-right: 0;

      font-size: 18px;

      font-weight: bolder;

    }

    .entryLeftName{

      width: 170px;

    }





    .totalP{

      font-size: 20px;

    }



    h6{

      font-size: 10px;

    }



    #linkClose{

      color: white;

      background-color: rgba(10,10,10,1);

    width: 20px;

    height: 20px;

    border:white 1px solid;

    border-radius: 10px;



    }



    #afterSubmitMsgDiv{

      top: 9vh;

      width: 99%;

    }



    #linsk{

      flex-direction: column;

    }



    #linkDiv{

      width: 350px;

}



#transferMsg{

  font-size: 22px;

}



#submitCont{

  flex-direction: column;

  margin-bottom: 10px;

  margin-top: 2vh;

  align-self:center;

}



#submitConfText{



  font-size: 14px;

}

#submitButton{

  width:300px;

  margin-top: 10px;

  align-self: center;

}

#thanksMsg{

  font-size: 32px;

  margin-bottom: 20px;

}



#transferNonInfoMsg{

margin-bottom: 20px;

}



#transferMsg{

  font-size: 22px;

}



.bigB{

  font-size: 30px;

}



.warnQuant{

  font-size: 16px;

}



#warnQuantHint{



    width: 20px;

    height: 20px;



}



#countryBlocked{

  font-size: 22px;

}



.orderDiv{

  min-width: 95%;

}



.prodDetailMain{

  flex-direction: column;

  align-items: center;

}



.prodDetailB{

  width: 90%;

  display: flex;

    justify-content: center;

}







}





@keyframes floatUpMain {

            0% {

                transform: translateY(200%);

                opacity: 1;

            }

            80% {

                opacity: 1;

            }

            100% {

                transform: translateY(20%); /* Float off the screen */

            }

        }



@keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}