/*start-GENERAL*/
html {height: 100%;}


body {
    background-color: white;
    max-width: 98%;
    overflow-x: hidden;
    font-family: "Verdana", sans-serif;
    color: #515151;
    text-align: left;
    height: 100%;
  

    /*footer at the end of the page*/
        display: -webkit-box;
        display: -ms-flexbox;
    display: flex;

        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
    flex-direction: column;
    
    
  
   /* justify-content: space-between;*/
    margin-left: auto;
    margin-right:auto;}

main { 
    width: 90%;
    margin: auto;
        display: -webkit-box;
        display: -ms-flexbox; 
    display: flex;
  
        -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
    flex: 1 0 auto; 
    margin-left: auto;
    margin-right:auto;
}


h1 {font-size: 1.2em;
    font-weight: normal;
    color: #2d2d2d; 
    display: inline-block;}

p {line-height: 1.40em; 
    /*font-family: "Verdana", sans-serif*/ }

a {color: #515151; 
text-decoration: none;
    /*font-family: "Verdana"*/;}
    a:hover {color: green; text-decoration: underline;}

.content p a, .container p a {font-weight: bold; text-decoration: underline;}



.content  {
    margin-top: 1%;

    -webkit-box-flex: 1;
-ms-flex: 1 0 auto;
        flex: 1 0 auto; width: 80%; 
    margin-left: auto;
    margin-right:auto;
 
}

    .content p {line-height: 1.5em;}
    .content a {font-weight: bold; text-decoration: underline;}
    .content ul {line-height: 2em; clear:both;}
    .content h2 {font-size: 1.2em;}

.hlavicka-img {
    width:100%;
    max-width: 1300px;
    margin-top:2%;
    max-height: 30%;
    display: block; 
    margin-left: auto; 
    margin-right: auto;
opacity: 0.8;}

.icon {
    width: 1.7em; 
    margin-right: 1em;
}

.icon-navod {
    width: 1O%; 
    max-width: 30px;
    float:left; 
    margin-left: -5%; 
    margin-right: 2%; 
    overflow:visible;}



.logo {display: block; 
    float: left; 
    width: 20vw; 
    margin-top:1em;
margin-right: 1.8vmin;}


.topnav {float:right;
        /*display: -webkit-box;
        display: -ms-flexbox;
    display: flex;*/
    width: 75%;
  
    margin-top: 2vw;  -webkit-box-pack: start;  -ms-flex-pack: start;  justify-content: flex-start; text-align: right;  margin-right:2%; line-height: 1.4em; -ms-flex-wrap: wrap; flex-wrap: wrap;}


.topnav a {
    border:none;
    display: block;
    padding-left: 2em;
    

    text-decoration: none;
    font-size: 1em;
    color: #2d2d2d;
   display:inline;
}
    .topnav a:hover {
        color: green; 
        text-decoration: underline;}

.topnav .icon {display: none;}
/*.dropdown {
    position: relative;
}
/Dropdown Content (Hidden by Default) 
.dropdown-content {
    display: none;
    position: absolute;
    margin-top: 18%;
    background-color: #f1f1f1;
width: 100%; overflow:auto;    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   
}

Links inside the dropdown 
.dropdown-content a{
 
    text-align: left;
 

    
}
.dropdown-content li {float:left; padding-top: 1em; padding-bottom: 1em;  text-align: left;
 }


.dropdown-content 

Change color of dropdown links on hover 
.dropdown-content a:hover {background-color: #ddd;}

Show the dropdown menu on hover 
.dropdown:hover .dropdown-content {display: block;}

Change the background color of the dropdown button when the dropdown content is shown 
.dropdown:hover .dropbtn {background-color: #3e8e41;}
start-DROPDOWN*/


/*FOOTER*/
.footer {
    margin-top: 3%;
    -ms-flex-negative:0;
        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;}

 .mensi {font-size: 0.8em;}

#facebook {float:right; width: 27vw; min-width: 200px; margin-top: 2%;}
#google {float:left; width: 25vw; min-height: 10em; margin-bottom: 1%; margin-top: 2%;}
#footer-objednavky {display: inline-block; width: 35vw;}
.certifikaty {display:block;}
.certifikaty img {opacity: 0.6;width:15%;max-width: 70px;display:inline-block;}

#dokumenty {display:block; text-align: left; width: 100%;}

.dotace {float:left; display:block; width: 30%; min-width: 400px; margin-top:1em; margin-bottom: 1em;}
/*end-GENERAL*/


/*start-INDEX.HTML*/

.container {
    text-align:center;
    width: 100%;
    margin: 1% auto auto auto;
    

}
       


.container p {
    text-align: left;
    margin-bottom: 10%;}

.container h1 {
    display: block;
        -webkit-transition: all 1s ease;
    transition: all 1s ease;}

    .container h1:hover {
            -webkit-transform: scale(1.05);
        transform: scale(1.05);}

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

