.banner {
	text-align: center;
	z-index: 5;
	position: relative;
	/*padding: 16px;*/
	max-width: 1002px;
	margin: 0 auto;
	color: #fff;
}

.masthead {
	top: 0;
	left: 0;
	right: 0;
	position: absolute;
	padding: 10px 0;
	z-index: 4;
	height: 96px;
}

.masthead-inner {
	position: relative;
	height: 100%;
}

.masthead:after {
  content: '';
  display: block !important;
  background-color: black;
  width: 100%;
  height: 500%;
  -webkit-transform-origin: 0% 100%;
  -moz-transform-origin: 0% 100%;
  -ms-transform-origin: 0% 100%;
  -o-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
  /**
	 {.site-branding X} * tan(4) = translateY && margin-top on .feature-article
	270 * tan(4) = 18.88
	 */
  -webkit-transform: skewY(-4deg) translateY(10px) translateX(0);
  -moz-transform: skewY(-4deg) translateY(10px) translateX(0);
  -ms-transform: skewY(-4deg) translateY(10px) translateX(0);
  -o-transform: skewY(-4deg) translateY(10px) translateX(0);
  transform: skewY(-4deg) translateY(10px) translateX(0);
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  -webkit-box-shadow: 0 0 1px 0 #000, 0 10px 1px 0 rgba(0,0,0,0.2);
  -moz-box-shadow: 0 0 1px 0 #000, 0 10px 1px 0 rgba(0,0,0,0.2);
  -ms-box-shadow: 0 0 1px 0 #000, 0 10px 1px 0 rgba(0,0,0,0.2);
  -o-box-shadow: 0 0 1px 0 #000, 0 10px 1px 0 rgba(0,0,0,0.2);
  box-shadow: 0 0 11px 0 rgba(0,0,0,0.2), 0 10px 0 0 rgba(0,0,0,0.2);
  /* Enables anti alias	*/
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.site-branding {
	width: 60px;
	height: 60px;
	float: left;
	margin: 10px 0 0 12px;
	color: #fff;
	font-size: 45px;
	position: relative;
	z-index: 3;
	background-color: #000;
}

.site-branding span {
	cursor: pointer;
}

.site-branding .icon-big-d {
	position: absolute;
	top: 5px;
	left: 0;
	color: #fff;
}

.site-branding .icon-week {
	position: absolute;
	top: 5px;
	left: 40px;
	color: #fff;
}

.site-branding .site-title {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.site-branding .site-name {
	position: absolute;
	left: -1000em;
}

.right-block {
	height: 50px;
	margin: 0 12px 0 72px;
	padding-right: 123px;
}

.masthead-navigation {
	float: right;
	background: #000;
	position: relative;
	z-index: 1;
	line-height: 30px;
	margin: 12px 0;
	max-height: 2em;
	overflow: hidden;
	opacity: 1;
	transition: opacity .25s ease-in;
}

.masthead-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;

	line-height: 30px;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
	font-family: museo-sans, 'Trebuchet MS', sans-serif;
}

.show-search .masthead-navigation,
.show-login .masthead-navigation {
	opacity: 0;
}

.masthead-navigation ul .menu-item-title {
	color: #fff;
}

.masthead-navigation li {
	display: inline-block;
	margin-left: 10px;
}

#masthead-sticky-wrapper.sticky-wrapper {
	height: 90px !important;
}

@media only screen and (min-width: 601px ) {
	body.admin-bar #masthead-sticky-wrapper.sticky-wrapper.is-sticky #masthead {
		top: 46px !important;
		transition: top 0.25s;
	}
	.admin-bar #navigation {
		top: 46px;
	}
}

@media only screen and (min-width: 783px ) {
	body.admin-bar #masthead-sticky-wrapper.sticky-wrapper.is-sticky #masthead {
		top: 32px !important;
		transition: top 0.25s;
	}
	.admin-bar #navigation {
		top: 32px;
	}
}

.toggles {
	position: absolute;
	z-index: 1;
	right: 12px;
	top: 0;
	height: 50px;
	padding: 10px 0;
	background-color: #000;
}

.toggles a[class*=" icon-"],
.toggles a[class^="icon-"] {
	color: #fff;
	float: left;
	line-height: 30px;
	font-size: 20px;
	margin-left: 20px;
	width: 21px;
	overflow: hidden;
	padding-left: 1px;
	height: 30px;
}

