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


@media only screen
and (max-width: 1000px)
{
  #headerTop .inner {height: auto; flex-wrap: wrap;}
  #headerTop .inner .logo {position: relative; width: 120px; height: auto;}
  #headerTop .inner .logo img {max-width: 100%; max-height: 100%;}
  #headerTop .inner .langs {padding: 0;}

  #headerTop .inner .right {width: unset; flex: 1; padding: 0; flex-wrap: wrap; align-content: center;}
  #headerTop .inner .right .langs {width: calc(100% - 55px); margin-bottom: 20px; border: 0; justify-content: flex-end;}
  #headerTop .inner .right .site {width: 55px; margin-bottom: 20px;}

  #footer .inner {flex-wrap: wrap; justify-content: center;}
  #footer .inner .col.links {border: 0; margin: 40px 0 0 0;}
  #footer .inner .col.links ul li {text-align: right; padding-right: 20px;}
  #footer .inner .col.links ul li:nth-child(even) {text-align: left; padding-left: 20px;}
  #footer .inner .col.links ul li a {}

  .table {font-size: 14px;}
  .table .tr.header {font-size: 15px;}

  #akce .mainFrame {padding: 0;}
}


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

  #newsletter .inner {flex-direction: column;}
  #newsletter .inner .left .checkboxCont {justify-content: flex-start;}
  #newsletter .inner .right {margin: 20px 0 0 0;}


  .table .tr.header {display: none;}
  .table .tr {flex-direction: column;}
  .table .tr .td {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
  .table .tr .td:first-child {border-top: 1px solid #e7e7e7;}
  .table .tr .td.date {width: 100%;}
  .table .tr .td.name {width: 100%; flex: unset;}
  .table .tr .td.misto {width: 100%;}
  .table .tr .td.kontakt {width: 100%;}
  .table .tr .td.kredit {width: 100%; text-align: left;}
  .table .tr .td.kredit:before {content: 'Kredity: ';}
  .table .tr .td.soubor {width: 100%;}


  .table .tr .td.providerMisto {width: 100%; flex: unset; order: 2; border-top: 0;}
  .table .tr .td.providerName {width: 100%; flex: unset; order: 1; border-top: 1px solid #e7e7e7;}
  .table .tr .td.providerContact {width: 100%; flex: unset; order: 3;}
}


@media only screen
and (max-width: 800px)
{
  #headerMenu {display: none;}

  #headerTop .inner .right .search {display: none;}

  .burger {position: relative; width: 30px; height: 24px; cursor: pointer; z-index: 1100; display: flex; flex-direction: column; justify-content: space-between;}
  .burger span {height: 4px; width: 100%; background: #005b9a; border-radius: 2px; transition: 0.3s ease; transform-origin: center;}

  /* Burger jako křížek */
  .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 {position: relative; width: 100%; height: auto; padding: 5px; text-transform: uppercase; color: #005b9a; align-items: center; justify-content: space-between; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex;}
  #menuMobileFrame span {margin-right: 5px;}
  #menuMobileFrame .search {margin-left: auto;}
  #menuMobileFrame .search svg {height: 22px; width: 22px; fill: #8b8e91;}
  #menuMobile {width: 100%; position: absolute; z-index: 10; right: 0; top: calc(100%); background-color: #00a86b;}
  #menuMobile .menuMobileContent {}
  #menuMobile .menuMobileContent .btn {width: 100%; height: auto; padding: 0 0 0 20px; border-bottom: 1px solid #04905d; *background-color: #999; color: #fff; font-weight: 700; align-items: center; justify-content: space-between;}
  #menuMobile .menuMobileContent .btn.active {background-color: #005b9a;}
  #menuMobile .menuMobileContent .btn A {width: 80%; text-transform: uppercase; padding: 10px 0; line-height: 1.2; font-weight: 700; font-size: 16px;}
  #menuMobile .menuMobileContent .btn A.plusMinus {width: auto;}
  #menuMobile .menuMobileContent .btn.btnlvl2 {background-color: #04905d; color: #fff; border-bottom: 1px solid #00a86b;}
  #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;}

  #homeNewsAndAkce .inner {flex-direction: column;}
  #homeNewsAndAkce .inner .newsFrame {width: 100%; margin: 0;}
  #homeNewsAndAkce .inner .akceFrame {width: 100%; margin: 30px 0 0 0;}
  #homeNewsAndAkce .inner .akceFrame .btnLine a {display: inline-block;}

  #homeText .inner {flex-direction: column;}
  #homeText .inner .text {width: 100%; margin: 0;}
  #homeText .inner .photo {display: none; width: 100%; margin: 0;}

  #homeClanky .inner {flex-direction: column;}
  #homeClanky .inner .clankyFrame {width: 100%; margin: 0;}
  #homeClanky .inner .photoFrame {display: none; width: 100%; margin: 0;}

  #googleMap .mainFrame {padding: 0;}

  .tableClenList .tr {border: 1px solid #e7e7e7; border-bottom: 0; border-right: 0;}
  .tableClenList .tr.header {display: none;}
  .tableClenList .tr {flex-direction: column;}
  .tableClenList .tr .td.fullname {width: 100%;}
  .tableClenList .tr .td.specializace {width: 100%;}
  .tableClenList .tr .td.mesto {width: 100%;}
  .tableClenList .tr .td.provozovna {width: 100%;}


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


@media only screen
and (max-width: 700px) {
  #headerTop .inner .right {justify-content: flex-end;}
  #headerTop .inner .right .langs {display: none;}
  #headerTop .inner .right .site {display: none;}
  #headerTop .inner .right .contact {width: 100%; margin: 0 0 10px 0; justify-content: flex-end;}
  #headerTop .inner .right .contact a {margin: 0;}
  #headerTop .inner .right .contact a.phone {display: none;}
  #headerTop .inner .right .contact a svg {height: 16px;}
  #headerTop .inner .right .user {color: inherit;}
  #headerTop .inner .right .user .login svg {height: 20px;}

  #mainForm .inner {width: 100%; padding: 0 10px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}

  #greenBoxesFrame .inner {flex-direction: column;}
  #greenBoxesFrame .inner .box {width: 100%; margin: 5px 0; padding: 20px 20px 10px 20px; font-size: 17px;}

  #homeClanky .inner .clankyFrame .list {flex-direction: column;}
  #homeClanky .inner .clankyFrame .list .item {width: 100%; margin: 10px 0;}
}


@media only screen
and (max-width: 500px)
{
  #headerTop .inner .right .contact {flex-direction: column; align-items: flex-end; justify-content: center;}
  #headerTop .inner .right .contact a {margin: 4px 0; font-size: 16px;}
  #headerTop .inner .right .user .login {font-size: 16px;}

  #menuMobileFrame {width: 100%;}

  #newsletter .inner .right .inputWrapper .inputCont input {width: auto;}
  #newsletter .inner .left .row1 {text-align: center;}
  #newsletter .inner .left .checkboxCont {justify-content: center;}

  #footer {font-size: 16px;}
  #footer .inner {flex-direction: column; align-items: center; text-align: center;}
  #footer .inner .col.logo {margin: 0 0 20px 0;}
  #footer .inner .col.company {width: auto; margin: 0 0 20px 0; flex: unset;}
  #footer .inner .col.links {margin: 0;}
  #footer .inner .col.links ul {margin: 0;}
  #footer .inner .col.links ul li {width: 100%; text-align: center !important; padding: 0 !important;}
}