/* bannery */

.bannerek{
  text-align: center;
  width: 100%;
  height: 400px;
  position: relative;
      -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    overflow: hidden;

}
@media only screen and (max-width: 1024px) {

.bannerek{
  height: 300px;


}
}

@media only screen and (max-width: 800px) {

.bannerek{
  height: 250px;


}
}


@media only screen and (max-width: 600px) {


.bannerek{
  height: 200px;


}
}


@media only screen and (max-width: 450px) {


.bannerek{
  height: 150px;


}
}









.bannerek:hover{
      -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
}
.bannerek::before{
  content: "";
      -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    position: absolute;
    left: 0px;
    top: 0px;
}
.bannerek:hover::before{
  content: "";
      -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
    position: absolute;
    left: 0px;
    top: 0px;
}

.bannerek a.od{
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 111;

}
.bannerek h2{
  text-align: center;
  width: 100%;
  top: 40%;
  position: absolute;
  color: rgba(255, 255, 255, 1);
  font-weight: 800;
  font-size: 40px;

}
.bannerek h2 span{
/*  position: absolute;
  text-indent: -9999px;*/
}


.bannerek h2::before{
  content: "";
    width: 40px;
    height: 40px;
    background: url(vice-zel.png);
    background-size: 40px;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    position: absolute;
    z-index: 11;
    top: 150%;
    left: 50%;
    margin-left: -20px;

}
.bannerek:hover h2:before{
      content: "";
    width: 40px;
    height: 40px;
    background: url(vice-hover.png);
     background-size: 40px;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
        position: absolute;
    z-index: 11;
    top: 150%;
    left: 50%;
    margin-left: -20px;


}

 @media all and (max-width: 1024px) {
.bannerek h2{
  text-align: center;
  width: 100%;
  top: 40%;
  position: absolute;
  color: rgba(255, 255, 255, 1);
  font-weight: 800;
  font-size: 30px;

}
}

  @media all and (max-width: 600px) {
.bannerek h2{
  text-align: center;
  width: 100%;
  top: 40%;
  position: absolute;
  color: rgba(255, 255, 255, 1);
  font-weight: 800;
  font-size: 20px;

}
.bannerek h2::before{
  content: "";
    width: 30px;
    height: 30px;
    background: url(vice-zel.png);
    background-size: 30px;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    position: absolute;
    z-index: 11;
    top: 150%;
    left: 50%;
    margin-left: -15px;

}

.bannerek:hover h2:before{
      content: "";
    width: 30px;
    height: 30px;
        background-size: 30px;
    background: url(vice-hover.png);
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;

}

}





.vypis{
  text-align: center;
  padding-bottom: 40px;
  width: 100%;

}
.vypis.mezery{
  text-align: center;
  padding-bottom: 40px;
  width: 96%;
  margin-left: 2%;

}

@media only screen and (max-width: 1024px) {
.vypis{
  text-align: center;
  padding-bottom: 40px;
  width: 96%;
  margin-left: 2%;

}
}
@media only screen and (max-width: 450px) {
.vypis{
  text-align: center;
  padding-bottom: 40px;
  width: 100%;
  margin-left: 0px;

}
.bannerek h2{
  text-align: center;
  width: 100%;
  top: 20%;
  position: absolute;
  color: rgba(255, 255, 255, 1);
  font-weight: 800;
  font-size: 18px;

}
.bannerek h2::before{
  content: "";
    width: 20px;
    height: 20px;
    background: url(vice-zel.png);
    background-size: 20px;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;
    position: absolute;
    z-index: 11;
    top: 150%;
    left: 50%;
    margin-left: -10px;

}
.bannerek:hover h2:before{
      content: "";
    width: 20px;
    height: 20px;
        background-size: 20px;
    background: url(vice-hover.png);
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;

}
}


/*
produkty
 */
.produkt{
/*  width: 33%;
float: left;*/
  vertical-align: top;
/*  display: inline-block; */
  text-align: center;

/*  margin-right: 5px;
  margin-bottom: 10px;*/
  height: 250px;
  max-height: 250px;
  -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    position: relative;
    overflow: hidden;



}









.vypis>div.produkt.ref{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}






.vypis>div.produkt.ref{
  border-color:rgba(218,218,218,1);



}




