html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

body { margin: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }

audio:not([controls]) { display: none; height: 0; }

[hidden], template { display: none; }

a { background-color: transparent; }

a:active, a:hover { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

dfn { font-style: italic; }

h1 { font-size: 2em; margin: 0.67em 0; }

mark { background: #ff0; color: #000; }

small { font-size: 80%; }

sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

img { border: 0; }

svg:not(:root) { overflow: hidden; }

figure { margin: 1em 40px; }

hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }

pre { overflow: auto; }

code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }

button { overflow: visible; }

button, select { text-transform: none; }

button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }

button[disabled], html input[disabled] { cursor: default; }

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

input { line-height: normal; }

input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }

input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

legend { border: 0; /* 1 */ padding: 0; /* 2 */ }

textarea { overflow: auto; }

optgroup { font-weight: bold; }

table { border-collapse: collapse; border-spacing: 0; }

td, th { padding: 0; }

html { color: #222; font-size: 1em; line-height: 1.4; }

::-moz-selection { background: #b3d4fc; text-shadow: none; }

::selection { background: #b3d4fc; text-shadow: none; }

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

audio, canvas, iframe, img, svg, video { vertical-align: middle; }

fieldset { border: 0; margin: 0; padding: 0; }

textarea { resize: vertical; }

.hidden { display: none !important; visibility: hidden; }

.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

.invisible { visibility: hidden; }

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

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

html, body { height: 100%; }

body { background-color: #0a0b0c; color: white; overflow: hidden; }

#container { width: 100%; height: 100%; min-width: 1024px; min-height: 640px; }

#oldie { position: absolute; left: 50%; top: 0px; margin-left: -240px !important; }

#keyTotal { position: absolute; top: 50px; color: #FF0000; width: 300px; left: 5px; display: none; }

.statsjs { position: absolute; top: 0px; z-index: 100; }

.dg.ac { z-index: 10000 !important; }

.clearfix:after { content: ""; display: table; clear: both; }

#close { position: fixed; z-index: 11; top: 9px; right: 70px; width: 51px; height: 51px; cursor: pointer; background-image: url("../assets/ui.png"); background-position: 0px 0px; background-repeat: no-repeat; clip: rect(10px 41px 41px 10px); }

#browsers { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; min-width: 1280px; min-height: 720px; background-image: url("../assets/browser.png"); background-repeat: no-repeat; background-position: center center; background-size: cover; }
#browsers div.text-browsers { width: 60%; height: 300px; position: absolute; top: 62%; margin: 0px 20% 0px 20%; }
#browsers div.text-browsers .icone { width: 166px; height: 121px; margin: auto auto auto auto; background-image: url("../assets/browser-icon.png"); background-position: 0px 0px; background-repeat: no-repeat; }
#browsers div.text-browsers strong { display: block; color: #fffcf3; width: 100%; text-align: center; margin: auto; font-family: "sofia-pro", sans-serif; font-size: 18px; font-weight: 300; font-style: normal; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; }
#browsers div.text-browsers strong a { color: #fffcf3; text-decoration: none; }

#preloader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #FFF; cursor: default; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; }
#preloader #fullscreen { position: absolute; right: 20px; top: 20px; width: 12px; height: 12px; cursor: pointer; background-image: url("../assets/ui.png"); background-repeat: no-repeat; background-position: -127px -34px; }
#preloader #fullscreen.exit { background-position: -113px -34px; }
#preloader h1 { position: absolute; color: #FFF; margin: 0; padding: 0; letter-spacing: 0.5px; line-height: 47px; text-align: center; top: 50%; left: 10%; width: 80%; font-family: "sofia-pro", sans-serif; font-weight: 200; font-size: 35px; font-style: normal; }
#preloader #intro-user { position: absolute; width: 580px; left: 50%; top: 50%; margin: -50px 0 0 -270px; }
#preloader #intro-user .intro-line { width: 100%; margin-bottom: 40px; line-height: 31px; letter-spacing: 0.5px; font-family: "sofia-pro", sans-serif; font-weight: 200; font-size: 24px; font-style: normal; }
#preloader #intro-user .intro-line .icon-clock, #preloader #intro-user .intro-line .icon-mouth, #preloader #intro-user .intro-line .icon-headphones { float: left; width: 30px; height: 30px; margin: 7px 42px 10px 0; background-image: url("../assets/ui.png"); background-repeat: no-repeat; }
#preloader #intro-user .intro-line .icon-clock { background-position: -124px -95px; }
#preloader #intro-user .intro-line .icon-mouth { width: 31px; height: 20px; background-position: -140px -64px; }
#preloader #intro-user .intro-line .icon-headphones { width: 36px; height: 28px; background-position: -141px -34px; }
#preloader #story { position: absolute; width: 890px; left: 50%; top: 50%; display: none; margin-left: -410px; }
#preloader #story .story-content { line-height: 31px; letter-spacing: 0.5px; font-family: "sofia-pro", sans-serif; font-weight: 200; font-size: 24px; font-style: normal; }
#preloader #end { position: absolute; width: 750px; left: 50%; top: 50%; text-align: center; margin-left: -375px; }
#preloader #ratio { position: fixed; height: 3px; width: 0%; top: 0px; background-color: #FFF; }
#preloader #logos { position: absolute; width: 100%; margin: 0; padding: 0; list-style-image: none; text-align: center; bottom: 27px; }
#preloader #logos li { display: inline-block; height: 20px; margin-right: 45px; }
#preloader #logos li:last-child { margin-right: 0px; }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { #preloader h1:last-of-type { top: 35% !important; }
  #preloader .continue-btn { position: absolute; top: 50%; left: 50%; margin: -25px 0 0 -70px; display: none; cursor: pointer; font-family: "sofia-pro", sans-serif; font-weight: 200; font-size: 35px; font-style: normal; }
  #preloader #intro-user { width: 55%; left: 10%; top: 50%; margin: -50px 0 0 176px; } }
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { #preloader #fullscreen { background-image: url("../assets/ui@2x.png"); background-size: 180px 127px; }
  #preloader h1 { line-height: 38px; font-size: 28px; }
  #preloader #intro-user { margin-top: -80px; }
  #preloader #intro-user .intro-line .icon-clock, #preloader #intro-user .intro-line .icon-mouth, #preloader #intro-user .intro-line .icon-headphones { background-image: url("../assets/ui@2x.png"); background-size: 180px 127px; }
  #preloader #logos li a img.bell { width: 22px; height: 21px; }
  #preloader #logos li a img.dpt { width: 38px; height: 21px; }
  #preloader #logos li a img.cmf { width: 85px; height: 21px; }
  #preloader #logos li a img.eyesteel { width: 132px; height: 21px; }
  #preloader #logos li a img.superc { width: 56px; height: 21px; } }
#experience { position: absolute; width: 100%; height: 100%; min-width: 1024px; min-height: 640px; }
#experience .end-ipad { position: absolute; top: 50%; width: 80%; margin: -12px 10% 0 10%; color: #000; text-align: center; font-family: "sofia-pro", sans-serif; font-weight: 200; font-size: 24px; font-style: normal; }
#experience #fullscreen { position: absolute; right: 20px; top: 20px; width: 12px; height: 12px; cursor: pointer; background-image: url("../assets/ui.png"); background-repeat: no-repeat; background-position: -127px -34px; }
#experience #fullscreen.exit { background-position: -113px -34px; }
#experience canvas { width: inherit; height: inherit; }
#experience #skytexture, #experience #endForetTexture { display: none; }
#experience #visionTexture { position: absolute; top: 0px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; }
#experience #foret-vision { position: absolute; width: 100%; height: 100%; top: 0px; background-image: url('../img/../assets/textures/foret-vision.png'); background-size: cover; background-position: 0px 0px; background-repeat: no-repeat; display: none; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; }
#experience #white-layer, #experience #city-white { position: absolute; top: 0px; width: 100%; height: 100%; background-color: #FFF; display: none; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; }
#experience #city-white { background-color: #0b433a; filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; }
#experience #nav-tutorial { position: absolute; top: 65px; left: 50%; width: 349px; height: 375px; margin: 0 0 0 -187px; background-color: rgba(0, 0, 0, 0.1); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
#experience #nav-tutorial .sprite { overflow: hidden; background-repeat: no-repeat; background-image: url("../assets/tutorial.png"); }
#experience #nav-tutorial ul.keyboard { width: 100%; margin: 50px 0px 0px 0px; padding: 0; list-style-image: none; text-align: center; }
#experience #nav-tutorial ul.keyboard li { display: inline-block; width: 56px; height: 61px; margin-right: 20px; }
#experience #nav-tutorial ul.keyboard li:nth-child(2) { position: relative; width: 30px; height: 16px; top: -22px; background-position: 0px -224px; }
#experience #nav-tutorial ul.keyboard li:first-child { width: 57px; height: 62px; background-position: -114px -178px; }
#experience #nav-tutorial ul.keyboard li:first-child.on { background-position: -173px -178px; }
#experience #nav-tutorial ul.keyboard li:last-child { margin-right: 0px; background-position: -228px -41px; }
#experience #nav-tutorial ul.keyboard li:last-child.on { background-position: -228px -104px; }
#experience #nav-tutorial .forward { width: 207px; height: 16px; margin: 24px auto 25px auto; background-position: 0px -123px; }
#experience #nav-tutorial .mouse-paths { height: 54px; margin: 53px auto auto auto; }
#experience #nav-tutorial .mouse-paths .mouse { position: relative; width: 29px; height: 32px; margin: auto; top: 30px; left: 0px; background-position: -242px 0px; }
#experience #nav-tutorial .mouse-paths .paths { width: 112px; height: 35px; margin: -37px auto; background-position: -114px -141px; }
#experience #nav-tutorial .mouse-paths .ball { position: absolute; width: 9px; height: 9px; top: 17px; left: 151px; background-color: rgba(255, 255, 255, 0.7); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
#experience #nav-tutorial .use { width: 240px; height: 39px; margin: 27px auto auto auto; background-position: 0px 0px; }
#experience #nav-ipad-tutorial { position: absolute; top: 65px; left: 50%; width: 349px; height: 375px; margin: 0 0 0 -187px; background-color: rgba(0, 0, 0, 0.1); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
#experience #nav-ipad-tutorial .sprite { overflow: hidden; margin: auto; background-repeat: no-repeat; background-image: url("../assets/tutorial.png"); }
#experience #nav-ipad-tutorial .top { position: relative; margin: 30px auto 50px auto; }
#experience #nav-ipad-tutorial .top .ipad-hand { width: 45px; height: 75px; margin-bottom: 10px; background-position: -232px -167px; }
#experience #nav-ipad-tutorial .top .ipad-touch { width: 207px; height: 39px; background-position: 0px -82px; }
#experience #nav-ipad-tutorial .bottom { position: relative; }
#experience #nav-ipad-tutorial .bottom .ipad-drag { width: 112px; height: 81px; margin-bottom: 10px; background-position: 0px -141px; }
#experience #nav-ipad-tutorial .bottom .ipad-move { width: 211px; height: 39px; background-position: 0px -41px; }

#ui { position: absolute; top: 0px; width: 100%; height: 58px; z-index: 10; margin: 0; min-width: 1024px; }
#ui .gradient-top { position: fixed; top: -30px; width: 100%; height: 140px; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjUiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.5)), color-stop(100%, rgba(0, 0, 0, 0))); background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); }
#ui #menu-close { position: absolute; top: 21px; left: 50%; width: 30px; height: 13px; margin: 0 0 0 -15px; cursor: pointer; background-image: url("../assets/ui.png"); background-position: -53px -34px; background-repeat: no-repeat; }
#ui #menu-open { position: absolute; top: 0px; left: 50%; width: 986px; height: 58px; margin: 8px 0 0 -493px; display: none; border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
#ui #menu-open #menu-characters { margin: 8px 0 0 0; padding: 0; width: 200px; list-style-type: none; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; }
#ui #menu-open #menu-characters li { display: inline-block; width: 32px; cursor: pointer; height: 32px; margin: 2px 28px 0 0; line-height: 29px; letter-spacing: 1px; color: #8e8e8e; font-family: "sofia-pro", sans-serif; font-size: 14px; font-weight: 400; font-style: normal; background-image: url("../assets/ui.png"); background-repeat: no-repeat; }
#ui #menu-open #menu-characters li:last-child { margin-right: 0px; }
#ui #menu-open #menu-characters #diane { background-position: -121px 0; }
#ui #menu-open #menu-characters #frank { background-position: -87px 0; }
#ui #menu-open #menu-characters #mubin { background-position: -53px 0; }
#ui #menu-open #menu-characters .selected { background: none; pointer-events: none; color: #FFFFFF; }
#ui #menu-open #menu-characters .selected .b1, #ui #menu-open #menu-characters .selected .b2, #ui #menu-open #menu-characters .selected .b3 { position: absolute; }
#ui #menu-open #menu-characters .selected .b1 { width: 18px; height: 31px; background-image: url("../assets/ui.png"); background-repeat: no-repeat; background-position: -120px -48px; }
#ui #menu-open #menu-characters .selected .b2 { height: 29px; border-top: 1.5px solid rgba(240, 240, 240, 0.9); border-bottom: 1.5px solid rgba(240, 240, 240, 0.9); }
#ui #menu-open #menu-characters .selected .b3 { width: 17px; height: 31px; background-image: url("../assets/ui.png"); background-repeat: no-repeat; background-position: -155px 0; }
#ui #menu-open .sep { position: absolute; left: 200px; top: 0px; width: 1px; height: inherit; background-color: rgba(255, 255, 255, 0.3); }
#ui #menu-open .sep:last-of-type { left: 844px; }
#ui #menu-open #menu-pages { position: absolute; top: 15px; left: 247px; list-style-type: none; margin: 0; padding: 0; width: 550px; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; }
#ui #menu-open #menu-pages li { display: inline-block; margin-right: 70px; line-height: 23px; letter-spacing: 3.5px; text-transform: uppercase; cursor: pointer; font-family: "sofia-pro", sans-serif; font-size: 14px; font-weight: 400; font-style: normal; }
#ui #menu-open #menu-pages li:last-child { margin: 0; }
#ui #menu-open #menu-social { list-style-type: none; margin: 0; padding: 0; position: absolute; top: 17px; left: 891px; width: 105px; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; }
#ui #menu-open #menu-social li { display: inline-block; margin-right: 3px; margin-top: -5px; width: 30px; height: 30px; cursor: pointer; }
#ui #menu-open #menu-social li > div { position: relative; margin: auto; top: 50%; background-image: url("../assets/ui.png"); background-repeat: no-repeat; }
#ui #menu-open #menu-social li:last-child { margin-right: 0px; }
#ui #menu-open #menu-social .facebook > div { width: 6px; height: 12px; margin-top: -6px; background-position: -174px 0; }
#ui #menu-open #menu-social .twitter > div { width: 12px; height: 10px; margin-top: -5px; background-position: -156px -106px; }
#ui #menu-open #menu-social .fullscreen > div { width: 12px; height: 12px; margin-top: -6px; background-position: -127px -34px; }
#ui #menu-open #menu-social .fullscreen > div.exit { background-position: -113px -34px; }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { #ui #menu-open #menu-pages li { margin-right: 65px; } }
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { #ui #menu-close { background-image: url("../assets/ui@2x.png"); background-size: 180px 127px; }
  #ui #menu-open #menu-characters li { background-image: url("../assets/ui@2x.png"); background-size: 180px 127px; }
  #ui #menu-open #menu-characters .selected .b1 { background-image: url("../assets/ui@2x.png"); background-size: 180px 127px; }
  #ui #menu-open #menu-characters .selected .b3 { background-image: url("../assets/ui@2x.png"); background-size: 180px 127px; }
  #ui #menu-open #menu-social li > div { background-image: url("../assets/ui@2x.png"); background-size: 180px 127px; } }
#timeline { position: absolute; width: 100%; height: 37px; bottom: 17px; left: 0; z-index: 11; min-width: 1024px; }
#timeline .gradient-bottom { position: fixed; bottom: 0px; width: 100%; height: 150px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30); opacity: 0.3; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFmMWYxZiIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxZjFmMWYiIHN0b3Atb3BhY2l0eT0iMC41Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(31, 31, 31, 0)), color-stop(100%, rgba(31, 31, 31, 0.5))); background-image: -moz-linear-gradient(rgba(31, 31, 31, 0), rgba(31, 31, 31, 0.5)); background-image: -webkit-linear-gradient(rgba(31, 31, 31, 0), rgba(31, 31, 31, 0.5)); background-image: linear-gradient(rgba(31, 31, 31, 0), rgba(31, 31, 31, 0.5)); }
#timeline #time-wrapper { position: absolute; width: 80%; margin: 16px 10% 0 10%; height: 10px; }
#timeline #time-wrapper #scenario, #timeline #time-wrapper #progression { position: absolute; width: 100%; margin: 0; height: 2px; background-color: rgba(255, 255, 255, 0.05); }
#timeline #time-wrapper #scenario { overflow: hidden; }
#timeline #time-wrapper #progression { width: 0%; background-color: rgba(255, 255, 255, 0.4); }
#timeline #time-wrapper .step-point { position: absolute; width: 4px; height: 4px; padding: 10px; margin: -11px; background-color: #FFF; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; -moz-transform: scale(0.21, 0.21); -ms-transform: scale(0.21, 0.21); -webkit-transform: scale(0.21, 0.21); transform: scale(0.21, 0.21); }
#timeline #time-wrapper .character-point, #timeline #time-wrapper .date-point, #timeline #time-wrapper .fact-point { position: absolute; margin: 0px; width: 2px; height: 2px; cursor: pointer; background-color: #a3f6af; background: none; z-index: 1; -moz-box-shadow: 0px 0px 4px 1px rgba(181, 249, 196, 0.64); -webkit-box-shadow: 0px 0px 4px 1px rgba(181, 249, 196, 0.64); box-shadow: 0px 0px 4px 1px rgba(181, 249, 196, 0.64); }
#timeline #time-wrapper .date-point { cursor: pointer; background-color: #9cbdf1; -moz-box-shadow: 0px 0px 4px 1px rgba(156, 189, 241, 0.64); -webkit-box-shadow: 0px 0px 4px 1px rgba(156, 189, 241, 0.64); box-shadow: 0px 0px 4px 1px rgba(156, 189, 241, 0.64); }
#timeline #time-wrapper .fact-point { background-color: #f0f75f; -moz-box-shadow: 0px 0px 4px 1px rgba(240, 247, 95, 0.64); -webkit-box-shadow: 0px 0px 4px 1px rgba(240, 247, 95, 0.64); box-shadow: 0px 0px 4px 1px rgba(240, 247, 95, 0.64); }
#timeline #time-wrapper .character-point.active, #timeline #time-wrapper .date-point.active, #timeline #time-wrapper .fact-point.active { width: 9px; height: 9px; margin: -4px; background-color: transparent; background-image: url("../assets/ui.png"); background-position: -167px -118px; background-repeat: no-repeat; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
#timeline #time-wrapper .character-point.active.over { width: 12px; height: 12px; margin: -6px; background-position: -99px -34px; }
#timeline #time-wrapper .date-point.active { background-position: -170px -106px; }
#timeline #time-wrapper .date-point.active.over { width: 12px; height: 12px; margin: -6px; background-position: -124px -81px; }
#timeline #time-wrapper .fact-point.active { background-position: -156px -118px; }
#timeline #time-wrapper .fact-point.active.over { width: 12px; height: 12px; margin: -6px; background-position: -85px -34px; }
#timeline #time-wrapper .p0 { left: 0%; }
#timeline #time-wrapper .p1 { left: 4.93%; }
#timeline #time-wrapper .p2 { left: 18.11%; }
#timeline #time-wrapper .p3 { left: 27.93%; }
#timeline #time-wrapper .p4 { left: 46.68%; }
#timeline #time-wrapper .p5 { left: 60.84%; }
#timeline #time-wrapper .p6 { left: 72.63%; }
#timeline #time-wrapper .p7 { left: 84.1%; }
#timeline #time-wrapper .p8 { left: 100%; }
#timeline #step-buttons { width: 80%; height: 20px; margin: 0 10% 0 10%; }
#timeline #step-buttons .step-btn { position: absolute; height: 20px; width: 100px; margin-top: -10px; cursor: pointer; background-color: rgba(255, 0, 0, 0); }
#timeline #step-buttons .over { margin-top: -50px; height: 100px; }
#timeline #step-buttons .b0 { width: 4.8%; left: 0%; }
#timeline #step-buttons .b1 { width: 12.6%; left: 5.2%; }
#timeline #step-buttons .b2 { width: 9.1%; left: 18.5%; }
#timeline #step-buttons .b3 { width: 16%; left: 28.4%; }
#timeline #step-buttons .b4 { width: 15.5%; left: 45.1%; }
#timeline #step-buttons .b5 { width: 11%; left: 61.3%; }
#timeline #step-buttons .b6 { width: 10.6%; left: 73.1%; }
#timeline #step-buttons .b7 { width: 15%; left: 84.7%; }
#timeline .character-bubble { position: absolute; width: 34px; height: 34px; cursor: pointer; margin: -16px -17px -17px -17px; z-index: 1; background-image: url("../assets/ui.png"); background-position: 0 -90px; background-repeat: no-repeat; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; }
#timeline .character-bubble > span { margin-top: 8px; width: 33px; text-align: center; display: block; color: #8E8E8E; font-family: "sofia-pro", sans-serif; font-size: 11.5px; font-weight: 400; font-style: normal; }
#timeline #tooltip { position: absolute; color: #FFF; margin-top: -80px; display: none; }
#timeline #tooltip .tooltip-title { float: left; width: 200px; letter-spacing: 2px; text-transform: uppercase; line-height: 23px; margin-top: -6px; text-align: right; font-family: "sofia-pro", sans-serif; font-weight: 600; font-size: 17px; font-style: normal; }
#timeline #tooltip .tooltip-line { margin: 0 16px 0 16px; float: left; width: 1px; height: 81px; background-color: rgba(255, 255, 255, 0.3); }
#timeline #tooltip .tooltip-content { letter-spacing: 0.5px; line-height: 20px; margin-top: -4px; width: 550px; font-family: "sofia-pro", sans-serif; font-weight: 600; font-size: 18px; font-style: normal; }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { #timeline { pointer-events: none; visibility: hidden; } }
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { #timeline #time-wrapper .character-point.active, #timeline #time-wrapper .date-point.active, #timeline #time-wrapper .fact-point.active { background-image: url("../assets/ui@2x.png"); background-size: 180px 127px; }
  #timeline #time-wrapper .character-bubble { background-image: url("../assets/ui@2x.png"); background-size: 180px 127px; } }
#interview { position: absolute; top: 93px; width: 100%; margin: 0; color: #FFF; overflow: auto; }
#interview #content { position: absolute; margin: -35px 30% 0 30%; width: 40%; }
#interview #content p { line-height: 34px; letter-spacing: 0.5px; padding: 0; font-family: "sofia-pro", sans-serif; font-weight: 300; font-size: 24px; font-style: normal; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=25); opacity: 0.25; }
#interview #content .selected { filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false); opacity: 1; }
#interview #scrollbar { position: fixed; top: 90px; right: 0px; width: 15px; margin-left: -30px; background-color: transparent; }
#interview #scrollbar #drag { position: absolute; width: 2px; margin-left: 6px; height: inherit; background-color: rgba(255, 255, 255, 0.3); }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { #interview #content { width: 70%; margin: -35px 15% 0 15%; }
  #interview #scrollbar { visibility: hidden; } }
#history { position: absolute; width: 100%; top: 93px; color: #FFF; overflow: auto; }
#history #content { position: relative; top: 0px; left: 50%; margin: 0 0 0 -640px; width: 1280px; }
#history #content #disclaimer { text-align: center; margin: 0 0 130px 0; padding: 0; line-height: 31px; letter-spacing: 0.5px; font-family: "sofia-pro", sans-serif; font-weight: 300; font-size: 24px; font-style: normal; }
#history #content h1 { text-align: center; margin: 100px 0 120px 0; padding: 0; line-height: 48px; letter-spacing: 0.5px; font-family: "sofia-pro", sans-serif; font-weight: 300; font-size: 40px; font-style: normal; }
#history #content #line { position: absolute; top: 430px; left: 50%; width: 2px; margin-left: -1px; background-color: rgba(255, 255, 255, 0.3); }
#history #content .item { position: relative; width: 570px; left: 50%; margin-bottom: 170px; padding-top: 7px; }
#history #content .item .bullet-point { position: absolute; top: 8px; left: -3px; width: 5px; height: 5px; background-color: #FFF; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
#history #content .item .bullet-line { position: absolute; top: 9.4px; height: 2px; width: 32px; background-color: rgba(255, 255, 255, 0.3); }
#history #content .item .tooltip-date { position: relative; margin: 0 0 0 72px; width: 86px; height: 32px; float: left; background-image: url("../assets/ui.png"); background-position: -32px -53px; background-repeat: no-repeat; letter-spacing: 3.5px; line-height: 28px; text-align: center; font-family: "sofia-pro", sans-serif; font-weight: 400; font-size: 14px; font-style: normal; }
#history #content .item .tooltip-date2-right, #history #content .item .tooltip-date3-right { position: relative; margin: 0 0 0 72px; float: left; letter-spacing: 3.5px; line-height: 28px; text-align: center; font-family: "sofia-pro", sans-serif; font-weight: 400; font-size: 14px; font-style: normal; }
#history #content .item .tooltip-date2-right .start, #history #content .item .tooltip-date2-right .end, #history #content .item .tooltip-date3-right .start, #history #content .item .tooltip-date3-right .end { width: 86px; height: 32px; background-image: url("../assets/ui.png"); background-position: -32px -53px; background-repeat: no-repeat; }
#history #content .item .tooltip-date2-right .end, #history #content .item .tooltip-date3-right .end { position: absolute; top: 812px; }
#history #content .item .tooltip-date2-right .date-line, #history #content .item .tooltip-date3-right .date-line { position: absolute; top: 32px; left: 41px; width: 2px; height: 780px; background-color: rgba(255, 255, 255, 0.3); }
#history #content .item .tooltip-date2-right .bullet-end, #history #content .item .tooltip-date3-right .bullet-end { position: absolute; top: 812px; left: -75px; width: 5px; height: 5px; background-color: #FFF; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
#history #content .item .tooltip-date2-right .line-end, #history #content .item .tooltip-date3-right .line-end { position: absolute; top: 813.4px; left: -75px; height: 2px; width: 32px; background-color: rgba(255, 255, 255, 0.3); }
#history #content .item .tooltip-date3-right .end { top: 512px; }
#history #content .item .tooltip-date3-right .date-line { height: 480px; }
#history #content .item .tooltip-date3-right .bullet-end { top: 512px; }
#history #content .item .tooltip-date3-right .line-end { top: 513.4px; }
#history #content .item .tooltip-date2-left { position: absolute; margin: 0 0 0 73%; top: 8px; letter-spacing: 3.5px; line-height: 28px; text-align: center; font-family: "sofia-pro", sans-serif; font-weight: 400; font-size: 14px; font-style: normal; }
#history #content .item .tooltip-date2-left .start, #history #content .item .tooltip-date2-left .end { width: 86px; height: 32px; background-image: url("../assets/ui.png"); background-position: -36px -87px; background-repeat: no-repeat; }
#history #content .item .tooltip-date2-left .end { position: absolute; top: 502px; }
#history #content .item .tooltip-date2-left .date-line { position: absolute; top: 32px; left: 41px; width: 2px; height: 470px; background-color: rgba(255, 255, 255, 0.3); }
#history #content .item .tooltip-date2-left .bullet-end { position: absolute; top: 502px; left: 151px; width: 5px; height: 5px; background-color: #FFF; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }
#history #content .item .tooltip-date2-left .line-end { position: absolute; top: 504.4px; left: 121px; height: 2px; width: 32px; background-color: rgba(255, 255, 255, 0.3); }
#history #content .item .item-text { letter-spacing: 0.5px; line-height: 31px; margin: -29px 0 0 190px; width: 450px; font-family: "sofia-pro", sans-serif; font-weight: 300; font-size: 24px; font-style: normal; }
#history #content .item .youtube { margin-top: 45px; width: inherit; }
#history #content .item .youtube .player { height: 252px; }
#history #content .item .youtube .poster { cursor: pointer; height: 252px; background-color: rgba(0, 0, 0, 0.45); }
#history #content .item .youtube .poster img { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; }
#history #content .item .youtube .poster .play { position: absolute; width: 30px; height: 35px; margin: -140px 0 0 205px; background-image: url("../assets/ui.png"); background-position: 0 -53px; background-repeat: no-repeat; }
#history #content .left { margin-left: -570px; }
#history #content .left .bullet-point { left: 567px; }
#history #content .left .bullet-line { left: 536px; }
#history #content .left .tooltip-date { position: absolute; top: 4px; left: 340px; float: none; background-position: -36px -87px; }
#history #content .left .item-text { text-align: right; margin-left: -75px; }
#history #content .right { margin-left: 0px; }
#history #scrollbar { position: fixed; top: 90px; right: 0; width: 15px; cursor: pointer; margin-left: -30px; background-color: transparent; }
#history #scrollbar #drag { position: absolute; width: 2px; margin-left: 6px; height: inherit; background-color: rgba(255, 255, 255, 0.3); }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { #history #content { width: 90%; left: 0%; margin: 0px 5% 0 5%; }
  #history #content .item { width: 53%; }
  #history #content .item .tooltip-date, #history #content .item .tooltip-date2-right, #history #content .item .tooltip-date3-right { margin-left: 45px; }
  #history #content .item .tooltip-date2-left { margin-left: 81%; }
  #history #content .item .tooltip-date2-left .end { top: 352px; }
  #history #content .item .tooltip-date2-left .date-line { height: 320px; }
  #history #content .item .tooltip-date2-left .bullet-end { top: 352px; left: 129px; }
  #history #content .item .tooltip-date2-left .line-end { top: 353.4px; left: 97px; }
  #history #content .item .tooltip-date2-right .end { top: 610px; }
  #history #content .item .tooltip-date2-right .date-line { height: 578px; }
  #history #content .item .tooltip-date2-right .bullet-end { top: 610px; left: -47px; }
  #history #content .item .tooltip-date2-right .line-end { top: 611.4px; left: -47px; }
  #history #content .item .tooltip-date3-right .end { top: 380px; }
  #history #content .item .tooltip-date3-right .date-line { height: 348px; }
  #history #content .item .tooltip-date3-right .bullet-end { top: 380px; left: -47px; }
  #history #content .item .tooltip-date3-right .line-end { top: 381.4px; left: -47px; }
  #history #content .item .item-text { line-height: 23px; font-size: 16px; }
  #history #content .item .single-line { margin-top: -15px; }
  #history #content .item .youtube { margin-top: 45px; width: inherit; }
  #history #content .item .youtube .player { width: 100%; height: 230px; }
  #history #content .item .youtube .poster { cursor: pointer; height: auto; width: 100%; background-color: rgba(0, 0, 0, 0.45); }
  #history #content .item .youtube .poster img { width: 100%; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; }
  #history #content .item .youtube .poster .play { position: absolute; width: 30px; height: 35px; margin: -120px 0 0 158px; background-image: url("../assets/ui.png"); background-position: 0 -53px; background-repeat: no-repeat; }
  #history #content .left { margin-left: -527px; }
  #history #content .left .bullet-point { left: 525px; }
  #history #content .left .bullet-line { left: 495px; }
  #history #content .left .tooltip-date { position: absolute; top: 4px; left: 350px; float: none; background-position: -36px -87px; }
  #history #content .left .item-text { text-align: right; margin-left: 25px; width: 350px; }
  #history #content .right { margin-left: 0px; }
  #history #content .right .item-text { width: 350px; margin-left: 150px; }
  #history #scrollbar { visibility: hidden; } }
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { #history #content .item .tooltip-date { background-image: url("../assets/ui@2x.png"); background-size: 180px 127px; }
  #history #content .item .tooltip-date2 .start, #history #content .item .tooltip-date2 .end { background-image: url("../assets/ui@2x.png"); background-size: 180px 127px; }
  #history #content .item .youtube .poster .play { background-image: url("../assets/ui@2x.png"); background-size: 180px 127px; } }
#about { position: absolute; width: 100%; top: 93px; color: #FFF; overflow: auto; }
#about #content { position: relative; top: 0px; left: 0px; margin: 0 30% 0 30%; width: 40%; }
#about #content h1 { text-align: center; margin: 100px 0 125px 0; padding: 0; line-height: 48px; letter-spacing: 0.5px; font-family: "sofia-pro", sans-serif; font-weight: 300; font-size: 40px; font-style: normal; }
#about #content p { line-height: 31px; letter-spacing: 0.5px; padding: 0; font-family: "sofia-pro", sans-serif; font-weight: 300; font-size: 24px; font-style: normal; }
#about #content p:last-child { margin-bottom: 41px; }
#about #scrollbar { position: fixed; top: 90px; right: 0; width: 15px; margin-left: -30px; background-color: transparent; }
#about #scrollbar #drag { position: absolute; width: 2px; margin-left: 6px; height: inherit; background-color: rgba(255, 255, 255, 0.3); }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { #about #content { width: 70%; margin: -35px 15% 0 15%; }
  #about #scrollbar { visibility: hidden; } }
#film { position: absolute; width: 100%; top: 93px; color: #FFF; overflow: auto; }
#film #content { position: relative; top: 0px; left: 0px; margin: 0 20% 0 20%; width: 60%; }
#film #content #vimeo-trailer { position: relative; text-align: center; margin: 0 0 130px 0; }
#film #content h1 { text-align: center; margin: 100px 0 125px 0; padding: 0; line-height: 48px; letter-spacing: 0.5px; font-family: "sofia-pro", sans-serif; font-weight: 300; font-size: 40px; font-style: normal; }
#film #content p { line-height: 31px; letter-spacing: 0.5px; padding: 0; width: 80%; margin-left: auto; margin-right: auto; font-family: "sofia-pro", sans-serif; font-weight: 300; font-size: 24px; font-style: normal; }
#film #content p:last-child { margin-bottom: 41px; }
#film #scrollbar { position: fixed; top: 90px; right: 0; width: 15px; margin-left: -30px; background-color: transparent; }
#film #scrollbar #drag { position: absolute; width: 2px; margin-left: 6px; height: inherit; background-color: rgba(255, 255, 255, 0.3); }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { #film #content { width: 100%; margin: -35px 0 0 0; }
  #film #content p { width: 70%; }
  #film #scrollbar { visibility: hidden; } }
#credit { position: absolute; width: 100%; top: 93px; color: #FFF; overflow: auto; }
#credit #content { position: relative; top: 0px; left: 0px; margin: 0 25%; width: 50%; }
#credit #content h1 { text-align: center; margin: 100px 0 125px 0; padding: 0; line-height: 48px; letter-spacing: 0.5px; font-family: "sofia-pro", sans-serif; font-weight: 300; font-size: 40px; font-style: normal; }
#credit #content .people { position: relative; width: 700px; text-align: center; margin: auto; }
#credit #content .people .role { line-height: 24px; letter-spacing: 3.5px; margin: 0 0 -4px 0; text-transform: uppercase; color: #FFF; font-family: "sofia-pro", sans-serif; font-weight: 400; font-size: 14px; font-style: normal; }
#credit #content .people .name { line-height: 27px; letter-spacing: 0.5px; margin: 5px 0 30px 0; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); font-family: "sofia-pro", sans-serif; font-weight: 300; font-size: 24px; font-style: normal; }
#credit #content .people.title { margin-bottom: 20px; }
#credit #content .people.title .role { font-size: 16px; }
#credit #content .people.mia { margin-bottom: 60px; }
#credit #content #logos { position: relative; width: 100%; margin: 80px 0px 40px 0px; padding: 0; list-style-image: none; text-align: center; }
#credit #content #logos li { display: inline-block; height: 30px; margin-right: 65px; }
#credit #content #logos li:last-child { margin-right: 0px; }
#credit #scrollbar { position: fixed; top: 90px; right: 0; width: 15px; margin-left: -30px; background-color: transparent; }
#credit #scrollbar #drag { position: absolute; width: 2px; margin-left: 6px; height: inherit; background-color: rgba(255, 255, 255, 0.3); }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { #credit #content { width: 70%; margin: -35px 15% 0 15%; }
  #credit #scrollbar { visibility: hidden; } }
#fact { position: absolute; width: 100%; top: 93px; color: #FFF; overflow: auto; }
#fact #content { position: relative; top: 0px; left: 0px; margin: 0 30% 0 30%; width: 40%; }
#fact #content h1 { text-align: center; margin: 100px 0 125px 0; padding: 0; line-height: 48px; letter-spacing: 0.5px; font-family: "sofia-pro", sans-serif; font-weight: 300; font-size: 40px; font-style: normal; }
#fact #content p { line-height: 31px; letter-spacing: 0.5px; padding: 0; font-family: "sofia-pro", sans-serif; font-weight: 300; font-size: 24px; font-style: normal; }
#fact #content p:last-child { margin-bottom: 41px; }
#fact #scrollbar { position: fixed; top: 90px; right: 0; width: 15px; margin-left: -30px; background-color: transparent; }
#fact #scrollbar #drag { position: absolute; width: 2px; margin-left: 6px; height: inherit; background-color: rgba(255, 255, 255, 0.3); }

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { #fact #content { width: 70%; margin: -35px 15% 0 15%; }
  #fact #scrollbar { visibility: hidden; } }
#outro { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; color: #FFF; text-align: center; font-family: "sofia-pro", sans-serif; font-weight: 200; font-size: 24px; font-style: normal; }
#outro #conclusion { position: absolute; margin: 0; padding: 0; top: 50%; width: 80%; margin: 0 10% 0 10%; list-style-type: none; }
#outro #conclusion li { display: none; }
#outro #conclusion li:first-child { display: block; }
#outro #continue, #outro #restart, #outro #share { position: absolute; width: 200px; margin: auto auto auto -100px; text-align: center; top: 50%; left: 50%; cursor: pointer; font-weight: 300; }
#outro #continue .arrow, #outro #restart .arrow, #outro #share .arrow { position: relative; display: inline-block; width: 10px; height: 18px; margin-left: 5px; top: 1px; background-image: url("../assets/outro/arrow.png"); background-repeat: no-repeat; background-position: 0 0; }
#outro #continue .restart, #outro #restart .restart, #outro #share .restart { position: relative; display: inline-block; width: 19px; height: 20px; margin-left: 5px; top: 2px; background-image: url("../assets/outro/restart.png"); background-repeat: no-repeat; background-position: 0 0; }
#outro #restart { display: none; width: 320px; margin-left: -160px; }
#outro #share { display: none; width: 320px; margin-left: -160px; }
#outro #share ul { margin: 0 0 0 15px; padding: 0; display: inline-block; list-style-image: none; }
#outro #share ul li { display: inline-block; margin-left: 15px; }
#outro #share ul li:first-child { margin-left: 0px; }
#outro #share ul li.facebook { width: 8px; height: 16px; background-image: url("../assets/outro/facebook.png"); background-repeat: no-repeat; background-position: 0 0; }
#outro #share ul li.twitter { width: 20px; height: 16px; background-image: url("../assets/outro/twitter.png"); background-repeat: no-repeat; background-position: 0 0; }

@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { #outro #continue .arrow, #outro #restart .arrow, #outro #share .arrow { background-image: url("../assets/outro/arrow@2x.png"); background-size: 10px 18px; }
  #outro #continue .restart, #outro #restart .restart, #outro #share .restart { background-image: url("../assets/outro/restart@2x.png"); background-size: 19px 20px; }
  #outro #share ul li.facebook { background-image: url("../assets/outro/facebook@2x.png"); background-size: 8px 16px; }
  #outro #share ul li.twitter { background-image: url("../assets/outro/twitter@2x.png"); background-size: 20px 16px; } }
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) { * { -webkit-tap-highlight-color: transparent; }
  #ipad-side { display: none; }
  #container, #exprience, #preloader { overflow: hidden; }
  #close { top: 90px; }
  #experience { -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } }
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) { body { overflow: hidden; }
  #container, #experience, #preloader { visibility: hidden; }
  #ipad-side { display: block; position: fixed; top: 0px; width: 100%; height: 100%; z-index: 100; overflow: hidden; background-color: #000; }
  #ipad-side .ipad-content { position: relative; text-align: center; top: 200px; }
  #ipad-side .ipad-content h1 { text-transform: uppercase; margin: 0 0 50px 0; padding: 0; margin: auto; font-family: "sofia-pro", sans-serif; font-size: 18px; font-weight: 300; font-style: normal; } }
@media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { #close { background-image: url("../assets/ui@2x.png"); background-size: 180px 127px; } }