/* CSS Document */
body {
	background-color: #fff;
}
<style type="text/css">
a{}

@font-face {
	font-family: 'Franchise2';
        src: url('franchise-bold-webfont3.eot');
	src: local('☺'), url('franchise-bold-webfont3.woff') format('woff'), url('franchise-bold-webfont3.ttf') format('truetype'), url('franchise-bold-webfont3.svg#webfontdI5uohOI') format('svg');
    	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'MuseoSlab500';
        src: url('museo_slab_500-webfont.eot');
	src: local('☺'), url('museo_slab_500-webfont.woff') format('woff'), url('museo_slab_500-webfont.ttf') format('truetype');
    	font-weight: normal;
	font-style: normal;
}

@font-face {
    font-family: 'font_R';
    font-style: normal;
    src: url('GESSTwoLight.ttf');
    src: url('GESSTwoLight.ttf?#iefix') format('embedded-opentype'), url('GESSTwoLight.ttf') format('woff'), url('GESSTwoLight.ttf') format('truetype');
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, .fakeHeader,
hgroup, menu, nav, section, menu,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background: none repeat scroll 0 0 transparent;
  font-family: 'font_R';
}

article, aside, figure, footer, .fakeHeader,
hgroup, nav, section { display:block; }

nav ul { list-style:none; }

blockquote, q { quotes:none; }

blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }

a {
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	color: #b3b0a0;
	text-decoration: none;
	outline: 0;
}

a:hover { color: #525046; }

a.buttonLink {
	display: inline-block;
	background-color: #252525;
	padding: 0.05em 0.4em;
	border-radius: 0.25em; -moz-border-radius: 0.25em; -webkit-border-radius: 0.25em;
}

a.buttonLink:hover {
	background-color: #999;
}


ins { background-color:#ff9; color:#000; text-decoration:none; }

mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }

/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }

hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }

input, select { vertical-align:middle; }

sup { font-size: x-small; vertical-align:text-top; }
/* END RESET CSS */


/*
 * base styles
 */

body { font:18px "MuseoSlab500", "Lucida Sans", "AmericanTypewriter", "Helvetica Neue", Arial; color: #979484; *font-size:small; *font:x-small; line-height:1.5; }


.index {
	background:#000 url(../images/ben-shooting1.jpg?ver=1) no-repeat scroll top center;
}

.activate {
	background:#000 url(../images/ben-activate.jpg?ver=1) no-repeat right -1em;
}

body { background-color: #000; }


h1,h2,h3,h4,h5,h6 { font-weight: normal; text-rendering: optimizeLegibility; }

html { -webkit-font-smoothing: antialiased; }

.ie6 input { vertical-align: text-bottom; }
label, input[type=button], input.submit, button { cursor: pointer; }

::-moz-selection{ background: #45443d; color: #ece6d2; text-shadow: none; }
::selection { background: #acaba5; color: #ece6d2; text-shadow: none; }

a:link { -webkit-tap-highlight-color: #FF5E99; }
html { overflow-y: scroll; }

button {  width: auto; overflow: visible; }

.ie7 img { -ms-interpolation-mode: bicubic; }


.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; } /* Hides from IE-mac \*/
.clearfix { display: block; }


/*=============================			Normal Styles		1025-1689px			====================================*/

h1, h2 {
	text-transform: uppercase;
	font-family: 'Franchise2', Helvetica, Arial;
	font-weight:lighter;
    letter-spacing: -0.03em;
}

h3, h4 {
	font-family: "MuseoSlab500", "AmericanTypewriter", "Lucida Sans", Georgia, Arial;
	font-weight: bold;
}

h3 {
	font-size: 140%;
	margin-top: 0.5em; /*3em*/
}

h1 {
	font-size: 83px;
	line-height:68px;
}

h2 {
	line-height: 43px;
	font-size: 62px;
	position: relative;
	vertical-align:bottom;
}


 #hide-wrapper {
    position: relative;
    max-width: 1440px;
    overflow: hidden;
    margin: 0 auto;
}

 #hideBenInBeginning {
 	position: absolute;
    width: 160px;
    height: 250px;
    background: transparent url(../images/hide-ben.png) repeat-x bottom center;
    left: 50%;
    margin-left: -80px;
    top: 750px;
    z-index: 1;
 }


#city {
        background: #000 url(../images/city-background.jpg?ver=1) no-repeat center;
        width: 100%;
    height: 4857px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}


 #subscribed {
	position: absolute;
	top: 6350px;
 }

 #bridge {
	background: transparent url(../images/bridge.png) no-repeat center;
	position: absolute;
	top: 3562px;
	width: 100%;
	height: 244px;
	z-index: 300;
    -webkit-transform: translate3d(0,0,0);  /* fix for Safari z-index quirk */
 }

