@media screen
and (min-width: 1201px)
{
  .mainFrame { width: 1200px; }
  
  .itemsFrame .itemFrame { width: calc(25% - 22.5px); margin: 15px 30px 15px 0px; }
  .itemsFrame .itemFrame:nth-child(4n+4) { margin-right: 0px; }
  .filtrCont .itemFrame { width: calc(25% - 22.5px); }
}

@media screen
and (max-width: 1200px)
{
  * { box-sizing: border-box; }
  
  #skladem .items .item .data .cena {width: 130px;}
  #skladem .items .item .data .ks {width: 130px;}
  #skladem .items .item .data .cnt {width: 130px; padding-right: 10px;}
  
  .mainFrame { width: 100%; float: left; padding-right: 5%; padding-left: 5%; }
  
  #topFrame .logoFrame .mainText H2 { font-size: 45px; }
  #topFrame .logoFrame .mainText H3 { font-size: 25px; }
        
  #mainCatsFrame .cat .bookmark { max-width: 95%; background-position: right center; background-size: cover; }
  
  .itemsFrame .itemFrame,
  .filtrCont .itemFrame { margin: 15px 0 15px 0px; }
}

@media screen 
and (min-width: 841px) 
and (max-width: 1200px)
{
  .itemsFrame .itemFrame { width: 31.66%; margin: 15px 0 15px 0px; }
  .itemsFrame .itemFrame:not(:nth-child(3n)) { margin-right: 2%; }
  .filtrCont .itemFrame { width: 31.66%; }
}

@media screen and (min-width: 1001px)
{
  #mainCatsFrame .cat .bookmark { left: -300px; }
}

@media screen
and (max-width: 1000px)
{
  #skladem .items .item .data {flex-wrap: wrap; justify-content: space-between;
  }}
  #skladem .items .item .data .name {width: 100%; flex: unset; padding: 20px 20px;}
  
  #topFrame { height: calc(100vh - 90px); }
    #topFrame .mainFrame { position: relative; }
      #topFrame .logo { width: 350px; height: 225px; margin: 0; background-image: url("/images/logo-400.png"); background-size: cover; background-position: center; }  
      #topFrame .logoFrame .mainText H2 { line-height: 1.1; font-size: 40px; }
      #topFrame .logoFrame .mainText H3 { font-size: 22px; }
      #topFrame .logoFrame .mainText .button { padding: 15px 40px 17px 40px; font-size: 22px; }
      #menuFrame,
      #menuFrame UL,
      #menuFrame UL LI,
      #menuFrame UL LI A { height: 90px; }
        #menuFrame UL LI A { padding-right: 15px; padding-left: 15px; line-height: 90px; }
      #menuFrame .langs { height: 90px; line-height: 90px; }
}

@media screen
and (min-width: 841px)
and (max-width: 1000px)
{
  #topFrame .phone { margin-right: 21px; }
  #topFrame .email { position: absolute; top: 50px; right: 5%; margin: 0; }
  
  #mainCatsFrame .cat .bookmark { left: -280px; padding-right: 40px; }
    #mainCatsFrame .cat .bookmark H2 { margin-top: 10px; font-size: 25px; }
    #mainCatsFrame .cat .bookmark IMG { height: 45px; }
}

@media screen
and (min-width: 841px)
{
  .menu-button { display: none; }
  #menuFrame UL LI A.on, #menuFrame UL LI A:HOVER {background-image: url('/images/menu-arrow.png'); background-position: center bottom; background-repeat: no-repeat;}
  
  #mainCatsFrame .cat:HOVER .bookmark {left: 0px;}
  
  .fullBlueFrame .col:not(:last-child) { max-width: 30%; }
  .fullBlueFrame .col:last-child { width: 230px; text-align: right; }
}

