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

/****************** *******************************************
 *		Desktop Full HD Layout: 1501px.                   *********
 **************************************************************		 */
@media only screen and (min-width: 1351px) {
  .desktopHidden {display: none;}
  .cleaner-desktop {clear: both;}

  .wrapper {width: 1300px;}
  header.hlavicka .wrapper, #boxAktuality .wrapper {width: 100%;}

  /************************************/
  #hlavniMenu, .hlavniObsahLeft .hlavniObsahLeftContent {display: block !important;}


  .boxKontaktProvozovatel {float: left; width: 550px; padding: 0 0 30px;}
  .boxKontaktMontaze {float: right; width: 670px;}
}

/****************** *******************************************
 *		Desktop Full HD Layout: 1350px.                   *********
 **************************************************************		 */
@media only screen and (min-width: 1001px) and (max-width: 1350px) {
  .desktopHidden {display: none;}
  .cleaner-desktop {clear: both;}
  header.hlavicka .wrapper, #boxAktuality .wrapper {width: 100%;}
  /************************************/
  body {font-size: 90%;}
  #hlavniMenu, .hlavniObsahLeft .hlavniObsahLeftContent {display: block !important;}

  header.hlavicka {height: 130px;}
  header.hlavicka .boxHlavickaBottom {height: 90px;}
  #boxMenuContent > ul {line-height: 90px;}
  #boxPrepinacZemi {right: 90px; top: 25px;}
  #boxMenuContent > ul > li > a {padding: 5px 15px;}
  header.navMin, header.navMin .boxHlavickaBottom {height: 70px;}
  /************************************/
  .boxNadpis {margin: 0 0 40px;}

  /************************************/
  .boxVypisZbozi .polozka {width: 226px;}
  .boxVypisZbozi .polozka .foto a {height: 138px; width: 226px;}
  .boxVypisZbozi .polozka .nadpis {margin: 0;}

  #boxCelySortimentEshopu ul li .dBlok {width: 182px; height: 135px;}
  #boxCelySortimentEshopu ul li {margin: 0 5px 55px; }
  #boxCelySortimentEshopu h3 {font-size: 110%;}
  #boxCelySortimentEshopu .pripravujeme h3 {font-size: 85%;}

  #boxProdejnaMozaika .box2 {width: 180px; padding: 5px 20px 0;}
  #boxProdejnaMozaika .box1, #boxProdejnaMozaika .box3 {width: 390px;}
  #boxProdejnaMozaika .tableOtviraciDoba {width: 90%;}

  #boxSortiment .content .polozka {width: 25%;}
  #boxPosledniReference .boxReference {width: 100%;}
  .boxReference .fotky .polozka {width: 90px}
  .uvod .boxReference .fotky .polozka {width: 114px;}
  #boxPatickaAktuality .obsah, #boxAktuality .obsah {width: 480px;}
  .galerie-fotky .polozka {width: 153px;margin: 0px 10px 10px 0;}

  .kontakty .box-prodejna {width: 350px;}
  .kontakty .google-maps {width: 600px;}

  .podstrana #boxCelySortimentEshopu ul li {margin: 0 10px 57px 0;}
  .podstrana #boxCelySortimentEshopu ul li .dBlok {width: 207px;height: 155px;}

  .boxVypisZboziEshop div.obsah {width: 485px;}

  #box-detail-zbozi div.formular, #objednavkovy-forumlar {padding: 15px 15px 10px;}
  .obsah2 {padding: 15px 15px 0px;}
  #box-detail-zbozi div.foto {width: 178px;}
  #box-detail-zbozi div.obsah {width: 460px;}

  .boxKontaktProvozovatel {float: left; width: 400px; padding: 0 0 25px;}
  .boxKontaktMontaze {float: right; width: 530px;}

  .boxProdejna .boxProdejnaText {width: 400px;}
  .boxProdejna .boxProdejnaMapa {width: 530px;}
}



/****************** *******************************************
 *		Mobile/Tablet Layout                            *********
 **************************************************************		 */
