@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);

html, body {
	margin: 0px;
	padding: 0px;
}

body {
	font-family: 'Roboto', sans-serif;
	/*font-family: 'Ubuntu', sans-serif;*/
	font-weight: 300;
	font-size: 12pt;
	line-height: 2;
	background-color: #555;
}

table {
	border-collapse: collapse;
    border-spacing: 0;
    max-width: 100%;
    width: 100%;
    empty-cells: show;
	margin-bottom: 15px;
}

	th:first-child, td:first-child {
		padding-left: 0;
	}
	
	th, td {
		text-align: left;
		padding: 16px;
		padding-bottom: 15px;
		border-bottom: 1px solid #ddd;
	}
	
	td {
		vertical-align: top;
	}

hr {
	border-top: 1px solid #555;
}

h1 {
	font-weight: 500;
	font-size: 20pt;
	color: #aaa;
	margin: 0px 0px 15px 0px;
	padding: 10px; 
	text-align: left;
	display: block;
	background-color: #333;
	box-shadow: 0px 2px 5px #888;
	border-radius: 5px;
}

h2 {
	font-weight: 500;
	font-size: 16pt;
	color: #004f7c;
	margin: 20px 0px 15px 0px; 
	text-align: left;
}

h3 {
	font-weight: 500;
	font-size: 14pt;
	color: #004f7c;
	margin: 0px;
	padding: 0px; 
	text-align: left;
}

h4 {
	font-weight: 500;
	font-size: 12pt;
	color: #ff0000;
	margin: 0px 0px 10px 0px;
	padding: 0px; 
	text-align: left;
	text-transform: uppercase;
	line-height: 1.5;
}

h5 {
	font-weight: 500;
	font-size: 12pt;
	color: #000;
	margin: 0px 0px 10px 0px;
	padding: 0px; 
	text-align: left;
	text-transform: uppercase;
	line-height: 1.5;
}

textarea, input[type="text"], input[type="password"], input[type="button"], input[type="submit"] {
	-webkit-appearance: none;
	border-radius: 0;
	border: 1px #aaa solid;
}

div.clearleft {
	clear: left;
}

div.clearright {
	clear: right;
}

div.clearboth {
	clear: both;
}

div.height15 {
	display: block;
	height: 15px;
	width: 1px;
}

div.height20 {
	display: block;
	height: 20px;
	width: 1px;
}

a.button:link, a.button:visited, a.button_small:link, a.button_small:visited {
	padding: 8px;
	background-color: #ff0000;
	border: 1px #ff0000 solid;
	text-transform: uppercase;
	color: #fff !important;
	font-family: 'Roboto', sans-serif;
	/*font-family: 'Ubuntu', sans-serif;*/
	font-size: 12pt;
	font-weight: 300 !important;
	line-height: 2;
	margin: 0px 2px;
}

input.button {
	padding: 8px;
	background-color: #ff0000;
	border: 1px #ff0000 solid;
	text-transform: uppercase;
	color: #fff !important;
	font-family: 'Roboto', sans-serif;
	/*font-family: 'Ubuntu', sans-serif;*/
	font-size: 12pt;
	font-weight: 300 !important;
	line-height: 2;
	margin: 0px 2px;
}

a.button_small:link, a.button_small:visited {
	padding: 6px;
	font-size: 10pt;
}

a.button:hover, a.button:active, a.button_small:hover, a.button_small:active {
	background-color: #ff3333;
}

input.button:hover {
	background-color: #ff3333;
	cursor: pointer;
}

.red {
	color: #ff0000 !important;
}

/*input[type=text] {
	width: 185px;
}

input[type=submit] {
	width: 189px;
	height: 30px;
}*/

input.plz {
	width: 30px;
	margin-right: 3px;
}

input.ort {
	width: 146px;
}

span.hinweis {
	display: block;
	width: 189px;
	font-size: 10pt;
	color: #ff0000;
	line-height: 1.3;
}

