:root{
	--bttn_bk: hsl(35, 100%, 50%);
	--bttn_hvr: hsl(35, 100%, 60%);
	--bttn_lgt: hsl(35, 100%, 70%);
	--bttn_drk: hsl(35, 100%, 30%);
}



body{
  font-family:helvetica;
  font-size:16px;
}
nav ul {
  background-color:var(--bttn_bk);
  display:flex;
  flex-direction:column;
}
nav ul li{
  list-style-type: none;
}
nav ul li a{
    display: block;
    text-decoration: none;
    color: #f9f9f9;
    font-weight: bold;
    font-size: 1.2em;
}
nav ul li:hover{
  background:rgba(0,0,0, .25);
}
.has-children ul li a{
    display: block;
    text-decoration: none;
    color: #f9f9f9;
    font-weight: bold;
    font-size: 1.0em;
    
}
.arrow{
  float:right;
}



@media only screen and (max-width:480px){
  .has-children ul li a{
    padding-left:2rem;
  }
  
  .has-children ul .has-children ul a{
    padding-left:3rem;
  }
  .arrow-down::after{
    content:"";
  }
}

@media only screen and (min-width:480px){
  nav ul{
    flex-direction:row;
    justify-content:center; /**/
  }
  nav ul li{
	position: relative;
	flex: 0 0 auto;
	text-align: center;
	min-width: 11em;  }
  .has-children ul, .has-children ul .has-children ul{
    display:none;
   /* width:100%; */
    position:absolute;
  }
  .has-children ul .has-children ul{
    left:100%;
    top:0;
  }
  nav ul li:hover ul,  .has-children ul .has-children:hover ul{
     display:flex;
    flex-direction:column;
  }
  
}