/*** reset ***/ 
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, menu, dl, dt, dd, address, div, img {
  margin: 0;
  padding: 0;
}

.table-container {
overflow-x:auto;
}

/*** general ***/
html, body {
height: 100%;
height: 100%;
}

body {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.8em;
  color: #4d4d4d;
}

h1, h2, h3, h4, h5, h6, .button {
	/*margin: 1.5em 0 0 0;*/
	font-size: 24px;
	font-weight: 400;
  text-transform: uppercase;
  line-height: 1.1em;
  letter-spacing: 1.5px;
}

h3 {
font-size: 20px;
}

p {
  margin: 1.5em 0 0;
}

ul, ol {
list-style-type: none;
}

a {
color: #4d4d4d;
text-decoration: none;
transition: 0.3s;
}

a:hover {
color: #ff6e00;
}

.clearfix {
clear: both;
}

.clipped {
position:absolute;
clip: rect(1px 1px 1px 1px); /* IE6 & 7 */
clip: rect(1px, 1px, 1px, 1px);
} 

.flex {
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
}



/*** header ***/
header {
  width: 100%;
  position: fixed;
  z-index: 5;
  background-color: #fff;
}

/*header.active {
background-color: #fff;
background-color: rgba(255, 255, 255, 0.95);
-webkit-transition: .75s;
-moz-transition: .75s;
transition: .75s;
}*/


/*** home ***/
#logo {
position: absolute;
top: 0;
left: 0;
height: 70px;
width: 100px;
background: url('gfx/logo-mobile.svg');
background-position: 50% 0;
background-repeat: no-repeat;
margin: 0;
}

#home {
display: table;
height: 100%;
background: #4d4d4d;
background: url('gfx/header-bg320.jpg') no-repeat 0% 0%, url('gfx/header-bg320.jpg') no-repeat 100% 100%; 
padding: 65% 0;
}

.angle-shape-wrapper {
width: 100%;
display: table-cell;
vertical-align: middle;
}

.angle-top, .angle-bottom {
width: 100%;
padding-bottom: 9.2%;
padding-bottom: 9.1vw;
/*height: 9vw;*/
background: url('gfx/angle-top.svg');
background-size: 102%;
background-position: center bottom;
background-repeat: no-repeat;
margin-bottom: -1px;
}

.angle-bottom {
position: relative;
background-image: url('gfx/angle-bottom.svg');
background-position: center top;
margin-top: -1px;
}

.article-wrapper {
width: 100%;
background-color: #fff;
}

.angle-shape-wrapper article {
padding: 3em 2em;
}

a.button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding: 1.5em;
color: #fff;
background-color: #a9e61e;
font-weight: 600;
transition: 0.3s;
}

a.button:hover {
color: #a9e61e; 
background-color: #fff;
box-shadow: #eee 0px 0px 10px;
}


/*** content ***/
section {
  width: 100%;
}

article {
	max-width: 35em;
	margin: 0 auto;
  padding: 4em 2em;
}


/*** parametry ***/
#parametry-plosiny article {
padding: 4em 2em 3em;
max-width: 55em;
}

#parametry-plosiny article h2 {
text-align: center;
}

#parametry-plosiny .col-container {
margin: 2em 0 0;
}

/*3 sloupce*/
#parametry-plosiny .col-md-4 {
margin-bottom: 5rem;
}

#parametry-plosiny .col-md-4 .col-content {
margin: 0 15px;
text-align: center;
}

#parametry-plosiny .col-md-4 .kulate-foto {
margin: 0 auto 20px;
width: 180px;
height: 180px;
background: url(gfx/montazni-plosina-26-ikona.jpg) no-repeat center center;
background-size: 180px;
border-radius: 100px;
}

#parametry-plosiny .col-md-4.left .kulate-foto {
background-image: url(gfx/montazni-plosina-ikona.jpg);
}

#parametry-plosiny .col-md-4.right .kulate-foto {
background-image: url(gfx/montazni-plosina-genie-ikona.jpg);
}

#parametry-plosiny span.kategorie {
font-weight: 400;
text-transform: uppercase;
line-height: 1.5;
font-size: 15px;
letter-spacing: 1px;
display: block;
margin-top: 5px;
}

#parametry-plosiny span.popis {
margin-top: 0.75rem;
display: block;
}

#parametry-plosiny a.button {
display: inline-block;
width: 100%;
max-width: 260px;
padding: 0.8em 0;
margin: 1.75rem 0 1rem;
font-size: 18px;
position: relative;
top: unset;
left: unset;
transform: none;
}

