/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
   
/* ----------------------------------------------------------------------------- *
 * Änderung des default-Box-Modells aller Elemente auf "border-box"				 *
 * ----------------------------------------------------------------------------- */

*,
*:before,
*:after {
	-webkit-box-sizing:	border-box; /* Safari/Chrome, andere WebKit-Browser */
	-moz-box-sizing: 	border-box; /* Firefox, andere Gecko-Browser */
	box-sizing: 		border-box; /* Opera/IE 8+ */
}

/* ============================================================================= *
 * 		Styles der Smartphone-Version                        				   	 *
 * 		(Mobile First) 				                          					 *
 * ============================================================================= */
 
html {
	background-color:	rgba(0,0,0, 0.05); /* Schwarz */	
}

.page-wrapper {
	margin: 			0 auto;
	padding: 			0; /* Innenabstand in den Containern (article, section, footer) setzen */
}

header,
nav,
main,
section,
article,
aside,
footer {padding: 0;}

header[role=banner],
main > article,
main > section,
main > aside,
footer[role=contentinfo] {
	-webkit-transition: 	all 1.25s ease 0s;
	transition: 			all 1.25s ease 0s;
}

img { 
	max-width:		100%; /* Bilder nie grösser als das Elternelement */
	height: 		auto;
}

.box img { 
	margin:			3em 0 0.5em 0;
}

/* ----------------------------------------------------------------------------- *
 * 		PATHOVET         									 *
 * ----------------------------------------------------------------------------- */

main {
	padding-top: 			1.5em; /* Platz für grosses Foto (Teil 1) */
	padding-bottom:			1.25em; /* Abstand zum Footer */
	background-size:		auto 21em;
	background-repeat:		no-repeat;
	background-position:	top center;
	background-color: 		rgba(255,255,255, 0.55); 
}

#homepage main {background-image: 		url(../img/img-pv-vis-top-home.jpg);}
#angebot-1 main {background-image: 		url(../img/img-pv-vis-top-angebot-1.jpg);}
#angebot-2 main {background-image: 		url(../img/img-pv-vis-top-angebot-2.jpg);}
#angebot-3 main {background-image: 		url(../img/img-pv-vis-top-angebot-3.jpg);}
#angebot-4 main {background-image: 		url(../img/img-pv-vis-top-angebot-4.jpg);}
#angebot-5 main {background-image: 		url(../img/img-pv-vis-top-angebot-5.jpg);}
#angebot-6 main {background-image: 		url(../img/img-pv-vis-top-angebot-6.jpg);}
#angebot-7 main {background-image: 		url(../img/img-pv-vis-top-angebot-7.jpg);}
#probenentnahme-1 main {background-image: 	url(../img/img-pv-vis-top-probenentnahme-1.jpg);}
#probenentnahme-2 main {background-image: 	url(../img/img-pv-vis-top-probenentnahme-2.jpg);}
#service-1 main {background-image: 		url(../img/img-pv-vis-top-service-1.jpg);}
#service-2 main {background-image: 		url(../img/img-pv-vis-top-service-2.jpg);}
#pathovet-1 main {background-image: 		url(../img/img-pv-vis-top-pathovet-1.jpg);}
#pathovet-2 main {background-image: 		url(../img/img-pv-vis-top-pathovet-2.jpg);}
#pathovet-3 main {background-image: 		url(../img/img-pv-vis-top-pathovet-3.jpg);}
#pathovet-4 main {background-image: 		url(../img/img-pv-vis-top-pathovet-4.jpg);}
#information main {background-image: 	url(../img/img-pv-vis-top-oeffnungszeiten.jpg);}

#hello {
	margin:				3% 0 2.4em 6%; /* Top: Abstand zum Header */
	padding:	 		0.35em 0;
	max-width:			60%;
	height:				10.5em; /* Top: Platz für grosses Foto (Teil 2) */
	z-index:			100;
}

#hello p.headline {
	display:			inline-block;
	margin-top: 		0;
	padding:			0.25em 0.4em 0.5em 0.4em;
	font-size:			1.45em;
	font-family: 		"Ubuntu", Arial, Helvetica, sans-serif;
	font-weight:		400;
	color:				rgba(72,72,72, 1.0);
	line-height:		1.3;
	background-color:	rgba(255,255,255, 0.8); 
}

#hello p.topline {
	display:			inline-block;
	width:				auto;
	margin-bottom:		1px;
	padding:			0.2em 0.9em 0.2em 0.8em;
	font-family: 		"Ubuntu", Arial, Helvetica, sans-serif;
	color:				rgba(239,51,64, 1.00); /* PathoVet-Rot */
	font-size:			1.1em;
	font-weight:		400;
	line-height:		1.2;
	background: 		rgba(255,255,255, 0.7); 
}

/* Boxen: Linkes und rechtes Padding, ausser für Footer (randabfallend) */