.toggles a[class*=" icon-"].active,
.toggles a[class^="icon-"].active {
}

/**
 * Search
 */
.search-bar {
	background: #000;
	position: absolute;
	z-index: 2;
	top: -1000%;
	right: 0;
	width: 100%;
	opacity: 0;
	transition: opacity .25s ease-in;
}

.search-bar label {
	margin: 10px;
	display: block;
}

.search-bar [name="s"] {
	width: 100%;
	vertical-align: middle;
}

.search-bar input[type="submit"] {
	position: absolute;
	top: -1000%
}

.show-search .search-bar {
	top: 100%;
	opacity: 1;
}

/**
 * Login form
 */
.login-form {
	background: #000;
	position: absolute;
	z-index: 2;
	right: 0;
	width: 100%;
	transition: opacity .25s ease-in;
	top: -1000%;
	opacity: 0;
	color: #fff;
	line-height: 50px;
	overflow: hidden;
}
.csstransforms .login-form {
	background: transparent;
}

.login-form [class^="field"] {
	padding: 0 10px
}
.login-form .field input {
	width: 100%;
}

.login-form .toggle-login {
	display: none;
}

.show-login .login-form {
	opacity: 1;
	top: 100%;
}

.show-search .masthead-navigation,
.show-login .masthead-navigation {
	opacity: 0;
}

#login .logout-link,
#login .account-link {
	display: block;
	padding: 5px 10px;
	color: #fff;
	font-weight: bold;
	border: solid 1px #f4f4f4;
	margin: 10px 20px 20px;
	line-height: 30px;
	text-align: left;
}

@media only screen and ( max-width: 549px ) {
	.show-search .masthead:after {
	  -webkit-transform: skewY(-4deg) translateY(80px) translateX(0);
	  -moz-transform: skewY(-4deg) translateY(80px) translateX(0);
	  -ms-transform: skewY(-4deg) translateY(80px) translateX(0);
	  -o-transform: skewY(-4deg) translateY(80px) translateX(0);
	  transform: skewY(-4deg) translateY(80px) translateX(0);
	}

	.show-login .masthead:after {
	  -webkit-transform: skewY(-4deg) translateY(160px) translateX(0);
	  -moz-transform: skewY(-4deg) translateY(160px) translateX(0);
	  -ms-transform: skewY(-4deg) translateY(160px) translateX(0);
	  -o-transform: skewY(-4deg) translateY(160px) translateX(0);
	  transform: skewY(-4deg) translateY(160px) translateX(0);
	}
}

@media only screen and (min-width: 550px) {
	.search-bar {
		display: block;
		background: #000;
		position: absolute;
		z-index: 2;
		top: -1000%;
		right: 82px;
		width: 300px;
		height: 30px;
	}

	.toggles .toggle-search.active  {
		margin-left: 320px;
	}

	.search-bar label {
		margin: 10px;
		display: block;
	}
	.search-bar [name="s"] {
		vertical-align: middle;
		width: 100%;
	}

	.search-bar form {
		opacity: 0;
		height: 0;
		overflow: hidden;
		transition: opacity .25s ease-in;
		clear: both;
	}

	.search-bar input[type="submit"] {
		position: absolute;
		left: -999px;
		top: -999px;
	}

	.search-bar form:target,
	.show-search .search-bar form {
		opacity: 1;
		height: 50px;
		background: #000;
	}

	.show-search .search-bar {
		top: 0;
	}

	.show-login .login-form {
		opacity: 1;
		top: 0;
		left: 70px;
		right: 123px;
		width: auto;
	}

	.show-login .login-form .field {
		width: 50%;
		float: left;
	}

	.logged-in #login {
		text-align: right;
	}

	#login .logout-link,
	#login .account-link {
		display: inline-block;
		width: 40%;
		margin: 5px 10px;
	}

}

@media only screen and (max-width: 679px) and (min-width: 550px) {
	body:not(.logged-in).show-login .masthead:after {
	  -webkit-transform: skewY(-4deg) translateY(40px) translateX(0);
	  -moz-transform: skewY(-4deg) translateY(40px) translateX(0);
	  -ms-transform: skewY(-4deg) translateY(40px) translateX(0);
	  -o-transform: skewY(-4deg) translateY(40px) translateX(0);
	  transform: skewY(-4deg) translateY(40px) translateX(0);
	}
}