/*** Collapsible ***/
input[type='checkbox'] {
  display: none;
}

.wrap-collabsible {
max-width: 260px;
margin: 0 auto;
}

/*label*/
.lbl-toggle {
display: inline-block;
font-weight: 400;
font-size: 14px;
line-height: 1.5;
text-transform: uppercase;
text-align: center;
width: auto;
max-width: 200px;
padding: 0.75rem;
background: #ccc;
cursor: pointer;
transition: all 0.25s ease-out;
}

/*hover + arrow*/
.lbl-toggle:hover, .toggle:checked + .lbl-toggle {
background-color: #fff;
box-shadow: #eee 0px 0px 10px;
}

.lbl-toggle::before {
content: ' ';
display: inline-block;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid currentColor;
vertical-align: middle;
margin-right: .5rem;
transform: translateY(-2px);
transition: transform .2s ease-out;
}

/*magic*/
.collapsible-content {
  max-height: 0px;
  overflow: hidden;

  transition: max-height .25s ease-in-out;
}

.toggle:checked + .lbl-toggle + .collapsible-content {
  max-height: 650px;
}

.toggle:checked + .lbl-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}

.toggle:checked + .lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

/*parametry*/
/*#parametry-plosiny .col-2 {
padding: 0;
}

#parametry-plosiny .col-3 {
display: none;
}*/

.icon {
background-position: left center;
background-repeat: no-repeat;
background-size: 45px;
min-height: 45px;
padding: 0 0 0 60px;
margin-top: 1rem;
display: flex;
align-items: center;
text-align: left;
font-size: 0.95em;
line-height: 1.4em;
}

.left-col .icon {
margin: 1em 2em 0 0;
}

.mid-col .icon {
margin: 1em 1em 0 1em;
}

.right-col .icon {
margin: 1em 0 0 0;
}

.vyska {
background-image: url('gfx//ikony/ikona-prac-vyska.svg');
}

.dosah {
background-image: url('gfx//ikony/ikona-stran-dosah.svg');
}

.nosnost {
background-image: url('gfx//ikony/ikona-nosnost-kose.svg');
}

.vaha {
background-image: url('gfx//ikony/ikona-vaha.svg');
}

.transport-delka {
background-image: url('gfx//ikony/ikona-transport-delka.svg');
}

.transport-sirka {
background-image: url('gfx//ikony/ikona-transport-sirka.svg');
}

.transport-vyska {
background-image: url('gfx//ikony/ikona-transport-vyska.svg');
}

#parametry-plosiny img {
display: block;
width: 100px;
height: 100px;
margin-bottom: 0.25em;
}

.nakresy-wrap {
margin-top: 2rem;
border-top: 1px solid #eee;
}

.nakres {
margin-top: 2rem;
float: left;
font-size: 0.95em;
}

.nakres.right {
float: right;
}

#parametry-plosiny .mySlides2 img, #parametry-plosiny .mySlides3 img, #parametry-plosiny .mySlides4 img  {
width: 100%;
height: 100%;
}


/*** podmínky pronájmu ***/
#podminky-pronajmu {
background-color: #f2f2f2;
}

#podminky-pronajmu article {
padding: 3em 2em 4em;
max-width: 50em;
}

table {
width: 100%;
min-width: 460px; 
margin: 2em 0 0;
table-layout: fixed;
word-wrap: break-word;
}

table.col-4 {
margin-top: 4em;
}

table tr {
background: #fff;
}

table td, table th {
padding: 1em;
text-align: center;
vertical-align: middle;
width: 33.3%
}

table.col-4 td {
width: 25%;
}

table th {
background: #a9e61e;
color: #fff;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1.5px;
}

.podminky {
font-size: 90%;
font-style: italic;
margin-top: 1em;
}

.hvezdicka {
color: #a9e61e;
font-weight: 400;
}



/*** galerie ***/
#fotogalerie {
position: relative;
}

#fotogalerie .angle-shape-wrapper {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

#fotogalerie .angle-shape-wrapper article {
text-align: center;
padding: 1em 2em;
}

/* grid */
.col-3 {
height: 0;
width: 33.33%;
padding-bottom: 33.33%;
float: left;
}

.col-3 img {
width: 100%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  /*padding-top: 100px;*/
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.8);
  text-align: center;
}

/* Modal Content */
.modal-content {
  position: relative;
  margin: 8em auto 0;
  padding: 0;
  display: inline-block;
}