span.panel_title {
	display: block;
	font-weight: 500;
	font-size: 12pt;
	color: #ff0000;
	padding: 0px 0px 25px 0px;
	text-transform: uppercase;
}

li.zusatzlink {
	display: none;
}

#container {
	width: 100%;
}

	#part0 {
		width: 100%;
		height: 75px;
		padding: 25px 0px;
		background-color: #fff;
		/*border-bottom: 4px #ff0000 solid;*/
	}
	
		#part0_inner {
			width: 800px;
			height: 100%;
			margin: 0px auto;
		}
			
			#part0_logo {
				width: 150px;
				height: 75px;
				float: left;
				/*background-image: url(logo3.png);
				background-repeat: no-repeat;*/
			}
			
			#part0_info {
				height: 30px;
				float: right;
				padding: 2px 15px 0px 15px;
				background-color: #555;
				color: #fff;
				margin-top: -25px;
				font-size: 10pt;
			}
			
				#part0_info a:link, #part0_info a:visited {
					color: #fff;
					text-decoration: none;
				}
				
				#part0_info a:hover, #part0_info a:active {
					color: #ff0000;
				}
			
			#loginform {
				display: none;
				background-color: #555;
			}
			
				#loginform_inner {
					width: 800px;
					height: 100%;
					margin: 0px auto;
					color: #fff;
					padding: 25px 0px;
				}
				
					div.loginform_half {
						width: 50%;
						float: left;
					}
				
					div.loginform_half input[type=text], div.loginform_half input[type=password] {
						margin-bottom: 5px;
						width: 85%;
						height: 15px;
						padding: 2%;
						font-family: 'Roboto', sans-serif;
						/*font-family: 'Ubuntu', sans-serif;*/
						font-size: 12pt;
						color: #000;
						font-weight: 300;
					}
					
					div.loginform_half input[type=submit] {
						cursor: pointer;
						margin-top: 5px;
						padding: 5px 10px;
						background-color: #ff0000;
						border: 1px #ff0000 solid;
						text-transform: uppercase;
						color: #fff;
						font-family: 'Roboto', sans-serif;
						/*font-family: 'Ubuntu', sans-serif;*/
						font-size: 12pt;
						font-weight: 300;
						line-height: 2;
					}
					
					div.loginform_half input[type=submit]:hover {
						background-color: #ff3333;
					}
			
			#part0_slogan {
				width: 332px;
				height: 30px;
				float: right;
				background-image: url(logo_rechts.png);
				background-repeat: no-repeat;
				margin-left: 130px;
				margin-top: 38px;
			}
			
			#part0_navigation_mobile {
				display: none;
				margin-top: 10px;
				float: right;
				width: 30px;
				height: 30px;
			}

	#part2 {
		width: 100%;
		height: 400px;
		background-color: #f1f1f1;
	}
	
		#part2_inner {
			width: 800px;
			height: 100%;
			padding: 0px;
			margin: 0px auto;
			background-image: url(background.jpg);
			background-repeat: no-repeat;
		}
		
			span.slider_title {
				position: absolute;
				padding: 15px 15px 15px 25px;
				background-color: #fff;
				margin-top: 138px;
				opacity: 0.8;
				font-weight: 400;
				text-transform: uppercase;
			}
			
				span.slider_title a:link, span.slider_title a:visited {
					color: inherit;
					text-decoration: none;
				}
				
				span.slider_title a:hover, span.slider_title a:active {
					text-decoration: underline;
				}
			
			span.slider_desc {
				position: absolute;
				padding: 15px 15px 15px 25px;
				background-color: #fff;
				margin-top: 204px;
				opacity: 0.8;
				max-width: 20%;
				font-size: 11pt;
			}
			
			#part2_logo {
				padding: 10px;
				display: block;
				width: 180px;
				height: 130px;
				background-color: #fff;
				border-bottom: 4px #004f7c solid;
			}
			
			#part2_navigation_mobile {
				display: none;
				margin-top: 2.5%;
				float: right;
				width: 30px;
				height: 30px;
			}
	
	#part05 {
		width: 100%;
		height: 35px;
		background-color: #ffe210;
	}
	
		#part05_inner {
			width: 800px;
			margin: 0px auto;
			text-align: center;
			line-height: 35px;
		}
	
	#part1 {
		width: 100%;
		height: 50px;
		background-color: #555;
		border-bottom: 4px #ff0000 solid;
	}
	
		#part1_inner {
			width: 800px;
			margin: 0px auto;
		}
			
			#panel {
				width: 100%;
				display: none;
			}
			
				#panel ul {
					list-style-type: none;
					padding: 0px;
					margin: 0px;
				}
				
					#panel ul li {
						text-align: center;
					}
				
						#panel ul li a:link, #panel ul li a:visited {
							display: none;
							padding: 5px 0px;
							width: 100%;
							text-decoration: none;
							color: #555;
							background-color: #fff;
							border-bottom: 1px #555 solid;
							text-transform: uppercase;
						}
			
			#part1_navigation {
				float: left;
			}
			
				#part1_navigation ul {
					margin: 0px;
					padding: 0px;
					list-style-type: none;
				}
				
					#part1_navigation ul li {
						float: left;
					}
			
						#part1_navigation ul li a:link, #part1_navigation ul li a:visited {
							text-transform: uppercase;
							font-weight: 300;
							text-decoration: none;
							color: #fff;
							display: block;
							line-height: 50px;
							padding: 0px 10px;
							font-size: 11pt;
						}
						
							.home {
								background-color: #ff0000;
							}
						
						#part1_navigation ul li a:hover, #part1_navigation ul li a:active {
							color: #fff;
							background-color: #ff0000;
						}
						
						#part1_navigation ul li a.less:link, #part1_navigation ul li a.less:visited,
						#part1_navigation ul li a.less:hover, #part1_navigation ul li a.less:active {
							font-weight: 300;
						}
	
	#part3 {
		background-color: #fff;
	}
	
		#part3 a:link, #part3 a:visited {
			text-decoration: none;
			color: #ff0000;
			font-weight: 400;
		}
		
		#part3 a:hover, #part3 a:active {
			text-decoration: none;
			color: #555;
			font-weight: 400;
		}
		
		span.link {
			color: #ff0000;
			font-weight: 400;
		}
	
		#part3_inner {
			width: 800px;
			padding: 25px 0px;
			margin: 0px auto;
		}
		
		#part3_inner_portfolio {
			width: 800px;
			padding: 20px 0px 0px 0px;
			margin: 0px auto;
		}
		
			#part3_inner_left {
				width: 240px;
				float: left;
				margin-right: 40px;
			}
			
			#part3_inner_left_shop {
				width: 520px;
				float: left;
				margin-right: 40px;
			}
			
				#part3_inner_left ul {
					margin: 0px;
					padding: 0px;
					list-style-type: none;
				}
				
					#part3_inner_left ul li a:link, #part3_inner_left ul li a:visited {
						background-color: #555;
						display: block;
						padding: 5px 10px;
						font-weight: 300;
						color: #fff;
						border-bottom: 4px #fff solid;
						text-transform: uppercase;
					}
					
					#part3_inner_left ul li a:hover, #part3_inner_left ul li a:active {
						background-color: #ff0000;
					}
			
				#part3_inner_left img {
					width: 100%;
					height: auto;
				}
			
				ul.featured {
					margin: 0px;
					padding: 0px;
					list-style-type: none;
				}
				
				ul.featured li {
					background-image: url(https://webcoders.ch/permanent/logo/webcoders_icon.png);
					background-repeat: no-repeat;
					background-position: 0px 4px;
					padding-left: 30px;
				}
				
				div.entry {
					margin: 10px 0px;
				}
				
					div.entry_pics {
						width: 200px;
						height: 150px;
						float: left;
						margin-right: 15px;
						margin-bottom: 20px;
					}
						
						div.entry_pics img {
							width: 200px !important;
							height: 150px !important;
						}
					
					div.entry_info {
						/*height: 150px;*/
					}
					
						span.preis {
							font-size: 9.5pt;
							font-weight: 500;
							margin-right: 3px;
							color: #555;
						}
			
			#part3_inner_right {
				width: 520px;
				float: left;
			}
			
			#part3_inner_right_shop {
				width: 240px;
				float: left;
			}
			
				#part3_inner_right input[type=text], #part3_inner_right input[type=password] {
					margin-bottom: 5px;
					width: 96%;
					height: 15px;
					padding: 2%;
					font-family: 'Roboto', sans-serif;
					/*font-family: 'Ubuntu', sans-serif;*/
					font-size: 12pt;
					color: #000;
					font-weight: 300;
				}
				
				input[type=number] {
					margin-bottom: 10px;
					height: 15px;
					padding: 2%;
					font-family: 'Roboto', sans-serif;
					/*font-family: 'Ubuntu', sans-serif;*/
					font-size: 12pt;
					color: #000;
					font-weight: 300;
				}
				
				#part3_inner_right textarea {
					margin-bottom: 5px;
					width: 96%;
					height: 90px;
					padding: 2%;
					font-family: 'Roboto', sans-serif;
					/*font-family: 'Ubuntu', sans-serif;*/
					font-size: 12pt;
					color: #000;
					font-weight: 300;
				}
				
				#part3_inner_right input[type=submit], #part3_inner_left input[type=submit] {
					cursor: pointer;
					margin-top: 5px;
					padding: 5px 10px;
					background-color: #ff0000;
					border: 1px #ff0000 solid;
					text-transform: uppercase;
					color: #fff;
					font-family: 'Roboto', sans-serif;
					/*font-family: 'Ubuntu', sans-serif;*/
					font-size: 12pt;
					font-weight: 300;
					line-height: 2;
				}
				
				#part3_inner_right input[type=submit]:hover, #part3_inner_left input[type=submit]:hover {
					background-color: #ff3333;
				}
			
			img.extra {
				width: 100%;
				height: auto;
			}
			
				div.share {
					margin-top: -22px;
					font-size: 11pt;
					text-align: center;
				}
			
				div.box {
					background-color: #004f7c;
					box-shadow: 0px 2px 5px #888;
					margin-bottom: 30px;
					border-radius: 5px;
				}
				
					div.box img {
						width: 100%;
						border-top-right-radius: 5px;
						border-top-left-radius: 5px;
					}
				
					div.box div.text {
						padding: 10px;
					}
			
			div.part3_line {
				margin-bottom: 30px;
			}
			
				div.part3_col_1, div.part3_col_2, div.part3_col_3 {
					width: 246px;
					margin-right: 31px;
					float: left;
				}
				
				div.part3_col_3 {
					margin-right: 0px;
				}
				
					div.part3_col_1 div.box, div.part3_col_2 div.box, div.part3_col_3 div.box {
						margin-bottom: 0px;
					}
				
					div.part3_col_1 img, div.part3_col_2 img, div.part3_col_3 img {
						width: 100%;
					}
	
	#part4 {
		width: 100%;
		background: #004f7c;
		border-top: 4px #ff0000 solid;
	}
	
		#part4_inner {
			color: #004f7c;
			width: 800px;
			padding: 26px 0px;
			margin: 0px auto;
		}
		
			#part4_inner a:link, #part4_inner a:visited {
				text-decoration: none;
				color: #fff;
			}
			
			#part4_inner a:hover, #part4_inner a:active {
				color: #ff0000;
			}
		
			#part4_col_1, #part4_col_2 {
				width: 170px;
				margin-right: 30px;
				float: left;
				color: #fff;
				line-height: 2;
			}
			
			#part4_col_3 {
				width: 400px;
				float: left;
				color: #fff;
				line-height: 2;
			}
	
	#part5 {
		width: 100%;
		background: #555;
		border-top: 4px #ff0000 solid;
	}
	
		#part5_inner {
			color: #fff;
			width: 800px;
			padding: 25px 0px;
			margin: 0px auto;
			font-weight: 300;
			text-align: center;
		}
		
			#part5_inner a:link, #part5_inner a:visited {
				color: #fff;
			}
			
			#part5_inner a:hover, #part5_inner a:active {
				color: #ff0000;
			}
		
			#part5_left {
				float: left;
			}
			
			#part5_right {
				float: right;
			}

