.toolbar {
	@include rhythm(padding-right, 1);
	@include rhythm(width, 3);
	position: absolute;
	@include rhythm(top, 1);
  	@include rhythm(min-height, 28);
	right: 0;
	bottom: 0;
	display: block;
    padding-top: 5px;
    overflow: hidden;

	.is--ancient-android .nav--is-open &{
		right: -100%;
	}

	i[class] {
		display: table;
		@include rhythm(width, 3);
		@include rhythm(height, 3);
		text-align: center;

		&:before {
			display: table-cell;
			vertical-align: middle;
		}
	}

	@include query-below($lap) {
	  	display: none;
		position: absolute;
		max-width: 900px;
		width: 100%;
	  	padding: 0;
		overflow: hidden;
		max-height: 100px;
	    min-height: 80px;
		background-color: $white;

	  .toolbar__head {
		text-align: center;
		margin: 0 auto;
		width: 75%;

	  }

	  ul {
		padding:0;
	  }
	}

}

.toolbar__head {
	@include rhythm(padding-bottom, 2);

	@include query-below($desk) {
		@include query-above(1000px) {
			@include rhythm(height, 25);
		}
	}

	@include query-below(1000px) {
		min-height: 0;
		background: none;
		border: 0;
		padding-top: 6px;
		padding-bottom: 0;
		padding-left: 0;
		text-align: right;
	}
}

.toolbar__body {
	position: relative;
	border-top: 1px solid $borders;
	margin-top: -1px;
	@include rhythm(padding-top, 2);

	a {
		color: $white;
	}

	@include query-below(900px) {
		display: none;
	}
}