.mySlides img {
width: 100%;
height: 100%;
}



/* The Closing Div */
.close-modal {
position: absolute;
width: 100%;
height: 100%;
/*background-color: red;*/
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  right: 25px;
  margin-top: 100px;
  font-size: 75px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prev,
.next {
  background-color: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position buttons */
.prev {
  left: 0;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  width: 3em;
  padding: 16px;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  text-align: center;
}
/*
img.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}
*/
img.hover-opacity {
  transition: 0.3s;
}

.hover-opacity:hover {
  opacity: 0.6;
  cursor: pointer;
}

/*** Kontakt ***/
.left-right-wrapper {
  width: 100%;
  flex-direction: column;
}

.left-part, .right-part {
  float: left;
}

.left-part {
width: 100%;
}

.right-part {
width: 100%;
min-height: 100%;
min-height: 100vh;
}

section#kontakt .right-part {
position: relative;
}

.google-map-wrap, .google-maps {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.google-maps iframe {
width: 100%;
height: 100%;
}

#kontakt article {
text-align: center;
}

#kontakt p {
padding-top: 3.5em;
margin-top: 2em;
}

.adresa {
background: url('gfx/ikony/ikona-adresa.svg') no-repeat center top;
}

.telefon {
background: url('gfx/ikony/ikona-telefon.svg') no-repeat center top;
}

.mail {
background: url('gfx/ikony/ikona-mail.svg') no-repeat center top;
}

/*** footer ***/
footer {
width: 100%;
padding: 2em 0;
background-color: #4d4d4d;
}

.copyright {
text-align: center;
}

.copyright a {
color: #fff;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 0.7em;
}

.copyright a:hover {
color: #ff6e00;
}

/*** navigace mobile ***/
	ul.nav-menu{
		position:absolute;
		top:60px;
		width:100%;
		height:0;
		padding:0;
		overflow:hidden;
	}
	ul.nav-menu.active{
		height:auto;
	}
	ul.nav-menu li{
		width:100%;
	}
	ul.nav-menu li a{
		display: block;
    width:100%;
		padding: 1em 0;
		text-align:center;
		background-color: #fff;
    background-color: rgba(255, 255, 255, 0.95);
    color: #4d4d4d;
text-decoration: none;
text-transform: uppercase;
font-weight: 400;
letter-spacing: 1.5px;
font-size: 0.7em;
}

ul.nav-menu li:hover a {
color: #ff6e00;
}  
  
	.nav-toggle{
	display:block;
	position:absolute;
	top:0;
	right:0;
	width:60px;
	height:60px;
	background-color: #a9e61e;
	cursor:pointer;
}

span.icon-bar{
	position:absolute;
	right:17px;
	display:block;
	width:26px;
	height:2px;
	background-color:#ffffff;
	-webkit-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.icon-bar:nth-child(1){
  top:22px;
}

.icon-bar:nth-child(2){
  top:29px;
}

.icon-bar:nth-child(3){
  top:36px;
}

/* icon bars animation */
.nav-toggle.active .icon-bar:nth-child(1){
	top:29px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	transform: rotate(45deg);
}

.nav-toggle.active .icon-bar:nth-child(2){
	width:0;
}

.nav-toggle.active .icon-bar:nth-child(3){
	top:29px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.nav-overlay{
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	background-color:rgba(0,0,0,0.5);
	z-index:2;
	opacity:0;
	visibility:hidden;
  -webkit-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
}

.nav-overlay.active{
	opacity:1;
	visibility:visible;
}




/**********************/
/*** MEDIA QUERIES ***/
@media screen and (min-width : 321px){
#home {
background: url('gfx/header-bg480.jpg') no-repeat 0% 0%, url('gfx/header-bg480.jpg') no-repeat 100% 100%; 
}
}




@media screen and (min-width : 481px){
#home {
background: url('gfx/header-bg568-top.jpg') no-repeat 0% 0%, url('gfx/header-bg568-bot.jpg') no-repeat 100% 100%;
padding: 43% 0; 
}

article {
padding: 5em 2em;
}

.angle-shape-wrapper article {
padding: 4em 2em;
}

#parametry-plosiny article {
padding: 5em 2em 4em;
}

#podminky-pronajmu article {
padding: 4em 2em 5em;
}
}




@media screen and (min-width : 568px){
#parametry-plosiny article .col-2 {
width: 50%;
float: left;
}

.col-2 .icon.first, .col-3 .icon.first {
margin-top: 0;
}

