﻿
/* hlavní web*/
body {
	    font-family: "Lato", sans-serif;
	   /* background-image: url('images/hlavWebHon.JPG')*/
}
			


a:link, a:visited
{
	color: #1E3C59;
	text-decoration: none;
	font-weight: bold;
}

a:hover
{
    color: #1D60FF;
    text-decoration: none;
}




/*a:active
{

    margin-bottom: 10px;
    line-height: 1.6em;
	height: 87px;
}*/


			
.sidenav {
			height: 100%;
			width: 0;
			position: fixed;
			z-index: 1;
			top: 0;
			left: 0;
			background-color: #003366;
			overflow-x: hidden;
			transition: 0.5s;
			padding-top: 60px;
}
			
.sidenav a {
	padding: 8px 8px 8px 32px;
	text-decoration: none;
	font-size: 25px;
	font-weight: normal;
	color: #6699FF;
	display: block;
	transition: 0.5s;
}
			
.sidenav a:hover, .offcanvas a:focus{
		    color: #f1f1f1;
}
			
.sidenav .closebtn {
		    position: absolute;
		    top: 0;
		    right: 25px;
		    font-size: 36px;
		    margin-left: 50px;
}

		
#main {
			transition: margin-left .5s;
			padding: 20px;
			height: 90px;
			background: #002244;
}
		
.Hlavicka {
			position:fixed;
		
}
.HlavNadpis {
			color: #BDBD00;
}
			
@media screen and (max-height: 450px) {
		  .sidenav {padding-top: 15px;}
		  .sidenav a {font-size: 18px;}
}

/*kontakt*/

#templatemo_main {
	clear: both;
	width: 100%;
	padding: 20px 20px 20px 20px;
}

.col_fw { margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid #a3a3a3 }
.col_fw_last { padding-bottom: 20px }
.col_fw_lastR { padding-bottom: 20px;
				position: relative;
				width: 100%;
			/*	width:300px; */
 }

.col_w460 { width: 460px } 
	.col_w300 { 
	padding-left:20px;
	position: relative;
	width: 50%;
}
.col_w300B { 
	padding-left:120px;
	position: relative;
	width: 50%;
 

}
.col_w200 { width: 200px }

.col_allw300 { float: left; width: 300px; margin-right: 10px }
.col_w240 { float: left; width: 220px; padding-right: 20px }
.col_w630 { width: 630px }
.col_rm { margin: 0 }

	
.cleaner { clear: both }
.cleanerR { clear: right}
.cleanerB { clear: both }


.h10 { height: 10px }
.h20 { height: 20px }
.h30 { height: 30px }
.h40 { height: 40px }
.h50 { height: 50px }
.h60 { height: 60px }

.float_l { float: left }
.float_r { float: right }


/*zápatí odkazy	*/
#templatemo_footer_wrapper {
	clear: both;
	margin: 0 -20px 0 -20px;
	background: #BACFCF;				/*#A4C1C1;*/
	height: 250px;
}

#templatemo_footer {
	width: 100%;
	color: #808080;
	font-weight: bolder;	

}

.section_w200A {
	float: left;
	width: 20%;
	padding: 20px 0 0 80px;
}

.section_w200 {
	float: left;
	width: 20%;
	padding: 20px 0 0 60px;
}

.section_w180_70 {
	float: left;
	width: 100%;
	padding: 0 0 10px 20px;
	font-size: small;
}
.section_w180_content {
	padding: 0 0 0 0px;
}

.footer_menu_list {
	margin: 0px;
	list-style: none;
	font-size: x-small;
	line-height: 20px;
}

/*zápatí Honore copyright	*/

#templatemo_footer_wrapper2 {
	clear: both;
	margin: 0 -20px 0 -20px;
	background: #C0C0C0; /*#669999;*/
	height: 30px;
}

#templatemo_footer2 {
	width: 93%;
	padding: 0 0 0 0px;
	margin: 0 0 0 0px;
	color: #808080;
	font-weight: bolder;
	text-align: center;
	font-size: x-small;
	padding-top: 10px;
}

