nav * {
	font-family:Open Sans;
	letter-spacing:0;
}

nav {
	font-size:.7em;
	height:6.8em;
}
	nav img {
		margin-left:.6em;
		margin-top:.55em;
	}

 /* Add a black background color to the top navigation */
.topnav {
	overflow: hidden;
	background-color: white;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 100;
}
	.topnav a.homeImage {
		float: left;
		padding: 0;
		font-size: 1em;
	}
		.topnav .homeImage img {
			margin-top: 1em;
		}
	.topnav .upperBar {
		float: right;
		margin: 0;
		padding: .5em 1em;
	}
		.topnav .upperBar a.phone {
			float: right;
			position:relative;
			margin: 0;
			padding: 5px;
			font-size: 16px;
			line-height:1.4em;
			color: black;
		}
		.topnav .upperBar a.phone:hover {
			
		}
		.topnav .upperBar a.worldwide {
			float: right;
			height:100%;
			background-color: #ED1C24;
			display:block;
			float:right;
			color:white;
			font-size:16px;
			padding: 5px 20px;
			margin-left: 1em;
			font-weight:500;
		}
	.topnav .lowerBar {
		float: right;
		clear: right;
		margin: 0;
	}
		.topnav .lowerBar > a {
			float: right;
			display: block;
			color: black;
			text-align: center;
			padding: 6px 12px;
			text-decoration: none;
			font-size: 16px;
			margin: 4px;
		}
			.topnav span.homeSpan {
				display: none;
			}
		.topnav .lowerBar .search-container {
			float: right;
			width: 280px;
		}
		.search-container .cse .gsc-control-cse, .gsc-control-cse {
			margin: -5px !important;
		}
			/*
			.topnav .lowerBar input[type=text] {
				width: 140px;
				padding: 6px;
				margin-top: 6px;
				font-size: 14px;
				border: none;
				background-color: #efefef;
			}
			.topnav .search-container button {
			  float: right;
			  padding: 6px 10px;
			  margin-top: 6px;
			  margin-right: 16px;
			  background: #ddd;
			  font-size: 14px;
			  border: none;
			  cursor: pointer;
			}
			.topnav .search-container button:hover {
			  background: #ccc;
			}
			*/
	
	
	.topnav a.mainNavItem:hover {
		background-color: #ddd;
		color: black;
	}

/* Add an active class to highlight the current page */
.active {
	background-color: #4CAF50;
	color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
	display: none;
	font-size: 1.7em;
	padding: 1em;
}

@media screen and (max-width: 1200px) {
	.topnav a {
		font-size: .9em;
	}
	.topnav .homeImage img {
		height: 3em;
	}
}
@media screen and (max-width: 1000px) {
	.topnav .search-container {
		display: none;
	}
	.topnav .upperBar {
		display: none;
	}
	
	.topnav a:not(:first-child) {display: none;}
	.topnav a.icon {
		/*float: right;*/
		display: block;
		position: absolute;
		text-align: center;
		
		padding: 0;
		margin: 0;
		
		top: 0;
		right: 1em;
		width: 2em;
	}
		.topnav a.icon i {
			font-size: 1em;
			margin: 0;
			padding: 14px;
		}
	.topnav.responsive {
		position: relative;
	}
	/*.topnav.responsive a.icon {
		position: absolute;
		right: 0;
		top: 0;
		background-color: white;
	}*/
		
  /*.topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }

  
  .topnav.responsive a, .topnav.responsive input[type=text], .topnav.responsive .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .topnav.responsive input[type=text] {
    border: 1px solid #ccc;  
  }
	*/
	
	
	/* Responsive Menu is showing */
	.topnav.responsive {
		position: relative;
		padding-top: 3.1em;
	}
		.topnav a.icon {
			display: block;
			position: absolute;
			top: 0;
			right: 1em;
			width: 2em;
			margin: 0;
			padding: 0;
		}
		/*.topnav.responsive a.icon:hover {
			background: none;
		}*/
		.topnav.responsive .homeImage {
			position: absolute;
			left: 0;
			top: 0;
		}
		.topnav.responsive div.upperBar {
			display: none;
		}
		.topnav.responsive div.lowerBar {
			width: 100%;
		}
			.topnav.responsive .lowerBar a.mainNavItem {
				float: left;
				display: block;
				width: 100%;
				clear: both;
				text-align: center;
				font-size: 2em;
				background-color: #efefef;

				-webkit-transition: max-height .5s linear;
				-moz-transition: max-height .5s linear;
				-ms-transition: max-height .5s linear;
				-o-transition: max-height .5s linear;
				transition: max-height .5s linear;
			}
			.topnav.responsive .lowerBar a.mainNavItem:hover {
				background-color: #dedede;
			}
			.topnav.responsive span.homeSpan {
				display: inline;
			}
			.topnav.responsive .search-container {
				display: none;
			}


			/* Megamenu styling */
			.topnav.responsive .lowerBar a.mainNavItem.mega-menu-toggle:not(#product_nav_id) {
				max-height: 0;
				margin: 0;
				padding: 0;
				overflow: hidden;
			}


			/*.topnav.responsive .lowerBar .search-container input {
				width: 50%;
				float: left;
			}
			.topnav.responsive .lowerBar .search-container button {
				width: 4em;
				float: left;
			}*/
}

/*Megamenu Styling*/

div.megamenu {
	width: 100%;
	max-height: 1000px;
	overflow: hidden;
	float: none;
	clear: both;

	-webkit-transition: max-height .5s linear;
	-moz-transition: max-height .5s linear;
	-ms-transition: max-height .5s linear;
	-o-transition: max-height .5s linear;
	transition: max-height .5s linear;
}
div.megamenu.inactive {
	max-height: 0;
}
div.megamenu.active {
	display: block;
}
	div.megamenu div.options {
		float: left;

		width: 25%;
		margin: 0;
		padding: 0;
	}
		div.megamenu div.options ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
		}
			div.megamenu div.options ul li {
				display: inline-box;
				padding: 10px 15%;
				margin: 10px;

				background-color: #333;
				color: white;

				cursor: pointer;
			}
			div.megamenu div.options ul li:hover {
				background-color: #555;
			}
			div.megamenu div.options ul li.current {
				background-color: red;
			}
	div.megamenu div.mega-content {
		float: left;

		width: 75%;
		margin: 0;
		padding: 0;

		display: none;
	}
	div.megamenu div.mega-content.current {
		display: block;
	}
		div.megamenu div.mega-content a {
			color: black;
			text-decoration: none;
		}
		div.megamenu div.mega-content a:hover {
			color: #333;
			background-color: white;
		}
		div.megamenu div.mega-content div.itemCard {
			float: left;

			width: 200px;
			margin: 20px;
		}
			div.megamenu div.mega-content div.itemCard div.card-image {
				width: 200px;
				height: 150px;
				margin: 0 0 10px 0;
				padding: 0;
				background: 50% 50% no-repeat;
				background-size: cover;
			}
			div.megamenu div.mega-content div.itemCard span {
				display: inline-block;
				width: 100%;
				text-align: center;
			}
/* Responsive Styling for megamenu */
div.responsive div.megamenu div.options ul li {
	font-size:  1.6em;
	padding: 20px;
}
div.responsive div.megamenu div.mega-content a {
	float: left;
	margin: 0 0 20px 20px;
	padding: 0;
	display: block;

	width: calc(50% - 20px);

	font-size: 2em;
}
div.responsive div.megamenu div.mega-content div.itemCard {
	margin: 0;
	padding: 0;

	width: 100%;
}
div.responsive div.megamenu div.mega-content div.itemCard div.card-image {
	width: 100%;
}