/* special B logo styles */
body.home {
	#logo {
		//display: block;
		//height: 56px;
		//-webkit-transition: height 0.75s;
		//margin-bottom: 1em;
		padding-bottom: 1.0em;
	}
	#logotype {
		display: none;
	}
	nav.primary {
		// border-bottom: none;
	}
}

header {
	position: fixed;
	z-index: 10001;
	clear: both;
	background: #fff;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	box-shadow: none;

	#logo {
		display: block;
		width: 33px;
		line-height: 0;
		height: 56px;
		//height: 0;
		//-webkit-transition: height 0.75s;
		background: url(../img/logo.svg) no-repeat;
		text-indent: -9000px;
		margin-bottom: 0;
	}

	#logotype {
		//display: none;
		font-weight: 600;
		margin-bottom: 0.5em;
		//padding-bottom: 1em;
	}

	nav.primary {
		
		//position: relative;
		top: 1em;
		
		//font-size: 200%;//1.85em;
		font-size: 1.85em;
		font-weight: 500;
		margin: 0;

		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		padding: 0.5em 0;

		ul {
			margin: 0;
			padding: 0;
		}

		li {
			margin-left: 0.25em;

			&:first-child {
				margin-left: 0;
			}

			a {
				color: #bbb;
				-webkit-transition: color 0.3s;
				&:hover, &.active {
					color: inherit;
					-webkit-transition: color 0.3s;
				}

			}
		}
	}

	#subnav {
		clear: both;

		input {
			//font-size: 85%;
			padding: 0.25em;
		}

		ul {
			margin: 0.5em 0;
			padding: 0;
		}

		li {
			display: inline-block;
			// margin-right: 0.5em;
			margin-right: 0.75em;
			padding: 0;
			font-weight: 600;
			// font-size: 200%;
			&.lbl {
				//font-weight: 700;
			}
			a {
				color: #bbb;
				-webkit-transition: color 0.3s;
				&:hover, &.active {
					color: inherit;
					-webkit-transition: color 0.3s;
				}
			}

			&.hidden {
				//display: none;
			}
		}
	}

	&:hover {
		#subnav {
			li.hidden {
				//display: inline-block;
			}
		}
	}

}

.tags {
	li {
		display: inline-block;
		margin-right: 0.75em;
		padding: 0;
		font-weight: 600;
		a {
			color: #bbb;
			-webkit-transition: color 0.3s;
			&:hover, &.active {
				color: inherit;
				-webkit-transition: color 0.3s;
			}
		}
	}
}

footer {
	clear: both;
	padding: 1em 0;
	.ss-icon {
		position: relative;
		top: 0.2em;
		margin-left: 0.5em;
	}
	p {
		margin: 0;
		// wtf
		padding: 0 !important;
	}
}

#content {
	//-webkit-transition: padding-top 0.75s;
	a {
		&:hover {
			text-decoration: underline;
		}
	}
}

ul.projects {
	display: block;
	overflow: auto;
	width: 100%;
	clear: both;
	margin-top: 1.0em;
	li {
		margin-bottom: 1em;
	}
}

div.hero {
	margin-bottom: 3em;
}

input::-webkit-input-placeholder {
	//color: #eee;

}

figure {
	margin-bottom: 1em;
	figcaption {
		h2, h4 {
			margin: 0;
			//font-size: 0.8em;
			line-height: 1.2em;
		}
		p {
			margin-top: 1em;
			padding-right: 2em;
		}
	}
}

article.detail {
	h1 {
		margin-top: 0.5em;
		margin-bottom: 0;
	}
	img {
		margin-top: 1em;
	}
}

.featured-clients {
	overflow: auto;
	img {
		background-color: #ddd;
	}
	figcaption {
		display: none;
	}
}

section.people, section.services, section.features, section.contact-details {
	display: block;
	overflow: auto;
	width: 100%;
	clear: both;
}

section.contact-details {
	margin-top: 1em;

	h1 {
		word-wrap: break-word;
	}
}

section.features {
	margin-top: 1em;
	figure {
		margin-bottom: 3em;
		h2 {
			padding-right: 1em;
			//font-weight: 500;
		}
	}
}