.footer {
	margin-top: 10px;
	padding-bottom: 20px;
	height: 100px;
	width: 100%;
	text-align:center;
	
}

.foot {
	color: #183149;
	text-decoration: none;
	text-align: center;
	color: #CCCCCC;
	font-weight: bolder;
	background: #006699;
	height:20px;
}

a.foot {
	color: #183149;
	text-decoration:none;
	
}


a.foot:hover {
	color: #4884FF
}


#templatemo_copyright {
	width: 100%;
	margin: 0 auto;
	padding: 30px;
	text-align: center;
	color: #808080;
}
		
	
/* akordeon-rozevírací seznam*/
		button.accordion {
		    background-color: #eee;
		    color: #444;
		    cursor: pointer;
		    padding: 18px;
		    width: 100%;
		    border: none;
		    text-align: left;
		    outline: none;
		    font-size: 17px;
		    transition: 0.4s;
		}
		
		button.accordion.active, button.accordion:hover {
		    background-color: #ddd; 
		}
		
		div.panel {
		    padding: 0 18px 20px 0;
		    display: none;
		    background-color: white;
		}
		
		div.panel.show {
		    display: block;
		    		 
		}



/* obrázek po přejetí myší text*/
	.container {
	padding: 20px 20px 20px 0;
	position: relative;
	width: 50%;
	float: left;
}
			
	.image {
		display: block;
		width: 100%;
		height: 300px;
		padding-bottom: 0px;
		margin-bottom: 0px;
}
			
	.overlay {
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	background-color: #008CBA;
	overflow: hidden;
	width: 97%;
	height: 0;
	transition: .9s ease;
}
	.overlay2 {
	position: absolute;
	bottom: 20px;
	left: 0;
	right: 0;
	background-color: #336699; /* #003366; tmavší z půopisků slidů */
	overflow: hidden;
	width: 97%;
	height: 0;
	transition: .9s ease;
}		
			.container:hover .overlay {
			  height: 90%;
			}
			.container:hover .overlay2 {
			  height: 90%;
			}
			
			.text {
			  
			  color: white;
			  font-size: 20px;
			  position: relative;
			  text-align:center;
			  top: 20%;
			  
			  font-style:
			  
		/*	  	white-space: nowrap; 
				overflow: hidden;
			  	
			  	left: 50%;
			  	transform: translate(-50%, -50%);
			  	-ms-transform: translate(-50%, -50%);*/
			}


/* The Modal (background) po stisku tlačítka modální okno se zatmaveným pozadím*/
	.modal {
	    display: none; /* Hidden by default */
	    position: fixed; /* Stay in place */
	    z-index: 1; /* Sit on top */
	    padding-top: 20px; /* Location of the box */
	    left: 0;
	    top: 0;
	    width: 100%; /* Full width */
	    height: 100%; /* Full height */
	    overflow: auto; /* Enable scroll if needed */
	    background-color: rgb(0,0,0); /* Fallback color */
	    background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
	}
	
			/* Modal Content */
			.modal-content {
			  position: relative;
			  background-color: #fefefe;
			  margin: auto;
			  padding: 0px;
			  border: 0px solid #888;
			  width: 80%;
			  max-width: 800px;
			  height: 85%;
			  max-height:500px;
			}
		
	