.box:not(footer) {
	margin:				0 4% 2.5em 4%; /* Bottom muss ungleich 0 sein */
}

.box {
	border-top:			4px solid rgba(239,51,64, 1.0); /* PathoVet-Rot */
	box-shadow: 		1px 2px 2px 0px rgba(72,72,72,0.35);
	background-color:	white;
}

.nav-sub {
	padding-top:		0.8em;
}

.nav-sub li {
	padding:			0.25em 0 0.25em 0;
}

.nav-sub li a.current {
	color:				rgba(239,51,64, 1.0); /* PathoVet-Rot */
}

.nav-browse {
	padding:			1em 2em 2em 2em;
	color:				white;
}

.box-voice {
	margin:				3.0em 0 0 0; /* Nur Top darf ungleich 0 sein */
	font-size:			1.0em;
	color:				white;
	line-height:		1.6;
	background-color:	rgba(239,51,64, 1.0); /* PathoVet-Rot */
}

.box-voice small {	
	color:				rgba(255,255,255, 0.80); /* Weiss */	
	line-height:		1.3;
}

.box-download {
	margin:				1.0em 0 0 0; /* Nur Top darf ungleich 0 sein */
	padding:		    0.5em 0.7em;
	font-size:			1.0em;
	line-height:		1.6;
	background-color:	rgba(244,244,244, 1.00); /* Sekundärfarbe */
}

.box-title {
	margin: 			0 0; /* Muss 0 sein */
	padding:			0.2em 0.5em 0.5em 1.0em;
	font-size:			1.00em;
	color:				rgba(255,255,255, 0.75); /* PathoVet-Rot */
	font-weight:		500;
	background-color: 	rgba(239,51,64, 1.0); /* PathoVet-Rot */
}

.box-content-wrapper {
	width:				100%;
	padding: 			0.4em 1.5em 1.3em 1.5em;
}

.inner-element-left {
	float: 				left;
	width:				16%;
	padding-bottom: 	0.25em;
	text-align:			center;
 	-webkit-transition: all 1.25s ease 0s;
 	transition: 		all 1.25s ease 0s;
}

.inner-element-left img {
	margin:				0;
	padding:			0.6em 0 0.2em 0;
}

.inner-right {
	margin-left:		19%;
	padding-bottom: 	0.25em;
 	-webkit-transition: all 1.25s ease 0s;
 	transition: 		all 1.25s ease 0s;
}

.review {
	color:				green;
}

footer {
	overflow: 			hidden; /* Umgebender Container, gehört zum Trick für gleichlange Spalten */
	margin-bottom:		30px;
	color:				black;
	background-color:	rgba(239,51,64, 1.00); /* PathoVet-Rot */
}

/* ----------------------------------------------------------------------------- *
 * 		Single-Level-Hauptnavigation (Basics und Smartphone-Version)	         *
 * ----------------------------------------------------------------------------- */

nav ul {margin: 0;}

nav ul li {list-style: none;}

nav ul li a:hover,
nav ul li a:focus,
nav ul li a:active {text-decoration: none;} /* Kein underline bei Navigationslinks */

nav#nav-main a:link,
nav#nav-main a:visited {
	color: 			rgba(72,72,72, 1.00); /* Hauptnavigation, Textfarbe 1. und 2. Ebene */
	white-space:	nowrap; /* Kein Zeilenumbruch bei Navigationspunkten */
} 

nav#nav-main a:hover,
nav#nav-main a:focus,
nav#nav-main a:active {
	color:				white;
	background-color: 	rgba(239,51,64, 1.00); /* PathoVet-Rot */
}

nav#nav-main {
	margin-bottom:		0em; /* Abstand zum Inhaltsbereich */
}

nav#nav-main ul > li {
	width: 			100%;
	margin-left: 	0;
}

nav#nav-main ul > li > a,
nav#nav-main ul > li > b,
nav#nav-main ul > li > strong {
	padding:		0.3em 1.5em;
	display: 		inline-block;
	outline-style:	none; /* Keine Rahmenlinie um den Link */
}

nav#nav-main ul li a {
	width: 			100%; /* Link über ganze Breite */
	border-bottom:	1px solid white;
}

nav#nav-main ul ul a {padding-left: 5em;} /* 2. Ebene ausblenden */

nav#nav-main ul > li:nth-of-type(7), 
nav#nav-main ul > li:nth-of-type(8), 
nav#nav-main ul > li:nth-of-type(9) {display: block;} /* Navi ergänzen um 7) Kontakt, 8) Fr, 9) En */

/* ----------------------------------------------------------------------------- * 
 * 		Toggle-Navigation (Smartphone-Version)	                      			 *
 * ----------------------------------------------------------------------------- */

