#nav nav{
    position: relative;
    margin-right: 0;
    margin-left: 0;
    margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
        z-index: 99;
        margin-bottom: 10px;
        width: 960px;
        list-style: none;
}

li {
    list-style: none;
}

/*Note that div.phone and div.navphoneleft classes as shown below are included and for some reason required in the style page for the About Artist phone but not in other style pages */

@media (min-width: 200px) and (max-width:700px){
     div.phone{ 
        font-size: 40pt;
        line-height: 60pt;
        display: flex;
        justify-content:center;
        flex-direction: row;
        width: 900px;
        margin-bottom: 15px; 
        list-style: none;
        background-color:rgb(42,122,98);
     }
    }
  

    @media (min-width: 200px) and (max-width:700px){
        
    div.navphoneleft{
        float: left;
        width: 100%;
        display: flex;
        flex-direction: row;
        position: relative;
        top: 10%;
        left: 5px;
        font-size: 40pt;
        margin-left: 20px;
        line-height: 50pt;
        list-style: none;
        text-decoration: none
}
        }


    @media (min-width: 200px) and (max-width:700px){
        #nav div.nav {
            display: none;
        }
    }


@media (min-width: 701px) and (max-width: 959px){
    #nav{
        top: 15%;
        margin: auto;
        width: 100%;
        max-width: 959ox ;
        min-width: 701px;
    }
}

ul.nav   {
    margin: 0 auto;
    padding: 0px;
    list-style: none;
    display: flex;
    flex-direction: row;
 

}




@media (min-width: 701px) and (max-width: 959px){
   ul.nav  {width: auto;
        margin: auto;
        margin-left: 3%;
        margin-right: 3%;
       
    }
}

 li.nav {
   
    
    margin: auto;
    margin-left: 20px;
    margin-right: 20px;
    font-size: 15pt;
    padding-left: 10px;
    padding-right: 10px;  
    background-color: rgb(47, 38, 59);
    border-radius: 10px 30px;
    padding: 2px;
    opacity: 1;
    width: auto;
    text-align: center;
    list-style: none;
  
    
}


@media (min-width: 200px) and (max-width:700px){
    li.nav{
        justify-content: space-evenly;
        padding: 3px; 
        flex-direction: row;
        font-size: 20pt;
        width: 100%;
        list-style: none;
    }
}

@media (min-width: 701px) and (max-width: 959px){
li.nav{
width: auto;
height: auto;
font-size: 15pt;



}
}

.gallery{
    color: antiquewhite;
    width: auto;
}




ul li  a
{ text-decoration: none;
background-color: rgb(42,122,98);
color: #ecd9e8;
display: block;
}


ul li  a:hover {
 background-color:#043f30;
 color: antiquewhite;
 border-radius: 50px 20px;
 
}

ul li  ul li
{display: none;

}

ul li:hover ul li {
    display: block
}

.dropdown {
    font-size: 11pt;
    padding: 3px;
    width: auto; 
    margin: auto;
    font-size: 12pt;
    padding-left: 3px;
    padding-right: 3px;  
    opacity: 1;
    width: 100pt;
    text-align: center;
    flex-direction: column;
    
} 

@media (min-width: 200px) and (max-width:700px){
    .dropdown {padding-bottom: 20px;
        margin-left: 5px;
        margin-right: 5px;
        font-size: 40pt;
        width: 100%;
        list-style: none;
    }
}
    

 @media (min-width: 701px) and (max-width:959px){
    .dropdown {padding-bottom: 5px;
        margin-bottom: auto;
        font-size: 15pt;
        width: 100%
    }
}