/* //////////////////////////////////////// menu boutton //////////////////////////////////////// */
.col-sm-4 {margin-top:30px;background-color: #050112;}
.col-sm-1 {margin-top:30px;background-color: #050112;}
.button{
     	height:40px;	
}
ul 		{
		height: 100%;
    	list-style-type:none;
		margin-top:0;		
  		margin-left: auto;	
  		margin-right: auto;
		width: 100%;
		overflow: hidden; 
 }
li {	font-size: 1.2em;color: #8c8a8c;}
ul li a {    	
 		position: absolute; /* postulat de départ */
  		top: 50%; left: 50%; /* à 50%/50% du parent référent */
  		transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
	  	margin-left: auto;	
  		margin-right: auto;
		width: 95%;
		height: 100%;
		padding:5px;
		text-align:center;
    	color: #8c8a8c;
   		text-decoration:none;
    	border:2px solid;
    	border-color:#DCDCDC #696969 #696969 #DCDCDC;
		border-top-left-radius: 5pt;
 }
ul li a:hover {
    	background-color:#8c8a8c;
    	color: White;
		padding:5px;	
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media (max-width: 50em) {
ul 		{
		height: 100%;
    	list-style-type:none;
		margin-top:0;		
  		margin-left: auto;	
  		margin-right: auto;
		width: 50%;
		overflow: hidden; 
 }
li {	font-size: 1.2em;color: #8c8a8c;}
ul li a {    	
 		position: absolute; /* postulat de départ */
  		top: 50%; left: 50%; /* à 50%/50% du parent référent */
  		transform: translate(-50%, -50%); /* décalage de 50% de sa propre taille */
	  		margin-left: auto;	
  			margin-right: auto;
		width: 45%;
		height: 100%;
		padding:5px;
		text-align:center;
    	color: #8c8a8c;
   		text-decoration:none;
    	border:2px solid;
    	border-color:#DCDCDC #696969 #696969 #DCDCDC;
		border-top-left-radius: 5pt;
	
	/*background-color: blue;*/
 }
ul li a:hover {
    	background-color:#8c8a8c;
    	color: White;
		padding:5px;	
}
}

/* ////////////////////////////////////////////////////////////////////////////////////////////// */