/* COLORS

font-family:'VAG Rounded LT W01 Light';
font-family:'VAG Rounded LT W01 Bold';
font-family:'HelveticaNeueETW01-55Rg';
font-family:'HelveticaNeueETW01-65Md';

BLAU #0096D5
*/

/* === */

/*#canvas { background: #c00 }

.img-responsive { height: 600px; }
*/

body { background: #D9D9DB; }


#primarynav { background: #444 }
#primarynav .l1 a  {  font-family: 'Open Sans', sans-serif; }


/* = TEXTSTILE ======================================= */
html * { font-size:100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body { font-size: 20px; line-height: 120% }

body,h1,h2,h3,h4,
p,table,ol,ul,dl,li,a,address,dd,dt, .ctel li span,
form,input,textarea,select,label { color: #333; font-family: 'Open Sans', Arial, Tahoma, Helvetica, sans-serif; }

h1,h2,h3,h4,p,li,address,input,textarea,select,dd,dt,label,table { font-style: normal; font-weight: 300; }
h1,h2,h3,h4,p,li,address,input,textarea,select,dd,dt,label,table { }


/* FONT-SIZES */
.small 		{ font-size: 81.81% !important;	line-height: 125% !important; }
.smaller 	{ font-size: 75% !important;	line-height: 125% !important; }
.big 		{ font-size: 160% !important; line-height: 125%;  }

/* HEADLINES */
h1, h2, h3, h4 { font-family: 'VAG Rounded LT W01 Light', Arial, sans-serif; margin: 1.5em 0 0.5em 0; letter-spacing: 0.1ex }
.header h1, .header h2, .header h3, .header h4  { margin-top: 0; margin-bottom: 0; }

h1, .h1 	{ color: #0096D5; font-size: 200%; line-height: 90%; text-transform: uppercase; font-weight: 400; }
h2, .h2 h1 	{ color: #333333; font-size: 116.66666%; line-height: 110%; text-transform: none; font-weight: 400 }
h3, .h3 h2 	{ font-family: 'Open Sans', Arial, Tahoma, Helvetica, sans-serif; color: #333333; font-size: 100%; font-weight: 300 }

.csc-text-text > h1:first-child, .csc-text-text > h2:first-child, .csc-text-text > h3:first-child { margin-top: 0 }

/* ABSÄTZE / TABELLEN IN CONTENT-ELEMENTEN */
p, ul, ol, blockqoute, address, table { margin: 0 0 0.8em 0; }
p + p.small 	{ margin-top: 0 }
li p 			{ margin-bottom: 0.2em; }

p { -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; }

em        { font-style: italic; }
b, strong { font-weight: 600 !important; }
address   { font-style: normal;  }
table     { width: 100%; }
table p   { margin: 0; -moz-hyphens: none; -webkit-hyphens: none; hyphens: none;  }
table td { padding: 0.1em 0; }
table caption { text-align: left; }

/* AUFLISTUNGEN IN CONTENT-ELEMENTEN */
li { margin: 0; }
.csc-text-text ul, .csc-text-text ol { padding: 0 0 0 1.4em; }
.csc-text-text li { padding: 0 0 .2em 0; margin: 0; }
.csc-text-text ul li { margin-left: -0.2em; padding-left: 0.2em; }

.csc-text-text ul { padding: 1px 0 0 0; }
.csc-text-text ul li { list-style: none; margin-left: 20px; padding-left: 0; position: relative; }
.csc-text-text ul li:before {
	content:"";
	text-indent: 0;
	overflow: hidden;

	position: absolute;
	top: .4em;;
	left: -20px;
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background: #AAA;
}

/* ====== */
		
.list-unstyled { padding-left: 0; list-style: none; }
.list-unstyled > li { margin-left: 0;  }
.list-unstyled > li:before { display: none; }

.dark { background: #B99E84; }
.dark2 { background: #C5CEAF; }
.dark3 { background: #728E44; }
.bright { background: #E1E6D6; }

.ctel.dark { background: transparent; }
.ctel.dark  * { color: #fff !important; }
.ctel.dark  a, .ctel.dark  span { text-decoration: none !important; }
.ctel.dark  a:hover { text-decoration: underline !important; }

.ctel.dark > * { background: #B99E84; }
.ctel.dark > * { padding: 10px 10px 10px 10px;  }
.ctel.dark .header { background: #EBE6DE; }
.ctel.dark .header * { color: #A78665 !important }

a.btn, a.btn:link, a.btn * { font-family: 'VAG Rounded LT W01 Bold', Arial, sans-serif; font-size: 22px; letter-spacing: 0.1ex }
a.btn:hover { }

.border-bottom 	{  border-bottom: 2px solid #CACACA; }
.border-top 	{  border-top: 2px solid #CACACA; }

.ctel.bright { background: transparent; }
.ctel.bright > * { background: #FFFFFF; }
.ctel.bright > * { padding: 10px 10px 10px 10px;  }

.ctel.bright + .ctel.bright { margin-top: -2em; }


/* === IMGMAP ========================== */
.imgwrap figcaption.imgmap { pointer-events: none; }
.imgwrap figcaption.imgmap a { pointer-events: all; position: absolute; width: 60px; height: 60px; margin-left: -30px; margin-top: -30px; border-radius: 50%; background: rgba(255,255,255,0); border: 2px solid #B99E84; opacity: 0.5;  }
.imgwrap figcaption.imgmap a { transition: all .2s }
.imgwrap figcaption.imgmap a:hover { opacity: 1; background-color: rgba(255,255,255,0.8); }

/* === HOVER CAPTION ========================== */
/*.hoverCaption .imgwrap { }
.hoverCaption .imgwrap figure { position: relative; overflow: hidden }

.hoverCaption .imgwrap figure > a { display: block; transform: translateX(-100%); }
.hoverCaption .imgwrap figure:hover > a { transform: translateX(0); }

.hoverCaption .imgwrap figure img { transform: translateX(100%); }
.hoverCaption .imgwrap figure:hover img { transform: translateX(0); }

*/
/*.hoverCaption .imgwrap figure:hover { box-shadow: 0 0 2px #000; }*/

.imgwrap figure { position: relative; }
.img-caption-over figcaption { position: absolute; bottom: 0; left: 0; width: 100%;  overflow: hidden; }
.img-caption-over figcaption { padding: 10px; background: rgba(255,255,255,0.9); }

.img-caption-over.slide-in figure { overflow: hidden; }
.img-caption-over.slide-in figcaption { 
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
}
.img-caption-over.slide-in figcaption {  
	transition: transform;
	-webkit-transition: -webkit-transform;
	transition-duration: .4s;
}
.jsna .img-caption-over.slide-in figure:hover figcaption, 
.notScrllng .img-caption-over.slide-in figure:hover figcaption { 
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

/* === MAP =========================================== */
#map { position: absolute; top: 0; width: 100%; z-index: 2 }
#map * > div { cursor: pointer;  }

#map .pois > div 		{ position: absolute; width: 320px; background: rgba(240,240,240,.8); border-radius: 5px; padding: 60px 30px 30px 30px; pointer-events: none; }


#map .togglers > a { font-family: 'VAG Rounded LT W01 Bold', Arial, sans-serif; font-size: 22px; margin: 2px;  background: rgba(0,0,0,0.2); overflow: hidden; border-radius: 5px; }
#map .togglers > a.act { background: rgba(0,0,0,0.4); } 
#map .togglers > a:link { text-decoration: none !important; } 
/* === SLIDES =========================================== */
#slideshow { position: absolute; z-index: 1; width: 100%; }
.screens .item { position: absolute; width: 100%; height: 100%; top: 0; overflow: hidden;  }
.screens .c { position: absolute; width: 100%; top: 0; height: 100%; z-index: 1;   }
.screens .c > div { position: absolute; top: 0; bottom: 0; right: 0; width: 60%; background: rgba(240,240,240,0.5); }
.screens .c > div > div { position: absolute; top: 350px; bottom: 0; right: 0; width: 100%; background: rgba(240,240,240,0.8); }
.screens .c > div > div > div { padding: 0 60px; }

.screens li { font-size: 16px; line-height: 120%; font-family: 'HelveticaNeueETW01-65Md', Arial, sans-serif; padding-bottom: .5em;  }

.screens ul { padding: 1px 0 0 0; }
.screens ul li { list-style: none; margin-left: 25px; padding-left: 0; position: relative; }
.screens ul li:before {
	content:"";
	text-indent: 0;
	overflow: hidden;

	position: absolute;
	top: .2em;
	left: -25px;
	content: '';
	width: 12px;
	height: 12px;
	background: #0096D5;
	background: #878787;
	border: 0;
	border-radius: 6px;
}



/* === CONTENT-DETAILS =========================================== */
#details .item { 
	background: #f3f3f3;
	font-size: 16px;
	line-height: 120%;
}


/*  LANDSCAPE */

/*
#canvas { width: 1024px; height: 768px; margin-left: -512px; margin-top: -384px; }
#header { background: transparent; padding: 10px 10px 10px 10px }
.navbar-toggle { background: rgba(50,50,50, .50); right: 10px; }
#logo {  background-color: rgba(50,50,50, .50); }
#primarynav { top: -10px; padding: 60px 0; margin-top: 0; }

*/

.screens .c > div { width: 50%; }
.screens .c > div > div { top: 340px; }
.screens .c > div > div > div { padding: 0 40px; }
/*
#details { height: 768px; top:0; }
#details .item > .ctel  { padding-left: 70px; padding-right: 70px; }
*/

#details  { 
	-webkit-transform:translateX(100%);
}

#header { background: #fff; padding-top: 15px; padding-bottom: 10px; height: auto;  }
.navbar-toggle { z-index: 2; background: transparent; border: 1px solid #ccc; right: auto; top: auto; bottom: 0; left: 5px; padding: 10px 12px; width: 60px; height: 60px;  }
.navbar-toggle.act .icon-bar { background: #666 }

#logo { right: auto; bottom: auto; position: relative; margin: 0 0 0 auto; }
#logo { opacity: 1 !important; border-radius: 0; width: auto; height: 70px; margin-left: 80px; background: url('caparol_logo.png') right center no-repeat; background-size: contain; }
#logo a { top: auto; bottom: -2px; height: auto;  text-align: left; text-indent: 0; overflow-x: hidden; font-family: 'VAG Rounded LT W01 Bold', Arial, sans-serif; color: #999; font-size: 19px; line-height: 90%; text-transform: uppercase; font-weight: 400; }

#map { top: 20px; }
#map .togglers { bottom: 60px; }

#details { top: 90px; height: 924px; }

.back { 
	position: absolute; width: 60px; height: 60px; top: auto; bottom: 0; left: 0; border-radius: 50%; border: 1px solid #ccc; transition: opacity;
	cursor: pointer;
	z-index: 1;
	background: url("data:image/svg+xml;charset=UTF-8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='14px' height='19.5px' xml:space='preserve'%3E%3Cpolyline fill='none' stroke-linecap='round' stroke='%23AAAAAA' stroke-width='3' points='9,1.5 1.5,9.5 9,18' %3E%3C/polyline%3E%3C/svg%3E") center center no-repeat;
}

.back { opacity: 0; }
.teaser .back, 
.details .back { opacity: 1; }

.teaser .navbar-toggle, 
.details .navbar-toggle { left: 70px; }

.teaser #logo, 
.details #logo { margin-left: 150px; }