/*
File Name: tpnavigation.css
Date: 05/25/20
Programmer: Fredy Chavez
*/

/* 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 */
 
.header2 ul {
    list-style-type: none;
    margin-top: 0;
    padding-left: 0;
    overflow: hidden;    
}

/* space between lines */

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

.header2 li a {
    text-decoration: none;
    color: #333;
}
 
.header2 li a:hover {
    background-color: #F4F4F4;
}

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

.header2 .menu {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
}

.header2 .menu-icon {
    cursor: pointer;
    display: inline-block;
    float: right;
    padding: 28px 20px;
    position: relative;
    margin-top: 0;
    margin-bottom: 0;
}

.header2 .menu-icon .navicon {
    background: #333;
    display: block;
    height: 2px;
    position: relative;
    transition: background .2s ease-out;
    width: 18px;
}

.header2 .menu-icon .navicon:before,
.header2 .menu-icon .navicon:after {
    background: #333;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transition: all .2s ease-out;
    width: 100%;
}

.header2 .menu-icon .navicon:before {
    top: 5px;
}

.header2 .menu-icon .navicon:after {
    top: -5px;
}

.header2 .menu-btn {
    display: none;
}

.header2 .menu-btn:checked ~ .menu {
    max-height: 240px;
}

.header2 .menu-btn:checked ~ .menu-icon .navicon {
    background: transparent;
}

.header2 .menu-btn:checked ~ .menu-icon .navicon:before {
    transform: rotate(-45deg);
}

.header2 .menu-btn:checked ~ .menu-icon .navicon:after {
    transform: rotate(45deg);
}

.header2 .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header2 .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
    top: 0;
}

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

/* 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 next section so the text won't wrap 
around the menu. You may find it helpful to change 'left' to 'right' to see what happens. */

.header2 .menu {
    float: left;
    margin: 0 0 10px 0;
    max-height: none;
}

.header2 ul{
    overflow: hidden;
    margin-bottom: 20px;
}    

.header2 li {
    float: left;
}
    
.header2 li a {
    padding: 10px 10px;
}
  
#background {
    clear: left;
  }

/* hide the checkbox and label for it */
  
.header2 .menu-icon, .menu-btn {
    display: none;
}
    
}