/*
=======================================================================================================================
  Allgemeine Styles
=======================================================================================================================
*/

* {
	box-sizing: border-box;
	-webkit-text-size-adjust: 100%;
	}

body {
	background: #fff;
	font-family: 'Raleway', serif;
	font-size: 16px;
	line-height: 26px;
	color: #666;
	font-weight: 300;
	padding: 0;
	margin: 0;
	}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Raleway', serif;
	font-weight: 300;
	padding: 10px 0;
	margin: 0;
	}
	
h2 {font-size: 28px; line-height: 38px; text-transform: uppercase;}
h3 {font-size: 25px; line-height: 35px; }
h4 {font-size: 21px; line-height: 30px;}

p {
	font-family: 'Raleway', serif;
	font-size: 16px;
	line-height: 26px;
	font-weight: 300;
	padding: 10px 0;
	margin: 0;
	}

ul, ol { margin: 0; padding: 0; }
li { margin: 0; padding: 0; }

hr { border: 0; border-bottom: 1px solid #eee; height: 1px; margin: 20px 0 20px 0; padding: 0; clear: both;height: 0;}

.bold {font-weight: bold;}
.white {color: #fff;}
.grey {color: #333;}
.blue {color: #62aaa6;}
.yellow {color: #eead2e;}
.brown {color: #ac9877;}
.green {color: #95c11f;}

.name {font-size: 28px; line-height: 38px; text-transform: uppercase; font-weight: 300;	padding: 10px 0 0 0; margin: 0;}
.title {font-size: 20px; line-height: 28px; font-weight: 300; padding: 0 0 10px 0; margin: 0;}

.bg_white {border: 1px solid #eeeeee;}
.bg_grey {background-color:#f4f4f4;}

	.bg_color h2, .bg_color h4, .bg_color p {color: #fff;}

.padding-path {padding: 2px 30px;}
.padding-textbox {padding: 20px 30px 40px 30px;}
.padding-map {padding: 30px 30px 25px 30px;}
.padding-video {padding: 0px; line-height: 0; font-size: 0;}

.ta_center {text-align: center;}

ul.list_big_color {list-style-type: none; font-size: 20px; line-height: 27px; color: #fff; padding: 0 0 0 21px; margin: 10px 0; text-indent: -20px;}
ul.list_big_grey {list-style-type: none; font-size: 20px; line-height: 27px; color: #666; padding: 0 0 0 17px; margin: 10px 0; text-indent: -17px;}
	
	ul.list_big_color li, ul.list_big_grey li {padding: 3px 0;}
	ul.list_big_color li:before, ul.list_big_grey li:before {content: "•"; padding-right: 10px;}

.textbox_right {position: absolute; bottom: 0; right: 0; font-size: 24px; text-transform: uppercase; color: #fff; padding: 12px 15px; z-index: 100;}
.textbox_left {position: absolute; bottom: 0; left: 0; font-size: 24px; text-transform: uppercase; color: #fff; padding: 12px 15px; z-index: 100;}

.gmap {width: 100%; margin: 0;}

a[href^="tel"]:link,
a[href^="tel"]:visited,
a[href^="tel"]:hover {text-decoration: none;cursor:default;}

.entry-thumb {float: left; margin: 0 10px 10px 0; padding: 0;}
.entry-thumb a, .entry-thumb img {display: block;}
.entry-thumb a {position: relative; /* sets the initial position for the thumbnail overlay */}
.entry-thumb img {padding: 0; background: #fff; margin: 0 ; border: 0;}
.entry-thumb span.overlay {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; filter: Alpha(opacity=0); /* IE */ background: #FFF no-repeat center center; }
.entry-thumb span.overlay.image {background-image: url(../images/zoom-image.png);}


/*
=======================================================================================================================
  HOME STYLES
=======================================================================================================================
*/

.homebox h2 {font-size: 35px; line-height: 48px; color: #fff;  text-transform: uppercase; margin: 20px 0; padding: 10px 15px;}
.homebox p {font-size: 20px; line-height: 30px; color: #fff; margin: 15px 0; padding: 10px 15px;}

/* ===== Box und Mouseover ====== */

.box_pool {
	position: absolute; 
	bottom: 0; left: 0; 
	background-color: #eead2e; 
	font-size: 25px;
	text-transform: uppercase;
	color: #fff;
	padding: 10px; 
	z-index: 100;
	}

.box_industrie {
	position: absolute; 
	bottom: 0; left: 0; 
	background-color: #ac9877; 
	font-size: 25px;
	text-transform: uppercase;
	color: #fff;
	padding: 10px; 
	z-index: 100;
	}

.box_trinkwasser {
	position: absolute; 
	bottom: 0; left: 0; 
	background-color: #95c11f; 
	font-size: 25px;
	text-transform: uppercase;
	color: #fff;
	padding: 10px;
	z-index: 100;
	}

.col.pf {
	position:relative;	
	}

.pool_overlay {
	position: absolute;
	left:0;	right:0; bottom:0; top:0; 
	background:rgba(238,173,46,1);
	text-align:center;
	opacity:0;
	-webkit-transition: opacity .5s ease;
	-moz-transition: opacity .5s ease;
	}

.industrie_overlay {
	position: absolute;
	left:0;	right:0; bottom:0; top:0; 
	background:rgba(172,152,119,1);
	text-align:center;
	opacity:0;
	-webkit-transition: opacity .5s ease;
	-moz-transition: opacity .5s ease;
	}

.trinkwasser_overlay {
	position: absolute;
	left:0;	right:0; bottom:0; top:0; 
	background:rgba(149,193,31,1);
	text-align:center;
	opacity:0;
	-webkit-transition: opacity .5s ease;
	-moz-transition: opacity .5s ease;
	}

.pf:hover .pool_overlay, .pf:hover .industrie_overlay, .pf:hover .trinkwasser_overlay {
	opacity:1;
	}

.overlay_plus {
	position:absolute;
	display:block;
	top:50%;
	left:0;
	right:0;
	text-align:center;
	font-size:150px;
	line-height: 150px;
	color:rgba(255,255,255,.85);
	transform: translate(0,-50%);
	-webkit-transform: translate(0,-50%);
	-moz-transform: translate(0,-50%);
	padding: 0;
	overflow: hidden;
	}
		
/*
=======================================================================================================================
  PAGE STYLES
=======================================================================================================================
*/

/* ===== Banner ====== */

.banner_logo {
	position: relative;
	text-align: center;
	padding: 15px 0 10px 0;
	margin: 0;
	}
	
	.banner_logo img {
		max-width: 250px;
		text-align: center;
		margin: 0 auto;
		}	

/* ===== Icons ====== */

.banner_icons {margin-top: 45px; margin-right: 30px;	}

.banner_social {width: 26px; height: 26px; padding: 0; margin-left: 5px; float: right; }
.banner_language {width: 26px; height: 26px; padding: 0; margin-left: 5px;  float: right;}
.banner_text {
	width: 100%;
	font-size: 15px;
	line-height: 18px;
	text-align: right;
	margin: 10px 0;
	padding: 0;
	float: right;
	}
	
/* ===== Menu ====== */

.banner_menu {
	height: 55px;
	background-color: #f4f4f4;
	padding: 0;
	margin: 0 auto;
	text-align: center;
	}

/* ===== Pfad ====== */

.path p {
	font-size: 14px;
	line-height: 20px;
	font-weight: 300;
	color: #999;
	padding: 10px 0;
	}

/* ===== Footer ====== */

.footer {background-color: #3c3c3c; margin: 15px auto 25px auto;}

.padding-footer {padding: 25px 40px 30px 40px;}
.padding-bottom {border-top: 1px solid #595959; padding: 20px 40px 20px 40px; margin: 20px 0 0 0}

.footer h3 {
	padding: 10px 0 25px 0;
	}

.footer p {
	font-size: 16px;
	color: #d9d9d9;
	}

/* ===== Video Responsive ====== */	
	
.responsive-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
	}

.responsive-video {
	position: relative;
	padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
	padding-top: 0px;
	height: 0;
	overflow: hidden;
	border: 0;
	}
		
/* Media Queries
====================================================================== */

/* Big Screens 
====================================================================== */
@media screen and (min-width: 1921px) { 

}
	
/* Tablet Portrait (devices and browsers)
====================================================================== */
@media only screen and (min-width: 801px) and (max-width: 1024px) {

.homebox h2 {font-size: 28px; line-height: 38px; color: #fff;  text-transform: uppercase; margin: 20px 0; padding: 10px 10px;}
.homebox p {font-size: 18px; line-height: 28px; color: #fff; margin: 15px 0; padding: 10px 10px;}

.padding-footer {padding: 15px 40px 0 40px;}
	
}

/* All Mobile Sizes (devices and browser)
====================================================================== */
@media only screen and (min-width: 481px) and (max-width: 800px) {

.homebox h2 {font-size: 30px; line-height: 40px; color: #fff;  text-transform: uppercase; margin: 10px 0; padding: 10px 10px;}
.homebox p {font-size: 20px; line-height: 30px; color: #fff; margin: 10px 0; padding: 10px 10px;}

.textbox_right, .textbox_left {font-size: 18px; padding: 8px 10px;}

.box_pool, .box_industrie, .box_trinkwasser {font-size: 20px; padding: 10px;}

.padding-footer {padding: 10px 30px 0 30px;}
.padding-bottom {padding: 20px 30px 20px 30px;}
	
/* ===== Banner ====== */

.banner_logo {
	position: relative;
	text-align: center;
	padding: 0;
	margin: 0;
	}
	
	.banner_logo img {
		max-width: 250px;
		text-align: center;
		margin: 0 auto;
		}	

/* ===== Banner Icons ====== */

.banner_icons {margin-top: 0; margin-right: 0;}

.banner_social {width: 26px; height: 26px; padding: 0; margin-left: 5px; float: left; }
.banner_language {width: 26px; height: 26px; padding: 0; margin-left: 5px;  float: left;}
.banner_text {
	width: auto;
	font-size: 15px;
	line-height: 18px;
	text-align: right;
	margin: 4px 0 0 10px;
	padding: 0;
	float: right;
	}

.text_break {display: none;}

}

/* Handy only (devices and browser)
====================================================================== */
@media only screen and (min-width: 321px) and (max-width: 480px) {

.homebox h2 {font-size: 24px; line-height: 35px; color: #fff;  text-transform: uppercase; margin: 20px 0; padding: 10px 10px;}
.homebox p {font-size: 16px; line-height: 26px; color: #fff; margin: 15px 0; padding: 10px 10px;}

.textbox_right, .textbox_left {font-size: 18px; padding: 8px 10px;}

.box_pool, .box_industrie, .box_trinkwasser {font-size: 18px; padding: 8px;}

.padding-footer {padding: 10px 30px 0 30px;}
.padding-bottom {padding: 20px 30px 20px 30px;}

/* ===== Banner ====== */

.banner_logo {
	position: relative;
	text-align: center;
	padding: 0;
	margin: 0;
	}
	
	.banner_logo img {
		max-width: 250px;
		text-align: center;
		margin: 0 auto;
		}	

/* ===== Banner Icons ====== */

.banner_icons {margin-top: 0; margin-right: 0;}

.banner_social {width: 26px; height: 26px; padding: 0; margin-left: 5px; float: left; }
.banner_language {width: 26px; height: 26px; padding: 0; margin-left: 5px;  float: left;}
.banner_text {
	width: auto;
	font-size: 15px;
	line-height: 18px;
	text-align: right;
	margin: 4px 0 0 10px;
	padding: 0;
	float: right;
	}

.text_break {display: none;}

}

/* Handy only (devices and browser)
====================================================================== */
@media only screen and (max-width: 320px) {

.homebox h2 {font-size: 24px; line-height: 32px; color: #fff;  text-transform: uppercase; margin: 20px 0; padding: 10px 10px;}
.homebox p {font-size: 16px; line-height: 26px; color: #fff; margin: 15px 0; padding: 10px 10px;}

.textbox_right, .textbox_left {font-size: 18px; padding: 8px 10px;}

.box_pool, .box_industrie, .box_trinkwasser {font-size: 18px; padding: 8px;}

.padding-footer {padding: 10px 30px 0 30px;}
.padding-bottom {padding: 20px 30px 20px 30px;}

/* ===== Banner ====== */

.banner_logo {
	position: relative;
	text-align: center;
	padding: 0;
	margin: 0;
	}
	
	.banner_logo img {
		max-width: 250px;
		text-align: center;
		margin: 0 auto;
		}	

/* ===== Banner Icons ====== */

.banner_icons {margin-top: 0; margin-right: 0;}

.banner_social {width: 26px; height: 26px; padding: 0; margin-left: 5px; float: left; }
.banner_language {width: 26px; height: 26px; padding: 0; margin-left: 5px;  float: left;}
.banner_text {
	width: auto;
	font-size: 15px;
	line-height: 18px;
	text-align: right;
	margin: 4px 0 0 10px;
	padding: 0;
	float: right;
	}

.text_break {display: none;}

}