#thief {
    background: transparent url(../images/thiefsprite.png) no-repeat;
    width: 76px;
    height: 76px;
    position: absolute;
    z-index: 18;
    top: 1430px;
    left: -120px;
}

#train {
    background: transparent url(../images/train.png) repeat-x center;
	width: 1149px; /*giving train three cars*/
    height: 129px;
    position: absolute;
    z-index: 350;
    top: 3497px;
    right: -1200px;
    -webkit-transform: translate3d(0,0,0);  /* fix for Safari z-index quirk */
}

#stolen {
	background: transparent url(../images/stolensprite.png) no-repeat;
    background-position: 0 0;
    width: 65px;
	height: 115px;
	position: absolute;
	z-index: 19;
	top: 1430px;
	left: 25%;
}

#stolen.stolen {
    width: 100px;
    background-position: -53px 0;
}

 #hotel {
	background: transparent url(../images/hotel.png) no-repeat center;
	position: absolute;
	width: 100%;
	z-index: 21;
	top: 4283px;
	height: 488px;
    -webkit-transform: translate3d(0,0,0);  /* fix for Safari z-index quirk */
 }

 #hotelanimation {
	background: transparent url(../images/hotel-animation.gif) no-repeat center;
	position: relative;
	top: 47px;
    width: 1000px;
    height: 255px;
	margin: 0 auto;
 }

#ben {
    bottom: 40%;
    left: 50%;
    position: fixed;
    z-index: 20;
    margin-left: -19px;
    line-height:0;
    min-height:105px;
    -webkit-transform: translate3d(0,0,0);  /* fix for Safari z-index quirk */
}


#ben-img {
    background: transparent url(../images/bensprite.png) no-repeat;
    width: 0;
    height: 0;
    overflow: hidden;
    /* fix for glitches when speech bubbles appear on Safari  */
    -webkit-transform: translate3d(0,0,0);
    position: absolute;
    bottom: 0;
}

#ben-img.visible {
    width: 40px;
    height: 105px;
}

#scrollImage {
	position: fixed;
	z-index: 1000; margin-left: -34px;
	bottom: -100px;
	left: 50%;
	cursor: pointer;
}



div#speechBubble {
    position: absolute;
    bottom: 105px;
	margin-left: -171px;
	display: none;
	background: transparent url(../images/speechbubble.png) no-repeat bottom center;
	padding: 15px 20px 61px 20px;
	width: 340px;
	color: #fff;
    line-height: 1.5;
    -webkit-transform: translate3d(0,0,0);
	text-align: center;
    direction: rtl;
}

ul li a, ul li a:hover, #impressum a {
    font-size: 90%;
 }


/* -------------- Header ----------------- */

#siteOfTheDay {
	width: 100px;
	height: 100px;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 101;
}

#mobileSiteOfTheDay {
	width: 70px;
	height: 70px;
	position: absolute;
	top: 0px;
	right: 0px;
	z-index: 101;
}

.connect {
    display: block;
	width: 190px;
	margin-top: 45px;
}

.index2 .connect {
	width: 700px;
	font-size: 95%;
	position: relative;
	z-index: 3;
	margin-top: 90px;
}

.index2 .connect a {
	display: block;
	margin-bottom: 20px;
}

.index2 #appstoreTop,
.index2 #appstoreBottom {
	background: transparent url(../images/ab-test/buy-now-custom-sprite.gif) top left no-repeat;
	height: 111px;
	width: 220px;
}

.index2 #appstoreTop:hover,
.index2 #appstoreBottom:hover {
	background-position: -220px 0px;
}

.index2 .connect h3 {
	font-size: 120%;
	margin: 0px;
}

.index2 #benLargeCharacter {
	position: absolute;
	right: 0px;
	top: 20px;
	z-index: 11;

}

.index2 #priceTag {
	position: absolute;
	left: 550px;
	z-index: 10;
	top: -20px;
}

.fakeHeader, footer {
	display: block;
	width: 56em;
	margin: 0 auto;
    overflow: hidden;
}

.fakeHeader {
	padding-top: 11em;
    position: relative;
    height: 850px;
    z-index: -1;

}
.fakeHeader h1 {
    margin-bottom: 100px;
}

.activate .fakeHeader {
	height: 400px;
}

