.menu{
  width: 100%;
  margin: 0px; padding: 0px;
  list-style: none;
  counter-reset: li;
  background: none;
}

.menu:before,
.menu:after {
  content: "";
  display: table;
}

.menu:after {
  clear: both;
}

.menu {
  zoom:1;
}

/* -------------------------------- */        

.menu li {
  position: relative;
  cursor: pointer;
  float:left;
  height: 240px; width: 240px;
  /*margin: 10px 0 0 10px;*/
  color: #fff;
  outline: none;
  opacity:0;
}
.menu .menumain li {
	opacity:1;
}
.imgdepart{
	display:block;
	position:relative;
} 
.menu .cover{
  z-index: 2;
}

.menu .cover:focus{
  outline: 0;
}

/* -------------------------------- 

.menu li::after{
  content: counter(li);
  counter-increment: li;
  font: italic bold 10px serif, georgia;
  position: absolute;
  color: rgba(255,255,255,.1);
  opacity: 0;
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .2s ease-out;
  -ms-transition: all .2s ease-out; 
  -o-transition: all .2s ease-out;  
  transition: all .2s ease-out;    
}      

.menu li:hover::after, .menu li:focus::after{
  font-size: 100px;
  opacity: 1; 
}

.menu .cover::after{
  z-index: -1;
}

-------------------------------- */       

.menu li:nth-child(1),
.menu li:nth-child(2),
.menu li:nth-child(3){
  margin-top: 0;
}

.menu li:nth-child(1),
.menu li:nth-child(4),
.menu li:nth-child(7){
  margin-left: 0;      
}

/* -------------------------------- */       

#case1 .content
{
	background:#1e155d;
}         
#case2 .content{
	background:#fe4313;
}
#case3 .content{
	background:#7e7a00;
}
#case4 .content{
	background:#002b45;
}
#case5 .content{
	background:#a61f7d;
}
#case6 .content{
	background:#235937;
}
#case7 .content{
	background:#453135;
}
#case8 .content{
	background:#e23b30;
}
#case9 .content{
	background:#857362;
}
#case10 .content{
	background:#001e96;
}
#case11 .content{
	background:#545f1d;
}
.menu li:nth-child(12){
  background: url('../img/menu.png') no-repeat;
}
.menu li:nth-child(12) .content12{
	background:url('../img/logo-blanc.png') 25px 25px #004054 no-repeat;
}
/* -------------------------------- */

.menu .content, .menu .content12{
  opacity: 0; display: none\9;
  overflow: hidden;
  font: 12px 'trebuchet MS', Arial, Helvetica;
  position: absolute;
  height: 120px; width: 200px; /* Ideally: height: 100%; width: 100%; but works at it should just in FF */
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out; 
  -o-transition: all .3s ease-out;  
  transition: all .3s ease-out;      
}  

.menu .expanded{
  opacity: 1; display: block\9;
  overflow: visible;
  padding: 0px;
  height: 480px; width: 480px; /* Cover the entire area */
}
.menu #case12 .expanded{
	height: 720px !important;
}
.menu li:nth-child(2) .expanded, .menu li:nth-child(4) .expanded, .menu li:nth-child(8) .expanded, .menu li:nth-child(12) .expanded{ 
  left: 0;
  margin-left: -240px;
}
.menu #case9 .expanded, .menu li:nth-child(10) .expanded, .menu li:nth-child(11) .expanded{
	top:-240px !important;
}
.menu li:nth-child(12) .expanded{
	top:-480px;
}                


/* -------------------------------- */    

.menu .title{
  position: absolute;
  height: 100%; width: 100%;
  text-align: center;
  font: italic bold 1em/120px 'trebuchet MS', Arial, helvetica;
  opacity: .2;
}

.menu li:hover .title{
  opacity: .7;
}    

/* -------------------------------- */

.menu .close {
  display: none;
  cursor: pointer;
  height: 108px; width: 108px;
  position: absolute;
  text-align: center;
  top: 0px; right: 0px;      
}

.menu .cover .close{
  display: block;
}

.menu #case12 .close{
	right:15px  !important;
	top:685px !important;
	font-size:19px;
	text-align:right;
	font-family: "Trebuchet MS", sans-serif;
	background:url('../img/arrow.png') right bottom no-repeat;
	height:22px;
	color:#fff !important;
	padding-right:30px;
}
/*
.menu #case12 .content{
	overflow:auto;
}*/
/******************************************************************************************/
.menumain { padding: 110px 0 0 15px; clear: both;float:left; width:45%; margin-top:25px;}
.menumain li { display: block !important; width:200px; height:auto !important;}
.menumain li a { padding: 10px; float:left; text-decoration: none; color: #fff; font-weight: normal; font-family: 'Arial', sans-serif; font-size:17px; text-transform:uppercase; outline:none;}
.menumain li.active a { color:#ff3333 !important; font-weight: bold; outline: none;}
.contentmenu { float: left; background: none; width: 48%; margin-top:25px; padding-right:10px; line-height:20px; text-align:left;}
.contentmenuprod { float: left; background: none; width: 48%; margin-top:25px; padding-right:10px; line-height:18px; text-align:left;}
.contentmenubenef { float: left; background: none; width: 48%; margin-top:25px; padding-right:10px; line-height:22px; text-align:left;}