/* Import CSS reset and Hello Libary */
@import url('./style-hello.css');
@font-face {
	font-family: 'djb_this_is_meregular';
	src: url('./fonts/djb_this_is_me-webfont.eot');
	src: url('./fonts/djb_this_is_me-webfont.eot?#iefix') format('embedded-opentype'),
		url('./fonts/djb_this_is_me-webfont.woff2') format('woff2'),
		url('./fonts/djb_this_is_me-webfont.woff') format('woff'),
		url('./fonts/djb_this_is_me-webfont.ttf') format('truetype'),
		url('./fonts/djb_this_is_me-webfont.svg#djb_this_is_meregular') format('svg');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'historical_felltyperoman';
	src: url('./fonts/historical-felltyperoman-webfont.eot');
	src: url('./fonts/historical-felltyperoman-webfont.eot?#iefix') format('embedded-opentype'),
		url('./fonts/historical-felltyperoman-webfont.woff2') format('woff2'),
		url('./fonts/historical-felltyperoman-webfont.woff') format('woff'),
		url('./fonts/historical-felltyperoman-webfont.ttf') format('truetype'),
		url('./fonts/historical-felltyperoman-webfont.svg#historical_felltyperoman') format('svg');
	font-weight: normal;
	font-style: normal;
}
body, html { overflow-x: hidden; position: relative; min-height: 100%; height: 100%; width: 100%; font-family: historical_felltyperoman, Times, serif; line-height: 1.2; font-size: 20px; text-align: center; color: #383B5B; }
/* STRUCTURE */
#header, #footer { background-color: #fff; height: 46px; z-index: 1300; font-family: "Arial", sans-serif; font-size: 0.7em; display: block; }
#footer { height: auto; padding: 10px; }
.ratio {
	position: absolute;
	width: 100vw; 
	height: 85.33vw; /* height:width ratio = 1280/1500 = .85333333333333 */
	max-height: 100vh;
	max-width: 117.18vh; /* 1500/1280 = 1.171875 */
	margin: auto;
	top:0; bottom:0; /* vertical center */
	left:0; right:0; /* horizontal center */
	z-index: 2;
}
.background { width: 100%; height: 100%; }
.scene { width: 100vw; height: 100vh; }
.paper { width: 960px; max-width: 96%; }
/* TEXT */
h1, h2, h3, h4, h5, h6 { font-weight: normal; color: #383B5B; font-size: 1.5vw; }
h3 { font-size: 1.7vw; padding: 0 0 0.3em 0; }
strong { font-weight: normal; font-size: 1.1em; }
.content p, .content ol, .content ul { color: #383B5B; padding: 0 0 0.5em 1em; /* font-size: 2vw; */ }
a { color: #b80a52; }
#header .left,
#footer .left { margin: 10px 0; }
/* TIMELINE */
.timeline { font-family: djb_this_is_meregular; text-transform: uppercase; width: 44px; height: 100vh; background-color: #f8f8eb; color: #383B5B; z-index: 1050; }
.date { height: 22%; font-size: 27px; }
.date.current { width: 120px; margin-left: 10px; height: 13%; position: relative; z-index: 100;}
.timeline h2 { font-family: djb_this_is_meregular; font-size: 50px; text-align: left; }
.now { left: 99%; margin-top: -51px; border-bottom: 51px outset transparent; border-top: 51px outset transparent; border-left: 130px solid #f8f8eb; border-right: 0; }
/* RIBBONS */
.ribbon { width: 90px; margin-left: -45px; }
.fork { height: 118px; border-top: 0; border-right: 45px outset transparent; border-bottom: 27px outset transparent; border-left: 45px outset transparent; }
/* SCROLLS */
.scroll { background-color: #f8f8eb; width: 60vw; height: 60vh; border-top-right-radius: 23px; border-bottom-left-radius: 23px; margin-left: -30vw; }
.scroll .behind { right: 100%; width: 46px; height: 23px; background-color: #383a5b; border-top-right-radius: 23px; border-top-left-radius: 23px; }
.scroll .flap { right: 100%; width: 23px; height: 23px; background-color: #f8f8eb; }
.scroll .infront { left: 24px; width: 100%; height: 23px; background-color: #383a5b; border-bottom-right-radius: 23px; }
.scroll .curl { width: 46px; height: 23px; background-color: #f8f8eb; border-bottom-right-radius: 23px; border-bottom-left-radius: 23px;  margin: 0 0 0 -24px; }
.scroll .content { width: 90%; height: 86%; overflow: hidden; }
.scroll .ribbon { top: 100%; position: absolute; }
/* .scroll .ribbon .fork { border-bottom: 27px outset rgba(255,105,95,0); border-left: 45px solid #ff695f; border-right: 45px solid #ff695f; } */
.scroll .ribbon .fork { border-bottom: 3vw outset rgba(255,105,95,0); border-left: 8vw solid #ff695f; border-right: 8vw solid #ff695f; }
.filagree { right: 0; margin: auto; }
.filagree.tl { margin-top: -70px; }
.filagree.bl { margin-bottom: -60px; }
/* AT THE BOTTOM */
.bottomscroll { z-index: 1050; top: 65vh; }
.bottomscroll .content { width: 90%; height: 100%; overflow: hidden; }
.bottomscroll .section { height: 35vh; }
.bottomscroll .content p { /* font-size: 27px; */ font-size: 2vw; position: relative; }
.illuminated { width: 1.1em; height: 2em; display: inline-block; margin: 0 0 0; vertical-align: bottom; line-height: 2; position: relative; overflow: hidden; }
.illuminated :first-child { opacity: 0; }
.illuminated.a { background: transparent url(../images/illuminated-A.png) no-repeat bottom right; background-size: contain; }
.illuminated.b { width: 1.2em; background: transparent url(../images/illuminated-B.png) no-repeat bottom left; background-size: contain; }
.illuminated.c { background: transparent url(../images/illuminated-C.png) no-repeat bottom left; background-size: contain; }
.illuminated.d { width: 1.2em; background: transparent url(../images/illuminated-D.png) no-repeat bottom left; background-size: contain; }
.illuminated.e { background: transparent url(../images/illuminated-E.png) no-repeat bottom right; background-size: contain; }
.illuminated.h { background: transparent url(../images/illuminated-H.png) no-repeat bottom right; background-size: contain; }
.illuminated.i { background: transparent url(../images/illuminated-I.png) no-repeat bottom right; background-size: contain; }
.illuminated.k { background: transparent url(../images/illuminated-K.png) no-repeat bottom right; background-size: contain; }
.illuminated.m { width: 2em; background: transparent url(../images/illuminated-M.png) no-repeat bottom right; background-size: contain; }
.illuminated.n { width: 1.4em; background: transparent url(../images/illuminated-N.png) no-repeat bottom left; background-size: contain; }
.illuminated.o { background: transparent url(../images/illuminated-O.png) no-repeat bottom left; background-size: contain; }
.illuminated.p { margin-right: -0.4em; background: transparent url(../images/illuminated-P.png) no-repeat bottom right; background-size: contain; }
.illuminated.s { background: transparent url(../images/illuminated-S.png) no-repeat bottom right; background-size: contain; }
.illuminated.u { background: transparent url(../images/illuminated-U.png) no-repeat bottom right; background-size: contain; }
.illuminated.t { margin-right: -0.3em; width: 1.2em; background: transparent url(../images/illuminated-T.png) no-repeat bottom right; background-size: contain; }
.illuminated.w { margin-right: -0.2em; width: 2em; background: transparent url(../images/illuminated-W.png) no-repeat bottom right; background-size: contain; }
/* diamonds and overlays */
.diamond { position: absolute; z-index: 1000; cursor: pointer; border: 0; padding: 0; background-color: transparent; }
.ruby { max-width: 100%; max-height: 100%; }
.cut { width: 52%; margin-left: -26%; margin-top: -38%; }
.popup { display: none; position: fixed; z-index: 2001; }
#popup .scroll { position: relative; max-width: 73vh; top: 50%; margin: 0 auto; }
#popup .content { overflow: visible; }
#hello { position: relative; }
#overlay { display: none; position: fixed; background-color: rgba(0,0,0,0.7); cursor: pointer; z-index: 2000; }
#popup { font-size: 23px; cursor: pointer; }
#popup .content { height: auto; }
/* LANDING SCENE */
#landingscene { z-index: 1200; }
#scrollribbon { display: none; }
#thestory { max-width: 62.69vh; height: 159.5vw; z-index: 300; }
#ofourfreedom { width: 56%; height: 56%; margin-left: -28%; margin-top: -5%; }
#parchment { display: block; width: 100%; height: auto; }
#loader { left: 43%; top: 83%; width: 14%; }
#key { width: 25vw; top: 20%; left: 5%; }
#key .ribbon { top: 3%; }
#key .diamond { z-index: 204; top: 0%; left: 35%; width: 13%; }
.arrowdown { width: 0; height: 0; margin: 0 auto; border: 10px solid transparent; border-top-color: #fff; position: relative; z-index: 10; }
.roller { height: 10%; width: 130%; left: -15%; }
.roller.tl { top: -8%; }
.roller.bl { bottom: -8%; }
.roller .ribbon { top: 82%; }
.roller .ribbon .fork { border-bottom: 27px outset rgba(10,68,108,0); border-left: 45px solid #0a446c; border-right: 45px solid #0a446c; }
.roller .ribbon p { font-family: djb_this_is_meregular; text-transform: uppercase; color: #fff; padding: 10px 0 0 0; font-size: 1.5vw; position: relative; z-index: 10; }
.shine { width: 100%; height: 18%; }
.shine.tl { top: 9%; }
.shine.bl { bottom: 9%; }
.wood { background-color: #0a446c; width: 100%; height: 50%; top: 25%; }
.wood .shine { background-color: #6c8fa7; margin-left: 4%; width: 92%; }
.paperroll { width: 86%; height: 64%; top: 18%; left: 7%; background-color: #f9f8e9; }
.paperroll .shine { background-color: #fcfcf2; }
.paperroll .shine .bl { bottom: 0; }
.paperroll .shine .tl { top: 0; }
.knob { height: 100%; width: 4%; overflow: hidden; background-color: #0a446c;  }
.knob.tl { border-top-left-radius: 20px; border-bottom-left-radius: 20px; }
.knob.tr { border-top-right-radius: 20px; border-bottom-right-radius: 20px; }
/* SCENE 01 */
#scene01 { background-color: #4295df; overflow: visible; z-index: 1100; }
.scenery { width: 45%; margin-top: -7%; z-index: 201; }
.scenery.buildings { margin-left: 5%; } 
.scenery.castles { margin-left: -50%; } 
#megafork { border-bottom: 100vh outset transparent; border-left: 50vw solid #4295df; border-right: 50vw solid #4295df; margin-left: -50vw; top: 100%; }
/* SCENE 02.1 */
#scene02_1 { z-index: 90; }
#totalpower { position: relative; width: auto; width: 54%; top: 4%; }
#toomanytaxes { width: 25%; margin-left: -60%; margin-top: -15%; opacity: 0.99; }
#stocksman { width: 17.8%; margin-left: 30.8%; margin-top: -10%; }
#heavytaxes { width: 18.3%; margin-left: -40%; margin-top: -5%; }
#stockswoman { width: 21.9%; margin-left: -7.6%; margin-top: 14.7%; }
#unfairtrial { width: 20.9%; margin-left:-62%; margin-top: 10%; }
#norights { width: 29.3%; margin-left: -38%; margin-bottom: -15%; }
#nopower { width: 27.5%; margin-left: 13.5%; margin-bottom: -10%; }
#cantevenprotest { width: 19.3%; margin-left: 21.7%; margin-top: 6%; }
/* SCENE 02.2 - 3 */
#scene02_2 { z-index: 80; }
#thecrown { top: 14%; }
#thecrown .tl { width: 100%; height: 100%; }
#evilkingjohn { width: 60%; left: 3%; top: 10%; z-index: 90; }
.emotionalking { width: 100%; display: block; }
#hesthevillan { width: 19.8%; left: 84%; bottom: 31%; }
#runnymede { width: 20.4%; bottom: 47%; margin-left: -10%; z-index: 80; }
#baron1 { width: 26.1%; margin-left: 6%; bottom: 45%; z-index: 110; }
#baron2 { width: 22.2%; margin-left: 19.5%; bottom: 45%; z-index: 120; }
#baron3 { width: 29.5%; margin-left: 26.4%; margin-bottom: -10px; bottom: 45%; z-index: 130; }
/* SCENE 02.4 */
#magnacartascroll { height: 72vh; z-index: 1000; }
#magnacartascroll .diamond { position: relative; vertical-align: middle;  }
#magnacartascroll .content { height: auto; }
#magnacartascroll ol { color: #c0095c; }
#magnacartascroll ol span { color: #383B5B; }
#magnacarta { width: 500px; max-width: 100%; margin-bottom: 1%; }
#signature { max-height: 10vh; }
#termsandconditions p { display: inline-block; }
#magnacartascroll .ribbon { width: 6vw; height: 8vw; margin: 0; }
#magnacartascroll .ribbon .fork { height: 7vw; border-bottom-width: 1.3vw; border-left-width: 3vw; border-right-width: 3vw; }
#magnacartascroll .ribbon .diamond { width: 56%; top: 4%; }
#ribbon1 { left: 9%; }
#ribbon2 { left: 32%; }
#ribbon3 { left: 56%; }
#ribbon4 { left: 80%; }
/* SCENE 03.1 */
#scene03_1 { z-index: 220; }
#backgroundmoney { width: 90%; margin-left: -45%; margin-top: -10%; z-index: 0; }
#prisioners1, #prisioners2 { width: 24vw; }
#prisioners2 { margin-right: -7vw; }
#notagain { width: 19vw; top: 1vh; right: 5vw; }
#kingcharlesI { width: 22.2%; margin-top: 1%; margin-left: -11%; }
#alsoevilkindcharles { max-width: 20%; max-height: 47%; z-index: 100; margin-left: -10%; margin-top: -24.9%; }
#siredwardcoke { width: 40%; height: 53%; z-index: 100; margin-top: -32.9%; }
#coke { width: 92%; }
#whatabout { width: 54%; right: 46%; bottom: 61%; }
#siredwardcoke .diamond { left: 55%; top: 56%; width: 16%; }
.pilesomoney { z-index: 200; }
#moneypiles1 { height: 100%; top: 20.9%; left: -1%; }
#moneypiles1_5 { width: 29%;  top: 30.9%; left: -14%; }
#moneypiles2 { top: 58.5%; width: 27%; left: 1%; }
#moneypiles3 { top: 70.5%; width: 26%; left: 15%; }
#moneypiles3_5 { top: 70.5%; width: 26%; left: 6%; }
#moneypiles4 { top: 62.8%; width: 24%; right: -5%; }
#moneypiles5 { top: 31.8%; width: 17.5%; right: -6%; }
#moneypiles6 { top: 80.8%; width: 36.5%; left: 26%; }
#moneypiles7 { top: 90.9%; width: 30.5%; right: 15%; }
#moneypiles7_5 { top: 90.9%; width: 30.5%; right: 10%; }
#moneypiles8 { top: 82.9%; width: 20.5%; right: 6%; }
#moneypiles9 { top: 85.9%; width: 42.5%; right: 16%; }
/* SCENE 03.3 */
#scene03_3 { background-color: #f7d873; z-index: 195; }
#soontobeexking { top: auto; width: 42%; bottom: 40%;  margin-left: -40%; }
#chopper { top: auto; width: 37%; height: 0; padding-top: 37%; bottom: 40%; margin-left: 1%; }
#chopperbody { width: 100%; display: block; z-index: 10; }
#chopperarm { width: 100%; display: block; z-index: 9; top: -36%; }
#drips { top: 100%; width: 100%; }
/* SCENE 04.1 - 4.2 */
#scene04_1 { z-index: 180; } 
#scene04_1 .ratio { z-index: 210; }
#theageofenlightenment { width: 62%; top: 16%; margin-left: -31%; z-index: 100; }
#theageofenlightenment img.center { min-width: 100%; position: relative; z-index: 10; }
#rays { width: 110%; margin: -30% -55%; top: 0; z-index: 9; }
#star1 { top: 20%; right: 10%; }
#star2 { width: 2%; top: 10%; left: 10%; }
#star3 { width: 3%; top: 1%; left: 55%; }
#star4 { width: 3%; top: 40%; right: 0%; }
#star5 { width: 3%; left: 30%; }
#star6 { width: 2%; top: 40%; left: 7%; }
#clouds1 { background-color: #67adc9; }
.clouds1 { width: 60%; top: auto; bottom: 99%; }
.clouds1.flipH { margin-left: -60%; }
#clouds2 { background-color: #a2d4de; z-index: 190; top: 32%; }
.clouds2 { width: 70%; top: auto; bottom: 99%; }
.clouds2.flipH { margin-left: -70%; }
#clouds3 { background-color: #cce7ed; top: 99%; z-index: 195; }
.clouds3 { width: 80%; top: auto; bottom: 99%; }
.clouds3.flipH { margin-left: -80%; }
.clouds4 { width: 70%; bottom: -1%; }
.clouds4.flipH { margin-left: -70%; }
#johnlocke { width: 48%; height: 37%; margin-top: 21%; z-index: 210; }
#johnlocke img { max-width: 100%; max-height: 100%; }
#johnlocke .diamond { left: 70%; width: 9%; }
.paraphernalia { width: 8%; margin-top: -20%; z-index: 200; }
#book { margin-left: -30%; margin-top: -18%; }
#globe { margin-left: -22%; margin-top: -5%;  }
#telescope { margin-left: 20%; margin-top: -19%; width: 10%; }
#clouds { height: 41%; width: 200%; margin-left: -100%; top: 0; }
#smallcastles { width: 400%; margin-left: -200%; top: 41%; height: 35%; background: #fff url(../images/scene_04.3-smallcastles.png) center bottom repeat-x; }
#smallcastles .mb { width: 25%; margin-left: -12.5%; }
#theseas { top: 75%; height: 125%; width: 400%; margin-left: -200%; background-color: #e17055; }
/* SCENE 04.3 - 4.5 */
#scene04_3 { background-color: #cce7ed; z-index: 190; height: 100vh; width: 100vw; } 
#englishparliment { width: 35%; margin-left: -17.5%; top: 5%; }
#englishbillofrights { width: 17.9%; left: 1%; top: 10%; }
#englishbillofrights .diamond { width: 22%; margin-left: -11%; margin-bottom: 11%; }
#habeascorpus { width: 17.9%; right: 1%; left: auto; top: 10%; }
#habeascorpus .diamond { width: 22%; margin-left: -11%; margin-bottom: 11%; }
#bubbleallinfavour { width: 16%; top: 45%; margin-left: -6%; }
.bubbleaye { width: 7%; left: 20%; top: 40%; }
.bubbleaye.again { top: 55%; left: 80%; }
.bubblehearhear { width: 11%; left: 4%; }
.bubblehearhear.again { left: 70%; top: 46%; }
#scene04_4 {z-index: 190;}
/* SCENE 04.6 */
#scene04_6 { background: #e17055 url(../images/scene_04.6-waves.png) repeat; z-index: 220; }
#map { width: 276%; max-width: none; margin-left: -88%; margin-top: -10%; }
#boat { width: 10%; }
#boat .bl { left: 90%; bottom: 80%; width: 120%; }
#scene04_6 .diamond { top: 30%; left: 80%; width: 8%; }
/* SCENE 05.1 - 5.3 */
#looneytunes { background-color: #f7d873; z-index: 1001; overflow: hidden; border-radius: 100vw; width: 100vw; height: 0; padding-bottom: 100%; }
#scene05_1 { z-index: 230; }
#americanrevoultion { width: 30%; margin-left: -15%; top: 4%; }
#georges { width: 42%; height: 38%; margin-top: 21%; }
#george1 { max-width: 62%; max-height: 62%; z-index: 10; }
#george2 { max-width: 62%; max-height: 62%; left: 20%; }
#whichgeorge { width: 150%; max-width: none; top: 50%; left: -31%; }
#bubbleonegeorge { left: 54%; bottom: 50%; }
#georgeshadow { width: 47%; margin-bottom: -3%; left: 27%; } 
#declaration { width: 50%; margin-left: -25%; top: 6%; }
#wehaverights { width: 82%; }
.americanstar.tl { left: 15%; }
.americanstar.tr { right: 15%; }
#americanstar1 { top: 5%; width: 4%; left: 15%; }
#americanstar2 { top: 5%; width: 4%; right: 15%; }
#americanstar3 { top: 13%; width: 11%; left: 8%; }
#americanstar4 { top: 12%; width: 13%; right: 8%; }
#americanstar5 { top: 34%; width: 4%; left: 20%; }
#americanstar6 { top: 34%; width: 4%; right: 20%; }
#americanstar7 { top: 48%; width: 6%; }
#americanstar8 { top: 48%; width: 6%; }
#americanstar9 { top: 21%; width: 12%; left: 2%; }
#americanstar10 { top: 17%; width: 5%; right: 6%; }
#americanstar11 { top: 30%; width: 11%; right: 2%; }
#americanstar12 { top: 76%; width: 5%; left: 2%; }
#americanstar13 { top: 100%; width: 5%; right: 3%; }
#americanstar14 { top: 97%; width: 8%; left: 0%;}
/* SCENE 05.4 */
#scene05_4 { z-index: 200; }
#scene05_4 .diamond { width: 4%; }
#scene05_4 .building { bottom: 39%; width: 40%;  }
#scene05_4 .building.mb { bottom: 37%; margin-left: -20%;}
#scene05_4 .building.bl { left: 0%; }
#scene05_4 .building.br { right: 0%; }
#americanclouds { bottom: 46%; width: 100%; position: absolute; left: 0; right: 0;}
#americanground { background-color: #f7d873; height: 47%; width: 100%; }
#congress { bottom: 65%; left: 18%; }
#courts { bottom: 65%; left: 78%; }
#government { bottom: 69%; left: 48%; }
/* SCENE 6.1 - 6.2 */
#scene06_1 { background: #f7d873 url(../images/Scene_06.1-wavesyellow.png) repeat;  z-index: 90; }
#oz { width: 50%; margin-left: -25%; margin-top: -39%; z-index: 1; } 
#meanwhile { width: 41%; margin-left: -20.5%; margin-top: -22.9%; z-index: 100; }
.boat { z-index: 10; width: 6.8%; }
#boat1 { margin-top: -32%; }
#boat2 { margin-top: -7%; }
#boat3 { margin-top: -18%; }
#boat4 { margin-top: -8%; }
.house { width: 3.6%; z-index: 10; }
#house1 { left: 67.8%; bottom: 79%; }
#house2 { left: 60.7%; bottom: 63%; }
#house3 { left: 67.8%; bottom: 65%; }
#house4 { left: 62.8%; bottom: 73%; }
#house5 { left: 63.6%; bottom: 39%; }
.question { width: 6.4%; z-index: 20; }
#question1 { left: 67%; bottom: 83%; }
#question2 { left: 57.7%; bottom: 67%; }
#question3 { left: 42%; bottom: 67%; }
.exclaimation { width: 8.2%; z-index: 20; }
#exclaimation1 { right: 58%; bottom: 86%; }
#exclaimation2 { width: 10.2%; bottom: 80%; left: 59%; }
#exclaimation3 { right: 41%; bottom: 57%; }
#greenwater { height: 68px; background: transparent url(../images/scene_06.2-wavesgreen.gif) repeat-x center bottom; }
/* SCENE 6.3 */
#scene06_3 { background-color: #6d7d46; }
#scene06_3 .diamond { width: 4%; margin: 5%; }
.shield { z-index: 200; }
.peeps { z-index: 10; }
#peep1 { width: 15%; }
#peep2 { width: 17%; }
#peep3 { width: 16%; }
#peep4 { width: 16.4%; }
#peep5 { width: 18%; }
#peep6 { width: 15%; }
#shield { width: 28%; margin-top: -39%; margin-left: -14%; z-index: 190; }
#rays2 { z-index: 180; width: 64%; margin-left: -32%; margin-top: -40%; }
#year { width: 19%; margin-left: -9.5%; margin-top: 3%; z-index: 220; }
#federation { width: 60%; margin-left: -30%; margin-top: -17%; z-index: 220; }
#roo { width: 39%; margin-top: -41%; z-index: 200; }
#emu { width: 19%; margin-top: -38%; z-index: 200; }
#mgscroll { width: 15.6%; margin-left: 14.6%; z-index: 260; }
#scene06_5 .ground { opacity: 0.2; }
#people { width: 90%; margin-left: -45%; margin-top: -25%; }
#scene06_5 .diamond { width: 4%; margin-top: -6%; }
/* SCENE 7 */
#scene07_1 { background-image: url(../images/scene_07.1-bgplanes1.png); background-size: 100%; }
#scene07_1mask { background-image: url(../images/scene_07.1-bgplanes2.png); background-size: 100%; }
.mask { overflow: hidden; }
#wwi, #wwii { height: 45%; width: 70%; top: 10%; left: 15%; }
#wwi img, #wwii img { max-width: 100%; max-height: 100%; }
#wwi .diamond { margin-left: -4%; margin-top: -19%; width: 10%; }
.plane { width: 70vw; left: 15vw; z-index: 900; margin-top: -8%; }
.planeii { margin-top: -19%; }
#scene07_3, #scene07_4 { background-color: #383a3e; }
#scene07_3 .diamond { width: 4%; margin-left: -2%; top: 5%; }
#mushroom1 { width: 26%; bottom: 63%; }
#mushroom2 { width: 22%; bottom: 37%; }
#scene07_2 { background-image: url(../images/scene_07.2-bgplanes1.png); background-size: 100%;  }
#scene07_2mask { background-image: url(../images/scene_07.2-bgplanes2.png); background-size: 100%; background-color: #6e757d; }
#scene07_3 .ground { opacity: 0.4; }
#prisioners { width: 90%; height: 45%; top: 16%; left: 5%; }
#prisioners img { max-width: 100%; max-height: 100%; }
#ground { background-color: #b3c9cd; width: 300vw; left: -100vw; height: 300vw; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; top: 33%; }
#graveyardclouds { margin-left: -10%; max-width: none; width: 120%; top: 2%; }
#graveyard { width: 90vw; height: 33vh; margin-left: -45vw; }
#grave1 { width: 3%; margin-top: -3%; left: 50%; transform: rotate(-4deg); }
#grave2 { width: 3%; margin-top: -3%; left: 60%; transform: rotate(-5deg); }
#grave3 { width: 3%; margin-top: 2%; left: 15%; transform: rotate(5deg); }
#grave4 { width: 4%; margin-top: -2.5%; left: 30%; transform: rotate(5deg); }
#grave5 { width: 5%; margin-top: -2%; left: 35%; transform: rotate(-4deg); }
#grave6 { width: 6%; margin-top: -3%; left: 85%; transform: rotate(-4deg); }
#grave7 { width: 6%; margin-top: 6%; left: 7%; transform: rotate(-4deg); }
#grave8 { width: 6%; margin-top: 2%; left: 18%; transform: rotate(-4deg); }
#grave9 { width: 6%; margin-top: 0%; left: 55%; transform: rotate(0deg); }
#grave10 { width: 9%; margin-top: 3%; left: 44%; transform: rotate(0deg); }
#grave11 { width: 8%; margin-top: ; left: 90%; transform: rotate(5deg); }
#grave12 { width: 10%; margin-bottom: -2%; left: 70%; transform: rotate(5deg); }
#grave13 { width: 12%; margin-bottom: -6%; left: 20%; transform: rotate(-5deg); }
#wreath { width: 96vw; left: 2vw; }
/* SCENE 8.1 UN */
#scene08_1 { background-color: #b3cacd; }
#floor { width: 100%; height: 50%; background-color: #88bbbd; }
#un { width: 90%; z-index: 200; margin-top: -3%; }
.arm { width: 6%; top: 38.5%; z-index: 100; }
#arm1 { left: 18%; }
#arm2 { left: 21%; }
#arm3 { left: 26.5%; }
#arm4 { left: 29%; }
#arm5 { left: 34%; }
#arm6 { left: 37%; }
#arm7 { left: 42%; }
#arm8 { left: 44.5%; }
#arm9 { left: 49.5%; }
#arm10 { left: 52%; }
#arm11 { left: 57%; }
#arm12 { left: 60%; }
#arm13 { left: 65%; }
#arm14 { left: 68%; }
#arm15 { left: 73%; }
#arm16 { left: 76%; }
#unglobe { width: 16vw; left: 42vw; }
/* SCENE 8.2 */
#docevatt { width: 36%; top: 17%; }
#docevatt .diamond { width: 15%; top: 19%; left: 88%; }
#williamroy { width: 36%; top: 17%; }
#williamroy .diamond { width: 11%; top: 35%; right: 78%;  }
/* SCENE 8.3 */
#scene08_3 .diamond { width: 6%; top: 39%; right: 26%; }
#humanrightsforall { width: 65%; top: 10%; }
#eleanor { width: 30%; top: 14%; }
#eleanornametag { width: 30%; top: 54%; }
#hrglobe { width: 20%; top: 2%; }
#eleanorbubble { width: 20%; top: 7%; right: 9%;}
/* SCENES 8.4 - 8.7 */
#scene08_4 { background-color: #e17055; }
#scene08_5 { background-color: #fda863; }
#scene08_6 { background-color: #88bbbd; }
#scene08_7 { background-color: #4296df; }
#scene08_8 { background-color: #e17055; }
#scene08_4 img.tl, #scene08_5 img.tl, #scene08_6 img.tl, #scene08_7 img.tl { width: 66%; left: 17%; top: 5%;  }
#scene08_4mask { z-index: 500; height: 0vh; }
#scene08_5mask { z-index: 600; height: 0vh; }
#scene08_6mask { z-index: 700; height: 0vh; }
#scene08_7mask { z-index: 800; height: 0vh; }
/* SCENE 8.8 */
#scene08_8mask { z-index: 900; height: 0vh; }
#equalworkpay { width: 19%; left: 5%; top: 7.3%; }
#helpthedisabled { width: 17.8%; top: 2%; margin-left: -8.9%;  }
#closethegap { width: 18%; top: 5%; right: 13.5%; }
#noglassceiling { width: 15%; margin-left: 28.9%; margin-top: -21%; }
#equalloverights { width: 50%; margin-left: -25%; margin-top: -19%; }
/* SCENE 8.9 */
.whatcanwedo { width: 48%; left: 26%; top: 5%; }
/* #whatcanwedosvg { width: 64%; height: auto; left: 18%; top: 5.5%; } */
#whatcanwedosvg { left: 18%; top: 5.5%; height: 0;  }
.st2{fill:none;stroke:#F7D873;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:6000;stroke-dashoffset:0}
.st5{fill:none;stroke:#fda863;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:6000;stroke-dashoffset:0}
/* SCENE 9.1 */
#scene09_1 { background-color: #f3dbbc; }
#thought { max-width: none; max-height: 20%; }
#kidsthesedays { width: 42%; left: 29%; top: 15%; }
/* SCENE 9.2 - It's been real people. */
#lightatendoftunnel { margin-top: 35vh; }
#links { bottom: 90px; }
#links .paper { width: 860px; position: relative;  }
#scene09_2 .one_quarter { position: relative; }
#scene09_2 .diamond { width: 20%; margin-top: -38%; margin-left: 6%; }
#scene09_2 #australia { margin-left: 21%; }
#scene09_2 #you {  margin-left: 21%; }
img.improve { max-width: 80%; }
img.whatnext { width: 20%; }
/* Thin */
@media(max-width: 700px) {
	.roller .ribbon { width: 8vw; margin-left: -4vw; }
	.roller .ribbon .fork { height: 15vh; border-bottom: 2vw outset rgba(10,68,108,0); border-left: 4vw solid #0a446c; border-right: 4vw solid #0a446c; }
	#footer p {font-size: 0.8em; text-align: center; width: 100%;}
		#footer .left {margin: 0;}
		#footer p a {display: inline-block;}
	#footer .logo-link {display: none;}
}
/* Portrait */
@media screen and (orientation: portrait) {
	.timeline { height: 8vh; width: 100vw; top: 0; right: 0; margin: 0; }
	.date { display: none; }
	.date.current { width: 100%; height: 8vh; display: block; margin: 0; padding: 0; }
	.timeline h2 { font-size: 4vh !important; text-align: center; margin-top: 1%; }
	.now { display: none !important; }
	#ofourfreedom { margin-top: 10%; }
	#key { width: 22vh; height: 22vh; top: 60px; left: 5%; }
	#megafork { border-bottom: 100vh outset transparent; border-left: 50vw solid #4295df; border-right: 50vw solid #4295df; margin-left: -50vw; top: 100%; }
	.roller .ribbon { width: 16vw; margin-left: -8vw; }
	.roller .ribbon .fork { height: 10vh; border-bottom: 4vw outset rgba(10,68,108,0); border-left: 8vw solid #0a446c; border-right: 8vw solid #0a446c; }
	.roller .ribbon p { font-size: 2.5vh; }
	.bottomscroll, #magnacartascroll { width: 80vw; margin-left: -37vw; }
	#magnacartascroll .ribbon { width: 12vw; }
	#magnacartascroll .ribbon .fork { height: 12vw; border-left-width: 6vw; border-right-width: 6vw;  border-bottom-width: 3vw; }
	#prisioners1, #prisioners2 { margin-top: 6vh; }
	#notagain { margin-top: 8vh; }
	#runnymede { bottom: 56%; width: 11.4%; margin: 0; }
	.paraphernalia { width: 11%; }
	#telescope { width: 17%; }
	#graveyardclouds { top: 15%; }
	p, ol, li, .bottomscroll .content p, h3 { font-size: 2vh; }
}
/* Short */
@media(max-height: 450px) {
	p, ol, li, .bottomscroll .content p, h3 { font-size: 1.5vh; }
}
/* OLD BROWSERS */
#outdated { display: none; }
.no-cssvhunit #outdated { display: block; }
.no-cssvhunit .novhhide { display: none; }
.no-cssvhunit #landingscene,
.no-cssvhunit #scene01 { display: block; width: 100%; height: 100%; }
.no-cssvhunit #thestory { width: 300px; bottom: auto; top: 150px; }
.no-cssvhunit header#header { display: block; height: 46px; z-index: 10000; }
.no-svg svg { display: none; }