*, body, html {
	border: 0px;
	margin: 0px;
	padding: 0px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	touch-action: manipulation;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
}

body {
	-webkit-overscroll-behavior-x: none;
	overscroll-behavior-x: none;
}

i {
	font: unset;
	font-size: unset;
	font-family: unset;
	font-style: italic;
	letter-spacing: unset;
	font-weight: unset;
}

b {
	font: unset;
	font-size: unset;
	font-family: unset;
	font-style: unset;
	letter-spacing: unset;
	font-weight: 700;
}


/*.alt-text span {
	font: inherit;
	font-size: inherit;
	font-family: inherit;
	font-style: inherit;
	letter-spacing: inherit;
}
span {
	font-size: 100%;
	font: inherit;
	font-family: inherit;
	font-style: inherit;
	letter-spacing: inherit;
}
*/

.loading-text {
	font-size: 1.25em;
	display: table-cell;
	text-align: center;
	width: auto;
	padding: 0.5em 1em 0.5em 1em;
	height: auto;
	touch-action: none;
	pointer-events: none;
	z-index:11;
}



.ghost {
	font-family: 'Crimson Text', Serif;
	font-size: 1.45em;
	letter-spacing: 0.03em;
	font-weight: 500;
	font-style: italic;

	/*padding-bottom: 0.69em;*/
}
span .ghost {
	font-family: 'Crimson Text', Serif;
	font-size: 1.45em;
	letter-spacing: 0.03em;
	font-weight: 500;
	font-style: italic;
	/*padding-left: 0.05em;*/
	display: block;
}
.alt-text.top.ghost {
	font-family: 'Crimson Text', Serif;
	font-size: 1.4em;
	letter-spacing: 0.03em;
	font-weight: 500;
	padding: 0.5em 0.8275em 0.6em 0.8275em;
	/*padding-left: 1.05em;*/
	/*padding-bottom: 0.69em;*/
}

.alt-text.top.ghost > i b span {
	font-family: 'Crimson Text', Serif;
	font-size: inherit;
	letter-spacing: 0.03em;
	font-weight: 500;
	/*padding-left: 1.05em;*/
	/*padding-bottom: 0.6em;*/
}

.alt-text.top > span.ghost {
	font-family: 'Crimson Text', Serif;
	font-size: 1.2175em;
	letter-spacing: 0.03em;
	font-weight: 500;
	/*padding-left: 0.05em;*/
	display: inline-block;
	padding-bottom: 0.0em;
}
.alt-text.center > span.ghost {
	font-family: 'Crimson Text', Serif;
	font-size: 1.21875em;
	letter-spacing: 0.03em;
	font-weight: 500;
	/*padding-left: 0.05em;*/
	padding-bottom: 0.0em;
	display: inline-block;
}

.alt-text.center.ghost {
	font-family: 'Crimson Text', Serif;
	font-size: 1.45em;
	letter-spacing: 0.03em;
	font-weight: 500;
	padding: 0.5em 0.8275em 0.6em 0.8275em;
	/*padding-left: 1.05em;*/
	/*padding-bottom: 0.69em;*/
}
.alt-text.center.ghost > b i span {
	font-family: 'Crimson Text', Serif;
	font-size: inherit;
	letter-spacing: 0.03em;
	font-weight: 500;
	/*padding-bottomleft: 1.05em;*/
	/*padding-top: 0.69em;*/
}
.ghost > i b span {
	font-family: 'Crimson Text', Serif;
	font-size: inherit;
	letter-spacing: 0.03em;
	font-weight: 500;
	/*padding-left: 1.05em;*/
	/*padding-bottom: 0.69em;*/
}











/*.ghost5 {
	font-size: 1.2;
	letter-spacing: 0.04em;
	font-weight: 500;
	font-style: inherit;
}
.ghost5 i {
	font-size: 1.2em;
	letter-spacing: 0.04em;
	font-weight: 500;
	font-style: italic;
}
.ghost5 b {
	font-size: 1.2em;
	letter-spacing: 0.04em;
	font-weight: 700;
	font-style: inherit;
}
*/


body, html {
	position: fixed;
}

body {
	width: 100%;
	height: 100%;
	background-color: white;
	overflow: hidden;
	left: 0px;
	position: fixed;
}





.force-redraw {
	/*display: none;*/
	left: -0.001px;
	/*width: 90%;*/
	/*height: 90%;*/
	/*overflow: scroll;*/
}
.force-redraw::before { content: "";}
/*.force-redraw::after { content: "";}*/


#hack {
	/*display: block;*/
	/*position: relative;*/
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(128,128,128,0.5);
	z-index: 10;
}


#usermedia {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: fixed;
	top: 0px;
	left: 0px;
	
	z-index: 0;
	pointer-events: none;	
	visibility: hidden;
}
.usermediavideo {
	width: 100%;
	height: 100%;
	overflow: hidden;
}



#background {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0px;
	left: 0px;
	z-index: 0;
}

#background.error {
	background-image: url("../images/desktop.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
}




#main {
	z-index: 1;
	/*font-size: 0.95em;*/
}