.container img {
    border-radius: 50%; 
    height: 15vmin; 
        -webkit-transition: all 1s ease; 
    transition: all 1s ease;
    margin-top: 30px;}

    .container img:hover {
        -webkit-transform: scale(1.2);
    transform: scale(1.2);}



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

#index-title h1 {-webkit-transition: none;transition: none;-webkit-transform: none;transform: none; font-size: 1.4em;}

.index-popis p {text-align: left;}

.oznameni li { text-align: left; line-height: 1.5rem;}
.oznameni {background-color: #f5f3ed; padding:1rem;margin:1rem;}
.oznameni h2  {font-size: 1.1rem;}
.certifikace {
    display: block; 
    margin:2em auto 1em auto; 
    width: 90%; 
    border: 0.09em solid #515151; 
    padding: 1em;
    background: #fcfcfc;}

 .certifikace p {
     display: block; 
     margin:2em auto 0.5em auto; 
     width: 80%; 
     font-size: 0.95em; 
     font-style:italic;}

.certifikace img {float:left;}

.button {
    background-color: #3d3d3d; 
    border: 0.2em solid #3d3d3d; 
    border-radius: 7px; 
    padding: 0.4em; 
    width: 85%; 
    font-size: 0.8em; 
    background-color: #5e5a56;
}

    .button:hover {
    background-color: white; 
    color: #3d3d3d; 
    border: 0.3em solid #3d3d3d; 
    border-radius: 7px; 
    text-decoration: none;}


.button a {
    color: white; 
    text-decoration: none; 
    padding: 3%; 
    font-size: 1.3em; }
    .button:hover a {color: #3d3d3d;}

.slider img {
    width: 100%; 
    margin-bottom: 1em; 
    display: block; }

/*end-INDEX-HTML*/


/*start-OLEJE*/

.page {
    width: 80%; 
    margin: 2% auto auto auto;}
    
.page a:hover {color:green;}

.page img {width: 3%;}



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

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

.faq li {font-style:italic;}

/*end-OLEJE*/


/*start.KRMIVA*/


.krmiva-col1 {width:60%;}
.flexkrmiva {
 margin: 0 auto;
        display: block;
        display: -ms-flexbox;
        display: -webkit-box;
    display: flex;

        -webkit-box-pack: center;
        -ms-flex-pack: center;
    justify-content: center;
    float: left;
 
    

}
.krmiva-popis1 {padding-top: 0; margin-bottom: 10%; margin-right: 1%;float:right; width: 40%;padding-left: 5%;}

.flexkrmiva img {
    width:80%;
   max-width: 8em;
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
   filter: grayscale(100%);
        -webkit-filter: gray;
    filter: gray; /* IE 6-9 */
    
    margin: 5%;
    border: 5px solid gray;
    border-radius: 7%;

}
    
    .flexkrmiva img:hover {
        filter: none;
            -webkit-filter: grayscale(0%);
        border: 5px solid green;
        border-radius: 7%;
 }




.krmiva-container {display:block; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; }

/*#download h1 {font-size: 0.9em; border: 0.1em solid #3d3d3d; padding: 0.3em;  border-radius: 7px;text-align: center;   }


#download h1:hover {text-decoration: none;  opacity: 0.4;}*/

.brozura-container {border-top: 0.1em solid #3d3d3d;}
.brozura img:hover {opacity: 0.4;}
.brozura-container p {width: 33vmax; float:right; margin-left: 5%;  margin-right: 1%;}

.brozura h1 {font-size: 0.9em;display: block; width: 100%; padding: 3%; text-align: left; }
.brozura {width: 45%;  margin-bottom: 5%;}
.brozura img {max-width: 40%; float:left; margin-left: 3%; border: 5px solid gray;
    border-radius: 7%;}

.prodejna h1 {font-weight:bold;font-size: 0.9em;display: block; width: 100%; padding: 3%; text-align: center; margin:auto;}

.prodejna-container {display: -webkit-box;display: -ms-flexbox;display: flex; width: 100%; border-top: 0.1em solid #3d3d3d; padding-top:1em;
}
.prodejna {float:left; display:block; border-radius: 7%;width: 60%;}

.prodejna img:hover {opacity: 0.4; border: 5px solid green; }
.prodejna img {max-width: 85%; width: auto; display:block; margin: auto auto 5% 3%; border: 5px solid gray;
    border-radius: 7%; }

.prodejna-popis {margin-top: 3%;
padding-top: 0;float:right; width: 40%; margin-bottom: 10%; margin-right: 1%; padding-left: 5%;}
.prodejna-popis p {line-height: 1.5em;}




.doprava {display:block;clear:both; width: 100%;margin: 5% auto auto auto;}
/*end-KRMIVA/*

/*start-KOMODITY*/
.flexkomodity div {width: 100%; }
.flexkomodity a{font-weight: normal;}
.flexkomodity img {width: 8%; margin-right: -5%; float:left;}

.flexkomodity section {
    
    float: left;
    text-align: center;
    margin: 3% 12% auto 5%;
    width: 30%;}
.flexkomodity h1 {
    margin-bottom: -3em;
    margin-top: -3em;}
    
    @media screen and (max-width: 700px) {.flexkomodity h1{ font-size: 3vmin;}}

.flexkomodity p{
    margin-top: 0.5em;
    font-size: 1em;}

    @media screen and (max-width: 700px) {.flexkomodity p{ font-size: 2.5vw; }}




/*start-KONTAKTY*/

.kontakty { 
       display: block;
        display: -ms-flexbox;
        display: -webkit-box;
    display: flex;
    word-wrap: break-word;
    border-top: 0.1em solid #515151;
   /*display:inline-flex;*/
    justify-content: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
    text-align: left;
    float: left;
    clear: both;
    width: 100%;
    line-height: 1.5em;

}

.kontakty section {
    margin: auto auto 2% auto;
    width: 30%;
   }

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

    @media screen and (max-width: 700px) {.kontakty, .objednavky {font-size:2vw;} }


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

.kontakty h2 {
    margin-left: -3%; 
    font-size: 1.2em;}

#kontakty-mapa-vks{
    float: right; 
    width: 50%; 
    margin: 2% auto 2% auto; 
    height: 20%; 
    max-height: 300px;}

.objednavky h2 {margin: 4% auto 1% 7%;}
.objednavky p {
    margin-top: 0; 
    line-height: 1.5em;}

.telefon {
    float: left;
    width: 5%;
    text-align:left;        
    display: inline-block;
    margin: -1em 2% 5% auto;}


#spolecnost {
    display: block; 
    width: 95%; 
    clear: both;
    margin:0 auto 2% auto;
    font-size: 0.8em;}



/*Mapa- partneri*/

.resp-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%;
    margin-bottom: 20%;
    
 
}

.resp-iframe {
    position: absolute;
    top: 0;
    
    width: 100%; 
    height: auto; min-height: 300px;
}

.kontakty-partneri i {margin-right: 0.1em; }


.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%; 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;}