a.toggle-nav {
	position: 			absolute;
	right: 				4%;
	top: 				0.8em;
	display: 			inline-block;
	padding: 		 	0.1em 0.5em;
	width:				100%;
	text-align:			right;
	color:				rgba(72,72,72,1.0); /* Sekundärfarbe */
	text-decoration:	none;
	white-space: 		nowrap; /* Icon und Text auf gleicher Zeile */
	cursor: 			pointer;
}
	
a.toggle-nav:hover {
	color:				rgba(239,51,64, 1.00); /* PathoVet Rot */
}

/* Clearing von nav, nav,ul, .main mit .clearfix statt mit overflow:hidden (sonst wird 2. Ebene abgeschnitten!) */
.clearfix:after {
	content: 		".";
	display: 		block;
	clear: 			both;
	visibility: 	hidden;
	line-height: 	0;
	height: 		0;
}

.clearfix, html[xmlns] .clearfix {display: block;}

* html .clearfix {height: 1%;}
	
/* ----------------------------------------------------------------------------- *
 * 		Header (banner) mit Logo und Subnavigation 			                 	 *
 * ----------------------------------------------------------------------------- */
 
header[role=banner] {
	position: 			relative; /* Voraussetzung für absolute Positionierung Logo und Service-Navigation innerhalb Header */
	height:				7.2em;
	z-index: 			100;
	background-color: 	white;
}

header div#logo {
 	position: 	absolute;
	overflow: 	hidden;
 	top: 		1.4em; /* Horizontaler Innenabstand für Content mittels Padding im Header */
	left:		4%; /* Wichtig PathoVet-Logo */
	width:		65%;
 	cursor: 	pointer;
}

nav#nav-sub { /* Clearing für floatende li-Tags */
 	position: 		absolute;
	overflow: 		hidden;
	right:			2% !Important; /* Damit Service-Navigation rechtsbündig */
 	top: 			0em;
	width:			35%;
	height:			auto;
	font-size:		0.85em;
 	cursor: 		pointer;
}

nav#nav-sub ul {margin: 0 0;}

nav#nav-sub ul li {
 	float: 			right;
 	margin-left: 	0;
 	border-left:	1px rgba(67,89,99, 0.15) solid; /* Corak-Grau */
}

nav#nav-sub ul li:first-child {
	border-right:	1px rgba(67,89,99, 0.2) solid; /* Letzter Menüpunkt mit Linie rechts */
} 

nav#nav-sub ul > li > a {
 	padding: 		0.5em 0.8em 0.2em 0.8em;
	font-weight:	600;
 	display: 		inline-block;
}

nav#nav-sub ul > li > a.current {
	color:			rgba(239,51,64, 1.0); /* PathoVet-Rot */
}

nav#nav-main ul.nav-level-1 > li:nth-of-type(1) > a.current,
nav#nav-main ul.nav-level-1 > li:nth-of-type(5) > a.current,
nav#nav-main ul.nav-level-2 > li > a.current { /* nur 2. Ebene */
	color:							rgba(239,51,64, 1.0); /* PathoVet-Rot */
	-webkit-tap-highlight-color: 	rgba(239,51,64, 1.0); /* PathoVet-Rot, für iOS 6 und iOS 7 (RW, S. 128) */
 	background-color: 				rgba(239,51,64, 0.1); /* PathoVet-Rot */
}

nav#nav-sub ul > li > a:hover {
	text-decoration: underline;
}

 
/* ----------------------------------------------------------------------------- *
 *       Overviews, Teaser 2- bis 4-spaltig           							 *
 * ----------------------------------------------------------------------------- */

/* Für alle Themen-Übersichten, auch Index */
main header {
	margin: 			0 0 0.75em 0;
	padding:		 	0.5em 0 0.25em 0;
}

.teaser-articles article {
    margin-bottom: 		2em;
	width:				100%;
	box-shadow: 		0 2px 2px rgba(0, 0, 0, 0.5);
	background-color: 	rgba(67,89,99, 0.15); /* Corak-Grau */
}

a.full-link {
    position: 			relative;
    padding: 			1em 1em 25% 1em;
    display: 			block;
    color: 				rgba(67,89,99, 1.00); /* Corak-Grau */
    text-decoration: 	none;
	background-color:	white;
    background-size:	cover;
}

article.corak-e a.full-link {
    background: 		url("../img/teaserbild-thema-ce-test.png") right top no-repeat;
}

article.corak-d a.full-link {
    background: 		url("../img/teaserbild-thema-cd-test.png") right top no-repeat;
}

a#thema-bauabnahme {background: url("../img/teaserbox-thema-bauabnahme.jpg") right top no-repeat;}
a#thema-bauphysik {background: url("../img/teaserbox-thema-bauphysik.jpg") right top no-repeat;}

.teaser-articles article p {
    position: 			absolute;
    xxbottom: 			0.5em;
    font-size: 			1.125em;
    width: 				90%;
}

