.head_main {
	position: relative;
}

#main_bg {
	width:100%;
	position: relative;
	z-index:5;
	user-select: none;
}

	#main_logo {
		position:absolute;
		top:10%;
		left:50%;
		width:60%;
		transform:translateX(-50%);
		z-index:6;
		user-select: none;
	}

	.head_main > h2{
		font-family: 'Bunt', serif;
		color:#fff;
		font-weight:normal;
		margin:0;
		padding:0.5em 0;
		font-size:6vw;
		line-height: 0.9;
		text-align: center;
		transform: rotate(-5deg);
		letter-spacing: -0.025em;

		position:absolute;
		width:75%;
		left:12.5%;
		bottom:6%;
		z-index:6;
		font-size:7.5vw;
		line-height: 1;
	}

	.head_main .yellow-btn-wrap {
		position:absolute;
		width:75%;
		left:12.5%;
		bottom:25%;
		z-index:6;
	}

.video {
	padding:0 10% 4%;
}

	.video .yellow-btn-wrap {
		position: relative;
		z-index:5;
		margin-top:5%;
	}

.intro {
	margin-top:-25%;
	background-image:url('../img/home_rays.jpg');
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
	padding:25% 10% 15%;
	position:relative;
	z-index:2;
}

	.intro > .marker_text {
		font-size:9vw;
		margin-bottom:0.5em;
	}

	.intro .left {
		float:left;
		width:45%
	}

		.intro .left p {
			font-size:1.8em;
			line-height:1.8;
		}

		.intro .yellow-btn {
			margin-top:2em;
		}

	.intro .right {
		float:right;
		width:45%;
	}

		.intro .right h3 {
			font-size:8em;
			margin-bottom:0;
			line-height: 1;
			text-transform: uppercase;
			letter-spacing: -0.035em;
		}

.quotes {
	position: relative;
	background-position: center;
	background-attachment: fixed;
	background-size: cover;
	z-index:6;
	padding:5% 10%;
	display:grid;
	grid-template-columns: repeat(3,1fr);
	grid-gap:4%;
}

	.quotes .bg {
		position:absolute;
		left:0;
		top:0;
		width:100%;
		height:100%;
		opacity:0.7;
		background-color:var(--bg_blue);
		z-index:4;
	}

	.quote {
		position: relative;
		z-index:5;
	}

	.stars {
		display: grid;
		grid-template-columns: repeat(5,1fr);
		grid-gap:1%;
		margin-bottom:8%;
		padding:0 5%;
	}

		.stars img {
			user-select: none;
		}

	.quote p {
		text-transform: uppercase;
		font-weight:bold;
		font-size:1.5vw;
		line-height: 1;
		margin-bottom:0;
		font-family: 'Teko', sans-serif;
		letter-spacing: -0.025em;;
	}

	.quote h2 {
		font-size: 4vw;
		line-height: 0.75;
		color:#fff;
		font-family:'Bunt',serif;
		font-weight:normal;
		margin-bottom:0;
	}

	.quote h3 {
		font-size:1.2vw;
		color:var(--yellow);
		margin:0.5em 0 0 0;
		text-transform: uppercase;
		letter-spacing: 0.02em;
		font-family: 'Teko', sans-serif;
		font-weight:200;
	}

.merch {
	position: relative;
	padding:10% 10% 5% 10%;
}

	.merch .items {
		display:grid;
		grid-template-columns: repeat(4,1fr);
		grid-gap:4%;
	}

		.merch .items img {
			align-self: center;
			max-height:300px;
			margin:0 auto;
		}
	
	.merch .link h2 {
		float:left;
		max-width:47.5%;
		clear:none;
		font-size:9vw;
	}

	.merch .link a {
		float:right;
		max-width:47.5%;
		clear:none;
		padding: 0.9em 6em;
		margin-top: 4em;
	}


@media screen and (max-width:899px){
	.head_main > h2 {
		font-size:10.5vw;
		width:90%;
		left:5%;
		bottom:1%;
	}

	.head_main {
		margin-bottom:5%;
	}

	.yellow-btn {
		font-size:2.4vw;
	}

	.video {
		padding:0 5% 4%;
	}

	.intro .marker_text {
		font-size:11.5vw;
	}

	.intro .left p {
		font-size:1.6em;
	}

	.intro .right h3 {
		font-size:6em;
	}

	.intro .yellow-btn {
		font-size:2em;
		padding:0.9em 2em 0.8em;
	}

	.merch .link a {
		margin-top:2em;
		padding:0.9em;
		width:100%;
	}
}

@media screen and (max-width:699px){
	.intro .left,
	.intro .right {
		width:100%;
		margin-bottom:10%;
	}

		.intro .yellow-btn {
			width:100%;
		}

		.intro .right {
			text-align: center;
			margin-bottom: 5%;
		}
}

@media screen and (max-width:599px){
	.intro p {
		font-size:2em;
	}

	.intro .right h3 {
		font-size: 4.5em;
	}
}

@media screen and (max-width:399px){
	.quotes {
		margin:10% 0;
		display:block;
	}

		.quote {
			margin:5em 0;
		}

		.quote h2 {
			font-size:11vw;
		}

		.quote p {
			font-size:8vw;
		}

		.quote h3 {
			font-size:5vw;
			margin-top:0.15em;
		}

		.stars {
			padding:0 15%;
			margin-bottom: 3%;
		}
	
	.head_main .yellow-btn-wrap {
		padding:0 10%;
		margin:0;
		left:0;
		width:100%;
	}

		.yellow-btn-wrap .yellow-btn {
			font-size:4vw;
			width:100%;
		}

	.head_main .marker_text {
		font-size:12vw;
		bottom:0;
	}

	.quotes {
		margin-bottom:5%;
		padding:0 5%;
	}

	.merch {
		margin-bottom:10%;
	}

		.merch .link h2,
		.merch .link a {
			width:100%;
			max-width:100%;
		}

		.merch .link a {
			font-size:2em;
			padding:0.9em 2em 0.8em;
		}

		.merch .link h2 {
			font-size:15vw;
		}
}