#menu-wrap
	{
		text-align: center;
		font-family:'Open Sans',sans-serif;
		font-size:0px; /* trick: http://stackoverflow.com/questions/20106428/why-does-inline-block-cause-this-div-to-have-height*/
		background:rgb(15,48,82);
		z-index:16383;
	}
	
	/* ul mini reset */
	#menu, #menu ul
	{
		margin: 0;
		padding: 0;
		list-style: none;
		white-space:nowrap;
		font-size:14px;
	}
	
	#menu
	{
		text-align:left;
		margin: 0px auto;
		background-color: rgb(15,48,82);
	}
	
	#menu >li
	{
		display:table-cell;
		/*box-shadow: 1px 0 0 #111111, 2px 0 0 #666666;*/
		border-left:1px solid #666666;
		z-index:16383;
	}
	
	#menu li:last-child
	{   
		border-right:1px solid #666666;
		box-shadow: none;
	}
	
	#menu a
	{
		display:table-cell;
		position:relative;
		
		padding: 10px 12px;
		color: #FFCB60;
		text-decoration: none;
		z-index:16383;
	}
	
	#menu .submenu0
	{
		position:relative;
		z-index:16383;
	}
	
	#menu .submenu
	{
		position:relative;
		z-index:16383;
	}
	
	#menu ul
	{
		position:absolute;
		top:0;
		left:0;
		display:table-row;
		
		background: #444444;
		background: linear-gradient(#102C54, #0C213F);
		/*box-shadow: 0 -1px 0 rgba(255,255,255,.3);*/
	}
	
	#menu ul li
	{
		display:table-row; /* block doesn't work (too short) */
		z-index:16383;
	}

	#menu ul li:last-child a
	{
		box-shadow: none;
		z-index:16383;
	}

	#menu ul li a
	{
		/*box-shadow: 0 1px 0 #111111, 0 2px 0 #666666;*/ /* box-shadow doesn't work with table-row */
		z-index:16383;
	}

	#menu ul a
	{
		padding: 10px;
		text-transform: none; /* Remove underline */
	}

	#menu ul a:hover
	{
		background-image: linear-gradient(#333333, #222222);
	}
	
	/* Arrondi supérieur de bloc illuminé */
	#menu ul li:first-child > a
	{
	}
	
	#menu li:hover > a
	{
		color: #FF4D06;/*#bdbdff;*/
		background-color:black;
	}
	
	#menu div
	{
		opacity: 0;
		visibility: hidden;
		transition: all .2s ease-in-out;
	}
	
	#menu li:hover > div
	{
		opacity: 1;
		visibility: visible;
		margin: 0;
	}
	
	@media screen and (max-width:640px)
	{
		.reduceable
		{
			display:none;
		}
	}
	
	
/* ------------------------------------------------------------------------- */

@media screen and (min-width: 600px)
{
	#menu-trigger { /* Hide it initially */
		display: none;
	}
	
	#menu
	{
		display:inline-block !important;
	}

	#menu .submenu0
	{
		display:block;
	}
	
	#menu .submenu
	{
		display:table-cell !important;
	}
	
	/* Triangle supérieur */
	#menu ul li:first-child > a:after
	{
		content: '';
		position: absolute;
		left: 25px;
		top: -6px;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 6px solid #102C54;
	}
	
	/* Triangle latéral */
	#menu ul ul li:first-child a:after
	{
		left: -6px;
		top: 20px;
		margin-top: -6px;
		border-left: 0;	
		border-bottom: 6px solid transparent;
		border-top: 6px solid transparent;
		border-right: 6px solid #102C54;
	}
	
	/* Triangle supérieur en cas d'illumination */
	#menu ul li:first-child a:hover:after
	{
		border-bottom-color: #444444; 
	}
	
	/* Triangle latéral gauche en cas d'illumination */
	#menu ul ul li:first-child a:hover:after
	{
		border-right-color: #0299d3; 
		border-bottom-color: transparent; 	
	}
	
	/* Arrondi inférieur de bloc illuminé */
	#menu ul li:last-child > a
	{
	}

	#menu li:hover >a .menu-arrow::before
	{
		visibility: hidden;
	}

}

@media screen and (max-width: 600px)
{
    #menu-wrap
	{
        position: relative;
    }

    #menu-wrap *
	{
        box-sizing: border-box;
    }

	#menu
	{
        display: none;
    }
	
	#menu .submenu0
	{
		display:none;
	}
	
	#menu .submenu
	{
		display:none;
	}
	
    #menu-trigger
	{
        display: block;
		font-size:13px;
		text-align:left;
        height: 40px;
        line-height: 40px;
        cursor: pointer;        
        padding: 0 0 0 5px;
        border: 1px solid #222;
        color: #fafafa;
        font-weight: bold;
        background-color:rgb(15,48,82);
 		/*border-radius: 6px;*/
        /*box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;*/
		border-bottom:1px solid #666666;
    }

	#menu-trigger .heaven
	{
		font-size:20px;
	}

    #menu
	{
        margin: 0;
		padding: 0px;
        position: absolute;
        top: 40px;
        width: 100%;
        z-index: 1;
/*        display: none;*/
        box-shadow: none;       
    }

/*    #menu:after
	{
        content: '';
        position: absolute;
        left: 25px;
        top: -8px;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 8px solid #444;
    }  */

	#menu .submenu0
	{
		padding-left:20px;
	}
	
	#menu .submenu
	{
		padding-left:20px;
	}
	
	#menu div
	{
		visibility: visible;
		opacity: 1;
	}
	
    #menu ul
	{
        position: static;
        visibility: visible;
        opacity: 1;
        margin: 0;
        background: none;
        box-shadow: none;               
    }

    #menu ul ul
	{
        margin: 0 0 0 20px !important;
        box-shadow: none;   
		font-size:13px;
    }

    #menu li
	{
        position: static;
        display: block;
        float: none;
        border: 0;
        margin: 5px;
        box-shadow: none;           
    }

    #menu ul li
	{
        margin-left: 20px;
        box-shadow: none;       
    }

    #menu a
	{
        display: block;
        float: none;
        padding: 0;
        color: #FFCB60;
    }

    #menu a:hover
	{
        color: #fafafa;
    }   

    #menu ul a
	{
        padding: 0;
        width: auto;        
    }

	#menu ul a:hover
	{
		background-image: none;
	}
	
	#menu li:hover > a
	{
		color: #FF4D06;/*#bdbdff;*/
		background-color:rgb(15,48,82);
	}

	#menu li:last-child
	{   
		border-right:0;
	}
	
    #menu ul li:first-child a:after,
    #menu ul ul li:first-child a:after
	{
        border: 0;
    }

	#menu .menu-arrow::after
	{
		content:'▼';
		margin:0 7px;
		padding-top:5px;
		font-weight: bold;
	}
	
	#menu li:hover >a .menu-arrow::after
	{
		content:'▲';
		margin:0 7px;
		padding-top:5px;
		font-weight: bold;
	}

}

/* iPad */
.no-transition {
    transition: none;
    opacity: 1;
    visibility: visible;
    display: none;          
}

#menu li:hover > .no-transition {
    display: block;
}