.index2 .fakeHeader h1 {
	color: #ffffff;
	font-size: 137px;
	line-height: 97px;
	letter-spacing: -0.03em;
}

.index2 .fakeHeader {
	padding-top: 6.2em;
	width: auto;
	max-width: 1200px;
	height: 850px;
	background: #000 url(../images/ab-test/ben-iphone.jpg?ver=1) right 40px no-repeat;
}

.index2 .fakeHeader div {
	margin-left: 10px;
}

.index2 .review {
	margin-top: 15px;
	margin-bottom: 0px;
	max-width: 700px;
}

.index2 .name {
	margin-top: 0px;
	font-weight: bold;
}

.index2 .stars {
	color: #fff;
	font-size: 120%;
}

#showFilm {
	  display: block;
	  clear: left;
	  background: transparent url(../images/play_trailer.png) no-repeat top left;
	  font-family: "Franchise2", Helvetica, Arial;
	  text-transform: uppercase;
	  color: #000;
	  font-size: 75px;
	  width: 356px;
	  padding: 2px 0px 4px 40px;
	  line-height: 91px;
	  float: right;
	  margin-top: 1px; /* 84 */
}

#showFilm:hover {
	color: #969485;
	background-position: -396px 0px;
}

.fakeHeader p {
	margin: 0.3em 0 1em 0;
}


/* sign up form */
#house-bottom {
    background: #000 url(../images/house-bottom.gif) no-repeat top center;
    z-index:100;
    width: 100%;
    position:relative;
    -webkit-transform: translate3d(0,0,0);  /* fix for Safari z-index quirk */
}

#roofAnimation {
	background: transparent url(../images/roofAnimationSprite.png) no-repeat top left;
	position: absolute;
	margin-left: -312px;
	left: 50%;
	top: 100px;
	width: 220px;
	height: 350px;
	z-index: 99;
}

#appstoreBottom {
	margin: 90px auto;
	display: block;
	width: 225px;
	position: relative;
	z-index: 100;
}

#sign_up_form {
	margin: 660px auto 1em auto;
    width: 42%;
    background-color: rgb(14, 14, 14);
    -webkit-border-radius: 2.5em;
    -moz-border-radius: 2.5em;
    border-radius: 0;
    padding: 2.4em 2.4em 2.2em 2.5em;
}

#impressum {
	width: 34em;
    margin: 0px auto;
}

#logos {
	text-align: center;
	width: 614px;
	height: 65px;
	margin: 45px auto 16px auto;
}

#logos a, #logos img {
	border-radius: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border: 0;
	padding: 0;
}

#nerdlink {
	margin: 1px 0 0 0;
}

#appersonalitylink {
	margin: 0 0 0 83px;
}

#pressSlide {
	width: 301px;
	height: 67px;
	background: url(../images/press-slide.png) no-repeat;
	font-family: 'Franchise2', Helvetica, Arial;
	font-size: 28px;
	margin: 0 auto 0 auto;
	display: none;
}

#pressSlide a {
	text-transform: uppercase;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	background: #000000;
	text-align: center;
	padding: 0 2px;
	color: #878787;
}

#pressSlide a:Hover {
	background: #111111;
}

#pressEmail {
	width: 110px;
	height: 30px;
	float: left;
	margin: 27px 8px 0 10px;
	line-height: 32px;
}

#pressKit {
	width: 155px;
	height: 30px;
	float: left;
	margin: 27px 0px 0 0px;
	line-height: 32px;
}

#downloadArrow {
	margin: 0 0 0 5px;
}

#toTheTop {
	margin: 0 auto;
	display: block;
	width: 5em;
	text-align: center;
}

#impressum ul, #impressum ul li {
	height: auto;
	margin: 0;
    float: right;
}

#impressum ul {
	margin-right: -16px;
	margin-top: 5px;
	margin-bottom: 20px;
}

 #impressum img, #impressum a {
	 font-size: 65%;
 	vertical-align: baseline;
	display: block;
	margin-right: 27px;
	color: #4b4c47;
 }

#sign_up_form div, #sign_up_form h2 {
	display: inline-block;
	vertical-align: middle;
    white-space: nowrap;
}

#sign_up_form form {
    display: block;
    float: right;
}

#facebook {
	margin-left: 20px;
	margin-top: 2px;
}

form {
	display: inline-block;
	position: relative;
	vertical-align:middle;
	top: 0.1em;
}

