@charset "utf-8";
@import url(reset.css);
@import url(fancybox.css);

/* -- additional seperating elements -- */

.js div { } /* apply only on JavaScript enabled browsers */
.ie7 div { } /* apply only on Internet Explorer 7 and below */
.ie6 div { } /* apply only on Internet Explorer 6 and below */

/* -- anytime tags, ids and classes --- */

html {
	height: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

body {
	font: 14px/1.52 'Droid Sans', 'Gill Sans MT', 'Gill Sans', GillSans, Arial, Helvetica, sans-serif;
	color: #333333;
	background: white;
	vertical-align: baseline;
}

h1, h2, h3, h4 {
	font-family: 'Lobster', cursive;
	margin: 0 0 0.2em 0
}

h1, h2 {font-size: 400%}
h3 {font-size: 235%; font-weight: 100; margin-top: 25px; color: #444}
h4 {font-size: 120%; font-weight: bold}

h2#philosophy {font-size: 300%}

p  {margin: 0 0 1em}
ul {
	list-style: outside;
	margin: 0 0 1em 1em;	
}

a {color: #8E2C1F}
a:hover, a:focus {text-decoration: none; outline: none}

.clear {clear: both}
.review {background: red; color: white}

.hide, .noscreen {display: none}

.right {float: right; display: block}
.left  {float:  left; display: block}

.fancy.right {margin: 0 0 0 25px}
.fancy.left  {margin: 0 15px 0 0}

small {font-size: 90%}

ul.numeric {
	list-style: decimal;
	margin-left: 23px;
}

ul.bullet {margin-left: 0}
ul.bullet li {
	list-style: none;
	padding-left: 25px;
	margin: 0 0 5px;
}

ul.bullet.green li  {background: url('../img/bullet-01.png') left 3px no-repeat}
ul.bullet.blue li   {background: url('../img/bullet-02.png') left 3px no-repeat}
ul.bullet.orange li {background: url('../img/bullet-03.png') left 3px no-repeat}

/** Wrapper */

#wrapper {
	padding: 0;
	margin: 0 auto;
	background: url('../img/bg.png');
}

.tb {
	background: url('../img/shadow-250.png') no-repeat center bottom;
	padding-bottom: 13px;
}

.tb img {
	display: block;
	border: 5px solid white;
	background: white;
	padding-bottom: 30px;
}

.tb.right, img.right {margin: 0 0 5px 15px}
.tb.left, img.left {margin: 0 15px 5px 0}

.story {
	display: block;
	margin: 10px;
	width: 400px;
}

.icon {padding-left: 40px}

.icon.star  {background: url('../img/star.png') no-repeat left center}
.icon.info  {background: url('../img/info.png') no-repeat left center}
.icon.color {background: url('../img/color.png') no-repeat left center}
.icon.gears {background: url('../img/advanced.png') no-repeat left center}
.icon.univs {background: url('../img/universal.png') no-repeat left center}
.icon.lock  {background: url('../img/lock.png') no-repeat left center}

#icon-binaryclock {
	background: url('../img/app-binary-clock-small.png') no-repeat right center;
	padding-right: 60px;
	float: left;
}

.gallery {margin: 10px 0}
.gallery a {
	float: left;
	margin: 0 15px;
}

.gallery .tb {
	background: none;
	padding-bottom: 0;
	border: 1px solid grey;
}

.gallery .tb:hover {
	border: 1px solid #5ca2be;
}


/** Header */

#header {}


/** Navigation */

.navigation {
	position: fixed;
	z-index: 50;
	top: 50%;
	height: 190px;
	margin: -80px 0 0 5px;
}

.navigation ul {margin: 0}

.navigation ul li {
	height: 25px;
	list-style: none outside;
	margin: 5px 0;
	width: 102px;
}

.navigation ul.nav a {
	background: url('../img/nav.bullet.png') no-repeat left center;
	display: block;
	height: 25px;
	width: 102px;
	opacity: 0.5;
	text-decoration: none;
}

.navigation ul.nav a:hover {
	opacity: 1;
}

.navigation ul li a span {
	font-family: 'Lobster', cursive;
	float: left;
	font-size: 14px;
	height: 25px;
	line-height: 25px;
	margin: 0 0 0 30px;
	padding: 0;
}

/** AppStore Button **/

#appstore {
	height: 153px;
	width: 245px;
	display: block;
	margin: 0 auto 30px;
	background: url('../img/app-store-button-gray.png') top center	
}

