/*
File Name: tpnavigation.css
Date: 07/25/2019
Programmer: Aiden Mace
*/

/* Set up menu */

/* remove bullet in front of list items in menu */
 
.header ul {
	list-style-type: none;
	margin-top: 0;
	padding-left: 0;
	overflow: hidden;
}

/* space between lines */

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

.header li a {
	text-decoration: none;
	color: #333;
}

.header li a:hover {
	background-color: #F4F4F4;
}

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

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

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

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

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

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

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

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

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

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

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

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

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .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. */

.header .menu {
    float: left;
    margin: 0 0 10px 0;
    max-height: none;
}
    
    .header ul {
        overflow: visible;
        margin-bottom: 20px;
    }
  
.header li {
    float: left;
}
    
.header li a {
    padding: 10px 10px;
}
  
#intro {
    clear: left;
  }
    
/* hide the checkbox and label for it. */

.header .menu-icon, .menu-btn {
    display: none;
}

}