form input.text {
	text-transform: lowercase;
	padding: 0.5em 1.1em;
	margin: -0.1em 0.5em 0 0;
	color: #CCC;
	-webkit-border-radius: 2em;
	-moz-border-radius: 2em;
	border-radius: 2em;
	background-clip:border-box;
	font-style: italic;
	font-size: 100%;
	width: 15em;
	border: none;
	vertical-align: middle;
}

form input.text:active, form input.text:focus {
	outline: 0;
	background-color: #7d8695;
	color: #333;
}

form > input[type=email]:focus:required:invalid {
        background-color: #ffdada;
        color: #292929;
}

form input:required:valid {
background-color: white;
    color: #292929;

}

form input.submit {
	background: transparent url(../images/submitSprite.png) no-repeat left center;
	line-height: 80%;
	vertical-align: middle;
	background-color: transparent;
	width: 41px; height: 41px;
	border: none;
	display: inline-block;
	text-indent:-9999px;
	cursor:pointer;
	margin-top: 1px;
	margin-right: 0;
}

form input.submit:active, form input.submit:focus {
	background: transparent url(../images/submitSprite.png) no-repeat right center;
	outline: 0;
}

#upperForm form input.text {
	margin: 0 0.3em 0 0;
}

#upperForm {
	filter: inherit;
	margin: 0.3em 0;
}

#sign_up_form div {
	float: right;
}

div#form_description {
	float: none;
	width: 34em;
	position: relative;
	margin-top: 1.3em;
}

#form_description a {
	float: right;
	display: block;
	margin-top: 37px;
	margin-right: 20px;
}

#form_description p {
	font-size: 100%;
	float: left;
	margin-top: 14px;
}

#form_description a, #form_description a img {
	font-size: 65%;
	vertical-align: middle;
	color: #c7c7c7;
}

a#signup, a#subscribed {
	width: 0;
	height: 0;
	font-size: 0;
	margin-right: -5px;
}

#sign_up_form.subscribed {
    text-align: center;
	width: 24em;
	padding-bottom: 1.7em;
 }

#sign_up_form.subscribed h2 {
    font-size: 167px;
    line-height: 110px;
	margin: 0 0 10px 0;
 }

.sanchors {
    height:0;
}

.index2 #appstoreBottom {
	margin: 60px auto 0px;
}

.index2 #press {
	position: relative;
	overflow: hidden;
	margin: 645px auto 0px;
	width: 605px;
}

.index2 .bbc {
	width: 355px;
	float: left;
}

.index2 .press_btn {
	width: 195px;
	height: 84px;
	background: transparent url(../images/ab-test/download-presskit.gif) no-repeat top left;
	font-size: 0px;
	display: block;
	float: left;
	margin-left: 50px;
}

.index2 .press_btn:hover {
	background-position: -195px 0px;
}

.index2 #sign_up_form {
	margin-top: 40px;
}

.index2 #wrong {
	width: 605px;
	margin: 40px auto 20px;
	overflow: hidden;
}

.index2 #wrong h1 {
	width: 300px;
	float: left;
}

.index2 #wrong p {
	float: left;
	margin-left: 10px;
	padding-top: 10px;
	width: 290px;
}

.index2 #impressum img, .index2 #impressum a {
	margin-right: 23px;
}


/* ---------------- IMPRESSUM -------------------- */

article {
	position: relative;
	top: 152px;
	float: left;
	left: 130px;
	width: 600px;
	font-size: 90%;
	padding-bottom: 50px;
}

article a img {
	margin: 30px 0px 20px 0px;
}

img#imprintLogo {
	top: 170px;
	position: relative;
	float: left;
	left: 70px;
}

article h3 {
	font-size: 90%;
	margin-top: 1em;
}

/* ---------------- Lightbox Slider-------------------- */

#slider {
    width: 1068px;
    position: relative;
    margin-top: -90px;
    overflow: visible;
}

/*
adjusting the position of the iPhone in the browser window:
see margin-top above plus below
*/

html #fancybox-content {
	overflow: visible;
}

html #fancybox-content > div {
	overflow: visible !important;
}

#panelContainer {
    position: relative;
    width: 900px;
    height: 717px;
    margin: 0 auto;
}

.panel {
    position: absolute;
    padding: 0px;
    overflow: visible;
    display:none;
    margin-top: 116px;
    width: 440px;
    height: 600px;
    background-color: transparent;
    left: 14px;
}

.ie8 .panel {
	background-color: #000;
	margin-top: 165px;
}

#panelBackground{
    height: 625px;
    width: 1000px;
    position: absolute;
    background: url(../images/features_background.jpg?ver=1) center top repeat-x;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    top: 139px;
    left: 35px;
}