@media only screen and (orientation: portrait) and (max-width: 321px)  {
	#main {
		z-index: 1;
		font-size: 0.89em;
	}
}

@keyframes loader-fadein {
  0%   { opacity: 0; }
   
  50%   { opacity: 0; }

  100% { opacity: 1.0; }
}

#loader{
	/*position: absolute;
	width: auto;
	height: auto;
	left: 50%;
	top: 50%;*/
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	padding: 0;
	margin: 0;
	border: 0;
	text-align: center;
	background-color: white;

	touch-action: manipulation;
	pointer-events: none;
		

	/*position: absolute;
	left: 50%;
	width: auto;
	padding: 0.1em;
	height: auto;
	max-width: calc(100vw - 1em);
	display: table;
	text-align: center;
	transform: translate(-50%, 0);
	padding-bottom: 3em;
	z-index: 1;*/
	z-index: 1000;
}
#loader.fadein {
	display: block;
	-ms-animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
	-ms-animation: loader-fadein;
	-moz-animation: loader-fadein;
	animation: loader-fadeinout 2.0s linear forwards;


	-webkit-animation: loader-fadein;
	-webkit-animation-duration: 2.0s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-fill-mode: forwards;
}



@keyframes loader-flicker {
  0%   { color: #777777; }
 
  50%  { color: #cccccc; }
  
  100% { color: #777777; }
}

#loader-txt {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	color: gray;
	transform: translate(-50%, -50%);

	-ms-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;

	-moz-animation: loader-flicker 1.0s infinite linear;
	animation: loader-flicker 1.0s infinite linear;

	-webkit-animation: loader-flicker;
	-webkit-animation-duration: 1.0s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	/*-webkit-animation-fill-mode: forwards;*/

}
.respiration {
	letter-spacing: 1px;
	-ms-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	animation-iteration-count: infinite;

	-moz-animation: loader-flicker 1.0s infinite linear;
	animation: loader-flicker 1.0s infinite linear;

	-webkit-animation: loader-flicker;
	-webkit-animation-duration: 1.0s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	/*-webkit-animation-fill-mode: forwards;*/
}




@keyframes logos-background-fadeout {
  0%   { opacity: 1.0;}
 
  10%  { opacity: 1.0;}
  
  90%  { opacity: 1.0;}

  100% { opacity: 0; display: none;}
}
#logos-background {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	z-index: 1999;
	opacity: 1.0;
	background-color: white;
	display: none;
	pointer-events: none;
}
#logos-background.shown {
	display: block;
	-ms-animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
	-ms-animation: logos-background-fadeout 4.5s forwards ease-in-out;
	-moz-animation: logos-background-fadeout 4.5s forwards ease-in-out;
	animation: logos-background-fadeout 4.5s forwards ease-in-out;


	-webkit-animation: logos-background-fadeout;
	-webkit-animation-duration: 4.5s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-fill-mode: forwards;
}


@keyframes logos-fadeinout {
  0%   { opacity: 0.0}
 
  15%  { opacity: 1.0;}
  
  80%  { opacity: 1.0;}

  90%  { opacity: 0;}

  100% { opacity: 0; display: none;}
}


#logos-container {
	display: flex;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 2000;
	opacity: 0;
	/*transform: translate(-50%, -50%);*/
	text-align: center;
	display: none;

	background-color: white;
	flex-direction: column;
	flex-align: center;
	align-items: center;
	justify-content: center;
}
#logos-container.shown {
	display: flex;
	-ms-animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
	-ms-animation: logos-fadeinout 4.5s forwards ease-in-out;
	-moz-animation: logos-fadeinout 4.5s forwards ease-in-out;
	animation: logos-fadeinout 4.5s forwards ease-in-out;


	-webkit-animation: logos-fadeinout;
	-webkit-animation-duration: 4.5s;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-fill-mode: forwards;
}
.logo {
	font-size: 1.1em;
	margin-top: 1.25em;
}
.logo-text {
	display: block;
}
.logo-img {
}
#logo-aatoaa {
	display: block;
	height: 32px;
	width: 163px;
	background-image: url("../images/ui/logo_aatoaa.jpg");
	background-size: contain;
	background-origin: content-box;
	background-repeat: no-repeat;

	
	flex-shrink: 1;
	background-position: 50% 50%;
	margin-bottom: 0px;
}

#logo-spacing {
	height: 2.0em;
	width: 100px;
	flex-shrink: 3;
}

#logo-onf {
	display: block;
	height: 75px;
	width: 154px;
	background-image: url("../images/ui/logo_onf.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-origin: content-box;

	flex-shrink: 1;
	background-position: 50% 50%;
	padding-bottom: 0em;
	margin-bottom: 2.5em;

}


/*------------
  The Views
------------*/
.motto-view {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0px;
	right: 0px;
	display: block;
}

/*.motto-view-content {
	width: 100%;
	height: 100%;
	position: absolute;
}*/

/*====================
  Page Description
====================*/


/*
.alt-text-container-container {
	display: block;


	position: absolute;
	justify-content: center;
	align-items: center;
	text-align: center;
}*/

