.wrapper  {
  width: 1000px;
  margin: 0 auto;
}
.wrapper-80 {
  width: 80%;
  margin: 0 auto;
  padding: 0 50px;
  max-width: 2560px;
}
.box-mobile-info, .onlyMobile {
  display: none;
}
/****************** *******************************************
 *		Desktop Full HD Layout: 1701px.                   *********
 **************************************************************		 */

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

  .wrapper {width: 1640px;}

  /************************************/
  #hlavniMenu {display: block !important; opacity: 1 !important;}
  .boxMotiv {background-position: center top -90px;}
  @media only screen and (max-width: 3500px) {
  }

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

  }

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


  }

  @media only screen and (max-width: 2100px) {
    body {font-size: 120%;}
    .uvod #logo {left: -34px; top: 40px;}
    .uvod #logo a {width: 430px;}
    .boxNovinky .boxNovinkyContentFlex::before {}

    .boxMotiv {background-position: center top;}
  }

}

@media only screen and (min-width: 1011px) and (max-width: 1900px) {
  body {font-size: 110%;}

  .desktopHidden {display: none;}
  .cleaner-desktop {clear: both;}

  .wrapper-80 {width: 100%; padding: 0 50px;}

  .uvod #logo {left: -34px; top: 40px;}
  .uvod #logo a {width: 420px;}
  .boxNovinky .boxNovinkyContentFlex::before {}
  #boxUvod .boxHlavniNadpis {font-size:90%;}


  /************************************/
  #hlavniMenu {display: block !important; opacity: 1 !important;}
  #boxMenuContent .boxSite li a {height: 35px;}

  @media only screen and (min-width: 1701px) and (max-width: 1900px) {
    .wrapper {width: 1600px;}
    .boxMotiv {min-height: 610px;}
  }


  @media only screen and (min-width: 1371px) and (max-width: 1700px) {
    .wrapper {width: 1320px;}

    .boxMotiv {min-height: 590px;}
    .uvod #logo {left: -30px; top: 20px;}
    .uvod #logo a {width: 350px;}
    .uvod header.hlavicka {height: 170px;}
    #boxUvod .boxHlavniNadpis {font-size:80%;}

    #paticka .linkVeterina {right: -50px;}

    #boxMenuContent > ul > li {padding: 0 15px;}

    #myConsentCookies_v2 {bottom: 5%; max-height: 95%;}
  }

  @media only screen and (min-width: 1011px) and (max-width: 1370px) {
    body {font-size: 100%;}

    h1, .hlavniNadpis {font-size: 200%;}
    h2 {font-size: 180%;}

    .uvod header.hlavicka {height: 140px;}
    header.navMin, .uvod header.navMin, .podstrana header.hlavicka {height: 100px;}
    #logo {left: 0;}
    #logo a, header.navMin #logo a {width: 170px;}
    .uvod #logo {left: -27px; top: 10px;}
    .uvod #logo a {width: 270px;}
    #boxUvod .boxHlavniNadpis {font-size:80%;}

    .boxMotiv {min-height: 500px;}

    .boxNovinky .boxNovinkyContentFlex::before {top: -180px;height: 230px;}

    .boxNovinky .boxNovinkyObsah {width: 80%;}

    #boxMenuContent > ul > li {padding: 0 10px;}
    #myConsentCookies_v2 {bottom: 5%; max-height: 95%;}

    #paticka .linkVeterina {
      width: 340px;
      height: 153px;
      background: transparent url(../layout/kopecek.webp) no-repeat center center;
      background-size: auto 100%;
      right: 0;
    }
    #paticka .linkVeterina a {width: 90px;}


    @media only screen and (max-width: 1200px) {
       body {font-size: 90%;}
      .boxMotiv {min-height: 420px;}
    }

    @media only screen and (max-width: 1100px) {
      #boxMenuContent .boxSite {margin: 0 0 0 5px;}

      .uvod header.hlavicka {height: 120px;}
      header.navMin, .uvod header.navMin, .podstrana header.hlavicka {height: 100px;}

      .uvod #logo a {width: 250px;}
      .uvod #logo {left: 0px; top: 10px;}
      .boxMotiv {min-height: 380px;}
      .boxNovinky .boxNovinkyContentFlex::before {top: -150px;height: 230px;}
      #boxUvod .boxHlavniNadpis {font-size:70%;width: 400px}

    }
  }


}