.vypis>div.produkt.ref{
flex:0 0 auto;width:100%;

padding-top:10px ;
padding-bottom: 10px;
border-top-style:solid;border-top-width:1px
}



.vypis>div.produkt.ref:first-child{border-top-style:none
}







@media (min-width: 480px){
.vypis>div.produkt.ref{
flex:0 0 auto;width:50%;border-right-style:solid;border-right-width:1px
}

.vypis>div.produkt.ref:nth-child(1), .vypis>div.produkt.ref:nth-child(2){
  border-top-style:none
}


.vypis>div.produkt.ref:nth-child(even){
  border-right-style:none
}
}

@media (min-width: 768px){
.vypis>div.produkt.ref>div{
padding-top:20px ;
padding-bottom: 20px;
}


}


@media (min-width: 1200px){
  .vypis>div.produkt.ref:nth-child(1), .vypis>div.produkt.ref:nth-child(2), .vypis>div.produkt.ref:nth-child(3){
  border-top-style:none
}

.vypis>div.produkt.ref {
    flex: 0 0 auto;
    width: 25%;
/*    border-top-style: none;  */

}
.vypis>div.produkt.ref:nth-child(4n), .vypis>div.produkt.ref:last-child {
    border-right-style: none;
}




.products.products-block.products-alternative>div:nth-child(even), .products.products-block.products-related>div:nth-child(even) {
    border-right-style: solid;
}

.products.products-block.products-alternative>div:nth-child(3n), .products.products-block.products-related>div:nth-child(3n) {
    border-right-style: solid;
}
.products.products-block.products-alternative>div:nth-child(3), .products.products-block.products-related>div:nth-child(3), .products.products-block.products-alternative>div:nth-child(4), .products.products-block.products-related>div:nth-child(4) {
 /*   border-top-style: none;   */
}

.products.products-block.products-alternative>div:nth-child(4n), .products.products-block.products-related>div:nth-child(4n) {
    border-right-style: solid !important;
}




.products.products-block.products-alternative>div:nth-child(4n), .products.products-block.products-related>div:nth-child(4n) {
    border-right-style: solid;
}

.products.products-block.products-alternative>div:nth-child(3), .products.products-block.products-related>div:nth-child(3), .products.products-block.products-alternative>div:nth-child(4), .products.products-block.products-related>div:nth-child(4) {
/*    border-top-style: none; */
}

.products.products-block.products-alternative>div:nth-child(even), .products.products-block.products-related>div:nth-child(even) {
    border-right-style: solid;
}


.products.products-block.products-related>div:nth-child(4n) {
    border-right-style: solid !important;
    border: transparent
}

.products.products-block.products-related>div:nth-child(4) {
  /*  border-top-style: none;  */
}

.vypis>div.produkt.ref{flex:0 0 auto;width:25%}
.vypis>div.produkt.ref:nth-child(4){border-top-style:none}
.vypis>div.produkt.ref:nth-child(even){border-right-style:solid}
.vypis>div.produkt.ref:nth-child(4n), .vypis>div.produkt.ref:last-child{border-right-style:none}

}












.vypis{
  display:flex;flex-wrap:wrap;align-items:stretch
}




.produkt.ref{

    vertical-align: top;

    text-align: center;



  height: 340px;
  max-height: 340px;
  -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;

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



}



.produkt.ref:hover{
    filter: contrast(1.1);
    background-color: white;
  -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;


}