.ie8 #panelBackground {
	background: #000;
}

.scrollButtons {
    position: absolute;
    top: 395px;
    cursor: pointer;
    background: transparent url(../images/arrows.png) no-repeat 0px 0px;
    width: 64px;
    height: 64px;
    z-index:1000;
}

.left, .left:focus {
    left: 0px;
}
.right, .right:active {
    left: 1004px;
    background-position: 0px -70px;
}

.left:hover {
    background-position: -70px 0px;
}

.right:hover, .right:focus {
    background-position: -70px -70px;
}

.left:active {
    background-position: -140px 0px;
}

.right:active {
    background-position: -140px -70px;
}

.navigation {
    position:relative;
    list-style: none;
    margin: -40px 0px 0px 114px;
    width:384px;
    padding: 0;
    display: block;
}

.ie8 .navigation {
	margin-top: -20px;
}

.navigation li {
    float:left;
    width:62px;
    height:38px;
    display:block;
    margin: 0;
}

.navigation a {
    background: url("../images/feature_icons.png") no-repeat 0 -42px;
    width: 58px;
    height: 38px;
    display: block;
    margin: 0;
}

#protectingwhatmattersdot { background-position: 0px -42px; }
#remindersdot { background-position: -67px -42px; }
#passwordsdot { background-position: -134px -42px; }
#notesdot { background-position: -201px -42px; }
#contactsdot { background-position: -266px -42px; }
#photosdot { background-position: -335px -42px; }

#protectingwhatmattersdot.selected { background-position: 0px 0px; }
#remindersdot.selected { background-position: -67px 0px; }
#passwordsdot.selected { background-position: -134px 0px; }
#notesdot.selected { background-position: -201px 0px; }
#contactsdot.selected { background-position: -266px 0px; }
#photosdot.selected { background-position: -335px 0px; }



#iPhoneBackground {
    width: 389px;
    height: 746px;
    position: absolute;
top: 0px;
    left:567px;
    background: url(../images/iphonebackground.png) no-repeat 0 0;
}

.ie8 #iPhoneBackground {
	background-image: url(../images/iphonebackground_ie8.png);
}

#iPhoneScreen {
    position: relative;
    top: 139px;
    left: 36px;
    overflow: hidden;
    width: 320px;
    height: 480px;
    background: url(../images/iphonescreenshots.jpg?ver=1) no-repeat 0px 0px black;
}


#iPhoneVideo {
    width: 320px;
    height: 480px;
}

.replayButton {
	position: absolute;
	z-index: 10;
	left: 50%;
	top: 50%;
	margin: -40px 0px 0px -40px;
}

.panel h1 {
    font-size: 122px;
    line-height: 85px;
    position: relative;
    padding-left: 16px;
}

#panelText0 h1 {
	text-indent: -26px;
}

.panel ul {
	margin-top: 40px;
	padding-left: 18px;
	float: none;
	height: auto;
}

.panel ul li {
	height: auto;
	overflow: visible;
}

.panel ul li {
	margin-bottom: 9px;
}

#closeButton {
    width: 30px;
    height: 30px;
    position:absolute;
    background: url("../fancybox/fancy_close.png") no-repeat scroll 0 0 transparent;
    top: 129px;
    cursor:pointer;
left: 1019px;
}

#fancybox-close {
padding: 0px;
}


/* ---------------- Features Neons Clickable-------------------- */


.features {
    position: absolute;
    z-index:100;
    background-position: left center;
    background-repeat: no-repeat;
}


#featuresContainer {
    width: 1300px;
    height: 991px;
    top: 5692px;
    position: absolute;
    z-index: 999;
    left: 50%;
    margin: 0 auto 0 -650px;
}

#featprotectingwhatmatters {
    top: 10px;
    left: 15px;
    width: 300px;
    height: 255px;
}

#featprotectingwhatmatters.litSign{
	background-image: url(../images/protecting.jpg?ver=1);
}

#featreminders {
    top: 44px;
    right: 46px;
    width: 218px;
    height: 246px;
}

#featreminders.litSign{
	background-image: url(../images/reminders.jpg?ver=1);
}

#featpasswords {
    top: 439px;
    left: 41px;
    width: 300px;
    height: 250px;
}

#featpasswords.litSign{
	background-image: url(../images/passwords.jpg?ver=1);
}

#featnotes {
    top: 424px;
    right: 74px;
    width: 173px;
    height: 196px;
}

#featnotes.litSign{
	background-image: url(../images/notes.jpg?ver=1);
}

