@import url("/?originalUrl=https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DOpen%2BSans%26display%3Dswap");

@font-face {
  font-family: 'Franklin';
  src:  url("/?originalUrl=https%3A%2F%2Flearn.bmdp.org%2Ffonts%2FFranklin%2520Gothic%2520Std%2520No.%25202%2520Roman.otf");
}

body { font-family: "Open Sans", sans-serif; }
section { width:100%; height:100%; position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); overflow: hidden; }
h1 { font-family: "Franklin"; font-size: 35px; font-weight: 600; line-height: 46px; text-align: center; color: #ffffff; text-shadow: 2px 2px #F05223; margin: 30px 0 0; }
h2 { font-size: 32px; font-weight: 600; line-height: 38px; text-align: center; color: #F05223; }
h3 { font-size: 23px; font-weight: 600; line-height: 28px; text-align: center; color: #F05223; }
p { font-size: 22px; font-weight: 500; line-height: 26px; text-align: center; color: #464646; }
iframe { border:none; overflow:hidden; width:100%; height:100%; }

a.btn_close { display:block; position:absolute; top:0; right:0; z-index:300; width:46px; height:46px; overflow:hidden; }
a.btn_close span { display:block; position:absolute; bottom:3px; left:0; width:29px; height:29px; transform:rotate(45deg); -webkit-transform:rotate(45deg); }
a.btn_close span:before, a.btn_close span:after { content:''; display:block; background:#034683; position:absolute; }
a.btn_close.white span:before, a.btn_close.white span:after { background:#FFF; }
a.btn_close span:before { width:100%; height:2px; top:50%; left:0; margin-top:-1px; }
a.btn_close span:after { width:2px; height:100%; top:0; left:50%; margin-left:-1px; }

.speech-bubble { background: url("/?originalUrl=https%3A%2F%2Flearn.bmdp.org%2Fimages%2Fui%2FSpeechBubble.svg"); background-repeat: no-repeat; background-size: 100% 100%; height: 360px; width: 500px; position: absolute; bottom: 135px; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
.speech-bubble h2 { padding: 40px 40px 5px; margin: 0; }
.speech-bubble p { padding: 5px 40px 40px; margin: 0; }
.speech-owl { display: none; position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); width: 230px; height: 230px; z-index: 1; }
.primary-button { position: absolute; top: 93%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); pointer-events: all;     background: #FE5000; color: #ffffff; text-decoration: none; padding: 15px 45px; border-radius: 10px; box-shadow: 2px 2px 0 2px #AC3600; font-size: 16px; font-weight: 600; text-align: center; z-index: 250; }
.top-right-button { position: absolute; top: 30px; right: 30px; left: unset; -webkit-transform: unset; transform: unset; }
.top-left-button { position: absolute; top: 30px; left: 30px; -webkit-transform: unset; transform: unset; }
.bottom-right-button { position: absolute; bottom: 10px; right: 10px; top: unset; left: unset; -webkit-transform: unset; transform: unset; }
.bottom-left-button { position: absolute; bottom: 10px; left: 10px; top: unset; -webkit-transform: unset; transform: unset; }
.heart-counter { display: flex; flex-wrap: wrap; box-sizing: border-box; align-items: center; justify-content: center; position: relative; top: -2.5%; }
.heart-counter .heart { width: 20px; height: 20px; background: url("/?originalUrl=https%3A%2F%2Flearn.bmdp.org%2Fimages%2Fui%2FEmptyHeart.svg"); background-size: 100% 100%; background-repeat: no-repeat; background-position-x: center; }
.heart-counter .red-heart { width: 20px; height: 20px; background: url("/?originalUrl=https%3A%2F%2Flearn.bmdp.org%2Fimages%2Fui%2FRedHeart.svg"); background-size: 100% 100%; background-repeat: no-repeat; background-position-x: center; }
.button-with-olly { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); }
.button-with-olly .primary-button { position: inherit; bottom: 0%; top: unset; }

#init-panel { width:100%; height:100%; position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); pointer-events: all; }
#init-panel div { width:100%; height:100%; background: url("/?originalUrl=https%3A%2F%2Flearn.bmdp.org%2Fimages%2Fscenes%2FSplash.jpg"); background-size: cover; background-repeat: no-repeat; background-position-x: center; }
#init-panel img { width: 185px; height: 185px; position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); }

#black-panel { width:100%; height:100%; position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); pointer-events: all; background: black; }

#main-menu { pointer-events: none; }
#main-menu > div { pointer-events: all; }
#main-menu #menu-blocker-panel { width: 100%; height: 100%; pointer-events: all; }
#main-menu #menu-panel #menu-section-panel { display: flex; flex-wrap: wrap; box-sizing: border-box; position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); width: 75%; }
#main-menu #menu-panel #menu-section-panel > div { width: 25%; box-sizing: border-box; padding: 0 5px; }
#main-menu #menu-panel #menu-section-panel > div img { width: 100%; }
#main-menu #menu-panel #menu-close-button { position: absolute; top: -20%; right: 0; width: 7%; }
#main-menu #menu-panel #menu-close-button > img { width: 100%; }
#main-menu #menu-panel #menu-section-panel #menu_row2 {width: 100%; text-align: center;}
#main-menu #menu-panel #menu-section-panel #last-section-button, #main-menu #menu-panel #menu-section-panel #last-section-button2 {display: inline-block; margin: 0 auto;}
#main-menu #menu-panel #menu-section-panel #menu_row2 img {height:7em;}
#main-menu #menu-panel #help-button img { width: 100px; }
#main-menu #nav-panel #nav-title { width: 80%; margin-left: auto; margin-right: auto; }
#main-menu #nav-panel #nav-subtitle { color: #ffffff; font-size: 30px; line-height: 36px; font-weight: 700; text-align: center; width: 100%; display: block; }
#main-menu #nav-panel #menu-section1-buttons a img { width: 200px; }
#main-menu #nav-panel #menu-section2-buttons a img { width: 200px; }
#main-menu #nav-panel #menu-section3-buttons a img { width: 200px; }
#main-menu #nav-panel #menu-section4-buttons a img { width: 200px; }
#main-menu #nav-panel #share-button { top: 17%; font-size: 16px; padding: 10px 20px; }
#main-menu #nav-panel #quiz-button { top: 25%; font-size: 16px; padding: 10px 20px; }
#main-menu #nav-panel #menu-open-button #menu-button { display: block; width: 50px; }
#main-menu #nav-panel #menu-open-button #menu-button img { width: 100%; }
#main-menu #nav-panel #menu-open-button .mute-button { display: block; width: 50px; margin: 0 auto; }
#main-menu #nav-panel #menu-open-button .mute-button img { width: 100%; }

#video-screen { position:fixed; top:0; left:0; width:100%; height:100%; z-index:2147483991; background:#000; transform:translateZ(100000px); }
#video-screen .video-player { width:100%; height:100%; position:fixed; top:0; bottom:0; left:0; z-index:200; }
#video-screen .video-player video { position:fixed; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); width:auto; height:auto; min-width:100%; min-height:100%; }

#flythrough-section {position: absolute; width: 100%; height: 100%; overflow: hidden; z-index:2147483991; background:#000; }
#flythrough-section #flythrough-video { min-width: 100%; min-height: 100%; width: auto; height: auto; position: absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); }
#flythrough-section .skip-button { top: unset; bottom: 2.5%; }
#flythrough-section span { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); font-size: 20px; font-weight: 500; text-align: center; z-index: 250; }

#preloader #preload-screen { position:fixed; top:0; left:0; width:100%; height:100%; background:none; z-index:1000; background: rgba(0,0,0,0.5); }
#preloader #preload-screen img { position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); width: 50px; }

#intro-section { /*pointer-events: none;*/ }
#intro-section #intro-panel { position:fixed; top:0; left:0; width:100%; height:100%; background:none; }
#intro-section .intro-instruction { width: 400px; margin: 50px auto; display: block; }

#help-section #help-screen-1 { position:fixed; top:0; left:0; width:100%; height:100%; background:none; }
#help-section #help-screen-2 { position:fixed; top:0; left:0; width:100%; height:100%; background:none; }
#help-section #help-screen-3 { position:fixed; top:0; left:0; width:100%; height:100%; background:none; }
#help-section #help-screen-4 { position:fixed; top:0; left:0; width:100%; height:100%; background:none; }

#help-section .help-instruction { height: 270px; margin: 20px auto; display: block; }

#tooltips-section { pointer-events: none; }
#tooltips-section #tooltips-panel { position:fixed; top:0; left:0; width:100%; height:100%; background:none; }
#tooltips-section #tooltips-panel #navi-tooltips { position: absolute; top: 35px; left: 85px; }
/*#tooltips-section #tooltips-panel #rotate-tooltips-desktop { position: absolute; bottom: 0; left: 60%; transform: translate(-50%, -50%); }
#tooltips-section #tooltips-panel #rotate-tooltips-mobile { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, -50%); width:85vw; }*/

#always-on-display-section { pointer-events: none; }
#always-on-display-section #always-on-display-panel { position:fixed; top:0; left:0; width:100%; height:100%; background:none; }
#always-on-display-section #always-on-display-panel #rotate-tooltips { position: absolute; bottom: 30px; width: 300px; left: 50%; transform: translate(-50%, -50%); }
#always-on-display-section #always-on-display-panel #on-display-menu { position: absolute; bottom: 60px; left: 50%; transform: translate(-50%, -50%); display: flex; }
#always-on-display-section #always-on-display-panel #on-display-menu a img { pointer-events: all; }
#always-on-display-section #always-on-display-panel #on-display-menu a img { width: 100px; }

#section-screen #content-wrapper { width: 450px; height: 550px; position:fixed; top:55%; left:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); }
#section-screen #content-wrapper #content-screen { width: 450px; height: 550px; position:fixed; top:55%; left:50%; transform:translateX(-50%) translateY(-50%); -webkit-transform:translateX(-50%) translateY(-50%); background: rgba(255, 255, 255, 0.9); filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); border-radius: 15px; }
#section-screen #content-wrapper #content-screen.blue-frame { border: rgba(0, 109, 187, 0.9) solid 5px; box-shadow: 0px 0px 5px rgba(0, 109, 187, 0.9), 0px 0px 10px rgba(0, 0, 0, 0.9), 0px 2px 5px #000000; }
#section-screen #content-wrapper #content-screen.red-frame { border: rgba(236, 78, 107, 0.9) solid 5px; box-shadow: 0px 0px 5px rgba(236, 78, 107, 0.9), 0px 0px 10px rgba(0, 0, 0, 0.9), 0px 2px 5px #000000; }
#section-screen #content-wrapper #content-screen.yellow-frame { border: rgba(241, 183, 6, 0.9) solid 5px; box-shadow: 0px 0px 5px rgba(241, 183, 6, 0.9), 0px 0px 10px rgba(0, 0, 0, 0.9), 0px 2px 5px #000000; }
#section-screen #content-wrapper #content-screen.green-frame { border: rgba(0, 180, 115, 0.9) solid 5px; box-shadow: 0px 0px 5px rgba(0, 180, 115, 0.9), 0px 0px 10px rgba(0, 0, 0, 0.9), 0px 2px 5px #000000; }
#section-screen #content-wrapper #content-screen.orange-frame { border: rgba(240, 82, 35, 0.9) solid 5px; box-shadow: 0px 0px 5px rgba(240, 82, 35, 0.9), 0px 0px 10px rgba(0, 0, 0, 0.9), 0px 2px 5px #000000; }
#section-screen #content-wrapper #content-screen iframe { border-radius: 15px; }
#section-screen #content-wrapper #content-close-button { position: absolute; top: -1%; right: -7.5%; width: 10%; transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); }
#section-screen #content-wrapper #content-close-button img { width: 100%; }
#section-screen #content-wrapper #content-screen .primary-button { top: unset; bottom: -5%; }
#section-screen #reward-heart-screen #reward-speech-bubble , #section-screen #reward-allhearts-screen #reward-speech-bubble{ background: url("/?originalUrl=https%3A%2F%2Flearn.bmdp.org%2Fimages%2Fui%2FCongratSpeechBubble.svg"); background-repeat: no-repeat; background-size: 100% 100%; height: 360px; width: 450px; position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); }
#section-screen #reward-heart-screen #reward-speech-bubble img { display: block; margin: 50px auto 0; width: 40px; height: 40px; }
#section-screen #reward-allhearts-screen #reward-speech-bubble img { display: block; margin: 50px auto 0; width: 120px; height: auto; }
#section-screen #reward-heart-screen #reward-speech-bubble h2 { font-size: 30px; line-height: 36px; }
#section-screen #reward-heart-screen #reward-speech-bubble h3 { font-size: 25px; line-height: 30px; color: #000000; }
#section-screen #reward-allhearts-screen #reward-speech-bubble h2 { font-size: 28px; line-height: 30px; }
#section-screen #reward-allhearts-screen #reward-speech-bubble h3{ font-size: 23px; line-height: 28px; color: #000000; }

.hidden { display: none !important; }
#html-content-panel { height: 100%; }

@media only screen and (max-width: 1024px) {
	#main-menu #menu-panel #menu-section-panel #menu_row2 img {height:5em;}
}

@media only screen and (max-width: 426px) {
	h1 { margin: 15px auto 0; font-size: 1.4em; line-height: 1.2em; width: 55vw; }
	h2 { font-size: 1.3em; line-height: 1.2em; }
	p { font-size: 1em; line-height: 1.2em; }

	.top-right-button { top: 15px; right: 15px; }
	.top-left-button { top: 15px; left: 15px; }
	.bottom-left-button { width: 45%; }
	.bottom-right-button { width: 45%; }
	.bottom-left-button img, .bottom-right-button img { width: 100% !important; }

	.speech-bubble { width: 84vw; height: 250px; }
	.speech-bubble h2 { padding: 20px 20px 5px; margin:0 auto; }
	.speech-bubble p { padding: 5px 24px 38px; margin:0 auto; }

	#main-menu #nav-panel #nav-title { width: 55vw; margin-left: auto; margin-right: auto; margin-bottom: 5px; }
	#main-menu #nav-panel #nav-subtitle { font-size: 1em; line-height: 1.2em; }
	#main-menu #menu-panel #menu-section-panel > div { width:50%; }
	#main-menu #menu-panel #menu-close-button { width: 15%; top: -15%; }
	#main-menu #menu-panel #menu-section-panel #last-section-button, #main-menu #menu-panel #menu-section-panel #last-section-button2 { width: 75%;}
	#main-menu #menu-panel #menu-section-panel #menu_row2 img {height:auto;}
	#main-menu #menu-panel #help-button img { width: 50px; }

	#intro-section .intro-instruction { width: 280px; margin: 25px auto; }

	#section-screen #content-wrapper { width: 90vw; height: 450px; }
	#section-screen #content-wrapper #content-screen { width: 90vw; height: 450px; }

	#section-screen #reward-heart-screen #reward-speech-bubble,
	#section-screen #reward-allhearts-screen #reward-speech-bubble  { width: 90vw; height: 250px; }

	#help-section .help-instruction { height: 200px; margin: 10px auto; }

	#tooltips-section #tooltips-panel #navi-tooltips { width:60vw; top: 20px; left: 75px; }

	#section-screen #reward-heart-screen #reward-speech-bubble img { margin-top: 15px; }
	#section-screen #reward-heart-screen #reward-speech-bubble h2 { margin: 10px 0; }
	#section-screen #reward-heart-screen #reward-speech-bubble h3 { margin: 15px 0; }
	#section-screen #reward-allhearts-screen #reward-speech-bubble img { margin-top: 10px; }
	#section-screen #reward-allhearts-screen #reward-speech-bubble h2 { margin: 0 0;}
	#section-screen #reward-allhearts-screen #reward-speech-bubble h3 { margin: 5px 0; font-size:20px}
	
	/*#always-on-display-section {display:none!important;}*/
	#always-on-display-section #always-on-display-panel #on-display-menu a img { width: 90px; }
	#always-on-display-section #always-on-display-panel #on-display-menu { bottom: 20px; }
}

@media only screen and (max-width: 325px) {
	.speech-bubble { width: 100vw; }

	#section-screen #content-wrapper { width: 100vw; }
	#section-screen #content-wrapper #content-screen { width: 100vw; }

	#section-screen #reward-heart-screen #reward-speech-bubble, #section-screen #reward-allhearts-screen #reward-speech-bubble { width: 100vw; }

	#always-on-display-section #always-on-display-panel #on-display-menu a img { width: 80px; }
}

.zoom-in { animation:zoom_in 0.5s ease 0s 1 forwards; }
.zoom-out { transform: translateX(-50%) translateY(-50%) scale(1.25); -webkit-transform: translateX(-50%) translateY(-50%) scale(1.25); animation:zoom_out 0.5s ease 0s 1 forwards; }

@keyframes zoom_in {
    0% { transform: translateX(-50%) translateY(-50%) scale(1); -webkit-transform: translateX(-50%) translateY(-50%) scale(1); }
    100% { transform: translateX(-50%) translateY(-50%) scale(1.25); -webkit-transform: translateX(-50%) translateY(-50%) scale(1.25); }
}

@keyframes zoom_out {
    0% { transform: translateX(-50%) translateY(-50%) scale(1.25); -webkit-transform: translateX(-50%) translateY(-50%) scale(1.25); }
    100% { transform: translateX(-50%) translateY(-50%) scale(1); -webkit-transform: translateX(-50%) translateY(-50%) scale(1); }
}

.fade-in { opacity: 0; animation:fadeIn 0.5s ease 0.2s 1 forwards; }

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.fade-out { animation:fadeOut 0.5s ease 0.2s 1 forwards; }

@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

.blink { animation: blink 1s linear infinite; }

@keyframes blink {
  0% { opacity: 0; }
  50% { opacity: .5; }
  100% { opacity: 1; }
}

/* The seconds for playX should be the playY divided by the amount of rows */
.olly-hello-sprite { width: 508px; height: 508px; background: url("/?originalUrl=https%3A%2F%2Flearn.bmdp.org%2Fimages%2Fsprites%2FollyHelloSpritesheet.png"); position: relative; bottom: -70px; transform: scale(0.5); -webkit-transform: scale(0.5); z-index: 300; pointer-events: none; }
.olly-hello-animation { animation: olly-hello-x 0.5s steps(8) 1s infinite, olly-hello-y 3s steps(11) 1s infinite; }

@keyframes olly-hello-x {
  from {background-position-x: 0px;}
  to {background-position-x: -4064px;}
}

@keyframes olly-hello-y {
  from {background-position-y: 0px;}
  to {background-position-y: -5588px;}
}

.olly-help-sprite { width: 540px; height: 540px; background: url("/?originalUrl=https%3A%2F%2Flearn.bmdp.org%2Fimages%2Fsprites%2FollyHelpSpritesheet.png"); position: relative; bottom: -95px; transform: scale(0.5); -webkit-transform: scale(0.5); z-index: 300; pointer-events: none; }
.olly-help-animation { animation: olly-help-x 1s steps(15) 1s infinite, olly-help-y 4s steps(7) 1s infinite; }

@keyframes olly-help-x {
  from {background-position-x: 0px;}
  to {background-position-x: -8100px;}
}

@keyframes olly-help-y {
  from {background-position-y: 0px;}
  to {background-position-y: -3780px;}
}

.olly-heart-sprite { width: 508px; height: 508px; background: url("/?originalUrl=https%3A%2F%2Flearn.bmdp.org%2Fimages%2Fsprites%2FollyHeartSpritesheet.png"); position: relative; bottom: -70px; transform: scale(0.5); -webkit-transform: scale(0.5); z-index: 300; pointer-events: none; }
.olly-heart-animation { animation: olly-heart-x 0.5s steps(8) 1s infinite, olly-heart-y 2s steps(7) 1s infinite; }

@keyframes olly-heart-x {
  from {background-position-x: 0px;}
  to {background-position-x: -4064px;}
}

@keyframes olly-heart-y {
  from {background-position-y: 0px;}
  to {background-position-y: -3556px;}
}

.olly-complete-sprite { width: 508px; height: 508px; background: url("/?originalUrl=https%3A%2F%2Flearn.bmdp.org%2Fimages%2Fsprites%2FollyCompleteSpritesheet.png"); position: relative; bottom: -70px; transform: scale(0.5); -webkit-transform: scale(0.5); z-index: 300; pointer-events: none; }
.olly-complete-animation { animation: olly-complete-x 0.5s steps(8) 1s infinite, olly-complete-y 2s steps(7) 1s infinite; }

@keyframes olly-complete-x {
  from {background-position-x: 0px;}
  to {background-position-x: -4064px;}
}

@keyframes olly-complete-y {
  from {background-position-y: 0px;}
  to {background-position-y: -3556px;}
}