/* Overwrite widest possible width */
.strip {
	max-width:1024px}	

/* ---------------------------------------------------------- body classes and generals */ 

body {
	background:#f4f7fa;
	color:#191c1e;
	font-family: 'Open Sans', sans-serif;
	font-size:1.125em;
	font-weight:400}
	
img > a {
  border: none} 		
	
/* ------------------------------------------------------------ special panels and pads */

/* t = top, r = right, b = bottom, l = left */

.pad-no-bot {padding:20px 10px 0}
.pad-no-top {padding:0 10px 10px}	
.pad-trb-short {padding:0 0 5px 10px}

/* --------------------------------------------------------------------- Top navigation */
	
.strip-headwide, .strip-headnarrow {
	background:rgb(244, 247, 250);
	/* background:rgba(244, 247, 250, 0.95); */
	left:0;
	overflow:hidden;
	position:fixed;
	top:0;
	width:100%;
	z-index:5}
	
#logo-nav-sm {
	padding:5px 10px 0 7px}	
	
#logo-headwide-strip {
	position:relative}

#logo-headwide {
	background:#f4f7fa;
	left:15px;
	padding-top:4px;
	position:absolute;
	top:0;
	z-index:2}

.teamline {
	color:#8ca0ad;
	font-size:0.875em;
	padding:30px 10px 8px;
	text-align:right}
	
.menu-item {
	letter-spacing: 0.020em;
	padding:6px 20px;
	text-align:center}
	
.curr-menu-item, .menu-item a:hover {
	color:#405c78;
	font-weight:600;
	letter-spacing: 0.040em;}
	
.menu-item a {
	color:#191c1e;
	text-decoration:none}	
	
.pro-projects-lw {
	display:inline-block;
	margin:0; 
	width:5.5em}
	
#pro-prev, #pro-prev-sm, #pro-next, #pro-next-sm {
	color:#8ca0ad}
	
#pro-prev-sm i, #pro-next-sm i {
	font-size:0.850em;
	transform: translateY(-8%)}	
	
#pro-prev:hover, #pro-next:hover {
	color:#a81410}			
	
#navbars-sm {
	color:#8ca0ad;
	text-align:right}	
	
#menubars-i {
	cursor:pointer;
	padding:5px 10px 3px 25px;}	
	
#pagetitle-sm {
	border-top:solid 1px #8ca0ad;
	font-weight:600;
	letter-spacing: 0.040em;
	text-align:center}
	
#pagetitle-sm a {
	color:#8ca0ad;
	font-size:1.750em;
	padding:0 10px}		
	
#sitemenu-sm {
	background:rgb(64, 92, 120);
	background:rgba(64, 92, 120, 0.9);
	border-bottom-left-radius:6px;
	left:0;
	overflow:hidden;
	padding-top:8px;
	position:fixed;
	top:0;
	width:133px;
	z-index:10}
	
#sitemenu-sm span {
	color:#f4f7fa;
	display:block;
	padding:5px 10px;
	text-align:right}	
	
#sitemenu-sm span.botline {	
	border-bottom:solid 1px rgba(244, 247, 250, 0.33)}	
	
#sitemenu-sm .smnavdot-i {
	padding-right:20px}	
	
#sitemenu-sm .hidedot	{
	display:none}
	
#sitemenu-sm a {
	color:#f4f7fa;
	text-decoration:none}	

/* ------------------------------------------------------------------------------ Intro */	

/* Jumbotron */	
#jumbodiv-wide, #jumbodiv-narrow {
	left:0px;
	position:fixed;
	width:100%;
	z-index:-1}

#jumbodiv-wide {
	top:240px}
	
#jumbodiv-narrow {
	top:96px}	
	
.jumboimg-wide, .jumboimg-narrow {
	width:100%;
	height:auto}	
	
/* Werk display on jumbo */
.strip-werkwide {
	left:0;
	overflow:hidden;
	position:absolute;
	top:144px;
	width:100%}
	
.strip-werknarrow {
	left:0;
	overflow:hidden;
	position:absolute;
	top:50px;
	width:100%}	

#logopanelbig {
	padding:0 27px}
#logopanel-sm {
	padding:0 10px}	
#logopanelbig img, #logopanel-sm img {
	filter:drop-shadow(0 0 0.75rem #f4f7fa);
	/* filter:drop-shadow(-10px 10px 36px #f4f7fa) */}
	
#tagline, #tagline-sm {
	background:rgb(82, 82, 82);
	background:rgba(82, 82, 82, 0.6);
	border-radius:14px 0;
	color:#edf5fc;
	font-weight:600;
	letter-spacing: 0.020em;
	padding:12px 24px}	
#tagline {
	font-size:1.500em;
	margin-top:10px;
	max-width:660px}	
#tagline-sm {
	max-width:460px}	
#tagline span, #tagline-sm {
	 text-shadow: 3px 3px 7px #191919}
	 
#teamline-intro {
	color:#8ca0ad;
	font-size:0.875em}
	
.icon-title {
	font-size:1.1250em; 
	font-weight:600}	
	
/* -------------------------------------------------------------------- Global contents */

#strip-introcontent {
	background:rgb(244, 247, 250);
	background:rgba(244, 247, 250, 0.9);
	left:0;
	overflow:visible;
	position:absolute;
	width:100%}	
	
#strip-global-content {
	left:0;
	overflow:visible;
	position:absolute;
	top:0;
	width:100%}	
	
.page-top-title {
	font-size:1.5em; 
	font-weight:600}
	
.item-headline {
	font-size:1.125em;
	font-weight:600;
	padding:10px 10px 0}	
	
.item-headline-flow {
	font-size:1.125em;
	font-weight:600;
	padding:0 0 5px}	
	