.produkt img{

 width: auto;

     bottom: 0px;
    left: 0px;
    position: absolute;
/*    max-width: 100%;  */
    min-width: 100%;
    min-height: 100%;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
.produkt.ref img{
    width: auto;
    /* min-height: auto; */
    max-height: 200px;
    min-width: auto;
    min-height: auto;
    border-radius: 50% ;
    top: 0px;
    left: 0px;
    position: relative;
    max-width: 100%;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

.produkt  p.cena {
   display: inline-block;
    text-align: left;
    left: 20px;
    margin-left: 0px;
    margin-bottom: 10px;
    z-index: 10;
    padding-left: 5px;
    bottom: 20px;
    font-size: 13px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    background-color: rgba(19, 40, 145, 0);
    font-weight: 600;
    color: #e90101;
    width: 140px;
    height: 20px;
    opacity: 1;
    position: absolute;
}

.produkt:hover  p.cena {
   display: inline-block;
    text-align: left;
    left: 20px;
    margin-left: 0px;
    margin-bottom: 10px;
    z-index: 10;
    padding-left: 5px;
    bottom: 20px;
    font-size: 13px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    background-color: rgba(19, 40, 145, 0);
    font-weight: 600;
    color: #e90101;
    width: 140px;
    height: 20px;
    opacity: 0;
    position: absolute;
}


.produkt.ref .dokosiku{
    font-size: 12px;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    background: #02a64f;


    padding: 10px;

    text-align: center;
    margin-top: 10px;
   right: 20px;
   bottom: 20px;
    text-decoration: none;
    position: absolute;
    z-index: 9999;
}




/*.produkt.ref::before{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  z-index: 10;
     border: solid 1px rgba(159, 159, 159, 0);
  top: 0px;
  -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;

}
.produkt.ref:hover::before{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  z-index: 10;

     border: solid 1px rgba(159, 159, 159, 1);
  top: 0px;
  -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;

}*/







@media only screen and (max-width: 1024px) {







}


@media only screen and (max-width: 914px) {



}
@media only screen and (max-width: 700px) {





}





.produkt a.od{
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  left: 0px;
  z-index: 30;
}
.produkt:hover{
  -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
/*   background-color: rgba(220,40,30, 0.9);   */


}
.produkt.modra{
  -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
      background-color: #fff;


}
.produkt.modra:hover{
  -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
     background-color: rgba(233,1,1, 0.9);


}


.produkt.modra::before{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  z-index: 10;

      background-color: rgba(255, 255, 255, .85);

  top: 0px;
  -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;

}
.produkt.modra:hover::before{
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  z-index: 10;
    background-color: rgba(255, 88, 26, 0.9);
  top: 0px;
  -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;

}














@media only screen and (max-width: 700px) {


}

.produkt img{
 width: auto;

/*    min-width: 100%;*/
-webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

.produkt:hover img{
 width: auto;

/*    min-width: 100%;   */
-webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
/*
blog clanky
 */

 .produkt.clanek{
    width: 23%;

    vertical-align: top;
    float: left;
    text-align: center;
    margin-left: 2%;
    margin-top: 20px;
    margin-bottom: 10px;
    margin-right: 0px;
  height: 360px;
  max-height: 360px;
  -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    position: relative;
    background-color: rgba(237, 237, 237, .8);
         border: none;
         overflow: visible;


}

 .produkt.clanek2{
    width: 23%;

    vertical-align: top;
    float: left;
    text-align: center;
    margin-left: 2%;
    margin-top: 20px;
        margin-bottom: 10px;
    margin-right: 0px;
  height: 230px;
  max-height: 240px;
  -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    position: relative;
    background-color: transparent;
         border: none;

}

 @media all and (max-width: 1235px) {

 .produkt.clanek{
    width: 31%;

    vertical-align: top;
    float: left;
    text-align: center;
    margin-left: 2%;
    margin-top: 20px;
    margin-right: 0px;
        margin-bottom: 10px;
  height: 360px;
  max-height: 360px;
  -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    position: relative;
    background-color: rgba(237, 237, 237, .8);
         border: none;


}

 .produkt.clanek2{
    width: 48%;


}

}


 @media all and (max-width: 700px) {

 .produkt.clanek{
    width: 48%;

    vertical-align: top;
    float: left;
    text-align: center;
    margin-left: 2%;
    margin-top: 20px;
    margin-right: 0px;
        margin-bottom: 10px;
  height: 360px;
  max-height: 360px;
  -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    position: relative;
    background-color: rgba(237, 237, 237, .8);
         border: none;


}

}

 @media all and (max-width: 500px) {

 .produkt.clanek{
    width: 96%;

    vertical-align: top;
    float: left;
    text-align: center;
    margin-left: 2%;
    margin-top: 20px;
        margin-bottom: 10px;
    margin-right: 0px;
  height: 360px;
  max-height: 360px;
  -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    position: relative;
    background-color: rgba(237, 237, 237, .8);
         border: none;

}

 .produkt.clanek2{
    width: 96%;


}

}
 .produkt.clanek .nahled,  .produkt.clanek2 .nahled{
    width: 100%;
    height: 150px;
     overflow: hidden;
     margin-left: 0px;
}

 .produkt.clanek .nahled img,  .produkt.clanek2 .nahled img{
    min-width: 100%;
    height: auto;
    max-height: 150px;
    margin-left: 0px;
    margin-top: 0px;
    position: relative;
    max-width: none;

}





.produkt h2{

color: #000000;
    font-size: 21px;

    display: block;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    text-align: left;
    font-weight: 500;
    position: absolute;
    top: 30px;
    z-index: 10;

}

.produkt.clanek h2{

    position: relative;
    font-size: 18px;



}
.produkt.clanek2 h2{

    position: relative;
    font-size: 18px;
    text-align: center;
    margin-left: 0px;
    top: 10px;

}


.produkt:hover h2{

color: rgba(0, 0, 0, 1);
   -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;

/*    top: 30px;     */


}
.produkt:hover h2 a{

color: rgba(0, 0, 0, 1);
   -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;



}


.produkt h2 a{
color: #000000;
    font-size: 21px;
  font-weight: 500;


  -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;

}

.produkt.ref h2{
    color: rgba(0, 0, 0, 1);
    font-size: 17px;
/*      bottom: 100px;  */
    margin-left: 0px;
    margin-right: 0px;
    display: block;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    text-align: center;
    width: 100%;
    font-weight: 500;
    line-height: 20px;
    padding: 5px;
    position: absolute;

    z-index: 10;
/*    bottom: auto;  */
    top: 65%;

}









.produkt.ref:hover h2{
        color: rgba(0, 0, 0, 1);

    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;


}
.produkt.ref h2 a{
    color: rgba(0,0,0, 1);
         font-size: 16px;

}
.produkt.ref:hover h2 a{
    color: rgba(0,0,0, 1);


}

            .produkt.ref:hover img{
              opacity: 1;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

@media only screen and (max-width: 1024px) {




}

@media only screen and (max-width: 600px) {

}



.produkt p{
    color: #000000;
    font-size: 14px;
    margin-left: 20px;
    margin-right: 20px;
    display: block;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    text-align: left;
    font-weight: 300;
    position: absolute;
    z-index: 1;
    top: 100px;
    opacity: 0;
}

.produkt:hover p{
    color: #000000;
    font-size: 14px;
    margin-left: 20px;
    margin-right: 20px;
    display: block;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    text-align: left;
    font-weight: 300;
    position: absolute;
    z-index: 101;

    opacity: 1;
}


.produkt.clanek p{
    color: #000000;
    font-size: 14px;
    margin-left: 20px;
    margin-right: 20px;
    display: block;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    text-align: left;
    font-weight: 300;
    position: relative;
    z-index: 1;
    top: 40px;
    padding-top: 20px;
    opacity: 1;
}

 @media all and (max-width: 1024px) {
.produkt:hover p{
  display: none;
}



.produkt.ref:hover h2 a {
  color: rgba(0, 0, 0, 1);



}

}





.produkt a.vic {



    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -20px;
    top: auto;



    background: rgba(0, 99, 46, 1);
background: rgba(204, 204, 204, 1);
    display: inline-block;
    font-size: 13px;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    font-weight: 500;
    color: #fff;
    z-index: 10;
}
.produkt:hover a.vic, .produkt.clanek:hover a.vic, .produkt.ref:hover a.vic{
    width: 40px;
    height: 40px;
     background: rgba(0, 99, 46, 1);
    background-size: 40px;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -ms-transition: all .4s ease;
    -o-transition: all .4s ease;
    transition: all .4s ease;

}








.produkt a.vic {
  text-indent: -9999px;
}

.produkt a.vic::before {
    text-indent: 0px;
content: "\f105";
    font-family: "FontAwesome";
    text-align: center;
    top: 0px;
    right: 0px;
    font-size: 13px;
    font-weight: 600;
    line-height: 17px;
    position: absolute;
    color: rgba(0, 0, 0, .5);
    width: 40px;
    height: 40px;
    line-height: 40px;
     -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;

}

.produkt:hover a.vic::before {
    text-indent: 0px;
content: "\f105";
    font-family: "FontAwesome";
    text-align: center;
    top: 0px;
    right: 0px;
    font-size: 13px;
    font-weight: 600;
    line-height: 17px;
    position: absolute;
    color: rgba(255, 255, 255, 1);
    width: 40px;
    height: 40px;
    line-height: 40px;
     -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
        -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}









@media only screen and (max-width: 1024px) {

}


/* list */

.produkt.list{
  width: 99%;
  float: left;
  margin-left: 0.4%;
  vertical-align: top;
  text-align: left;
  max-height: 190px;
  height: 190px;

  -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    position: relative;

}
.produkt.list img {
     height: auto;
    /* min-height: 190px; */
    min-width: 100%;

    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}
.produkt.list:hover img {
     height: auto;
    /* min-height: 190px; */
    min-width: 105%;

    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}


.produkt.list p{
  font-size: 14px;
    margin-left: 30px;
}
.produkt.list a.vic{

    left: 30px;
}

.produkt.list h2{
  bottom: 60%;
  margin-left: 30px;
}

@media only screen and (max-width: 450px) {
.produkt.list{

    text-align: center;
    height: 140px;
    min-height: 140px;

}

.produkt h2{
  bottom: auto;
  top: 10%;
  margin-left: 20px;
}

.produkt.list p{
  font-size: 14px;
    margin-left: 30px;
}
.produkt.list a.vic{

    left: 20px;
}

.produkt.list h2{
  bottom: 60%;
  margin-left: 20px;
}


}


@media only screen and (max-width: 550px) {


}
@media only screen and (max-width: 450px) {



.produkt, .produkt.list{
  width: 99%;
  display: inline;
  vertical-align: top;
  float: left;
  text-align: center;
  max-height: 140px;
  margin-left: 0%;
  -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    position: relative;
    padding-bottom: 0px;

}

.produkt.ref{

  height: 280px;
  max-height: 280px;


}

.produkt.ref h2 {

    top: 60%;
}

.produkt.ref img{
    width: auto;
    /* min-height: auto; */
    max-height: 150px;
    min-width: auto;
    min-height: auto;
    border-radius: 50% ;
    top: 0px;
    left: 0px;
    position: relative;
    max-width: 100%;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}


}


/*
 kosik
  */

.texty table#kosik-tabulka{
  text-align: left;

padding: 0px;
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
margin-bottom: 60px;
width: 98%;
margin-left: 1%;
max-width: 1200px;

}


.texty  table#kosik-tabulka tr th {
  width: auto;
  padding: 12px;
border: none;
color: #000000;
font: bold 14px Arial, Calibri;
border-bottom: solid 1px rgba(0, 0, 0, .1)
}


.texty  table#kosik-tabulka tr td {
  width: auto;
  padding: 12px;
border: none;
color: #000000;
font: normal 13px Arial, Calibri;
line-height: 17px;
white-space: normal;
border-bottom: solid 1px rgba(0, 0, 0, 0.06)
}

.texty  table#kosik-tabulka tr td span{
color: #666666;
font: lighter 12px Arial, Calibri;

}
.texty  table#kosik-tabulka tr td strong {

     color: #000000;
    display: inherit;
    /* text-align: right; */
    float: right;
    margin-left: 10px;


    text-align: right;
}
.texty  table#kosik-tabulka tr td strong i{

     color: #e30a1d;

    text-align: right;
    font-style: normal;
}