#featcontacts {
    left: 56px;
    bottom: 1px;
    width: 195px;
    height: 221px;
}

#featcontacts.litSign{
	background-image: url(../images/contacts.jpg?ver=1);
}

#featphotos {
    right: 23px;
    bottom: 24px;
    width: 300px;
    height: 176px;
}

#featphotos.litSign{
	background-image: url(../images/photos.jpg?ver=1);
}

.index2 .features-panel {
	width: 865px;
	margin: 0px auto 110px;
	position: relative;
	overflow: hidden;
}

.index2 .features-image {
	width: 320px;
	height: 480px;
	background: #000 url(../images/ab-test/screenshot-background.jpg?ver=1) no-repeat center center;
	padding: 20px;
}

.index2 .left {
	float: left;
	margin-right: 15px;
}

.index2 .right {
	float: right;
	margin-left: 15px;
}

.index2 .features-panel ul {
	width: 465px;
	margin: 0px;
	display: block;
	float: left;
	margin: 0px;
	padding-left: 20px;
	height: auto;
}

.index2 .features-panel li {
	display: block;
	height: auto;
	margin: 30px 0px 0px;
}

.index2 .features-panel h1 {
	position: relative;
	float: left;
	margin: 75px 0px 5px;
	width: 465px;
	padding-left: 20px;
	font-size: 90px;
	line-height: 66px;
}

/* special styles for ie6 and ie7 */

.ie6 #ben, .ie6 #hotel, .ie6 #hotelanimation, .ie6 #bridge, .ie6 #train, .ie6 #city, .ie6 #roofAnimation,
.ie6 #hideBenInBeginning, .ie6 #toTheTop, .ie6 #scrollImage, .ie6 div.connect, .ie6 #featuresContainer,
.ie7 #ben, .ie7 #hotel, .ie7 #hotelanimation, .ie7 #bridge, .ie7 #train, .ie7 #city, .ie7 #roofAnimation,
.ie7 #hideBenInBeginning, .ie7 #toTheTop, .ie7 #scrollImage, .ie7 div.connect, .ie7 #featuresContainer
{
	display: none;
}

.ie6 body,
.ie7 body {
	font-size: 115%;
}

.ie6 #impressum ul,
.ie7 #impressum ul {
    width: 650px;
    padding-left: 30px;
    margin: 18px auto 0px;
	float: none;
}

.ie6 #impressum,
.ie7 #impressum {
	margin-bottom: 0px;
}

.ie6 #logos,
.ie7 #logos {
	margin-bottom: 50px;
}

.ie6 .connect ul li, .ie6 #impressum ul li, .ie6 #impressum ul li a,
.ie7 .connect ul li, .ie7 #impressum ul li, .ie7 #impressum ul li a
{

}

.ie6 #impressum ul li, .ie6 #impressum ul li a,
.ie7 #impressum ul li, .ie7 #impressum ul li a
{
	display: block;
	float: left;
	margin-right: 10px;
}

.ie6 .fakeHeader, .ie7 .fakeHeader {
	height: 600px;
}

.ie6 #sign_up_form form, .ie7 #sign_up_form form {
    width: 380px;
}

.ie6 #ieInfo, .ie7 #ieInfo {
	width: 56em;
    margin: 0 auto;
}

.ie6 #ieInfo h1, .ie7 #ieInfo h1 {
	font-size: 851%;
    text-align: right;
    letter-spacing: -0.05em;
    line-height: 75%;
    float: right;
    width: 350px;
    padding-right: 10px;
    margin-top: 42px;
}

.ie6 #ieInfo div.upgrade, .ie7 #ieInfo div.upgrade {
    width: 68%;
    margin: 90px auto 95px auto;
    background-color: #191919;
    padding: 30px;
    color: #666;
}

.ie6 #ieInfo .upgrade a:link, .ie7 #ieInfo .upgrade a:link {
    display: inline;
    color: #888;
}

.ie6 #sign_up_form.subscribed h2, .ie7 #sign_up_form.subscribed h2 {
	line-height: 70%;
}