.normlink {
	color:#191c1e;
	text-decoration:none}
	
.normlink:hover {
	color:#a81410}		
	
#footer-holder {
	background:#f4f7fa;
	padding:25px 0 15px;
	position:relative;
	width:100%}
	
#aw-footer {
	color:#8ca0ad;
	font-size:0.875em;
	text-align:right}	
	
/* -------------------------------------------------------------------- special Layouts */
	
.blue100line {
	border-bottom:solid 1px #8ca0ad;
	width:100%}
	
.blueline-flow {
	border-bottom:solid 1px #8ca0ad;
	margin:8px 0}
	
hr.blueflow {
	border:solid 1px #d6dde2;
	margin:8px 1%;
	width:98%}

.divCB {
	display:block;
	text-align:center}
	
.pic-border {
	border: 1px solid rgb(157, 181, 196);
	border: 1px solid rgba(157, 181, 196, 0.5)}	
	
.map-responsive {
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0}
    
.map-responsive iframe {
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute}	

/* ------------------------------------------------------------------ Project slideshow */

.pad-pro-text {
	padding:0 10px}

#pp-holder {
	height:auto;
	left:0;
	overflow:hidden;
	position:relative;
	top:0;
	width:100%}
	
#pp-receiver, #pp-pads {
	left:0;
	position:absolute;
	top:0;
	width:100%}
	
#pp-receiver {
	padding:0 10px;
	z-index:2}	
	
#pp-pads {
	z-index:3}
	
#pp-tapper-p, #pp-tapper-n {
	color:#d1ddea;
	cursor:pointer;
	display:inline-block;
	font-size:1.500em;
	opacity:0.7;
	width:48%;
	/* Paperbat candidate */
	-webkit-tap-highlight-color: rgba(0,0,0,0)}	
	
#pp-tapper-p {
	text-align:left}

#pp-tapper-n {
	text-align:right}			
	
#pp-holder img {
	border: 1px solid rgb(157, 181, 196);
	border: 1px solid rgba(157, 181, 196, 0.5)}	
	
#pp-spinner-holder {
	left:0;
	position:absolute;
	top:0;
	width:100%;
	z-index:1}	
	
#pp-spinner {
	color:#bfd0e2;
	font-size:2.000em}
	
/* for vorher images */
#beforebar {
	display:none;
	padding-bottom:10px}
	
.beforebit, .leaveBefore {
	cursor:pointer;
	display:inline-block;
	font-family:'Open Sans Condensed', sans-serif;
	font-weight:300;
	margin-right:1.250em;
	-webkit-tap-highlight-color: rgba(0,0,0,0)}	
	
.beforebit:hover, .leaveBefore:hover {
	color:#a81410}	
	
.beforebit i, .leaveBefore i {
	color:#8ca0ad;
	margin-right:0.500em}	
	
#slideCapt {
	font-size:90%;
	font-weight:lighter;
	opacity:0.9;
	padding:0.6vh calc(0.6vw + 8px)}
	
#lightbox-trigger {
	margin-top: 25px;
	text-align: center;
}	

#lightbox-trigger a {
	color: #8ca0ad;
}

#lightbox-trigger a:hover {
	color: #a81410;
}
		
/* -------------------------------------------------------- MEDIA QUERIES / BREAKPOINTS */

/* small */
@media screen and (max-width: 559px) {
	/* Body font-size */
	body {
		font-size:1em}
	/* top navigation */
	#logobox-sm {
		width:26%}
	#navbox-sm {
		width:74%}
	/* global content */	
	.page-top-title {
		font-size:1.250em}
	/* global footer */	
	#footer-holder {
		background:#405c78;
		padding:10px 0 15px}	
	#aw-footer {
		color:#f4f7fa}
	/* pro-text padding */	
	.pad-pro-text {
		padding:10px 10px}
}

/* medium */
@media screen and (min-width: 560px) and (max-width: 823px) {
	/* top navigation */
	#logobox-sm {
		width:20%}
	#navbox-sm {
		width:80%}
	/* pro-text padding */	
	.pad-pro-text {
		padding:10px 10px}	
}

/* large */
@media screen and (min-width: 824px) and (max-width: 1139px) {
	/* tagline */
	#tagline {
		font-size:1.375em;
		margin-top:5px}
}		

/* wide */
@media screen and (min-width: 1140px) {

}	


/* ----------------------------------------------------- base font / font style classes */ 		

/* Open Sans: 400,400italic,600,600italic,700,700italic,300,300italic */
.fos-i {
	font-style:italic;}
.fos-sb {
	font-weight:600;}
.fos-sbi {
	font-style:italic;
	font-weight:600;}
.fos-b {
	font-weight:700;}
.fos-bi {
	font-style:italic;
	font-weight:700;}
.fos-l {
	font-weight:300}	
.fos-li {
	font-style:italic;
	font-weight:300}		

/* Open Sans Condensed: 300,300italic */	
.fosc {
	font-family: 'Open Sans Condensed', sans-serif;
	font-weight:300;}
.fosc-i {
	font-family: 'Open Sans Condensed', sans-serif;
	font-style:italic;
	font-weight:300;}	

/* --------------------------------------------------------------------- General layout */
	
p {
	margin:0 0 15px 0}
p.bot8 {
	margin:0 0 8px 0}	
	
/* ----------------------------------------------------------------- Font Awesome Lists */
	
.fa-ul > li {
	display:block;
	padding:4px 2px;
	width:95%}
	
.fa-ul > li.ul-mela-link {
	color:#a81410;
	cursor:pointer}	
	
.fa-li {
	color:#8ca0ad;
	top: 7px;}