/* CSS Document */

/* ===[ Common styles of menus ]=== */
.dl-menuwrapper {width: 30%; min-width:140px; z-index:100;  top: 6px; right: 5px; position:absolute; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: 50% 200%; -moz-perspective-origin: 50% 200%; perspective-origin: 50% 200%; }
.dl-menuwrapper button { z-index:1000; background: #fff; border: none; width: 40px;  overflow: hidden; position: relative; float:right; cursor: pointer; outline: none; }
.dl-menuwrapper button:hover:before, .dl-menuwrapper button.dl-active:before, .dl-menuwrapper ul { color:#000; }
.dl-menuwrapper button:before {font-family:"icomoon";content:'\e605'; color:#2db8c1;font-size:34px;}
.dl-menuwrapper ul { padding: 0; list-style: none; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; }
#dl-menu.dl-menuwrapper li { width: inherit; position: relative; border-bottom: 1px solid #dbdcdd; }
#dl-menu.dl-menuwrapper li a:before {font-family:"icomoon";content:'\e600';padding-right:5px;color:#2DB8C1; font-size:10px; top:-1px; position:relative;}
.dl-menuwrapper li a { display: block;padding:2%; position: relative;color: #2f3133;outline:none;background:#fff;}
.dl-menuwrapper .dl-submenu a { padding:2%;}

.no-touch .dl-menuwrapper li a:hover, .no-touch .dl-menuwrapper li a.menu_actif { color: #2db8c1 }
/* BG Retour
   ================================================== */
#dl-menu.dl-menuwrapper li.dl-back > a { background: #FCC100;color: #000;}

#dl-menu.dl-menuwrapper li.dl-back > a:before {font-family: 'icomoon'; speak: none; color: #fff; -webkit-font-smoothing: antialiased; content: "\e601";}
.dl-menuwrapper li.dl-back > a:hover { color: #fff }
.dl-menuwrapper li.dl-back:after, .dl-menuwrapper li > a:not(:only-child):after { position: absolute; top: 3px; line-height: 25px;  }
.dl-menuwrapper li > a:hover:not(:only-child):after { color: #FCC100 }
.dl-menuwrapper li.dl-back:after { left: 10px; color: #000; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg); }
.dl-menuwrapper li > a:after { right: 10px; color: #000; }
.dl-menuwrapper .dl-menu { margin: 12px 0 0 0; position: absolute; width: 100%; opacity: 0; pointer-events: none; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); transform: translateY(10px); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; }
.dl-menuwrapper .dl-menu.dl-menu-toggle { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; }
.dl-menuwrapper .dl-menu.dl-menuopen { opacity: 1; pointer-events: auto; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); }
/* ===[ Hide the inner submenus ]=== */
.dl-menuwrapper li .dl-submenu { display: none }
/** 
 * When a submenu is openend, we will hide all li siblings.
 * For that we give a class to the parent menu called "dl-subview".
 * We also hide the submenu link. 
 * The opened submenu will get the class "dl-subviewopen".
 * All this is done for any sub-level being entered.
 */
.dl-menu.dl-subview li, .dl-menu.dl-subview li.dl-subviewopen > a, .dl-menu.dl-subview li.dl-subview > a { display: none }
.dl-menu.dl-subview li.dl-subview, .dl-menu.dl-subview li.dl-subview .dl-submenu, .dl-menu.dl-subview li.dl-subviewopen, .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu, .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li { display: block }
/* ===[ Dynamically added submenu outside of the menu context ]=== */
.dl-menuwrapper > .dl-submenu { position: absolute; width: 100%; top: 50px; left: 0; margin: 0; }
/* ===[ Animation classes for moving out and in ]=== */
.dl-menu.dl-animate-out-1 { -webkit-animation: MenuAnimOut1 0.4s; -moz-animation: MenuAnimOut1 0.4s; animation: MenuAnimOut1 0.4s; }
@-webkit-keyframes MenuAnimOut1 { 
	50% { -webkit-transform: translateZ(-250px) rotateY(30deg) }
	75% { -webkit-transform: translateZ(-372.5px) rotateY(15deg); opacity: .5; }
	100% { -webkit-transform: translateZ(-500px) rotateY(0deg); opacity: 0; }
}

@-moz-keyframes MenuAnimOut1 { 
	50% { -moz-transform: translateZ(-250px) rotateY(30deg) }
	75% { -moz-transform: translateZ(-372.5px) rotateY(15deg); opacity: .5; }
	100% { -moz-transform: translateZ(-500px) rotateY(0deg); opacity: 0; }
}

@keyframes MenuAnimOut1 { 
	50% { transform: translateZ(-250px) rotateY(30deg) }
	75% { transform: translateZ(-372.5px) rotateY(15deg); opacity: .5; }
	100% { transform: translateZ(-500px) rotateY(0deg); opacity: 0; }
}

.dl-menu.dl-animate-in-1 { -webkit-animation: MenuAnimIn1 0.3s; -moz-animation: MenuAnimIn1 0.3s; animation: MenuAnimIn1 0.3s; }
@-webkit-keyframes MenuAnimIn1 { 
	0% { -webkit-transform: translateZ(-500px) rotateY(0deg); opacity: 0; }
	20% { -webkit-transform: translateZ(-250px) rotateY(30deg); opacity: 0.5; }
	100% { -webkit-transform: translateZ(0px) rotateY(0deg); opacity: 1; }
}

@-moz-keyframes MenuAnimIn1 { 
	0% { -moz-transform: translateZ(-500px) rotateY(0deg); opacity: 0; }
	20% { -moz-transform: translateZ(-250px) rotateY(30deg); opacity: 0.5; }
	100% { -moz-transform: translateZ(0px) rotateY(0deg); opacity: 1; }
}
@keyframes MenuAnimIn1 { 
	0% { transform: translateZ(-500px) rotateY(0deg); opacity: 0; }
	20% { transform: translateZ(-250px) rotateY(30deg); opacity: 0.5; }
	100% { transform: translateZ(0px) rotateY(0deg); opacity: 1; }
}

.dl-menuwrapper > .dl-submenu.dl-animate-in-1 { -webkit-animation: SubMenuAnimIn1 0.4s ease; -moz-animation: SubMenuAnimIn1 0.4s ease; animation: SubMenuAnimIn1 0.4s ease; }
@-webkit-keyframes SubMenuAnimIn1 { 
	0% { -webkit-transform: translateX(50%); opacity: 0; }
	100% { -webkit-transform: translateX(0px); opacity: 1; }
}

@-moz-keyframes SubMenuAnimIn1 { 
	0% { -moz-transform: translateX(50%); opacity: 0; }
	100% { -moz-transform: translateX(0px); opacity: 1; }
}

@keyframes SubMenuAnimIn1 { 
	0% { transform: translateX(50%); opacity: 0; }
	100% { transform: translateX(0px); opacity: 1; }
}

.dl-menuwrapper > .dl-submenu.dl-animate-out-1 { -webkit-animation: SubMenuAnimOut1 0.4s ease; -moz-animation: SubMenuAnimOut1 0.4s ease; animation: SubMenuAnimOut1 0.4s ease; }
@-webkit-keyframes SubMenuAnimOut1 { 
	0% { -webkit-transform: translateX(0%); opacity: 1; }
	100% { -webkit-transform: translateX(50%); opacity: 0; }
}

@-moz-keyframes SubMenuAnimOut1 { 
	0% { -moz-transform: translateX(0%); opacity: 1; }
	100% { -moz-transform: translateX(50%); opacity: 0; }
}

@keyframes SubMenuAnimOut1 { 
	0% { transform: translateX(0%); opacity: 1; }
	100% { transform: translateX(50%); opacity: 0; }
}
/* ===[ No JS Fallback ]=== */
.no-js .dl-menuwrapper .dl-menu { position: relative; opacity: 1; -webkit-transform: none; -moz-transform: none; transform: none; }
.no-js .dl-menuwrapper li .dl-submenu { display: block }
.no-js .dl-menuwrapper li.dl-back { display: none }
.no-js .dl-menuwrapper li > a:not(:only-child) { background: rgba(0,0,0,0.1) }
.no-js .dl-menuwrapper li > a:not(:only-child):after { content: '' }
/* ===[ Colors for demos ]=== */