.teaser-articles article a.full-link:hover,
.teaser-articles article a.full-link:focus,
.teaser-articles article a.full-link:active {
	opacity:			0.0;
    background-size: 	cover !important; /* Reihenfolge: Muss nach "background" kommen */
}

article.diagnostics .full-link,
article.diagnostics .full-link { /* Bild: Corak Diagnostics */
    background: 		url("../img/dummybild-2-744x284.png") right top no-repeat;
    background-size: 	cover !important; /* Reihenfolge: Muss nach "background" kommen */
}



/* ----------------------------------------------------------------------------- * 
 * 		Leistungsbeschreibung mit Piktogramm									 *
 * ----------------------------------------------------------------------------- */

figure.pikto-services {
	float:				left;
	margin-top:			15px;
	width:				16%;
}

ul.list-services {
	margin:				20px 0 15px 16%;
	font-size:			1.10em; /* WICHTIG: Gleiche Schriftgrösse wie für Fliesstext (Paragraph) */
	list-style-type: 	none; /* Aufzählung mit Icon ("Checkbox") */
}


/* ----------------------------------------------------------------------------- * 
 * 		Bilder mit Link (Hover-Effekt)                    						 *
 * ----------------------------------------------------------------------------- */

section.overview figure,
section.teaser figure,
section#projects figure a {background: black;} /* Farbton bei Hover: Schwarz */

section#projects figcaption {background: white;} /* Farbton bei Hover: Schwarz */

section.overview a:focus img,
section.overview a:hover img,
section.overview a:active img,
section.teaser a:focus img,
section.teaser a:hover img,
section.teaser a:active img,
section#projects a:focus img,
section#projects a:hover img,
section#projects a:active img {opacity:	0.5;}
	

/* ----------------------------------------------------------------------------- * 
 * 		Footer (Seite)							                     			 *
 * ----------------------------------------------------------------------------- */

footer {
	padding: 		1em 4% 2em 4%;
	font-size:		0.95em;
}

footer section:nth-of-type(3) {margin-top: 1.5em;} 

.footer-copyright {
	margin:			2em 0 1em 0;
	border-top: 	1px solid rgba(54,156,219, 0.20); /* PathoVet-Blau */	
	padding-top:	0.5em;
}


/* ----------------------------------------------------------------------------- * 
 * Formulare                                 									 *
 * ----------------------------------------------------------------------------- */

fieldset {
	margin: 		0 0 0.5em 0;
	padding:        0 0;
	line-height:	1.5;
}

#form-order legend {
	padding:	    0.75em 0 0.75em 0;
	font-size:		1.00em;
	color:			rgba(239,51,64, 1.00); /* PathoVet-Rot */	
}

#form-order label:not(.fieldset-title) {
	position: 			relative;
	display: 			block;
	border-top:			1px solid rgba(54,156,219, 0.20); /* PathoVet-Blau */	
	padding:	    	0.35em 0 0.65em 0;
}

#form-order label:last-of-type:not(.fieldset-title) {
	border-bottom:		1px solid rgba(170,156,120, 0.20); /* PathoVet-Beige */
}

#form-order select {
	position: 		absolute;
	left: 			65%;
	top: 			0.40em;
	width:			20%;
}

.formset {
	margin: 	1em 0;
	padding:	0 0;
	overflow:	hidden;
}

/* Farbe border und bg: Effektiver RGB-Wert nötig mit Deckkraft = 100% (sonst Mischfarbe aus BG und Border) */
.formset input,
.formset textarea { 
	display: 					inline-block;
	-moz-appearance: 			none;
    -moz-border-bottom-colors: 	none;
    -moz-border-left-colors: 	none;
    -moz-border-right-colors: 	none;
    -moz-border-top-colors: 	none;
    background: 				rgba(170,156,120, 0.10) none repeat scroll 0 0; /* PathoVet-Beige */
    border-color: 				rgba(170,156,120, 0.75); /* PathoVet-Beige */	
    border-image: 				none;
    border-style: 				solid;
    border-width: 				1px;
    box-shadow: 				0 1px 1px rgba(67,89,99, 0.3) inset;
    box-sizing: 				border-box;
    line-height: 				1.1875em;
    padding: 		            0.65em 0.75em 0.65em 0.75em;
    text-align: 				left;
}

.formset input:nth-of-type(1) {
	float:				left;
	width: 				48%;
}

.formset input:nth-of-type(2) {
	float:				right;
	width: 				48%;
}

.formset textarea {
	width: 				100%;
}

.formset input:hover,
.formset textarea:hover {
	border: 			1px solid rgba(239,51,64, 0.75); /* PathoVet-Rot */
}

.formset input:focus,
.formset textarea:focus {
	border: 			1px solid rgba(239,51,64, 0.75); /* PathoVet-Rot */
}

