body {
	font-family: 'Barlow Semi Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 21px;
	line-height: 28px;
	letter-spacing: 0px;
	color: #212121;
}


/* FONT STYLES 
======================================================== */

h1, h2, h3, h4, h5 {
	font-family: 'Vollkorn', sans-serif;
	font-weight: 800;
	letter-spacing: 0px;	
	color: #212121;
}

h1 { font-size: 40px; line-height: 44px; }
h2 { font-size: 32px; line-height: 44px; }
h3 { font-size: 24px; line-height: 32px; }
h4 { font-size: 21px; line-height: 28px; }

h1 small, h2 small, h3 small, h4 small { font-weight: 500; color: #2064AD; display: block; letter-spacing: 0px; font-family: 'Barlow Semi Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
h1 small{ font-size: 28px; line-height: 32px; padding-bottom: 8px; font-weight: 300; }
h2 small { font-size: 24px; line-height: 28px; padding-bottom: 8px; }
h3 small { font-size: 18px; line-height: 24px;  }
h4 small { font-size: 14px; line-height: 18px;  }

p {
	font-family: 'Barlow Semi Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 21px;
	line-height: 28px;
	letter-spacing: 0px;
	color: #212121;
}

p.small { font-size: 18px; line-height: 21px; }
p.xs  { font-size: 16px; line-height: 19px; }

p cite {
	font-family: 'Vollkorn', sans-serif;
	font-weight: 600;
	font-size: 24px;
	line-height: 28px;
	letter-spacing: 0px;	
	font-style: normal;
	color: #2064AD;
}

a, a:link, a:visited, a:hover { text-decoration: none; color: #58B946;}


.text-right { text-align: right; } 

/* COLORS STYLES 
======================================================== */
.bgWhite { background-color: #FFFFFF;}
.bgBrandBlue { background-color: #2064AD; }
.bgBrandBlueLight { background-color: #DEE8F3; }
.bgBrandGreenDark { background-color: #58B946; } /* Die haben wir zusammengeführt - waren zu ähnlich ... wer macht sowas? */
.bgBrandGreen { background-color: #58B946; }
.bgBrandGreenLight { background-color: #E2F0D7; }
.bgBrandGreenSuperLight { background-color: #E2F0D7; }
.bgBrandPurple { background-color: #991636; }
.bgBrandPurpleLight { background-color: #CD8C9C; }
.brandPurpleSuperlight { background-color: #F0DCE1; }

.cWhite, a.cWhite, a.cWhite:link, a.cWhite:visited, a.cWhite:hover { color: #FFFFFF; }
.cBlack, a.cBlack, a.cBlack:link, a.cBlack:visited, a.cBlack:hover { color: #212121; }
.cGrey, a.cGrey, a.cGrey:link, a.cGrey:visited, a.cGrey:hover { color: #AFAFAF; }
.cBrandBlue, a.cBrandBlue, a.cBrandBlue:link, a.cBrandBlue:visited, a.cBrandBlue:hover { color: #2064AD; }
.cBrandGreen, a.cBrandGreen, a.cBrandGreen:link, a.cBrandGreen:visited, a.cBrandGreen:hover { color: #58B946; }

.textShadow { text-shadow: 0px 3px 12px #000000; }
.pointer { cursor: pointer; }


.icon01 {
	padding-left: 64px;
	padding-top: 32px; 
	background-image: url('../images/unnamed-1.png'); 
	background-position: left 9px; 
	background-size: 56px; 
	background-repeat: no-repeat;	
}


.icon02 {
	padding-left: 72px;
	padding-top: 44px; 
	background-image: url('../images/unnamed-2.png'); 
	background-position: left 8px; 
	background-size: 64px; 
	background-repeat: no-repeat;	
}


.icon03 {
	padding-left: 72px;
	padding-top: 44px; 
	background-image: url('../images/unnamed-3.png'); 
	background-position: left 12px; 
	background-size: 64px; 
	background-repeat: no-repeat;	
}


.icon04 {
	padding-left: 72px;
	padding-top: 44px; 
	background-image: url('../images/unnamed-4.png'); 
	background-position: left 8px; 
	background-size: 64px; 
	background-repeat: no-repeat;	
}




/* GAP STYLES 
======================================================== */

.ugp4 { margin-top: 4px; }
.ugp8 { margin-top: 8px; }
.ugp16 { margin-top: 16px; }
.ugp24 { margin-top: 24px; }
.ugp32 { margin-top: 32px; }
.ugp40 { margin-top: 40px; }
.ugp48 { margin-top: 48px; }
.ugp56 { margin-top: 56px; }
.ugp64 { margin-top: 64px; }
.ugp80 { margin-top: 80px; }
.ugp88 { margin-top: 88px; }
.ugp96 { margin-top: 96px; }
.ugp128 { margin-top: 128px; }
.ugp256 { margin-top: 256px; }

.bgp0{ margin-bottom: 0px; }
.bgp12 { margin-bottom: 12px; }
.bgp16 { margin-bottom: 16px; }
.bgp32 { margin-bottom: 32px; }
.bgp40{ margin-bottom: 40px; }
.bgp48{ margin-bottom: 48px; }
.bgp56{ margin-bottom: 56px; }
.bgp80{ margin-bottom: 80px; }
.bgp120{ margin-bottom: 120px; }

.moveTop { margin-top: -180px; }
.moveTop90 { margin-top: -90px; }

.inGap24 { padding: 24px;}

/* LIST STYLES 
======================================================== */

ul li {
	list-style: none;
	padding-left: 24px;
	background-image: url('../images/iconListBullet.png'); 
	background-position: left 9px; 
	background-size: 12px; 
	background-repeat: no-repeat;
}



/* DOWNLOAD LINK STYLES 
======================================================== */
.downloadContainer {
	display: block;
	width: 75%;
	padding: 24px;
	padding-bottom: 8px;
	margin-top: 32px;
	margin-bottom: 32px;
	background-color: #DEE8F3;
}

.downloadSubLine {
	display: block;
	margin-left: 32px;
	color: #2064AD;
}

a.download, a.download:link, a.download:hover, a.download:visited {
	display: block;
	width: 100%;
	padding-left: 32px;

	color: #2064AD;
	font-weight: 600;
	
	background-image: url('../images/iconArrowRight.png'); 
	background-position: left 4px; 
	background-size: 21px; 
	background-repeat: no-repeat;
}

a.download.downLink, a.download.downLink:link, a.download.downLink:hover, a.download.downLink:visited {
	background-image: url('../images/iconArrowDown.png'); 
} 




/* NAVBAR STYLES 
======================================================== */

nav#dtvNavbar { background-color: #FFFFFF !important; padding: 32px 0px; padding-bottom: 32px; }
#navBarLogo { height: 90px; }
#menuButton { width: 32px; height: 32px; margin-left: 16px; background-image: url('../images/iconMenu.png'); background-position: center center; background-repeat: no-repeat; }

ul.topmenu { list-style: none; margin: 0px; padding: 0px; font-family: 'Barlow Semi Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 500; font-size: 24px; line-height: 28px; }
ul.topmenu li { background-image: none; padding: 0px 16px; display: inline; float: left; }
ul.topmenu li a, ul.topmenu li a:link, ul.topmenu li a:visited, ul.topmenu li a:hover { color: #2064AD; text-decoration: none; padding: 0px 0px; }
ul.topmenu li.active a, ul.topmenu li.active a:link, ul.topmenu li.active a:visited, ul.topmenu li.active a:hover { color: #991636; text-decoration: none; padding: 0px 0px; }
ul.topmenu li.alias-parent-active a, ul.topmenu li.alias-parent-active a:link, ul.topmenu li.alias-parent-active a:visited, ul.topmenu li.alias-parent-active a:hover { color: #991636; text-decoration: none; padding: 0px 0px; }



/* JOOMLA STYLES 
======================================================== */
.com-content-article {
	margin-left: 16px;
	margin-right: 16px; 
}



/* IMAGE STYLES 
======================================================== */
div.com-content-article {
	max-width: 100%;
}

div.introImage {
	display: block;
	height: 320px; 
	width: 100%;
	
	background-color: #DEE8F3;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;	

}
div.leadingImageSmall {
	width: 100%;
	height: 360px; 
	background-color: #DEE8F3;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;	
}
div.articleLeadingImage {
	width: 100%;
	height: 540px; 
	background-color: #DEE8F3;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;	
}

div.personalImage {
	width: 95%;
	height: 240px; 
	background-color: #DEE8F3;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;	

}

div.personalRoundedImage {
	width: 210px;
	height: 210px; 
	border-radius: 50%;
	background-color: #DEE8F3;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;	
}



/* HERO STYLES 
======================================================== */
div#heroGallery {
	display: block;
	position: relative;
	z-index: 100;
	width: 100%;
	height: 600px;
	overflow: hidden;
	background-color: #DEE8F3;
}

div.heroSlide {
	position: relative;
	display: block;
	z-index: 101;
	width: 100%;
	height: 600px;
	overflow: hidden;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

div.heroSlideCaption {
	position: absolute;
	top: 24px;
	right: 24px;
	font-size: 14px;
	color: #FFFFFF;
	/* 
	bottom: 12px;
	transform: rotate(270deg);
	transform-origin: bottom left;
	*/
	margin: 0px;
}

div#heroBoxHolder {
	position: relative;
	margin-top: -260px;
	z-index: 1000;
	margin-bottom: 56px;
}

div.heroBox {
	margin: 4px; padding: 24px;
	width: 100%;
}

div.heroBox h3 { 
	font-size: 24px;
	padding-left: 32px;
	background-image: url('../images/iconChevronRight.png');
	background-size: 20px;
	background-position: 0px 5px;
	background-repeat: no-repeat;
}	


/* ARTICLE GALLERY STYLES 
======================================================== */
div#articleGalleryWrapper {
	display: block;
	width: 100%;
	margin-top: 32px;
	margin-left: -16px;
	padding-left: 16px;
	margin-bottom: 56px;
	overflow-x: hidden;
}
div.articleGalleryNavigation { position: relative; display: block; width: 100%; height: 32px; margin-bottom: 16px;  margin-left: 24px; }

div.articleGallerySlideLeft,
div.articleGallerySlideRight { 
	position: relative;
	display: inline;
	float: left;
	height: 32px;
	width: 24px;
	margin-right: 16px;
	
	background-image: url('../images/iconAngleLeft.png');	
	background-size: contain;
	background-position: left center;
	background-repeat: no-repeat;
}

div.articleGallerySlideLeft.slideTestimonialNavLeft,
div.articleGallerySlideRight.slideTestimonialNavRight { 
	height: 24px;
	width: 16px;
}


div.articleGallerySlideRight {background-image: url('../images/iconAngleRight.png'); background-position: right center;}

div#articleGallery { width: 100%; display: block; }
div.articleGallerySlide { margin-right: 16px; }

div.articleGallerySlideImage {
	height: 360px;
	border: 4px solid #FFFFFF;
	

	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;	
	opacity: 0.25; 	
	transition: all 0.75s;
}

div.articleGallerySlide div.articleSlideCaption { 
	font-size: 18px; 
	line-height: 24px;
	display: block;
	margin-top: 8px; 
	margin-left: 4px; 
	width: 85%;
	opacity: 0.25; 	
	transition: all 0.75s;
}
div.articleGallerySlide.slick-current div.articleGallerySlideImage { opacity: 1; box-shadow: -1px 4px 12px 0px rgba(33,33,33,0.25);}
div.articleGallerySlide.slick-current div.articleSlideCaption { opacity: 1; }


/* ACCORDEON STYLES 
======================================================== */
div.articleAccordeon {
	margin-top: 32px;
	margin-bottom: 56px;
}

div.articleAccordeon h3 { 
	cursor: pointer;
	font-size: 21px;
	padding-left: 32px;

	background-image: url('../images/iconAccordeonClose.png');	
	background-size: 16px;
	background-size: 54px;
	padding-bottom: 40px;
	background-position: 0px 4px;
	background-repeat: no-repeat;
}

div.articleAccordeon h3.collapsed { 
	background-image: url('../images/iconAccordeonOpen.png');	
	background-size: 16px;
	background-position: 0px 8px;
	padding-bottom: 0px;
}

div.accordion-body {
	margin-bottom: 32px;
}


/* SIDE PANEL STYLES 
======================================================== */
div#sidePanel {
	display: block;
	position: fixed;
	z-index: 1100;
	top: 0px;
	right: -560px;
	height: 100%;
	width: 540px;

	overflow-y: scroll;
	background-color: #991636;
	color: #FFFFFF;
	
	transition: all 0.5s;
}
div#sidePanel.open { right: 0px; }

div#sidePanelCloser {
	display: block;
	width: calc(100% - 24px);
	height: 48px;
	color: #FFFFFF;
	margin-top: 16px;

	background-image: url('../images/iconClose.png');	
	background-size: 24px;
	background-position: right center;
	background-repeat: no-repeat;

}

div#sidePanel ul { list-style: none; margin: 24px; display: block; width: calc(100% - 48px); margin-top: 32px; padding: 0px; font-family: 'Barlow Semi Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 400; font-size: 24px; line-height: 28px; }
div#sidePanel ul li { list-style: none; padding: 12px 0px; display: block; width: 100%; background-image: none; border-top: 1px dotted #EFEFEF; }
div#sidePanel ul li:first-child { border-top: none; }
div#sidePanel ul li a, div#footerBanner ul li a:link, div#footerBanner ul li a:visited, div#footerBanner ul li a:hover { color: #EFEFEF; text-decoration: none; padding: 0px 0px; }
div#sidePanel ul li.active a, div#footerBanner ul li.active a:link, div#footerBanner ul li.active a:visited, div#footerBanner ul li.active a:hover { color: #FFFFFF; text-decoration: none; padding: 0px 0px; font-weight: 500;}

div#sidePanel ul li ul { list-style: none; margin: 0px; margin-top: 8px; margin-left: 24px; padding: 0px; font-family: 'Barlow Semi Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 18px; line-height: 24px; }
div#sidePanel ul li ul li { list-style: none; padding: 12px 0px; display: block; width: 100%; background-image: none; border-top: 1px dotted #AFAFAF; }
div#sidePanel ul li.active ul li a, div#footerBanner ul li.active ul li a:link, div#footerBanner ul li.active ul li a:visited, div#footerBanner ul li.active ul li a:hover { color: #FFFFFF; text-decoration: none; padding: 0px 0px; font-weight: 300;}
div#sidePanel ul li.active ul li.active a, div#footerBanner ul li.active ul li.active a:link, div#footerBanner ul li.active ul li.active a:visited, div#footerBanner ul li.active ul li.active a:hover { color: #FFFFFF; text-decoration: none; padding: 0px 0px; font-weight: 500;}


/* FOOTER STYLES 
======================================================== */

div#footer {
	margin-top: 88px;
	display: block;
	width: 100%;
}

div#footerBanner {
	background-color: #212121;
	border-top: 10px solid #58B946;
	padding-bottom: 32px;
	padding-top: 32px;
}

div#footerBanner * { color: #E2F0D7; }
	
.footerLogo {
	box-shadow: 0px 3px 12px 2px rgba(0, 0, 0, 0.2);
	border: 1px solid #EFEFEF;
	width: 95%;
	text-align: right;
}

div#footerBanner ul { list-style: none; margin: 0px; margin-top: 52px; padding: 0px; font-family: 'Barlow Semi Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: 300; font-size: 24px; line-height: 28px; }
div#footerBanner ul li { list-style: none; padding: 12px 0px; display: block; width: 100%; background-image: none; border-top: 1px dotted #AFAFAF; }
div#footerBanner ul li:first-child { border-top: none; }
div#footerBanner ul li a, div#footerBanner ul li a:link, div#footerBanner ul li a:visited, div#footerBanner ul li a:hover { color: #AFAFAF; text-decoration: none; padding: 0px 0px; }
div#footerBanner ul li.active a, div#footerBanner ul li.active a:link, div#footerBanner ul li.active a:visited, div#footerBanner ul li.active a:hover { color: #FFFFFF; text-decoration: none; padding: 0px 0px; }


@media (max-width: 960px) {
div#articleGalleryWrapper {
	display: block;
	width: 100%;
	margin-top: 32px;
	margin-bottom: 56px;
	overflow-x: hidden;
}

div.personalRoundedImage {
	width: 120px;
	height: 120px; 
	border-radius: 50%;
}

div#heroBoxHolder {
position: relative;
margin-top: -360px;

}

@media (max-width: 540px) {


	h1 { font-size: 28px; line-height: 31px; letter-spacing: -0.6px; }
	h2 { font-size: 26px; line-height: 30px; letter-spacing: -0.3px; }
	h3 { font-size: 22px; line-height: 28px; }
	h4 { font-size: 19px; line-height: 22px; }

	h1 small, h2 small, h3 small, h4 small { font-weight: 500; color: #2064AD; display: block; letter-spacing: 0px; font-family: 'Barlow Semi Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
	h1 small{ font-size: 24px; line-height: 28px; padding-bottom: 8px; font-weight: 300; }
	h2 small { font-size: 22px; line-height: 26px; padding-bottom: 4px; }
	h3 small { font-size: 19px; line-height: 22px;  }
	h4 small { font-size: 16px; line-height: 19px;  }

	p {
		font-size: 19px;
		line-height: 24px;
	}

	p.small { font-size: 16px; line-height: 19px; }
	p.xs  { font-size: 14px; line-height: 16px; }	


	.moveTop, .moveTop90 { margin-top: 0px; }

	div#sidePanel {
		width: 100%;
	}

	#navBarLogo { height: 65px; }
	

	/* IMAGE STYLES 
	======================================================== */
	div.articleLeadingImage,
	div.leadingImageSmall {
		width: 100%;
		height: 320px; 
	}

	div.personalImage {
		width: 50%;
		height: 180px; 
	}	

div.personalRoundedImage {
	width: 180px;
	height: 180px; 
	border-radius: 50%;
}

div#articleGalleryWrapper {
	display: block;
	width: 90%%;
	margin-top: 24px;
	margin-left: 0px;
	padding-left: 0px;
	margin-bottom: 32px;
	overflow-x: hidden;
}


div.articleGallerySlideImage {
	height: 180px;
	width: 100%;
}

}