@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;}
  
  #mainBanner .slide {height: 500px;}
}


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


@media only screen
and (max-width: 900px)
{
  .itemsFrame.home .itemFrame {width: calc(33.3333333% - (40px / 3)); margin: 10px 20px 10px 0;}
  .itemsFrame.home .itemFrame:nth-child(3n) {margin-right: 0;}
  
  #news .inner .item {width: calc(33.3333333% - (40px / 3)); margin: 10px 20px 10px 0;}
  #news .inner .item:nth-child(3n) {margin-right: 0;}
}


@media only screen
and (max-width: 800px)
{
  #mainBanner .slide {height: 400px;}
  
  #burger {display: block; width: 42px; height: 33px; position: relative; padding: 0; margin: auto 0 auto 0; background-color: #4593cf; line-height: 1; font-size: 18px; font-weight: 400;}
  #burger .text {width: 70px; height: 40px; margin-right: 44px; line-height: 40px; float: left; padding-left: 10px; color: #fff; text-transform: uppercase;}
  #burger .icon { width: 22px; position: absolute; top: calc(50% - 1px); right: 10px; transition: all .5s; }
  #burger.active .icon { width: 22px; background: transparent; }
  #burger .icon, #burger .icon:before, #burger .icon:after { height: 1px; background-color: #fff; }
  #burger .icon:before, #burger .icon:after { content: ""; width: 100%; position: absolute; left: 0; transition: all .5s; }
  #burger .icon:before { top: -7px; }
  #burger .icon:after { bottom: -7px; }
  #burger.active .icon:before { top: 0; transform: rotate(45deg); }
  #burger.active .icon:after { top: 0; transform: rotate(135deg); }
  
  #top .inner .right ul {display: none; position: absolute; z-index: 300; right: 0; top: 100%; min-width: 400px; background-color: #4593cf;}
  #top .inner .right ul li {margin: 5px 20px;}
  
  #menuMobile {width: 100%; float: left; position: relative; z-index: 1;}
  #menuMobile .menuMobileContent {}
  #menuMobile .menuMobileContent .btn {width: 100%; height: 40px; padding: 0 0 0 20px; border-top: 1px solid #ddd; *background-color: #999; color: #fff; font-weight: 600; align-items: center; justify-content: space-between;}
  #menuMobile .menuMobileContent .btn.active {background-color: #ac900f;}
  #menuMobile .menuMobileContent .btn A {width: 80%; *text-transform: uppercase;}
  #menuMobile .menuMobileContent .btn A.plusMinus {width: auto;}
  #menuMobile .menuMobileContent .btn.btnlvl2 {background-color: #eee; color: #666;}
  #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: #273c44; content: ""; width: 80%; position: absolute; left: 0; transition: all .5s; top: calc(50% - 1px);}
  #menuMobile .menuMobileContent .btn .plusMinus:AFTER {height: 3px; background-color: #273c44; 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: 300; font-size: 14px;}
  #menuMobile .menuMobileContent .btn .lvl3 {padding-left: 40px; font-style: italic; font-weight: 100; font-size: 13px;}   
  
  #catMenu .inner {justify-content: flex-end; flex-wrap: wrap;}
  #catMenu .inner ul {display: none;}
  #catBurger {}
  #catBurger {display: block; width: auto; height: 40px; float: right; position: relative; padding: 0 0 0 0; margin: 0 0 0 30px; *background-color: #AA9969; color: #fff; line-height: 1;}
  #catBurger .text {display: block; width: auto; height: 40px; margin-right: 40px; padding-left: 10px; line-height: 40px; font-size: 22px; font-weight: 400; text-transform: uppercase; color: #fff;}
  #catBurger .icon { width: 27px; position: absolute; top: calc(50% - 1px); right: 0px; transition: all .5s; }
  #catBurger.active .icon { width: 27px; background: transparent; }
  #catBurger .icon, #catBurger .icon:before, #catBurger .icon:after { height: 3px; background: #fff; }
  #catBurger .icon:before, #catBurger .icon:after { content: ""; width: 27px; position: absolute; left: 0; transition: all .5s; }
  #catBurger .icon:before { top: -8px; }
  #catBurger .icon:after { bottom: -8px; }
  #catBurger.active .icon:before { top: 0; transform: rotate(45deg); }
  #catBurger.active .icon:after { top: 0; transform: rotate(135deg); }
  
  #homeText .right {padding: 20px 30px;}
  
  .itemsCatFrame {flex-wrap: wrap;}
  .itemsCatFrame .item {width: calc(50% - (20px / 2)); margin: 5px 20px 5px 0;}
  .itemsCatFrame .item:nth-child(2n) {margin-right: 0;}
  
  .itemsFrame .itemFrame {width: calc(50% - (20px / 2)); margin: 5px 20px 5px 0;}
  .itemsFrame .itemFrame:nth-child(2n) {margin-right: 0;}
}