.texty  table#kosik-tabulka tr td input.ks{
  width: 40px;
  height: 30px;
border: none;
color: #000000;
font: lighter 13px Arial, Calibri;
line-height: 30px;
text-align: center;

background: #f5f5f5;
    -moz-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4);
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4);
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4);
        -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;

}


.texty  a.jit-dal{
  font-size: 17px;
  font-weight: bold;

color: rgba(255, 255, 255, 1);
background: #02a64f;
float: right;
height: 40px;
width: 280px;
line-height: 40px;
text-align: center;
margin-right: 20px;
margin-bottom: 10px;

}





.texty  a.jit-zpet{
background: #e30a1d;
font-size: 17px;
font-weight: bold;
color: rgba(255, 255, 255, 1);

float: left;
height: 40px;
width: 280px;
line-height: 40px;
text-align: center;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 10px;
}



.texty  a.jit-dal{
  font-size: 17px;
  font-weight: bold;

color: rgba(255, 255, 255, 1);
background: #02a64f;
float: right;
height: 40px;
width: 280px;
line-height: 40px;
text-align: center;
margin-right: 20px;
margin-bottom: 10px;

}


.texty p.hlaska{
  color: rgba(0, 0, 0, 1);
    font: lighter 14px Calibri, Arial;
    border: solid 2px #F7D111;

    display: inline-block;
    padding: 10px;
    text-align: center;


}

