
.wrapper {
  width: 1200px;
  margin: 0 auto;
}
.box-mobile-info, .box-tablet-info {
  display: none;
}

/*		full HD Desktop Layout: 1200px.    */
/****************** *******************************************
 *		Desktop Full HD Layout: 1200px.                   *********
 **************************************************************		 */
@media only screen and (min-width: 1230px) {
  .desktopHidden {display: none;}
  /***************************************************************/

  #boxHlavni > .wrapper > .content {min-height: 400px;}
  .white-popup-block {max-width: 1100px;}
  .vypis-zbozi .zbozi-polozka:nth-child(4n) {margin-right: 0;}
}

/*		HD Desktop Layout: 992px.    */
@media only screen and (min-width: 992px) and (max-width: 1229px) {
  .wrapper {width: 1000px;}
  .desktopHidden {display: none;}

  body {font-size: .9em;}
  h2 {font-size: 17px;}

  #boxHlavni > .wrapper > .content {min-height: 400px;}

  #menuTop {width: 550px;}
  #boxPhone {width: 320px;}

  #boxVyhledavani, #boxSlogan {margin-left: 50px;}
  #header .boxKosik {margin-left: 40px;}
  #boxVyhledavani, #boxVyhledavani input {width: 350px;}

  .vypis-zbozi .zbozi-polozka {width: 232px;margin: 0 14px 14px 0; padding: 15px 7px 0;}
  .vypis-zbozi .zbozi-polozka:nth-child(4n) {margin-right: 0;}
  .vypis-zbozi .link-detail {left: 39px;}

  .detail-zbozi .foto {width: 400px;}
  .detail-zbozi .zboziInfo {width: 550px;}
  .box-darky .darky-polozka {width: 234px;}
  #boxPridanoDoKosiku .box-right {width: 600px;}

  #box-doprava-a-platba div.podminka div.box {width: 380px;}

  #boxInformace {width: 460px;}
  #boxInformace .boxContent {width: 40%;}
  #boxInformace .boxContent2 {width: 60%;}

  #boxPlatbaDoprava .box-right {width: 880px;}

}

/****************** *******************************************
 *		Tablet Layout: 768px                            *********   ****************************************************************
 **************************************************************		 */
@media only screen and (min-width: 768px) and (max-width: 991px) {

  .wrapper {
    width: 750px;
  }

  .tabletHidden, #boxPhone, #boxSlogan, .box-razeni-strankovani-hlavicka .strankovani, .box-razeni-strankovani-paticka .razeni-zbozi {
    display: none;
  }
  .box-tablet-info, .tablet-block {
    display: block;
  }
  .detail-zbozi .box-cena-kosik, .detail-zbozi .helpBox, .box-popis-parametry p, .box-razeni-strankovani .strankovani, .razeni-zbozi, #boxInformace, #boxInfoOnlinePlatby {
    width: 100%;
  }

  #boxHlavni > .wrapper > .content {padding-left: 13px; padding-right: 13px;}
  /*************************************************************************/

  body {font-size: .9em;}

  #menuTop {width: 500px;}
  #logo {width: 210px; margin: 28px 0 0;}
  #boxVyhledavani {margin-left: 40px;}
  #header .boxKosik {margin-left: 40px;}
  #boxVyhledavani, #boxVyhledavani input {width: 340px;}

  #boxMenuKategorie ul li a {font-size: 1.1em; padding: 0 10px;}
  #boxMenuKategorie ul li a:hover, #boxMenuKategorie ul li a.aktivni {padding: 5px 10px;}

  .vypis-zbozi .zbozi-polozka {width: 232px;margin: 0 14px 14px 0; padding: 15px 7px 0;}
  .vypis-zbozi .zbozi-polozka:nth-child(3n) {margin-right: 0;}
  .vypis-zbozi .link-detail {left: 39px;}

  .detail-zbozi .foto {width: 250px;}
  .detail-zbozi .zboziInfo {width: 450px;}
  .box-darky .darky-polozka {width: 234px;}
  #boxPridanoDoKosiku .box-right {width: 500px;}
  #boxPridanoDoKosiku .box-left {width: 140px;}

  .darky-popis p, .darky-popis h4 {padding: 0 0 5px;}

  #box-podkategorie-zbozi li {width: 33.333%;}
  .box-razeni-strankovani {text-align: center;}

  div#objednavkovy-proces-hlavicka ul li {padding: 0 0 0 8px;}
  div#objednavkovy-proces-hlavicka .polozka {width: 175px;}

  #box-darkovy-poukaz {width: 350px;}

  #box-doprava-a-platba div.podminka div.box {width: 260px;}

  .ui-tabs .ui-tabs-nav li a {font-size: .9em;}

  div.formular .box-right {width: 30%;}
  div.formular .box-left {width: 65%;}

  #boxInformace {margin: 0 0 25px;}

}
/****************** *******************************************
 *		Mobile Layout: 320px                            *********
 **************************************************************		 */
