@charset "UTF-8";
/* ------------------------------------------------------------------------- */
/* WEBFONTS: */
/*@font-face {font-family: 'FuturaBT-Book';src: url('../webfonts/eot/style_571.eot?#iefix') format('embedded-opentype'),url('../webfonts/woff/style_571.woff') format('woff'),url('../webfonts/ttf/style_571.ttf') format('truetype'),url('../webfonts/svg/style_571.svg#FuturaBT-Book') format('svg');}
@font-face {font-family: 'FuturaBT-BookItalic';src: url('../webfonts/eot/style_572.eot?#iefix') format('embedded-opentype'),url('../webfonts/woff/style_572.woff') format('woff'),url('../webfonts/ttf/style_572.ttf') format('truetype'),url('../webfonts/svg/style_572.svg#FuturaBT-BookItalic') format('svg');}*/
@font-face {font-family: 'FuturaBT-Light';src: url('../webfonts/eot/style_569.eot?#iefix') format('embedded-opentype'),url('../webfonts/woff/style_569.woff') format('woff'),url('../webfonts/ttf/style_569.ttf') format('truetype'),url('../webfonts/svg/style_569.svg#FuturaBT-Light') format('svg');}
/*@font-face {font-family: 'FuturaBT-LightItalic';src: url('../webfonts/eot/style_570.eot?#iefix') format('embedded-opentype'),url('../webfonts/woff/style_570.woff') format('woff'),url('../webfonts/ttf/style_570.ttf') format('truetype'),url('../webfonts/svg/style_570.svg#FuturaBT-LightItalic') format('svg');}
@font-face {font-family: 'FuturaBT-Medium';src: url('../webfonts/eot/style_573.eot?#iefix') format('embedded-opentype'),url('../webfonts/woff/style_573.woff') format('woff'),url('../webfonts/ttf/style_573.ttf') format('truetype'),url('../webfonts/svg/style_573.svg#FuturaBT-Medium') format('svg');}
@font-face {font-family: 'FuturaBT-MediumItalic';src: url('../webfonts/eot/style_574.eot?#iefix') format('embedded-opentype'),url('../webfonts/woff/style_574.woff') format('woff'),url('../webfonts/ttf/style_574.ttf') format('truetype'),url('../webfonts/svg/style_574.svg#FuturaBT-MediumItalic') format('svg');}
@font-face {font-family: 'FuturaBT-Bold';src: url('../webfonts/eot/style_575.eot?#iefix') format('embedded-opentype'),url('../webfonts/woff/style_575.woff') format('woff'),url('../webfonts/ttf/style_575.ttf') format('truetype'),url('../webfonts/svg/style_575.svg#FuturaBT-Bold') format('svg');}
@font-face {font-family: 'FuturaBT-BoldItalic';src: url('../webfonts/eot/style_576.eot?#iefix') format('embedded-opentype'),url('../webfonts/woff/style_576.woff') format('woff'),url('../webfonts/ttf/style_576.ttf') format('truetype'),url('../webfonts/svg/style_576.svg#FuturaBT-BoldItalic') format('svg');}*/