.alt-text-container {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	width: 100%;
	height: calc(100% - 32px);

	justify-content: center;
	align-items: center;
  	justify-content: center;
	z-index:11;
}

.alt-text {
	display: block;
	font-size: 1.2em;
	padding: 0.5em 1em 0.6em 1em;
	touch-action: none;
	pointer-events: none;
	text-align: center;
	max-width: calc(100% - 6em);
	margin: auto;/*flex: 1;*/}

.alt-text-container.top {
	align-items: flex-start;
	height: 100%;
}
.alt-text-container.center {
	height: calc(100% - 32px);
}
.alt-text-container.withmenu {
	height: calc(100% - 55px);
	top: 46px;
}
.alt-text.top {
	margin-top: 7vh;
	font-size: 1.15em;
}
.alt-text.center-lower {
	margin-top: 7%;
}
/*.alt-text b {
	font-weight: 700;
	font-family: "inherit";
}
.alt-text i {
	font-weight: 400;
	font-style: italic;
	font-family: "inherit";
}
*/

/*====================
  Text Description
====================*/
.text-container {
	position: absolute;
	left: 50%;
	width: auto;
	padding: 0.1em;
	height: auto;
	max-width: calc(100vw - 1em);
	display: table;
	text-align: center;
	transform: translate(-50%, 0);
	padding-bottom: 3em;
	z-index: 1;
	touch-action: manipulation;
	pointer-events: none;
}



.text-container.top {
	top: 7%;
}
.text-container.centered {
	top: 50%;
	transform: translate(-50%, -50%);
}
 .text-container.center {
	top: 50%;
	transform: translate(-50%, -50%);
 }

.text {
	font-size: 1.25em;
	display: table-cell;
	text-align: center;
	width: auto;
	padding: 0.5em 1em 0.5em 1em;
	height: auto;
	touch-action: none;
	pointer-events: none;
	z-index:11;

}
.text.top {
	font-size: 1.15em;
}

.text a {
	color: black;
	/*text-decoration: none;*/
}
.text a:active {
	color: gray;
	/*text-decoration: none;*/
}

.alt-text a {
	color: black;
	text-decoration: none;
}
.alt-text a:active {
	color: gray;
	text-decoration: none;
}


@supports (-webkit-overflow-scrolling: touch) {
  /* CSS specific to iOS devices */ 
   .text-container.center {
   	/*width: auto;*/
   }
   .text-container.centered {
   	/*width: auto;*/
   }
   .text.center {
	/*margin: auto auto;*/
	/*display: inline-block;*/
	/*width: auto;*/
	}

}


.spritesheet-overlay-text-container {
	position: fixed;
	font-size: 1.0em;
	color: black;
	margin: 0;
	display: table;
	text-align: center;
	overflow: hidden;
	height: auto;
	width: auto;
	/*margin-top: auto;
	margin-bottom: auto;*/
	text-align: left;
	/*word-wrap: normal;*/
	white-space: nowrap;
	touch-action: manipulation;
	pointer-events: none;

	z-index:9;

	/*background-color: red;*/
	/*background-color: white;*/
	overflow: visible;

	transform: translate(50%, 0%);
	/*padding: 0.0em 0.25em 0.0em 0.25em; */

	/*max-width: 100px;*/
	/*transform-origin: center center;*/
}

.spritesheet-overlay-text {
	display: table-cell;
	/*position: relative;*/
	/*font-size: 1.4em;*/
	/*text-align: center;*/
	/*max-width: 100%;*/
	vertical-align: middle;
	/*font-size: 140%;*/
	overflow: hidden;
	height: auto;
	width: auto;

	pointer-events: none;

	text-align: center;

	background-color: transparent;


	transform: translate(-50%, -50%);

	padding: 0.25em 0.25em 0.25em 0.25em;

	/*padding-bottom: 0;*/

	/*padding: 100px 100px 100px 100px;*/
	/*box-sizing: content-box;*/
	/*transform: scale(0.5, 0.5);*/
}

.spritesheet-overlay-text b{
	font-weight: 700;
}


/*
.spritesheet-overlay-text-container {
	position: absolute;
	font-size: 1.15em;
	color: black;
	margin: 0;
	display: table;
	text-align: center;
	overflow: hidden;
	height: auto;
	width: auto;

	text-align: center;
	word-wrap: none;

	white-space: auto;
	word-wrap: normal;
	overflow: visible;

	background-color: white;
	padding: 0;

}

.spritesheet-overlay-text {
	display: table-cell;

	vertical-align: middle;
	overflow: hidden;
	word-wrap: break-word;
	overflow-wrap: break-word;

	font-size: 1.15em;

	white-space: auto;
	background-color: white;

	padding: 0.0em 0.25em 0.0em 0.25em;
	transform: translate(0%, 0%);


}*/