.kontakty-partneri {
    border-top: 0.1em solid #515151;
    width: 95%;
    display:block;
   margin: 0 auto 15em auto;}

.kontakty-partneri .fa-truck {font-size: 1.3em; color:black;}



/*start-SMĚS*/

.smes p::first-line {font-weight: bold;}

.smes span {font-weight: bold; line-height: 1.4em; margin: 20px;}

.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; 
    font-size: 1.3em;}

.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; }

/*end-SMĚS*/



#adresa {color: #515151;}
    #adresa:hover 
        {color: green; 
        text-decoration: underline; 
        font-weight: bold;}




/*start-O NAS*/
.onas-video {
    width: 80%; 
    max-width: 800px;
margin:auto;  
    margin-bottom: 1rem;
    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%;}

.certifikaty-seznam { text-align: left; clear:right;}




/*start-KRMIVA NABIDKA*/
.tlacitko {
    display:block;
    width:100%; 
    margin-top: 3em;}

    .tlacitko:hover {
        color: green; 
        border: solid 2px green; 
        text-decoration: none; 
        cursor: pointer;}

.tlacitko a {text-decoration: none;}
.tlacitko h2 {font-size: 1.8vmin;}

    @media screen and (max-width: 600px) {.tlacitko h2 {font-size:2.5vw;}}

.tlacitko p {font-style: italic; font-size: 1.2em; margin-top: 0;}

/*end-KRMIVA NABIDKA*/


/*start-KRMIVA/SKOT */

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


/*start-KRMIVA/PRASATA */
#selata {display: none;}
#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;}
/*end-KRMIVA/KONĚ*/



/*KRMIVA-DRUBEZ-SKOT-ATD-POD TLACITKEM*/

.grid-7radku {
    margin-top: 1em;  
    display:block;
        display: inline-block;
    display: grid;
    -ms-grid-columns: 0.7fr 2fr 0.3fr;
        grid-template-columns: 0.7fr 2fr 0.3fr; 
    line-height: 2em;
    grid-auto-flow: row;
    grid-gap: 2%;
    
   }

