body {	
	margin:0;
	padding:0;	
	font-family:arial;
	background-color:rgba(255,255,255,1.0);
	overflow:hidden;
}

.noselect {
  -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; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

.big-container {
	position:absolute;
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	background-color:rgba(255,255,255,1.0);
}

.container {
	width: 100vw; 
    height: 56.25vw;
	max-height: 100vh;
    max-width: 177.8vh; /* 16/9 = 1.778 */
    margin: auto;
    position: absolute;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
}

#canvas {
	position:absolute;
	top:0;
	left:0;
	margin:0;
	padding:0;
	visibility:visible;
	-ms-touch-action:none;
}

.Loader{
	width:100%;
	height:100%;
	margin: auto;
    position: absolute;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
	display:block;
	background-color:rgba(255,255,255,0.75);
	overflow:hidden;
}

.loaderCircle {
	position: absolute;	
	margin: auto;
    top:0;bottom:0; /* vertical center */
    left:0;right:0; /* horizontal center */
	width:3.3vw;
	height:3.3vw;
	padding-bottom:6.25vw;
	transform-origin: 1.65vw 1.65vw;
	animation: rotating 1.5s linear 0s infinite; 
}

 @keyframes rotating {
          from { transform: rotate(0deg); }
          to { transform: rotate(-360deg); }
          }

.loaderVisio {
	position: absolute;
    top:0;bottom:0; /* vertical center */
	left:0;right:0; /* horizontal center */
	width:10.42vw;
	height:auto;
	margin:auto;
	padding-top:6.25vw;
}

#GUI{
	position:absolute;
	bottom:0px;
	left:0px;
	margin:0;
	padding:0;
	pointer-events: none;
}

#GUI_Haut{
	position:absolute;
	top:0px;
	left:0px;
	margin:0;
	padding:0;
	pointer-events: none;
}

#loader {
	position:absolute;
	top:0;
	left:0;	
	right:0;
	bottom:0;
	width:100vw;
	height:100vh;
	visibility:visible;
	z-index:10;
	background-color:rgba(255,255,255,0.0);
}

#btZoomMoins{
	cursor:pointer;
}

#btZoomPlus{
	cursor:pointer;
}

#btLoupe{
	cursor:pointer;
}

#infoBulleLoupe{
	opacity:0.0;
}

/* Autre */

.transparent {
	fill: rgba(255,255,255,0);
}

.infobulle {
	stroke: rgba(255,255,255,1);
	fill: rgba(51,102,153,0.7);
}

.fondBt{
    fill: #333437;
}

.grisZoom {
    fill: #6f737b;
}

.gris{
	fill: #3E3F44;
}

.blancZoom {
    fill: #ffffff;
}

.barreZoom{
	position:absolute;
	right:0px;
	bottom:0px;
	width:100%;
	height:auto;
	margin:0;
	padding:0;
	z-index:555;
}

.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#333437;}
.st1{fill:#858A92;}
.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
.st3{fill:#FFFFFF;}

.blanc {
	fill: #fff;
}

.btActive{
	cursor:pointer;
	pointer-events: auto;
}

#loader-canvas {
        display: block;
        position: relative;
        left: 50%;
        top: 50%;
        width: 150px;
        height: 150px;
        margin: -75px 0 0 -75px;
		
        border: 3px solid transparent;		
		border-top-color: #606d75;
		border-radius: 50%;
        z-index: 1500;		
		
		-webkit-animation: spin 1.5s linear infinite;
		animation: spin 1.5s linear infinite;
}

#loader-canvas:before {
    content: "";
    position: absolute;
    top: 6px;
    left: 6px;
    right: 6px;
    bottom: 6px;
    border: 3px solid transparent;
	border-top-color: #c8591e;
	border-radius: 50%;
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}
#loader-canvas:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border: 3px solid transparent;
	border-top-color: #1b8159;
	border-radius: 50%;
	
	-webkit-animation: spin 3s linear infinite;
	animation: spin 3s linear infinite;
}

/* include this only once */
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}

#loaderView {
	position:absolute;
	display:block;
	left:0%;
	bottom:0%;
	width:100%;
	height:100%;
	overflow:hidden;
	opacity:1.0;
}

#loadingTxt {
	position:absolute;
	display:block;
	color:rgba(69,63,72,1.0);
	left:50%;
	top:50%;
	height:36px;
	width:150px;
	margin: -18px 0 0 -75px;
	color:black;
	font-size:24px;
	font-family:arial;
	text-align:center;
	line-height:36px;
	vertical-align:middle;
}

#btFermer {
	position:absolute;
	display:block;
	top:32px;
	right:5px;
	width:40px;
	height:40px;	
	transform:scale(1);
	transform-origin:top right;
	cursor: pointer;
}

.imgFull{
	display:block;
	position:absolute;
	left:0;
	right:0;
	border:0;
	width:100%;
	height:100%;
}