﻿
@keyframes tiroiregauche_sortie {
0% {
		left:calc(50% - 480px);
		z-index: 7;
		height:100px;
		box-shadow: 0px 0px 0px 0 #999999;
		width:calc(50% - 490px);
	}
50% {
		left:7px;
		z-index: 7;
		height:100px;
		box-shadow: 0px 0px 0px 0 #999999;
	}
51% {
		left:7px;
		z-index: 10;
		height:100px;
		box-shadow: 0px 0px 0px 0 #999999;
		width:calc(50% - 490px);
	}
90% {
		z-index: 10;
		height:400px;
		/*width:calc(50% - 290px);
		/**/
		box-shadow: 10px 5px 20px 0 #999999;
	}
100%{
		left:10px;
		height:400px;
		box-shadow: 10px 5px 20px 0 #999999;
		width:450px;
	}
}
@keyframes tiroiregauche_retour {
0% {
		left:10px;
		height:400px;
		background-color: rgba(234,234,234,0.7);
		box-shadow: 10px 5px 20px 0 #999999;
		width:450px;
		z-index:10;
	}
25% {
		
		background-color: rgba(234,234,234,0.7);
		box-shadow: 10px 5px 20px 0 #999999;
		z-index:10;
		width:calc(50% - 490px);
}

50% {
		left:7px;
		height:100px;
		
		z-index:10;
}

51% {
		z-index:7;
}

100%{
		left:calc(50% - 480px);
		
	}
}

@-webkit-keyframes tiroiregauche_sortie {
0% {
		left:calc(50% - 480px);
		z-index: 7;
		height:100px;
		box-shadow: 0px 0px 0px 0 #999999;
	}
50% {
		left:7px;
		z-index: 7;
		height:100px;
		box-shadow: 0px 0px 0px 0 #999999;
	}
51% {
		left:7px;
		z-index: 10;
		height:100px;
		box-shadow: 0px 0px 0px 0 #999999;
	}
90% {
		z-index: 10;
		height:400px;
		box-shadow: 10px 5px 20px 0 #999999;
		
	}
100%{
		left:60px;
		height:400px;
		box-shadow: 10px 5px 20px 0 #999999;
	}
}
@-webkit-keyframes tiroiregauche_retour {
0% {
		left:60px;
		height:400px;
		background-color: rgba(234,234,234,0.7);
		box-shadow: 10px 5px 20px 0 #999999;
		z-index:10;
	}
25% {
		
		background-color: rgba(234,234,234,0.7);
		box-shadow: 10px 5px 20px 0 #999999;
		z-index:10;
}

50% {
		left:7px;
		height:100px;
		
		z-index:10;
}

51% {
		z-index:7;
}

100%{
		left:calc(50% - 480px);
		
	}
}

 #Flotant0 {
	/*font-family: "Century Gothic", "BankGothic Md BT,Euro Technic Extended", sans-serif;
	/*font-family: "Euro Technic Extended",Arial, Helvetica, sans-serif;
	/*font-family: Arial, Helvetica, sans-serif;
	/*font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	/*font-family:Tahoma, Geneva, sans-serif;
	/**/font-family: "Courier New", Courier,sans-serif;
	/*font-family:"Trebuchet MS", Helvetica, sans-serif;
	/*font-family:"Lucida Console", Monaco,sans-serif;
	/**/
	z-index:80;
	border-color: #999999;
    border-radius: 10px 10px 10px 10px;
    border-style: solid;
    border-width: thin;
    display: block;
    height: 100px;
    margin: 0 10px auto auto;
    min-height: 150px;
    min-width: 50px;
	width:calc(50% - 490px);
	left:calc(50% - 480px);
    position: fixed;
    top: 150px;/* <--- = top baniére0 + margin-top corps1*/
    z-index:7;
	/*animation:tiroiregauche_retour 2s 1 ease 0s ;
	/*-webkit-animation:tiroiregauche_retour 2s 1 ease 0s ;
	/**/
	text-align: center;
}

#Flotant0:before {
content:'';
position:absolute;
top:66px;
left:-13px;
width:0;
height:0;
border-bottom:6px solid transparent;
border-left:6px solid transparent;
border-right:6px solid rgba(0,0,0,.9);
border-top:6px solid transparent;
z-index:-10;
transition: left 1s;
}
#Flotant0:hover{

left:10px;
height:400px;
z-index:10;
width:450px;
background-color: rgba(234,234,234,0.7);
box-shadow: 10px 5px 20px 0 #999999;
/*transition:  z-index 0.1s 1s,height 1s 0.4s;*/
animation:tiroiregauche_sortie 2s 1 ease-out;
-webkit-animation:tiroiregauche_sortie 2s 1 ease-out;
}
#Flotant0:hover:before {
left:-6px;
border-right:6px solid rgba(0,0,0,0);
transition: left 1s, border-right 1s;
}
#Flotant1{
/*font-family: "Century Gothic", "BankGothic Md BT,Euro Technic Extended", sans-serif;
	/*font-family: "Euro Technic Extended",Arial, Helvetica, sans-serif;
	/*font-family: Arial, Helvetica, sans-serif;
	/*font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	/*font-family:Tahoma, Geneva, sans-serif;
	/**/font-family: "Courier New", Courier,sans-serif;
	/*font-family:"Trebuchet MS", Helvetica, sans-serif;
	/*font-family:"Lucida Console", Monaco,sans-serif;
	/**/
	position:fixed;
	/**/display:none;
	/**/
}
#en_construction{
	font-family: "Euro Technic Extended",Arial, Helvetica, sans-serif;
	margin: 15px 0 5px 0;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.95), 0 -1px 1px rgba(130, 130, 130, 0.8);
	font-size: 12px;
    letter-spacing: 2px;
	display: inline-block;
	/*display:none;
	/**/
}
#en_construction:after{
	content: url(../images/en_construction_NB.png);

}