select {
    border: 			1px solid rgba(170,156,120, 0.50); /* PathoVet-Beige */	
    border-radius: 		0;
    margin: 			0 0.5em;
    padding: 			0;
    background-color: 	white;
}

.button {
	margin:					0.75em 0;
	border:					none;
	padding:            	0.6em 3em 0.7em 3em;
	display:				inline-block; /* So breit wie nötig (wie Inhalt) */
	font-size:				0.95em;
	font-weight:			700;
	color:					white;
	text-transform:			uppercase;
	box-shadow: 			1px 1px 2px 0px rgba(0,0,0,0.23);
}

.primary {
	float: 					right;
	background-color: 		rgba(80,80,80,1.0);  /* Dunkelgrau (wie Fliesstext) */
}

.secondary {
	background-color: 		rgba(170,156,120, 0.60); /* PathoVet-Beige */	
}

.primary:hover,
.primary:focus,
.primary:active {
	text-decoration:		none;
	background-color: 		rgba(239,51,64, 1.00); /* PathoVet-Rot */
}

.secondary:hover,
.secondary:focus,
.secondary:active {
	text-decoration:		none;
	background-color: 		rgba(170,156,120, 1.00); /* PathoVet-Beige */
}

/* ----------------------------------------------------------------------------- * 
 * 		Ausblenden von Inhalten 							                     *
 * ----------------------------------------------------------------------------- */

#nav-main, /* Desktop-Hauptnavigation */
#nav-sub, /* Desktop-Service-Navigation */
main blockquote, /* Ergänzende Inhalte in Hauptspalte */
aside section.no-show, /* Ausgewählte Blöcke in rechter Spalte */
section.teaser article:nth-of-type(3),  
section.teaser article:nth-of-type(4), /* 3. und 4. Teaser (4er-Pack)*/
footer section:nth-of-type(1) {display: none;} /* Tools im Footer */

/* ============================================================================= *
 * 		Styles der Tablet-Version                           					 *
 * 		750px / 16px/em = 46.875em                         					     *
 * ============================================================================= */

	
@media only screen and (min-width: 48.875em) {
    
/* Schriftverkleinerung wird für grosse Screens wieder aufgehoben */
    
	@media only screen and (max-width: 86em) {
	body {
 		font-size: 0.938em; /* Schriftgrösse: 15px */
	}
	}

a.toggle-nav {display: none;} /* Menü-Link ausblenden */

#hello {
	max-width:			40%;
}

#hello p.headline {
	font-size:			1.7em; /* Visualtext grösser */
}

footer section:nth-of-type(3) {margin-top: 0;} /* Vertikaler Abstand wieder rückgängig machen */

/* ----------------------------------------------------------------------------- * 
 * 		Layout: Hauptspalte und Randspalte nebeneinander						 *
 * ----------------------------------------------------------------------------- */

.box:not(footer) {
	margin:				0 0 2.5em 0; /* Linkes und rechts Padding zurücksetzen */
}

main,
main figure,
main section,  
main article {overflow: hidden;} /* Clearing für die floatenden gleichlangen Spalten innerhalb dieses Elementes */

main article.col-one {
 	width: 				70.000%; /* Hauptspalte links */
 	margin-left: 		1.000%;
 	margin-right: 		2.000%;
	padding-left:	 	1.000%;
	padding-right:	 	1.000%;
 	float: 				left;
 	-webkit-transition: all 1.25s ease 0s;
 	transition: 		all 1.25s ease 0s;
}

main aside.col-two {
 	width: 				28.000%; /* Randspalte rechts */
 	margin-left: 		71.000%;
 	margin-right: 		1.000%;
	padding-left:	 	1.000%;
	padding-right:	 	1.000%;
 	-webkit-transition: all 1.25s ease 0s;
 	transition: 		all 1.25s ease 0s;
}

article section.box-content-wrapper {
	overflow:			hidden;
}

article section.inner-col {
	float: 				left;
    width: 				48.000%;
    margin-right: 		4.000%;
	padding-bottom:		2em;
}

article section.inner-col:nth-of-type(2n+2) {
	width:				48.000%;
	margin-right: 		0;
}

.inner-colspan {
	width:				100%;
	margin-right: 		0;
	padding-bottom:		1em;
}


/* ----------------------------------------------------------------------------- * 
 * 		Top-Foto / Top-Visual							                    	 *
 * ----------------------------------------------------------------------------- */

/* Box-Sizing-Modell (width = Innenbreite plus padding und border */
/* Berechnete Breiten: Hauptspalte entspricht 96% der Gesamtbreite (ohne 2x Padding des umgebenden figure) */
/* 60% Breite entspricht Breite = (100/96) x 60% = 62.500% innerhalb figure. */
/* 4% Aussenabstand (margin) entspricht Aussenabstand = (100/96) x 4% = 4.167% innerhalb figure. */
/* 32% Breite entspricht Breite = (100/96) x 32% = 33.333% innerhalb figure. */

