@charset "utf-8";
/* CSS Document */

#resos {
	z-index: 1;
	width: 235px;
	height:240px;
	overflow:hidden;
	position:relative;
	left: 500px;
	top: -37px;
}
#resos dl {
	color: #333;
    text-transform: uppercase;
    font-size: 14px;
	position:relative;
	top:75px;
	left:50%;
	margin-left:-75px;
	width:150px;
	height: 90px;
	text-align:center;
	background: rgba(255,255,255,0.9);
	-webkit-box-shadow:0px 0px 6px rgba(0,0,0,0.2);
	box-shadow:0px 0px 6px rgba(0,0,0,0.2);
	-webkit-transform-origin:50% 60px;
	-moz-transform-origin:50% 60px;
	-ms-transform-origin:50% 60px;
	-o-transform-origin:50% 60px;
	transform-origin:50% 60px; 
	-webkit-animation:bounceOut 0.7s ease-in-out;
	-moz-animation:bounceOut 0.7s ease-in-out;
	-ms-animation:bounceOut 0.7s ease-in-out;
	-o-animation:bounceOut 0.7s ease-in-out;
	animation:bounceOut 0.7s ease-in-out;
}
#resos dt {
	position:absolute;
	bottom:0px;
	width:100%;
	height:25px;
	padding-top:5px;
}
#resos dd {
	color: #333;
	text-align:left;
	-webkit-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	-o-transform:rotate(180deg);
	transform:rotate(180deg);
	-webkit-transition-property: background-color, padding-left;
	-webkit-transition-duration: .5s, .3s;
	-webkit-transition-timing-function: linear, ease-out;
	-moz-transition-property: background-color, padding-left;
	-moz-transition-duration: .5s, .3s;
	-moz-transition-timing-function: linear, ease-out;
	transition-property: background-color, padding-left;
	transition-duration: .5s, .3s;
	transition-timing-function: linear, ease-out;
}
#resos dd a {
	color: #333;
	display:block;
	height:24px;
	padding:3px 20px;
	 /*324040*/
	text-decoration:none;
}
#resos dd a:hover {
	color: #fff;
}
#resos dd:hover {
	color: #fff;
	padding-left: 10px;
    background: #333;
}
#resos dl:hover {
	-webkit-transform:rotate(-180deg);
	-moz-transform:rotate(-180deg);
	-mstransform:rotate(-180deg);
	-o-transform:rotate(-180deg);
	transform:rotate(-180deg);
	-webkit-animation:bounceIn 0.7s ease-in-out;
	-moz-animation:bounceIn 0.7s ease-in-out;
	-ms-animation:bounceIn 0.7s ease-in-out;
	-o-animation:bounceIn 0.7s ease-in-out;
	animation:bounceIn 0.7s ease-in-out;
}
#resos dl.menu {
     position: absolute;
     top: 20px;
     transform-origin: 50% 115px;
}
#resos dl.reso dd {
     transform: rotate(180deg);
}
@-webkit-keyframes bounceIn {
	from {-webkit-transform:rotate(0deg);}
	75%{-webkit-transform:rotate(-200deg);}
	90%{-webkit-transform:rotate(-175deg);}
	to {-webkit-transform:rotate(-180deg);}
}
@-moz-keyframes bounceIn {
	from {-moz-transform:rotate(0deg);}
	75%{-moz-transform:rotate(-200deg);}
	90%{-moz-transform:rotate(-175deg);}
	to {-moz-transform:rotate(-180deg);}
}
@-ms-keyframes bounceIn {
	from {-ms-transform:rotate(0deg);}
	75%{-ms-transform:rotate(-200deg);}
	90%{-ms-transform:rotate(-175deg);}
	to {-ms-transform:rotate(-180deg);}
}
@keyframes bounceIn {
     from {transform: rotate(0deg);}
     75%  {transform: rotate(-200deg);}
     90%  {transform: rotate(-175deg);}
     to   {transform: rotate(-180deg);}
}
@-o-keyframes bounceIn {
	from {-o-transform:rotate(0deg);}
	75%{-o-transform:rotate(-200deg);}
	90%{-o-transform:rotate(-175deg);}
	to {-o-transform:rotate(-180deg);}
}
div.reso {
     animation: bounceOut 0.7s ease-in-out;
}
@-webkit-keyframes bounceOut {
	from {-webkit-transform:rotate(-360deg);}
	0% {-webkit-transform:rotate(-180deg);}
	10%{-webkit-transform:rotate(-160deg);}
	to {-webkit-transform:rotate(-360deg);}
}
@-moz-keyframes bounceOut {
	from {-moz-transform:rotate(-360deg);}
	0% {-moz-transform:rotate(-180deg);}
	10%{-moz-transform:rotate(-160deg);}
	to {-moz-transform:rotate(-360deg);}
}
@-ms-keyframes bounceOut {
	from {-ms-transform:rotate(-360deg);}
	0% {-ms-transform:rotate(-180deg);}
	10%{-ms-transform:rotate(-160deg);}
	to {-ms-transform:rotate(-360deg);}
}
@-o-keyframes bounceOut {
	from {-o-transform:rotate(-360deg);}
	0% {-o-transform:rotate(-180deg);}
	10%{-o-transform:rotate(-160deg);}
	to {-o-transform:rotate(-360deg);}
}
@keyframes bounceOut {
     from {transform: rotate(-360deg);}
     0%   {transform: rotate(-180deg);}
     10%  {transform: rotate(-160deg);}
     to   {transform: rotate(-360deg);}
}
#resos .masque {
	position:absolute;
	z-index:50;
	width: 270px;
	/*height:135px;*/
	height:100px;
	top:35px;
	left:0px;
	background:#FF6600;
}

#resos .ombre {
	position:absolute;
	z-index:40;
	width:240px;
	height:6px;
	top:133px;
	margin-top:-103px;
	left:0px;
	-webkit-box-shadow:0px 0px 6px rgba(0,0,0,0.2);
	box-shadow:0px 100px 3px rgba(0,0,0,0.2);
	border-radius:75px 75px 75px 75px / 3px 3px 3px 3px;
}