#appstore:hover {background: url('../img/app-store-button-gray.png') bottom center}

#pricetag {
	height: 219px;
	width: 159px;
	display: block;
	margin: 0;
	position: absolute;
	right: -65px;
	top: 620px;
	z-index: 50;
	background: url('../img/pricetag.png') top center no-repeat;
}


/** Parallax Scrolling **/

section {
	position: relative;
	width: 100%;
	height: 1000px;
	z-index: 5;
	border-top: 1px solid #333;
	overflow: hidden;
	background-attachment: fixed;
}

section h2 {color: #4d9ebb}

section#Home {background: url('../img/bg-05.png') repeat}
section#Philosophy {background: url('../img/bg-02.png') repeat}
section#BinaryClockHD {background: url('../img/bg-03.png') repeat}
section#story-04 {background: url('../img/bg-04.png') repeat}
section#Contact {background: url('../img/bg-05.png') repeat}
section#story-06 {background: url('../img/bg-02.png') repeat; height: 150px}

#motto {
	font: 200%/1.5em 'Lobster';
	text-align: center;
	margin: 50px 0
}

section .scrolling {
	height: 1000px;
	width: 100%;
	position: absolute;

}

article {}

/* Section | 01 */

#Home .bg-01 {
	background: url('../img/logo.png') no-repeat 50% center fixed;
	z-index: 15;
}

#Home .bg-02 {
	background: url('../img/logo-part-02.png') no-repeat 50% center fixed ;
	z-index: 25;
}
#Home .bg-03 {
	background: url('../img/bubbles-02.png') 50% 475px fixed no-repeat;
	z-index: 10;
}
#Home .bg-04 {
	background: url('../img/logo-part-01.png') 50% center fixed no-repeat;
	z-index: 5;
}
#Home .bg-05 {
	background: url('../img/logo-part-03.png') 50% center fixed no-repeat;
	z-index: 30;
}


/* Section | 02 */

#Philosophy .bg-01 {
	background: url('../img/hex-p.png') no-repeat 2% 20px fixed;
	z-index: 15;
}

#Philosophy .bg-02 {
	background: url('../img/hex-fi.png') no-repeat 10% 430px fixed;
	z-index: 15;
}

#Philosophy .bg-03 {
	background: url('../img/hex-ss.png') no-repeat 27% 350px fixed;
	z-index: 15;
}

#molekuele {
	opacity: 0.1;
	z-index: 10;
}

#Philosophy .formel-01 {
	background: url('../img/formel-01.png') no-repeat 95% 650px fixed;
	z-index: 15;
	opacity: 0.2;
}

#Philosophy .formel-02 {
	background: url('../img/formel-02.png') no-repeat 70% 950px fixed;
	z-index: 15;
	opacity: 0.075;
}

/* Section | 03 */

#iphone {
	background: url('../img/iphone.png') 100% 0 no-repeat;
	height: 643px;
	width: 340px;
	float: right;
	position: absolute;
	right: 0;
	z-index: 15;
	top: 350px;
}

#iphonebg, #iphonebg2, #iphonebg3 {
	width: 215px;
	height: 315px;
	background: url('../img/bg.png'); /* white */
	position: absolute;
	right: 60px;
	top: 290px;
	z-index: 5;
}

#iphonebg2 {background: url('../img/iphonebg2.png') no-repeat scroll center 195px}
#iphonebg3 {background: url('../img/iphonebg3.png') no-repeat scroll center 195px; z-index: 30}

#iphonereflection {
	position: absolute;
	background: url('../img/iphone-reflection.png');
	height: 390px;
	width: 117px;
	display: block;
	z-index: 30;
	top: 355px;
	right: 54px;
}

#iphonescreen {padding-bottom: 1px; z-index: 29}
#iphonescreen {
	position: absolute;
	background: black;
	width: 205px;
	height: 309px;
	top: 427px;
	right: 65px;
	opacity: 0;
}