/*============================================1920 Desktop Version=====================================*/
@media only screen and (min-width: 1690px) {
    .index {
/*        background: #000 url(../images/1920/ben-shooting1.jpg?ver=1) no-repeat scroll center top;*/
    }

    .activate {
        background: #000 url(../images/1920/ben-activate.jpg?ver=1) no-repeat right -1em; /* background:#000 url(../img/ben-activate-full.jpg?ver=1) no-repeat right -1em; */
    }

    #city {
        background: #000 url(../images/1920/city-background.jpg?ver=1) no-repeat center;
        height: 6467px;
    }

    .fakeHeader {
		padding-top: 11em;
        height: 1200px;
        width: 70em;
    }

    .fakeHeader p {
        margin: 0.3em 0 1em 0;

    }

    #hide-wrapper {
        max-width: 1920px;
    }

    #showFilm {
	  margin-right: 50px;
    }

    .index2 #showFilm {
    	margin-right: 0px;
    }

    #hideBenInBeginning {
        width: 224px;
        height: 350px;
        background: transparent url(../images/1920/hide-ben.png) repeat-x bottom center;
        margin-left: -112px;
        top: 1100px;
    }

    #thief {
        top: 1930px;
        left: -120px;
    }

    #stolen {
        top: 1932px;
        left: 25%;
    }

    #bridge {
        background: transparent url(../images/1920/bridge.png) no-repeat center;
        position: absolute;
        top: 4724px;
        width: 100%;
        height: 324px;
        z-index: 25;
    }

    #train {
        top: 4679px;
        right: -1200px;
    }


    #yakuza {
        background: transparent url(../images/1920/yakuza-still.gif) no-repeat right center;
        height: 393px;
        width: 820px;
        top: 6394px;
    }

    #yakuza.animated {
        background: transparent url(../images/1920/yakuza-anim.gif) no-repeat right center;
    }

    #hotel {
        background: transparent url(../images/1920/hotel.png) no-repeat center;
        top: 5742px;
        height: 597px;
    }

    #hotelanimation {
        background: transparent url(../images/1920/hotel-animation.gif) no-repeat center;
        top: 34px;
        width: 1100px;
        height: 340px;
    }

/* ---------------- Features Neons Clickable-------------------- */


    .features {
        position: absolute;
        z-index:10000;
    }

    #featuresContainer {
        width: 1694px;
        height: 1305px;
        top: 7606px;
        position: absolute;
        z-index: 999;
        left: 50%;
        margin: 0 auto 0 -847px;
    }

    #featprotectingwhatmatters {
        top: 0;
        margin-top: -1px;
        left: 0;
        width: 400px;
        height: 340px;
    }


    #featreminders {
        top: 43px;
        right: 42px;
        width: 291px;
        height: 328px;
    }

    #featpasswords {
        top: 570px;
        left: 35px;
        width: 300px;
        height: 250px;
    }

    #featnotes {
        top: 550px;
        right: 80px;
        width: 230px;
        height: 260px;
    }

    #featcontacts {
        left: 55px;
        bottom: 0;
        width: 260px;
        height: 295px;
    }

    #featphotos {
        right: 10px;
        bottom: 30px;
        width: 400px;
        height: 235px;
    }


}
/*=====================================================  1024px  =============================================*/

@media only screen and (max-width: 1024px) {

body {
	background-color: #000;
}

.index {
    background: #000 url(../images/ipad/ben-shooting.jpg?ver=1) no-repeat center 1%;
}

body.activate {
    background:#000 url(../images/ipad/ben-activate.jpg?ver=1) no-repeat 130% 2em;
}

 #city {
        background: #000 url(../images/ipad/city-background.jpg?ver=1) no-repeat center;
        height: 3450px;
 }

 #subscribed {
    top: 4250px;
 }

 #bridge {
    background: transparent url(../images/ipad/bridge.png) no-repeat center;
    top: 2834px;
    height: 174px;
    z-index: 30;
 }

#train {
    background: transparent url(../images/ipad/train.png) repeat-x center;
    top: 2787px;
    width: 272px; /*giving train three cars */
    height: 92px;
}

#house-bottom {
    background: #000 url(../images/ipad/house-bottom.gif) no-repeat top center;
    -webkit-background-size: 1024px 978px;
}

.fakeHeader {
    padding-top: 8em;
    width: 46em;
	margin-bottom: 55px;
	    z-index: 1;
}

.index2 #priceTag {
	left: 400px;
	top: 90px;
	width: 101px;
	height: 100px;
}

.index2 ..fakeHeader {

}

.index2 .connect a {
	float: none;
	margin-bottom: 20px;
}

.index2 .fakeHeader h1 {
	font-size: 95px;
	line-height: 68px;
}

#showFilm {
	  background-size: 540px;
	  -webkit-background-size: 540px 62px;
	  -moz-background-size: 540px;
	  width: 245px;
	  padding-left: 25px;
	  font-size: 54px;
	  line-height: 60px;
	  margin-top: 39px;
}