.right-col .icon {
margin: 1em 0 0 2em;
}

.angle-shape-wrapper article {
padding: 5em 2em;
}

a.button {
padding: 2em;
}

#parametry-plosiny article {
padding: 6em 2em 5em;
}

#podminky-pronajmu article {
padding: 5em 2em 6em;
}

#fotogalerie .angle-shape-wrapper article {
padding: 2em;
}
}




@media screen and (min-width : 569px){
#home {
background: url('gfx/header-bg768-top.jpg') no-repeat 0% 0%, url('gfx/header-bg768-bot.jpg') no-repeat 100% 100%; 
}
}




@media screen and (min-width : 768px){
#home {
padding: 40% 0;
}

article {
max-width: 35em;
padding: 8em 2em;
}

#parametry-plosiny article {
padding: 8em 2em 5em;
}

#podminky-pronajmu article {
padding: 5em 2em 8em;
}

/*** navigace desktop ***/
.nav-toggle {
display: none;
}

.nav-overlay.active {
		visibility:hidden;
		opacity:0;
}

nav {
	position: relative;
  max-width: 60em;
	margin: 0 auto;
  padding: 0 2em;
}

ul.nav-menu {
float: right;
position: static;
width: auto;
height: auto;
}

ul.nav-menu li {
width: auto;
display: inline-block;
float: left;
text-align: left;
background: none;
}

ul.nav-menu li a {
display:block;
width: auto;
color: #4d4d4d;
text-decoration: none;
text-transform: uppercase;
text-align: left;
font-weight: 400;
letter-spacing: 1.5px;
font-size: 0.7em;
margin: 1.6em 2em 1.6em 0;
background: none;
padding: 0;
}

/*header.active ul.nav-menu li a {
color: #4d4d4d;
transition: .75s;
}*/

/*Style for last menu link*/
ul.nav-menu li.last a {
margin-right: 0;
}

/*Hover state for top level links*/
ul.nav-menu li:hover a /*header.active ul.nav-menu li:hover a*/ {
color: #ff6e00;
}

/*** 3 sloupce ***/
#parametry-plosiny .col-md-4 {
width: 33.33%;
float: left;
margin-bottom: 0;
}

#parametry-plosiny .col-md-4 .col-content {
margin: 0 5px;
}

#parametry-plosiny .col-md-4.left .col-content {
margin: 0 10px 0 0;
}

#parametry-plosiny .col-md-4.right .col-content {
margin: 0 0 0 10px;
}

/* collapsible*/
.wrap-collabsible {
padding: 0 10px;
}

/*** Kontakt ***/
.left-right-wrapper {
  flex-direction: row;
}

.left-part, .right-part {
	min-height: 100%;
  min-height: 100vh;
}

.left-part {
width: 60%;
}

.right-part {
width: 40%;
}

#kontakt article {
	margin: auto;
  padding: 5em;
}
}




@media screen and (min-width : 769px){
#home {
background: url('gfx/header-bg1024-top.jpg') no-repeat 0% 0%, url('gfx/header-bg1024-bot.jpg') no-repeat 100% 100%;
}
}




@media screen and (min-width : 860px){
#logo {
position: absolute;
top: 0;
left: 2em;
height: 182px;
width: 200px;
background: url('gfx/logo.svg');
background-position: 50% 0;
background-repeat: no-repeat;
margin: 0;
}
}




@media screen and (min-width : 900px){
/*** Collapsible ***/
/*label*/
.lbl-toggle {
width: 100%;
max-width: 200px;
padding: 0.75rem 0;
font-size: 15px;
}
}




@media screen and (min-width : 1024px){
#parametry-plosiny article .col-2 {
display: none;
}

#parametry-plosiny article .col-3 {
display: block;
height: auto;
width: 33.33%;
padding: 0;
float: left;
}
}




@media screen and (min-width : 1025px){
#home {
background: url('gfx/header-bg1366-top.jpg') no-repeat 0% 0%, url('gfx/header-bg1366-bot.jpg') no-repeat 100% 100%;
}
}




@media screen and (min-width : 1366px){
#home {
padding: 30% 0;
}

#fotogalerie .angle-shape-wrapper article {
padding: 3em 2em;
}

.left-part, .right-part {
width: 50%;
}
}




@media screen and (min-width : 1367px){
#home {
background: url('gfx/header-bg1920.jpg') no-repeat 50% 50%;
}
}




@media screen and (min-width : 1920px){
#home {
padding: 25% 0;
}
}