body {
    margin: 0;
}
.backdrop {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
  }
.backdrop.open {
    display: block;
}
.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    font: 110% sans-serif;
    width: 100%;
    background-color: #757070;
    z-index: 100;
}
.main-nav__item {
    display: none;
    padding: 1rem 1rem 1rem 1rem;
    color: white;
    list-style: none;
}
.main-nav__item.highlight{
    background-color: #3a3b3b;
    display: inline-block; 
} 
.main-nav a {
    text-decoration: none;
}
.main-nav a:hover,
.dropdown:hover {
    background-color: #565858;
}
/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    /* min-width: 50%; */
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #9ca0a0;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

.mobile-nav__btn {
    display: inline-block;
    position: fixed;
    top: 0;
    right: 0;
    font-size: 200%;
    padding: 5px 2rem 0 0;
    color: white;
}

/* Display menu when in mobile view and button is cliceked */
.main-nav.open .main-nav__item {
    display: block;
}
.main-nav.open .main-nav__item.highlight {
    display: block; /* block => HOME extends across screen like other buttons
                    inline-block Only extends as are as when not open
                    does not overlap the hamburger icon due to order in DOM */
}

/* When the screen is moree than 600 pixels wide, display
 * all menu items on nav-bar as inline-block */
@media screen and (min-width: 600px) {
    .main-nav .last {
        float: right; /*display login last*/
    }
    .main-nav .main-nav__item {
        display: inline-block;
    }
    .main-nav .mobile-nav__btn {
        display: none; /*hide the nav button*/
    }
    .main-nav__place-holder {
        min-width: calc(69px - 2rem);
    }
}

.sub-nav__item {
    /* display: none; */
    padding: 1rem 1rem 1rem 1rem;
    color: black;
    list-style: none;
}
/* Dropdown Content (Hidden by Default) */
.sub-dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
/* Change color of dropdown links on hover */
.sub-dropdown-content a:hover {background-color: #9ca0a0;}
/* Show the dropdown menu on hover */
.sub-dropdown:hover .sub-dropdown-content {display: block;}

.sub-dropdown:hover {
    background-color: #9ca0a0;
}

.arrow-down {
    display: inline-block;
    vertical-align: middle;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 12px solid #9e9b9b;
    /* border-bottom: 15px solid green; */
}
.arrow-up {
    display: inline-block;
    vertical-align: middle;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-bottom: 12px solid #9e9b9b;
    /* border-bottom: 15px solid green; */
}
.arrow-right {
    display: inline-block;
    vertical-align: middle;
	width: 0;
	height: 0;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	border-left: 12px solid #9e9b9b;
    /* border-bottom: 15px solid green; */
}
/* hide the place holder when in mobile view */
.main-nav.open .main-nav__place-holder {
    /* display: none; */
    display: inline-block;
}
.main-nav__place-holder .arrow-down {
    border-top: 12px solid #646262;
}
.main-nav__place-holder .arrow-up {
    border-bottom: 12px solid #646262;
}