/*
File Name: tpnavigation.css
Date: 2/3/2020
Programmer: John Garcia
*/

/* Set up menu */

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

/* space between lines */

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

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

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

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

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

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

.tpheader .tpmenu-icon .tpnavicon {
	background: #333;
	display: block;
	height: 2px;
	position: relative;
	transition: background .2s ease-out;
	width: 18px;
}

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

.tpheader .tpmenu-icon .tpnavicon:before {
	top: 5px;
}

.tpheader .tpmenu-icon .tpnavicon:after {
	top: -5px;
}

.tpheader .tpmenu-btn {
	display: none;
}

.tpheader .tpmenu-btn:checked ~ .tpmenu {
	max-height: 240px;
}

.tpheader .tpmenu-btn:checked ~ .tpmenu-icon .tpnavicon {
	background: transparent;
}

.tpheader .tpmenu-btn:checked ~ .tpmenu-icon .tpnavicon:before {
	transform: rotate(-45deg);
}

.tpheader .tpmenu-btn:checked ~ .tpmenu-icon .tpnavicon:after {
	transform: rotate(45deg);
}

.tpheader .tpmenu-btn:checked ~ .tpmenu-icon:not(.steps) .tpnavicon:before,
.tpheader .tpmenu-btn:checked ~ .tpmenu-icon:not(.steps) .tpnavicon: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. */

.tpheader .tpmenu {
    float: left;
    margin: 0 0 10px 0;
    max-height: none;
}
    
.tpheader ul {
    overflow: visible;
    margin-bottom: 20px;
    }
  
.tpheader li {
    float: left;
}
    
.tpheader li a {
    padding: 10px 10px;
}
  
#information {
    clear: left;
  }
    
/* hide the checkbox and label for it*/
  
.tpheader .tpmenu-icon, .tpmenu-btn {
    display: none;
}  
}