.texty p.hlaska a{

    font: bold 14px Calibri, Arial;



}

.texty p.hlaska i{

    font-size: 20px;
    color: #F7D111;
    display: inline-block;



}
.texty p.hlaska span{
    display: inline-block;

}


  @media all and (max-width: 639px) {


.texty  table#kosik-tabulka  {
  width: 96%;
  margin-left: 2%;
  margin-right: 2%;
}


.texty  table#kosik-tabulka tr th {
  width: auto;
  padding: 3px;
border: none;
color: #000000;
font: bold 12px Arial, Calibri;
border-bottom: solid 1px rgba(0, 0, 0, .1)
}


.texty  table#kosik-tabulka tr td {
  width: auto;
  padding: 3px;

color: #000000;
font: lighter 11px Arial, Calibri;
vertical-align: top;
}


.texty  table#kosik-tabulka tr td input.ks{
  width: 40px;
  height: 30px;
border: none;
color: #000000;
font: lighter 13px Arial, Calibri;
line-height: 30px;
text-align: center;

background: #f5f5f5;
    -moz-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4);
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4);
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4);

      -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;

}
}




  @media all and (max-width: 639px) {
.texty  a.jit-zpet{
background: #e30a1d;
font-size: 17px;
font-weight: bold;
color: rgba(255, 255, 255, 1);
border-radius: 10px;
float: none;
height: 40px;
width: 280px;
line-height: 40px;
text-align: center;
margin-left: auto;
display: inline-block;
}



.texty  a.jit-dal{
  font-size: 17px;
  font-weight: bold;

color: rgba(255, 255, 255, 1);
background: #02a64f;
float: none;
height: 40px;
width: 280px;
line-height: 40px;

text-align: center;
margin-right: auto;
display: inline-block;

}
}