.spritesheet-overlay-text-container.top {
	top: 7%;
	left: 50%;
	transform: translate(-50%, 0%);
}
.spritesheet-overlay-text-container.centered {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.spritesheet-overlay-text-container.center {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


.allow-camera-text {
	max-width: calc(100% - 4em);
}



.allow-camera-top {
	position: absolute;
	max-width: calc(100% - 1em);
	top: 15%;

	/*transform: translate(0%, -50%);*/

	font-size: 1.0em;
	display: block;
	text-align: center;
	width: auto;
	padding: 0.5em 1em 0.5em 1em; 
	height: auto;

}
.allow-camera-bottom {
	/*float: left;
	clear: both;*/
	position: absolute;
	max-width: calc(100% - 1em);
	bottom: 20%;
	font-size: 1.0em;
	display: block;
	text-align: center;
	width: auto;
	padding: 0.5em 1em 0.5em 1em; 
	height: auto;

}

/*====================
  Record View
====================*/
.record-button {
	/*pointer-events: none;*/
	position: absolute;
	bottom: 5px;
	left: 50%;
	width: 86px;
	height: 86px;
	touch-action: manipulation;
	z-index: 13;
	transform: translate(-50%, 0%);

}
.confirm-button {
	/*pointer-events: none;*/
	visibility: hidden;
	position: absolute;
	bottom: 5px;
	left: 50%;
	width: 86px;
	height: 86px;
	background-image: url("../images/ui/capture_yes.png");
	background-size: 100% 200%;
	background-position: top;
	transform: translate(-50%, 0%);
	z-index: 2;
	touch-action: manipulation;
	z-index: 13;

}
.confirm-button:active {
	background-position: bottom;
}

.cancel-button {
	/*pointer-events: none;*/
	visibility: hidden;
	position: absolute;
	bottom: 29px;
	right: 29px;
	width: 38px;
	height: 38px;
	background-image: url("../images/ui/capture_redo.png");
	background-size: 100% 200%;
	background-position: top;
	/*transform: translate(-50%, 0%);*/
	z-index: 2;
	touch-action: manipulation;
	z-index: 13;


}
.cancel-button:active {
	background-position: bottom;
}

.skip-button {
	/*pointer-events: none;*/
	position: absolute;
	bottom: 29px;
	right: 29px;
	width: 38px;
	height: 38px;
	background-image: url("../images/ui/skip.png");
	background-size: 100% 200%;
	background-position: top;
	/*transform: translate(0%, 0%);*/
	z-index: 2;
	touch-action: manipulation;
	z-index: 13;

}
.skip-button:active {
	background-position: bottom;
	touch-action: manipulation;
}


.record-image {
	width: 100%;
	height: 100%;
	/*transform: translate(-50%, 0%);*/
	pointer-events: none;
	touch-action: manipulation;
}
.chapter-part {
	white-space: nowrap;
}

/*

THE MENU

*/
#menu {
	display: none;
	background-color: white;
	z-index: 1001;
	width: 100%;
	height: 100%;
	position: fixed;

	text-align: center;
	align-items: center;
  	justify-content: center;
	flex-direction: column;

	font-size: 1.1em;
	/*transition: transform 1.0 ease-in-out;*/
	transform: translate(0,100vh);
	transition: transform 0.2s ease-out;
	touch-action: manipulation;
}

#menu.animate-down {
	transform: translate(0,100vh);
}
#menu.animate-up {
	/*display: flex;*/
	transform: translate(0, 0);
	transition: transform 0.2s ease-out;
}
#menu.hide {
	/*display: flex;*/
	transform: translate(0, 100vh);
	transition: transform 0.2s ease-out;
}


#menu-text-container {
	display: flex;
	text-align: center;
	align-items: center;
  	justify-content: center;
	vertical-align: middle;
	flex-direction: column;
	height: calc(100% - 120px);
}

#menu-text-title {
	display: block;
	font-size: 0.675em;
	border-bottom: 1px solid;
	padding-bottom: 1.1em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-top: 1.1em;
	margin-top: 1.1em;
}

.menu-separator {
	display: block;
	background-color: #919191;
	margin-top: 0.675em;
	margin-bottom: 0.125em;
	/*margin-bottom: 1em;*/
	/*font-size: */
	/*height: 1px;*/
	/*width: 77px;*/
	height: 1.745em;
	max-height: 1.745em;
	min-height: 0.0em;
	flex-shrink: 1;
	flex: 1;
}

.menu-separator-restart {
	display: flex;
	background-color: transparent;
	margin-top: 0.0;
	margin-bottom: 0;
	/*height:;*/
	/*height: 1.0em;
	max-height: 1.0em;
	min-height: 0.0em;*/
	flex-shrink: 1;
	flex-grow: 1;
	flex: 1;


	font-size: 0.675em;
	padding-bottom: 0em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-top: 0em;
	margin-top: 0em;
	/*width: 100%;*/
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-right: 1.05em;
	/*margin-left: 0.5em;*/

	height: 0px;
	min-height: 1em;
	max-height: 3.0em;
	border-bottom: 1px solid;

}
.menu-separator-restart-inner {
	display: flex;
	background-color: transparent;
	
	left: 0;
	padding: 0;
	border: 0;
	height: 1px;

	width: 5.0em;

}