section.articles {
	margin-top: 1em;
	article {
		border-bottom: 1px solid $hrColor;
		margin-bottom: 2em;
		padding-bottom: 2em;
		&:last-child {
			border-bottom: none;
		}
		img {
			margin-bottom: 0;
		}
		h1 {
			margin-top: 0.0em;
		}
		p {
			margin-top: 1em;
			padding-right: 2em;
		}
	}
}

article.project-detail {
	margin-bottom: 3em;
	overflow: auto;
	clear: both;
	hr + h2 {
		margin-top: 0;
	}
	section {
		ol {
			text-indent: 0;
			margin: 0;
			padding: 0;

			li {
				list-style: none;
				margin-bottom: 2em;

				div.video {
					position: relative;
					padding-bottom: 56.25%;

					iframe {
						border: 0;
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	aside {
		.padding {
			padding-right: 4em;
		}
		h1, h2 {
			margin-top: 0;
		}
		hr {
			margin-bottom: 0.5em;
		}
	}
	& > hr {
		margin-bottom: 1em;
		margin-top: 0;
	}
	&:first-child {
		padding-top: 1em;
		& > hr {
			display: none;
		}
		& > hr + h2 {
			display: none;
		}
	}
}

.slideshow {
	margin-bottom: 1em;
	position: relative;
	img {
		display: none;
		&:first-child {
			position: static;
			display: block;
		}
	}
}

hr.shorty {
	// width: 70%;
	width: 100%;
	clear: both;
	display: inline-block;
}
h1 {
	margin-bottom: 0.5em;
}

body.contact {
	h1 {
		margin: 0;
	}
}

body.profile {
	h1 {
		// margin-top: 0;
		margin-top: 0;
		padding-top: 0.5em;
	}
	hr {
		margin-top: 2em;
	}
}

#map-wrapper {
	position: relative;
	overflow: auto;
	height: 20em;
	clear: both;
}
#map {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

#toggle-filters {
	//font-weight: 700;
	display: block;
	margin: 0.5em 0;

	&.open {
		padding-top: 0.5em;
		border-top: 1px solid $hrColor;
	}
}


/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
  -webkit-pointer-events: none;
}

#nprogress .bar {
  background: $progressColor;

  position: fixed;
  z-index: 50000;
  top: 0;
  left: 0;

  width: 100%;
  height: 2px;
}

/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px $progressColor, 0 0 5px $progressColor;
  opacity: 1.0;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -moz-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  -o-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 50000;
  top: 1em;
  right: 2em;
}

#nprogress .spinner-icon {
  width: 14px;
  height: 14px;

  border:  solid 2px transparent;
  border-top-color:  $progressColor;
  border-left-color: $progressColor;
  border-radius: 10px;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
  -moz-animation:    nprogress-spinner 400ms linear infinite;
  -ms-animation:     nprogress-spinner 400ms linear infinite;
  -o-animation:      nprogress-spinner 400ms linear infinite;
  animation:         nprogress-spinner 400ms linear infinite;
}

@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes nprogress-spinner {
  0%   { -moz-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes nprogress-spinner {
  0%   { -o-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes nprogress-spinner {
  0%   { -ms-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg);   transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}

// small and down
@media (max-width: $width-sm){
	header {
		//margin: 0 -1em 0 -1em;
		position: static;
		.pad {
			padding: 1em 0 0 0 !important;
		}
	}
	body {
		&:after {
			content: 'mobile';
			display: none;
		}
		padding: 0 1em;
	}
	
	header .pad {
		padding: 1em 1em 0 1em;
	}
	
	section.people, section.featured-clients, section.services, ul.projects, section.features {
		& > * {
			@include grid-columns(2, 1, 1%);
		}
	}

	article.project-detail {
		section {
				ol {
					li {
					margin-bottom: 1em;
				}
			}
		}
	}
	/*
	section.features {
		& > * {
			@include grid-columns(2, 1, 2%);
		}
	}
	*/

	ul.filters {
		display: none;
	}

	#nprogress .spinner {
	  right: 1em;
	}
}

// x-small
@media (max-width: $width-xsm){
	header {
		
		//position: relative;
		//left: 0;
		//right: 0;
		//width: 100%;
	}
	body {
		// background: red;
	}
	section.people, section.services, ul.projects, section.features {
		& > * {
			@include grid-columns(1, 1, 4%);
		}
	}
	/*
	section.features {
		& > * {
			@include grid-columns(1, 1, 4%);
		}
	}
	*/
	article.project-detail {
		section {
			clear: both;
		}
		aside {
			clear: both;
		}
	}
	nav.primary {
		li {
			margin-left: -0.05em !important;
			font-size: 0.78em;
		}
	}
	input[name="search"] {
		padding: 2.0em;
		margin-bottom: 1em;
		zoom: 1.2;
	}
	h1 {
		font-size: 1.5em;
	}
}

// phone landscape
@media (max-height: 20em){
	body {
		
	}
	#logotype {
		display: inline-block !important;
	}
	header {
		.pad {
			padding-top: 0 !important;
		}
	}
	nav.primary {
		display: inline-block !important;
		border: none !important;
		padding-left: 0.4em !important;
		a {
			font-size: 0.55em !important;
			//font-weight: 700;
		}
	}
	#subnav {
		border-top: 1px solid $hrColor;
	}
	body.home {
		#logotype {
			display: none !important;
		}
		header {
			.pad {
				padding-top: 1em !important;
			}
		}
		nav.primary {
			display: block !important;
			border-top: 1px solid $hrColor !important;
			padding-left: 0 !important;
		}
	}
}

