html {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
    overflow: hidden;
    -webkit-text-size-adjust: none
    }

body {
	margin: 0;
	padding: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background: no-repeat 50% 50%;
	background-size: cover;
	min-width: 512px;
	min-height: 288px;

}

*{ margin: 0; padding: 0; }

img, div, table, td, button {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none;
	user-drag: none;
	outline: none;
	border: 0;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	tap-highlight-color: rgba(0, 0, 0, 0);
}

.selectDisable {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.selectEnable { 
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

@font-face {
	font-family: 'bitter';
	src: url('../font/bitter-v12-latin-regular.woff2') format('woff2'),
		 url('../font/bitter-v12-latin-regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

.gameParent {
	box-shadow: 3px 3px 60px rgba( 0, 0, 0, 0.3);
}

.gameContainer, .gameScreen {
	display:none;
}

.gameParent, .gameContainer, .gameScreen, .XrayBg, .XrayParent {
	position: absolute;
	top: 0;
	left: 0;
	width: 1920px;
	height: 1080px;
}

.imgAsset, .instructionDiv, .popupTutorial, .popupInfo, .popupGlossary {
	position: absolute;
}

.popupTutorial, .popupInfo, .popupGlossary {
	top: 0;
	left: 0;
	width: 0;
	height: 0;
}

.popupTutorial {
	z-index: 400;
}

.popupInfo {
	z-index: 450;
}

.popupGlossary {
	z-index: 2000;
}

.tutorialArrow {
	transition: transform 0.1s;
	cursor: pointer;
}

.tutorialArrow:hover, .tutorialArrow:focus {
	transform: scale(1.2);
	opacity: 1;
}

.tutorialArrow:active {
	transform: scale(1.1);
	opacity: 1;
}

.tutorialArrow[disabled], .tutorialArrow[disabled]:hover, .tutorialArrow[disabled]:focus {
	transform: scale(1);
	opacity: 0.5;
}

.instructionDiv h2, .instructionDiv p, .tutorialDiv p, .btn {
    text-align: center;
    font-family: 'bitter';
}

.instructionDiv h2, .instructionDiv p {
    padding-top: 0.75em;
    padding-left: 2em;
	padding-right: 2em;
	color: #ffffff;
}

.instructionDiv h2 {
    font-size:  50px;
    font-weight: bold;
}

.instructionDiv p {
    font-size:  32px;
    font-weight: normal;
}

.tutorialDiv {
	display: flex;
	align-items: center;
	background-image: none !important;
	background-color: #0095fd;
	border-radius: 160px / 140px;
}

.tutorialDiv p {
	width: 100%;
    padding-left: 9.25em;
	padding-right: 3.75em;
    font-size:  28px;
	font-weight: normal;
	color: #ffffff;
	line-height: normal;
}

.close-tutorialDiv .tutorialDiv {
	animation-name: close-tutorial-animation;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}
@keyframes close-tutorial-animation {
	0% 		{ width: 832px; }
	100% 	{ width: 345px; }
}

.open-tutorialDiv .tutorialDiv {
	animation-name: open-tutorial-animation;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}
@keyframes open-tutorial-animation {
	0%		{ width: 345px; }
	100%	{ width: 832px; }
}

.open-tutorialDiv .tutorialDiv p {
	animation-name: show-text-animation;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}
@keyframes show-text-animation {
	0%		{ visibility: hidden; }
	99%		{ visibility: hidden; }
	100% 	{ visibility: visible; }
}

.close-tutorialDiv .tutorialDiv p {
	animation-name: hide-text-animation;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}
@keyframes hide-text-animation {
	0% 		{ visibility: visible; }
	1% 		{ visibility: hidden; }
	100% 	{ visibility: hidden; }
}

.open-tutorialDiv .openButton {
	animation-name: hide-button-animation;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}
@keyframes hide-button-animation {
	0% 		{ transform: scale(1); }
	1% 		{ transform: scale(0); }
	100% 	{ transform: scale(0); }
}

.close-tutorialDiv .openButton {
	animation-name: show-button-animation;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}
@keyframes show-button-animation {
	0% 		{ transform: scale(0); }
	99% 	{ transform: scale(0); }
	100% 	{ transform: scale(1); }
}

.open-tutorialDiv #Tutorial_ArrowLeft, .open-tutorialDiv #Tutorial_ArrowRight {
	animation-name: show-button-animation;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}

.close-tutorialDiv #Tutorial_ArrowLeft, .close-tutorialDiv #Tutorial_ArrowRight {
	animation-name: hide-button-animation;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}

.glossaryDiv {
	display: flex;
	align-items: center;
}

.glossaryDiv p {
	text-align: left;
    font-family: 'bitter';
	padding-left: 6.5em;
	padding-right: 1.5em;
    font-size:  28px;
	font-weight: normal;
	color: #ffffff;
	line-height: normal;
}

.infoLeftDiv, .infoRightDiv {
	font-family: 'bitter';
	font-size:  20px;
	font-weight: normal;
	color: #3c3c3c;
	position: relative;
	top: -1.5em;
}

.infoLeftDiv {
    float: left;
}

.infoRightDiv {
    float:right;
}

.tableInfo {
	font-family: 'bitter';
	font-size:  25px;
	font-weight: normal;
	color: #ffffff;
}

.tableInfo table {
	padding-left: 0.5em;
	padding-right: 0.5em;
	width: 100%;
}
.tableInfo table tr {
	height: 2.7em;
}

.tableInfo .headerTD {
	font-size:  30px;
	padding-top: 1em;
	text-align: center;
}

.tableInfo .leftTD {
	text-align: left;
	padding-left: 5px;
	width: 100%;
}

.tableInfo .rightTD {
	text-align: right;
}

.tableInfo .rightTD div {
	padding-bottom: 0.45em;
	height: 2em;
	width: 2em;
}

.tableInfo .footerTD {
	font-size:  25px;
	padding-top: 1.05em;
	text-align: center;
	vertical-align: middle;
}

.analyzeButton, .sendButton {
	cursor: pointer;
	height: 2em;
	width: 9em;
	margin: auto;
	line-height: 2em;
}

.blink {
	animation-name: playBlinkKeys;
    animation-duration: 0.8s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
	animation-delay: 1s;
}

@keyframes playBlinkKeys{
    0%{ transform: scale(1); }
    30%{ transform: scale(1); }
    50%{ transform: scale(1.1); }
    70%{ transform: scale(1); }
    100%{ transform: scale(1); }
}

.analyzeButton:hover, .sendButton:hover, .analyzeButton:focus, .sendButton:focus, .blink:hover, .blink:focus {
	animation-name: none;
	transform: scale(1.15);
	opacity: 1;
	cursor: pointer;
}

.tableInfo .rightTD div:hover, .tableInfo .rightTD div:focus, .tableInfo .rightTD div:active {
	cursor: pointer;
}

.contentText {
	padding: 30px 50px 0 50px;
}

.blink {
	animation-name: playBlinkKeys;
    animation-duration: 0.8s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
	animation-delay:1s;
}

@keyframes playBlinkKeys{
    0%{ transform:scale(1); }
    30%{ transform:scale(1); }
    50%{ transform:scale(1.1); }
    70%{ transform:scale(1); }
    100%{ transform:scale(1); }
}

.blink:hover, .blink:focus {
	animation-name: none;
	transform: scale(1.15);
	opacity: 1;
	cursor: pointer;
}

.btn, .btnPlay {
    position: absolute;
	text-align: center;
	color: #071c47;
    font-size:  35px;
}

.btn {
    transition: transform 0.2s;
}

.btn:hover, .btn:focus, .btnPlay:hover, .btnPlay:focus {
	transform: scale(1.05);
	opacity: 1;
	cursor: pointer;
}

.btn:active, .btnPlay:active {
	transform: scale(1);
	opacity: 1;
	cursor: default;
}

.radarPickableDiv {
	position: absolute;
	background-image: url('../Images/Checkmark.png');
	background-repeat: no-repeat;
	background-position: center;
	background-size: initial;
	opacity: 0.0;
}

.shape-type-polygon {
	fill: transparent;
    fill-rule: evenodd;
}

.path-type-polyline {
	fill: none;
	stroke:transparent;
	stroke-width: 10px;
	fill-rule: evenodd;
}

#pickableDiv1Game1, #pickableDiv2Game1, svg a { cursor: default; background-color: transparent; fill: none; }

.PickedDiv {
	animation-name: fadeInOpacity;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}

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

/* Manage interaction with the scene */ 
#preventInteraction {
	margin: 0;
	z-index: 1000;
	visibility: hidden;
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
}

#curtain {
	z-index: -1000;
	background-color: #0a5386;
}

