/*
File Name: navigation.css
Date: 08/26/19
Programmer: Erika J Ponce
*/

/* Based on http://kmturley.blogspot.com/2014/06/responsive-mobile-dropdown-navigation.html */
/* Modified for mobile-first design */

/* Set up menu */


/* remove bullet in front of list items in menu */
 .container {
     position: fixed;
     top: 0;
     width: 100%;
     background-color: #000000;
     z-index: 1000;
 }
.container ul {
    list-style-type: none;
    margin-top: 0;
    padding-left: 0;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

/* space between lines */

.container li {
    padding: 10px 0;
}
 
/* remove underline in links. */

.container li a {
    text-decoration: none;
    color: #ff0000;
    font-weight: 900;
    text-shadow: 1px 1px 1px #000000;
    transition: background-color 0.4s;
}
 
.container li a:hover {
    background-color: #F4F4F4;
}

/* space around each of the menu items */
  
.container li a {
    padding: 10px 30px;
}

/* clear float on line below */

.container .burger-menu {
    clear: both;
    max-height: 0;
    transition: max-height 1s ease-out;
}

/* menu icon for responsive hamburger menu */

.container .burger-icon { /* location of hamburger icon */
    cursor: pointer;
    display: inline-block;
    padding: 28px 20px;
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
}
 
.container .burger-icon .menu-icon { /* center line of hamburger icon */
    background: #ff0000;
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
}
 
.container .burger-icon .menu-icon:before, /* top and bottom lines of hamburger icon */
.container .burger-icon .menu-icon:after {
    background: #ff0000;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}
 
.container .burger-icon .menu-icon:before {
    top: 5px;
}
 
.container .burger-icon .menu-icon:after {
    top: -5px;
}

/* respond to click on hamburger menu icon */

.container .burger-btn { /* hide checkbox */
    display: none;
}
 
.container .burger-btn:checked ~ .burger-menu {
    max-height: 310px;
}
 
.container .burger-btn:checked ~ .burger-icon .menu-icon {
    background: transparent;
}

/* animations */
 
.container .burger-btn:checked ~ .burger-icon .menu-icon:before {
    transform: rotate(-45deg);
}
 
.container .burger-btn:checked ~ .burger-icon .menu-icon:after {
    transform: rotate(45deg);
}
 
.container .burger-btn:checked ~ .burger-icon:not(.steps) .menu-icon:before,
.container .burger-btn:checked ~ .burger-icon:not(.steps) .menu-icon:after {
    top: 0;
}

/*  TABLET AND DESKTOP: CREATE HORIZONTAL NAVIGATION BAR AT 600 PX OR HIGHER */
@media only screen and (min-width: 605px) {

/* Note: We float the entire menu to the right, so it is right-aligned. Then we float each list item to the left,
so it sits to next to the next item. We have to clear the float in the intro section so the text won't wrap 
around the menu. You may find it helpful to change 'left' to 'right' to see what happens. */

.container {
    display: flex;
    justify-content: center;
}
.container .burger-menu {
    float: left;
    margin: 5px 0 5px 0;
    max-height: none;
}

.container ul {
    overflow: visible;
    margin-bottom: 20px;
}
  
.container li {
    float: left;
}
    
.container li a {
    padding: 10px 10px;
}
  
/* hide the checkbox and label for it */
  
.container .burger-icon, .burger-btn {
    display: none;
}

}