@media only screen
and (max-width: 1200px)
{
  
}

@media only screen
and (max-width: 1100px)
{
}

  
@media only screen
and (max-width: 980px)
{
  * {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
  
  IMG {max-width: 100%; height: auto;}
  
  .mainFrame {width: 100%; padding: 0 5px;}
  
  #searchFrame {margin-top: 0;}
  #searchFrame INPUT[type=text] {width: calc(100% - 50px);}
  #searchFrame INPUT[type=submit] {width: 50px; background-position: center center;}
  
  #topFrame {width: 100%; height: auto; padding: 0;}
  #topFrame .col {width: 100%; height: auto;}
  #topFrame #logoFrame {width: 100%; text-align: center;}
  #topFrame #logoFrame A {float: none; height: 98px; display: inline-block;}
  
  #topFrame #kosikLoginFrame {width: 100%; height: auto; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  #topFrame #kosikLoginFrame .kosik {margin: 10px 0; width: 100%; text-align: center; background-image: none;}
  #topFrame #kosikLoginFrame .kosik A {padding-left: 30px; background-image: url('/images/kosik.png'); background-position: left; background-repeat: no-repeat;}
  
  #leftFrame .newsletterFrame .heading {width: 100%;}
  #leftFrame .newsletterFrame .body {width: 100%;}
  
  #content HR {width: 100%;}
  #content .floated {width: 100%;}
  
  #content .pagingFrame {width: 100%;}
  
  #contentFrame {width: 100%;}
  #content {width: calc(100% - 172px);}
  #content .navigFrame {width: 100%; text-align: left;}
  #content .itemsFrame {width: 100%; }
  #content .itemsFrame .itemFrame {width: 49%; height: auto; margin: 0 2% 20px 0; display: flex; flex-wrap: wrap; justify-content: center;}
  #content .itemsFrame .itemFrame:nth-child(2n) {margin-right: 0;}
  #content .itemsFrame .itemFrame .descFrame {width: 100%; height: auto;}
  #content .itemsFrame .itemFrame H3 {width: 100%;}
  #content .itemsFrame .itemFrame H3 A {width: 100%;}
  #content .itemsFrame .itemFrame .inner {width: 100%;}
  
  #content H2 {width: 100%;}
  
  #content .headingContainer {width: 100%;}
  #content .headingContainer H2 {width: 100%;}  
  #content .detailFrame {width: 100%;}
  #content .detailFrame .leftFrame {width: 100%;}
  #content .detailFrame .leftFrame .morePhotos {width: 100%;}  
  #content .detailFrame .rightFrame {width: 100%; padding: 20px 0 0 0;}
  #content .detailFrame .itemDescFrame {width: 100%;}
  #content .fb-like {width: 100%;}
  
  
  #kosikLoginFrame .loginFrame {position: relative; left: 0; top: 0; height: 49px;}
  #kosikLoginFrame .loginFrame.registrace {display: block;}
  
  #menuFrame {width: 100%;}
  
  #bannerFrame {display: none;}
  
  .filtr-vyrobcu {margin: 10px 0 20px 0;}
  
  #fullBottomFrame {height: auto; background-image: none; background-color: #5e5e60; padding: 0 10px 20px 10px;}
  #fullBottomFrame .bottomFrame1 {width: 100%; height: auto;}
  #fullBottomFrame .bottomFrame1 .facebook {float: none; margin: 20px auto;}
  #fullBottomFrame .bottomFrame1 .lightGray {width: 100%; height: auto;}
  #fullBottomFrame .bottomFrame1 .column {width: 100%; margin: 0; text-align: center;}
  #fullBottomFrame .bottomFrame2 {width: 100%; height: auto;}
  
  #content .nakupniKosik {width: 100%;}
  .contentMenu {width: 100%;}
  
  #content .radioButtonsContainer {width: 100%;}
  #content .radioLine {width: 100%;}
  
  #orderNavigFrame {display: flex; }
}

@media only screen
and (max-width: 800px)
{  
  /* Menu */
  #menu {display: none;}  
  #menuMobile {display: none; width: 100%; float: left; position: relative; z-index: 100;}
  #menuMobile .menuMobileContent {}
  #menuMobile .menuMobileContent .btn {width: 100%; height: 40px; padding: 0 0 0 20px; border-bottom: 1px solid #c6bdb3; background-color: #4b4b4d; color: #fff; align-items: center; justify-content: space-between;}
  #menuMobile .menuMobileContent .btn.category {background-color: #3d3d3f;}
  #menuMobile .menuMobileContent .btn A {width: 100%; color: #fff; text-decoration: none;}
  #menuMobile .menuMobileContent .btn A.plusMinus {width: auto;}
  #menuMobile .menuMobileContent .btn A.cat {font-weight: 700; text-transform: uppercase;}
  #menuMobile .menuMobileContent .btn.btnlvl2 {background-color: #2f2f31;}
  #menuMobile .menuMobileContent .btn.btnlvl3 {background-color: #232324;}
  #menuMobile .menuMobileContent .btn.btnlvl4 {background-color: #151516;}
  #menuMobile .menuMobileContent .btn.btnlvl5 {background-color: #080808;}
  #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: 2px; background-color: #fff; content: ""; width: 80%; position: absolute; left: 0; transition: all .5s; top: calc(50% - 1px);}
  #menuMobile .menuMobileContent .btn .plusMinus:AFTER {height: 2px; 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: 20px; font-style: italic; font-weight: 100; font-size: 13px;}
  #menuMobile .menuMobileContent .btn .lvl3 {padding-left: 40px; font-style: italic; font-weight: 100; font-size: 13px;}
  #menuMobile .menuMobileContent .btn .lvl4 {padding-left: 60px; font-style: italic; font-weight: 100; font-size: 13px;}
  #menuMobile .menuMobileContent .btn .lvl5 {padding-left: 80px; font-style: italic; font-weight: 100; font-size: 13px;}
    
  #hamburger {display: block; width: 100%; height: 40px; position: relative; padding: 0; margin: 0; *background-color: #f8902b; background-image: url('/images/menu-bg.jpg'); line-height: 1; font-size: 15px; font-weight: 700;}
  #hamburger .text {position: absolute; width: 70px; height: 40px; line-height: 40px; float: left; padding-left: 10px; color: #fff; text-transform: uppercase;}
  #hamburger .icon { width: 28px; position: absolute; top: calc(50% - 1px); right: 10px; transition: all .5s; }
  #hamburger.active .icon { width: 27px; background: transparent; }
  #hamburger .icon, .hamburger .icon:before, .hamburger .icon:after { height: 2px; background: #fff; }
  #hamburger .icon:before, .hamburger .icon:after { content: ""; width: 100%; position: absolute; left: 0; transition: all .5s; }
  #hamburger .icon:before { top: -8px; }
  #hamburger .icon:after { bottom: -8px; }
  #hamburger.active .icon:before { top: 0; transform: rotate(45deg); }
  #hamburger.active .icon:after { top: 0; transform: rotate(135deg); }
     
  #leftFrame {display: none;}
  
  #content {width: 100%; padding-left: 0;}  
  #content .itemsFrame {width: 100%;}
  #content .pagingFrame {width: 100%;}
  
  .formLine {width: 100%;}
  
  .g-recaptcha {margin-left: 0;}
  
  .overenozakaznikyMobile {width: 100%; height: auto; float: left; display: block; text-align: center; margin-top: 30px;}
  .overenozakaznikyMobile IMG {width: 150px;}
}

@media only screen
and (max-width: 700px)
{  
  .formLine .formRow {width: 100%; text-align: left;}
  .formLine .formInput {width: 100%;}
  .formLine .formSubmit {width: 100%; margin-left: 0;}
  
  TABLE {width: 100% !important;}
}

@media only screen
and (max-width: 500px)
{  
  #fullBottomFrame .bottomFrame1 .lightGray .columnYellow {width: 100%; display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; text-align: center;}
  #fullBottomFrame .bottomFrame1 .lightGray .columnYellow A {width: auto; float: none;}
  
  #fullBottomFrame .bottomFrame2 {display: flex; flex-direction: column; align-items: center;}
  #fullBottomFrame .bottomFrame2 .rights {margin: 0; text-align: center;}
  
  #orderNavigFrame {flex-wrap: wrap;}
  #orderNavigFrame .item {width: 50%; text-align: left; padding-left: 10px;}
  
  .contentMenu A {width: 100%; margin: 0 0 15px 0; text-align: center;}
  .contentMenu .floatR {width: 100%; margin: 0;}
}

@media only screen
and (max-width: 450px)
{
  #content .itemsFrame .itemFrame {width: 100%; margin-right: 0;}
}