#image-slider-container {
	position: absolute;
	background: black;
	width: 205px;
	height: 309px;
	top: 427px;
	right: 65px;
	opacity: 1;
}
#image-slider {opacity: 1}

#content-slider-container {
	position: absolute;
	background: transparent;
	width: 500px;
	padding: 0;
	height: 500px;
	top: 315px;
	left: 0;
}
#content-slider {
	opacity: 1;
	height: 500px;
}

#slide-02-01 h3 {margin-left: 100px}
#slide-02-02 h3 {margin-left: 65px}

#content-slider h3:first-child {margin-top: 0}

#content-slider ul {margin: 1.5em 0 0 0}
#content-slider ul li#slide-02-01 ul li {
	font-size: 160%;
	line-height: 2em;
	margin-left: 20px;
}

#iphone button {
	height: 45px;
	width: 45px;
	top: 402px;
	right: 145px;
	position: absolute;
	background: none;
	border: none;

	-moz-border-radius: 25px; /* Firefox */
	-webkit-border-radius: 25px; /* Safari, Chrome */
	border-radius: 25px; /* CSS3 */
}


#airbook, #ipad, #iphone2 {position: absolute}

#ipad {
	z-index: 20;
	left: 600px;
	bottom: -395px;
}
#airbook {
	float: left;
	left: -80px;
	bottom: -355px;
}
#iphone2 {
	z-index: 19;
	left: 470px;
	bottom: -450px;
}

#twitter, #facebook {
	height: 30px;
	width: 30px;
	display: block;
	float: left;
}

#twitter {background: url('../img/twitter.png') center top no-repeat; margin: 0 20px}
#twitter:hover {background: url('../img/twitter.png') center bottom no-repeat}

#facebook {background: url('../img/facebook.png') center top no-repeat}
#facebook:hover {background: url('../img/facebook.png') center bottom no-repeat}



#sory-03 .bg-01 {
	background: url('../img/iphonebubbles-01.png') 50% -600px fixed no-repeat;
	z-index: 10;
	height: 315px;
	top: 240px;
}

#BinaryClockHD .innercontent #leftside {padding-right: 340px}

#BinaryClockHD .bgtest-ii {
/*	background: url('../img/bgtest-ii.png') 0% 0 fixed no-repeat;	*/
}


.opacity-75 {opacity: 0.7}
.z-index-10 {z-index: 10}

#BinaryClockHD .blase-01 {background: url('../img/blase-04.png') -10% 475px  fixed no-repeat}
#BinaryClockHD .blase-02 {background: url('../img/blase-04.png') 50% 675px fixed no-repeat}
#BinaryClockHD .blase-03 {background: url('../img/blase-04.png') 90% 75px fixed no-repeat}

#BinaryClockHD .blase-04 {background: url('../img/blase-05.png') 15% 200px fixed no-repeat}
#BinaryClockHD .blase-05 {background: url('../img/blase-05.png') 30% 350px fixed no-repeat}
#BinaryClockHD .blase-06 {background: url('../img/blase-05.png') 60% 500px fixed no-repeat}
#BinaryClockHD .blase-07 {background: url('../img/blase-05.png') 80% 225px fixed no-repeat}

#BinaryClockHD .blase-08 {background: url('../img/blase-06.png') 15% -100px fixed no-repeat}
#BinaryClockHD .blase-09 {background: url('../img/blase-06.png') 5%  -120px fixed no-repeat}
#BinaryClockHD .blase-10 {background: url('../img/blase-06.png') 75% -140px fixed no-repeat}

#BinaryClockHD .blase-13 {background: url('../img/blase-07.png') 10% -210px fixed no-repeat}
#BinaryClockHD .blase-14 {background: url('../img/blase-07.png') 80% -180px fixed no-repeat}
#BinaryClockHD .blase-15 {background: url('../img/blase-07.png') 30% -120px fixed no-repeat}
#BinaryClockHD .blase-16 {background: url('../img/blase-07.png') 50% -230px fixed no-repeat}

#BinaryClockHD .blase-17 {background: url('../img/blase-07.png') 70% 775px fixed no-repeat}
#BinaryClockHD .blase-18 {background: url('../img/blase-07.png') 40% 575px fixed no-repeat}
#BinaryClockHD .blase-19 {background: url('../img/blase-07.png') 90% 1275px fixed no-repeat}
#BinaryClockHD .blase-20 {background: url('../img/blase-07.png') 30% 975px fixed no-repeat}
#BinaryClockHD .blase-21 {background: url('../img/blase-07.png') 60% 375px fixed no-repeat}