@media only screen
and (max-width: 700px)
{
  #header .inner {flex-wrap: wrap;}
  #header .inner .logo {width: 100%; text-align: center;}
  #header .inner .logo a {display: inline-block; padding: 15px 0 15px 0;}
  #header .inner .kosik {padding: 0 10px 10px 0;}
  
  #itemDetail .inner {flex-wrap: wrap; margin: 30px 0 0 0;}
  #itemDetail .inner .left {order: 2; width: 60%; margin: 10px 20%;}
  #itemDetail .inner .right {order: 1; width: 100%; margin: 10px 0;}
  
  #newsDetail .inner {flex-wrap: wrap; margin: 30px 0 0 0;}
  #newsDetail .inner .left {order: 2; width: 100%; margin: 10px 0;}
  #newsDetail .inner .right {order: 1; width: 100%; margin: 10px 0;}
}


@media only screen
and (max-width: 650px)
{
  .itemsCatFrame .item {width: 100%; margin: 5px 0 5px 0;}
  .itemsCatFrame .item:nth-child(2n) {margin-right: 0;}
  
  #catDetail .inner {flex-wrap: wrap;}
  #catDetail .inner .left {width: 100%; margin-right: 0;}
  #catDetail .inner .right {width: 100%;}
  #catDetail .inner .right h1 {display: none;}
  #catDetail .inner .right .itemsCatFrame {display: none;}
  
  #catDetail .inner .left .nadpis {display: block;}
  #catDetail .inner .left .filters .block .list {display: none;}
}


@media only screen
and (max-width: 600px)
{
  .itemsFrame.home .itemFrame {width: calc(50% - (20px / 2)); margin: 10px 20px 10px 0;}
  .itemsFrame.home .itemFrame:nth-child(3n) {margin-right: 20px;}
  .itemsFrame.home .itemFrame:nth-child(2n) {margin-right: 0;}
  
  #news .inner .item {width: calc(50% - (20px / 2)); margin: 10px 20px 10px 0;}
  #news .inner .item:nth-child(3n) {margin-right: 20px;}
  #news .inner .item:nth-child(2n) {margin-right: 0;}
  
  #homeText .left {display: none;}
  #homeText .right {width: 100%; padding: 40px 70px;}
  
  #bottomLinks .inner {padding: 20px 0; flex-direction: column; align-items: center; text-align: center;}
  #bottomLinks .inner h3:before {width: 100%; background-position: center top;}
  #bottomLinks .inner .col {margin: 30px 0;}
}


@media only screen
and (max-width: 500px)
{
  #mainBanner .slide {height: 250px;}
  
  #top .inner {align-items: center;}
  #top .inner .left {flex-direction: column;}
  #top .inner .left a {padding: 6px 24px;}
  #top .inner .right ul {width: 100%;}
  
  #top .inner .right ul {min-width: unset; width: 100%;}
  
  #newsDetail .inner .right h1 {font-size: 24px;}
  #itemDetail .inner .right h1 {font-size: 24px;}
  .tinymceCont h1 {font-size: 24px;}
}


@media only screen
and (max-width: 400px)
{
  .itemsFrame.home .itemFrame {width: 100%; margin: 5px 0 5px 0;}
  .itemsFrame.home .itemFrame:nth-child(3n) {margin-right: 0;}
  .itemsFrame.home .itemFrame:nth-child(2n) {margin-right: 0;}
  
  #news .inner .item {width: 100%; margin: 5px 0 5px 0;}
  #news .inner .item:nth-child(3n) {margin-right: 0;}
  #news .inner .item:nth-child(2n) {margin-right: 0;}
  
  #homeText .right {width: 100%; padding: 30px 20px;}
  
  .itemsFrame .itemFrame {width: 100%; margin: 5px 0;}
  
  #header .inner {justify-content: center;}
  #header .inner .doprava {margin-top: 15px;}
  #header .inner .kosik {margin-top: 15px;}
  
  #itemDetail .inner .left {width: 100%; margin: 10px 0;}
  #itemDetail .inner .right .doKosiku .btn {width: 100%; height: 44px; margin: 20px 0 0 0;}
  #itemDetail .inner .right .doKosiku .btn a {width: 100%; text-align: center; justify-content: center;}
}