﻿@media(max-width: 1199px) {
	.flyout-active body {
		padding-top: 0;
	}

	.flyout-active #site {
		display: none;
	}

	.flyout-active .flyout-nav {
		display: block;
		animation: fadeIn .25s forwards; /* IE 10+, Fx 29+ */
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 2;
	}
}

.flyout-nav {
	display: none;
	width: 100%;
	min-height: 100vh;
	background-color: #111;
	font-size: 20px;
}

	.flyout-nav nav {
		max-width: 675px;
		padding: 0 30px 15px;
		margin: 0 auto;
	}

	.flyout-nav ul {
		padding: 0;
		margin: 0;
		list-style: none;
	}

	.flyout-nav a {
		color: #ccc;
		display: block;
	}

		.flyout-nav a:hover, .flyout-nav a:focus, .flyout-nav button:focus, .flyout-nav a.active {
			color: #d13138;
			text-decoration: none;
		}

	.flyout-nav .dropdown-menu {
		padding: 15px 0;
		display: none;
		border-bottom: 1px solid #333;
	}

		.flyout-nav .dropdown-menu li a {
			padding: 5px 0;
		}

		.flyout-nav .dropdown-menu li:first-child span {
			margin-top: 0;
		}

		.flyout-nav .dropdown-menu li span {
			font-weight: 700;
			margin: 30px 0 5px;
			display: block;
			color: #999;
			color: #fff;
			font-family: 'Factoria';
			text-transform: uppercase;
		}

	.flyout-nav .close-button {
		position: relative;
		padding: 19px 47px 20px 20px;
		color: #999;
		font-weight: 300;
		text-align: right;
	}

		.flyout-nav .close-button:hover, .flyout-nav .close-button:focus {
			color: #d13138;
			text-decoration: none;
		}

			.flyout-nav .close-button:hover:before, .flyout-nav .close-button:focus:before, .flyout-nav .close-button:hover:after, .flyout-nav .close-button:focus:after {
				background-color: #d13138;
			}

		.flyout-nav .close-button:before, .flyout-nav .close-button:after {
			display: block;
			content: '';
			height: 3px;
			width: 36px;
			border-radius: 3px;
			background-color: #fff;
			position: absolute;
			top: 50%;
			margin-top: -2px;
			right: 5px;
			transform: rotate(-45deg);
			transition: all .15s;
		}

		.flyout-nav .close-button:after {
			transform: rotate(45deg);
		}

	.flyout-nav > nav > ul > li, .flyout-nav .search-block {
		position: relative;
		display: block;
	}

		.flyout-nav > nav > ul > li > a, .flyout-nav .search-block input {
			font-size: 26px;
			font-weight: 700;
			padding: 10px 0;
			border-bottom: 1px solid #333;
			border-left: 0;
			border-right: 0;
			border-radius: 0;
			display: block;
			width: 100%;
			height: 61px;
			color: #fff;
		}

		.flyout-nav > nav > ul > li > .toggle-sub-menu, .flyout-nav .search-block button {
			position: absolute;
			top: 0;
			right: 0;
			height: 60px;
			width: 60px;
			border-left: 1px solid #333;
			background-color: #111;
			color: #999;
			border-top: 0;
			border-bottom: 0;
			transform: translate(0);
			text-align: center;
		}

	.flyout-nav .search-block {
		border-top: 1px solid #333;
		border-bottom: 1px solid #333;
	}

		.flyout-nav .search-block input {
			border-color: transparent;
			background-color: #151515;
		}