#BinaryClockHD .blase-22 {background: url('../img/blase-06.png') 90% 875px fixed no-repeat}
#BinaryClockHD .blase-23 {background: url('../img/blase-06.png') 20% 1275px fixed no-repeat}
#BinaryClockHD .blase-24 {background: url('../img/blase-06.png') 40% 575px fixed no-repeat}





/* Section | 04 */

#story-04 .bg-01 {background: url('../img/reagenz.png') no-repeat 104% -650px fixed; z-index: 15}
#story-04 .bg-02 {background: url('../img/reagenz-drop.png') no-repeat 104% 740px fixed; z-index: 10}
#story-04 .bg-03 {background: url('../img/reagenz-liquid.png') no-repeat 106% 50px fixed; z-index: 10}
#story-04 .bg-04 {background: url('../img/reagenz-glas.png') no-repeat 104% 125px fixed; z-index: 20}
#story-04 .bg-05 {background: url('../img/reagenz-drop.png') no-repeat 104% 375px fixed; z-index: 10}


/* Section | 05 */

#Contact .bg-02 {background: url('../img/reagenz-drop.png') no-repeat 104% 660px fixed; z-index: 10}
#Contact .bg-03 {background: url('../img/reagenz-drop.png') no-repeat 104% 975px fixed; z-index: 10}

#reagenz-02 {
	position: absolute;
	bottom: -5px;
	right: 70px;
	width: 220px;
	height: 253px;
}

#reagenz-02-bottle {
	background: url('../img/reagenz-02.png') no-repeat 94% bottom;
	z-index: 9;
	width: 220px;
	height: 253px;
	position: absolute;
	z-index: 5;
}

#reagenz-02-top {
	background: url('../img/reagenz-02-top.png') no-repeat 50% top;
	height: 106px;
	width: 220px;
	position: absolute;
	top: 0;
	z-index: 15;
}

#reagenz-02-bottom {
	background: url('../img/reagenz-02-bottom.png') no-repeat 96% bottom;
	height: 148px;
	width: 220px;
	position: absolute;
	bottom: 0;
	z-index: 15;
}

/** Content */

.content {
	width: 100%;
	position: relative;
	color: #333333;
}

.innercontent {
	margin: 0 auto;
	padding: 5em 0;
	width: 880px;
	position: relative;
	z-index: 100;
}

.innercontent p {font-size: 15px}
.innercontent#impressum p {
	font-size: 14px;
/*	color: #666666;	*/
}


.quote p {
	font-family: 'Delius', cursive;
	font-size: 180%;
	font-style: italic;
	color: #f39500;
	margin-bottom: 0;
	text-shadow: 1px 1px 1px #333;
}
.quote .founder {
	text-align: right;
	margin: 0.5em 0 2em;
	font-family: 'Delius', cursive;
	font-size: 120%;
}

#so-in-short {
	float: left;
	margin-right: 20px;
	width: 400px;
	font-size: 19px;
}

#plan33logo {
	float: right;
	margin: 50px 350px 0 0;
}

#reagenz-last {
	position: absolute;
	bottom: -4px;
	left: 35%;
}

/** Footer */

#footer {
	width: 880px;
	margin: 1em 0;
	border-top: 1px solid #d6d6d6;
	padding: 10px 0 0 0;
}

#footer a {text-decoration: none}
#footer a:hover {text-decoration: underline}

#footer a#plan33 {
	float:right;
	display: block;
	height: 27px;
	cursor: pointer;
	width: 110px;
	margin: 0 0 10px 0;
	background: url('../img/plan33-footer.png') no-repeat top center;
}

#footer a#plan33:hover {
	background-position: bottom center; 
}

/** Other stuff */

#gmap iframe {
	border: 1px solid #8E2C1F;
	padding: 1px;
}



body#datenschutzhinweis, body#agb, body#rechtliche-hinweise {
	padding: 0 20px 20px 20px;
	background: url('../img/bg.png') repeat;
	height: auto !important;
}