/*END 7 radku*/
.skladem-ano {color: green;}
.skladem-ne {color: #ffb600;}


/*.container {align-items: start; 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%; justify-content: space-evenly;}




.tlacitko-male h2{display:block;width:100%; margin-top: 3em;}
.tlacitko-male:hover {color: green; border: solid 2px green; text-decoration: none; cursor: pointer;}
.tlacitko-male a {text-decoration: none;}
*/

.facebook img {
    width: 3%; 
    float: right; 
    margin-top: 2%; 
    margin-right: 1%; 
    margin-bottom: 1%;}
   
    .facebook img:hover {
        opacity: 0.7;
}





.doplnek-container {
    background-color: #f4f4f4; 
    width: 80%;
    overflow: auto;}

.doplnek-container div {
    width: 30%; 
    float: left;}

.doplnek-container p {
    margin-left: 2%; 
    padding: 1%; 
    border-bottom: 0.1em solid #515151;}

@media screen and (max-width: 700px) {.doplnek-container div {width: 98%;}}

#nongmo {
    width: 15vmin; 
    float:right;}


/*Cookie Consent Begin*/
#cookieConsent {
    background-color: rgba(20,20,20,0.8);
    min-height: 26px;
    font-size: 14px;
    color: #ccc;
    line-height: 26px;
    padding: 8px 0 8px 30px;
    font-family: "Trebuchet MS",Helvetica,sans-serif;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    z-index: 9999;
}
#cookieConsent a {
    color: #4B8EE7;
    text-decoration: none;
}
#closeCookieConsent {
    float: right;
    display: inline-block;
    cursor: pointer;
    height: 20px;
    width: 20px;
    margin: -15px 0 0 0;
    font-weight: bold;
}
#closeCookieConsent:hover {
    color: #FFF;
}
#cookieConsent a.cookieConsentOK {
    background-color: #F1D600;
    color: #000;
    display: inline-block;
    border-radius: 5px;
    padding: 0 20px;
    cursor: pointer;
    float: right;
    margin: 0 60px 0 10px;
}
#cookieConsent a.cookieConsentOK:hover {
    background-color: #E0C91F;
}
/*start-MALOOBCHOD*/
.maloobchod-nav {line-height: 2.5em; font-size: 1.1em; }

.maloobchod-nav li a {display:block; text-decoration: none;  padding-left: 0.3em; font-weight: normal;}
    .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 {width: 99%; margin-left:auto; margin-right:auto;}

    .maloobchod-wraper h1 {width: 100%;background-color: #204c20; color: white; padding: 0.3em;font-weight: bold;border-top: 0.1em solid #515151;}

.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;   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: 20vmin; padding-right: 2%; padding-left: 2%; padding-bottom: 2%;}

.maloobchod-produkt p {text-align: left;}

.maloobchod-obrazek {height: 12vw; 
    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%; -webkit-box-flex:0; -ms-flex:none; flex:none;

height: auto; width: auto;}
.maloobchod-obrazek .maly { max-height: 75%; max-width: 100%; -webkit-box-flex:0; -ms-flex:none; 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-note {display:block; width: 100%;}
.maloobchod-produkt .price {color:forestgreen;}


/*end-MALOOBCHOD*/



.cenik-img {border: 0.4em solid #515151 ; border-radius: 7%;  width: 70%; }
.cenik-container {display:-webkit-box;display:-ms-flexbox;display:flex; -ms-flex-pack: distribute; justify-content: space-around; }



.cenik-img:hover {border: 0.4em solid green;}



/*start-SLUZBY*/
#doprava, #laborator, #poradenstvi ul {line-height: 2em;}
#doprava .sluzby-foto img {border-radius: 7%;}
#laborator .sluzby-foto img {height: 18vw;}

.sluzby-foto img {height: 15vw; }



.sluzby-foto {display: -webkit-box;display: -ms-flexbox;display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 90%; margin:auto; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end;}

/*end-SLUZBY*/

/*font awesome icony*/




/*.dropdown {
    overflow: hidden;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
       padding-top: 1.5em;

}
.dropdown-content a {
    float: none;
  padding: 0.4em;
    display: block;
 
    text-align: left;
}

.dropdown-content a:hover {
 color: green;
}

.dropdown:hover .dropdown-content {
    display: block;
}



.smesi {
        -webkit-box-align: start;
        -ms-flex-align: start;
    align-items: start; 
    text-align:center; 
    width: 80%; 
    margin: auto; margin-top: 3%; 
    display: grid;
        display:-ms-grid; 
        -ms-grid-rows: auto auto auto auto; 
        grid-template-rows: auto auto auto auto;
-ms-grid-columns: 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr;
grid-auto-flow: row;
grid-gap: 3%; -webkit-box-pack: space-evenly; -ms-flex-pack: space-evenly; justify-content: space-evenly;}




Menu u smesi schované dokud nekliknu
.skot-menu1 {cursor:pointer;  border: solid 0.2em #606060; }
.skot-menu1:hover {color: green; border: solid 0.2em green;}
.skot-menu1:visited {color: green; border: solid 0.2em green;}
.skot-menu2 {display:none;}
.skot-menu1:focus + .skot-menu2{display:block;}*/