@charset "utf-8";
/* CSS Document */
/* CSS COPYRIGHT 2018
   Joachim W. Böcker
   www.cogodis.de */
   
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700');

.height100P { 
	min-height: 100%;
	height: auto !important;
	height: 100%;	
}

h1 {
	text-align: center;
	margin: 0;
}

body {
	height: 100%;
	margin: 0;
	font-family: "Source Sans Pro", sans-serif;
}
#mainframe {
	padding-left: 5px;	
	padding-right: 5px;	
}
.frame {
	padding: 25px;
}

#logo {
	background-image: url(https://www.cogodis.de/images/gallery/Basis/logo_cogodis_de_2.png);
	background-size: 100%; 
	float: left; 
	/*background-color: #444;*/
	/* border: 1px solid black; */
}

#service {
	padding-left: 35%;
	/*height: 55px; */
}
#service_list {
	padding: 0;
	margin: 0;
}	
#service_list li {
	/*float: left; */
	/*display: block;*/
	display: table-cell;
	padding: 5px;
	text-align: center;	
}	

#topnav {
	overflow: hidden;
	border: 1px solid gray;
	background: #7d7e7d; /* Old browsers */
	background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 63%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 63%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 63%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */    
	-webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px;  
}
#topnav a {
	float: left;
	display: block;
	color: #f2f2f2;
	text-align: center;
	text-decoration: none;
}
#topnav a:hover {
	background-color: #ddd;
	color: black;
}

.toplink {
	background: rgb(255,178,178); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(255,178,178,1) 0%, rgba(255,48,25,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,178,178,1) 0%,rgba(255,48,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,178,178,1) 0%,rgba(255,48,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb2b2', endColorstr='#ff3019',GradientType=0 ); /* IE6-9 */	
	font-weight: bold;
	color: white;
}

#middlepart {

}
#middlepart-left {
	float: left;
	width: 50%;
}
#middlepart-right {
	#padding: 25px;
}

.header span {
	color: red;
	padding-right: 15px;
}

.header {
	font-weight: bold;
	font-size: 18px;
	color: #333;	
	padding: 10px;
	border: 1px solid silver;
	background: rgb(245,246,246); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */
	-webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px;  
}
.content {
	padding: 20px;
	font-size: 16px;

}
.content ul {
	padding-left: 20px;
	padding-right: 20px;
	margin: 0;

}
#bottompart {
	/*float: clear;*/
	clear:both;
	padding-top: 15px;
}
.produktlabel {
	font-weight: bold;
}

@media screen and (max-width: 320px) {
	#mainframe {
		padding-top: 1px;	
	}
	#logo {
		height: 20px; 
		width: 80px; 
	}	
	#topnav a {  
		font-size: 10px;
		padding: 4px 8px;
	}
	#service_list {
		display:none;
	}		
	#linktext {
		display:none;
	}
	#middlepart-left {
		float: clear;
		width: 100%;
	}
	#middlepart-right {
		clear:both;
		padding-left: 0;
	}
	.header {
		padding: 4px;
		font-size: 14px;
	}
	.header span {
		padding-right: 4px;
	}
	.content {
		padding: 10px;
		font-size: 12px;
	}
	.content ul {
		padding-left: 10px;
		padding-right: 10px;
	}
	.frame {
		padding: 5px;
	}
	h1 {
		padding: 5px;
		font-size: 12px;
	}
	.produktinfo{
		display:none;
	}
}

@media screen and (min-width: 321px) and (max-width: 600px) {
	#mainframe {
		padding-top: 2px;	
	}
	#logo {
		height: 20px; 
		width: 80px; 
	}
	#topnav a {  
		font-size: 10px;
		padding: 4px 8px;
	}
	#service_list {
		display:none;
	}		
	#middlepart-left {
		float: clear;
		width: 100%;
	}
	#middlepart-right {
		clear:both;
		padding-left: 0;
	}
	.header {
		padding: 5px;
		font-size: 16px;
	}
	.header span {
		padding-right: 5px;
	}
	.content {
		padding: 10px;
		font-size: 14px;
	}
	.content ul {
		padding-left: 10px;
		padding-right: 10px;
	}
	.frame {
		padding: 5px;
	}
	h1 {
		padding: 10px;
		font-size: 16px;
	}
	.produktinfo{
		display:none;
	}
}

@media screen and (min-width: 601px) and (max-width: 1023px) {
	#mainframe {
		padding: 10px;	
	}
	#middlepart {
		padding-top: 10px;

	}
	#middlepart-right {
		padding-left: 20px;
		margin-left: 50%;
	}
	#logo {
		height: 45px; 
		width: 190px; 
		margin: 5px;
	}
	#topnav a {  
		font-size: 14px;
		padding: 12px 14px;
	}
	#service_list {
		font-size: 12px;
		margin-bottom: 8px;
		margin-top: 8px;
	}
	.frame {
		padding: 15px;
	}
	h1 {
		padding: 15px;
		font-size: 20px;
	}
	
}

