/* --------------------------- TABLET ---------------------------------------------------------------------------------------  */
@media all and (max-width: 1050px) {
    .desktop {display: none;}
    .tablet, .mobil-tablet {display: initial;}
    .capit {text-transform:capitalize;}
    h1,h2,.h2 {margin-left: 20px; margin-right: 20px;}

    .obal {width: 100%; max-width: 850px;}
    
    #hlavicka {text-align:center;}
    #nav {text-align: left; margin-bottom: 0px; width: initial; position: relative; position: absolute; top: 50px; right: 20px;}
    #nav.floating {position: relative; top: initial;}
    #nav .burger {display: block; border-radius: 5px; width: 30px; height: 30px; padding-top: 3px; float: left; }
    #nav .txt {float: left; margin-left: 10px; margin-top: 6px;}
    #nav .burger span {display: block; width: 75%; border-bottom: 3px solid white; margin-top: 4px; margin-left: auto; margin-right: auto;}
    #nav #hamburger {padding: 10px; color: white; background: rgb(226,0,121);  font-family: 'Courgette', cursive; font-size: 1.05em; }
    #nav #hamburger:hover {cursor: pointer;}
    /*#nav #hamburger:hover .burger {background: black; }
    #nav #hamburger:hover .burger span {border-bottom-color: white;}*/

    #nav ul.mobil-tablet {display: block; padding: 0; width: 80%; border: 2px solid rgb(226,0,121); position: absolute; z-index: 999;  background: white;}
    #nav ul.mobil-tablet li {display: block; cursor: pointer; }
    #nav ul.mobil-tablet li a {padding-top: 18px; padding-bottom: 18px; display: block; padding-left: 20px;}
    #nav ul.mobil-tablet ul {display: none; }
    #nav ul.mobil-tablet ul.show,#nav ul.mobil-tablet ul.show2 {display: block; }
    #nav ul.mobil-tablet li ul li {border-bottom: none; border-top: 2px solid rgb(217,217,217); background: rgb(242,242,242); }
    #nav ul.mobil-tablet li ul li a {padding-left: 40px; font-weight: normal;}

    .menu {position: relative; right: 0; width: 200px !important; padding: 0; margin: 0; }
    .menu > li {display: initial; margin-left: 0px; border: none; border-bottom: 2px solid rgb(245,171,211); }
    .menu > li.last {border-bottom: none !important;}
    .menu > li.akt, .menu > li:hover {background: rgb(226,0,121); border: none; border-bottom: 2px solid rgb(226,0,121); color: white;}
    .menu > li:first-child {margin-left: 0;}
    .menu > li > a { display: block; color: rgb(248,29,132); padding: 15px 26px 15px 26px; text-decoration: none; font-family: 'Courgette', cursive; font-size: 1.05em;}
    .menu > li.akt > a, .menu > li:hover > a {color: white;}
    .menu > li .akce a {  background: #7c3092; color: white !important; padding: 18px 26px 18px 40px !important;  border-radius: 0px; }

    .menu > li.mobil-tablet:hover ul {display: block !important;}
    .menu > li.mobil-tablet:hover .submenu.submenu2  {display: block;}

    .menu > li .submenu {display: none; }
    .menu > li .submenu.vis, .menu > li.akt .submenu, .menu > li:hover .submenu {display: block !important; width: 100% !important; margin-top: 0px;  z-index: initial !important; position: initial; left: initial; right: initial; top: initial; color: rgb(106,78,78); background: none; }
    .menu > li:hover .submenu {display: none;}
    .menu > li:hover .submenu ul {display: none;}

    .menu > li .submenu.vis ul, .menu > li.akt .submenu ul {display: block !important; width: 100%; float: none; margin-left: 0; padding: 0; }
    .menu > li .submenu.vis li, .menu > li:hover .submenu li, .menu > li.akt .submenu li {display: block !important; position: initial; padding: 0px !important; margin-top: initial; margin-left: 0px !important; margin-right: 0px;  }
    .menu > li .submenu.vis li a, .menu > li:hover .submenu li a, .menu > li.akt .submenu li a { text-decoration: none;}
    .menu > li .submenu.vis li span, .menu > li:hover .submenu li  span, .menu > li.akt .submenu li span   {display: block; background: gray; color: white; padding: 5px}

    .menu > li .submenu.vis ul, .menu > li:hover .submenu ul {border: 0; }
    .menu > li .submenu.vis ul:last-child, .menu > li.akt .submenu ul:last-child {margin-bottom: 18px;}
    .menu > li .submenu.vis ul:last-child li:last-child, .menu > li.akt .submenu ul:last-child li:last-child {border-bottom: 2px solid #d9d9d9 !important; }

/*.menu > li.akt .submenu ul {display: block; width: 100%; box-sizing: border-box; float: left; margin: 0; background: none; background-color: white; height: 55px; margin-top: 0; border: 1px solid #c5c5c5;}
.menu > li.akt .submenu li {display: inline-block; margin-top: 0; padding: 0; padding-top: 16px; font-family: Arial, Helvetica, sans-serif; margin-left: 13px; margin-right: 13px; color: rgb(248,29,132);}*/

    /*.menu > li .submenu.vis li:hover a, .menu > li:hover .submenu li:hover a {color: rgb(248,29,132); }*/
    .menu > li.akt .sipka, .menu > li.akt .sipka , .menu > li:hover .sipka {display: none;}
    .menu > li .submenu.vis li.akt2 a {/*text-decoration: underline;*/}
    .menu > li .submenu.vis li.akt3 a {/*text-decoration: underline;*/}
    .menu > li .submenu1 a {padding-left: 0px; padding-right: 0px;}
    /* SUBMENU2 + SIPKA2 */
    .menu > li .submenu2.vis ul, .menu > li.akt .submenu2 ul, .menu > li:hover .submenu2 ul {display: initial; width: 100%;  }
    .menu > li .submenu2.vis, .menu > li.akt .submenu2, .menu > li:hover .submenu2 {left: initial;}
    .menu > li .submenu2 {text-align: left; width: initial; }
    .menu > li.akt .sipka2, .menu > li:hover .sipka2 {display: none;}
    /* SUBMENU3 + SIPKA3 */
    .menu > li .submenu3.vis ul, .menu > li:hover .submenu3 ul {display: initial; width: 100%; }
    .menu > li .submenu3.vis, .menu > li:hover .submenu3 {left: initial;}
    .menu > li .submenu3 {text-align: left; width: initial; }
    .menu > li.akt .sipka3, .menu > li:hover .sipka3 {display: none; }

    .menu > li .submenu.vis, .menu > li.akt .submenu, .menu > li:hover .submenu {padding-top: 0px; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none;}
    .menu > li .submenu.vis ul, .menu > li.akt .submenu ul, .menu > li:hover .submenu ul {display: block; width: 100%; box-sizing: border-box; float: left; margin: 0; background: none; background-color: white; height: initial; margin-top: 0; }
    .menu > li .submenu.vis li, .menu > li:hover .submenu li {}


    .provozovny.provozovna {width: 100%; max-width: 455px; overflow: hidden; float: none; margin-left: auto; margin-right: auto;}
    .last {margin-right: auto !important;}
    
    #paticka .newsletter-obal { width: 100%; }
    #paticka .newsletter-obal h2 {}
    #paticka .newsletter {width: 100%; margin-right: 0px; padding: 20px; text-align: center; box-sizing:border-box;}
    #paticka .newsletter .email {width: 100%; margin-bottom: 20px;}

    #paticka .kontakt  {float: none !important; width: 300px; margin-left: auto; margin-right: auto; }

    .domecky .domecek {margin-top: 25px; }
    .hp-sticker {position: absolute; right: 350px; top: 120px; }

    .pg-produkty-detail .listovani-vpred {display: none;}
    .pg-produkty-detail .listovani-vzad {display: none;}

    .box {background: white; width: 100%; min-height: 194px; color: rgb(106,78,78); box-sizing: border-box;}
    .box img {max-width: 100%;}

    .o-nas-vnitrek {width: 100%; box-sizing: border-box;}
    #map_canvas {width: 100%; max-width: 100%;}

    .err404 .obal2 {float: left; width: 850px; max-width: 850px; position: relative;}
    .err404 .obal3 {float: right; width: 500px; max-width: 500px; position: relative; top: -150px; right: 50px;}
    .err404 .obal3 img {width: auto; max-width: 500px; margin-top: 150px;}

    
#paticka-newsletter .newsletter-info {float: none; max-width: 500px; margin-left: auto; margin-right: auto; margin-bottom: 20px !important;}
#paticka-newsletter .newsletter-signup {float: none; max-width: 450px; margin-left: auto; margin-right: auto; margin-top: 20px;}

}

/* --------------------------- TABLET ---------------------------------------------------------------------------------------  */
@media all and (max-width: 850px) {

    

    .obal {max-width: 850px;}
    #img-vetrnik {display: none;}
    .hp-sticker {position: absolute; right: 50px; top: 120px; }

    .pg-produkty-kat .kat-hlavicka {background-image: none; width: 100%; padding-left: 20px; padding-right: 20px; float: none; margin-top: -10px; margin-right: 0px; font-size: 0.9em;  clear: both; box-sizing:border-box;}
    .pg-produkty-kat .kat-hlavicka.mensi {background-image: none; width: 100%; }

    .pg-produkty-detail table.data {float: none; width: 90%; box-sizing: border-box; margin-left: 20px; }
    .pg-produkty-detail table.data.neeshopova {width: 90%; float: none; margin-left: 20px; }
    .pg-produkty-detail table.data tr#trZneniNapisu input {width: 100%;}



    .pokladna-form input {border: 1px solid gray;}
    .pokladna-form .levy {float: none; width: 100%; }
    .pokladna-form .levy label {display: block; float: none; width: 100%; margin-bottom: 0px; margin-top: 10px;}
    .pokladna-form .levy input, .pokladna-form .levy select {display: inline-block; float: none; width: 85%; margin-bottom: 0px; padding: 5px;}
    
    .pokladna-form .levy .naFirmu span label, .pokladna-form .naFirmu span input {width: initial; display: initial; float: none; }
    .pokladna-form .levy .naFirmu  {background: rgb(246,246,246); margin-top: 12px; padding: 5px; padding-top: 2px; padding-bottom: 8px; font-weight: bold;}
    .pokladna-form .levy #firemni {padding: 5px;}

    .pokladna-form .stred {float: none; width: 100%; }
    .pokladna-form .stred label {display: block; float: none; width: 100%; margin-bottom: 0px; margin-top: 10px;}
    .pokladna-form .stred input, .pokladna-form .levy select {display: inline-block; float: none; width: 85%; margin-bottom: 0px; padding: 5px;}

    .pokladna-form .pravy {float: none; width: 100%; }
    .pokladna-form .pravy label {display: block; float: none; width: 100%; margin-bottom: 0px; margin-top: 20px;}
    .pokladna-form .pravy input, .pokladna-form .pravy select {display: inline-block; float: none; width: 75%;  margin-bottom: 0px;  padding: 5px;}
    .pg-kosik span.check {display: inline-block; width: 10%; height: 15px; margin-top: 0px;}
    .pg-kosik span.check.req {background-image: url('img/ikonky-form-req.png'); background-repeat: no-repeat; background-position: -10px -18px; }
    .pg-kosik span.check.ok {background-image: url('img/ikonky-form.png'); background-repeat: no-repeat; background-position: -10px -8px;}
    .pg-kosik span.check.err {background-image: url('img/ikonky-form.png'); background-repeat: no-repeat; background-position: -10px -25px;}
    .pg-produkty-detail .vyber-pobocky input, .pg-kosik .vyber-pobocky input {position: absolute; left: 8px; top: 30px; display: inline-block !important; width: 10px; border: 1px solid black; background: red;}

    .a-pracovni-nabidka {width: 100%; margin-bottom: 10px; margin-right: 0;}

    .err404 .obal2 {float: left; width: 750px; max-width: 750px; position: relative; padding: 25px;}
    .err404 .obal3 {float: none; width: 500px; max-width: 500px; position: relative; top: 0px; right: 0px;}

    
    .blog-clanky {width: auto; padding: 20px; }
    .blog-clanky .nahledovy-obrazek {width: 100px;}
    .blog-clanky .nahledovy-obrazek img {max-width: 100px;}
    .blog-detail .box {width: auto; max-width: 850px; color: rgb(106,78,78); margin-top: 65px; float: none; overflow: hidden; padding: 25px;}
    .blog-pravy {float: none; padding: 20px;}
}

/* --------------------------- TABLET ---------------------------------------------------------------------------------------  */
@media all and (max-width: 750px) {
    .obal {max-width: 750px;}
    .domecky .domecek {float: none !important; margin-left: auto !important; margin-right: auto !important; }
    .domecky .domecek.last {margin-right: auto !important; }
    .nazor {float: none; margin-left: auto; margin-right: auto;}
    .produkt-nahled {float: none !important; margin-left: auto !important; margin-right: auto !important; display: block;}
    .produkt-kat {float: none; margin-left: auto; margin-right: auto; display: block;} 

    .pg-produkty-detail .box-small {margin-left: 0px; width: 100%;  }  
    .box-small {background: none !important; width: 100%; min-height: 0px; border: initial; -webkit-box-shadow: initial; -moz-box-shadow: initial; box-shadow: initial;}
    .box-small .top {background: none; }
    .box-small .bottom {background: none; }

    .pg-kosik .kosik-navigace .zpet {position: relative; left: initial; display: block; margin-bottom: 40px;}
    
        .blog-detail .box {width: auto; max-width: 750px; color: rgb(106,78,78); margin-top: 65px; float: none; overflow: hidden; padding: 25px;}
}

@media all and (max-width: 600px) {
    .obal {max-width: 600px;}
    .hp-sticker {display: none;}
    .pg-produkty-detail .mnozstvi td:first-child {vertical-align: top !important; padding-top: 15px !important;}
    .pg-produkty-detail .submit {background-image: none; padding-left: 10px; padding-right: 10px; margin-left: 0px; margin-bottom: 10px; width: auto;}
    .boxik {margin-left: auto; margin-right: auto; float: none; display: block;}
    .pg-provozovny .galerie {margin-left: auto; margin-right: auto; text-align: center;}
    .pg-provozovny .galerie img {margin-right: 0px; }

    
        .blog-detail .box {width: auto; max-width: 600px; color: rgb(106,78,78); margin-top: 65px; float: none; overflow: hidden; padding: 25px;}
}

/* --------------------------- MOBIL ---------------------------------------------------------------------------------------  */
@media all and (max-width: 500px) {
    .obal {max-width: 500px;}
    h1 {font-size: 2.5em; }

    .desktop, .tablet {display: none;}
    .mobil, .mobil-tablet {display:initial;}
    .desktop-tablet {display: none !important;}            
    .dot-mag.boxA {display: none;}
        h1>span {display: none;}
        .obrazekA {}
        .pg-produkty-detail .obrazekA .hlavni img {width: 100%; }
        .pg-produkty-detail table.data .dostupnost-datum:hover span {left:-195px;}

        /*#tblKosik .moznosti, #tblKosik .foto, #tblKosik .cena.ks, #tblKosik .dostupnost {display: none;}*/
        .kariera-form input, .kariera-form textarea, .kariera-form select, .kariera-form textarea {width: 100%; }

        .banner-rozvoz {display: block; margin-left: 10px; margin-right: 10px; max-width: 935px; border: 1px solid #e3bad4; box-sizing: border-box; background: white; margin-top: 30px; text-decoration: none; }
        .banner-rozvoz .nadpis {display: block; background: #f81d84; color: white; text-align: center; font-weight: bold; padding-top: 5px; padding-bottom: 5px; font-size: 15pt;}
        .banner-rozvoz .img {display: block; float: none; width: 325px; box-sizing: border-box; padding-top: 20px; margin-left: 10px; margin-right: 0px; overflow: hidden;}
        .banner-rozvoz .banner-box {display: block; float: left; width: 150px; border: 1px solid #f81d84; margin-left: 7px; margin-right: 7px; margin-top: 10px; margin-bottom: 10px; font-size: 12pt; padding: 15px; box-sizing: border-box; color: black; text-align: center;}
        .banner-rozvoz .banner-box span {display: block; text-align: center; color: #f81d84; font-size: 20pt; font-weight: bold; box-sizing: border-box; padding: 5px;}
        .banner-rozvoz .sipka {display: block; float: left; margin-top: 20px; margin-left: 15px; width: 0; height: 0; border-style: solid; border-width: 62.5px 0 62.5px 125px; border-color: transparent transparent transparent #f81d84;}
        .banner-rozvoz .cleaner {display: block;}

        .err404 .obal2 {float: left; width: auto; max-width: 500px; position: relative; padding-top: 0;}
        .err404 .obal3 {float: none; width: auto; max-width: 500px; position: relative; top: 0px; right: 0px;}
        .err404 .obal3 img {float: left; width: auto; max-width: 300px; position: relative;}

        .blog-detail .box {width: auto; max-width: 500px; color: rgb(106,78,78); margin-top: 65px; float: none; overflow: hidden; padding: 25px;}

}