html{
scroll-behavior: smooth;
}

#zahlavi {
  position:relative;
  height:0%;
}

#header {
  position:relative;
  padding-top: 15%;
  width:100%;
  overflow:hidden;
}

#header img{
  width:100%;
}


@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
#cssmenu {
  background: #496A8A;
  width: 100%;
  z-index: 2;
  overflow:auto;
  max-height:12.5%;
}
#cssmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 26px;
  display: block;
  zoom: 1;
}
#cssmenu ul:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#cssmenu ul li {
  display: inline-block;
  padding: 0;
  margin: 0;
}

#cssmenu ul li a {
  color: #ffffff;
  text-decoration: none;
  margin: center;    
  display: inline-block;  
  padding: 12px 12px;
  align-content: center;
  font-family: Century Gothic, Calibri, sans-serif;
  text-transform: uppercase; 
  font-size: 16;
  letter-spacing:2px;
  position: relative;     
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;  
}
#cssmenu ul li a:hover {
  color: #7EB7ED;     
}      
#cssmenu ul li a:hover:before {
  width: 100%;   
}   
#cssmenu ul li a:after {
  opacity: 0;
}
#cssmenu ul li a:before {
  content: "";
  position: absolute;
  left: 0px; 
  bottom: 0px;
  height: 3px;
  width: 0;
  background: #7EB7ED;
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}

#cssmenu ul li.active a {
  color: #496A8A;  
  background: #496A8A;   
}
#cssmenu ul li a img {
  background: #ffffff;       
    -webkit-transition: background .25s;
  -moz-transition: background .25s;
  -ms-transition: background .25s;
  -o-transition: background .25s;
  transition: background .25s;    
}   

#cssmenu ul li a:hover img{
  background: #7EB7ED;
}
#cssmenu ul li.active a:before {
  width: 100%;
}

#cssmenu.align-right li.last > a:after,
#cssmenu.align-right li:last-child > a:after {
  display: block;
}
#cssmenu.align-right li:first-child a:after {
  display: none;
}
@media screen and (max-width: 768px) {
  #cssmenu {
  font-size: 16;
 }
 #cssmenu ul li {
    float: none;
    display: block;
  }
  #cssmenu ul li a {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #496A8A;
  }
  #cssmenu ul li.last > a,
  #cssmenu ul li:last-child > a {
    border: 100px;
  }
  #cssmenu ul li a:after {
    display: none;
  }
  #cssmenu ul li a:before {
    display: none;
  }

}

		#cssmenu::-webkit-scrollbar {
			width: 50px;
		}

			/* Track */
		#cssmenu::-webkit-scrollbar-track {
			opacity: 0; 
		}
 
			/* Handle */
		#cssmenu::-webkit-scrollbar-thumb {
			background: #7EB7ED; 
		}

		
/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

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

div.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}

.lang {
  position: absolute;
  right: 5%;
  margin:auto;
}

 #video {
	 position: relative;
    text-align: center;
	background-color: #040d1a;
	padding-top: 56%;
	width:100%;
	display : flex;
	align-items : center;
	justify-content: center;
 }
 
  #video iframe{
	align-items: center;
	position:absolute;
	top: 14%;
 }


/* On smaller screens, decrease text size */
@media only screen and (max-width: 450px){
	#cssmenu {
	font-size: 11;
}
}


#uvod {
	position: relative;
	background-color: lightblue;
	height:100%;
}       


	#uvod img{
		position: relative;
		float: left;
		height: 80%;
	}    
    
	#uvod ul{
		position: relative;
		text-align:left;
		margin: auto; 
		top:8.5%;
		list-style: none;
	}       

	#uvod li{
		position: relative;
		height:30%;
	}       

	#uvod3 {
		position: absolute;
		top: 50%; 
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		width: 55%;	
		left:35%;
		font-size: 1.5vw;
		color:#336289;
		margin:auto;
		text-align:left;
		padding:50px;   
		font-family: Century Gothic, Calibri, sans-serif;
		border-color: #496A8A;
		border-width:20px;  
		text-align: justify;
		border-style: none;
		border-radius: 50px;
		max-height:100%;
	}

	#uvod1  {
		position: relative;
		margin: auto;  
		padding: 10px;    
		width: 77.5%;
	}       

	#uvod2  {
		position: relative;
		margin: auto;  
		padding: 10px;    
		width: 90%;
	}       






