/* Header call-to-action button */

.action-button {
	transform: translateY(-40vh) translateZ(1px);
	text-align: center;
	position: relative;
}

.action-button .links {
	transform: scale(0.5);
}

.action-button .links div {
	width: 37.5%;
	margin: 10px 2%;
}

/* BASE STYLING
-------------------------------------------------- */

@font-face {
    font-family: "BooterOneZero";
    src: url("../font/booteroz.ttf")
}

.action-button .links div {
	box-shadow: 3px 3px 15px black;
}

html, body {
	background-color: black;
	font-family: 'BooterOneZero', sans-serif;
	font-size: 24px;
	line-height: 26px;
}

.no-margin {
	margin-bottom: 0;
}

h1 {
	font-size: 48px;
	font-weight: bold;
}

h2 {
	font-size: 40px;
	font-weight: bold;
}

h3 {
	font-size: 32px;
	font-weight: bold;
}

p {
	margin-bottom: 0;
}

.paralax-container {
	height: 100vh;
	overflow: hidden;
	overflow-y: auto;
	perspective: 2px;
	padding-bottom: 30px;
}

.highlight-container {
	border-radius: 25px;
	padding: 20px;
	background-color: #1b1b1b;
}

section {
	background-size: cover;
	color: white;
	/* background-color: #222; */
	position: relative;
	align-items: center;
	justify-content: center;
}

section.image {
	background-position: center center;
	transform: translateZ(-1px) scale(1.5);
	/* Force the background image to fill the whole element. */
	background-size: cover;
	/* Keep the image from overlapping sibling elements. */
	z-index: -1;
	height: 100vh;
}

section.image-small {
	width: 100%;
	height: 0;
	padding-bottom: 56.2963%;
}

section.text {
	min-height: 50vh;
	background: #000;
	text-align: center;
	padding: 20px 0 0 0;
}

section.text div.intro-text {
	width: 50%;
	margin: 0 25% 20px;
}

section.heading {
	z-index: -1;
	transform: translateY(-74vh) translateZ(1px);
	height: 1vh;
}

section.heading h1 {
	display: none;
}