/* modal 2 měnící se 4 okna vedle sebe po přejezdu myší*/
			body {
			  font-family: Verdana, sans-serif;
			  margin: 0;
			}
			
			* {
			  box-sizing: border-box;
			}
			
		.row > .column {
			 
			}
			
		.row:after {
			  content: "";
			  display: table;
			  clear: both;
			}
	
	.column2 {
			  float: left;
			  width: 50%;
 			  padding: 20px 8px;			
 			}

	
	.column3 {
			  float: left;
			  width: 33%;
 			  padding: 20px 8px;			
 			}
		
	.column4 {
			  float: left;
			  width: 25%;
 			  padding: 20px 8px;			
 			}
			
	/* skryté titulky, které slouží zároveň jako odkazy a jsou v řádcích po 5, 
	viz zobrazený text pod každým slidem */
	.columnCaption {
	display:none;
	
	float: left;
	width: 20%;
	max-height: 80px;
	background-color: #003366;
	color: #FFFFFF;
}		
			/* The Modal (background) */
	.modal2 {
	display: none;
	position: fixed;
	z-index: 1;
	padding-top: 100px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: #999999;
}
			
	
	
					
			/* The Close Button */
			.close {
			  color: #999;
			  position: absolute;
			  top: 10px;
			  right: 25px;
			  font-size: 35px;
			  font-weight: bold;
			}
			
						
			
			.close:hover,
			.close:focus {
			  color: white;
			  text-decoration: none;
			  cursor: pointer;
			}
			
			.mySlides {
			  display: none;
			}
			
			.cursor {
			  cursor: pointer
			}
			
			/* Next & previous buttons */
			.prev,
			.next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -50px;
	color: #008CBA;
	font-weight: bold;
	font-size: 20px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
	-webkit-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: white;
				background-color: rgba(0, 0, 0, 0.8);
			}
			
			/* Number text (1/3 etc) */
			.numbertext {
	color: #6699FF;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
}
			
			img {
			  margin-bottom: 0px;
			}
			
			.caption-container {
				text-align: center;
				background-color: #336699;
				padding: 2px 16px;
				color: white;
				width:100%;
				max-height:100px;
}
			
			.demo {
			  opacity: 0.6;
			}
			
			.active,
			.demo:hover {
			  opacity: 1;
			}
			
			img.hover-shadow {
			  transition: 0.3s
			}
			
			.hover-shadow:hover {
			  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
			}


	/*šipky*/			

a.more {
	display: block;
	width: 150px;
	height: 60px;
	line-height: 40;
	color: #000;
	text-align: justify;
	background: url("../images/sipkyDal.png") no-repeat center;
	font-weight: 700;
	text-decoration: none;
}
a.more:hover {
	background: url("../images/sipkyDal1.png") no-repeat center
}



	a.moreNa {
		display: block;
		width: 150px;
		height: 60px;
		line-height: 26px;
		text-align: center;
		background: url('../images/sipkyNa.png') no-repeat center;
		text-decoration: none;
		bottom: 0px;
}
	a.moreNa:hover {
		background: url('../images/sipkyNa1.png') no-repeat center
}
	
		

/* 3 produktové tabulky */
.w3-wide{letter-spacing:4px}
.w3-button{
	background: #003300;
	color: #CCCCCC;
}
.w3-button:hover{
	background: #99CC00;
	color: #003300;
}
w3-button:visited {
	background: #CCCC00;
}

w3-button:active {
	background: #CCCC00;
}


  
.w3-ul{list-style-type:none;padding:0;margin:0}.w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd}.w3-ul li:last-child{border-bottom:none}
.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0px 10px 20px}
.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
.w3-margin-bottom{margin-bottom:16px!important}
.w3-border{border:1px solid #ccc!important}
.w3-center{text-align:center!important}
.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
.w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important}
.w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}.w3-padding-24{padding-top:24px!important;padding-bottom:24px!important}
.w3-padding-32{padding-top:32px!important;padding-bottom:32px!important}.w3-padding-48{padding-top:48px!important;padding-bottom:48px!important}
.w3-padding-large{padding:12px 24px!important}
.w3-green1,.w3-hover-green1:hover{
	color: #fff!important;
	background-color: #99CC00
}
.w3-green2,.w3-hover-green2:hover{
	color: #fff!important;
	background-color: #669900
}
.w3-green3,.w3-hover-green3:hover{
	color: #fff!important;
	background-color: #336600
}
.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
.w3-grey1,.w3-hover-grey1:hover,.w3-gray1,.w3-hover-gray1:hover{
	color: #000!important;
	background-color: #C0C0C0
}
.w3-grey2,.w3-hover-grey2:hover,.w3-gray2,.w3-hover-gray2:hover{
	color: #000!important;
	background-color: #999999
}
.w3-grey3,.w3-hover-grey3:hover,.w3-gray3,.w3-hover-gray3:hover{
	color: #000!important;
	background-color: #808080
}