.wrapper {width: 1000px;margin: 0 auto;}

.box-mobile-info {display: none;}

@media only screen and (min-width: 1551px) {
  .desktopHidden {display: none;}
  .cleaner-desktop {clear: both;}

  .wrapper {width: 1200px;}
 /************************************/
  #hlavniMenu {display: block !important;}
}

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

  #hlavniMenu {display: block !important;}
  body {font-size: 90%; background-position: right -200px top 95px;}

  #logo img {width: 82px; height: auto;}
  #logo a .content {left: 96px;}

  #hlavicka {height: 95px;}
  #boxRychlyKontakt {padding: 95px 0 0 ;}

  #hlavniMenu {top: 18px;}
  #boxMenuContent {padding: 0 30px;}
  #boxMenuContent > ul > li {padding: 0 13px;}
  #boxMenuContent > ul > li > a {font-size: 100%;}
  .sf-menu li li a {padding:9px 0 9px 13px}

  .boxZuzenyText .wrapper {padding: 0 0px;}

  .boxDlazdice #boxAktuality {width: 550px;}
  .boxDlazdice #boxOznameni {width: 430px;}
  #boxOznameni .obrazek {width: 105px;}
  #boxAktuality .boxContent h2 {width: 410px;}
  #boxOznameni .boxUredniDeska .datum {width: 90px;}
  #boxOznameni .boxUredniDeska h3 {width: 300px;}
  #boxAktuality .boxAktualityPolozkaObsah {width: 395px;}

  .galerie-fotky .polozka, .galerie-fotky .fotkyMene .polozka:last-of-type {width: 180px; height: 180px;}
  .galerie-fotky .polozkaDalsi a {padding-top: 68px;}

  #foto-clanku .polozka {width: 318px; height: 318px;}

  #boxOdkazy .polozka {height: 80px;}
  #boxOdkazy .polozka img {width: auto; height: 80px;}

  #paticka .patickaTop .boxInformace {width: 480px;}
  #paticka .patickaTop .boxGalerie .polozka {width: 150px; height: 150px;}
  #paticka .patickaTop .boxGalerie {width: 485px;}

  .boxDokumentyPolozka .boxDokumentyPolozkaInfo {width: 240px;}
  .boxDokumentyPolozka .boxDokumentyPolozkaNadpis {width: 758px;}
  .box-odpady-polozka .odpady-obsah {width: 830px;}
  #boxPrehledAktualit h2 {width: 900px;}
  #boxPrehledAktualit .boxAktualityPolozkaObsah {width: 835px;}
}

/****************** *******************************************
 *		Tablet/mobile Layout           *********   ****************************************************************
 **************************************************************		 */