@media screen
and (max-width: 840px)
{
  #topFrame { height: calc(100vh - 60px); }
    #topFrame .watchword { width: 100%; margin-bottom: 15px; background-position: center; background-repeat: no-repeat; }
    #topFrame .email { float: left; margin-right: 0; }
    #topFrame .watchword { width: 100% !important; background-position: center; }
    #topFrame .arrow { width: 50px; height: 50px; right: 25px; bottom: 25px; background-image: url("/images/arrow-50.png"); }
    #topFrame .logoFrame { height: calc(100% - 70px); flex-direction: column; justify-content: center; }
      #topFrame .logo { margin-bottom: 15px; }
    #menuFrame .langs { height: 60px; float: left; line-height: 60px; font-size: 15px; }
    .menu-button { height: 60px; position: relative; float: right; padding-right: 55px; line-height: 60px; cursor: pointer; }
      .menu-button .label { text-transform: uppercase; font-size: 18px; font-weight: 800; color: #fff; }
      .menu-button .icon { width: 30px; position: absolute; top: calc(50% - 2.5px); right: 2.5%; }
      .menu-button .icon,
      .menu-button .icon:before,
      .menu-button .icon:after { height: 5px; background-color: #fff; }
      .menu-button .icon:before,
      .menu-button .icon:after { content: ""; width: 100%; position: absolute; left: 0; }
      .menu-button .icon:before { top: -10px; }
      .menu-button .icon:after { bottom: -10px; }
    #menuFrame,
    #menuFrame UL,
    #menuFrame UL LI,
    #menuFrame UL LI A { height: 60px; }
    #menuFrame { position: relative; }
      #menuFrame UL { width: 100%; height: auto; display: none; position: absolute; top: 100%; left: 0; background-color: #29357e; }
        #menuFrame UL LI,
        #menuFrame UL LI A { width: 100%; height: 40px; float: left; line-height: 40px; }
        #menuFrame UL LI { font-size: 15px; border-top: 1px rgba(255,255,255,.2) solid; }
          #menuFrame UL LI A { padding-right: 5%; padding-left: 5%; }
          #menuFrame UL LI A.on, #menuFrame UL LI A:HOVER { background-color: rgba(255,255,255,.1); }
          
  #mainCatsFrame { display: block; }
    #mainCatsFrame .cat { width: 100%; height: 250px; float: left; margin-right: 0; background-size: cover; } 
    #mainCatsFrame .cat:first-child { margin-bottom: 15px; }
      #mainCatsFrame .cat .bookmark { top: calc(50% - 72px); }
      
  #content { padding: 40px 0; }
  .fullGrayFrame,
  .fullWhiteFrame { padding: 60px 0; }
      
  .fullGrayFrame .flex,
  .fullWhiteFrame .flex { display: block; }
    .fullGrayFrame .left,
    .fullGrayFrame .right,
    .fullWhiteFrame .left,
    .fullWhiteFrame .right { width: 100%; float: left; }
    .fullGrayFrame .left,
    .fullWhiteFrame .left { margin-bottom: 15px; padding: 0; }
                                     
  .fullGreenFrame { height: auto; padding: 60px 0; background-size: cover; }
    .fullGreenFrame .flex { flex-wrap: wrap; }
      .fullGreenFrame .icon { flex-basis: 50%; margin-right: 0; padding-top: 150px; }
      .fullGreenFrame .icon:not(:nth-child(-n + 2)) { margin-top: 35px; }
      
  .fullBlueFrame .flex { flex-wrap: wrap; justify-content: center; }
  .fullBlueFrame .col:not(:last-child) { width: 50%; }
  .fullBlueFrame .col:last-child { margin-top: 35px; text-align: center;}
  
  .filtrCont .itemFrame { margin-right: 0; }
  
  .detailLeftFrame { width: 200px; }
  .detailRightFrame { width: calc(100% - 230px); }
  .detailRightFrame .button { padding: 10px 25px 12px 25px; font-size: 14px; }
}

@media screen
and (max-width: 800px)
{
  #newsFrame .inner .data-list .item {width: calc(50% - 20px);}
  #newsFrame .inner .data-list .item:nth-child(4n) {margin-right: 40px;}
  #newsFrame .inner .data-list .item:nth-child(2n) {margin-right: 0;}
}

@media screen
and (max-width: 750px)
{
  #skladem .items .item {margin: 15px 0;}
  #skladem .items .item .data .cnt {margin-left: auto; margin-top: 10px; padding-bottom: 10px;}
}

@media screen
and (max-width: 700px)
{
  #skladem .form {flex-direction: column;}
  #skladem .form .left {width: 100%;}
  #skladem .form .right {width: 100%;}
}

@media screen 
and (min-width: 601px) 
and (max-width: 840px)
{
  .itemsFrame .itemFrame { width: 49%; }
  .itemsFrame .itemFrame:not(:nth-child(even)) { margin-right: 2%; }
  .filtrCont .itemFrame { width: 49%; }
}

@media screen
and (max-width: 600px)
{
  #skladem .items .item {flex-direction: column;}
  
  #skladem .items .item .data .photoMobile {display: block; width: 80px; padding: 20px 0 0 20px;}
  #skladem .items .item .data .photoMobile img {max-width: 100%;}
  #skladem .items .item .data .name {width: calc(100% - 80px);}
  #skladem .items .item .photo {display: none;}
  
  #mainCatsFrame .cat .bookmark { min-width: 350px; width: 75%; height: 125px; padding-top: 38px; padding-right: 40px; }
    #mainCatsFrame .cat .bookmark H2 { margin-top: 10px; font-size: 25px; }
    #mainCatsFrame .cat .bookmark IMG { height: 45px; }  
    
  .itemsFrame .itemFrame,
  .filtrCont .itemFrame { width: 100%; }
  
  .detailFrame { display: flex; flex-direction: column-reverse; }
  .detailLeftFrame,
  .detailRightFrame { width: 100%; }
  .detailRightFrame { margin-bottom: 25px; padding-left: 0; }
}

@media screen
and (min-width: 481px)
{
  #topFrame .phone { padding: 5px 0px 5px 40px; background-image: url('/images/icon-phone.png'); background-position: left center; background-repeat: no-repeat; }
  #topFrame .email { padding: 5px 0px 5px 40px; background-image: url('/images/icon-mail.png'); background-position: left center; background-repeat: no-repeat; }  
    
  .fullGreenFrame .icon.zkusenosti {background-image: url('/images/zkusenosti.png');}
  .fullGreenFrame .icon.zkusenosti:HOVER {background-image: url('/images/zkusenosti-on.png');}
  .fullGreenFrame .icon.kvalita {background-image: url('/images/kvalita.png');}
  .fullGreenFrame .icon.kvalita:HOVER {background-image: url('/images/kvalita-on.png');}
  .fullGreenFrame .icon.tradice {background-image: url('/images/tradice.png');}
  .fullGreenFrame .icon.tradice:HOVER {background-image: url('/images/tradice-on.png');}
  .fullGreenFrame .icon.profi {background-image: url('/images/profi.png');}
  .fullGreenFrame .icon.profi:HOVER {background-image: url('/images/profi-on.png');}
}

@media screen
and (max-width: 480px)
{
  #topFrame .watchword { display: none; }
  #topFrame .logoFrame .mainText { margin-left: 0; }
    #topFrame .logoFrame .mainText H2 { font-size: 35px; }
    #topFrame .logoFrame .mainText H3 { font-size: 20px; }
    #topFrame .logoFrame .mainText .button { padding: 10px 30px 12px 30px; font-size: 18px; }
    
  #mainCatsFrame .cat { height: 200px; }
    #mainCatsFrame .cat .bookmark { width: 85%; min-width: 0; }
      #mainCatsFrame .cat .bookmark H2 { margin-right: 0; }
      #mainCatsFrame .cat .bookmark IMG { display: none; }
      
  .fullGreenFrame .icon { padding-top: 115px; font-size: 16px; }
  .fullGreenFrame .icon.zkusenosti {background-image: url('/images/zkusenosti-100.png');}
  .fullGreenFrame .icon.zkusenosti:HOVER {background-image: url('/images/zkusenosti-on-100.png');}
  .fullGreenFrame .icon.kvalita {background-image: url('/images/kvalita-100.png');}
  .fullGreenFrame .icon.kvalita:HOVER {background-image: url('/images/kvalita-on-100.png');}
  .fullGreenFrame .icon.tradice {background-image: url('/images/tradice-100.png');}
  .fullGreenFrame .icon.tradice:HOVER {background-image: url('/images/tradice-on-100.png');}
  .fullGreenFrame .icon.profi {background-image: url('/images/profi-100.png');}
  .fullGreenFrame .icon.profi:HOVER {background-image: url('/images/profi-on-100.png');}
  
  .fullBlueFrame .flex { display: block; }
  .fullBlueFrame .col:not(:last-child),
  .fullBlueFrame .col { width: 100%; float: left; text-align: center; }
  .fullBlueFrame .col:not(:last-child) { margin-bottom: 25px; }
}

@media screen
and (max-width: 400px)
{
  #newsFrame .inner .data-list .item {width: 100%; margin: 10px 0;}
  #newsFrame .inner .data-list .item:nth-child(4n) {margin-right: 0;}
  #newsFrame .inner .data-list .item:nth-child(2n) {margin-right: 0;}
  
  #topFrame .logo { min-width: 0; width: 100%; height: 193px; background-image: url("/images/logo-300.png"); }
  #topFrame .logoFrame { align-items: flex-start; }
    #topFrame .logoFrame .mainText H2 { font-size: 30px; }
    #topFrame .logoFrame .mainText H3 { font-size: 17px; }
    #topFrame .logoFrame .mainText .button { padding: 7px 20px 9px 20px; font-size: 15px; }
}

@media screen
and (max-width: 350px)
{
  #topFrame .phone,
  #topFrame .email { width: 100%; float: left; text-align: center; }
  #topFrame .phone { margin-bottom: 10px; }
  
  .g-recaptcha DIV, .g-recaptcha IFRAME { max-width: 100% !important; overflow: hidden; }
}