section.heading div.header-image {
	width: 100vw;
	height: 20vh;
	display: block;
	background-image: url(../images/logos/logo-no-image.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}

section.heading h2 {
	transform: scale(0.5);
	text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
	font-size: 72px;
	text-align: center;
	padding-top: 13vh;
}

.force-clear {
	display: block;
	clear: both;
}

.main-text {
	transform: translateY(-22.5vh);
}

.foot-text {
	transform: translateY(-50vh);
}

.links {
	width: 80%;
	margin: 10px auto;
}

.links div {
	width: 30%;
	float left;
	display: inline-block;
	margin: 10px 8%;
	background-image: linear-gradient(-5deg, navy, mediumblue);
}

.links div.call-to-action {
	background-image: linear-gradient(-5deg, red, orange);
}

.links div h3 a {
	color: #e8e8e8;
	text-shadow: 2px 2px 4px black;
}

.video-container {
	width: 75%;
	position: relative;
	padding-bottom: 42.22225%;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 12.5vw;
	width: 100%;
	height: 100%;
	border: 0;
	margin: 0;
}

.info-image-container {
	width: 25%;
	float: left;
}

.info-image-container img {
	width: 95%;
	padding: 0 10px;
}

.info-text-container {
	width: 75%;
	float: right;
	padding: 0 10px;
}

.info-text-container p {
	margin-bottom: 1em;
}

.hero-image-container {
	width: 40%;
	float: left;
}

.hero-image-container div {
	width: 60%;
	margin: 0 5% 0 35%;
	background-size: contain;
	background-position: right;
	padding-bottom: 60%;
}

.hero-text-container {
	width: 60%;
	float: right;
}

.hero-text-container div {
	width: 70%;
	margin: 7% 25% 0px 5%;
	background-size: contain;
	background-position: left;
}

.hero-text-container div p {
	text-align: left;
}

.hero-image-container div.silverside {
	background-image: url(../images/page-content/home-carousel/silver-hero-render.png);
	background-color: #300;
}

.hero-image-container div.bovy {
	background-image: url(../images/page-content/home-carousel/bovy-hero-render.png);
	background-color: #013;
}

.hero-image-container div.dai-shi {
	background-image: url(../images/page-content/home-carousel/dai-shi-hero-render.png);
	background-color: #202;
}

.hero-image-container div.kanonbul {
	background-image: url(../images/page-content/home-carousel/kanonbul-hero-render.png);
	background-color: #021;
}

.hero-image-container div.stu {
	background-image: url(../images/page-content/home-carousel/beefy-stu-hero-render.png);
	background-color: #330;
}

.hero-image-container div.mootilda {
	background-image: url(../images/page-content/home-carousel/mootilda-hero-render.png);
	background-color: #413;
}

hr {
  background: linear-gradient(to right, black, silver, black);
  height: 3px;
}

.carousel {
	margin-bottom: 20px;
}

.carousel-image-container {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

.store-links, .social-media-links {
	padding: 0;
	margin: 20px auto;
	width: 100%;
}

.social-media-links {
	padding-bottom: 30px;
}

.store-links li, .social-media-links li {
	display: inline-block;
	list-style: none;
}

.store-links li  {
	width: 15%;
}

.social-media-links li {
	width: 10%;
}

.info-presenter {
	width: 60%;
	margin: 0 auto 30px auto;
}

.info-presenter p {
	text-align: left;
}

.footer {
	width: 100%;
	background-color: #1b1b1b;
	text-align: right;
	padding: 5px 10px;
}


/* RESPONSIVE CSS
-------------------------------------------------- */
@media (max-width: 1400px) {
	.links div {
		width: 40%;
	}
}

@media (max-width: 1280px) {
	.hero-image-container div {
		width: 80%;
		margin: 0 5% 0 15%;
		padding-bottom: 80%;
	}

	.hero-text-container div {
		width: 85%;
		margin: 7% 10% 0px 5%;
	}
	
	.links {
		width: 100%;
	}
	
	.store-links li img {
		transform: scale(0.85);
	}
	
	.social-media-links li img {
		transform: scale(0.85);
	}
}

@media (max-width: 1024px) {
	section.heading h2 {
		font-size: 48px;
		padding-top: 16vh;
	}
	
	.action-button {
		display: none;
	}
	
	section.text div.intro-text {
		width: 75%;
		margin: 0 12.5%;
	}
}

@media (max-width: 1023px) {
	body {
		font-size: 20px;
	}
	
	section.heading div.header-image {
		height: 15vh;
		transform: translateY(2vh);
	}
	
	.links div {
		width: 45%;
	}
	
	.hero-image-container {
		max-width: 60%;
		float: none;
		display: block;
		margin: 0 auto 20px auto;
	}
	
	.hero-text-container {
		max-width: 90%;
		float: none;
		display: block;
		margin: 0 auto;
	}
	
	.hero-image-container div, .hero-text-container div {
		width: 100%;
		margin: 0;
	}
	
	.hero-image-container div {
		background-position: center;
		background-repeat: no-repeat;
	}
}

@media (max-width: 768px) {
		section.heading h2 {
		font-size: 36px;
		padding-top: 22vh;
	}
	
	section.text div.intro-text {
		width: 95%;
		margin: 0 2.5%;
	}
	
	.hero-image-container, .hero-text-container {
		width: 90%;
	}
	
	.info-presenter {
		width: 95%;
	}
	
	.info-image-container {
		float: none;
		width: 75%;
		text-align: center;
		margin: 0 auto;
	}
	
	.info-text-container {
		float: none;
		width: 95%;
		text-align: left;
		margin: 1rem auto 0 auto;
	}
	
	.store-links li {
		width: 20%;
	}
	
	.store-links li img {
		width: 100%;
	}
	
	.social-media-links li {
		width: 15%;
	}
	
	.social-media-links li img {
		width: 100%;
	}
	
	.links div {
		width: 70%;
		float none;
		display: block;
		margin:  10px auto;
	}
}

@media (max-width: 512px) {
	body {
		font-size: 18px;
		line-height: 18px;
	}
	
	h2 {
		font-size: 32px;
	}
	
	h3 {
		font-size: 28px;
	}
	
	p {
		margin-bottom: 5px;
	}
	
	section.heading div.header-image {
		height: 10vh;
	}
	
	.footer-logo img{
		width: 100%;
	}
	
	.footer {
		font-size: 16px;
		text-align: center;
	}
}