// Header specific styles here
a.menu-close,
a.menu-toggle {
	z-index: 101;
}
// hero image on homepage
header {
	>.row {
		padding: ($small-space * 3) 0;
		border-bottom: 1px solid $border;
	}
	// headline
	h1 {
		color: $body-font-color;
		font-size: rem-calc(22);
		font-weight: 300;
		margin-bottom: 0;
		font-family: $title;
		letter-spacing: 2px;
		text-transform: uppercase;
		@media #{$small-only}{
			em {
				display: none;
			}
		}
		em {
			font-style: normal;
			top: -4px;
		}
		img {
			width: ($xlarge-space / 2);
			margin-right: $small-space;
			@media #{$small-only}{
				margin-right: 0;
			}
		}
		span {
			color: $primary;
		}
	}
	// navigation
	nav:not(.main-menu) {
		width: 100%;
		padding: $small-space 0;
		@include z-index(navigation);
		@media #{$small-only}{
			display: none;
		}
		// main navigation
		ul{
			//margin: 0;
			display: flex;
			// space all items out evenly
			justify-content: space-between;
			z-index: 100;
			li {
				display: block;
				flex: 0 1 auto;
				list-style-type: none;
				display: inline-flex;
				position: static !important;
				@extend .align-all;
				// top links
				a {
					font-size: rem-calc(12);
					font-weight: normal;
					color: $body-font-color;
					text-transform: uppercase;
					// description
					p {
						text-transform: none;
						font-size: rem-calc(10);
						opacity: 0.7;
					}
					&:hover,
					&:focus,
					&:active {
						color: $primary;
						p {
							color: $body-font-color;
						}
					}
				}
				// sub menu wrapper
				.cattleGridSubmenuWrap {
					visibility: hidden;
					opacity: 0;
					transform: rotateX(0deg);
					position: absolute;
					left: 0;
					z-index: 9999;
					transition: all 0.27s ease-in-out;
					transform-origin: 0 0;
					transform: rotateX(-90deg);
					margin-top: 0;
					background: #fff;
					top: 45px;
					width: 100%;
					padding: $medium-space 0!important;
					clear: both;
					// sub menu
					.sub-menu {
						@extend .extendRow;
						padding: 0 ($xlarge-space / 2);
						// sub menu list items
						li {
							display: block;
							position: relative!important;
							width: 50%;
							text-align: left;
							// for any with a custom class
							&[class]{
								&:before {
									@include pseudo;
									position: relative;
									display: inline-block;
									margin-right: ($small-space * 2);
									object-fit: contain;
									object-position: center;
									width: ($small-space * 10);
								    height: ($small-space * 10);
								    background-size: $large-space;
								    background-repeat: no-repeat;
								    float: left;
								}
							}
							// category styling
							&.cattlegrid:before {
								background-image: url($asset + 'images/cattle-grid.png');
							}
							&.parat:before {
								background-image: url($asset + 'images/para-icon-green.png');
							}
							&.thelittlehatcompany:before {
								background-image: url($asset + 'images/the-little-hat-company.png');
							}
							&.reflect:before {
								background-image: url($asset + 'images/reflect-app-ios.png');
							}
						}
					}
				}
				// on hover of the li with a submenu, show it.
				&:hover,
				&:focus,
				&:active {
					.cattleGridSubmenuWrap {
						display: block;
						visibility: visible;
						opacity: 1;
						transform: rotateX(0deg);
					}
				}
			}
		}
	}
}