figure.top-photo img {
 	width: 				66.667%;
 	padding-right: 		4.167%;
	float:				left;
	background-color:	rgba(122,181,29, 0.8); /* Corak-Grün */
}

figure.top-photo figcaption {
	display:			block; /* Für Tablets und Desktops einblenden (ist für Smartphones ausgeblendet)*/
 	width: 				33.333%; /* Hauptbereich mit 2 Spalten */
 	margin-left: 		66.667%;
 	margin-bottom: 		-99999px !important; /* Trick für gleichlange Spalten, dazu gehört ein overflow: hidden für den umgebenden Container */
 	padding-bottom: 	99999px !important;
	padding-top:		2em;
	padding-right:		3em;
 	-webkit-transition: all 1.25s ease 0s;
 	transition: 		all 1.25s ease 0s;
	background-color:	rgba(122,181,29, 0.8); /* Corak-Grün */
}

figure.top-visual figcaption {
	display:			block; /* Für Tablets und Desktops einblenden (ist für Smartphones ausgeblendet)*/
 	width: 				33.333%; /* Hauptbereich mit 2 Spalten */
 	margin-left: 		66.667%;
 	margin-bottom: 		-99999px !important; /* Trick für gleichlange Spalten, dazu gehört ein overflow: hidden für den umgebenden Container */
 	padding-bottom: 	99999px !important;
	padding-top:		2em;
	padding-right:		3em;
 	-webkit-transition: all 1.25s ease 0s;
 	transition: 		all 1.25s ease 0s;
	background-color:	rgba(67,89,99, 0.1); /* Corak-Grau */
}

/* ----------------------------------------------------------------------------- *
 *       Raster: Overview, Teaserboxen 2-spaltig (Leistungen, Projekte)   		 *
 * ----------------------------------------------------------------------------- */

.teaser-articles article {
        float: 			left;
        margin-right: 	4.167%;
        width: 			47.917%;
}

.teaser-articles article:nth-of-type(2n+2) {margin-right: 0;}


/* ----------------------------------------------------------------------------- * 
 * 		Besondere Inhalte innerhalb Hauptspalte (nebeneinander)					 *
 * ----------------------------------------------------------------------------- */
 
/* Berechnete Breiten: Hauptspalte entspricht 65.5% der Gesamtbreite. 3.5% Abstand bezgl. Gesamtbreite entspricht Abstand = (100/65.5) x 3.5% = 5.344% innerhalb Hauptspalte. */

main section.specialContent,
main aside.specialContent {
 	overflow:		hidden;
	margin:			1.4em 0 3em 0;
	padding-top:	0.25em;
}

main section.specialContent {
	border-top:		1px solid rgba(67,89,99, 0.2); /* Linie nur bei Doppelspalte mit Content */
	padding-top:	1.25em;
}

main .column-left,
main aside.specialContent section:nth-of-type(1) {
 	width: 			47.328%;
 	margin-right:	5.344%;
 	float: 			left;
}

main .column-right,
main aside.specialContent section:nth-of-type(2) {
 	width: 			47.328%;
 	margin-left: 	52.672%;
 	margin-bottom: 	-99999px !important; /* Trick für gleichlange Spalten  - dazu gehört ein overflow: hidden für den umgebenden Container */
 	padding-bottom: 99999px !important;
}

/* ----------------------------------------------------------------------------- * 
 * 		Header mit Logo			     										 	 *
 * ----------------------------------------------------------------------------- */

header div#logo {
	width:			45%; /* Logo-Grösse (bei Smartphone 75%) */
	max-width:		27em;
}

/* ----------------------------------------------------------------------------- * 
 * 		Hauptnavigation				     										 *
 * ----------------------------------------------------------------------------- */

main {z-index: 5;}

nav#nav-main ul.nav-level-1>li:nth-of-type(6) { /* Sprachversionen ausblenden */
	display: 			none;
}

nav#nav-main { 
	margin:				0 0;
	padding:			0 0 0 0%; /* Einzug links Hauptnavigation */
    overflow: 			inherit;
 	z-index: 			500; /* Positionierung "auf" dem Hauptinhalt, damit die zweite Ebene nicht verdeckt wird. */
	font-family:		"Ubuntu", Arial, Helvetica, sans-serif;
	background-color:	white;
}

nav#nav-main ul li { /* 1. und 2. Ebene */
	position: 			relative;
 	border:				none;
}

nav#nav-main ul.nav-level-1 > li { /* Nur 1. Ebene */
 	float: 				left;
 	width:				auto;
	background-color:	white;
}

nav#nav-main ul.nav-level-1 > li > a { /* Nur 1. Ebene */
	border: 			none;
	padding: 		    0.4em 1.2em 0.4em 1.1em;
	height:				38px;
	font-size:			1.00em;
	font-weight:		400;
	text-transform:		uppercase;
	letter-spacing:		0.1px;
}