@media only screen and (max-width: 1000px) {
  .wrapper, .boxDlazdice #boxAktuality, .boxDlazdice #boxOznameni, #paticka .patickaTop .boxInformace, .boxDokumentyPolozka .boxDokumentyPolozkaNadpis, .boxDokumentyPolozka .boxDokumentyPolozkaInfo {
    width: 100%;
  }
  .cleaner-mobile {
    clear: both;
  }
  .box-mobile-info, .mobile-block {
    display: block;
  }
  .mobile-hidden, #hlavicka .menuHlavicka .zavrit span, #boxMenuLeft, #boxMenuRight, #boxNejnovejsiGalerie .fotky, #boxPrehledGalerii .fotky, #boxNejnovejsiGalerie .cleaner, #paticka .patickaTop .boxGalerie {
    display: none;
  }
  .wrapper {padding: 0 7px;}
  body {font-size: 90%; background-position: center top 70px; background-size: auto 240px;}

  #logo {left: 12px;}
  #logo img {width: 65px; height: auto;}
  #logo a .content {left: 80px; top: 10px; line-height: 130%;}
  #logo a .content .nazev1 {font-size: 170%;}
  #logo a .content .nazev2 {font-size: 90%;}

  #hlavicka {height: 70px;}

  #hlavniMenuM {height: 56px; margin: 0; background-color: #fff; display: block; position: absolute; top: 0px; bottom: 0; right: 0; padding: 0 10px;}
  #hlavniMenuM div {cursor: pointer; text-align: center; height: 38px; margin: 16px auto 0; padding: 9px;}
  #hlavniMenuM label {color: #000;cursor: pointer;padding: 0 0 0 7px;position: relative;text-transform: uppercase;top: -4px;font-size: 110%;}
  #hlavniMenuM div img {width: 20px; height: 20px;}

  #hlavniMenu {background-color: #fff; position: fixed; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 5px 5px 25px rgba(0,0,0, 0.3); overflow: auto; z-index: 400; right: 0;}
  #hlavniMenu .content ul, .sf-menu ul {display: block; position: relative; width: 100%; left: 0 !important; top: 0 !important;}
  #hlavniMenu .content ul a {background-color: #eee;}
  #hlavniMenu .content ul ul li a {background-color: #fff; font-size: 90%; padding: 5px 25px;}
  #hlavniMenu .content ul li {display: block; padding: 0; width: 100%;}
  #hlavniMenu .content ul li a  {font-size: 100%; padding: 5px 15px; border-top: solid 1px #f5f5f5; color: #000;  line-height: 170%; height: auto;}
  #hlavniMenu .content ul li.aktivni a, #hlavniMenu .content ul li a:hover {color: #1b1b1b;}

  #boxMenuContent {background: #fff url(); padding: 0 0 20px; height: auto;}

  #hlavicka .menuHlavicka {background-color: #111; color: #fff; padding: 0 15px; line-height: 64px;}
  #hlavicka .menuHlavicka .zavrit {position: absolute; right: 15px; top: 23px; 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;}

  .boxDlazdice #boxAktuality, #boxOznameni .boxNejblizsiAkce {margin: 0 0 25px;}

  .boxDokumentyPolozka .boxDokumentyPolozkaInfo strong {display: inline; width: auto;}
  .boxDokumentyPolozka .boxDokumentyPolozkaInfo {padding-top: 5px}

  .boxGalerieDetail .boxGalerie a {width: 100%;height: auto;margin: 0 0 3%;}
  .boxGalerieDetail .boxGalerie {grid-template-columns: repeat(auto-fill, 24%);}

  #boxNejnovejsiGalerie {margin: 0 20px; padding: 20px 0;}
  #boxNejnovejsiGalerie .boxGalerie { margin: 0;}
  #boxNejnovejsiGalerie h2 {position: relative;top: 0; background-color: #fff; height: auto; line-height: 120%; padding: 0;}
  #boxNejnovejsiGalerie h2 a {color: #000;}
  #boxNejnovejsiGalerie .caption {padding: 0}

  #foto-clanku .polozka {width: 32%; height: auto; margin: 0 2% 5px 0;}

  #paticka .patickaTop .boxInformace .boxLeft, #paticka .patickaTop .boxInformace .boxRight {width: 45%}
  #paticka .patickaTop .boxInformace .boxRight {margin: 0 0 0 10%;}
}
  /**************** 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;
    }
    .tablet-upper {text-transform: uppercase;}
    .wrapper {padding: 0 20px;}
    .boxZakladni {padding: 0 0 30px;}
    .boxDlazdice {padding-top: 10px;}
    #boxRychlyKontakt .wrapper {height: 180px;}

    #boxAktuality .boxContent h2, #boxOznameni .boxUredniDeska h3 {width: 580px;}
    #boxAktuality .boxAktualityPolozkaImg, #boxOznameni .obrazek, .box-odpady-polozka .odpady-foto, #boxPrehledAktualit .boxAktualityPolozkaImg {width: 15%;}
    #boxAktuality .boxAktualityPolozkaObsah, #boxOznameni .obsah, .box-odpady-polozka .odpady-obsah, #boxPrehledAktualit .boxAktualityPolozkaObsah {width: 83%;}

    #boxOdkazy .polozka {height: 60px;}
    #boxOdkazy .polozka img {width: auto; height: 60px;}

    #boxRychlyKontakt {padding: 70px 0 0 ;}
    #boxRychlyKontakt .content {margin: 20px 20px 0 auto; width: 300px;}
    #boxRychlyKontakt .content .boxBottom, #boxRychlyKontakt .content .boxTop {height: auto; padding: 10px 0 10px 20px;}

    #boxPrehledAktualit h2 {width: 620px;}
    .boxKontakt .boxRight {padding: 10px 20px 0 0;}

    #boxProjekty .boxZakladniContent .polozka {padding: 20px;}
  }


  /*************  mobil  **************************************************************************************************/
  @media only screen and (max-width: 767px) {
    body {font-size: 90%;}

    #boxRychlyKontakt .content, .galerie-fotky .boxGaleriePolozka ul {display: none;}
    #boxAktuality .boxContent h2, #boxAktuality .boxContent .datum, #boxOznameni .boxUredniDeska h3, #boxOznameni .boxUredniDeska .datum, #boxPrehledAktualit .datum, #boxPrehledAktualit h2,
    .boxKontakt .boxLeft, .boxKontakt .boxRight, .boxGalerieDetail .boxLeft, .boxGalerieDetail .boxRight {width: 100%;}

    .boxDlazdice .nadpis, .boxNadpis h1, .boxDokumentyPolozka .boxDokumentyPolozkaInfo, .boxDokumentyPolozka .boxDokumentyPolozkaNadpis {padding-left: 7px; padding-right: 7px;}
    div.text-justify {text-align: left;}
    .podstrana h1 {margin: 0 0 25px;}
    .boxZakladni {padding: 0 0 30px;}
    body {background-size: auto 190px;}
    #boxRychlyKontakt {padding: 70px 0 0;}
    #boxRychlyKontakt .wrapper {height: 150px;}
    .boxDlazdice .wrapper {padding: 0;}
    .boxDlazdice .boxContent {padding-left: 7px; padding-right: 7px;}
    .boxOLoucce {padding: 20px 0;}
    #boxAktuality .boxAktualityPolozkaImg, #boxOznameni .obrazek, .box-odpady-polozka .odpady-foto, #boxPrehledAktualit .boxAktualityPolozkaImg {width: 10%;}
    #boxAktuality .boxAktualityPolozkaObsah, #boxOznameni .obsah, .box-odpady-polozka .odpady-obsah, #boxPrehledAktualit .boxAktualityPolozkaObsah {width: 88%;}

    #boxAktuality .boxContent h2, #boxPrehledAktualit h2 {padding: 0;}
    #boxAktuality .boxContent .datum, #boxPrehledAktualit .datum {text-align: left; padding: 0 0 10px;}

    #boxOznameni .boxUredniDeska .datum, #boxPrehledAktualit .datum {text-align: left;}

    #boxNejnovejsiGalerie {margin: 0;}

    .boxGalerieDetail .boxGalerie {grid-template-columns: repeat(auto-fill, 32%);}

    #boxOdkazy .polozka {height: 50px;}
    #boxOdkazy .polozka img {width: auto; height: 50px;}

    .boxKontakt .boxRight {padding: 0 7px;}
    .boxGalerieDetail .boxRight .tl {text-align: left;}

    #paticka .patickaTop {padding: 30px 0 20px;}

    #boxProjekty {background-color: #fff; margin: 0 0 20px;}
    #boxProjekty .boxZakladniContent .polozka {padding: 20px 0 0; border-bottom: solid 3px #eee; margin: 0;}
    #boxProjekty .boxZakladniContent .polozka:last-of-type {border: none;}

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

  /********** stredni mobil **************/
  @media only screen and (max-width: 580px) {
    #boxOdkazy .polozka {height: 40px;}
    #boxOdkazy .polozka img {width: auto; height: 40px;}

    #paticka .patickaTop .boxInformace .boxLeft, #paticka .patickaTop .boxInformace .boxRight {width: 47%}
    #paticka .patickaTop .boxInformace .boxRight {margin: 0 0 0 6%;}
  }
  /********** maly mobil **************/
  @media only screen and (max-width: 480px) {
    body {font-size: 85%; background-size: auto 110px;}
    #boxOdkazy {display: none;}
    div.strankovani b, div.strankovani a, div.strankovani span {display: block; width: 30%; margin: 0 auto 5px;}
    .boxGalerieDetail .boxGalerie {grid-template-columns: repeat(auto-fill, 48.5%);}

    .boxDlazdice .nadpis, .boxNadpis h1 {line-height: 220%; height: auto;}
    #boxRychlyKontakt .wrapper {height: 86px;}

    #myConsentCookies .boxTl {padding: 15px 0 10px;}
    #myConsentCookies .tl {width: 100%; padding: 8px 12px; margin: 0 0 15px;}
  }

  /********** mini mobil **************/
  @media only screen and (max-width: 400px) {
     #paticka .patickaTop .boxInformace .boxRight {display: none;}
    #paticka .patickaTop .boxInformace .boxLeft {width: 100%;}
    #logo img {width: 60px;}
    #logo a .content .nazev1 {font-size: 150%;}
    #logo a .content {left: 70px;}
  }