div {
box-sizing:border-box;
font-family: Verdana, Arial, Helvetica;
}

#menu{
border: 1px solid #cccccc;
}

.phl,.phl1{
position:relative;
border-right:1px solid #4F5F6A;
width:350px;
margin:0px 0px 0px 0px; /*top right bottom left  */
padding: 8px 20px 0px 2px; /* top right bottom left */
cursor:pointer;
opacity: 1.6;
transition: .5s;
}

.phl:hover .str {
  -webkit-transform: scaleX(2);
  -ms-ransform: scaleX(2);
  transform: scaleX(18);
  opacity: 1.0;
}

.phl:hover {
  background:#192632;
  opacity: 1.0;
}

.phl1{
border-left:1px solid #eeeeee;
}



.mnp, .mnp1, .mnftt{
text-align:left;
padding-top:0px;
padding-left:5px;
border:0px solid #eeeeee;
text-decoration:none;
color:#eeeeee;
transition: .5s;
}


.mnp1 {
padding-top:-3px;
padding-bottom:5px;
}
.mnp1 > a{
padding-bottom:3px;
text-align:left;
text-decoration:none;
color:#eeeeee;
}

.phl:hover .mnftt{
color:#6666ff;
}

nav#menu {

display:flex; flex-wrap:wrap;
flex-direction:column;
z-index:100;
top:0px;
left:0px;
right:0px;
background:#384A56; 
border-radius: 3px;
box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.22) 
overflow:hidden;
}

.lnk{
font-size:12px;
border-bottom:0px solid #4F5F6A;
}


/* Медиазапрос заработает только когда min-width будет больше или равна 900 px. 
@media screen and (min-width: 900px) {
  nav {
		background:#384A56;
		flex-direction:row;
  }
}
*/

/* Медиазапрос заработает только когда min-width будет меньше или равна 900 px. 
@media screen and (max-width: 900px) {
  nav {
		background:#283A46;
		width:400px;
		flex-direction:column;
  		}

	.phl{
		border-bottom:0px solid #4F5F6A;
		border-right:0px solid #4F5F6A;
		width:100%
		}
.phl1{
		border-bottom:0px solid #4F5F6A;
		border-right:0px solid #4F5F6A;
		width:100%
	}
}

*/