#menu-restart {
	margin-bottom: 1.25em;
	padding-bottom: 0.5em;
	padding-top: 0.8em;
}

#menu-chapter-container {
	display: block;
/*	padding-bottom: 0.5em;
*/
}

.menu-chapter {
	padding-bottom: 0.415em;
	padding-top: 0.415em;
	color: #919191;
	text-decoration: none;
	display: block;
	padding-right: 1.05em;
	-webkit-tap-highlight-color: transparent;
}

.menu-chapter.smaller {
	padding-bottom: 0.2075em;
}
.menu-chapter.smallest {
	padding-bottom: 0;
}

.menu-chapter:active {
	color: #555555;
}

@media screen and (min-height: 200px) and (max-height: 340px) {
  #menu-text-container {
  	transform: scale(0.4, 0.4);
  }
}
@media screen and (min-height: 340px) and (max-height: 390px) {
  #menu-text-container {
  	transform: scale(0.5, 0.5);
  }
}
@media screen and (min-height: 390px) and (max-height: 440px) {
  #menu-text-container {
  	transform: scale(0.6, 0.6);
  }
}
@media screen and (min-height: 440px)  and (max-height: 490px) {
  #menu-text-container {
  	transform: scale(0.7, 0.7);
  }
}
@media screen and (min-height: 490px) and (max-height: 540px) {
  #menu-text-container {
  	transform: scale(0.8, 0.8);
  }
}
@media screen and (min-height: 540px) and (max-height: 600px) {
  #menu-text-container {
  	transform: scale(0.9, 0.9);
  }
}


@media screen and (max-height: 580px) {
  	.menu-chapter.smaller {
		padding-bottom: 0
	}
	#menu-chapter-1.smaller {
		padding-top: 0px;
	}
}

@media screen and (min-height: 580px) and (max-height: 660px) {
  	.menu-chapter.smaller {
		padding-bottom: 0.2075em;
	}
	#menu-chapter-1.smaller {
		padding-top: 0px;
	}
}

#menu-chapter-1 {
	margin-top: 0.0em;
}

.menu-chapter-inner {
	display: inline-block;
	width: auto;
	height: auto;
	padding: 0.5em;
	-webkit-tap-highlight-color: transparent;
}
.menu-chapter.read {
	color: black;
}
.menu-chapter.read:active {
	color: #555555;
}
.menu-chapter.inout {
	padding-right: 0px;
	font-size: 1.273em;
}


#menu-chapter-6 {
/*	margin-bottom: 1.25em;
*/	/*text-decoration: underline;*/
}

.menu-number {
	display: inline-block;
	font-size: 0.75em;
	padding-right: 0.5em;
}
.menu-text {
	display: inline-block;
}
.menu-text.selected {
	border-bottom: 1px solid;
}
.menu-chapter-inner:active {
	color: #555555;
}
.menu-chapter-inner:hover {
	color: #555555;
}
#menu-pages {
	display: block;
	font-size: 0.6em;
	position: absolute;
	bottom: 3.25em;
	left: 4.0em;
	left: 52px;
	color: #000000;
	opacity: 0.9;
	pointer-events: none;
}


#menu-bar-container {
	font-size: 0.6em;

	display: block;
	position: absolute;
	height: 13px;
	width: calc(100% - 6em);
	bottom: 1.5em;
	left: 52px;
	background-color: #d1d1d1;
}

#menu-bar {
	width: 100%;
	height: 100%;
	background-color: #000000;
	transform-origin: 0 0;
	transform: scale(0.3,1.0);
}

.motto-view-menu-button {
	display: block;

	font-size: 0.75em;
	position: absolute;
	height: 13px;
	width: 13px;
	/*background-color: #777777;*/

	background-color: transparent;
	background-image: url("../images/ui/menu_bas_2.png");
	background-size: 100% 400%;
	background-repeat: no-repeat;
	background-position: 0 0;

	bottom: 1.5em;
	left: 1.75em;
	z-index: 1002;
	pointer-events: none;
}

.motto-view-menu-button.white {
	background-position: 0 66.66666%;
}
.motto-view-menu-button.gray {
	background-position: 0 100%;
}

.page-number {
	font-size: 0.75em;
	position: absolute;
	bottom: 16px;
	/*left: 4.0em;*/
	left: 52px;
	color: #777777;
	opacity: 1.0;
	pointer-events: none;
}
.page-number.active


.motto-view-menu-button.active {
	background-color: black;
}

#menu-button {
	display: none;

	pointer-events: none;

	font-size: 0.75em;
	position: absolute;
	/*height: 0.75em;
	width: 0.75em;*/
	width: 13px;
	height: 13px;
	/*background-color: white;*/
	background-image: url("../images/ui/menu_bas_2.png");
	background-size: 100% 400%;
	background-repeat: no-repeat;
	background-position: 0 33.33333%;


	bottom: 1.5em;
	left: 1.75em;
	z-index: 1002;
}
#menu-button.open {
	background-position: 0 100%;

}