nav#nav-main ul.nav-level-2 li { /* Nur 2. Ebene */
 	float: 				none;
	min-width:			10em;
	height:				auto; /* Wichtig: Höhe in Pixeln angeben */
	background-color:	white; 
}

nav#nav-main ul.nav-level-2 li a { /* Nur 2. Ebene */
	border: 			none;
	padding:		    0.5em 3em 0.5em 1.2em;
 	font-size: 			0.90em; 
	font-weight:		400;
	text-transform:		uppercase;
}


nav#nav-main > ul > li:first-of-type {
 	margin-left: 		0%; /* Linkes Einrücken Hauptnavigation  */
}

nav#nav-main ul ul {
	display:			none;
 	position: 			absolute;
 	top: 				38px; /* Positionierung der 2. Ebene */
 	min-width: 			14em;
	padding:			0 0 0.75em 0;
	z-index: 			20; /* Positionierung der 2. Ebene über Hauptinhalt */
	background-color:	rgba(255,255,255, 0.98);
	box-shadow: 		2px 4px 3px 3px rgba(0, 0, 0, 0.10);
}

/* Aktive Seite */
nav#nav-main ul.nav-level-1 > li > a.current { /* nur 1. Ebene */
	color:							white;
	-webkit-tap-highlight-color: 	white; /* für iOS 6 und iOS 7 (RW, S. 128) */
 	background-color: 				rgba(239,51,64, 1.00);
}

nav#nav-main ul.nav-level-2 > li > a.current { /* nur 2. Ebene */
	color:							rgba(239,51,64, 1.0); /* PathoVet-Rot */
	-webkit-tap-highlight-color: 	rgba(239,51,64, 1.0); /* PathoVet-Rot, für iOS 6 und iOS 7 (RW, S. 128) */
 	background-color: 				rgba(239,51,64, 0.1); /* PathoVet-Rot */
}

/* Effekte Hover / Focus */
nav#nav-main a:hover,
nav#nav-main a:focus,
nav#nav-main a:active {
	color:				white;
	background-color: 	rgba(239,51,64, 1.0); /* PathoVet-Rot, 1. und 2. Ebene */
}

nav#nav-main ul.nav-level-1 > li:hover { /* Nur 1. Ebene */
 	background-color:	rgba(244,244,244, 1.0); /* Sekundärfarbe */
}

nav#nav-main ul li:hover ul {
 	display: 			block; /* 2. Ebene einblenden */
}

/* ----------------------------------------------------------------------------- *
 *       Overview: Teaserboxen 3-spaltig (Themen A-Z)         					 *
 * ----------------------------------------------------------------------------- */

.teaser-articles #holder article {
        float: 			left;
        margin-right: 	3.5%;
        width: 			31%;
}

.teaser-articles #holder article:nth-of-type(3n+3) {margin-right: 0;}

/* ----------------------------------------------------------------------------- * 
 * 		Teaser (3-spaltig)						              					 *
 * ----------------------------------------------------------------------------- */	
 
section.teaser article:nth-of-type(3) {display: block;} /* Teaser 3 einblenden */

section.teaser article figure {
	width: 				100%; /* Bild und Text untereinander */
 	float: 				none;
 	-webkit-transition:	all 1.25s ease 0s;
 	transition: 		all 1.25s ease 0s;
}

section.teaser article {
 	width: 		31%;
 	float: 		left;
 	border: 		0px solid rgba(255, 255, 255, 0); /* verhindert das margin-Collapse nach unten */
 	margin-right: 	3.5%;
 	overflow: 		auto;
}

section.teaser article:nth-of-type(2n) {margin-right: 3.5%;}

section.teaser article:nth-of-type(3n) {margin-right: 0%;}

/* ----------------------------------------------------------------------------- * 
 * 		Einblenden von Inhalten 							                     *
 * ----------------------------------------------------------------------------- */
 
#nav-main,
#nav-sub {display: block;} /* Hauptnavigation einblenden */

nav > ul > li:nth-of-type(7), 
nav > ul > li:nth-of-type(8) {display: none;} /* Hauptnavigation ohne Sprachauswahl. Wichtig: Direktes Kind (damit nur 1. Ebene betroffen) */
	
main blockquote {
 	display: 			block; /* Ergänzende Inhalte in Hauptspalte einblenden */
 	-webkit-transition:	all 1.25s ease 0s;
 	transition: 		all 1.25s ease 0s;
}

aside section.no-show {
 	display: 			block; /* Gewisse Blöcke in Randspalte einblenden */
 	-webkit-transition:	all 1.25s ease 0s;
 	transition: 		all 1.25s ease 0s;
}

/* ----------------------------------------------------------------------------- * 
 * 		Footer 												                     *
 * ----------------------------------------------------------------------------- */
 
