.navigation {
	
	margin:4em auto;
    border-radius:10px;
	text-align:right;
	
}
.navigation .intersection, .navigation:hover .intersection:focus {
	
	height:43px;
	position:relative;
	overflow:hidden;
	
	transition:5s;
	transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
}
.menu2 .navigation .intersection:hover ,.menu2 .navigation .intersection:focus {
	
	transition:5s;
	transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
	height:225px;
}
.menu1 .navigation .intersection:hover ,.menu1 .navigation .intersection:focus {
	
	transition:5s;
	transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
	height:305px;
}
.menu3 .navigation .intersection:hover ,.menu3 .navigation .intersection:focus {
	
	transition:5s;
	transition-timing-function: cubic-bezier(0.00,0.01,0.00,1.00);
	height:auto;
}

.navigation .intersection:before {
	content:attr(title);
	text-transform: uppercase; letter-spacing: 4px;

	border-radius:10px;
	text-align:center;
	width:320px;
	position:absolute;
	top:0;
	left:0;
	font-size:17px;
	font-weight:bold;
	color:#ffa43d;

	font-family: Poppins, "Avant Garde", Avenir, sans-serif;

		}
	
.menu-ville:before {
	content:attr(title);
	text-transform: uppercase; letter-spacing: 3px;
    padding:10px;
	border-radius:10px;
	text-align:center;
	position:absolute;
	top:0;
	left:0;
    right:0;
	font-size:17px;
	font-weight:bold;
	color:#ff5722;

	font-family: Poppins, "Century Gothic", "Avant Garde", Avenir, sans-serif;
	
	
	width:300px;
margin:auto;
background-color:white;
border:0px solid #000000;
border-radius:20px 20px 20px 20px ;
		}	

	
/*écran moyen */		
@media screen and (max-width: 900px)
{
.navigation .intersection:before
 {
 width:250px;
font-size:12px;
letter-spacing: 2px;
}
.navigation .intersection, .navigation:hover .intersection:focus {	
height:43px;	
}

.menu1 .navigation .intersection:hover ,.menu1 .navigation .intersection:focus
{
z-index: 10;
background-color:white;
height:390px;
border-radius:22px;
}
.menu2 .navigation .intersection:hover ,.menu2 .navigation .intersection:focus
{
height:310px;
background-color:white;
border-radius:22px;
}
.menu3 .navigation .intersection:hover ,.menu3 .navigation .intersection:focus
{
z-index: 10;
height:auto;
}	
}	
	
/*portable petit */
@media screen and (max-width: 530px)
{
.navigation .intersection:before
 {
 width:220px;
font-size:12px;
letter-spacing: 2px;
}
.navigation .intersection, .navigation:hover .intersection:focus {	
height:43px;	
}
}