html{
	max-height: 100%;
}

body{
	font: 15px/1.5 'Quicksand', sans-serif;
	padding: 0;
	margin: 0;
	background-color: #ffffff;
	min-height: 100%;
}

/*GLOBAL*/
.container{
	width: 100%;
	margin: auto;
	overflow: hidden;
}
/* Custom BOX shadow because box shadow from previous element is hidden behind slider*/
.shadow {
	  position: absolute;
    width: 100%;
    height: 1.5%;
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0));
}

.header_container{
	width: 100%;
	margin: auto;
	overflow: hidden;
}

/* Menu on small screen*/
.topnav .icon {
  display: none;
}

/* When the screen is less than 915 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 915px) {
  .topnav li:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 915px) {
  .topnav.responsive {position: relative;}       
  .topnav.responsive a.icon {
    position: absolute;
    right: -35px;
    top: 0;
    transform: rotate(90deg);
  }
  .topnav.responsive li {
    float: none;
    display: block;
    text-align: left;
  }
}

a.icon:hover{
	color: #ffffff;
}

header ul{
	margin: 0;
	padding: 0;
}

/*Header*/
header{
	background: #1e2a5d;
	color:  #ffffff;
	padding-top: 30px;
	min-height: 70px;
	box-shadow:  0 5px 5px #515151;

}

header a{
	color: #ffffff;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 16px;
	padding: 0px 15px 5px 15px;
}


header li{
	float: left;
	display:inline;
	margin: 0px 10px 0px 10px;
}
header #branding{
	float: left;
	margin-left: 35px;
	margin-bottom: 20px;
	height: 58px;
	width: 110px;
}

header #branding h1{
	margin: 0;
}

header nav{
	float: right;
	margin-top: 15px;
	padding-right: 50px;
	padding-bottom: 15px;
}

header a:hover{
	color: #1e2a5d;
	font-weight: bolder;
	transition-property: inherit;
	transition-duration: 0.5s;

	}
header li a:hover{
	border-radius: 50px 15px;
	background-color: #ffffff;
	transition-property: inherit;
	transition-duration: 0.5s;

}

footer{
	padding: 50px 0 50px 0;
	background-color: #1e2a5d;
	text-align: center;
	color: #ffffff;
	margin-bottom: 0px;
	display: block;
}

#boxes{
	margin-top: 20px;
}
#boxes .box{
	float: left;
	width: 33%;
	text-align: center;
	padding-left: 5%;
	padding-right: 5%;
	
}


#boxes .box1{
	padding-bottom: 10px;
	max-width: 100%;
	max-height: 100%;
	min-width: 10vh;
	min-height: 10vh;
	padding-left: 10%;
	padding-right: 5%;

}
#boxes .box2{
	padding-bottom: 10px;
	max-width: 100%;
	max-height: 100%;
	min-width: 10vh;
	min-height: 10vh;
	padding-left: 5%;
	padding-right: 5%;
}
#boxes .box3{
	padding-bottom: 10px;
	max-width: 100%;
	max-height: 100%;
	min-width: 10vh;
	min-height: 10vh;
	padding-right: 10%;
	padding-left: 5%;
}


/* -----------------------------------SLider cSS-------------------------------------------------*/
* {box-sizing:border-box}

/* Slideshow container */
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}

/* Hide the images by default */
.mySlides {
  display: none;
}
/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.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);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 25px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  font-style: bold;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/*--------------------------------MAPA---------------------------------*/
.mapouter{
	position:relative;
	height:700px;
	width:100%;
	margin-bottom: -15px;

}
.gmap_canvas {
	overflow:hidden;
	background:none!important;
	height:700px;
	width:100%;
	padding-left: 300px;	
}

#frameMap{
	box-shadow: 0 0 20px 0 #999;
	position: absolute;


}

/*navbar----------------------------*/
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}

/*photogalery___________________________________________*/

.photo_gallery{
	width: 80%;
	margin: auto;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px,300px));
	grid-gap: 50px;
	margin-bottom: 50px;
	justify-content: center;
}

.pic{
position: relative;
height: 230px;
border-radius: 10px;
box-shadow: 2px 3px 5px lightgray;
cursor: pointer;

}

.pic img{
	width: 100%;
	height: 100%;
	border-radius: 10px;
	transition: .5s;
}


.pic::before{
	content: "FOTO GALÉRIA";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
	font-size: 22px;
	font-weight: bold;
	width: 100%;
	margin-top: -100px;
	opacity: 0;
	transition: .3s;
	transition-delay: .2s;
	text-align: center;
	z-index: 1;

}

.pic::after{
	content: "";
	position: absolute;
	width: 100%;
	border-radius: 10px;
	height: 0;
	background-color: rgba(0, 0, 0, .4);
	bottom: 0;
	left: 0;
	transition: .3s;

}

.pic:hover::after{
	height: 100%;
}

.pic:hover::before{
	margin-top: 0;
	opacity: 1;
}


/* Formular//////////////////////////////////////////*/
.formular{
	width: 500px;
	background-color: #fff;
	box-shadow: 0 0 20px 0 #999;
	top: 54.5%;
	left: 50%;
	transform: translate(30%,-80%);
	position: absolute;
}

form{
	margin: 35px;
}

.input-field{
	width: 400px;
	height: 40px;
	margin-top: 20px;
	padding-left: 10px;
	padding-right: 10px;
	border: 1px solid #777;
	border-radius: 14px;
	outline: none;
}

.textarea-field{
	height: 150px;
	padding-top: 10px;
}

.btn{
	border-radius: 20px;
	color: black;
	margin-top: 18px;
	padding: 10px;
	background-color: #ffd55a;
	font-size: 12px;
	border: none;
	cursor: pointer;
	width: 100px;

}

button:hover{
	background-color: #91772c;
}


.kontakty{
	width: 100%;
	margin: auto;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 100px;
	align-content: center;
}


/* Video////////////*/
.iframe-container{
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	height: 0;

}

.iframe-container iframe{
	position: absolute;
	top: 0;
	left: 12.5%;
	width: 75%;
	height: 75%;

}

.ofset-tlac{
	margin-left: 10%;
	margin-right: 10%;
	margin-bottom: 5%;
	margin-top: 5%;
}

.bold{
	font-weight: bolder;
	font-size: 20px;
}
.hyperlink{
	font-style: italic;
}
.hyperlink-link{
	font-style: italic;
	color: #ffd55a;
}
.hyperlink-link:hover{
	color: #91772c;
	text-decoration: underline;

}

.ordered-list{
	text-align: left;
	display: block;
	justify-content: left;
}