#menu-chapter-inout-container {
	display: none;
	text-align: center;
	align-items: center;
  	justify-content: center;
	vertical-align: middle;
	flex-direction: column;
}
#menu-chapter-inout-title {
	display: block;
	font-size: 0.76365em;
	border-bottom: 1px solid;
	padding-bottom: 1.2em;
	padding-left: 0.5em;
	padding-right: 0.5em;
}



#menu-chapter-inout-title.menu-select-restart-text {
	font-size: 0.8em;
	padding-bottom: 2.0em;
}

#menu-chapter-inout-options-container {

}
.menu-chapter-inout-option {
	margin-top: 1.33em;
	margin-bottom: 1.33em;
	color: #919191;
	text-decoration: none;
	display: block;
}
#menu-chapter-inout-cancel {
	margin-top: 1.33em;
	font-size: 0.8em;
}
.inout-action {
	display: inline-block;
}

#menu-chapter-inout-inside {
	padding-top: 3px;
}
#menu-chapter-inout-restart {
	display: none;
	padding-top: 3px;

}
#menu-chapter-inout-restart:active {
	opacity: 0.75;
}
#menu-chapter-inout-restart-cancel {
	display: none;
}
#menu-chapter-inout-restart-cancel:active {
	opacity: 0.75;
}

/*

NFB Menu

*/
.share-link {
	height: 100%;
	padding-top: 11px;
}
#openSocial {
	padding-top: 11px;
}

#interactive-header {
	/*transform: translate(0,100vh);*/
	transform: translate(0, 0);
	transition: transform 0.2s ease-out;
}
#interactive-header.animate-up {
	/*display: flex;*/
	transform: translate(0, 100vh);
	transition: transform 0.2s ease-out;
}


/*

Custom Menu

*/



#menu-header-container {
	/*font-size: 0.6em;*/
	display: flex;
	position: absolute;
	width: 100%;
	height: 46px;
	top: 0;
	background-color: #1a1a1a;
	align-items: center;
	vertical-align: middle;
	font-size: 0.75em;
	touch-action: manipulation;
}

#menu-header-container.page {
	z-index: 1750;
	touch-action: manipulation;
}

#menu-header-logo {
	display: inline-flex;
	width: 40px;
	height: 21px;
	background-image: url("https://interactive-pip.nfb.ca/static/img/layout/icon/ONF_Logo_hor_blanc_sm-b.svg");
	background-size: 40px 21px;

	/*float: left;*/
	font-size: 1em;
	margin-bottom: auto;
	margin-top: auto;
	margin-left: 16px;
	touch-action: manipulation;
}




#menu-header-info-container {
	display: inline-flex;
	order: 2;

	margin-left: auto;
	width: 60px;
	height: 44px;
	text-align: center;
	justify-content: center;
	align-items: center;
	border-left: 2px solid #000000;
	touch-action: manipulation;
}
#menu-header-info {
	display: inline-flex;
	width: 18px;
	height: 18px;
	color: white;
	background-size: 100% 200%;
	background-position: 0% 0%;
	background-image: url("../images/ui/info.png");
	touch-action: manipulation;
}
#menu-header-share:active {
	background-position: 0% 100%;
}
#menu-header-info-container.active #menu-header-info {
	/*background-position: 0% 100%;*/
}
#menu-header-info-container:active #menu-header-info {
	background-position: 0% 100%;
}
#menu-header-info-container:active {
	/*background-color: #000000;*/
	background-position: 0% 100%;;
}
#menu-header-info-container.active {
	background-color: #333333;
	/*background-position: 0% 100%;;*/
}
#menu-header-info-container.active:active {
	background-color: transparent;
	background-position: 0% 0%;;
}


#menu-header-share-container {
	display: inline-flex;
	order: 3;


	width: 60px;
	height: 44px;
	text-align: center;
	justify-content: center;
	align-items: center;
	border-left: 2px solid #000000;
	touch-action: manipulation;

}
#menu-header-share-container:active {
	/*background-color: #000000;*/
	background-position: 0% 100%;;
}
#menu-header-share-container.active {
	background-color: #333333;
	/*background-position: 0% 100%;;*/
}
#menu-header-share-container.active:active {
	background-color: transparent;
	background-position: 0% 0%;;
}

#menu-header-share {
	display: inline-flex;
	width: 26px;
	height: 26px;
	color: white;
	background-size: 100% 200%;
	background-position: 0% 0%;
	background-image: url("../images/ui/share.png");
	touch-action: manipulation;
}
#menu-header-share:active {
	background-position: 0% 100%;
}
#menu-header-share-container:active #menu-header-share {
	background-position: 0% 100%;
}
#menu-header-share-container.active #menu-header-share {
	/*background-position: 0% 100%;*/
}

#menu-header-language {
	display: inline-flex;
	order: 4;
	color: white;
	font-size: 1.1em;
	width: 60px;
	height: 44px;
	/*margin-top: auto;*/
	/*margin-bottom: auto;*/
	/*margin-bottom: 2px;*/
	touch-action: manipulation;

	justify-content: center;
	align-items: center;
	border-left: 2px solid #000000;
}
#menu-header-language:active {
	color: #808080;
}