@media screen and (min-width: 1024px) {
	#mainframe {
		padding: 15px;	
	}
	#middlepart {
		padding-top: 15px;

	}
	#middlepart-right {
		padding-left: 30px;
		margin-left: 50%;
	}
	#logo {
		height: 49px; 
		width: 200px; 
		margin: 10px;
	}	
	#topnav a {  
		font-size: 17px;
		padding: 15px 16px;
	}
	#service_list {
		margin-bottom: 10px;
		margin-top: 10px;
	}	
	h1 {
		padding: 25px;
		font-size: 22px;
	}
}



/* colors and borders */
.pic_gallery { border:1px solid #FFFFFF; ; } /* gallery border color */
.pic_gallery .pic_sm div { } /* thumbnail cell border */
.pic_gallery .pic_lg label { } /* main photo cell border */
.pic_gallery .pic_sm img { } /* thumbnail border */
.pic_gallery .pic_lg img { } /* main photo border */
.pic_gallery .pic_set:hover .pic_sm div { color: red; } /* thumbnail border hover color */
.pic_gallery { background-color:#FFFFFF; } /* gallery background color */
.pic_gallery .pic_sm div, 
.pic_gallery .pic_lg label { background-color:#FFFFFF; } /* cell background color */
.pic_gallery .pic_head,
.pic_gallery .pic_foot { color:#FFFFFF;} /* gallery text color */

/* text */
.pic_gallery { font-family:arial; font-size:16px; }
.pic_gallery .pic_head { display:none; text-align:center; font-size:.88em; font-weight:bold; padding-top:.5em; }
.pic_gallery .pic_foot { display:none; text-align:center; font-size:.7em;  }

/* shadows and corners */
.pic_gallery .pic_sm {  }
.pic_gallery .pic_lg {  }
.pic_gallery .pic_sm div {  } /* cell corners and shadows */
.pic_gallery .pic_lg label {  } /* cell corners and shadows */
.pic_gallery .pic_sm img {  } /* image corners and shadows */
.pic_gallery .pic_lg img {  } /* image corners and shadows */

/* sizing, matting, and margins (all values interact and vary by aspect ratio and image count) */
.pic_gallery { width:100%; max-width:515px; } /* change this % in media queries */
.pic_gallery .pic_gal_5x1 { width:100%; padding-top:83.75%; }
.pic_gallery .pic_gal_5x1 .pic_gal_cells { width:97.46%; height:96.96%; } /* sets padding around entire gallery */
.pic_gallery .pic_gal_5x1 .pic_sm { width:15.62%; height:18.75%; margin:0.52%; }
.pic_gallery .pic_gal_5x1 .pic_lg { width:82.29%; height:98.75%; margin:0.52%; }
.pic_gallery .pic_gal_5x1 .pic_sm img { max-width:83.33%; max-height:83.33%; } /* sets margin around thumbnail */
.pic_gallery .pic_gal_5x1 .pic_lg img { max-width:96.83%; max-height:96.83%; } /* sets margin around large photo */

/* structural */
.pic_gallery, .pic_gallery * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.pic_gallery, .pic_gallery .pic_gal { position:relative; margin:auto; }
.pic_gallery .pic_gal_cells { position:absolute; left:0; top:0; bottom:0; right:0; margin:auto; }
.pic_gallery img { position:absolute; width:auto; height:auto; left:0; top:0; bottom:0; right:0; margin:auto; }
.pic_gallery .pic_sm { position:relative; overflow:hidden; float:left; display:block; }
.pic_gallery .pic_lg { position:absolute; overflow:hidden; display:none; right:0%; top:0%; z-index:1; }
.pic_gallery .pic_sm div, 
.pic_gallery .pic_lg label { position:absolute; left:0%; top:0%; right:0%; bottom:0%; }
.pic_gallery .pic_lg { display:none; }
.pic_gallery .pic_lg.pic_main { position:relative; display:block; float:right; z-index:0; } /* turn on default large photo */
.pic_gallery .pic_set:hover .pic_sm div { opacity:.5; border:1px solid; }
.pic_gallery .pic_main { visibility:hidden; }
.pic_gallery input { position:absolute; top:0; left:0; visibility:hidden; }
.pic_gallery input:checked + label + div.pic_lg { display:block }
.pic_gallery input:checked + label { opacity:.5; }

/* supersize overlay */
.pic_gallery input:checked + label + .pic_lg label { opacity:1; }
.pic_gallery input:checked + label + .pic_lg input:checked + label { background:transparent; 
	position:fixed; z-index:999; top:0; left:0; width:100%; height:100%; 
	display:flex; justify-content:center; align-items:center; }
.pic_gallery input:checked +label+ .pic_lg input:checked + label::before { content:""; 
	position:absolute; left:0; top:0; width:100%;height:100%; background-color:rgba(0,0,0,.7); }
.pic_gallery input:checked +label+ .pic_lg input:checked + label img { 
	background:white; max-width: 98%; max-height: 98%; }