/**
 * Top container
 */
.top {
	background: rgba(58,55,68,0.30);
	background: image-url('marketing/header-bg--github.png') no-repeat top center;
	background-size: cover;
  &.top--home {
    min-height: 100vh;
    .hero {
      margin-top: calc(100vh - 90vh);

    }
  }

	/**
	 * Alternate backgrounds
	 */
	@include m(stars) {
		background-color: #787C8E;
		background-image: image-url('marketing/header-bg--stars.png');
	}
	@include m(hexs) {
		background-color: #5F96C3;
		background-image: image-url('marketing/header-bg--hexs.png');

		.hero {
			color: #B5DDFF;

			a {
				font-weight: normal;
			}
		}
	}
}

/**
 * Header
 */
.header {

	.container {
		@extend %clearfix;
		@include rem((
			padding-top: 80px,
			padding-bottom: 80px,
			max-width: $slim-container-width
		));

		// Breakpoints
		@include media($grande) {
			max-width: 100%;
		}
		@include media($tall) {
			@include rem((
				padding: 30px 0
			));
		}
	}
}


/**
 * Logo
 */
.logo {
	float: left;
	@include rem((
		margin-top: 4px
	));

	img {
		display: block;
	}

	// Breakpoints
	@include media($tall) {
		float: none;

		img {
			display: inline-block;
		}
	}
}
