/* CSS for VASC */
@font-face {
font-family: "PT Serif";
src: url("/fonts/PTSerif-Regular.ttf");
}

@font-face {
font-family: "Source Sans Pro";
src: url("/fonts/SourceSansPro-Regular.ttf");
}

@font-face {
font-family: "Source Sans Pro EL";
src: url("/fonts/SourceSansPro-ExtraLight.ttf");
}

/* Reset Browser CSS */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ul {
	list-style: none;
}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Fonts */
/*@font-face { font-family: 'itc-slimbach-bold';src: url('/fonts/SlimbachStd-Bold.otf') format('opentype'); }*/
@font-face{
	font-family:"ITC Slimbach W01 Bold";
	src:url("/fonts/5720567/d84ec9ce-9fb3-4e36-8118-f7c110a6b460.woff2") format("woff2"),url("/fonts/5720567/783d3679-4888-40b5-8446-9e0d18ee2236.woff") format("woff");
}

/* Main CSS */
.logo, .standard {max-width: 1280px;}
.standard {width: auto;margin: auto;position: relative;height: 100%;padding: 0 20px;width: 100%;box-sizing: border-box;}
.full {width: 100%;}
h1,h2 {text-transform: uppercase;margin-top: 40px;font-family: 'Source Sans Pro';font-size: 16pt;line-height: 22pt;color: #737372;}

h3 {margin-top: 20px;font-family: 'ITC Slimbach W01 Bold';font-size: 32pt;line-height: 30pt;color: #18428C;}
h3::after {content: "";display: block;height: 3px;width: 100%;background-color: #18428C;margin-top: 20px;}
h4 {margin-top: 20px;font-family: 'ITC Slimbach W01 Bold';font-size: 18pt;line-height: 18pt;color: #18428C;}
h4::after {content: "";display: block;height: 1px;width: 100%;border-top: 1px dotted #18428C;margin-top: 8px;margin-bottom: 22pt;}

.specialLink {position: relative;}
.specialLink::after {content: "";display: block;height: 1px;width: 100%;border-top: 1px dotted #18428C;margin-top: 2px;margin-bottom: 22pt;}
.specialLink span {cursor: pointer;position: absolute;width: 20px;height: 20px;top: 5px;}
.specialLink span:nth-child(1) {left: 0;}
.specialLink span:nth-child(2) {right: 0;}
.specialLink span::before,
.specialLink span::after {display: block;position: absolute;left: 9px;content: "";width: 2px;height: 10px;background: #18428C;transition: transform 1s;}
.specialLink span::before {transform: rotate(45deg);top: 8px;}
.specialLink span::after  {transform: rotate(135deg);bottom: 8px;}
.specialLink A {text-decoration: none;color: #18428C;font-family: 'ITC Slimbach W01 Bold';padding: 0 25px;width: 100%;display: inline-block;box-sizing: border-box;}

.akkordeon {position: relative;}
.akkordeon ul {list-style-type: disc;font-family: arial;font-size: 10pt;line-height: 22pt;color: #737372;list-style-position: outside;padding-left: 100px;overflow: hidden;transition: max-height 1s;}
.akkordeon ul li {list-style-type: disc;font-family: 'Source Sans Pro';font-size: 16pt;line-height: 22pt;color: #737372;margin-bottom: 12pt;}

.akkordeon h4 {cursor: pointer;position: relative;z-index: 2;width: 100%;padding-right: 25px;box-sizing: border-box;overflow: hidden;}
.akkordeon h4::after {width: 200%;}
.akkordeon .trigger {position: absolute;z-index: 1;width: 20px;height: 20px;top: 2px;right: 0;}
.akkordeon .trigger::before,
.akkordeon .trigger::after {display: block;position: absolute;top: 5px;content: "";width: 2px;height: 10px;background: #18428C;transition: transform 1s;}

p {font-family: 'Source Sans Pro';font-size: 16pt;color: #737372;margin-top: 20px;margin-bottom: 22pt;}

/* Container */
header {width: 100%;position: fixed;background-color: #fff;z-index: 2;}
header.shadow {box-shadow: 0 0 15px #737372;}
.logo {margin: 0 auto;position: relative;z-index: 2;}
.logo .wrap {padding-right: 86%;}
.logo a {display: block;min-width: 125px;padding-left: 20px;}
.logo IMG {width: 100%;max-width: 245px;}
#main .logo IMG {visibility: hidden;}
header .button {z-index: 3;position: absolute;margin-top: -11px;top: 50%;}
header .button img {position: absolute;top: 0;cursor: pointer;transition: transform 1s, z-index 1.5s;}
header .main_menu {position: absolute;z-index:1;box-sizing: border-box;overflow: hidden;max-height: 0;transition: max-height 1s;}
header.open .main_menu {max-height: 500px;}
header .main_menu .menu_box {position: relative;}

.subPage header .main_menu ul li div.jumper,
.mainPage header .main_menu ul li a {display: none;}
header .main_menu ul li a,
header .main_menu ul li div.jumper {font-family: 'Source Sans Pro EL';color: #737372;text-decoration: none;text-transform: uppercase;cursor: pointer;font-weight: 200;}
header .main_menu ul li.language A {font-family: 'Source Sans Pro EL';font-size: 16pt;line-height: 40pt;color: #737372;text-decoration: none;text-transform: initial;display: block;}
header .main_menu ul li a:hover,
header .main_menu ul li div.jumper:hover,
header .main_menu ul li.language A:hover {color: #E20E1A;}

#main {position: relative;z-index: 1;}
.clearer {clear: both;border: none;margin: 0;}
.anchor {position: relative;bottom: 90px;}
.banner {background-repeat: no-repeat;background-size: cover;background-position: center;}
.wasser1 {background-image: url(/img/VASC_Wasser_1_web.jpg);}
.wasser2 {background-image: url(/img/VASC_Wasser_2_web.jpg);}
.wasser3 {background-image: url(/img/VASC_Wasser_3_web.jpg);}
.wasser4 {background-image: url(/img/VASC_Wasser_4_web.jpg);}
.wasser5 {background-image: url(/img/VASC_Wasser_5_web.jpg);}
.overlay {height: 100%;background-color: #ffffff;opacity: 0.3;}
.toTop {width: 30px;height: 30px;background-image: url(/img/VASC_PFEIL_nach_oben.png);background-repeat: no-repeat;background-size: cover;margin: 25px auto;cursor: pointer;}
.twoCols IMG {width: 100%;margin-top: 40px;}
.statement {font-family: 'PT Serif', serif;font-style: italic;text-align: center;color: #18428C;margin-top: 40px;}
#socket .container .copyright {text-align: center;font-size: 14pt;}
#socket .container .copyright A {text-decoration: none;color: #737372;}
#socket {border-top: 1px dotted #737372;border-bottom: 1px dotted #737372;margin-bottom: 80px;}

/* CSS for jQuery */
header.open .menuOpen,
header .menuClosed {transform: scale(1, 1);z-index: 10;}
header.open .menuClosed,
header .menuOpen {transform: scale(0, 0);z-index: 1;}

/* CSS for subPage */
.subPage #main h1,
.subPage #main h2,
.subPage #main h3,
.subPage #main h4 {text-transform: none;margin: 30px 0 20px 0;font-family: 'ITC Slimbach W01 Bold';font-size: 28pt;line-height: 30pt;color: #18428C;}
.subPage #main h3,
.subPage #main h4 {font-size: 18pt;}
.subPage #main h3::after {display: none;}
.subPage #main h4::after {display: none;}
.subPage #main a {word-break: break-word}
.subPage #main a:visited,
.subPage #main a:link {color: #737372;}
.subPage #main ul,
.subPage #main ol {font-family: arial;font-size: 10pt;line-height: 22pt;color: #737372;list-style-position: outside;margin-left: 30px;}
.subPage #main ul {list-style: disc;}
.subPage #main ol {list-style: decimal;}
.subPage #main li {font-family: 'Source Sans Pro';font-size: 16pt;line-height: 22pt;color: #737372;margin-bottom: 12pt;}
.subPage #main .multiStart {margin-bottom: 0;}
.subPage #main .multi,
.subPage #main .multi li{margin-top: 0;margin-bottom: 0;}
.subPage #main .multiEnd {margin-top: 0;}
@media only screen and (max-width: 500px) {
.subPage #main h1,
.subPage #main h2 {font-size: 7.18vw;}
}
/* Responsive */
@media only screen and (max-width: 1280px) {
	.akkordeon ul {padding-left: 7.6%;}
}
@media only screen and (min-width: 951px) {
	header .button{left: 50%;}
	header .button img {left: 40px;}
	header .main_menu {left: 50%;background-color: #fff;width: 50%;padding-left: 40px;}
	header .main_menu .menu_box {padding-bottom: 20px;}
	.twoCols .colLeft,.twoCols .colRight {width: 48%;float: left;position: relative;}
	.twoCols .colLeft {padding-right: 2%;}
	.twoCols .colRight {padding-left: 2%;}

	.akkordeon .trigger::before {transform: rotate(45deg);left: 6px;}
	.akkordeon .trigger::after  {transform: rotate(135deg);right: 6px;}
	.akkordeon.reaction .trigger::before {transform: rotate(135deg);}
	.akkordeon.reaction .trigger::after  {transform: rotate(45deg);}
	.akkordeon ul {max-height: 1000px;}
	.akkordeon.reaction ul {max-height: 0;}
}
@media only screen and (max-width: 950px) {
	header .button{right: 50px;}
	header .button img {right: 0;}
	header .main_menu {left: 0;padding: 0 20px;width: 100%;}
	header .main_menu .menu_box {background-color: #fff;padding: 0 30px;}
	.twoCols .colLeft,.twoCols .colRight {width: 100%}

	.akkordeon .trigger::before {transform: rotate(135deg);left: 6px;}
	.akkordeon .trigger::after  {transform: rotate(45deg);right: 6px;}
	.akkordeon.reaction .trigger::before {transform: rotate(45deg);}
	.akkordeon.reaction .trigger::after  {transform: rotate(135deg);}
	.akkordeon ul {max-height: 0;}
	.akkordeon.reaction ul {max-height: 2000px;}
}
@media only screen and (min-width: 801px) {
	p {line-height: 22pt;}
	.img2coll, .img2colr {width: 50%;float: left;margin-top: 22pt;}
	.img2colr {text-align: right;}
	.img2coll IMG, .img2colr IMG {width: 99%;}
}
@media only screen and (max-width: 800px) {
	p {line-height: 26px;}
	.akkordeon ul {margin-bottom: 40px;}
	.img2coll, .img2colr, .img2coll IMG, .img2colr IMG {width: 100%;}
	.img2coll {margin-bottom: 5px;}
	
}
@media only screen and (min-width: 521px) {
	header .main_menu ul li a,
	header .main_menu ul li div.jumper {font-size: 30pt;line-height: 40pt;}
	.statement {font-size: 28pt;line-height: 32pt;}
}
@media only screen and (max-width: 520px) {
	header .main_menu ul li a,
	header .main_menu ul li div.jumper {font-size: 7.7vw;line-height: 1.34em;}
	.statement {font-size: 7.18vw;line-height: 8.15vw;}
}
@media only screen and (max-width: 500px) {
	h3 {font-size: 8.5vw;line-height: 1em;}
	.akkordeon.reaction ul {max-height: 3000px;}
/*	p {hyphens: auto;}*/
}