@charset "utf-8";
/* CSS Document */

#header{
	width: 100%;
	height: 100px;
	margin: 0px;
	padding: 0px;
	overflow: visible;
	background-color:#003860;
	clear: both;
}

#toggle {
	float: left;
	margin: 15px 10px 15px 0px;
	cursor: pointer;
}
#mobile-header{
	display: none;
}
#logo{
	float:left;
	height: 100px;
	width: auto;
	margin: 0px;
	padding: 7.5px 7.5px 7.5px 15px;
	overflow: visible;
}

#logo:hover{
	background-color: hsla(0,0%,100%,0.10);
}
#logo_small{
	float: left;
	margin: 0px;
	padding: 0px;
	width: auto;
	height: auto;
}

/*
.topbar{
    float: right;
	width: 70%;
	height: 35px;
	overflow: hidden;
	margin: 0;
	padding: 0;
	text-align: right;
}

.topbar a {
 	width: auto;
    color: white;
    text-align: center;
	margin: 0px;
    text-decoration: none;
    font-size: 17px;
	font-weight: 500;
	padding: 10px;
}
*/

#cartitems{
	color: red;
}
.topnav{
    float: right;
	width:  auto;
    height: 100px;
	overflow: hidden;
	margin: 0px;
	padding: 25px 0 0 0;
	text-align: center;
}

.topnav a {
    float: left;
 	width: auto;
	height: 100%;
    color: white;
    text-align: center;
	margin: 0px;
    padding: 15px 12px 12px 15px;
    font-size: 17px;
	font-weight: 500;
}
.topnav a:hover {
    background-color: #F39B57;
    color: #232939;
    transition: 0.375s;
    border-radius: 10px 10px 0px 0px;
}
.topnav a i {
    margin-right: 7px;
	color: white;
}

.active {
    background-color: #FF860E;
    color: #252A39;
}

.topnav .icon {
    display: none;
}

.prodnav {
	float: left;
	width: auto;
    background-color:#252A39; 
    overflow: visible;
}
.prodnav a {
    float: left;
 	width: auto;
    color: #FF860E;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
	font-weight: 500;
}
.prodnav a:hover {
    background-color: #252A39;
    color: #FF860E;
}
.prodnav .icon {
    display: none;
}

/*===========================================*/
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
/*===========================================*/
@media only screen and (max-width: 1024px) and (min-width: 768px) 
{
#header{
	width: 100%;
	height: 135px;
	margin: 0px;
	padding: 0px;
	overflow: visible;
	background-color:#003860;
	clear: both;
}
#logo {
	float:left;
	height: 80px;
	width: 40%;
	margin:10px auto;
	padding: 0px;
	overflow: visible;
	text-align: center;
}

.topbar{float: left; width: 60%; height: 80px; text-align: center;background-color: none;}
.topnav{
    float: right;
	width:  auto;
    height: 35px;
	overflow: hidden;
	margin: 0px auto;
	padding: 0;
	text-align: center;
}
.topnav a {
    float: left;
 	width: auto;
	height: auto;
    color: white;
    text-align: left;
	margin: 0px auto;
    padding: 5px 10px;
    text-decoration: none;
    font-size: 17px;
	font-weight: 500;
}
 }