/* Zapni efekt POUZE na zařízeních, která mají myš / touchpad: */
@media (hover: hover) and (pointer: fine) {
  .dlazdiceList .item:hover .name {transform: translateX(100%);}
  .dlazdiceList .item:hover .desc {transform: translateX(0);}
  .dlazdiceList .item .content.name {transform: translateX(0);}
}



@media only screen
and (max-width: 1200px)
{
  .mainFrame {width: 100%; padding: 0 10px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}

  #banner .inner .bannerList .item .cover .photo {height: 500px;}
  #banner .inner .bannerList .item .cover .photo .text {}
  #banner .inner .bannerList .item .cover .photo .text .wrapper .name {font-size: 55px;}
  #banner .inner .bannerList .item .cover .photo .text .wrapper .popis {font-size: 22px;}
}



@media only screen
and (max-width: 1000px)
{
  #header .inner .menuFrame .menu {display: none;}

  /* Burger jako křížek */
  .burger {position: relative; width: 30px; height: 36px; padding: 0 10px; margin: 0 0 0 20px; cursor: pointer; z-index: 1100; border-radius: 20px; display: flex; flex-direction: column; justify-content: center;}
  .burger span {height: 4px; width: 100%; margin: 2px 0; background: #4d4c4e; border-radius: 2px; transition: 0.3s ease; transform-origin: center;}
  .burger.active span:nth-child(1) {transform: rotate(45deg) translate(5px, 5px);}
  .burger.active span:nth-child(2) {opacity: 0;}
  .burger.active span:nth-child(3) {transform: rotate(-45deg) translate(6px, -6px);}

  #menuMobileFrame {display: flex;}

  #menuMobile {width: 450px; position: absolute; z-index: 99999; right: 0; top: calc(100%); background-color: #4d4c4e;}
  #menuMobile .menuMobileContent {}
  #menuMobile .menuMobileContent .btn {width: 100%; height: auto; padding: 0 0 0 20px; border-bottom: 1px solid #6f6f6f; color: #fff; font-weight: 700; align-items: center; justify-content: space-between;}
  #menuMobile .menuMobileContent .btn.active {}
  #menuMobile .menuMobileContent .btn.active a {text-decoration: underline;}
  #menuMobile .menuMobileContent .btn A {width: 80%; text-transform: uppercase; padding: 10px 0; line-height: 1.2; font-weight: 700; font-size: 16px; background-color: #4d4c4e; background-image: none;}
  #menuMobile .menuMobileContent .btn A.plusMinus {width: auto;}
  #menuMobile .menuMobileContent .btn.btnlvl2 {background-color: #6f6f6f; color: #fff; border-bottom: 1px solid #4d4c4e;}
  #menuMobile .menuMobileContent .btn.btnlvl2 a {background-color: #6f6f6f; text-transform: none;}
  #menuMobile .menuMobileContent .btn .plusMinus {position: relative; margin: 0px 10px 0px; min-height: 40px; justify-content: flex-start; padding: 0px 8px;}
  #menuMobile .menuMobileContent .btn .plusMinus:BEFORE {height: 3px; background-color: #fff; content: ""; width: 80%; position: absolute; left: 0; transition: all .5s; top: calc(50% - 1px);}
  #menuMobile .menuMobileContent .btn .plusMinus:AFTER {height: 3px; background-color: #fff; content: ""; width: 80%; position: absolute; left: 0; transition: all .5s; top: calc(50% - 1px); transform: rotate(90deg); opacity: 1;}
  #menuMobile .menuMobileContent .btn .plusMinus.minus::BEFORE {transform: rotate(180deg);}
  #menuMobile .menuMobileContent .btn .plusMinus.minus::AFTER {transform: rotate(360deg); opacity: 0;}
  #menuMobile .menuMobileContent .btn .lvl2 {padding-left: 10px; font-weight: 600; font-size: 14px; font-size: 16px;}
  #menuMobile .menuMobileContent .btn .lvl3 {padding-left: 40px; font-style: italic; font-weight: 100; font-size: 13px;}


  #items .item .tip {top: 55px; right: 10px;}


  #bannerPhoto {height: 200px;}
}


@media only screen
and (max-width: 800px)
{
  #catMenu .link {display: flex; width: 100%; justify-content: center;}
  #catMenu .link a {font-size: 18px; font-weight: 700;}
  #catMenu .list {display: none;}

  /* Burger jako křížek */
  .catBurger {position: relative; width: 30px; height: 36px; padding: 0 10px; margin: 4px 0 4px 10px; cursor: pointer; z-index: 1100; border-radius: 20px; display: flex; flex-direction: column; justify-content: center;}
  .catBurger {background-image: url("/images/cat-burger.png"); background-repeat: no-repeat; background-position: center;}
  .catBurger span {display: none; height: 4px; width: 100%; margin: 2px 0; background: #ffffff; border-radius: 2px; transition: 0.3s ease; transform-origin: center;}
  .catBurger.active span:nth-child(1) {transform: rotate(45deg) translate(5px, 5px);}
  .catBurger.active span:nth-child(2) {opacity: 0;}
  .catBurger.active span:nth-child(3) {transform: rotate(-45deg) translate(6px, -6px);}

  #catMenuMobileFrame {display: flex; flex-wrap: wrap;}
  #catMenuMobileFrame span.title {display: flex; align-items: center; margin: 0 0 0 10px; font-size: 20px; font-weight: 700;}
  #catMenuMobile {display: none; width: 100%; position: relative; z-index: 10; right: 0; top: calc(100%); background-color: #4d4c4e;}
  #catMenuMobile .menuMobileContent {}
  #catMenuMobile .menuMobileContent .btn {width: 100%; height: auto; padding: 0 0 0 20px; border-bottom: 1px solid #6f6f6f; color: #fff; font-weight: 700; align-items: center; justify-content: space-between;}
  #catMenuMobile .menuMobileContent .btn.active {}
  #catMenuMobile .menuMobileContent .btn.active a {text-decoration: underline;}
  #catMenuMobile .menuMobileContent .btn A {width: 80%; text-transform: uppercase; padding: 10px 0; line-height: 1.2; font-weight: 700; font-size: 16px;}
  #catMenuMobile .menuMobileContent .btn A.plusMinus {width: auto;}
  #catMenuMobile .menuMobileContent .btn.btnlvl2 {background-color: #6f6f6f; color: #fff; border-bottom: 1px solid #4d4c4e;}
  #catMenuMobile .menuMobileContent .btn.btnlvl2 a {text-transform: none;}
  #catMenuMobile .menuMobileContent .btn .plusMinus {position: relative; margin: 0px 10px 0px; min-height: 40px; justify-content: flex-start; padding: 0px 8px;}
  #catMenuMobile .menuMobileContent .btn .plusMinus:BEFORE {height: 3px; background-color: #fff; content: ""; width: 80%; position: absolute; left: 0; transition: all .5s; top: calc(50% - 1px);}
  #catMenuMobile .menuMobileContent .btn .plusMinus:AFTER {height: 3px; background-color: #fff; content: ""; width: 80%; position: absolute; left: 0; transition: all .5s; top: calc(50% - 1px); transform: rotate(90deg); opacity: 1;}
  #catMenuMobile .menuMobileContent .btn .plusMinus.minus::BEFORE {transform: rotate(180deg);}
  #catMenuMobile .menuMobileContent .btn .plusMinus.minus::AFTER {transform: rotate(360deg); opacity: 0;}
  #catMenuMobile .menuMobileContent .btn .lvl2 {padding-left: 10px; font-weight: 600; font-size: 14px; font-size: 16px;}
  #catMenuMobile .menuMobileContent .btn .lvl3 {padding-left: 40px; font-style: italic; font-weight: 100; font-size: 13px;}


  #dlazdice .inner {flex-direction: column;}
  #dlazdice .inner .left {width: 100%;}
  #dlazdice .inner .left h2 {padding: 26px 0 0 0; font-size: 32px; font-weight: 900;}
  #dlazdice .inner .left .text {padding: 0;}
  #dlazdice .inner .right {width: 100%;}

  .dlazdiceList .item {width: calc(25% - 15px);}
  .dlazdiceList .item:nth-child(2n) {margin-right: 20px;}
  .dlazdiceList .item:nth-child(4n) {margin-right: 0;}


  #realization .inner .text h2 {padding: 26px 0 0 0; font-size: 32px; font-weight: 900;}


  #homeText .inner h1 {padding: 26px 0 0 0; font-size: 32px; font-weight: 900;}


  #cisla .inner .item .number {font-size: 42px;}


  #news .inner .text h2 {padding: 26px 0 0 0; font-size: 32px; font-weight: 900;}


  #news .inner .list .item {width: calc(50% - 10px);}
  #news .inner .list .item:nth-child(2n) {margin-right: 0;}


  #partner .inner .text h2 {padding: 26px 0 0 0; font-size: 32px; font-weight: 900;}


  #items .item {width: calc(50% - 15px); margin: 15px 30px 15px 0;}
  #items .item:nth-child(3n) {margin: 15px 30px 15px 0;}
  #items .item:nth-child(2n) {margin-right: 0;}
}


@media only screen
and (max-width: 700px)
{
  #cisla .inner {width: calc(100% - 40px); margin: 0 20px; justify-content: space-between;}
  #cisla .inner .item {margin: 0;}


  .dlazdiceList .item {width: calc(50% - 10px);}
  .dlazdiceList .item:nth-child(2n) {margin-right: 0;}


  #realization .inner .list .item {width: calc(50% - 10px);}
  #realization .inner .item:nth-child(2n) {margin-right: 0;}
}


@media only screen
and (max-width: 600px)
{
  #banner .inner .bannerList .item .cover .photo {height: 300px;}
  #banner .inner .bannerList .item .cover .photo .text {}
  #banner .inner .bannerList .item .cover .photo .text .wrapper {padding: 30px; border-radius: 40px;}
  #banner .inner .bannerList .item .cover .photo .text .wrapper .name {font-size: 26px;}
  #banner .inner .bannerList .item .cover .photo .text .wrapper .popis {font-size: 16px;}


  .webform {width: 100%; margin: 0;}
}


@media only screen
and (max-width: 500px)
{
  #homeText {padding: 40px 0 0 0;}

  #cisla .inner {width: 100%; margin: 0; flex-direction: column; align-items: center;}
  #cisla .inner .item {margin: 25px 0;}

  #header .inner .poptavka {flex-direction: column; align-items: flex-end; justify-content: center;}
  #header .inner .poptavka a.poptavkaBtn {display: none;}

  #menuMobile {width: 100%;}
  #menuMobileFrame {margin: 0;}

  #bannerPhoto {display: none;}

  #items .item {width: 100%; margin: 10px 0;}
  #items .item:nth-child(3n) {margin-right: 0;}
  #items .item:nth-child(2n) {margin-right: 0;}

  #news .inner .list .item {width: 100%; margin: 10px 0;}
}


@media only screen
and (max-width: 400px)
{
  #realization .inner .list .item {width: 100%; margin: 5px 0;}
  #realization .inner .item:nth-child(2n) {margin-right: 0;}
}