@font-face {
  font-family: OpenSans;
  src: url("../FONT/Open_Sans/OpenSans-Regular.ttf") ;
}




@font-face {
  font-family: akrobat;
  src: url(../FONT/akrobat/Akrobat-Regular.otf) ;
}
@font-face {
  font-family: akrobatBold;
  src: url(../FONT/akrobat/Akrobat-Bold.otf) ;
}
@font-face {
  font-family: akrobatBlack;
  src: url(../FONT/akrobat/Akrobat-Black.otf) ;
}

 


#MENU{ 
	
	position: absolute;
	right: 50px;
	top : 50px;
	width:30px;
	height: 5px;
	/*background-image:url("../images/menu_50.png");*/
	background-color: white;
	background-size: contain;
	background-position: center center;
	z-index: 900;
	
}

#menuMain{
	
	position: absolute;
	right: 50px;
	top : 85px;
	visibility:hidden;
	z-index: 900;
}

.menuBt:hover{
	
	opacity: 1;
	cursor: pointer;
	
}

.menuBt{
	height: 35px;
	line-height: 35px;
	witdh: 200px;
	opacity: 0.5;
	margin: 3px;
	text-align: right;
	
}

#MENU:hover{
	
	background-image:url("../images/menu_on.png");
	cursor: pointer;
}


body { 
	
	margin: 0%; 

	overflow: hidden;
	background-color: black; 
	color: #FFF ;
	padding: 0%;
	height: 100%;
   width: 100%;
	overflow: hidden;
	font-family: akrobat;
	
}

html {
   margin: 0px;

}




 
#DIV_MEDIA{

	opacity: 100%;
	width: 90%;
	height: 0%;
	top: 5%;
	left:5%;
	
	border-radius: 10px;
	position: absolute;
	z-index: 600;
	background-color: black;
	transition: top 02s, bottom 2s, left 2s, width 2s, height 2s, opacity 1s, border 2s, transform 2s;
	overflow: hidden;
	text-align: center;
	line-height: 90%;
	
}


.myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

#GLOABL_FRAME{

	

	opacity: 1;

	width: 100%;

	height: 100%;

	top : 0px;

	position: absolute;

	z-index: 50;

	/*background-color: red;*/

	transition: top 02s, bottom 2s, left 2s, width 2s, height 2s, opacity 1s, border 2s, transform 2s;

	overflow: hidden;

	



}


#DIV_BKG{

	width:100%;
	height: 100%;
	
	position: absolute;
	z-index: -1;
	background-color: black;
	/*background-image: radial-gradient(#102032,#030609, #000000);*/
	background-image: url("/MAIA_DIGITAL/DEV_V02/RESSOURCES/FOND_V14.jpg");*/
	
	
	
	background-repeat: no-repeat;
	color: #FFF;
	overflow: hidden;
	background-size:cover;
	background-position: center center ;
} 

#DEBUG
{
	
	text-align:  left bottom;
}

#DIV_LOADING{
	
	
	width:100%;
	height: 0;
	top:50%;
	position: absolute;
	z-index: 100;
	/*background-color: red;*/
	color: #FFF;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
	font-size: 20px;
	text-align: center;
	line-height: 100%;
	
	
}


 


#DIV_INFO{

	opacity: 0%;
	width: 400px;
	
	height: 100%;
	top : 5%;
	left: -50%;
	position: absolute;
	z-index: 300;
	background-color:rgba(0,0,0,0.0);
	transition: top 02s, bottom 2s, left 2s, width 2s, height 2s, opacity 3s, border 2s, transform 2s;
	font-family: akrobatBold;
	
}


@media  (max-width: 1000px) {
	
	#DIV_INFO{ 
		width: 100%;
		top : -20px;
		transform: scale(0.6);
		
		margin-left: -20%;
	}
}


#DIV_THREEJS_3D{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 5;
    /*background-color: red;*/
    color: #FFF;
    overflow: hidden;
    left: 4px;
	
	
}
#DIV_BT_BAS{
	
	
	height: 70px;
	position: absolute;
	bottom: 0px;
	padding: 5px;
	left :50%;
	width :200px;
	margin-left: -100px;
	
	z-index: 100;
	
	opacity: 0;
	transition: opacity 2s;
	
}




#DIV_LAYER_2D{
	
	opacity: 1;
	width: 100%;
	height: 00px;
	top : 0px;
	position: absolute;
	z-index: 50; 
	/*background-color: red;*/
	transition: top 02s, bottom 2s, left 2s, width 2s, height 2s, opacity 1s, border 2s, transform 2s;
	
}

