@charset "UTF-8";
/* CSS Document */

/* FONTS IMPORT */

@font-face
{
	font-family: 'iRokusPlusIcons';
	src: url('../fonts/iRokusPlusIcons.eot?') format('eot'), 
		url('../fonts/iRokusPlusIcons.woff') format('woff'), 
		url('../fonts/iRokusPlusIcons.ttf')  format('truetype'),
		url('../fonts/iRokusPlusIcons.svg#iRokusPlusIcons') format('svg');
}

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/Open_Sans/OpenSans-Italic.eot");
  src: url("../fonts/Open_Sans/OpenSans-Italic.eot?#iefix") format("embedded-opentype");
  src: url("../fonts/Open_Sans/OpenSans-Italic.woff") format("woff"),url("../fonts/Open_Sans/OpenSans-Italic.ttf") format("truetype"),url("../fonts/Open_Sans/OpenSans-Italic.svg") format("svg");
  font-style: italic;
  font-weight: 400;
}

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/Open_Sans/OpenSans-Regular.eot");
  src: url("../fonts/Open_Sans/OpenSans-Regular.eot?#iefix") format("embedded-opentype");
  src: url("../fonts/Open_Sans/OpenSans-Regular.woff") format("woff"),url("../fonts/Open_Sans/OpenSans-Regular.ttf") format("truetype"),url("../fonts/Open_Sans/OpenSans-Regular.svg") format("svg");
  font-style: normal;
  font-weight: 400;
}


@font-face {
  font-family: "Open Sans";
  src: url("../fonts/Open_Sans/OpenSans-BoldItalic.eot");
  src: url("../fonts/Open_Sans/OpenSans-BoldItalic.eot?#iefix") format("embedded-opentype");
  src: url("../fonts/Open_Sans/OpenSans-BoldItalic.woff") format("woff"),url("../fonts/Open_Sans/OpenSans-BoldItalic.ttf") format("truetype"),url("../fonts/Open_Sans/OpenSans-BoldItalic.svg") format("svg");
  font-style: italic;
  font-weight: 700;
}

@font-face {
  font-family: "Open Sans";
  src: url("../fonts/Open_Sans/OpenSans-Bold.eot");
  src: url("../fonts/Open_Sans/OpenSans-Bold.eot?#iefix") format("embedded-opentype");
  src: url("../fonts/Open_Sans/OpenSans-Bold.woff") format("woff"),url("../fonts/Open_Sans/OpenSans-Bold.ttf") format("truetype"),url("../fonts/Open_Sans/OpenSans-Bold.svg") format("svg");
  font-style: normal;
  font-weight: 700;
}


/* LAYOUT */

body {
	-ms-touch-action: none !important;
    width: 100vw;
    height: 100vh;
}

* {	
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	text-decoration: none;
	border: none;
}
.slide {
    display: flex;
    justify-content: center;
    align-items: center;
}
.wrapper {
/*	position: relative;*/
	width: 1024px;
	height: 768px;
    position: fixed;
}
#exercise {
	
}

#header {
	position: absolute;
	top: 45px;
	left: 45px;
}
#header h1.title {
	font-family: 'Open Sans';
	font-size: 30px;
	color: #7F7F7F;
	line-height: 1em;
}

/*
 *	Annotation
 */ 

#annotation {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 10000;
	visibility: hidden;
}
#annotation-button {
	position: absolute;
	left: 25px;
	top: 25px; /* override */
	visibility: visible;
	z-index: 10001;
}
#annotation-button #annotation_icon {
	font-family: 'iRokusPlusIcons';
	font-weight: normal;
	font-size: 24px;
	color: #7F7F7F;
	cursor: pointer;
}
#annotation-button #annotation_icon:before {
	content: "\e002";
}
#annotation-button.active #annotation_icon:before {
	content: "\e003";
}
#annotation-overlay {
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.8);
	display: none;
	cursor: pointer !important;
	visibility: visible;
	z-index: 10000;
	opacity: 1;
}
.white-annotation #annotation-overlay {
	background: rgba(255, 255, 255, 0.8);
}
.black-annotation #annotation-overlay {
	background: rgba(0, 0, 0, 0.8);
}
#annotation-content {
	padding: 16px 16px 19px 16px;
	font-family: 'Open Sans';
	font-size: 17px;
	color: #FFFFFF;
	background: #7F7F7F;
	position: absolute;
	left: 30px;
	border-radius: 2px;
	top: 126px; /* override */
	width: 964px; /* override */
	height: auto; /* override if necesarry */
}
#annotation-content p {
	margin-bottom: 10px;
}
#annotation-content p:last-child {
	margin-bottom: 0px;
}
#annotation-content hr {
	margin-bottom: 10px;
	margin-top: 13px;
	border: none;
	border-top: 1px solid #FFFFFF;
	width: 55%;
}
.annotation-animate {
	display: block !important;
	animation-name: annotation-fadeIn;
	animation-duration: 0.3s;
	animation-fill-mode: forwards;
	backface-visibility: hidden;
	-webkit-animation-name: annotation-fadeIn;
	-webkit-animation-duration: 0.3s;
	-webkit-animation-fill-mode: forwards;
	-webkit-backface-visibility: hidden;
	
}
.annotation-animate #annotation-content {
	transform-origin: 0 0;
	-webkit-transform-origin: 0 0;
	animation-name: annotation-scaleIn;
	animation-duration: 0.3s;
	animation-delay: 0.3s;
	animation-fill-mode: both;
	backface-visibility: hidden;
	-webkit-animation-name: annotation-scaleIn;
	-webkit-animation-duration: 0.3s;
	-webkit-animation-delay: 0.3s;
	-webkit-animation-fill-mode: both;
	-webkit-backface-visibility: hidden;
}
@keyframes annotation-fadeIn
{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@-webkit-keyframes annotation-fadeIn
{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes annotation-scaleIn
{
	from {
		transform: scaleY(0);
	}
	to {
		transform: scaleY(1);
	}
}

@-webkit-keyframes annotation-scaleIn
{
	from {
		-webkit-transform: scaleY(0);
	}
	to {
		-webkit-transform: scaleY(1);
	}
}


/*
 * Captions
 */

#captions {
	position: absolute;
	top: 570px;
	left: 300px;
	width: 300px;
}
#captions p {
	font-family: 'Open Sans';
	font-size: 17px;
	line-height: 21px;
	color: #000000;
}

/*
 * Backwards compatibility
 */
 
.old {
	background: white;
}
.old #exercise {
	position: relative;
}
.old canvas {
	position: absolute;
	top: 45px;
	left: 45px;
	border: 1px solid #eee;
}
.loader {
	background: url(../images/loader.gif) center center no-repeat rgba(255,255,255,1);
}

canvas#canvas {
	display: block;
}