* {box-sizing: border-box;}

body, html {margin: 0; padding: 0; border: 0; font-family: gibson; font-size: 10px;}

@font-face {
    font-family: 'gibson';
    src: url('font/gibson-bold.eot');
    src: url('font/gibson-bold.eot?#iefix') format('embedded-opentype'),
         url('font/gibson-bold.woff2') format('woff2'),
         url('font/gibson-bold.woff') format('woff');
    font-weight: bold;
}

@font-face {
    font-family: 'gibson';
    src: url('font/gibson-regular.eot');
    src: url('font/gibson-regular.eot?#iefix') format('embedded-opentype'),
         url('font/gibson-regular.woff2') format('woff2'),
         url('font/gibson-regular.woff') format('woff');
}

@font-face {
    font-family: 'gibsonsemibold';
    src: url('font/gibson-semibold.eot');
    src: url('font/gibson-semibold.eot?#iefix') format('embedded-opentype'),
         url('font/gibson-semibold.woff2') format('woff2'),
         url('font/gibson-semibold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'open_sans';
    src: url('font/opensans-regular.eot');
    src: url('font/opensans-regular.eot?#iefix') format('embedded-opentype'),
         url('font/opensans-regular.woff2') format('woff2'),
         url('font/opensans-regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



.menu {width: 100%; background-image: url(images/bg-menu.png); background-repeat: repeat; height: 87px; position: fixed; z-index: 10; top: 0;}

nav {max-width: 1100px; width: auto; margin: 0 auto; padding: 0 2%; text-align: right; position: relative; font-family: 'gibsonsemibold';}

nav a {color: #12a19a; font-size: 1.8em; text-decoration: none; padding: 8px 14px; margin: 21px 25px 0 0; display: inline-block;}

nav a:hover {color: #0d6e69;}

nav .mobile-menu {display: none;}

nav .mobile-menu.clicked {background-position: -57px 0;}

.mobile {display: none; position: absolute; margin: 0 2%; right: 0; top: 87px; background-color: #12a19a; padding: 0 15px; width: 100%; min-width: 200px; max-width: 378px; text-align: left;}

.mobile .hr {height: 1px; width: 100%; background-color: #2ec2bb;}

.mobile a {color: #fff; display: block; padding: 25px 15px; margin: 0;}

nav .mobile .current {color: #2ec2bb;}

nav .desktop .current {border: 3px solid #12a19a; border-radius: 4px; padding: 5px 11px;}

nav .logo {float: left; border: 0; padding: 0; margin: 0;}

nav .logo img {border-width: 0;}

.header {background:  url(images/header-1_small.jpg) center top no-repeat; max-height: 503px; margin-bottom: 80px; text-align: center; transition: background 1s linear; -webkit-transition: background 1s linear; -moz-transition: background 1s linear; -o-transition: background 1s linear;}

header {max-width: 1100px; width: auto; margin: 0 auto; padding: 0 2%;}

header .info {position: absolute; top: 150px; text-align: left; width: auto; max-width: 360px; color: #fff;}

header .info h1 {font-size: 3.6em; text-transform: uppercase; margin: 0;}

header .info p {font-size: 2.4em; margin: 5px 0 40px 0; line-height: 1.2em;}

header .info .phone {font-size: 3em; margin: 0; padding-left: 50px; font-weight: bold; background:  url(images/phone.png) left center no-repeat;}

.header .kvl {margin-top: 423px;}

.section {max-width: 1100px; width: auto; margin: 0 auto; padding: 0 2%;}

.to-home, .price-list, .seo {width: 100%; background:  url(images/bg-to-home_small.jpg) center top no-repeat; padding-top: 40px;}

.price-list {background: #eaeaea url(images/bg-price-list.jpg) center bottom repeat-x;}

.price-list .section {position: relative;}

.seo {background: #3a5f5d url(); padding-bottom: 30px;}

.left {width: 33.33%; float: left;}

.half {width: 50%; float: left;}

.half p {font-size: 1.4em; font-family: open_sans; margin: 14px 0 0 0; color: #fff;}

div.double {width: 66.66%; padding-left: 5%;}

.left ul {margin: 5px 0; padding: 0;}

.left ul li {font-size: 1.8em; font-family: gibsonsemibold; padding: 0 0 25px 0; color: #12a19a;}

.left p {font-size: 1.4em; width: auto; max-width: 250px; font-family: open_sans; margin: 14px 0 0 0;}

.left p a {color: #12a19a;}

.left p a:hover {color: #106460;}

h2 {color: #12a19a; font-size: 3em; text-transform: uppercase; margin: 0 0 40px 0;}

.table {color: #12a19a; font-size: 1.8em;}

.left .table p {font-size: 1.3rem; max-width: 100%; color: #000; text-align: justify;}

.table .hr {width: 100%; margin: 8px 0; height: 1px; background-color: #b8ccc7;}

.show {display: none;}

.row {display: inline-block; width: 76%; padding-left: 10px;}

.price {margin-bottom: 100px; text-transform: uppercase; font-size: 1.8em; font-family: gibsonsemibold; margin-top: 40px; float: right; color: #fff; text-decoration: none; background-color: #12a19a; padding: 13px 40px; border-radius: 3px;}

.price:hover {background-color: #106460;}

footer {text-align: center; margin: 20px 0; font-size: 1.4em; font-family: open_sans; color: #bfbfbf; font-weight: bold;}

footer a {color: #bfbfbf;}

footer a:hover {color: #747474;}

.on-off {display: block; position: absolute; bottom: 0; left: 0;}

.off-on {display: none;}

.white, ul.white li {color: #fff;}

.map {text-align: center; background: url(images/bg-map.jpg) center center repeat-x; padding: 17px 0; margin: 0;}

#map-canvas {height: 480px; width: 100%;}

#kontakt img {display: block;}

.tel {color: #12a19a;}

.pad-30 {padding-top: 30px;}

.clear {clear: both;}

@media screen and (min-width: 760px) {

  .to-home {background-image: url(images/bg-to-home.jpg);}
  
  .header {background-image: url(images/header-1.jpg);}
 
}

@media screen and (min-width: 1680px) {

  .header {}

  .header, .to-home {background-size: 100%;}
 
}

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

  #map-canvas {height: 300px;} 

  .left ul li {font-size: 1.6em;}
  
  .left, .half {padding-right: 2.5%;}
  
  h2 {font-size: 2.8em;}
  
}

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

  nav .mobile-menu {display: inline-block; margin: 0; padding: 0; width: 57px; height: 87px; background-image: url(images/mobile-nav.png);}

  #map-canvas {height: 220px;} 

  .left p {max-width: 380px;}
  
  .price {margin-bottom: 20px;}
  
  .on-off, .desktop {display: none;}
  
  .off-on {display: block;}

  header .info {top: 110px;}
  
  h2 {padding-top: 20px;}
  
  .to-home, .price-list, .seo {padding-top: 20px;}
  
  .table {padding-top: 30px;}
  
  .row {width: 70%; padding-right: 2%;}
  
  .left ul {margin-left: 10px; width: 100%;}
  
  .left, .half, div.double {float: none; width: 100%;  padding: 0 2%;}
  
}

@media screen and (max-height: 380px) {

  .mobile a {color: #fff; display: inline-block; padding: 15px 15px; margin: 0;}
  
}

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

  .price-list {overflow: hidden;}
  
  header .info p {margin-bottom: 15px;}
  
}