#technologie {
	position: relative;
	background-color: #040d1a;
	padding-top:120%;
	overflow: hidden;
}               

	#technologie img {
		position: absolute;
		width:100%;
		top:-5%;
	}      
	
	.tech_nadpis {
		position: absolute;
		left:10%;
		top:11%;
		color:white;
		font-size:4vw;
		max-height:40%;
		padding:10px;
		overflow:auto;
		letter-spacing:3px;
		font-family: Century Gothic, Calibri, sans-serif;
		font-weight:bold;
		text-align: justify;
	}      
	
	.tech_podnadpis {
		position: absolute;
		left:10%;
		top:27.5%;
		color:white;
		font-size:1.8vw;
		max-height:40%;
		width:50%;
		padding:10px;
		overflow:auto;
		text-shadow:2px 2px 2px #000000;
		font-family: Century Gothic, Calibri, sans-serif;
		text-align: justify;
	}      
	
	.tech_text {
		position: absolute;
		width:37.5%;
		left:9%;
		top:53.75%;
		color:white;
		font-size:1.3vw;
		max-height:40%;
		padding:10px;
		overflow:auto;
		font-family: Century Gothic, Calibri, sans-serif;
		text-align: justify;
	}      
	
		.tech_text::-webkit-scrollbar {
			width: 10px;
		}

			/* Track */
		.tech_text::-webkit-scrollbar-track {
			opacity: 0; 
		}
 
			/* Handle */
		.tech_text::-webkit-scrollbar-thumb {
			background: #888; 
		}

			/* Handle on hover */
		.tech_text::-webkit-scrollbar-thumb:hover {
			background: #555; 
		}

	.slideshow-container {
		top:63.5%;
		width: 35%;
		height:40%;
		overflow:hidden;
		position: absolute;
		margin: auto;
		right:7.5%;
	}

	.mySlides {
		display: none;
	}

	.prev, .next {
		cursor: pointer;
		position: absolute;
		top: 46%;
		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 {
		color: #496A8A;
	}

	.numbertext {
		color: #f2f2f2;
		font-size: 12px;
		padding: 8px 12px;
		position: absolute;
		top: 0;
	}

	.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}
	}




#produkty {
	position: relative;
	background-color: #C1E0F4;
	padding-top:60%;
}               

	#produkty_text {
		position: absolute;
		left:60%;
		top:10%;
		color:#496A8A;
		font-size:2vw;
		max-height:40%;
		padding:10px;
		overflow:auto;
		letter-spacing:3px;
		font-family: Century Gothic, Calibri, sans-serif;
		text-align: justify;
	}      
	
	#border-line  {
		position: absolute;
		right:2.75%;
		top:22%;
		background-color:#496A8A;
		width:39%;
		height:0.3%;
	} 
	
	#vyber {
		position:absolute;
		top:22.5%;
		height:70%;
		width:36%;
		right:4%;
		overflow: auto;
	}       
	
	#rada {
		position:relative;
		top:2.5%;
		right:2%;
	}    
	#rada2 {
		position:relative;
		top:0.5%;
		right:2%;
	}    
	#rada3 {
		position:relative;
		top:-1.5%;
		right:2%;
	}      
	#rada4 {
		position:relative;
		top:-3.5%;
		right:2%;
	}      	


	.column {
		float: left;
		width: 25%;
		height:22.5%;
		padding: 10px;
		overflow:hidden;
	}

	.column img {
		opacity: 0.8; 
		cursor: pointer; 
	}

	.column img:hover {
		opacity: 1;
	}
	.row:after {
		display: table;
		clear: both;
	}

	/* The expanding image container (positioning is needed to position the close button and the text) */
	.container {
		position: absolute;
		top: 12.5%; 
		float:left;
		width:50%;
		height:80%;
		left:5%;
		overflow:hidden;  
	}
	
	.initial {
		position: absolute;
		top: 12.5%; 
		float:left;
		width:50%;
		height:80%;
		left:5%;
		overflow:hidden;  
	}
	.initial img{
		height: 100%;
	}
	
	#initialtext {
		position: absolute;
		bottom: -5px;
		left: 15px;
		color: white;
		font-size: 20px;
		font-family: Century Gothic;
	}
	#imgtext {
		position: absolute;
		bottom: 15px;
		left: 15px;
		color: white;
		font-size: 20px;
		font-family: Century Gothic;
	}