$('#menu-header-language').

#menu-header-back {
	display: none;
	order: 3;
	color: white;
	font-size: 1.1em;
	margin-left: auto;
	text-align: center;
	height: 21px;

	padding-right: 0.0em;
	padding-left: 0.0em;

	align-items: center;
	vertical-align: middle;
	/*margin-top: 0.125em;*/

	/*height: 2em;*/
	/*padding-bottom: 10px;*/
}
#menu-header-back-arrow {
	display: inline-flex;
	width: 1.710526315789474em;
	height: 1em;
	margin-top: 0px;
	order: 0;
	background-image: url("../images/ui/back_arrow_2.png");
	background-size:  1.710526315789474em 1em;
	background-color: rgba(0,0,0,0);
}

#menu-header-back-text {
	display: inline;
	padding-left: 0.5em;
	margin-bottom: 2px;

}



@media only screen and (orientation: landscape) {
	html, body {
		height: 100%;
		overflow:hidden;
	}
}


#orientation-warning {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #ffffff;
	z-index: 1800;
	/*opacity: 0.0;*/
	text-align: center;
	overflow: hidden;
}


#orientation-warning-inner {
	display: none;
	position: absolute;
	text-align: center;
	font-size: 1.25em;
	left: 50%;
	top: 50%;
	width: 90vw;
	padding-bottom: 16px;
	background-color: #ffffff;
	z-index: 10000;
	transform: translate(-50%, -50%);
}

.flexdatalist-results {
	transform: scale(0.8, 0.8);
	transform-origin: top left;
}

#error {
	display: none;
	/*width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	padding: 0;
	margin: 0;
	border: 0;
	text-align: center;*/
	/*background-color: white;*/
	/*font-size: 0.83em;*/
	/*margin-top: 23px;*/
	margin-top: 38px;
	height: calc(100% - 32px);
	z-index: 10;
}

#error-txt {
	/*position: absolute;
	top: 50%;
	left: 50%;
	color: black;
	transform: translate(-50%, -50%);
	
	width: 90vw;
	font-size: 1.25em;
	display: table-cell;
	text-align: center;
	/*padding-top: 23px;*/
	/*margin-top: 46px;*/
	max-width: calc(100% - 3em);

	background-color: white;
	/*padding-top: 46px;*/
	padding: 0.5em 1em 0.5em 1em;
	z-index:11;
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
}


#background {
	
}

#background-flipped {
	display: none;
	width: 50%;
	height: 100%;
	overflow: hidden;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 0;
	left: 0;
	background-position: right;
	background-size: 200% 100%;

	transform: scale(-1, 1) translate(0%, 0);
}





/*


Les pages about/credits/etc

*/
#info-page {
	display: none;
	position: absolute;
	top: 46px;
	width: 100%;
	height: calc(100% - 46px);
	background-color: #ffffff;
	text-align: center;
	transform: translate(110%,0);
	transition: transform 0.2s ease-out;
	z-index: 1700;

	font-weight: 400;
	letter-spacing: 0.5px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	touch-action: manipulation;

}
#info-page.animate-up {
	transform: translate(0,0);
	transition: transform 0.2s ease-out;
}
#info-page.hide {
	transform: translate(0,100vh);
	transition: transform 0.2s ease-out;
}
#info-back-button {
	display: block;
	width: 34px;
	height: 34px;
	position: absolute;
	/*top: 8px;*/
	left: 21px;

	font-size: 0.8em;
	top: calc( 2.5em - 2px);
	/*bottom: 2.5em;*/

	background-image: url("../images/ui/back_arrow_2b.png");
	background-size: 100% 200%;
	background-position: top;
	z-index: 2005;
	touch-action: manipulation;
}

#info-page-header {
	position: sticky;
	top: -2px;
	width: 100%;
	font-size: 0.8em;
	height: 52px;
	padding-top: 32px;
	border-bottom: 1px solid black;
	background-color: white;
	z-index: 2002;

	pointer-events: auto;
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
	touch-action: manipulation;
}
#info-page-header-text {
	font-weight: 600;
	background-color: white;
	touch-action: manipulation;
}

.text-spacer-line {
	height: 1px;
	width: 100vw;
	margin-left: -2.25em;
	background-color: black;
	margin-top: 1em;
	margin-bottom: 1em;
	touch-action: manipulation;
}

.text-spacer-line-small {
	height: 1px;
	width: 1em;
	margin-left: auto;
	margin-right: auto;
	background-color: black;
	margin-top: 1em;
	margin-bottom: 1em;
	touch-action: manipulation;
}


.text-page {
	position: absolute;
	font-size: 1.1em;
	top: 84px;

	width: calc( 100% - 4.5em);
	height: auto;
	text-align: left;
	padding: 2.25em;
	font-weight: 400;


	pointer-events: auto;
	overflow-y: auto;
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
	touch-action: manipulation;
}