/* Funktioniert alles (selektioniert korrekt) solange nur ein Footer auf Seite */ 

footer {
	padding: 		0em 0 0em 0; /* Linkes und rechts Padding wieder zurücksetzen */
	font-size:		1em;
}

.footer-copyright {
	margin:			0em 0 0em 0;
	border-top: 	1px solid rgba(54,156,219, 0.20); /* PathoVet-Blau */	
	padding-top:	0.5em;
}

footer section:nth-of-type(1),
footer section:nth-of-type(2),
footer section:nth-of-type(3),
footer section:nth-of-type(4) {	
	-webkit-transition: all 1.25s ease 0s;
	transition: 		all 1.25s ease 0s;
}

footer section:nth-of-type(1),
footer section:nth-of-type(2),
footer section:nth-of-type(3) {	
	font-size:			0.95em;
	color:				rgba(72, 72, 72, 1.00);
}

footer section:nth-of-type(4) {
	font-size:			0.90em;
	color:				rgba(72,72,72, 1.00); /* Sekundärfarbe */
}

footer section:nth-of-type(1) {
	display:		block;
 	width: 			32.000%;
 	float: 			left; /* Bereiche nebeneinander setzen */
 	border: 		0px solid rgba(255, 255, 255, 0); /* verhindert das margin-Collapse nach unten */
 	margin-right: 	3.000%;
	padding-left: 	4.000%;
	padding-bottom:	1.35em;
	padding-top:	0.6em;
 	overflow: 		auto;
}

footer section:nth-of-type(2) {
	display:		block;
 	width: 			32.000%;
 	float: 			left; /* Bereiche nebeneinander setzen */
 	border: 		0px solid rgba(255, 255, 255, 0); /* verhindert das margin-Collapse nach unten */
 	margin-right: 	3.000%;
	padding-left: 	4.000%;
	padding-bottom:	1.35em;
	padding-top:	0.6em;
 	overflow: 		auto;
}

footer section:nth-of-type(3) {
	display:		block;
 	width: 			30.000%;
 	border: 		0px solid rgba(255, 255, 255, 0); /* verhindert das margin-Collapse nach unten */
 	margin-left:	70.000%;
 	margin-right: 	0%;
	padding-left: 	4.000%;
	padding-bottom:	1.35em;
	padding-top:	0.6em;
 	overflow: 		auto;
}

footer section:nth-of-type(4) {
/* Copyright-Zeile */
	display:			block;
	padding:			1.2em 0 1.5em 0;
 	width: 				100%;
	border-top:			1px solid rgba(222,222,222, 1.0);
 	overflow: 			auto;
	background-color: 	white;
}

footer section:nth-of-type(4) div:first-of-type {
	float:			left;
 	width: 			75%;
	padding-left:	4.000%;
 	overflow: 		auto;
}

footer section:nth-of-type(4) div:last-of-type {
	float:			right;
 	width: 			25%;
	padding-right:	4.000%;
 	overflow: 		auto;
	text-align:		right;
}

}

/* ============================================================================= *
 * 		Styles der Desktopversion (klein)                           			 *
 * 		1040px / 16px/em = 65em                         					     *
 * ============================================================================= */
@media only screen and (min-width: 64em) {

/* ----------------------------------------------------------------------------- * 
 * 		Teaser (alle 4 nebeneinander)						               	     *
 * ----------------------------------------------------------------------------- */

section.teaser-articles #holder article,
section.teaser article {
 	width: 			22%;
 	float: 			left;
 	border: 		0px solid rgba(255, 255, 255, 0); /* verhindert das margin-Collapse nach unten */
 	margin-right: 	4%;
	margin-bottom:	2em;
 	overflow: 		auto;
}

section.quartet article { /* Kein Vertikalabstand bei 4er-Teaser unten */
	margin-bottom:	0;
}

section.teaser article:nth-of-type(4) {display: block;} /* Teaser 4 einblenden */

.teaser-articles #holder article:nth-of-type(3n),
section.teaser article:nth-of-type(2n),
section.teaser article:nth-of-type(3n) {margin-right: 4%;} /* Abstand zwischen 2. und 3. bzw. 3. und 4. Anriss setzen. Achtung: "section" erforderlich!! */

.teaser-articles #holder article:nth-of-type(4n),
section.teaser article:nth-of-type(4n) {margin-right: 0%;}

}

/* ============================================================================= *
 * 		Styles der Desktopversion (gross)                           			 *
 * 		1600px / 16px/em = 100em                         					     *
 * ============================================================================= */

@media only screen and (min-width: 86em) {

.page-wrapper {max-width: 86em;} /* Layoutbreite begrenzen */

}

/* ============================================================================= *
 * 		HIGH RESOLUTION                          			 					 *
 * 		.....????                      					     					 *
 * ============================================================================= */

@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}