@media only screen and (max-width: 767px) {
  .wrapper, #boxInformace, #boxInfoOnlinePlatby, .detail-zbozi .foto, .detail-zbozi .zboziInfo, .detail-zbozi .box-cena-kosik, .detail-zbozi .helpBox, .box-popis-parametry p, #boxPridanoDoKosiku .box-right,
  #box-darkovy-poukaz, #box-dorucovaci-zeme, #box-doprava-a-platba .box-doprava, #box-doprava-a-platba .box-platba, #buttonDodaciUdajeS, div.formular .box-left, div.formular .box-right,
  #box-souhrn-objednavky .box-left, #box-souhrn-objednavky .box-right, #box-doprava-a-platba-cena .box-cena, #box-doprava-a-platba-cena h2 {
    width: 100%;
  }
  body {font-size: .9em;}

  .cleaner-mobile {
    clear: both;
  }
  .box-mobile-info, .mobile-block, #boxMobileMenu {
    display: block;
  }
  .mobil-hidden, .mobile-hidden, #menuTop, #boxPhone, #boxSlogan, #boxVyhledavani, .boxKosik, .boxUzivatel, #boxMenuKategorie, div.razeni-zbozi span, #boxInfoOnlinePlatby .linkGopay, #boxPridanoDoKosiku .box-left,
  .box-razeni-strankovani-hlavicka .strankovani, .box-razeni-strankovani-paticka .razeni-zbozi, div#objednavkovy-proces-hlavicka .nazev, .ui-tabs .ui-tabs-nav li a span {
    display: none;
  }


  div.text {
    text-align: left;
  }


  /*************************************************************************/
  #topNav {position: absolute; top: 9px; right: 7px; background-color: #222;}
  #topNav .content {padding: 0 7px;}
  #navFlags {height: 35px; width: auto;}


  #header {height: auto;}
  #header .content {padding: 0;}

  #logo {margin: 10px 10px; line-height: 90%; width: 200px;}
  #logo a {line-height: 90%;}

  #boxMobileMenu {background-color: #000; clear: both; padding: 2px 0 3px; height: 36px;}
  #boxMobileMenu a, #boxMobileMenu span {display: inline-block; padding: 5px 10px; line-height: 50%; float: right;}

  span#icoMobileMenu {position: relative; float: left; cursor: pointer;}
  span#icoMobileMenu img {width: 21px;}
  span#icoMobileMenu label {color: #fff; position: relative; top: -5px; text-transform: uppercase; padding: 0 0 0 3px; cursor: pointer;}

  #icoMobileCart {width: 45px; position: relative;}
  #icoMobileUser {width: 42px;}
  #icoMobileSearch {width: 41px;}

  #icoMobileCart span {background-color: #fd0002; border-radius: 10px; color: #fff; display: block; font-size: 70%; height: 18px; line-height: 19px; padding: 0; position: absolute; right: 1px; text-align: center; top: 4px; width: 18px;}

  #boxVyhledavani {position: fixed;right: 3px;top: 50px;z-index: 500;width: 250px; margin: 0;}
  #boxVyhledavani input {border: 1px solid #222; width: 250px;}

  /************************************************************************/
  #boxMenuKategorie {position: fixed; top: 0; left: 0; z-index: 103; width: 100%; height: 100%; padding: 0 10% 0 0;height: 100%;overflow: auto;background-color: rgba(255,255,255, .5);}
  #boxMenuKategorie .content {background: #000 url(); height: auto;padding: 25px 0;}
  #boxMenuKategorie ul {margin: 0;}
  #boxMenuKategorie ul li, #boxMenuKategorie ul li a {width: 100%; color: #fff;}
  #boxMenuKategorie ul li a:hover, #boxMenuKategorie ul li a.aktivni {padding: 0px 20px; background-color: #000; top: 0px;}
  /************************************************************************/

  #boxHlavni > .wrapper > .content {padding: 10px 7px 15px;}

  #box-podkategorie-zbozi li {width: 50%;}
  #box-podkategorie-zbozi li:nth-child(2n) {padding-right: 0;}
  #box-podkategorie-zbozi li a {padding: 0px 7px; font-size: .9em;}

  .box-razeni-strankovani {padding: 0; background: #fff; text-align: center; padding: 7px 0; }
  .box-razeni-strankovani-hlavicka {border-top: solid 1px #222; border-bottom: solid 1px #222;}

  .box-razeni-strankovani div.strankovani, .box-razeni-strankovani div.razeni-zbozi {width: 100%; text-align: center;}

  div.strankovani span, div.strankovani b, div.strankovani a {padding: 2px; width: 30px;}

  div.razeni-zbozi {font-size: .9em;}
  div.razeni-zbozi a {line-height: 150%; padding: 2px 5px;}

  .vypis-zbozi .zbozi-polozka {width: 49%; height: auto; margin: 0 0 10px 0; font-size: .7em; padding: 15px 6px 10px;}
  .vypis-zbozi .zbozi-polozka:nth-child(2n) {float: right;}

  .vypis-zbozi .zbozi-polozka .foto {margin: 0 0 10px;}
  .vypis-zbozi .zbozi-polozka .foto a {padding: 0 0 15px;}

  .vypis-zbozi .zbozi-polozka .nadpis {height: 70px;}
  .vypis-zbozi .zbozi-polozka .dostupnost {margin-bottom: 0; width: 100%;}
  .vypis-zbozi .zbozi-polozka:hover .link-detail a {display: none;}
  /************************************************************************/
  #footer .content {font-size: 0.8em; padding: 25px 7px;}
  #footer li, #footer h3, #footer p {line-height: 200%;}

  .detail-zbozi .zboziInfo {padding: 25px 0 0;}
  .detail-zbozi .atributy div {font-size: .8em;}
  .detail-zbozi .atributy .info-expedujeme span, .detail-zbozi .atributy .postovne-zdarma {padding: 4px 5px;}

  .box-darky .darky-polozka {width: 50%;}
  .box-darky .darky-polozka p label {height: 50px;}

  #boxPlatbaDoprava .table-platba-doprava {font-size: 80%;}
  #boxPlatbaDoprava .nowrap {white-space: normal;}
  /************************************************************************/
  div.formular p.box-left {padding: 0 0 15px;}

  #boxPridanoDoKosiku, .jconfirm .container {width: 98%;}
  .white-popup-block {padding: 40px 12px 10px;}

  #tableKosik, #tableKosik td, #tableKosik th {font-size: .8em;}
  .tl-do-kosiku {white-space: normal;}

  div.formular .input-box-2-right, div.formular .input-box-adresa-middle {margin-left: 0;}

  .ui-tabs .ui-tabs-nav li a {font-size: .7em;line-height: 160%;padding: 7px 4px;}
  .ui-tabs .ui-tabs-nav li {margin: 0 2px;}

  div.formular .input-box-adresa-right {width: auto;}
  #box-souhrn-objednavky h2 {margin: 5px 0 5px; border-bottom: solid 1px #ccc;}

 .objednavkovy-proces-paticka .pokracovat, .objednavkovy-proces-paticka .zpet {width: 50%;}

  div#objednavkovy-proces-hlavicka ul li {width: 25%;}
  div#objednavkovy-proces-hlavicka .polozka {width: 100%;}
  div#objednavkovy-proces-hlavicka .poradi {float: none; text-align: center; background-color: #555;}
  div#objednavkovy-proces-hlavicka li.vyplnene .polozka .poradi {background-color: #222;}

  #box-darkovy-poukaz, #box-dorucovaci-zeme {margin: 0 0 12px;}
  #box-darkovy-poukaz {padding: 7px 10px;}

  #myConsentCookies {left: 0; bottom:0; border-radius: 0; box-shadow: 0 0px 20px rgba(0,0,0,.35); width:100%;}

  @media only screen and (max-width: 480px) {
    #myConsentCookies .boxTl {padding: 15px 0 10px;}
    #myConsentCookies .tl {width: 100%; padding: 8px 12px; margin: 0 0 15px;}
  }
}