/***************************************************************************************/

@media screen and (max-width: 799px){
	body {
		font-size: 11pt !important;
	}
	
	a.button {
		font-size: 11pt !important;
	}
	
	#part1_navigation {
		font-size: 10pt;
	}
	
	#loginform_inner, #part0_inner, #part1_inner, #part2_inner, #part2_featured, #part2_featured img, #part3_inner, #part3_inner_portfolio, #part4_inner, #part5_inner {
		width: 700px;
	}
	
	#part3_inner_left, #part3_inner_left iframe, #part3_inner_right_shop {
		/*width: 450px;*/
		width: 200px;
	}
	
	#part0_logo {
		width: 147px;
		margin-right: 40px;
	}
	
	#part3_inner_right, #part3_inner_left_shop {
		/*width: 210px;*/
		width: 460px;
	}
	
	#part4_col_1, #part4_col_2 {
		width: 145px;
	}
	
	#part4_col_3, #part4_col_3 img {
		width: 350px;
		height: auto;
	}
}

@media screen and (max-width: 699px){
	#part2_logo {
		float: left;
	}
	
	#loginform_inner, #part0_inner, #part1_inner, #part2_inner, #part2_featured, #part2_featured img, #part3_inner, #part3_inner_portfolio, #part4_inner, #part5_inner {
		width: 95%;
	}
	
	#part0_info {
		/*display: none;*/
	}
	
	#part0_slogan {
		display: none;
	}
	
	#part0_navigation_mobile {
		display: block;
		position: absolute;
		top: 53px;
		right: 2.5%;
	}
	
	span.slider_title {
		font-size: 11pt;
		margin-top: 90px;
	}
	
	span.slider_desc {
		font-size: 10pt;
		margin-top: 156px;
	}
	
	#part1 {
		display: none;
	}
	
	#part1_navigation {
		display: none;
	}
	
	#part2_navigation_mobile {
		display: block;
	}
	
	#part3_inner_left, #part3_inner_right_shop {
		width: 100%;
		float: none;
		margin-bottom: 20px;
	}
	
		div.entry_pics {
			width: 100%;
			height: auto;
			float: none;
			margin-right: 0px;
		}
			
			div.entry_pics img {
				width: 100% !important;
				height: auto !important;
			}
		
		div.entry_info {
			height: auto;
			display: block;
			vertical-align: initial;
		}
	
	#part3_inner_left iframe {
		width: 100%;
	}
	
	#part3_inner_right, #part3_inner_left_shop {
		width: 100%;
		float: none;
	}
	
	#part4_col_1, #part4_col_2 {
		width: 23%;
		margin-right: 2%;
	}
	
	#part4_col_3 {
		width: 50%;
	}
	
	#part4_col_3 img {
		width: 100%;
		height: auto;
	}
	
	#part5_inner {
		font-size: 10pt;
	}
	
	#panel ul li a:link, #panel ul li a:visited {
		display: block;
	}
}

@media screen and (max-width: 599px){
	#part0_logo {
		margin-right: 0px;
	}
	
	span.info1 {
		display: none;
	}
	
	li.zusatzlink {
		display: block;
	}
	
	#part4_col_3 {
		display: none;
	}
	
	#part4_col_1 {
		width: 45%;
		margin-right: 5%;
	}
	
	#part4_col_2 {
		width: 50%;
		margin-right: 0%;
	}
	
	#part5_inner {
		font-size: 9pt;
	}
}

@media screen and (max-width: 319px){
	#part5_inner {
		font-size: 8pt;
	}	
}