#Tutorial_Loading {
	z-index: 2000;
}

#Tutorial_Loading p {
	position: absolute;
    top: 90px;
    left: -190px;
    font-size: 32px;
	font-weight: bold;
	color: #fccf6b;
	line-height: normal;
	width: 500px;
	text-align:center; 
	vertical-align: middle;
	text-shadow: -1px 0 #000000, 0 1px #000000, 1px 0 #000000, 0 -1px #000000;
}

/* game drag */
div.CanDrag, .CanDrag, .CanDrag * {
    -ms-touch-action: none;
    touch-action: none;
}

.CanDrag {
	user-drag: auto;
}

/*
#Info {
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	z-index: 600;
}
*/

/* game scaner */
.Scanner .ScannerViewArea {
	position: absolute;
	overflow: hidden;
	left: 30px;
	top: 35px;
	width: 500px;
	height: 340px;
	background-color: #041644;
}

.Scanner {
	position: absolute;
	z-index: 20;
	width: 561px;
	height: 411px;
	transform: translate(1345px, 650px);
}

.ScannerOverlay {
	pointer-events: none;
	touch-action: none;
	position: absolute;
	z-index: 70;
	width: 561px;
	height: 411px;
	background-image:url('../Images/Cadre.png');
}

.XrayBg, .XrayParent {
	position: absolute;
	background-repeat: no-repeat;
	background-position: 0, 0;
	left: 0;
	top: 0;
}