.index2 #showFilm {
	margin-top: 11px;
}

#showFilm:hover {
	background-position: -270px 0px;
}

 #thief {
     background: transparent url(../images/ipad/thiefsprite.png) no-repeat;
     top: 1000px;
 }

#stolen {
    background: transparent url(../images/ipad/stolensprite.png) no-repeat;
    top: 1000px;
    left: 25%;
}


 #hotel {
    background: transparent url(../images/ipad/hotel.png) no-repeat center;
    top: 3362px;
    height: 320px;
    z-index: 40;
 }

#hotelanimation {
    background: transparent url(../images/ipad/hotel-animation.gif) no-repeat center;
    top: 19px;
    margin: 0 auto;
    width: 591px;
    height: 182px;
}

#yakuza {
    background: transparent url(../images/ipad/yakuza-still.gif) no-repeat right center;
    height: 304px;
    width: 436px;
    position: relative;
    top: 3365px;
    margin: 0 auto;
}

#yakuza.animated {
    background: transparent url(../images/ipad/yakuza-anim.gif) no-repeat right center;
}

#ben {
    min-height: 89px;
    margin-left: -16px;
}

#ben-img {
    background: transparent url(../images/ipad/bensprite.png) no-repeat;
}

#ben-img.visible { height: 89px; }
div#speechBubble { bottom: 89px; }



/* ---------------- Features Neons Clickable-------------------- */


    #featuresContainer {
        width: 930px;
        height: 710px;
        top: 4041px;
        margin: 0 auto 0 -465px;
    }

    #featprotectingwhatmatters {
        top: 15px; /* t:14 l: 12 */
        left: 13px;
        width: 214px;
        height: 181px;
    }

    #featreminders {
        top: 38px;
        right: 36px;
        width: 155px;
        height: 175px;
    }

    #featpasswords {
        top: 319px;
        left: 32px;
        width: 160px;
        height: 133px;
    }

    #featnotes {
        top: 308px;
        right: 50px;
        width: 129px;
        height: 139px;
    }

    #featcontacts {
        left: 42px;
        bottom: -1px;
        width: 139px;
        height: 157px;
    }

    #featphotos {
        right: 19px;
        bottom: 15px;
        width: 213px;
        height: 125px;
    }



}

/*
 * print styles
 * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/
 */
@media print {
  * { background: transparent !important; color: #444 !important; text-shadow: none; }

  a, a:visited { color: #444 !important; text-decoration: underline; }

  a:after { content: " (" attr(href) ")"; }

  abbr:after { content: " (" attr(title) ")"; }

  .ir a:after { content: ""; }  /* Don't show links for images */

  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }

  img { page-break-inside: avoid; }

  @page { margin: 0.5cm; }

  p, h2, h3 { orphans: 3; widows: 3; }

  h2, h3{ page-break-after: avoid; }
}



/*   DEBUG STYLES    */

/* add class "debug" to body to use */

.debug h1,
.debug h2,
.debug h3 {
	border: 1px solid #ff00ff;
}

.debug p,
.debug div,
.debug .fakeHeader,
.debug ul {
	border: 1px solid #ffff00;
}



.debug a,
.debug img,
.debug iframe,
.debug li {
	border: 1px solid #00ffff;
}


#scrollCover {
    padding: 20px;
    height: 1644px;
    width: 100%;
    /*background: orange;*/
    position: absolute;
    top:0;
    right:0;
    z-index:100;
}

.globalFile {
	width: 18%;
	height: 3.5%;
	border: 1px solid red;
	display: block;
	position: absolute;
	z-index: 99999999;
}
#film1 {  top: 5.5%; right: 6%; }
#fancybox-overlay { z-index: 9999 !important;}
#fancybox-wrap { z-index: 9999999999 !important;}
#movies {
	width: 100%;
    margin: auto;
    position: fixed;
    height: 100%;
    border: 1px solid red;
    top: 0;
    left: 0;
	z-index: 999999;
}

@media only screen and (max-width: 650px) {
	.teamBox {width: 100% !important; float: none !important; margin-left: 0; margin-bottom: 10px;}
}

.clear {clear: both;}
.teamBox { width: 32.666666666666%; margin-left: 1%; }
.teamBox:nth-last-child(2) {margin-left: 0}
.single-blog { background: #fff; -webkit-transition: all 0.36s ease 0s; transition: all 0.36s ease 0s; }
.single-blog img { width: 100%; }
.blog-content {     width: 100%;padding: 10px 0;}

.fa {
	display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}