#DIV_LAYER_SETTING{
	
	opacity: 1;
	width: 100%;
	height: 1px;
	top : 0px;
	position: absolute;
	z-index: 80;
	/*background-color: red;*/
	transition: top 02s, bottom 2s, left 2s, width 2s, height 2s, opacity 1s, border 2s, transform 2s;
	
}
#DIV_BT_HAUT{
	top:0px;
	left:0px;
	height: 50px;
	width: 100%;
	position: absolute;
	z-index: 70;
	padding: 20px; 

	
}



.loading{
	
	font-family: akrobat;
	opacity: 0;
	transition: opacity 2s;
	
}




.FullScreen{
	
	background-image: url("/ARIANNE_DEMO/images/circleMaximize.png");
	background-size: contain;
	width: 50px;
	height: 50px;
	right: 50px;
	position: absolute;
	
}




.lineUp {
	
	border-radius: 35px;
	background-color: #233287;
	/*width: auto;*/
	height: 30px;
	padding: 20px;
	padding-left: 30px;
	padding-right: 30px;

	transition: top 0.2s, bottom 0.2s, left 0.2s, right 0.2s, width 0.2s, height 0.2s, opacity 0.5s, border 2s, transform 0.5s;
}

.buttonRead {
	
	position: absolute;
	display: block;
	float: left;
	
	margin: 0px;
	margin-top: 15px;
	padding: 6px;
	padding-left: 0px;
	
	text-align: center;
	color:#dddddd ;
	font-family: akrobat;
	
 

	transition: background-color 0.5s, color 0.5s, padding-left 0.5s ;
}

.buttonRead:hover {
	
	background-color: #1352D1;
	cursor: pointer;
	color:#ffffff ;
	padding-left: 6px;
}

.button {
	

	background-color: #193463 ;
	padding: 6px;
	padding-left: 15px;
	padding-right: 15px;
	text-align: center;
	color:#dddddd ;
	font-family: akrobat;
	right:5px;
 

	transition: background-color 0.5s, color 0.5s ;
}


.button:hover {
	
	background-color: #1352D1;
	cursor: pointer;
	color:#ffffff ;
}

.trans{
	background-color:"";
	
}


.button2 {
	

	background-color: #555555 ;
	height: 30px;
	padding: 3px;
	padding-left: 10px;
	padding-right: 10px;

	transition: top 0.2s, bottom 0.2s, left 0.2s, right 0.2s, width 0.2s, height 0.2s, opacity 0.5s, border 2s, transform 0.5s;
}


.button2:hover {
	
	background-color: #1655FB;
	cursor: pointer;
	
}





.buttonFocus{
	
			
		
 -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
	
			
			font-family: akrobat;
			font-size : 25px;
			color:#FFF;
			opacity:1;
			cursor : pointer;
			margin-top: -20px;
			border-radius :50%;
			color:#aaaaaa;
	

			background-image: url("/MAIA_DIGITAL/DEV_V02/images/icone_plus_off.jpg");
			background-size: cover;
	
	transition: background-image 0.5s, color 0.5s, opacity 0.5s;
	
}

.buttonFocus:hover{
	

		background-image: url("/MAIA_DIGITAL/DEV_V02/images/icone_plus_on_1.jpg");
	color: white;

	 
	
}

@media  (max-width: 990px) {
	
	.buttonFocus{
		
		
		transform: scale(0.6); 
		 
	}
}

.buttonFocusTxt{
	
	opacity:0.9;
	margin-left: 40px;
	font-size: 15px;
	width: 300px;
	font-family: akrobat;

	height: 100%;
	line-height: 100%;
	
	transition: background-image 0.5s, color 0.5s, opacity 0.5s;
}

.buttonFocusTxt:hover{
	
	opacity:1;
	color: white;
	
}




.closeCross{
	
	
	background-image:  url("/MAIA_DIGITAL/DEV_V02/images/close_off.png");
	background-size: cover;
	transition: background-image 1s;
	
	
}




.closeCross:hover{
	
	
	background-image:  url("/MAIA_DIGITAL/DEV_V02/images/close_on_gris50.png");
	
	transition: background-image 1s;
}



.video {

float : right;
height : 80px;
width : 80px;
background-size: cover;
margin-Left: 10px;
border-Radius : 50px;
filter : saturate(0);
cursor: pointer;
}
opacity:100;
transition:  top 0.2s, bottom 0.2s, left 0.2s, right 0.2s, width 0.2s, height 0.2s, opacity 1s, border 1s, transform 0.5s"



.video:hover{
	
	filter: saturate(100);
	transition: width 0.2s, height 0.2s, opacity 0.5s, filter 0.5s, opacity 0.5s;
	opacity : 100;
	cursor: pointer;
}






.infoDiv{
	display: block;
	float: left;
	transition: top 02s, bottom 2s, left 2s, width 2s, height 2s, opacity 3s, border 2s, transform 2s;
	font-family: akrobatBold;
	font-size: 40;
	font-weight: 800;
}