.nav--toolbar {
	word-wrap: normal;
    margin-bottom: 5px;
    padding-left: 0;


	a {
		display: block;
		font-size: 0.8125em; // 13px

		// set height and center label
		@include rhythm(line-height, 3, 14px);

		// overlap borders
		@include rhythm(margin-right, 1, 14px);
		@include rhythm(padding-left, 2, 14px);

		// offset label to the right
		position: relative;
		right: 100%;
		white-space: nowrap;
	    color: transparent !important;

		// prepare hover state
		border: 1px solid transparent;
		border-right-width: 0;

		// hide label
		color: transparent;
//		visibility: hidden;
		pointer-events: none;

		&:before {
		  content: "";
		  font-size: (19/14) + em;
		  display: inline-block;
		  @include rhythm(width, 4, 19px);
		  @include rhythm(height, 3, 19px);
		  @include rhythm(line-height, 3, 19px);

		  position: absolute;
		  @include rhythm(right, -4, 19px);



			@include query-above($lap){
				// because of position absolute, the gap between text and icon
				// isn't clickable although it should
				// so we fill it with padding :D
				@include rhythm(padding-left, 1, 19px);
			}

			font-family: FontAwesome;
			-webkit-font-smoothing: antialiased;
			text-align: center;

			// overwrite styles from parent element to make icon visible
//			visibility: visible;
			pointer-events: auto;
			color: $white;
		  	-webkit-transition: color .1s;
		  	-moz-transition: color .1s;
		  	-o-transition: color .1s;
			transition: color .1s;
		}

	  @include query-above(1000px) {

		&:hover {
		  @include query-above(1000px) {
			&:before {
			  // overwrite set to hide labels
			  color: $accent !important;
			  visibility: visible;
			  pointer-events: auto;
			}
		  }
		}
	  }
		// default share icon used as a fallback
		&:before                        {content: $fa-var-share-alt;}
		// now for the social services that are in FA
		// we will match the href to them - left them looser so we don't have complaints
		&[href*="mailto:"]:before,
		&[href*="mail"]:before          {content: $fa-var-envelope;}
		&[href*="feed"]:before,
		&[href*="rss"]:before  			{content: $fa-var-rss;}
		&[href*="behance"]:before       {content: $fa-var-behance;}
		&[href*="delicious"]:before     {content: $fa-var-delicious;}
		&[href*="deviantart"]:before    {content: $fa-var-deviantart;}
		&[href*="digg"]:before          {content: $fa-var-digg;}
		&[href*="dribbble"]:before      {content: $fa-var-dribbble;}
		&[href*="facebook"]:before      {content: $fa-var-facebook;}
		&[href*="flickr"]:before        {content: $fa-var-flickr;}
		&[href*="foursquare"]:before    {content: $fa-var-foursquare;}
		&[href*="github"]:before        {content: $fa-var-github;}
		&[href*="plus.google"]:before   {content: $fa-var-google-plus;}
		&[href*="instagram"]:before     {content: $fa-var-instagram;}
		&[href*="linkedin"]:before      {content: $fa-var-linkedin;}
		&[href*="pinterest"]:before     {content: $fa-var-pinterest;}
		&[href*="reddit"]:before        {content: $fa-var-reddit;}
		&[href*="skype"]:before         {content: $fa-var-skype;}
		&[href*="soundcloud"]:before    {content: $fa-var-soundcloud;}
		&[href*="spotify"]:before       {content: $fa-var-spotify;}
		&[href*="stumbleupon"]:before   {content: $fa-var-stumbleupon;}
		&[href*="tumblr"]:before        {content: $fa-var-tumblr;}
		&[href*="twitter"]:before       {content: $fa-var-twitter;}
		&[href*="vimeo"]:before         {content: $fa-var-vimeo-square;}
		&[href*="vine"]:before          {content: $fa-var-vine;}
		&[href*="vk.com"]:before        {content: $fa-var-vk;}
		&[href*="weibo"]:before         {content: $fa-var-weibo;}
		&[href*="xing"]:before          {content: $fa-var-xing;}
		&[href*="yahoo"]:before         {content: $fa-var-yahoo;}
		&[href*="youtube"]:before       {content: $fa-var-youtube;}
		&[href*="angel.co"]:before       {content: $fa-var-angellist;}
		&[href*="yelp"]:before       {content: $fa-var-yelp;}
		&[href*="last.fm"]:before       {content: $fa-var-lastfm;}
		&[href*="slideshare"]:before       {content: $fa-var-slideshare;}
		&[href*="twitch.tv"]:before       {content: $fa-var-twitch;}
	}
	.nav__item--search a:before {
		content: $fa-var-search;
	    margin-top: 2px;
	}
	@include query-below(900px) {
		display: inline-block;
		a {
			right: 0;
			margin: 0;
			width: 3em;
			padding-left: 3em;
//			visibility: hidden;
			overflow: hidden;
			pointer-events: auto;
			&:before {
				visibility: visible;
				position: absolute;
				top: 0; left: 0;
				width: 3em;
			}
		}
	}
}
.overlay--search {
	display: none;
	position: fixed;
	top: 0; left: 0%;
	z-index: 101;
	@include rhythm(padding-right, 20);
	@include rhythm(padding-left, 20);
	width: 100%;
	height: 100%;
	background: white;
	border-left: 1px solid $borders;
	@include query-below($desk) {
		@include rhythm(padding-right, 8);
		@include rhythm(padding-left, 8);
	}
	@include query-below($lap) {
		&.overlay--search{
			@include rhythm(padding-right, 4);
			@include rhythm(padding-left, 4);
		}
	}
	.search-form > label {
		position: static;
		height: auto;
	   @extend %beta;
	}
	.search-form, .search-field {
		display: block;
		height: auto;
	}
	.search-field, .search-submit {
		position: static;
	}
	.search-submit {
		display: none;
	}
	.search-field {
		border: 0;
		padding: 0;
		@include fs(100px);
		color: $black;
		outline: 0;
		height: auto;
		-webkit-appearance: none;
		@include placeholder {
			color: $black;
		}
		@at-root {
			@include new-fs-class(60px, 'below', $desk, true);
			@include new-fs-class(24px, 'below', $lap, true);
		}
		@include fs-below($desk, 60px);
		@include query-below($lap) {
			@include fs(32px);
		}
		@include query-below($lap) {
			@include rhythm(margin-bottom, 1);
		}
	}
}
.overlay__wrapper {
	position: absolute;
    top: 33%;

  @include query-below($lap) {
	width: 70%;
	text-align: left;
  }
  p {
	text-align: left;
  }
}
.overlay__close {
	@include rhythm(width, 5);
	@include rhythm(height, 5);
	position: absolute;
	@include rhythm(top, 2.6);
	@include rhythm(right, 2.6);
	cursor: pointer;
	&:before, &:after {
		content: "";
		display: block;
		position: absolute;
		background: $gray;
		transform: rotate(45deg);
		pointer-events: none;
	}
	&:before {
		top: 50%;
		width: 100%;
		height: .16em;
		margin-top: -.08em;
	}
	&:after {
		left: 50%;
		height: 100%;
		width: .16em;
		margin-left: -.08em;
	}
	@include query-below($desk) {
		@include rhythm(width, 3);
		@include rhythm(height, 3);
		@include rhythm(top, 4);
		@include rhythm(right, 3);
	}
}

#social-navigation {
  a:before {
	font-size: 15px;
  }
}
.nav--social {
  .menu-item {
	margin: 5px auto;
  }
}