/* hero-banner */

.hero-banner {
	height: calc(100vh - 100px);
	display: flex;
	align-items: center;

	.container {
		flex: 1 1 100%;
	}

	h1 {
		margin: 0;
		padding: 0;
		line-height: 0.85em;
		font-size: 3.75em;
		position: relative;
		
		@media screen and (min-width: 500px) {
			font-size: 6rem;
		}

		@media screen and (min-width: 660px) {
			font-size: 9rem;
		}

		.home &:after {
		    display: inline;
		    position: absolute;
		    content: "?";
		    transform: translatex(-0.4em);
			animation: questionmark-transition 1s;
			animation-timing-function: ease-in-out;
			animation-fill-mode: forwards;
			animation-delay: 1.5s;
			/*opacity: 0;*/

			.home &.start:after {
				opacity: 1;
			}
		}
	}
	.always-wrap {
		overflow: hidden;
		position: relative;
	}

	.always {
		display: block;
		font-weight: 300;
		letter-spacing: 0.03em;
		animation: always-transition 2s;
		animation-timing-function: ease-in-out;
		animation-fill-mode: forwards;

		&.start {
			opacity: 0;
		}
	}
	
	p {
		font-family: "Montserrat";
		max-width: 825px;
		font-size: 1.24em;
		margin-top: 2em;
	}
}

.hero-banner.hero-banner--small {
	height: 150px;
	align-items: flex-end;

	@media screen and (min-width: 600px) {
		height: 225px;
	}

	h1, h2 {
		font-size: 2em;
		margin-bottom: 0;
		margin-top: 0;

		@media screen and (min-width: 600px) {
			font-size: 3em;
		}
	}

	h1 {
		font-weight: 300;
	}

	h2 {
		font-family: "Merriweather";
	}
}

@keyframes always-transition {
	0%, 30% {
		/*transform: translateY(100%);*/
		opacity: 0;
	}
	40% {
		opacity: 0;
	}
	100% {
		/*transform: translateY(0%);*/
		opacity: 1;
	}
}

@keyframes questionmark-transition {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}