.texty  table#kosik-tabulka tr td a.smazat{
color: #e30a1d;
font-size: 20px;
}

.texty  table#kosik-tabulka tr td a.prepocitat{
  font-size: 20px;
color: #02a64f
}

#obsah-kosiku{
      width: 100%;
    min-width: 600px;
    margin-left: 0px;
    margin-right: auto;
    display: inline-block;
    margin-bottom: 20px;
}





 #obsah-kosiku p{
color: #000000;
font: normal 12px  Helvetica, Calibri, Arial;
margin-bottom: 5px;
}
#obsah-kosiku p strong{
color: #cc0000;
font: normal 18px  Helvetica, Calibri, Arial;
}
#obsah-kosiku p span{
    width: 27%;
display: block;
float: left;
color: #000000;
border-bottom: dotted 1px #cccccc;
font: normal 12px  Helvetica, Calibri, Arial;
}

#obsah-kosiku p .udaje{
    width: 70%;

padding: 5px;
height: 30px;

color: #000000;
font: normal 12px  Helvetica, Calibri, Arial;
    background: #f5f5f5;
    -moz-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4);
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4);
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4);
        -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;


}
#kosik-tabulka td textarea{
width: 100%;
height: 60px;

color: #000000;

font: normal 12px  Helvetica, Calibri, Arial;
  background: #f5f5f5;
    -moz-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4);
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4);
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4);
        -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}




  @media all and (max-width: 660px) {



 #obsah-kosiku{
      width: 96%;
    min-width: 300px;
    margin-left: 2%;
    margin-right: 2%;
    display: inline-block;
    margin-bottom: 20px;
}
}


  @media all and (max-width: 438px) {




 #obsah-kosiku p span{
    width: 10%;
    white-space: nowrap;
display: block;
float: left;
color: #000000;
border-bottom: none;
font: normal 11px  Helvetica, Calibri, Arial;
}


