@media only screen
and (max-width: 1800px)
{
  .mainFrame {width: calc(100% - 100px); padding: 0 50px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
  
  #mainBanner .slide .text {width: auto; margin: 0 100px 40px 100px; flex: 1;}
}

@media only screen
and (max-width: 1500px)
{
  .mainFrame {width: calc(100% - 50px); padding: 0 25px;}
  
  #mainBanner .slide .text {margin: 0 50px 40px 50px;}
}

@media only screen
and (max-width: 1600px)
{
  #mainBanner .slide {height: 600px;}  
}


@media only screen
and (max-width: 1400px)
{
  .mainFrame {width: 100%; padding: 0 10px;}
  
  header .inner .logo {margin-right: 40px;}
  header .inner .menu ul li a {text-align: center; line-height: 1.2;}
  
  #mainBanner .slide {height: 550px;}
  #mainBanner .slide .text h2 {font-size: 36px;}
  
  #catList.home {padding: 20px 0 40px;}
  #catList {padding: 20px 0 40px;}
  
  #news {padding: 20px 0 40px;}
  
  #videoList {padding: 20px 0 40px;}
  
  #keStazeni {padding: 20px 0 40px;}
  
  #mainText {padding: 20px 0 10px;}
    
  #homeText {padding: 20px 0 40px;}
  #homeText .inner h1 {font-size: 30px;}
  
  #newsHome {padding: 20px 0 20px;}
  #newsHome h2 {font-size: 30px;}
  
  #sledujteNas {padding: 20px 0 40px;}
  #sledujteNas h2 {font-size: 30px;}
  
  .tinymceCont h1 {font-size: 30px !important;}
  .tinymceCont h2 {font-size: 28px !important;}
  
  #kontakt {padding: 10px 0;}
  #kontakt h1 {font-size: 30px !important;}
  
  #itemList {padding: 10px 0 0 0;}
  
  #item {padding: 10px 0 0 0;}
}


@media only screen
and (max-width: 1200px)
{
  .burger {display: block; width: auto; height: 40px; position: relative; padding: 0; margin: auto 0 auto 50px; background-color: #3a4875; 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: 30px; position: absolute; top: calc(50% - 1px); right: 10px; transition: all .5s; }
  .burger.active .icon { width: 27px; 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: -9px; }
  .burger .icon:after { bottom: -9px; }
  .burger.active .icon:before { top: 0; transform: rotate(45deg); }
  .burger.active .icon:after { top: 0; transform: rotate(135deg); }
  
  header .inner {align-items: center;}
  header .inner .logo {order: 1;}
  header .inner .langs {order: 2; display: none;}
  header .inner .burger {order: 3;}
  
  header .inner .menu {display: none; position: absolute; top: 100%; right: 0; margin-top: 10px; width: auto; z-index: 10; background-color: rgba(255,255,255,0.95);}  
  header .inner .menu ul {flex-direction: column;}
  header .inner .menu ul li {width: 100%;}
  header .inner .menu ul li.onlyInBurger {display: -webkit-flex; display: -webkit-box; display: -moz-flex; display: -moz-box; display: -ms-flexbox; display: flex;}
  header .inner .menu ul li a {padding: 4px 0; margin: 4px 0;}
  
  #mainBanner .slide {height: 500px;}
  
  #catList .inner .item .text {padding: 10px 20px;}
  #catList .inner .item .text .name {font-size: 17px;}
  #catList .inner .item .text .btn {font-size: 13px;}
  
  #news .inner .item .name {bottom: 10px; left: 25px; font-size: 16px;}
  
  #kontakt .osoby .osoba {width: 32%; margin-right: 2%;}
  #kontakt .osoby .osoba:nth-child(4n) {margin-right: 2%;}
  #kontakt .osoby .osoba:nth-child(3n) {margin-right: 0;}
}


@media only screen
and (max-width: 1000px)
{
  #mainBanner .slide {height: 500px;}
  #mainBanner .slide .text h2 {font-size: 32px;}
  
  #catList.home {padding: 20px 0 20px;}
  #catList {padding: 10px 0 30px;}  
  
  #news {padding: 10px 0 30px;}  
  
  #videoList {padding: 10px 0 30px;}  
  
  #keStazeni {padding: 10px 0 30px;}  
  
  #mainText {padding: 10px 0 10px;}
  
  #homeText {padding: 10px 0 30px;}
  #homeText .inner h1 {font-size: 26px;}
  
  #newsHome {padding: 15px 0 0px;}
  #newsHome h2 {font-size: 26px;}
  #newsHome .inner .dalsi .item .name {left: 25px; bottom: 10px; font-size: 16px;}
  
  #sledujteNas {padding: 20px 0 20px;}
  #sledujteNas h2 {font-size: 26px;}  
  #sledujteNas .inner .left .item .name {left: 25px; bottom: 10px; font-size: 18px;}
  #sledujteNas .inner .right .name {font-size: 20px;}
  
  .tinymceCont h1 {font-size: 26px !important;; margin: 20px 0px 0px 0px !important;}
  .tinymceCont h2 {font-size: 24px !important;}
  
  #itemList .inner .item .text {padding: 10px 20px;}
  #itemList .inner .item .text .name {font-size: 16px;}
  #itemList .inner .item .text .perex {font-size: 13px;}
  
  #keStazeni .inner .item .text {padding: 10px 20px;}
  #keStazeni .inner .item .text .name {font-size: 16px;}
  
  #item .title {margin: 10px 0 20px 0;}
  #item.vybaveni .title {margin-top: 30px;}
  
  #kontakt h1 {font-size: 26px !important;}
  #kontakt .text .left {padding: 35px 55px;}
  
  #kontakt .osoby .osoba {width: 48%; margin-right: 4%;}
  #kontakt .osoby .osoba:nth-child(4n) {margin-right: 4%;}
  #kontakt .osoby .osoba:nth-child(3n) {margin-right: 4%;}
  #kontakt .osoby .osoba:nth-child(2n) {margin-right: 0;}
  
  #mapDealersCont .switchFrame {width: 350px; max-width: calc(100% - 70px); position: fixed; bottom: 10px; left: 10px; top: unset;}
  #mapDealersCont .switchFrame .dealerContent {padding: 10px;}
  #mapDealersCont .switchFrame .dealerContent .inner {padding: 0 10px;}
}


@media only screen
and (max-width: 800px)
{
  #mainBanner .slide {height: 350px;}
  #mainBanner .slide .text {width: 96%; margin-left: 2%;}
  #mainBanner .slide .text h2 {font-size: 28px;}
  
  #catList .inner .item {width: calc(50% - 10px); margin-right: 20px;}
  #catList .inner .item:nth-child(2n) {margin-right: 0;}
  #catList .inner .item .text {padding: 20px 30px;}
  #catList .inner .item .text .name {font-size: 20px;}
  
  #news .inner .item {width: calc(50% - 10px); margin-right: 20px;}
  #news .inner .item:nth-child(2n) {margin-right: 0;}
  #news .inner .item .name {bottom: 20px; left: 40px; font-size: 18px;}
  
  #newsHome .inner {flex-wrap: wrap; flex-direction: column;}
  #newsHome .inner .hlavni {width: 100%; height: 400px;}
  #newsHome .inner .dalsi {width: 100%; margin: 20px 0 0 0;}
  #newsHome .inner .dalsi .item .name {bottom: 20px; left: 40px; font-size: 18px;}
  
  #sledujteNas .inner {flex-wrap: wrap; flex-direction: column;}
  #sledujteNas .inner .left {width: 100%; margin: 0;}
  #sledujteNas .inner .left .item .name {bottom: 20px; left: 40px; font-size: 24px;}
  #sledujteNas .inner .right {width: 100%; height: 400px; margin: 20px 0 0 0;}
  #sledujteNas .inner .right .name {font-size: 24px;}
  
  #itemList .inner .item {width: calc(50% - 10px); margin-right: 20px;}
  #itemList .inner .item:nth-child(2n) {margin-right: 0;}
  #itemList .inner .item .text {padding: 20px 30px;}
  #itemList .inner .item .text .name {font-size: 20px;}
  #itemList .inner .item .text .perex {font-size: 14px;}
  
  #keStazeni .inner .item {width: calc(50% - 10px); margin-right: 20px;}
  #keStazeni .inner .item:nth-child(2n) {margin-right: 0;}
  #keStazeni .inner .item .text {padding: 20px 30px;}
  #keStazeni .inner .item .text .name {font-size: 18px;}
  
  #itemTechParam .itemList .item {width: 100%; margin-right: 0;}
  
  footer {padding: 20px 0 20px;}
  footer .inner {flex-wrap: wrap;}  
  footer .inner .kontakt {width: 50%;}
  footer .inner .kategorie {width: 50%; text-align: right;}
  footer .inner .kategorie h3 {display: inline-block;}
  footer .inner .kategorie h3::before {left: 0;}
  footer .inner .right {width: 100%; margin-top: 30px;}
  footer .inner .right .top {text-align: center;}
  footer .inner .right .bottom {margin-top: 30px; text-align: center;}
  
  #videoList .inner .item .name {bottom: 10px; left: 30px; font-size: 20px;}
  
  .youtubePlay {background-size: 65px auto;}
  
  #kontakt .text {flex-wrap: wrap;}
  #kontakt .text .left {width: 100%; margin: 0;}
  #kontakt .text .right {width: 100%; height: 250px;}
  
  .dialogCont .dialogFrame .close {right: 0;}
  
  #poptavkaForm .data .left {width: calc(50% - 20px);}
  #poptavkaForm .data .right {width: 50%;}
}


@media only screen
and (max-width: 600px)
{
  #mainBanner {display: none;}
  #mainBanner .slide {height: 300px;}
  #mainBanner .slide .text h2 {font-size: 28px;}
  
  .slick-prev, .slick-next {display: none !important;}
  
  #mainBanner .slide .text {margin-bottom: 20px;}
  
  #catList .inner .item .text {padding: 10px 20px;}
  #catList .inner .item .text .name {font-size: 17px;}
  #catList .inner .item .text .btn {font-size: 13px;}
  
  #newsHome {padding: 15px 0 0px;}
  #newsHome h2 {font-size: 26px;}
  #newsHome .inner .dalsi .item .name {left: 25px; bottom: 10px; font-size: 16px;}
  
  #news .inner .item .name {bottom: 10px; left: 25px; font-size: 16px;}
  
  #sledujteNas {padding: 20px 0 20px;}
  #sledujteNas h2 {font-size: 26px;}  
  #sledujteNas .inner .left .item .name {left: 25px; bottom: 10px; font-size: 18px;}
  #sledujteNas .inner .right .name {font-size: 20px;}
    
  .tinymceCont h1 {font-size: 24px !important;}
  .tinymceCont h2 {font-size: 22px !important;}
  .tinymceCont p {font-size: 15px;}
  .tinymceCont ul {font-size: 15px;}
  
  #itemList .inner .item .text {padding: 15px 20px;}
  #itemList .inner .item .text .name {font-size: 16px;}
  #itemList .inner .item .text .perex {font-size: 13px;}
  
  #item .vybava ul li {width: 100%;}
  
  #poptavkaForm .data {flex-direction: column;}
  #poptavkaForm .data .left {width: 100%;}
  #poptavkaForm .data .right {width: 100%; height: 150px;}
  #poptavkaForm .odeslat {flex-direction: column;}
  #poptavkaForm .odeslat .left {width: 100%;}
  #poptavkaForm .odeslat .right {width: 100%;}
  #poptavkaForm input[type="submit"] {width: 100%; margin-top: 20px;}
  
  #itemTechParam {padding: 0 0 10px;}
    
  .youtubePlay {background-size: 60px auto;}
  
  #mapDealersCont .switchFrame {width: 350px; max-width: calc(100% - 70px); position: fixed; bottom: 10px; left: 10px; top: unset;}
  #mapDealersCont .switchFrame .dealerContent {padding: 10px;}
  #mapDealersCont .switchFrame .dealerContent .inner {padding: 0 10px;}
  
  .tinymceCont {font-size: 15px;}
  
  #videoList .inner .item {width: 100%; margin-right: 0;}
  #videoList .inner .item .name {bottom: 20px; left: 40px; font-size: 24px;}
  
  #keStazeni .inner .item .text {padding: 10px 20px;}
  #keStazeni .inner .item .text .name {font-size: 16px;}
  
  .dialogCont .dialogFrame {width: calc(100% - 20px);}
  
  #kontakt .text .left {padding: 10px 30px;}
}


@media only screen
and (max-width: 500px)
{
  #kontakt .osoby .osoba {width: 100%; margin-right: 0;}
}


@media only screen
and (max-width: 400px)
{
  /*header .inner {flex-wrap: wrap;}
  header .inner .burger {width: 100%; margin: 0;}
  */
  
  header .inner .menu {width: 100%; background-color: rgb(255, 255, 255, 0.95);}
  header .inner .logo {margin-right: 0;}
  
  #mainBanner .slide {height: 200px;}
  #mainBanner .slide .text h2 {font-size: 22px; margin-bottom: 20px;}
  #mainBanner .slide .text {margin-bottom: 10px;}
  
  #homeText .inner h1 {font-size: 22px;}
  #homeText .inner p {font-size: 15px;}
  
  #newsHome h2 {font-size: 22px;}
  #newsHome .inner .dalsi .item {margin-bottom: 20px !important;}
  
  #sledujteNas h2 {font-size: 22px;}
  #sledujteNas .inner .left .item {width: calc(50% - 5px); margin-right: 10px; margin-bottom: 10px !important;}
  #sledujteNas .inner .right {margin-top: 0px;}
  
  .tinymceCont h1 {font-size: 22px !important;}
  .tinymceCont h2 {font-size: 20px !important;}
  
  #itemList .inner .item {width: 100%; margin-right: 0;}
  #itemList .inner .item .text {padding: 20px 30px;}
  #itemList .inner .item .text .name {font-size: 18px;}
  #itemList .inner .item .text .perex {font-size: 14px;}
  
  #catList .inner .item {width: 100%; margin-right: 0;}
  
  #newsHome .inner .hlavni {padding: 0 30px 20px 15px;}
  #newsHome .inner .dalsi .item {width: 100%; margin-right: 0;}
  
  #news .inner .item {width: 100%; margin-right: 0;}
  #news .inner .item .name {bottom: 20px; left: 40px; font-size: 18px;}
  
  .youtubePlay {background-size: 50px auto;}
  
  footer .inner {flex-direction: column;}
  footer .inner h3 {margin: 20px 0 5px;}
  footer .inner .kontakt {width: 100%; text-align: center;}
  footer .inner .kontakt h3 {display: inline-block;}
  footer .inner .kategorie {width: 100%; text-align: center;}
  
  #itemTechParam .itemList .item .value {width: 150px;}
    
  #keStazeni .inner .item {width: 100%; margin-right: 0;}
  #keStazeni .inner .item .text {padding: 20px 30px;}
  #keStazeni .inner .item .text .name {font-size: 18px;}
}