/*start-1. Celkovy vzhled*/
html {height: 100%;  
margin-bottom:0;
    margin-top:0;
}
body {
    background-color: white;
    max-width: 98%;

    overflow-x: hidden;
    font-family: "Verdana", sans-serif;
    color: #515151;
    text-align: justify;
    height: 100%;
  
margin-bottom:0;
    margin-top:0;

    
    
    font-family: "Verdana", sans-serif;
    justify-content: space-between;
 margin-left: auto;
    margin-right:auto;

    }

main { 
    width: 90%;
    margin: auto;
   min-height: 100%;
  
   
}
h1 {font-size: 1.3em;
    font-weight: normal;
    color: #2d2d2d; display: inline-block;}

p {color: #515151; line-height: 1.40em;}
a {color: #2d2d2d; text-decoration: none;}

.container a:hover {text-decoration: none;}
a:hover {color: green; text-decoration: underline;}

/*nav li { margin-left: -8%; margin-top: 2%}
ul {list-style-type: none; border-bottom: solid green; border-top: solid green}*/

.logo {display: block; width: 40%;}
.slider img {display: none; width: 100%; margin: auto;}

/*.container {text-align:center; width: 80%; margin: auto; margin-top: 3%;display: grid; grid-template-rows: auto auto auto auto; grid-template-columns: 1fr 1fr 1fr; grid-auto-flow: column;
grid-gap: 3%; align-items: center; justify-content: space-evenly;}}*/

.container {text-align:center; width: 80%; margin: auto; display: grid; grid-template-rows: auto auto auto auto auto auto auto auto auto; justify-content: space-evenly; margin-bottom: 5%;}

.container p { text-align: left;}

.container img {margin-top: 5%; border-radius: 50%; height:100px;; transition: all 1s ease;}
.container img:hover {transform: scale(1.2);}

.container h1:hover {text-decoration: none; color: green;}
.container h1 {display: block; border: 0.7vw solid #3d3d3d; font-size: 4vw;padding: 1%;}


#index-title p {margin-bottom: 0; font-size: 0.9em; font-style:italic; text-align: center;}

#index-title h1 { border: 0; font-size: 4.5vw; }
/*.certifikace {display: block; margin:2em auto 1em auto; border: 0.09em solid #515151; padding: 1em;background: #fcfcfc;}*/

.oznameni li { text-align: left;}

 .certifikace p {display: block; margin:0.5em auto 0.5em auto; width: 80%; font-size: 0.9em; font-style:italic;}
.certifikace img {width: 6%; float: left;}


.button {display:none;}

.flexkrmiva {
    width: 100%;
    margin: 0 auto;
    display: -webkit-box; 
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex; 
display: flex;

}

.flexkrmiva img {
    width: 100%;
    -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   filter: grayscale(100%);
   filter: gray; /* IE 6-9 */
   margin: auto;
}
.flexkrmiva img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
 }

 .flexkrmiva {
    width: 90%;
    margin: 0 auto;
    display: -webkit-box; 
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex; 
display: flex;
justify-content: center;

   
}
/*Zapati*/
.footer {
    margin-top: 3%;
   flex-shrink:0;
    width: 100%;
     border-top: 0.1em solid gray; text-align: center;} 


    .footer > p {color: #3d3d3d; font-size: 0.9em; line-height: 1em;}




.facebook img {/*width: 5vw; float: right; margin-top: 1%; margin-right: 1%;*/display:none;}
    /*.facebook img:hover {opacity: 0.7;}*/

#facebook {float:right; }
#google {width: 70%; min-height: 10em; margin-bottom: 1%; margin-top:3%;}
#footer-objednavky {width: 90%; margin:auto;}
.certifikaty {/*display:block;*/ display:none;}

/*.certifikaty img {opacity: 0.6;display:inline-block;width: 20%;}*/



    #mensi {font-size: 0.8em;}



.faq li {font-style:italic;}




#pozice {
    font-style: italic; 
    font-size: 0.9em;}

.oleje-adresa {
    background: #f2f2f2; 
    text-align: justify; 
    padding-left: 3%;
    padding-top: 1%; 
    padding-bottom: 1%; 
    line-height: 1.4em;
   
}
.oleje-adresa p {line-height: 2em;}
.oleje-adresa a {color:#515151;}
.oleje-adresa img {
    width: 1em; 
    margin-right: 1em;}


/*TOPNAV*/
.icon {width: 5%; margin-right: 1%;}

/* Add a black background color to the top navigation */

.topnav{
    margin-top: 3%;
background-color: #f2f2f2;
    overflow: hidden;
    padding-top:2%;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    
    padding: 0.2em 1em;
    text-align: center;

    text-decoration: none;

}



/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover {
    background-color: #555;
    color: white;
}



/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */

  .topnav a/*:not(:first-child)*/ {
    display: none;
  }
nav a.icon {
    float: right;
    display: block;
      font-size: 1.2em;
  }


/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }







.grid-7radku {
    
    margin-top: 1em;   
    display: grid;
    
    /*grid-template-rows: auto auto auto auto auto auto auto; */
    grid-template-columns: 0.5fr 1fr auto; line-height: 2em;grid-auto-flow: row;
grid-gap: 3%; }

/*
button.tlacitko  {width:100%; display:inline-block; justify-content: center; height: 10vw; line-height: 2em; padding: 2em; margin: 2em;

white-space: normal;}

.tlacitko h2 {margin-top:-1em;}
*/

.tlacitko {display:block;width:100%; margin-top: 3em; height: 8vw; line-height: 8vw; }
.tlacitko:hover {color: green; border: solid 2px green; text-decoration: none; cursor: pointer;}
.tlacitko a {text-decoration: none;}
.tlacitko h2 {font-size: 3vw; margin-top: -0.5%; }

.tlacitko p {font-style: italic; font-size: 2.5vw;}
.tlacitko a:hover + .tlacitko p {display:none;}
/*.tlacitko { margin-top: 3em;}
button, .tlacitko {padding: 1em; overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;}


.tlacitko h2 {text-align:center;}

.tlacitko:hover {color: green; border: solid 2px green; text-decoration: none; cursor: pointer;}
.tlacitko a {text-decoration: none; overflow:auto;}
.tlacitko p {font-style: italic; font-size: 1.2em; margin-top: 0;}*/
.skladem-ano {color: green; text-align:right;}
.skladem-ne {color: #ffb600; text-align:right;}

    .content a {font-weight: bold;}

.content {font-size: 3vw;}

.hlavicka-img {width: 100%;}

#telata {display: none;}
#mlady {display: none;}
#vysokouzitkove {display: none;}
#mixy {display: none;}
/*end-KRMIVA/SKOT*/


/*start-KRMIVA/PRASATA */
#selata, #predvykrm {display: none;}
#chovna {display: none;}
#doplnkove {display: none;}
/*end-KRMIVA/PRASATA*/

/*start-KRMIVA/DRUBEZ */
#nosnice, #odchov, #vykrm, #kachny, #kruty, #husy, #holubi {display: none;}
/*end-KRMIVA/DRUBEZ*/

/*start-KRMIVA/OVCE-KOZY */
#ovce {display: none;}
#kozy {display: none;}
/*end-KRMIVA/OVCE-KOZY*/

/*start-KRMIVA/LESNI-ZVER */
#sparkata {display: none;}
#zajici {display: none;}
/*end-KRMIVA/OVCE-KOZY*/


/*start-KRMIVA/KONĚ */
#lehka {display: none;}
#klisny {display: none;}
#lasard {display: none;}


.content li {line-height: 1.5em;}


/*start-KONTAKTY*/

.kontakty { 
   display:block;
    line-height: 1.5em;
    width: 80vw;
    

}

.prodejna-container {border-top: 0.1em solid #3d3d3d;}
.prodejna {clear:both; display:block; margin:auto; width: 100%; max-width: 1000px; background-color: }
.prodejna img {max-width: 95%; width: auto; display:block; margin: auto auto 5% auto; border-radius: 7%; border: 0.3em solid  #3d3d3d;}
.prodejna img:hover {opacity: 0.4;}
.prodejna h1 {color: white; font-size: 0.9em;display: block; width 100%; padding: 1%; text-align: center; margin:auto;}
.prodejna p {width: 100%; display:block; margin-bottom: 3em;}

.kontakty section {margin-left: auto; margin-right: auto; width: 50%; margin-bottom: 2%; float:left; width:100%;}

.kontakty div {margin-bottom: 1%; padding-bottom: 3%;}

.kontakty a {text-decoration: none; font-weight: normal;}

.kontakty h2 {margin-left: -2%;}

.resp-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
    margin-bottom: 20%;
    min-height: 200px;

}


.fa-map-marker-alt {font-size: 2em; color: #d34c3d; margin-right: 0.1em;}


.fa-shopping-cart {color: white; font-size: 1.3em; padding: 0.23em; border-radius: 50%; margin-right: 0.1em;background-color: #1e90ff; border: 0.05em solid #d6d6d6; }
.fa-home {color: white; background-color: forestgreen; border: 0.05em solid #d6d6d6; border-radius: 50%; padding: 0.23em;font-size: 1.3em;}
.resp-iframe {
    position: absolute;
    top: 0;
    width: 100%;
    min-height: 250px;
    
    
    
}
.kontakty-partneri {border-top: 0.1em solid #515151;width: 95%;display:block;margin-left:auto; margin-right:auto; margin: 0 auto 15em auto;}
.kontakty-partneri .fa-truck {font-size: 1.3em; color:black;}
.kontakty-partneri i {margin-right: 0.1em; }


.objednavky h2 {margin-left: 7%; margin-bottom: 1%;margin-top: 1%;}
/*needed? .objednavky div{width: 30%; text-align: left; -ms-flex-line-pack: left; align-content: left; float: left ;}*/

.objednavky p {margin-top: 0; line-height: 1.5em;}
.objednavky img {width: 5vw;float: left; padding-right: 1%;}
.objednavky section {float:left; width: 50%;}
.objednavky {margin: auto; width: 100%;}
iframe {width: 100%; margin-top: 1%;}
/*end-KONTAKTY*/

/*start-O NAS*/
.onas-video {width: 100%; margin: auto;display:block; margin-top: 2%; border: solid 0.2em #606060; border-radius:7%;}

#vetsi {float:left; width: 1000px; display: block;}
#onas-komplex {background-color: #fcfcfc;border:solid 0.1em #ededed; margin-bottom: 2%; padding: 1%;}

/*end-O NAS*/

/*start-KOMODITY*/

.flexkomodity div {width: 100%; margin: auto; display:block; text-align: justify;}
.flexkomodity section {

    width: 100%;
    line-height: 1.5em; margin-top: 10%;}

.flexkomodity a{font-weight: normal;}
   

.flexkomodity h1 {margin-bottom: -3em;}
.flexkomodity img {float: right; width: 5em;}
.flexkomodity p{margin-top: 0.5em;}
/*end-KOMODITY*/

/*start-SMES*/
.smes h1 {margin-bottom: 0; text-align: center; display: block; padding: 0.5%; border-bottom: solid 1px gray; text-transform: uppercase; font-weight: bold; color: #515151;}
.smes p::first-line {font-weight: bold;}
.smes span {font-weight: bold; line-height: 1.4em; margin: 20px;}
.smes h2 {font-size: 1em; margin-top: 2%;margin-bottom: -1%;}

.smes table {width: 100%; table-layout: fixed; border-collapse:collapse; text-align: center;}
.smes td,th {border: 0.1px solid #515151; }

.icon-navod {width: 1O%; max-width: 25px;float:left; margin-left: -5%; margin-right: 2%;}
/*end-SMES*/
#nongmo {width: 20vw; float:right;}


.doplnek-container {background-color: #f4f4f4; width: 100%;overflow: auto;}
.doplnek-container div {width: 50%; float: left;}
.doplnek-container p {margin-left: 2%; padding: 1%; border-bottom: 0.1em solid black;}


.brozura-container {display:none;}

/*start-MALOOBCHOD*/

.maloobchod-wraper {width: 99%; margin-left:auto; margin-right:auto;}

    .maloobchod-wraper h1 {width: 100%;background-color: forestgreen; color: white; padding: 0.3em;font-weight: bold;border-top: 0.1em solid #515151;}
.maloobchod-nav {display:block;clear:both; font-size: 1em;  text-align: left; }

.maloobchod-nav li a {display:block; text-decoration: none;padding-left: 0.3em; font-weight: normal;line-height: 2.5em;}
    .maloobchod-nav a:active {
    background-color: #4CAF50; 
    color: white;
}
.maloobchod-nav ul {list-style: none;}

.maloobchod-nav a:hover:not(.active) {
    background-color: #515151;
    color: white;
}
.maloobchod-nav img {float:left; height: 1.8em; padding-right: 2%;}

    .maloobchod-wraper h1 {width: 100%;}

.maloobchod-oddil {display:-webkit-box;display:-ms-flexbox;display:flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; width: 97%; -ms-flex-wrap: wrap; flex-wrap: wrap;  border-top: 0.1em solid #515151; margin: auto; }

.maloobchod-produkt {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 45%; padding-right: 2%; padding-left: 2%; padding-bottom: 2%;}

.maloobchod-obrazek {height: 15vw; 
    display:-webkit-box; 
    display:-ms-flexbox; 
    display:flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
width: 100%;
}


.maloobchod-obrazek .velky { max-height: 100%; max-width: 100%; flex:none;

height: auto; width: auto;}
.maloobchod-obrazek .maly { max-height: 75%; max-width: 100%; flex:none;

height: auto; width: auto;}


.maloobchod-produkt h2 {font-size: 1.1em;}



.maloobchod-produkt-info {-webkit-box-flex: 1;-ms-flex: 1 0 auto;flex: 1 0 auto;}
.maloobchod-produkt .price {color:forestgreen;}
/*end-MALOOBCHOD*/

/*start-CENIKY*/
.cenik-img {width: 30%; margin:auto; display:block; border: 0.4em solid #515151 ; border-radius: 7%; margin-top: 3%}
.cenik-img:hover {border: 0.4em solid green;}


/*end-CENIKY*/

/*start-SLUZBY*/
#doprava,#laborator, #poradenstvi ul {line-height: 1.8em;}



.sluzby-foto img { max-height: 30vw; display:block; margin:auto; padding: 2%; border-radius: 10%; }



/*end-SLUZBY*/

/*start-DOKUMENTY*/

.dotace {width: 80%; text-align:center;}
/*end-DOKUMENTY*/