.credits-spacer-small {
	width: 1em;
	height: 1px;
	background-color: black;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

.text-page .endlink {
	font-weight: 600;
	color: black;
	font-style: normal;
	margin-left: 0.75em;

	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.endlink.creditslink {
	margin-left: 0;
	font-weight: 700;

	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
}
.endlink:active {
	color: #222222;
}
.text-page a {
	font-style: italic;
	font-weight: 400;
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
	touch-action: manipulation;
}
.text-page b {
	font-weight: 700;
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
}
.text-page b i {
	font-weight: 700;
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
}
/*
.text-page .about-link {
	margin-left: 0;
	font-weight: 700;
	font-style: normal;
	text-decoration: underline;

	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
}*/
/*.text-page .about-link:active {
	color: #222222;
}
*/
.about-credits {
	font-size: 0.9em;
	font-weight: 400;
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;	
	touch-action: manipulation;
}
.text-page .about-link {
	font-weight: 700;
	font-style: normal;
	text-decoration: underline;
	color: #000000;
	touch-action: manipulation;
	-webkit-user-select: text;
	-moz-user-select: text;
	user-select: text;
	cursor: pointer;
}
.text-page .about-link:hover {
	color: #444444;
}
.text-page .about-link:active {
	color: #444444;
}
/*.text-page .about-link.disabled {
	color: #000000;
	text-decoration: none;
	font-style: normal;
}*/
.about-name-link {
	color: #000000;
	text-decoration: none;
	font-style: normal;
}
.about-name-link:active {
	color: #000000;
	text-decoration: underline;
	font-style: normal;
}
.about-name-link:hover {
	color: #000000;
	text-decoration: underline;
	font-style: normal;
}
.about-name-link b {
	color: #000000;
	text-decoration: none;
	font-style: normal;
}
.about-name-link b:hover {
	text-decoration: underline;
}
.about-name-link a {
	color: #000000;
	text-decoration: none;
	font-style: normal;
}
.about-name-link a:hover {
	text-decoration: underline;
}

#about-page {
	touch-action: manipulation;
}

#share-page {
	touch-action: manipulation;
	overflow: hidden;
	position: fixed;
	display: flex;
	flex-direction: column;
	padding-top: 0;
	padding-bottom: 0;
	padding: 0;
	height: calc( 100% - 90px );
	width: 100%;


	align-items: center;
	justify-content: center;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}
.share-text {
	font-weight: 600;
	font-size: 1.1em;
	width: 7em;
	touch-action: manipulation;
}

.share-large {
	position: relative;
	display: flex;

	align-items: center;
	justify-content: center;

	width: 100%;
	height: 27%;
	flex-grow: 0;
	touch-action: manipulation;
}
.share-large.border {
	border-bottom: solid 1px black;
}

#facebook-logo {
	width: 56.66px;
	height: 56.66px;
	margin-left: 1.0em;
	margin-right: 1.75em;
	background-image: url("../images/ui/share_facebook.png");
	background-size: cover;
}
#twitter-logo {
	width: 56.66px;
	height: 56.66px;
	margin-left: 1.0em;
	margin-right: 1.75em;
	background-image: url("../images/ui/share_twitter.png");
	background-size: cover;
	background-color: #eaeaea;
	border-radius: 100%;
}
#sharelink-logo {
	width: 56.66px;
	height: 56.66px;
	margin-left: 1.0em;
	margin-right: 1.75em;
	background-color: #eaeaea;
	border-radius: 100%;
	background-image: url("../images/ui/share_copylink.png");
	background-size: contain;z-index: width: 64px;
	margin-right: 1.75em;
	background-size: cover;
}
#facebook-logo.active {
	background-position: bottom;
}
#sharelink-logo.active {
	background-position: bottom;
}
#twitter-logo.active {
	background-position: bottom;
}

#credits-page {
	font-size: 1em;
	touch-action: manipulation;
}

#info-back-button:active {
	background-position: bottom;
}


@keyframes colors-flash-animation-inv {
  0%  { color: rgba(0,150,255,1.0); }
  33%  { color: rgba(255,255,0,1.0); }
  66% { color: rgba(255,0,255,1.0); }
  100%  { color: rgba(0,150,255,1.0); }

}
.colors-flash {
	-ms-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;

	-moz-animation: colors-flash-animation-inv 0.1s infinite linear;
	animation: colors-flash-animation-inv 0.1s infinite linear;

	-webkit-animation: colors-flash-animation-inv;
	-webkit-animation-duration: 0.1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}


.share-btn {
	position: relative;
	display: flex;

	align-items: center;
	justify-content: center;

	width: auto;
	height: auto;
	padding: 3%;
	flex-grow: 0;
	touch-action: manipulation;
}

@keyframes copied-link {
  0%  { background-color: #cccccc;}
  100%  { background-color: #ffffff;}
}

.share-text.active {
	color: #555555;
	/*text-decoration: underline;*/
}
.share-btn.copied {
	-ms-animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;

	-moz-animation: copied-link  0.2s 1 linear;
	animation: copied-link  0.2s 1 linear;

	-webkit-animation: copied-link ;
	-webkit-animation-duration: 0.2s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: 1;
}

#share-facebook {
}
#share-twitter {

}
#share-btn-link {

}