// small and up
@media(min-width: $width-sm + $gridprecision){
	body {
		&:after {
			content: 'tablet';
			display: none;
		}
		padding: 0 2em;
	}
	header {
		-webkit-transition: box-shadow 0.3s;
		&.open-half {
			box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.10) !important;
			-webkit-transition: box-shadow 0.3s;
		}

		&.open {
			box-shadow: 1px 4px 8px rgba(0, 0, 0, 0.2) !important;
			-webkit-transition: box-shadow 0.3s;
		}
	}
	header .pad {
		padding: 1em 2em 0 2em;
	}
	#toggle-filters {
		display: none;
	}
}

// medium and down
@media(min-width: $width-sm) and (max-width: $width-med - $gridprecision){

	section.people, section.featured-clients, section.services, ul.projects, section.features {
		& > * {
			@include grid-columns(3, 1, 0.5%);
		}
	}

	section.contact-details {
		& > * {
			@include grid-columns(2, 1, 0.25%);
		}
	}
	/*
	section.features {
		& > * {
			@include grid-columns(2, 1, 0.5%);
		}
	}
	*/
}

// medium - large
@media(min-width: $width-med) and (max-width: $width-lg - $gridprecision){

	section.people, section.featured-clients, section.services, ul.projects, section.features, section.contact-details {
		& > * {
			@include grid-columns(4, 1, 0.25%);
		}
	}
	#map-wrapper {
		height: 30em;
	}
	/*
	section.features {
		& > * {
			@include grid-columns(3, 1, 0.5%);
		}
	}
	*/
}


// medium and up
@media(min-width: $width-med) {
	body {
		&:after {
			content: 'desktop';
			display: none;
		}
	}
	article.project-detail, section.articles > article {
		overflow: auto;
		clear: both;

		hr + h2 {
			display: none;
		}

		section {
			float: left;
			width: 70%;
		}
		aside {
			float: left;
			width: 30%;
			.padding {
				padding-left: 1em;
			}
		}
	}
	section.articles > article {
		section {
			float: right;
		}
		aside {
			.padding {
				padding-left: 0;
				padding-right: 2em;
			}
		}
	}

}


// large
@media(min-width: $width-lg) and (max-width: $width-xlg - $gridprecision){

	section.people, section.featured-clients, section.services, ul.projects, section.features {
		& > * {
			@include grid-columns(5, 1, 0.25%);
		}
	}

	section.contact-details {
		& > * {
			@include grid-columns(4, 1, 0.25%);
		}
	}

	#map-wrapper {
		height: 30em;
	}
	/*
	section.features {
		& > * {
			@include grid-columns(3, 1, 0.25%);
		}
	}
	*/
}

// x-large
@media(min-width: $width-xlg){
	
	section.people, section.featured-clients, section.services, ul.projects, section.features {
		& > * {
			@include grid-columns(6, 1, 0.25%);
		}
	}

	section.contact-details {
		& > * {
			@include grid-columns(4, 1, 0.25%);
		}
	}

	#map-wrapper {
		height: 40em;
	}
	/*
	section.features {
		& > * {
			@include grid-columns(4, 1, 0.25%);
		}
	}
	*/
}