/****************** *******************************************
 *		Mobile/Tablet Layout                            *********
 **************************************************************		 */
@media only screen and (max-width: 1010px) {
  .wrapper, .wrapper-80, .patickaTop .boxSite, .patickaTop .boxInformace {
    width: 100%;
  }
  .cleaner-mobile {
    clear: both;
  }
  .box-mobile-info, .mobile-block {
    display: block;
  }
  .mobile-hidden, .mobileHidden, #hlavniMenuM div label, .patickaTop .boxMapa {
    display: none;
  }

  body {font-size: 100%;}

  h1, .hlavniNadpis {font-size: 200%;padding: 0 0 25px;}
  h2, .boxVrhyDetailInfo .boxVrhyDetailInfoItem .boxNadpis {font-size: 180%;}

  .wrapper, .wrapper-80, #hlavniObsah .wrapper  {padding: 0 30px;}


  #logo, header.navMin #logo {left: 10px;}
  #logo a, header.navMin #logo a, .uvod header.navMin #logo a {width: 110px;}

  .uvod #logo {left: 10px; top: 0;}
  .uvod #logo a {width: 150px;}
  .uvod header.hlavicka {height: 100px;}

  .uvod header.navMin {height: 70px;}

  .boxMotiv {min-height: 330px;}
  .boxMotiv .pageTitle {padding: 110px 0 2px;}

  /************************************/
  header.hlavicka .wrapper {padding:0; width: 98%;}
  header.hlavicka {height: 70px;position: fixed;top: 0;z-index: 200;}
  header.hlavicka #boxMenuContent > ul {line-height: 70px;}


  #boxMenuContent {text-align: left;}
  #boxMenuContent > ul {line-height: 70px; display: block;}
  #boxMenuContent > ul > li > a {padding: 5px 15px;}
  /************************************/
  #hlavniMenuM {position: absolute; right: 15px; top: 0px; height: 100%; border-radius: 0px; transition: .2s all ease; z-index: 154; display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-justify-content:center;justify-content:center;}
  #hlavniMenuM > div {width: 30px; height: 30px;cursor: pointer;text-align: center;display: block; position: relative; margin: auto;}
  #hlavniMenuM > div label {text-transform: uppercase;cursor: pointer;font-size: 80%;width: 100%;text-align: center;display: inline-block; display: none;}

  #hlavniMenuM .line {position: absolute; height: 4px; width: 100%; left: 0; right: 0; margin: auto; background-color: #fff; border: solid 2px #fff; transition: .2s all ease;}
  #hlavniMenuM .line1 {top: 0;}
  #hlavniMenuM .line2 {top: 0; bottom: 0;}
  #hlavniMenuM .line3 {bottom: 0;}

  .navMin #hlavniMenuM .line {background-color: #fff;}

  html.mobileNavActive {height: 100%;overflow: hidden;}
  body.mobileNavActive {height: 100%;overflow: auto;}
  .mobileNavActive #hlavniMenuM .line {background-color: #fff;}
  .mobileNavActive #hlavniMenuM .line2 {display: none;}
  .mobileNavActive #hlavniMenuM .line1 {transform: rotate(-45deg); top: 13px;}
  .mobileNavActive #hlavniMenuM .line3 {transform: rotate(45deg); top: 0px;}

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

  header.hlavicka #boxMenuContent > ul > li > a {text-shadow: none;}
  #hlavniMenu .content ul, .sf-menu ul {position: relative; width: 100%; left: 0 !important; top: 0 !important;box-shadow: none; padding: 0; border: none;}
  #hlavniMenu .content ul a {}
  #hlavniMenu .content ul ul.menu {padding: 0 0 20px;}
  #hlavniMenu .content ul ul li a {font-size: 110%; padding: 7px 0px 7px 40px; text-align: left;}
  #hlavniMenu .content ul li {display: block; padding: 0; width: 100%; border: none;}
  #hlavniMenu .content ul li a  {font-size: 180%; padding: 20px 20px; text-align: center; color: #fff; line-height: 170%; height: auto; border: none; display: block;}
  #hlavniMenu .content ul li.aktivni a, #hlavniMenu .content ul li a:hover, .sf-menu li li a:hover, .sf-menu li li a:active, .sf-menu li li.sfHover>a {}
  #hlavniMenu .content ul li, #hlavniMenu .content ul li a, .sf-menu ul  {background: transparent url();}
  #boxMenuContent > ul > li > a.aktivni, #boxMenuContent > ul li.aktivni > a {color: #fff !important;}
  #boxMenuContent > ul li.aktivni > a {font-weight: bold;}
  #boxMenuContent, header.navMin #boxMenuContent {padding: 70px 50px; height: auto;}

  #boxMenuContent {display: flex; align-items: center; min-height: 100%;}
  header.hlavicka #boxMenuContent > ul {height: auto; }

  #boxMenuContent > ul > li > a:hover, header.navMin #boxMenuContent > ul > li > a:hover {border-color: #fff;}
  #boxMenuContent > ul > li > a.aktivni, header.navMin #boxMenuContent > ul > li > a.aktivni {border-color: rgba(0,0,0,1);}

  #boxMenuContent .tlSipka {display: none;}

  #hlavicka .menuHlavicka {background-color: #000; color: #fff; padding: 0 25px; height: 70px; position: relative; display: none;}
  #hlavicka .menuHlavicka .nadpis {font-size: 130%; text-transform: uppercase;font-weight: bold; line-height: 70px;}

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

  #hlavniMenu .boxMenuContent2 {padding: 30px 0 0; width: 100%;}
  #hlavniMenu .boxMenuContent2 .boxSite {display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-justify-content:center;justify-content:center; margin: 0;}
  #hlavniMenu .boxMenuContent2 .boxSite li {padding: 0 10px; width: auto;}
  #hlavniMenu .boxMenuContent2 .boxSite a span {display: none;}
  #hlavniMenu .boxMenuContent2 .boxSite a {display: block; width: 40px; height: 40px;}
  #hlavniMenu .boxMenuContent2 .boxSite .ikoFacebook a {background: transparent url(../layout/site/facebook.webp) no-repeat center center; background-size: auto; background-size: auto 40px;}
  #hlavniMenu .boxMenuContent2 .boxSite .ikoYoutube a  {background: transparent url(../layout/ikoYoutube.webp) no-repeat center center; background-size: auto; background-size: auto 40px;}

  /************************************/
  .podstrana .boxZakladni {padding: 40px 0 20px;}
  .podstrana .boxZakladniPrvni {padding-top: 0;}

  #myConsentCookies_v2 {bottom: 0; max-height: 95%; width: 100%;}

  #boxUvod .boxHlavniNadpis {font-size: 50%; width: 40%;}

  .boxNovinky .boxNovinkyContentFlex::before {display: none;}

  .boxVrhyDetailInfo .boxVrhyDetailInfoItemOdd {padding: 0; width: 20%; margin-right: 0; -ms-justify-content:center;justify-content:center;}
  .boxVrhyDetailInfo .boxVrhyDetailInfoItem {width: 40%; margin-right: 0; padding: 20px 15px 20px;}
  .boxVrhyDetailInfo .boxVrhyDetailInfoItem .boxNadpis {font-size: 150%;}

  #paticka .patickaBottomLeft, #paticka .patickaBottomRight {width: 100%;}
  #paticka .linkVeterina {width: 200px;height: 90px;background: transparent url(../layout/kopecek.webp) no-repeat center center;background-size: auto 100%;right: 0;}
  #paticka .linkVeterina a {width: 44px;}
  #paticka .patickaBottomLeft {display: block;text-align: center;}
  #paticka .patickaBottomRight {max-width: 200px; margin: 0 auto;}

  @media (orientation: landscape) {


  }
  @media (orientation: portrait) {

  }

  /**************** tablet ***************************************************************/
  @media only screen and (min-width: 768px) and (max-width: 1010px) {
    .cleaner-tablet {
      clear: both;
    }
    .box-tablet-info, .tablet-block {
      display: block;
    }
    .tablet-hidden {
      display: none;
    }
    .tablet-upper {text-transform: uppercase;}
    /***************************************************/
    .boxNovinky .boxNovinkyObsah {width: 83%;padding: 0 0 0 5%;}

    /************************************/
    @media only screen and (max-width: 850px) {


    }
  }

  /*************  mobil  **************************************************************************************************/
  @media only screen and (max-width: 767px) {
    body {font-size: 95%;}
    div.text {text-align: left;}
    .onlyMobile {display: block;}

    #myConsentCookies_v2 {padding: 20px 20px 15px;}

    .wrapper, .wrapper-80, #hlavniObsah .wrapper  {padding: 0 20px;}

    div.p, p, address {padding: 0 0 15px;}
    h2 {margin: 0 0 15px;}
    h3 {padding: 0 0 15px;}
    ul {padding: 0 0 15px;}

    .tl .tlSipka {display: none;}

    .tl a, .tl span, .listSubmenu a, #paticka .tl a, input.submit, button.submit, .tlDalsiOdkazy a,
    .tl a:hover, .tl span:hover, .listSubmenu a:hover, input.submit:hover, button.submit:hover, #paticka .tl a:hover, .tlDalsiOdkazy a:hover {padding: 14px 35px 16px;}
    input.submit, button.submit {padding: 14px 35px;}

    #boxUvod .boxUvodLabel {bottom: 10%;}
    #boxUvod .boxHlavniNadpis {font-size: 45%;}

    .boxMotiv {min-height: 300px;}

    .boxNovinky {padding: 25px 0 0;}
    .boxNovinky .boxNovinkyNadpis {width: 100%;}
    .boxNovinky .boxNovinkyObsah {width: 100%; padding: 0}
    .boxNovinky .boxNovinkyNadpis br {display: none;}

    .boxNovinky .boxNovinkyFoto a, .boxNasiPsi .boxNasiPsiFoto a {border-width: 4px;}

    .boxVrhy .boxVrhyItem {width: 23%;}

    .boxVrhyDetailInfo .boxVrhyDetailInfoItem {padding: 15px 10px 15px;}

    /*****************************************************/
    @media only screen and (max-width: 650px) {

      h1, .hlavniNadpis {font-size: 170%;padding: 0 0 25px;}
      h2 {font-size: 150%;}
      h3 {font-size: 130%;}
      h4 {font-size: 110%;}

      .boxVrhyDetailInfo .boxVrhyDetailInfoItem .boxNadpis {font-size: 130%;}
      .boxVrhyDetailInfo .boxVrhyDetailInfoItem {width: 45%;}
      .boxVrhyDetailInfo .boxVrhyDetailInfoItemOdd {width: 10%; font-size: 150%;}

      .boxVrhy .boxVrhyItem {width: 31%;}
     }

    @media only screen and (max-width: 600px) {
     .boxNasiPsi {flex-direction: row-reverse; }
     .boxNasiPsi .boxNasiPsiText, .boxNasiPsi .boxNasiPsiFoto {width: 100%;}
     .boxNasiPsi .boxNasiPsiFoto {padding: 0 0 25px;}

     .boxNasiPsi .boxNasiPsiFoto .fotoDalsi, .boxNasiPsi .boxNasiPsiFoto .fotoDalsi:nth-of-type(4n+1) {margin: 0 3% 3% 0%;width: 31.3333%;}
     .boxNasiPsi .boxNasiPsiFoto .fotoDalsi:nth-of-type(3n+1) {margin-right: 0;}
    }

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

      .uvod header.hlavicka {height: 70px;}
      .uvod #logo a {width: 110px;}
      #boxUvod .boxHlavniNadpis span {font-size: 300%;}

      .boxVrhyDetailInfo .boxVrhyDetailInfoItemOdd {width: 10%; font-size: 120%;}

      #myConsentCookies_v2 .tl {padding: 6px 20px 8px;}
    }

  }

  /********** mini mobil **************/
  @media only screen and (max-width: 470px) {
    #paticka .linkVeterina {width: 200px;height: 90px;}
    #paticka .linkVeterina a {width: 44px;}
    #paticka .patickaBottomRight {max-width: 200px;}

    .boxVrhy .boxVrhyContent {-ms-justify-content: space-between;justify-content: space-between;}
    .boxVrhy .boxVrhyItem {width: 49%;margin-right: 0;}
  }


  @media only screen and (max-width: 400px) {
      body {font-size: 85%;}

      #boxUvod .boxHlavniNadpis {font-size: 40%;}
      #boxUvod .boxHlavniNadpis strong {padding: 0;}

      #paticka .linkVeterina {width: 150px;height: 67px;}
      #paticka .linkVeterina a {width: 36px; bottom: 10px;}
      #paticka .patickaBottomRight {max-width: 150px;}
  }
}