#obsah-kosiku p {
    clear: both;
    min-height: 40px;
    max-width: 98%;
    margin-left: 0px;
    margin-right: 0px;


}


#obsah-kosiku p .udaje{
    width: 65%;
    float: right;

padding: 5px;
height: 30px;
margin-right: 0px;

color: #000000;
font: normal 12px  Helvetica, Calibri, Arial;
    background: #f5f5f5;
    -moz-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4);
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4);
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4);
        -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}




}


/* detail produktu */

.produkt-pozadi{
  min-height: 300px;
  width: 98%;

  vertical-align: top;

  margin-left: 1%;
  background-color: rgba(255, 255, 255, 1);


}

.produkt-nahled{
  min-height: 300px;
  width: 38%;

  vertical-align: top;
  float: left;
  margin-left: 2%;
  margin-top: 2%;
  margin-bottom: 2%;

}


.produkt-nahled img{
border: solid 1px #f1f1f2;
width: 100%;

}




.produkt-tabulka{
  min-height: 300px;
  width: 54%;

  float: right;
  vertical-align: top;

    margin-right: 2%;
  margin-top: 2%;
  margin-bottom: 2%;
}

 @media all and (max-width: 600px)   {


  .produkt-nahled{
  min-height: auto;
  width: 90%;

  float: none;
  vertical-align: top;

    margin-right: 5%;
  padding-top: 5%;
  margin-left: 5%;
  margin-bottom: 5%;
}

  .produkt-tabulka{
  min-height: auto;
  width: 90%;

  float: none;
  vertical-align: top;

    margin-right: 5%;
  margin-top: 5%;
  margin-left: 5%;
  margin-bottom: 5%;
}


}

.produkt-tabulka h3{
  font-size: 15px;
  font-weight: 500;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: solid 1px #f1f1f2;
}

.produkt-tabulka p.vlastnosti span{
  display: block;
  font-size: 15px;
  font-weight: 400;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: solid 1px #f1f1f2;
}

.produkt-tabulka p.cena{
  display: block;
  font-size: 18px;
  font-weight: 600;
    color: rgba(221, 43, 55, 1);
    margin-bottom: 30px;
}





.produkt-tabulka .kup{
  width: 100%;
  height: 60px;
  background-color: #f1f1f2;
}

.produkt-tabulka .kspoz{
  float: left;

}
.produkt-tabulka .kspoz .ks {

  width: 40px;
  background:  rgba(255, 255, 255, 0.9);
 -moz-box-shadow: inset 1px 1px 4px rgba(0,0,0,0.4);
-webkit-box-shadow: inset 1px 1px 4px rgba(0,0,0,0.4);
box-shadow: inset 1px 1px 4px rgba(0,0,0,0.4);

height: 40px;
text-align: center;
 margin-top: 10px;
    margin-left: 20px;
    margin-bottom: 10px;
line-height: 40px
}







.produkt-tabulka .dokosiku {
    font-size: 17px;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    background: #02a64f;
    float: right;
    height: 40px;
    width: 120px;
    line-height: 40px;
    text-align: center;
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 10px;
    text-decoration: none
}







/* ceník */



table.firmy{
      border-collapse: collapse;
      font-size: 14px;
      width: 100%;
      margin-left: auto;
      margin-right: auto;

}
table.firmy tr th{
  border: none;
  border-bottom: solid 1px rgba(201, 201, 201, 1);
  background-color: none;
  text-align: left;
  padding: 10px
}
table.firmy tr td .dokosiku {
    font-size: 14px;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    background: #02a64f;
    float: right;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;

    margin-right: 5%;
    margin-bottom: 5%;
    text-decoration: none;


}
table.firmy tr td img{
  height: 30px;
  width: auto;
}

.pp_content .texty table.firmy tr td img{
  height: 100px;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
}
.pp_content .texty table.firmy tr td .cena {

  color:  #ff0000;
  font-size: 20px;
  font-weight: 600;
  line-height: 40px;
  margin-right: 15px;

}
.pp_content .texty table.firmy tr td input.ks {
    width: 40px;
    height: 40px;
    border: none;
    color: #000000;
    font: lighter 13px Arial, Calibri;
    line-height: 30px;
    text-align: center;
    background: #f5f5f5;
    -moz-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4);
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4);
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.4);
}



