/* 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 { min-height: 100%; height: 100%; width: 100%; font-family: historical_felltyperoman, Times, serif; line-height: 1.2; text-align: center; font-size: 20px; color: #383B5B; }
/* STRUCTURE */
header#header { background-color: #fff; height: 46px; z-index: 301; }
.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: 1300px; max-width: 96%; position: relative; }
/* TEXT */
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
h3 { font-size: 1.3em; }
ol, ul, p { padding: 0 0 0.5em 1em; color: #383B5B; }
strong { font-size: 1.1em; }
/* TIMELINE */
.timeline { font-family: djb_this_is_meregular; text-transform: uppercase; width: 44px; height: 100vh; background-color: #f8f8eb; color: #383B5B; z-index: 1100; }
.date { height: 22%; }
.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; line-height: 1.2; 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: 130px outset transparent; }
/* 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; }
.filagree { right: 0; margin: auto; }
.filagree.tl { top: -70px; }
.filagree.bl { bottom: -60px; }
/* AT THE BOTTOM */
.bottomscroll { z-index: 1100; top: 65vh; }
.bottomscroll .content { width: 90%; height: 100%; overflow: hidden; }
.bottomscroll .section { height: 35vh; }
.bottomscroll .content p { font-size: 27px; position: relative; }
/* .bottomscroll .content p:first-letter { font-size: 150%; } */
.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 0 0; background-size: contain; }
.illuminated.b { background: transparent url(images/illuminated-B.png) no-repeat 0 0; background-size: contain; }
.illuminated.c { background: transparent url(images/illuminated-C.png) no-repeat 0 0; background-size: contain; }
.illuminated.d { background: transparent url(images/illuminated-D.png) no-repeat 0 0; background-size: contain; }
.illuminated.e { background: transparent url(images/illuminated-E.png) no-repeat 0 0; background-size: contain; }
.illuminated.h { background: transparent url(images/illuminated-H.png) no-repeat 0 0; background-size: contain; }
.illuminated.i { background: transparent url(images/illuminated-I.png) no-repeat 0 0; background-size: contain; }
.illuminated.k { background: transparent url(images/illuminated-K.png) no-repeat 0 0; background-size: contain; }
.illuminated.m { width: 2em; background: transparent url(images/illuminated-M.png) no-repeat 0 0; background-size: contain; }
.illuminated.n { background: transparent url(images/illuminated-N.png) no-repeat 0 0; background-size: contain; }
.illuminated.o { background: transparent url(images/illuminated-O.png) no-repeat 0 0; background-size: contain; }
.illuminated.p { background: transparent url(images/illuminated-P.png) no-repeat 0 0; background-size: contain; }
.illuminated.s { background: transparent url(images/illuminated-S.png) no-repeat 0 0; background-size: contain; }
.illuminated.u { background: transparent url(images/illuminated-U.png) no-repeat 0 0; background-size: contain; }
.illuminated.t { background: transparent url(images/illuminated-T.png) no-repeat 0 0; background-size: contain; }
.illuminated.w { width: 2em; background: transparent url(images/illuminated-W.png) no-repeat 0 0; 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; }
#popup .content { height: auto; }
/* LANDING SCENE */
#landingscene { z-index: 300; }
#scrollribbon { display: none; }
#thestory { max-width: 62.69vh; height: 159.50vw; 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%; }
.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: 25px; position: relative; z-index: 10; }
.arrowdown { width: 0; height: 0; margin: 0 auto; border: 10px solid transparent; border-top-color: #fff; 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: 200; }
#megafork { border-bottom: 100vh outset transparent;  border-left: 50vw solid #4295df; border-right: 50vw solid #4295df; margin-left: -50vw; top: 100%; }
.scenery { width: 45%; margin-top: -7%; z-index: 201; }
.scenery.buildings { margin-left: 5%; } 
.scenery.castles { margin-left: -50%; } 
/* LANDING PAGE */
body#landingpage { background-color: #4296df; font-family: 'historical_felltyperoman', serif; font-size: 1.1em; line-height: 1.6; }
a,
h1, h2, h3, h4, h5, h6 {color: #edb818;}
a {text-decoration: none;}
a:hover, a:focus {text-decoration: underline;}

#header, #footer { font-family: 'Arial', sans-serif; font-size: 0.7em; z-index: 5000; background-color: #fff; }
#header .ico-arrow-down {display: inline-block; color: #000;}
	#header .left,
	#footer .left {margin: 10px 0; padding: 0;}

#footer {padding: 10px; height: auto;}
.paper {margin: auto;}

#tupperware {overflow: hidden;}

.link-shadow,
.link-shadow-float {background: url('../images/global-shadow.png') 50% 100% no-repeat; background-size: 70% 20px; padding-bottom: 5px;}
.link-shadow-float {padding-bottom: 15%;}

.ico-arrow-down {background: url('../images/ico-arrow-down.png') 0 50% no-repeat; padding-left: 20px;}

/* Homepage */
#main-logo-link {position: absolute; bottom: 6%; left: 22%; width: 56%;}
#homepage-ribbon-links {position: absolute; top: 43%; left: -6%; width: 112%; height: 18%;}
	#homepage-ribbon-links a {width: 50%;}

#thestory {max-width: 90vh; height: 111vw;}
#ofourfreedom {width: 44%; height: 63%; margin-left: -22%;}
#btn-teachersresources {margin-left: -14%; width: 28%; top: 82%;}

/* Background Scene */
.background-scene {max-width: 1400px;}
.background-scene img,
.background-scene .img {position: absolute; left: 0; bottom: 0;}

	#cloud-ground {background-color: #cce7ed; bottom: 32%; height: 11%; width: 100%;}
	#cloud-1 {left: -30%; bottom: 40%;}
	#cloud-2 {left: -200px; margin-left: -12%; bottom: 40%;}
	#cloud-3 {left: 0; bottom: 42%;}
	#cloud-1-r {left: auto; right: -30%; bottom: 40%;}
	#cloud-2-r {left: auto; right: -200px; margin-right: -12%; bottom: 40%;}
	#cloud-3-r {left: auto; right: 0; bottom: 42%;}

	#bg-ground {background-color: #bac586; bottom: 0; width: 100%; height: 32%;}
	#building-left {bottom: 32%; left: -300px; margin-bottom: -10px; margin-right: -50%; max-width: 100%;}
	#building-right {bottom: 32%; left: auto; right: -300px; margin-bottom: -10px; margin-left: -50%; max-width: 100%;}

	#footsoldiers {left: 22%; bottom: 30%; max-width: 10%;}
	#kingjohn {bottom: 30%; left: auto; right: 14%; max-width: 22%;}
	#knight {left: 5%; bottom: 24%; max-width: 14%;}
	#kinghenry {bottom: 23%; left: auto; right: 0%; max-width: 23%;}
	#lawgirl {left: 17%; bottom: 17%; max-width: 12%;}
	#justicegirl {left: auto; right: 18%; bottom: 17%; max-width: 12%;}
	#serfs {left: 0; bottom: 11%; max-width: 27%;}
	#aboriginals {left: auto; right: 0; bottom: 11%; max-width: 26%;}
	#suffragettes {left: 13%; bottom: 50px; max-width: 30%;}
	#edcoke {left: auto; right: 20%; bottom: 50px; max-width: 21%;}


/* Teachers resources */
.page-teacher {background-color: #88bbbd;}
	.page-teacher h2 {font-size: 1.4em;}
	.page-teacher .body {padding: 0 10px;}
	.page-teacher a,
	.page-teacher h1, .page-teacher h2, .page-teacher h3, .page-teacher h4 {color: #c5095c; padding: .5em 0; }
	.page-teacher ul { width: 90%; padding: 0 0 1em 0; margin: 0 auto; }
	.page-teacher p, 
	.page-teacher li { line-height: 1.6; }

.replace-teacherresources {/*background: url('../images/heading-teacherresources.png') 0 0 no-repeat; */display: inline-block; position: relative; /*width: 626px; height: 248px; text-indent: -99999px;*/}
	.replace-teacherresources .replace-text {width: 100%; max-width: 626px;}
	.replace-teacherresources .deco-peace {position: absolute; right: 3%; top: -11%; width: 20%;}

	.page-teacher .replace-teacherresources {margin: 50px auto 30px;}
	.page-teacher .scroll-container {padding: 0 40px;}
		.page-teacher .scroll {position: relative; max-width: 1140px; margin: 0 auto; padding: 30px 10px; width: auto; max-width: 790px; height: auto;}
		.page-teacher .scroll .content {margin-bottom: 20px; width: auto; height: auto;}

.guide-row {display: block; float: none; margin: auto; max-width: 440px;}
	.guide-row .one_half {float: left;}
.guide-row .list-download {margin: 0 10px;}
	.list-download {padding-left: 0; text-align: left;}
		.list-download li a {color: #383a5b;}
		.list-download li a,
		.ico-download {background: url('../images/ico-download.png') 0 0 no-repeat; padding-left: 42px;}

.bottom-nav {margin: 40px auto 60px; width: auto; max-width: 790px;}
	.bottom-nav .left-edge {float: left; margin-top: 22px; width: 30%;}
	.bottom-nav .right-edge {float: right; margin-top: 20px; width: 30%;}
	.bottom-nav .middle {display: inline-block; float: none; width: 30%;}

/* Video */
.page-video {background-color: #0f456a;}
.page-video h1 {margin: 20px auto; max-width: 390px; font-size: 1.4em;}
.video-container h2 { font-size: 1.3em; text-align: left; padding: 0 0 0.5em 0.5em; }
.video-container h3 { font-size: 1.2em; text-align: left; margin: 0 0 0.5em 0.5em;}
.video-container h4 { font-size: 1.1em; text-align: left; margin: 0 0 0.5em 0.5em;}
.page-video h2,
.page-video a {color: #edb818;}
.video-container p { color: #fff; font-size: 0.8em; font-weight: normal; text-align: left; margin-bottom: 1em; }
.video-container li { color: #fff; font-size: 0.8em; font-weight: normal; text-align: left; list-style-type: disc; }
.page-video .body {max-width: 1400px; margin: 0 auto; padding: 0 10px;}
.video-container {
	background: url('../images/video-border-corner-tl.png') 0 0 no-repeat;
	background: url('../images/video-border-corner-tl.png') 0 0 no-repeat,
				url('../images/video-border-corner-tr.png') 100% 0 no-repeat,
				url('../images/video-border-corner-br.png') 100% 100% no-repeat,
				url('../images/video-border-corner-bl.png') 0 100% no-repeat;
	padding: 45px; position: relative;}
	.video-container iframe,
	.video-container video,
	.video-container object {width: 100%; height: 500px;}
	.video-container .video-links {position: absolute; bottom: 0; left: 0; width: 100%;}
		.video-container .video-links a {text-transform: uppercase;margin: 0 10px 0 0; background-size: contain;}
		.ico-description {background: url('../images/ico-description.png') 100% 0 no-repeat; padding-right: 35px; }
		.ico-close {background: url('../images/ico-close.png') 100% 0 no-repeat; padding-right: 35px;}
		.ico-play {background: url('../images/ico-play.png') 100% 50% no-repeat; padding-right: 65px;}
.page-video .bottom-nav {margin: 20px auto;}

#tupperware {padding-bottom: 60px; min-height: 100%; height: auto; position: relative;}
	#footer {position: absolute; bottom: 0; left: 0;}

@media screen and (orientation: portrait) {
	#ofourfreedom {margin-top: 0;}
	#btn-teachersresources {margin-top: 5%;}
}

@media(min-width: 1140px) {
	.video-container iframe,
	.video-container video,
	.video-container object {height: 720px;}
}

/* Mobile */
@media(max-width: 640px) {
	#ofourfreedom {margin-top: -5%;}

	.page-teacher .scroll-container {padding: 0;}
		.page-teacher .scroll {width: auto;}

	.guide-row .one_half {width: 100%;}
		.guide-row .list-download {text-align: center;}

	.bottom-nav .left-edge,
	.bottom-nav .right-edge,
	.bottom-nav .middle {display: block; float: none; width: auto;}
	.bottom-nav a {display: inline-block; margin-bottom: 20px; max-width: 270px;}
		.bottom-nav a img {max-width: 100%;}

	.link-shadow-float {padding-bottom: 5%;}

	#btn-teachersresources {left: 50%; margin-left: -100px; margin-top: 10px; width: 200px;}

	#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;}

		#suffragettes {left: 13%; bottom: 40px; max-width: 27%;}
		#edcoke {left: auto; right: 20%; bottom: 40px; max-width: 20%;}

	.video-container {padding: 35px;}
	.video-container iframe,
	.video-container video,
	.video-container object {height: 200px;}
	.video-container .video-links {position: static;}
}
/* OLD BROWSERS */
#outdated { display: none; }
body.no-cssvhunit #outdated { display: block; }
body.no-cssvhunit { overflow: hidden; }
body.no-svg svg { display: none; }