@media only screen and (min-width: 680px) and (max-width: 977px ) {
	body:not(.logged-in).show-login .masthead:after {
		-webkit-transform: skewY(-4deg) translateY(20px) translateX(0);
		-moz-transform: skewY(-4deg) translateY(20px) translateX(0);
		-ms-transform: skewY(-4deg) translateY(20px) translateX(0);
		-o-transform: skewY(-4deg) translateY(20px) translateX(0);
		transform: skewY(-4deg) translateY(20px) translateX(0);
	}
}

/** Bigger logo */
@media only screen and (min-width: 900px) {
	.show-login .login-form {
		left: 270px;
	}

	#masthead-sticky-wrapper.sticky-wrapper {
		height: 145px !important;
	}

	.masthead {
		padding: 20px 0 0 0;
	}

	.right-block {
		margin-left: 272px;
	}

	.site-branding {
		width: 250px;
		height: 115px;
		font-size: 84px;
	}
	.site-branding .icon-week {
		left: 234px;
	}
	.site-branding .icon-week:before {
		content: "\e60d";
	}

	.site-branding .icon-big-d:before {
		content: "\e633";
		left: 234px;
	}

}

@media only screen and (min-width: 640px) {
	.masthead-navigation ul {
		display: block;
	}
}

@media only screen and (min-width: 680px) and (max-width: 899px) {
	.masthead:after {
		/**
		 ({.masthead-inner X} / 2 - {.site-branding X}) * tan(4) = translateY && margin-bottom
		( 668 / 2 - 270 ) * tan(4) = 4.47
		Shift the transform origin to the middle as the edge isn't still */
		-webkit-transform-origin: 50% 100%;
		-moz-transform-origin: 50% 100%;
		-ms-transform-origin: 50% 100%;
		-o-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		-webkit-transform: skewY(-4deg) translateY( -4px) translateX(0);
		-moz-transform: skewY(-4deg) translateY( -4px) translateX(0);
		-ms-transform: skewY(-4deg) translateY( -4px) translateX(0);
		-o-transform: skewY(-4deg) translateY( -4px) translateX(0);
		transform: skewY(-4deg) translateY( -4px) translateX(0);
	}
}

@media only screen and (min-width: 900px) {
	.masthead:after {
		/*	Shift the transform origin back to the left edge as the middle is moving */
		-webkit-transform-origin: 0% 100%;
		-moz-transform-origin: 0% 100%;
		-ms-transform-origin: 0% 100%;
		-o-transform-origin: 0% 100%;
		transform-origin: 0% 100%;

		-webkit-transform: skewY(-4deg) translateY(68px) translateX(0);
		-moz-transform: skewY(-4deg) translateY(68px) translateX(0);
		-ms-transform: skewY(-4deg) translateY(68px) translateX(0);
		-o-transform: skewY(-4deg) translateY(68px) translateX(0);
		transform: skewY(-4deg) translateY(68px) translateX(0);
	}
}


@media only screen and (min-width: 978px) {
	.masthead:after {
		/**
		 ({.masthead-inner X} / 2 - {.site-branding X}) * tan(4) = translateY && margin-bottom
		( 978 / 2 - 270 ) * tan(4) = 15.31
		 */
		-webkit-transform-origin: 50% 100%;
		-moz-transform-origin: 50% 100%;
		-ms-transform-origin: 50% 100%;
		-o-transform-origin: 50% 100%;
		transform-origin: 50% 100%;
		-webkit-transform: skewY(-4deg) translateY(36px) translateX(0);
		-moz-transform: skewY(-4deg) translateY(36px) translateX(0);
		-ms-transform: skewY(-4deg) translateY(36px) translateX(0);
		-o-transform: skewY(-4deg) translateY(36px) translateX(0);
		transform: skewY(-4deg) translateY(36px) translateX(0);
	}
}

/**
 * If the menu is too long, trim at low res.
 */
@media only screen and (max-width:929px) {
	ul#menu-top-nav li:nth-child(1n+7) {
		display: none;
	}
}

@media only screen and (max-width:670px) {
	ul#menu-top-nav li:nth-child(1n+6) {
		display: none;
	}
}