.pp_content .texty table.firmy tr td .dokosiku {
    font-size: 14px;
    font-weight: bold;
    color: rgba(255, 255, 255, 1);
    background: #02a64f;
    float: right;
    height: 40px;
    width: 100px;
    line-height: 40px;
    text-align: center;

    margin-right: 0px;
    margin-bottom: 0px;
    text-decoration: none;


}













table.firmy tr.bily td{
  text-align: left;
  border: none;
 border-bottom: solid 1px rgba(201, 201, 201, 1);
 background-color: rgba(255, 255, 255, .5);
  height: 30px;
  line-height: 30px;
  vertical-align: top;
  padding-left: 10px
}
table.firmy tr.sedy td{
  text-align: left;
  border: none;

border-bottom: solid 1px rgba(201, 201, 201, 1);
  background-color:rgba(201, 201, 201, .1);
    height: 30px;
  line-height: 30px;
  vertical-align: top;
  padding-left: 10px
}

table.firmy tr:hover td{
  border: none;
 background-color: rgba(201, 201, 201, .2);
border-bottom: solid 1px rgba(201, 201, 201, 1);
}

.pp_content .texty table.firmy tr:hover td{
 background-color: rgba(201, 201, 201, 0);
border-bottom: solid 1px rgba(201, 201, 201, 1);
}

table.firmy tr td a{
  color: rgba(0, 0, 0, 1);
  text-decoration: underline

}


table.firmy tr.bily.skryti, table.firmy tr.sedy.skryti{
  display: none;
}
table.firmy tr.bily.skryti.ukaz, table.firmy tr.sedy.skryti.ukaz{
  display: inline;
}

a.vice.skryti{
  display: none;
}

table.firmy tr td  a.vice {
    display: inline-block;
    float: right;
    padding: 12px 50px 12px 20px;
    font-size: 13px;
    line-height: 21px;
    text-decoration: none;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    background-color: #648c00;
        border-radius: 20px;
    font-weight: 400;
    color: #fff;
    position: relative;
    margin-left: 0px;
}


table.firmy tr td  a.vice::after {
    content: "\f105";
    font-family:"FontAwesome";
    text-align: center;
    top: 12px;
    right: 15px;
 font-size: 14px;
 line-height: 17px;
 position: absolute;
    color: rgba(255, 255, 255, .8);
    width: 18px;
    height: 18px;
    border: solid 1px rgba(255, 255, 255, .3);
    border-radius: 50%
}
@media only screen and (max-width: 1024px) {
table.firmy{
      border-collapse: collapse;

      margin-left: auto;
      margin-right: auto;

}

table.firmy tr.sedy td, table.firmy tr.bily td{
  line-height: 19px;
  font-size: 12px;

}
}
@media only screen and (max-width: 630px) {
table.firmy tr th{

  font-size: 11px;

}
table.firmy tr.sedy td, table.firmy tr.bily td{
  line-height: 19px;
  font-size: 11px;

}
table.firmy tr .hidden{
  display: none;

}
table.firmy tr td  a.vice {
    display: inline-block;
    float: right;
    padding: 12px 50px 12px 20px;
    font-size: 11px;
    line-height: 21px;
    text-decoration: none;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    background-color: #648c00;
    font-weight: 400;
    color: #fff;

    position: relative;
    margin-left: 0px;
}
}
@media only screen and (max-width: 450px) {
table.firmy tr td  a.vice span {
  display: none;
}
table.firmy tr td  a.vice {
    display: inline-block;
    float: right;
    font-size: 11px;
    height: 44px;
        padding: 0px 0px 0px 0px;
    width: 44px;
    line-height: 44px;
    text-decoration: none;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    background-color: #648c00;
    font-weight: 400;
    color: #fff;
    position: relative;
    margin-left: 0px;
      border-radius: 50%;
}

table.firmy tr td  a.vice::after {
    content: "\f105";
    font-family: "FontAwesome";
    text-align: center;
    top: 12px;
    left: 10px;
    right: 15px;
    font-size: 14px;
    line-height: 17px;
    position: absolute;
    color: rgba(255, 255, 255, .8);
    width: 18px;
    height: 18px;
    border: solid 1px rgba(255, 255, 255, .3);
    border-radius: 50%;
}
}