@charset "UTF-8";

.panel:target{
	opacity: 1;
	margin-left: 0%;
	z-index: 2;
	webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	-ms-transition: all .6s ease-in-out;
	transition: all .6s ease-in-out;
	height:100%;
	
}

.panel{
	
	overflow-x: hidden;
	overflow-y: hidden;
	overflow: hidden;
	position: relative;
	height:0%;
	padding-left: 10px;
	/*background-color: #87cfe6;*/
	/*box-shadow: 0px 4px 7px rgba(0,0,0,0.6);*/
	opacity: 0;
	background-color: #303;
	border-radius: 10px;
  	background: url(../img/pramax1.jpg) no-repeat  ; 
  	-webkit-background-size: cover; /* pour Chrome et Safari */
 	 -moz-background-size: cover; /* pour Firefox */
 	 -o-background-size: cover; /* pour Opera */
 	 background-size: cover; /* version standardisée */
	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
	-o-transition: all .6s ease-in-out;
	-ms-transition: all .6s ease-in-out;
	transition: all .6s ease-in-out;
	visibility: inherit;
}


.panelbio{
	overflow-y: hidden;
	overflow-x: hidden;
	position: absolute;
	opacity: 0;
	z-index: 0;
	height: 0%;
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	-ms-transition: opacity 1s ease-in-out;
	-webkit-transition: opacity .6s ease-in-out;
	/* [disabled]line-height: 20px; */
}

.panelbio:target{
	opacity: 1;
	/* [disabled]margin-top: 20px; */
	z-index: 2;	
	height:100%;
	position: relative;
	
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	-ms-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
	
}