@media (max-height: 817px) {
	.openVideo {margin-top: -9px !important;}
	div.slide#slideStart .logo {margin-top: 0 !important;}
}
/* ------------------------------------------------------------------------- */
/* RESET: */
* {margin: 0; padding: 0; line-height: 1.5; vertical-align: baseline; font-family: inherit; font-style: inherit; font-weight: inherit; font-size: 100%;}
html {font-family: 'FuturaBT-Light', Arial, sans-serif; color: #000000; width: 100%; height: 100%; font-size: 100.01%; -ms-touch-action: none;}
body {-webkit-text-size-adjust: none;}
img, a img {border: 0 none;}
a {display: inline-block; text-decoration: none; cursor: pointer; outline: 0 none; -webkit-tap-highlight-color: rgba(0,0,0,0); color: #787878;}
div, span {cursor: default; -webkit-tap-highlight-color: rgba(0,0,0,0);}
table {display: table; table-layout: auto; border-collapse: collapse; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal; float: none !important;}
table, th, td {vertical-align: top;}
tr {display: table-row;}
td {display: table-cell;}
b, strong {font-weight: bold;}
i {font-style: italic;}
input, label, select, textarea {outline: 0 none; display: inline-block;}
label, select, option, input[type=checkbox], input[type=radio] {cursor: pointer; outline: 0 none;}
ul, li {/*list-style: none;*/ cursor: default;}
input, textarea {font-family: 'Nunito-Light', Arial, sans-serif; -webkit-appearance: none; -webkit-border-radius: 0 0 0 0;}
textarea {overflow: auto; zoom: 1;}
sub, sup {display: inline; vertical-align: middle; line-height: 0.5;}
body.js noscript {display: none;}
/* ------------------------------------------------------------------------- */
/* COMMON CLASSES: */
.clear {clear: both;}
.floatLeft {float: left; display: inline-block;}
.floatRight {float: right; display: inline-block;}
.floatNone {float: none !important;}
.hidden {display: none;}
.displayNone {display: none !important;}
.displayBlock {display: block;}
.displayInline {display: inline;}
.displayInlineBlock {display: inline-block;}
.invisible {visibility: hidden;}
.visible {visibility: visible;}
.absolute {position: absolute;}
.relative {position: relative;}
.static {position: static;}
.fixed {position: fixed;}
.marginNone {margin: 0 !important;}
.paddingNone {padding: 0 !important;}
.borderNone {border: 0 none !important;}
.outlineNone {outline: 0 none !important;}
.lineHeightNone {line-height: 0;}
.lineHeightOne {line-height: 1;}
.textAlignCenter {text-align: center;}
.textAlignLeft {text-align: left;}
.textAlignRight {text-align: right;}
.nowrap, .nobr {white-space: nowrap;}
.bold {font-weight: bold;}
.italic {font-style: italic;}
.underline {text-decoration: underline;}
.linethrough {text-decoration: line-through;}
.scroll {overflow: auto; /*overflow-x: hidden; overflow-y: scroll;*/}
.disabled, .disabled *, *[disabled], *[disabled] * {cursor: default !important; /*opacity: 0.5; filter: alpha(opacity=50);*/}
.colorFade {
	-webkit-transition: color 0.2s, background-color 0.2s;
	-moz-transition: color 0.2s, background-color 0.2s;
	-o-transition: color 0.2s, background-color 0.2s;
	transition: color 0.2s, background-color 0.2s;
}
.unselectable {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.sprite {background: transparent url('../images/sprite_changeup.png') no-repeat scroll left top;}
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min--moz-device-pixel-ratio: 2), screen and (-o-min-device-pixel-ratio: 2/1), screen and (min-device-pixel-ratio: 2), screen and (min-resolution: 2dppx) {
	.sprite {background-size: 1024px 512px; background-image: url('../images/sprite_changeup@2x.png');}
}

#footerSlideImprint p a {color:#787878;}

/* ------------------------------------------------------------------------- */
/* COLORS: */
.green, .greenText {color: #96c11a; background: #96c11a none;}
.pink, .pinkText {color: #e5007e; background: #e5007e none;}
.blue, .blueText {color: #009fe3; background: #009fe3 none;}
.purple, .purpleText {color: #941681; background: #941681 none;}
.orange, .orangeText {color: #f49100; background: #f49100 none;}

.green.hover, .greenText.hover {color: #bfda76; background: #bfda76 none;}
.pink.hover, .pinkText.hover {color: #ef66b1; background: #ef66b1 none;}
.blue.hover, .blueText.hover {color: #66c5ee; background: #66c5ee none;}
.purple.hover, .purpleText.hover {color: #bf73b3; background: #bf73b3 none;}
.orange.hover, .orangeText.hover {color: #f8bd66; background: #f8bd66 none;}

.softGreen {background: #eaf3d1 none;}
.softPink {background: #fce5f2 none;}
.softBlue {background: #ccecf9 none;}
.softPurple {background: #f4e7f2 none;}
.softOrange {background: #fde9cc none;}

/* ------------------------------------------------------------------------- */
/* MAIN LAYOUT:
 * Page: Minimum width and height of the whole site are set here!
 * Header: The height of #header must be set as the margin-top of #content!
 * Colorbar: The height of #colorbar has to be set as the top value for #slides and the margin-top for #footerSlide! The fixed pixel width of the container is defined by the negative margin left and right!
 * Footer: The height of #footer-nav must be set as margin-bottom of #content and padding-bottom of #footer-content!
 * Footer-Content: The margin-bottom value has to be "0 minus the height" and is used for the slide animation!
 */
body {position: relative; width: 100%; height: 100%; /*overflow: hidden;*/ background: #ffffff none;
/* Enable hardware GPU acceleration: */
	/*-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;*/
}
#page {position: relative; width: 100%; min-width: 990px; height: 100%; min-height: 720px; margin: 0 auto; overflow: hidden;}
#header {position: absolute; top: 0; left: 0; width: 100%; height: 29px; border-bottom: 1px solid #595959; color: #9c9c9c; background: #ffffff none; font-size: 14px; line-height: 18px;}
#logo-changeup {position: absolute; bottom: 7px; left: 27px; width: 108px; height: 14px; background-position: 0px -50px; cursor: pointer;}
#meta-telephone {position: absolute; bottom: 2px; right: 462px; height: 21px; padding-left: 25px; padding-top: 3px; background: url('../images/start/telephone.jpg') no-repeat; }
#meta-email {position: absolute; bottom: 2px; right: 208px; padding-left: 35px; background: url('../images/start/email.jpg') no-repeat;}
#meta-contact {position: absolute; bottom: 2px; right: 126px; cursor: pointer;}
#meta-imprint {position: absolute; bottom: 2px; right: 30px; cursor: pointer;}
#meta-contact:hover, #meta-contact.active,
#meta-imprint:hover, #meta-imprint.active {color: #000000;}
#content {position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 30px 0 100px 0; background: #ffffff none; overflow: hidden;}
#colorbar {position: absolute; top: 0; left: 50%; right: 50%; height: 20px; margin: 0 -400px 0 -400px;
	/*transition: left .5s, right .5s, margin .5s; ======== Note: transition code is added through JS! */
}
/*#colorbar.open {left: 0; right: 0; margin: 0 0 0 0;}*/
#slides {position: absolute; top: 20px; left: 0; right: 0; bottom: 0;}
#footer {position: absolute; bottom: 0; left: 0; width: 100%;}
#footer-nav {position: absolute; bottom: 0; left: 0; width: 100%; height: 99px; border-top: 1px solid #595959; background: #ffffff url('../images/footer/footer_grafik@2x.jpg') no-repeat scroll center top; background-size: 800px 100px;}
#footer-nav > div {position: absolute; top: 0; left: 50%; cursor: pointer;}
#footer-nav > div#footer-grafikwechsel {margin: 8px 0 0 -404px;}
#footer-nav > div#footer-kassette {margin: 32px 0 0 -112px;}
#footer-nav > div#footer-teleskopstange {margin: 46px 0 0 115px;}
#footerSlides {position: absolute; /*display: none;*/ top: 100%; left: 0; right: 0; width: 100%; height: 100%; margin: 20px 0 0 0; border-top: 1px solid #595959; background: #ffffff none;}
#lightbox {position: absolute; display: none; top: 30px; bottom: 0; left: 0; right: 0; text-align: center; background: #ffffff none; background-color: rgba(255, 255, 255, 0.95);}
div.closeBtn {position: absolute; left: 50%; width: 31px; height: 31px; margin: 20px 0 0 449px; background-position: -300px 0; cursor: pointer; opacity: 0.6; filter: alpha(opacity=60);
	-webkit-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
	transition: opacity 0.2s;
}
div.closeBtn:hover {opacity: 1; filter: alpha(opacity=100);}

/* ------------------------------------------------------------------------- */
/* COLORBAR LAYOUT: */
#colorbar > div {position: absolute; top: 0; left: 0; right: 0; width: 20%; height: 100%; /*box-sizing: border-box; -moz-box-sizing: border-box;*/ cursor: pointer;
	/*transition: width .5s, left .5s, right .5s, margin .5s; ======== Note: transition code is added through JS! */
}
#colorbar > #color1 {margin: 0 0 0 0;}
#colorbar > #color2 {margin: 0 0 0 20%;}
#colorbar > #color3 {margin: 0 0 0 40%;}
#colorbar > #color4 {margin: 0 0 0 60%;}
#colorbar > #color5 {margin: 0 0 0 80%;}

#colorbar.open > div {padding: 0 3px 0 0;/* ======== Note: this padding is a fix that prevents white gaps showing between the color bars! */}

/* ======== Note: positioning code is added through JS!
#colorbar.open > div.open {width: 68%;}
#colorbar.open > #color1.open {margin: 0 32% 0 0%;}
#colorbar.open > #color2.open {margin: 0 24% 0 8%;}
#colorbar.open > #color3.open {margin: 0 16% 0 16%;}
#colorbar.open > #color4.open {margin: 0 8% 0 24%;}
#colorbar.open > #color5.open {margin: 0 0% 0 32%;}

#colorbar.open > div.closedLeft {width: 8%; right: 100%; margin-right: 0;}
#colorbar.open > #color1.closedLeft {margin: 0 0 0 0%;}
#colorbar.open > #color2.closedLeft {margin: 0 0 0 8%;}
#colorbar.open > #color3.closedLeft {margin: 0 0 0 16%;}
#colorbar.open > #color4.closedLeft {margin: 0 0 0 24%;}
#colorbar.open > #color5.closedLeft {margin: 0 0 0 32%;}

#colorbar.open > div.closedRight {width: 8%; left: 100%; margin-right: 0;}
#colorbar.open > #color1.closedRight {margin: 0 0 0 -32%;}
#colorbar.open > #color2.closedRight {margin: 0 0 0 -24%;}
#colorbar.open > #color3.closedRight {margin: 0 0 0 -16%;}
#colorbar.open > #color4.closedRight {margin: 0 0 0 -8%;}
#colorbar.open > #color5.closedRight {margin: 0 0 0 0%;}
*/

/* ------------------------------------------------------------------------- */
/* SLIDES LAYOUT: */
div.slide {display: none; position: absolute; top: 0; left: 50%; right: 50%; bottom: 0; width: auto; height: 100%; box-sizing: border-box; -moz-box-sizing: border-box; background: #ffffff none;}
div.slide > div {position: absolute; top: 0; left: 0; right: 0;}
div.slide > div.left {position: absolute; top: 0; left: 50%; width: 324px; bottom: 0; margin: 0 0 0 -480px; padding: 20px 75px 0 0; background: #ffffff none;}
div.slide > div.right {position: absolute; top: 0; left: 50%; bottom: 0; right: 0; width: 560px; margin: 0 0 0 -75px; overflow: auto; padding: 11px 0 0 0; background: #ffffff none;}
div.slide > div.center {position: static; width: 960px; margin: 0 auto;}
div.slide > div div.scroll {width: 476px; overflow: auto;}

/* ------------------------------------------------------------------------- */
/* START PAGE SLIDE: */
div.slide#slideStart {display: block; width: 800px; margin: 0 0 0 -400px;}
div.slide#slideStart > div {position: static;}
div.slide#slideStart .teaser {float: left; width: 20%; height: 200px; cursor: pointer; background-image: url('../images/start/start_gallery_products@2x.jpg'); background-position: 0 38px; background-repeat: no-repeat; background-size: 800px 162px;}
div.slide#slideStart .teaser.col1 {background-position: 0 38px;}
div.slide#slideStart .teaser.col2 {background-position: -160px 38px;}
div.slide#slideStart .teaser.col3 {background-position: -320px 38px;}
div.slide#slideStart .teaser.col4 {background-position: -480px 38px;}
div.slide#slideStart .teaser.col5 {background-position: -640px 38px;}
div.slide#slideStart .teaser .color {float: none; width: auto; height: 38px; background-image: url('../images/start/start_gallery_stanze@2x.png'); background-size: 800px 38px; cursor: pointer;}
div.slide#slideStart .teaser.col1 .color {background-position: 0 0;}
div.slide#slideStart .teaser.col2 .color {background-position: -160px 0;}
div.slide#slideStart .teaser.col3 .color {background-position: -320px 0;}
div.slide#slideStart .teaser.col4 .color {background-position: -480px 0;}
div.slide#slideStart .teaser.col5 .color {background-position: -640px 0;}
div.slide#slideStart .text {height: 260px; padding: 0 80px 0 0; color: #6f6f6f; background: #dadada none; text-align: right;}
div.slide#slideStart .text h2 {padding: 113px 0 6px 0; font-size: 28px; text-transform: none;}
div.slide#slideStart .color {float: left; width: 20%; height: 10px;}
div.slide#slideStart .logo {float: right; width: 264px; height: 35px; margin: /*90px*/50px 80px 0 0; background-position: 0px 0px;}
div.slide#slideStart .minicontent {float: right; width: 500px; margin: 10px 80px 0 0; background-position: 0px 0px;}
div.slide#slideStart .minicontent p {font-size: 10px; line-height: normal; text-align: right;}
.openVideo {float: left; margin: 47px 0 0 0; cursor: pointer;}

/* ------------------------------------------------------------------------- */
/* VIDEO TOPSLIDE: */
#topSlide {height: 0; z-index: 1; display: none;}
#topSlide .video {position: relative; z-index: 1; margin: 50px auto 0 auto; padding: 20px 8px 10px 8px; width: 782px; height: 438px; background-color: #FFFFFF; border: 1px solid #595959;}
#topSlide div.closeBtn {top: 67px; margin-top: 0; z-index: 1; background-position: -400px 0;}

/* ------------------------------------------------------------------------- */
/* SCROLLBAR LAYOUT: */
.mCustomScrollBox > .mCSB_scrollTools {top: 75px; height: 80%; width: 40px;}
.mCSB_scrollTools .mCSB_draggerContainer {cursor: pointer;}
.mCSB_scrollTools .mCSB_draggerRail {width: 1px; background: #acacac none;}
.mCSB_scrollTools .mCSB_dragger {height: 40px;}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar {width: 3px; border-radius: 0 0 0 0; background: #acacac none; cursor: pointer;}

/* ------------------------------------------------------------------------- */
/* LIGHTBOX LAYOUT: */
#lightbox > .prevBtn {position: absolute; top: 0px; left: 0; right: 50%; bottom: 0; cursor: pointer;}
#lightbox > .nextBtn {position: absolute; top: 0px; left: 50%; right: 0; bottom: 0; cursor: pointer;}
#lightbox .lightbox-slides {position: absolute; top: 50%; left: 0; right: 0; margin: -256px 0 0 0;}
#lightbox .lightbox-slides .center {position: relative; display: inline-block; min-width: 400px; height: 512px; margin: 0 auto;}
#lightbox .lightbox-slides .center .slides {position: relative; top: 0; left: 0; right: 0; bottom: 0; height: 100%;}
#lightbox .lightbox-slides .prevBtn {position: absolute; z-index: 1001; left: 0; top: 50%; width: 31px; height: 58px; margin: -29px 0 0 -40px; cursor: pointer; background-position: 0 -100px; opacity: 0.6; filter: alpha(opacity=60);
	-webkit-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
	transition: opacity 0.2s;
}
#lightbox .lightbox-slides .nextBtn {position: absolute; z-index: 1001; right: 0; top: 50%; width: 31px; height: 58px; margin: -29px -40px 0 0; cursor: pointer; background-position: -50px -100px; opacity: 0.6; filter: alpha(opacity=60);
	-webkit-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
	transition: opacity 0.2s;
}
#lightbox .lightbox-slides .prevBtn:hover,
#lightbox .lightbox-slides .nextBtn:hover {opacity: 1; filter: alpha(opacity=100);}
#lightbox .lightbox-slides .closeBtn {z-index: 1002; left: auto; right: 0; top: 0; margin: 0 -40px 0 0;}
#lightbox .lightbox-slides .lightbox-slide {display: none; position: absolute; top: 0; max-width: 100%; overflow: hidden;}
#lightbox .lightbox-slides .lightbox-slide img {height: 480px;}

#lightbox.green .lightbox-slides .prevBtn {background-position: 0 -100px;}
#lightbox.green .lightbox-slides .nextBtn {background-position: -50px -100px;}
#lightbox.pink .lightbox-slides .prevBtn {background-position: -100px -100px;}
#lightbox.pink .lightbox-slides .nextBtn {background-position: -150px -100px;}
#lightbox.blue .lightbox-slides .prevBtn {background-position: -200px -100px;}
#lightbox.blue .lightbox-slides .nextBtn {background-position: -250px -100px;}
#lightbox.purple .lightbox-slides .prevBtn {background-position: -300px -100px;}
#lightbox.purple .lightbox-slides .nextBtn {background-position: -350px -100px;}
#lightbox.orange .lightbox-slides .prevBtn {background-position: -400px -100px;}
#lightbox.orange .lightbox-slides .nextBtn {background-position: -450px -100px;}

/* ------------------------------------------------------------------------- */
/* IMAGE COLLECTION : */
div.collection {position: relative; margin: 0 0 20px 0;}
div.collection img {display: block;}
div.collection div.lightbox-open {position: absolute; top: 0; left: 0; cursor: pointer; opacity: 0; filter: alpha(opacity=0);
	-webkit-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
	transition: opacity 0.2s;
}
div.collection div.lightbox-open:hover {opacity: 0.7; filter: alpha(opacity=70);}
div.collection div.lightbox-open div {position: absolute; top: 50%; left: 50%; width: 39px; height: 38px; margin: -19px 0 0 -19px; color: #ffffff; cursor: pointer; filter: alpha(opacity=0); background-position: -650px 0;}
div.collection div.lightbox-open:hover div {filter: alpha(opacity=100);}

/* ------------------------------------------------------------------------- */
/* ONE IMAGE COLLECTION POSITIONS: */
#slideContent1 div.collection div.lightbox-open[data-index="0"] {width: 233px; height: 400px;}
#slideContent1 div.collection div.lightbox-open[data-index="1"] {left: 244px; width: 232px; height: 93px;}
#slideContent1 div.collection div.lightbox-open[data-index="2"] {top: 102px; left: 243px; width: 232px; height: 93px;}
#slideContent1 div.collection div.lightbox-open[data-index="3"] {top: 204px; left: 243px; width: 111px; height: 94px;}
#slideContent1 div.collection div.lightbox-open[data-index="4"] {top: 204px; left: 364px; width: 111px; height: 94px;}
#slideContent1 div.collection div.lightbox-open[data-index="5"] {top: 306px; left: 243px; width: 232px; height: 94px;}

/* ------------------------------------------------------------------------- */
/* TWO IMAGE COLLECTION POSITIONS: */
#slideContent2 img.margin {margin-bottom: 50px;}
#slideContent2 div.collection div.lightbox-open[data-index="0"] {width: 233px; height: 400px;}
#slideContent2 div.collection div.lightbox-open[data-index="1"] {left: 244px; width: 232px; height: 93px;}
#slideContent2 div.collection div.lightbox-open[data-index="2"] {top: 102px; left: 243px; width: 232px; height: 93px;}
#slideContent2 div.collection div.lightbox-open[data-index="3"] {top: 204px; left: 243px; width: 111px; height: 94px;}
#slideContent2 div.collection div.lightbox-open[data-index="4"] {top: 204px; left: 364px; width: 111px; height: 94px;}
#slideContent2 div.collection div.lightbox-open[data-index="5"] {top: 306px; left: 243px; width: 232px; height: 94px;}

/* ------------------------------------------------------------------------- */
/* THREE IMAGE COLLECTION POSITIONS: */
#slideContent3 div.collection div.lightbox-open[data-index="0"] {width: 233px; height: 400px;}
#slideContent3 div.collection div.lightbox-open[data-index="1"] {left: 244px; width: 232px; height: 93px;}
#slideContent3 div.collection div.lightbox-open[data-index="2"] {top: 102px; left: 243px; width: 232px; height: 93px;}
#slideContent3 div.collection div.lightbox-open[data-index="3"] {top: 204px; left: 243px; width: 111px; height: 94px;}
#slideContent3 div.collection div.lightbox-open[data-index="4"] {top: 204px; left: 364px; width: 111px; height: 94px;}
#slideContent3 div.collection div.lightbox-open[data-index="5"] {top: 306px; left: 243px; width: 232px; height: 94px;}

/* ------------------------------------------------------------------------- */
/* FOUR IMAGE COLLECTION POSITIONS: */
#slideContent4 div.collection div.lightbox-open[data-index="0"] {width: 233px; height: 400px;}
#slideContent4 div.collection div.lightbox-open[data-index="1"] {left: 244px; width: 232px; height: 93px;}
#slideContent4 div.collection div.lightbox-open[data-index="2"] {top: 102px; left: 243px; width: 232px; height: 93px;}
#slideContent4 div.collection div.lightbox-open[data-index="3"] {top: 204px; left: 243px; width: 111px; height: 94px;}
#slideContent4 div.collection div.lightbox-open[data-index="4"] {top: 204px; left: 364px; width: 111px; height: 94px;}
#slideContent4 div.collection div.lightbox-open[data-index="5"] {top: 306px; left: 243px; width: 232px; height: 94px;}

/* ------------------------------------------------------------------------- */
/* FIVE IMAGE COLLECTION POSITIONS: */
#slideContent5 div.collection div.lightbox-open[data-index="0"] {width: 233px; height: 400px;}
#slideContent5 div.collection div.lightbox-open[data-index="1"] {left: 244px; width: 232px; height: 93px;}
#slideContent5 div.collection div.lightbox-open[data-index="2"] {top: 102px; left: 243px; width: 232px; height: 93px;}
#slideContent5 div.collection div.lightbox-open[data-index="3"] {top: 204px; left: 243px; width: 111px; height: 94px;}
#slideContent5 div.collection div.lightbox-open[data-index="4"] {top: 204px; left: 364px; width: 111px; height: 94px;}
#slideContent5 div.collection div.lightbox-open[data-index="5"] {top: 306px; left: 243px; width: 232px; height: 94px;}

/* ------------------------------------------------------------------------- */
/* CLOSE BUTTON COLORS: */
#slideContent1 div.closeBtn,
#lightbox.green div.closeBtn {background-position: -350px 0;}
#slideContent2 div.closeBtn,
#lightbox.pink div.closeBtn {background-position: -400px 0;}
#slideContent3 div.closeBtn,
#lightbox.blue div.closeBtn {background-position: -450px 0;}
#slideContent4 div.closeBtn,
#lightbox.purple div.closeBtn {background-position: -500px 0;}
#slideContent5 div.closeBtn,
#lightbox.orange div.closeBtn {background-position: -550px 0;}

/* ------------------------------------------------------------------------- */
/* HEADLINES AND TEXT: */
h1 {font-family: 'FuturaBT-Light'; font-size: 52px; line-height: 56px; color: #727272; text-transform: uppercase; margin: 0 0 36px 0;}
h2 {font-family: 'FuturaBT-Light'; font-size: 32px; line-height: 38px; color: #727272; text-transform: uppercase; margin: 0 0 20px 0;}
h3 {font-family: 'Arial'; font-size: 16px; color: #787878; line-height: 28px; letter-spacing: 0.6px}
h4 {font-family: 'FuturaBT-Light'; font-size: 28px; text-transform: uppercase; line-height: 32px; color: #000000; margin: 0 0 19px 0;}
p {font-family: 'Arial'; color: #787878; font-size: 14px; line-height: 20px; letter-spacing: 0.6px; margin: 0 0 28px 0;}
ul li {font-family: 'Arial'; color: #3c3c3c; font-size: 14px; line-height: 17px; letter-spacing: 0.6px; margin: 0 0 10px 0;}
table th {color: #FFFFFF; font-size: 14px; letter-spacing: 0.6px;}
#footer .label {font-family: 'FuturaBT-Light'; font-size: 23px; color: #000000; text-transform: uppercase;}
.pinkText, .blueText, .purpleText, .orangeText, .greenText {background: #ffffff;}
.left h3 {margin: -13px 0 0 0;}

/* ------------------------------------------------------------------------- */
/* LIST: */
ul {margin: 0 0 31px 0;}
li {position: relative; padding: 0 0 0 19px;}
li span.square {display: block; position: absolute; left: 0px; top: 1px; width: 16px; height: 16px;}

/* ------------------------------------------------------------------------- */
/* TABLE: */
table {width: 476px; margin: 0 0 50px 0;}
table .first {width: 20px;}
table tr.odd {height: 8px; font-size: 0px; line-height: 0px;}
table th {padding: 4px 0 3px 0; line-height: 14px;}
table tr.even td {padding: 2px 0 2px 0; line-height: 16px;}

/* ------------------------------------------------------------------------- */
/* FOOTER NAVIGATION: */
#footer-nav > div {opacity: 1; filter: alpha(opacity=100);
	-webkit-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
	transition: opacity 0.2s;
}
#footer .circle {display: block; float: left; width: 29px; height: 29px; border: 3px solid #e5007d; cursor: pointer;
	-webkit-border-radius: 29px;
	-moz-border-radius: 29px;
	border-radius: 29px;
}
#footer-nav > div:hover .circle,
#footer-nav > div.active .circle {background: #e5007d none;}
#footer-nav > div.inactive {opacity: 0.5; filter: alpha(opacity=50);}
#footer .line {display: block; float: left; width: 55px; height: 3px; margin: 16px 0 0 0; background: #e5007d none; cursor: pointer;}
#footer-kassette .line {width: 65px;}
#footer-teleskopstange .line {width: 61px;}
#footer .label {float: left; margin: 4px 6px 0px 6px; cursor: pointer;}

/* ------------------------------------------------------------------------- */
/* GRAFIKWECHSEL CONTENT CHANGE MODULE: */
#changeContent {height: 370px;}
#changeContent > div {position: absolute; top: 0; left: 0; width: 100%; height: 370px; background: #ffffff none; /*opacity: 0; filter: alpha(opacity=0);
	-webkit-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
	transition: opacity 0.2s; ======== Note: transition code is added through JS!
}
#changeContent > div.active {opacity: 1; filter: alpha(opacity=100);*/}
#changeContent > div p {position: absolute; bottom: 0; right: 25px; width: 232px;}
#changeSlider {position: relative; height: 50px; margin: 0 80px 0 20px;}
#changeSlider .line {height: 22px; border-bottom: 4px solid #c6c6c6;}
#changeSlider .circle {position: absolute; top: 0; left: 0; width: 40px; height: 35px; padding: 5px 0 0 0; margin: 0 0 0 -20px; border: 4px solid #c6c6c6; color: #6e6e6e; background: #ffffff none; cursor: pointer; text-align: center;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
	font-family: Arial, sans-serif; font-size: 28px; line-height: 30px; font-weight: bold;
}
#changeSlider .circle:hover,
#changeSlider .circle.active {color: #ffffff; background-color: #e5007d;}
#changeSlider .circle1 {left: 0;}
#changeSlider .circle2 {left: 25%;}
#changeSlider .circle3 {left: 50%;}
#changeSlider .circle4 {left: 75%;}
#changeSlider .circle5 {left: 100%;}

/* ------------------------------------------------------------------------- */
/* FOOTER SLIDE FIXES: */
#footerSlide1 div.left,
#footerSlide1 div.right,
#footerSlide2 div.left,
#footerSlide2 div.right,
#footerSlide3 div.left,
#footerSlide3 div.right {top: auto; height: 480px; /* Slides are aligned to bottom now! */}
#footerSlide1 div.right {height: 505px;}
#footerSlide3 div.left img {position: absolute; right: 50px; bottom: 0; margin: 0 -520px 0 0;}
#footerSlide3 div.left div {position: relative; left: 0; top: 0; right: 0;}
#footerSlideContact.slide > div.right {padding-top: 20px;}
#footerSlideImprint.slide > div.right {padding-top: 22px;}
#footerSlideContact.slide > div.right div.scroll,
#footerSlideImprint.slide > div.right div.scroll {padding-bottom: 50px;}