@media only screen and (max-width: 1000px) {
  .wrapper, .boxProdejna .boxProdejnaText, .boxProdejna .boxProdejnaMapa {
    width: 100%;
  }
  .cleaner-mobile {
    clear: both;
  }
  .box-mobile-info, .mobile-block {
    display: block;
  }
  .mobile-hidden, .mobileHidden, #hlavniMenuM div label, #hlavicka .menuHlavicka .zavrit span {
    display: none;
  }

  .wrapper {padding: 0 10px;}
  body {font-size: 90%;}

  .boxNadpis {margin: 0 0 40px;}
  #hlavniObsah .wrapper {padding: 40px 20px 0;}
  #boxProdejnaMozaika {padding: 0 0 20px;}
  .atributy {top: 0; left: 0;}

  /************************************/
  header.hlavicka .wrapper {padding: 0;}
  header.hlavicka {height: 110px;}
  header.hlavicka .boxHlavickaBottom {height: 70px;}
  #boxMenuContent > ul {line-height: 70px; display: block;}
  #boxPrepinacZemi {right: 130px; top: 15px;}
  #boxMalyKosik {right: 70px;}
  #boxMenuContent > ul > li > a {padding: 5px 15px;}
  header.navMin, header.navMin .boxHlavickaBottom {height: 70px;}
  header.hlavicka .boxJazykyLinkEshop .boxTlEshop a {padding: 6px 20px;}
  header.hlavicka .boxRychlyKontakt ul {line-height: 39px;}
  #boxMalyKosik {height: 36px;}
  #boxMalyKosik .content {background-size: 100% auto;line-height: 33px;height: 36px;width: 37px;}
  /************************************/

  #hlavniMenuM {position: absolute; right: 8px; top: 11px; border-radius: 0px;}
  #hlavniMenuM div {width: 45px; height: 45px; padding: 9px; cursor: pointer;}
  .mobileNavActive {overflow: hidden;}

  #menuMenu {position: relative; left: 0; top: 0;}
  #hlavniMenu {transition: none;background-color: #fff; position: fixed; top: 0; left: 0; width: 75%; height: 100%; box-shadow: 5px 5px 25px rgba(0,0,0, 0.3); overflow: auto; z-index: 114; margin: 0 auto 0 0;}

  #hlavniMenu .content ul li {padding: 0; display: block;}
  #hlavniMenu .content ul li a {padding: 15px 0; border-bottom: solid 1px #ddd; font-size: 150%; display: block;}
  #hlavniMenu .content ul li:last-child a {border: none;}
  #hlavniMenu .content ul li.aktivni a, #hlavniMenu .content ul li a:hover {color: #1b1b1b;}
  #hlavniMenu .content ul .menuPodkategorie {display: none; padding: 15px 20px;}

  #hlavniMenu .content ul ul li a {border: none; font-size: 130%; text-transform: none; padding: 10px 0 7px;}

  #hlavicka .menuHlavicka {background-color: #414042; color: #fff; padding: 25px 25px 25px;}
  #hlavicka .menuHlavicka .zavrit {position: absolute; right: 20px; top: 27px; background: transparent url("../layout/close.png") no-repeat scroll left top; background-size: 100% auto; width: 17px; height: 17px; cursor: pointer;}
  #hlavicka .menuHlavicka .nadpis {font-size: 130%; text-transform: uppercase;}

  #hlavniMenu .mobileKategorie {padding: 20px 25px 0;}

  #hlavniMenu #menuMenu {background-color: #eee; margin: 20px 0 0; padding: 25px 25px;}
  #hlavniMenu #menuMenu ul li a {border: none; padding: 10px 0 7px; text-transform: none;}

  /************************************/
  .boxVypisZbozi .polozka {margin: 0 1% 0 0; width: 24%;}
  .boxVypisZbozi .polozka .foto a {position: relative; width: 100%; height: 80px;}
  .boxVypisZbozi .polozka .foto img {position: absolute;margin: auto;top: 0;bottom: 0;}
  .boxVypisZbozi .polozka .nadpis {margin: 0;}

  #boxCelySortimentEshopu ul {display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-justify-content:center;justify-content:center;}
  #boxCelySortimentEshopu ul li .dBlok {width: 182px; height: 135px;}
  #boxCelySortimentEshopu ul li {margin: 0 5px 55px;}
  #boxCelySortimentEshopu .pripravujeme h3 {font-size: 85%;}
  .podstrana #boxCelySortimentEshopu ul li { margin: 0 5px 55px;}
  .podstrana #boxCelySortimentEshopu ul li .dBlok {width: 182px;height: 135px;}

  #boxProdejnaMozaika .box1, #boxProdejnaMozaika .box3 {width: 40%;}
  #boxProdejnaMozaika .box2 {width: 16%; padding: 5px 2% 0;}

  #boxSortiment .content .polozka {width: 25%;}
  .boxReference .fotky .polozka {width: 31%; margin: 0 0 2% 2%;}

  #boxPatickaAktuality .foto, #boxAktuality .foto {width: 16%;}
  #boxPatickaAktuality .obsah, #boxAktuality .obsah {width: 82%;}

  .boxVypisZboziEshop p.foto, #box-detail-zbozi div.foto, .mozaika-logo {width: 20%;}
  .boxVypisZboziEshop div.obsah, #box-detail-zbozi div.obsah, .box-prodejna {width: 78%;}
  .box-prodejna {float: right;}

  .kontakty .mozaika-logo {float: none; width: auto;}
  .kontakty .box-prodejna {float: left; width: 35%;}
  .kontakty .google-maps {width: 63%;}

  #boxFiltrySkupiny ul li {width: 50%;}

  .boxProdejna {padding: 0;}
  /************************************/

  /**************** tablet ***************************************************************/
  @media only screen and (min-width: 768px) and (max-width: 1000px) {
    .cleaner-tablet {
      clear: both;
    }
    .box-tablet-info, .tablet-block {
      display: block;
    }
    .tablet-hidden {
      display: none;
    }
    .hlavniObsahLeft .hlavniObsahLeftContent {display: block !important;}
    .tablet-upper {text-transform: uppercase;}
    .wrapper {padding: 0 20px;}
    /***************************************************/
    .galerie-fotky .polozka {width: 23%; margin: 0 2% 2% 0;}
    .form_vzornik div.polozka label {font-size: 100%;}

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

    }
  }

  /*************  mobil  **************************************************************************************************/
  @media only screen and (max-width: 767px) {
    body {font-size: 80%;}
    #box-kosik {display: none;}
    .onlyMobile {display: block;}
    #boxPosledniReference .boxReference, .hlavniObsahLeft, .hlavniObsahRight, #box-detail-zbozi .vypocitana-cena, #box-detail-zbozi select.text, #box-detail-zbozi .submit, div.form_vzornik, div.formular .duoBox {width: 100%;}

    #hlavniObsah {background-position: top 70px center;}

    div.p, p, address, #paticka p, #paticka address {padding: 0 0 15px;}
    div.formular {padding: 10px 0 0;}

    #hlavniObsah .wrapper {padding-left: 10px; padding-right: 10px; padding-top: 30px;}

    header.hlavicka .boxRychlyKontakt .iko {margin: 0 2px;}
    header.hlavicka .boxRychlyKontakt .iko a {width: 18px; overflow: hidden; height: 18px; margin-top: 11px; background-position: center; background-size: auto 100%;}
    header.hlavicka .boxRychlyKontakt a span {visibility: hidden; display: none;}
    /***************************************************/
    .boxVypisZbozi .polozka {width: 49%;}
    .boxVypisZbozi .polozka .foto a {height: 120px;}
    .boxVypisZbozi .boxTlacitka .tl {margin-bottom: 10px;}

    #boxSortiment .content .polozka {width: 50%}

    #paticka .patickaTop {padding: 40px 0 0;}
    .podstrana .boxNadpis {margin: 0 0 10px;}
    .podstrana #hlavniObsah {padding: 110px 0 0; background-image: url();}
    #boxDrobeckovaNavigace {position: relative; right: 0; top: 0; left: 0; height: auto; margin: 0 0 10px; line-height: 160%;}

    .hlavniObsahLeft .hlavniObsahLeftContent {display: none;}
    .hlavniObsahLeft .box-submenu ul {display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-justify-content:space-between;justify-content:space-between; padding: 0;}
    .hlavniObsahLeft .box-submenu ul li {width: 50%;}
    .hlavniObsahLeft .box-submenu ul li a {padding-left: 0px;}
    .hlavniObsahLeft .box-submenu li.current > a {background-position: left center; padding-left: 20px;}

    .hlavniObsahLeft .hlavniObsahLeftContent {margin: 0 0 20px;}
    #box-detail-zbozi div.foto {width: 20%;}
    #box-detail-zbozi div.obsah {width: 78%;}
    #box-detail-zbozi div.formular, #objednavkovy-forumlar {padding: 10px 10px 5px;}
    .obsah2 {padding: 10px 10px 0px;}
    .form_vzornik div.polozka label {font-size: 110%}
    .galerie-fotky .polozka {width: 23%; margin: 0 2% 2% 0;}

    #boxCelySortimentEshopu h3 {font-size: 130%;}
    #boxCelySortimentEshopu .pripravujeme h3 {font-size:95%;}

    .form_vzornik div.polozka {width: 31%; margin: 0 1% 2%; height: auto; max-width: 200px; min-width: 150px;}

    .bodyDetailZbozi button.mfp-close {position: fixed; top: 15px; right: 1%; box-shadow: 5px 5px 25px rgba(0,0,0, 0.3); background-color: #fff;}

    #boxProdejnaMozaika .box1, #boxProdejnaMozaika .box3 {width: 100%; text-align: left;}
    #boxProdejnaMozaika .box2 {width: 100%;padding: 15px 0 15px 0;text-align: left;}
    #boxProdejnaMozaika .box2 img {width: 75px;}

    #myConsentCookies {left: 0; bottom:0; border-radius: 0; box-shadow: 0 0px 20px rgba(0,0,0,.35); width:100%;}
    #myConsentCookies .boxTl {-ms-justify-content:space-between;justify-content:space-between;}
    #myConsentCookies .tlMin {margin-right:0;}
    /*****************************************************/
    @media only screen and (max-width: 550px) {
      .form_vzornik div.polozka {width: 48%;}
      .atributyVyroba span {width: 100%; background-size: auto 35px !important; padding-left: 70px;}
    }

    @media only screen and (max-width: 620px) {
      #boxPatickaAktuality, #boxPatickaUzitecneInformace {width: 100%}
      .tl span {padding: 5px 12px 5px;}
      .boxProdejnaFoto .boxProdejnaFotoPolozka {width: 100%;}

    }

  }

  /********** mini mobil **************/
  @media only screen and (max-width: 470px) {
    body {font-size: 75%;}
    .boxReference .strucnyPopis, .boxReference .fotky, .hlavniObsahLeft .box-submenu ul li {width: 100%;}

    #hlavniObsah { background-size: auto 180px;}
    .boxVypisZbozi .polozka .foto a {height: 90px;}
    .galerie-fotky .polozka {width: 31%; margin: 0 2% 2% 0;}
    #myConsentCookies .boxTl {padding: 20px 0 10px;}
    #myConsentCookies .tl {width: 100%; padding: 8px 12px; margin: 0 0 15px;}
  }


  @media only screen and (max-width: 400px) {
    .boxVypisZbozi .polozka .foto a {height: 70px;}
    .form_vzornik div.polozka {width: 98%;}
  }
  @media only screen and (max-width: 350px) {
    #boxFiltrySkupiny ul li {width: 100%; padding-right:0;}
  }
}