.XrayParent {
	left: -30px;
	top: -35px;
	transform: translate(-1345px, -650px);
}

#preload {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0.1;
}

/* Personaj Animations */
.perso-animation, .perso-happy-animation {
	width: 3000%;
	height: 100%;
	background-size: 100%, 100%;
	background-repeat: no-repeat;
	animation-name: perso-fill;
	animation-duration: 1s;
	animation-timing-function: steps(29);
	animation-iteration-count: infinite;
	position: absolute;
	left: 0;
	top: 0;
}

.perso-animation {
	background-image: url('../Images/Anim_Idle/Anim_Idle_RADARSAT_Perso1.png');
}

.perso-happy-animation {
	background-image: url('../Images/Anim_Happy/Anim_Happy_RADARSAT_Perso1.png');
}

.perso-animation_wrapper {
	margin: 0;
	overflow: hidden;
	position: relative;	
}

@keyframes perso-fill {
	from { 
	  	transform: translateX(0); 
	}
	to { 
		transform: translateX(-96.6666666666%); 
	}
}
  
.ie .perso-animation, .ie .perso-happy-animation {
	transform: translate3d(0, 0, 0);
	animation-name: perso-fill-ie;
}

@keyframes perso-fill-ie {
	from {
		left: 0;
	}
	to {
		left: -2900%;
	}
}

.ScannerOverlay p {
	width: 100%;
	text-align: center;
	font-family: 'bitter';
	font-size: 20px;
	font-weight: normal;
	color: #ffffff;
	margin-top: 10px;
}