#kontakty {
	position: relative;
	background-color: #3F7DA8;
	height:100%;
}               

	#kontakt_volba {
	position: absolute;
	top: 10%; 
	font-size: 1.5vw;
	color:white;
	text-align:left;
	margin:auto;
	font-family: Century Gothic, Calibri, sans-serif;
	right:12.5%;
	padding: 5%;
	border-style:dashed;
	border-width: 3px;
	border-color: white;
	}      
	
	#kontakt_firma {
	position: absolute;
	top: 10%; 
	background-color:white;
	font-size: 1.3vw;
	color:#005F89;
	text-align:left;
	margin:auto;
	font-family: Century Gothic, Calibri, sans-serif;
	left:12.5%;
	padding: 20px;
	border-style:solid;
	border-width: 0 10px 10px 0;
	border-color: #005F89;
	border-radius: 0 10px 0 10px;
	}      

	#kontakt_lidi {
	position: absolute;
	top: 77%; 
	left:10%;
	width: 80%;
	font-size: 1.3vw;
	color:#005F89;
	margin:auto;
	font-family: Century Gothic, Calibri, sans-serif;
	}  
	
	#kon_bkg1 {
		position: absolute;
		background-color:white;
		top:75.5%;
		left:12.5%;
		width:20%;
		height:21.5%;
		border-style:solid;
		border-width: 0 10px 10px 0;
		border-radius: 0 10px 0 10px;
		border-color: #005F89;
	}  
	
	#kon_bkg2 {
		position: absolute;
		background-color:white;
		top:75.5%;
		left:36.5%;
		width:20%;
		height:21.5%;
		border-style:solid;
		border-width: 0 10px 10px 0;
		border-radius: 0 10px 0 10px;
		border-color: #005F89;
	}  
	
	#kon_bkg3 {
		position: absolute;
		background-color:white;
		top:75.5%;
		left:60.5%;
		width:27%;
		height:21.5%;
		border-style:solid;
		border-width: 0 10px 10px 0;
		border-radius: 0 10px 0 10px;
		border-color: #005F89;
	}  
	
	
	
	#kontakt_1 {
	position: absolute;
	top: 25%; 
	width: 20%;
	left:5%;
	}  
	#kontakt_2 {
	position: absolute;		
	top: 25%; 
	width: 20%;
	left:35%;
	}  
	#kontakt_3 {
	position: absolute;		
	top: 25%; 
	width: 20%;
	left:65%;
	}  



	#m {
		position: absolute;
		font-size: 10px;
		height:27.5%;
		max-height:50%;
		width:75%;
		top:45%;
		margin:auto;
		left:12.5%;
	}





#zapati {
	position: relative;
	height:3%;
	background-color: #005F89;
	text-align:center;
	font-size:1vw;
}

	#zapati p{
		margin: auto; 
		font-family: Century Gothic;
		color:#ffffff;
	}