html {scroll-behavior: smooth;}

html,
body {
	font-size: 16px;
	font-family: 'Open Sans', sans-serif;
	color: #4A3933;
	background-color: #E6D5B8;
}

/* Layout Styles */

.container {
	padding-left: 18px;
	padding-right: 18px;
}

#landing {
	height: 100vh;
	display: flex;
	align-items: center;
}

#nomination-week {
	font-size: 1.25rem;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 2px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: 'Bebas Neue', cursive;
/*	margin-top: 36px;*/
	margin-bottom: 18px;
/*	letter-spacing: 1px;*/
}

p a {
	color: #4A3933;
}

#intro p a,
.bg-dark p a,
.bg-spice p a {
	color: white;
}

h1 {font-size: 3rem;}
h2 {font-size: 2.25rem;}
h3 {font-size: 2rem;}
h4 {font-size: 1.75rem;}
h5 {font-size: 1.5rem;}
h6 {font-size: 1.25rem;}

.btn {
	font-family: 'Bebas Neue', cursive;
	font-size: 1.5rem;
	padding: 12px 24px;
	letter-spacing: 1px;
/*	width: 100%;*/
	border-radius: 0;
}
.btn-dark {
	background-color: #4A3933;
}
.btn-outline-dark {
	color: #4A3933;
	border-color: #4A3933;
}
.btn-outline-dark,
.btn-outline-light {
/*	border-width: 4px;*/
/*	padding: 9px 12px;*/
}

.bg-gold {
	background-color: #F0A500;
}
.bg-dark {
	background-color: #4A3933!important;
	color: white;
}
.bg-spice {
	background-color: #e45826;
	color: white;
}
.bg-platinum {
	background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%);
}

span.subtitle {
	display: block;
	font-family: 'Open Sans', sans-serif;
	font-size: 0.85rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

section {
	padding: 40px 0 60px 0;
}

.z-foreground {
	position: relative;
	z-index: 9;
}

/* Nav */

nav {
	background-color: #F0A500;
	position: sticky;
	top: 0;
	z-index: 10;
}

nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	justify-content: center;
	text-align: center;
}
nav ul li {}
nav ul li a {
	display: inline-block;
	padding: 14px;
	color: #4A3933;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
/*	font-size: 1.25rem;*/
	font-family: 'Bebas Neue', cursive;
	transition: all 0.3s ease;
}
nav ul li a:hover {
	background-color: #E6D5B8;
	color: #4A3933;
}
nav ul li a span {
	display: inline-block;
	margin-top: 8px;
}
nav ul li a .bi {
	font-size: 1.25rem;
	display: block;
}

/* Intro */

#logo {width: 50%;}

#intro {
	position: relative;
	color: white;
/*	padding-top: 80px;*/
	background-color: #F0A500;
/*	background-image: url('../img/game-art/bg-art-deathloop-01.jpg');*/
}
#intro:after {
	background-image: linear-gradient(to bottom, rgba(240,165,0,1), rgba(228, 88, 38,1));
	mix-blend-mode: hard-light;
	z-index: 0;
}
#intro .container:after {
	background-image: linear-gradient(to bottom, rgba(74,57,51,0), rgba(74,57,51,1));
	z-index: 1;
/*	mix-blend-mode: multiply;*/
}

@keyframes livePulse { 
  from { opacity: 0.2; } 
}
#intro span#live {
	vertical-align: middle;
	position: relative;
	display: inline-block;
	font-family: 'Open Sans', sans-serif;
	font-size: 0.65rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding: 6px 8px 8px 24px;
	border-radius: 14px;
	background-color: #4A3933;
}
#intro span#live:before {
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	left: 8px;
	top: 0;
	bottom: 0;
	margin: auto;
	background-color: red;
	border-radius: 50%;
	animation: livePulse 1s infinite alternate;
}

#nav-transition {
	position: relative;
	top: 0;
	height: 10vh;
	width: 100%;
	z-index: 2;
}
#nav-transition:after {
/*	background-image: linear-gradient(to top, rgba(240,165,0,0), rgba(240,165,0,1));*/
	z-index: 1;
}

/* Hero Crossfade */

#intro #bg-art {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#intro #bg-art img {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center;
/*
	-webkit-animation-name: crossFade;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 8s;
	-moz-animation-name: crossFade;
	-moz-animation-timing-function: ease-in-out;
	-moz-animation-iteration-count: infinite;
	-moz-animation-duration: 8s;
	-o-animation-name: crossFade;
	-o-animation-timing-function: ease-in-out;
	-o-animation-iteration-count: infinite;
	-o-animation-duration: 8s;
	animation-name: crossFade;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-duration: 8s;
*/
}

@-webkit-keyframes crossFade {
 0% {opacity:1;}
 17% {opacity:1;}
 25% {opacity:0;}
 92% {opacity:0;}
 100% {opacity:1;}
}

@-moz-keyframes crossFade {
 0% {opacity:1;}
 17% {opacity:1;}
 25% {opacity:0;}
 92% {opacity:0;}
 100% {opacity:1;}
}

@-o-keyframes crossFade {
 0% {opacity:1;}
 17% {opacity:1;}
 25% {opacity:0;}
 92% {opacity:0;}
 100% {opacity:1;}
}

@keyframes crossFade {
 0% {opacity:1;}
 17% {opacity:1;}
 25% {opacity:0;}
 92% {opacity:0;}
 100% {opacity:1;}
}

#bg-art img:nth-of-type(1) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  animation-delay: 6s;
}
#bg-art img:nth-of-type(2) {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}
#bg-art img:nth-of-type(3) {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}
#bg-art img:nth-of-type(4) {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}

#on-air {
	position: relative;
	display: inline-block;
	font-size: 0.75rem;
	text-transform: uppercase;
	height: 44px;
	border-radius: 44px;
	margin-bottom: 18px;
	background-color: white;
	color: black;
	padding: 12px 12px 12px 36px;
}
#on-air:before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	left: 12px;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	background-color: red;
}

/* The Biscuit */

#the-biscuit {
	display: none;
	position: relative;
}
#the-biscuit:after {
	content: "";
	position: absolute;
	z-index: 11;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(to top, rgba(230,213,184,1), rgba(230,213,184,0));
}
#the-biscuit img{
	position: absolute;
	width: 100%;
	bottom: 0;
	z-index: 10;
}


/* Awards Carousel */

#awards .embla {
	overflow: hidden;
}
#awards .embla__container {
	margin: 0 18px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 80%;
	grid-column-gap: 24px;
}
#awards .embla__slide {
	position: relative;
}

.slick-dotted.slick-slider {
  margin-bottom: 80px;
}

.slick-dots li button:before {
  font-size: 1.25rem;
  margin: 24px 4px;
}

/* Award Cards */

.category-card {
	position: relative;
	color: white;
	border-radius: 5px;
	overflow: hidden;
	width: 100%;
	max-height: 480px;
  margin: 0 12px;
	border: 2px solid #F0A500;
}
.category-card:after {
	content: "";
	background-image: linear-gradient(to bottom, rgba(74,57,51,0), rgba(74,57,51,1));
	z-index: 0;
	mix-blend-mode: multiply;
}
.category-card.goty {background-image: url('../img/awards-art/awards-bg-goty.png');}
.category-card.diversity {background-image: url('../img/awards-art/awards-bg-heritage.png');}
.category-card.indie {background-image: url('../img/awards-art/awards-bg-indie-alt.png');}
.category-card.fighting {background-image: url('../img/awards-art/awards-bg-fighting.jpg');}
.category-card.shooter {background-image: url('../img/awards-art/awards-bg-shooter.png');}
.category-card.sports {background-image: url('../img/awards-art/awards-bg-sports.png');}
.category-card.adventure {background-image: url('../img/awards-art/awards-bg-adventure.png');}
.category-card.story {background-image: url('../img/awards-art/awards-bg-story.png');}
.category-card.music {background-image: url('../img/awards-art/awards-bg-music.png');}
.category-card.ongoing {background-image: url('../img/awards-art/awards-bg-ongoing.png');}
.category-card.vr {background-image: url('../img/awards-art/awards-bg-vr.png');}
.category-card.surprise {background-image: url('../img/awards-art/awards-bg-surprise.png');}
.category-card.anticipated {background-image: url('../img/awards-art/awards-bg-anticipated.jpg');}

.category-card .description {
	position: absolute;
	width: 100%;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 24px;
	z-index: 1;
	font-size: 0.85rem;
}

.category-card .description h3 {
	margin-bottom: 12px;
}
.category-card .description h3 .subtitle {
	margin-bottom: 12px;
}

.category-card .description h4 {
	font-size: 1.35rem;
}

.category-card .description p {
/*	display: none;*/
	margin-bottom: 0;
}

.category-card .description ul {
	padding: 0;
	list-style: none;
	margin-bottom: 0;
	margin-top: 24px;
}
.category-card .description ul li {
	padding-top: 8px;
	padding-bottom: 8px;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	border-bottom: 1px solid rgba(255,255,255,0.5);
}
.category-card .description ul li:last-of-type {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}
.category-card .description ul li.winner {
	background-color: #F0A500;
	color: black;
  margin-left: -24px;
	padding: 12px;
	padding-left: 24px;
	border: 0;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}
.category-card .description ul li.winner i {
	margin-right: 6px;
}

.category-card a.btn {
	display: block;
	display: none;
	margin-top: 24px;
	font-size: 1.185rem;
}
.category-card a.btn:after {
}

ul.icon-list {
	margin-top: 1rem;
	padding-left: 0;
	list-style: none;
	border-bottom: 1px solid rgba(128,128,128,0.5);
	padding-bottom: 1rem;
}
ul.icon-list li {
	margin-top: 1rem;
	padding-top: 1rem;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-top: 1px solid rgba(128,128,128,0.5);
}
ul.icon-list li a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.3s ease;
}
ul.icon-list li a:hover {
	opacity: 0.5;
}

/* About */

#about {
	background-image: url(../img/brand-elements/bg-brookago-map-compass.jpg);
}

.host {
	position: relative;
	padding: 3.5rem 1.75rem 1.75rem 1.75rem;
	margin-top: 80px;
	font-size: 0.85rem;
	color: white;
	border-radius: 5px;
	background-color: rgba(0,0,0,0.35);
	backdrop-filter: blur(8px);
}

.host .avatar {
	position: absolute;
	width: 120px;
	height: 120px;
	top: -60;
	left: 0;
	right: 0;
	margin: auto;
	border-radius: 50%;
	overflow: hidden;
}
.host .avatar img {
	width: 100%;
	height: 100%;
	object-position: center 14px;
}
.host h3 {text-align: center}

/* Supporters */

.bg-gradient-spawnies {
	background-image: linear-gradient(to bottom right, #ffffff 0%, #f6d365 100%);
}

.split-wrapper {
	position: relative;
	padding-top: 0;
	padding-bottom: 0;
}

.split-wrapper:after {
	content: "";
	display: table;
	clear: both;
}

.split-wrapper .split {position: relative;}
.split-wrapper .split:after {}

.split-wrapper .split hr {margin: 30px 0;}

.split-wrapper .split .container {
	padding-top: 60px;
	padding-bottom: 60px;
}

.split-wrapper .split.img-wrapper img {
	width: 100%;
	max-height: 460px;
	object-fit: cover;
	object-position: center;
}

#partner-tiers {}

.partner-tier {
	padding: 1.25rem;
	border-radius: 5px;
	margin-top: 24px;
}

.partner-tier h3 {}

.partner-tier ul {
	list-style: none;
	padding: 0;
	margin-bottom: 0;
	text-align: left;
}

.partner-tier ul li {
	position: relative;
	margin-top: 12px;
	padding-top: 12px;
	font-size: 0.75rem;
	border-top: 1px solid rgba(0, 0, 0, 0.3);
}

.partner-tier ul li:last-of-type {
	margin-bottom: 0;
}

.partner-tier .btn {
	margin-top: 24px;
	display: block;
}

.partner-tier ul li .bi {
	margin-right: 4px;
}

.partner-tier.silver,
.partner-tier.bronze {
	color: white;
}

.partner-tier.silver ul li,
.partner-tier.bronze ul li {
	border-color: rgba(255, 255, 255, 0.6);
}

.partner-tier.gold {background-color: #F0A500;}
.partner-tier.silver {background-color: #4A3933;}
.partner-tier.bronze {background-color: #e45826;}

.sponsor .avatar {
	position: relative;
/*	background-color: black;*/
	margin: auto;
	width: 90px;
	height: 90px;
	margin-bottom: 18px;
}

.sponsor .avatar img {
	height: 100%;
	width: 100%;
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	object-fit: contain;
}
.sponsor .avatar img.masked {
	border-radius: 50%;
}

.sponsor.tbd .avatar img {
	width: 60px;
	height: 60px;
	animation: rotation 15s infinite linear;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

.sponsor p {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.sponsor p a {
	text-decoration: none;
	color: #4A3933;
}

/* Video Responsiveness */

.video-wrapper {
	position: relative;
	padding-bottom: 56.25%;/* 16:9 */
	margin-bottom: 24px;
	height: 0;
  border: 1px solid white;
	border-radius: 4px;
	overflow: hidden;
	z-index: 999;
}
.video-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* Shared Styles */

.bg-art {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}

#intro:after,
#intro .container:after,
#nav-transition:after,
.category-card:after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

#footer {
	position: relative;
	font-size: 0.85rem;
/*	padding-bottom: 0;*/
}

#parriscantcook {
	position: absolute;
	width: 50%;
	height: 50%;
	right: 0;
	bottom: 0;
	z-index: 0;
}
#parriscantcook a {
	height: 100%;
	width: 100%;
	position: absolute;
	bottom: 0;
	top: 0;
}
#parriscantcook a:after {
	content: "";
	position: absolute;
	height: 100%;
	width: 100%;
	bottom: 0;
	right: 0;
	background-image: linear-gradient(to right, rgba(74,57,51,0), rgba(74,57,51,1));
	mix-blend-mode: multiply;
/*	z-index: 2;*/
}
#parriscantcook img {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	bottom: 0;
	left: 0;
	object-fit: cover;
	object-position: left bottom;
}

/*Medium devices (tablets, 768 and up)*/
@media (min-width: 768px) {
  #awards .embla__container {
    grid-auto-columns: 40%;
  }
	
	#partner-tiers {
		display: flex;
		flex-wrap: wrap;
		gap: 18px;
		margin-top: 24px;
	}
	.partner-tier {
		flex: auto;
		margin-top: 0;
	}
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
	html,
	body {
		font-size: 18px;
	}
	h1 {font-size: 4rem;}
	h2 {font-size: 3.25rem;}
	h3 {font-size: 2rem;}
	h4 {font-size: 1.75rem;}
	h5 {font-size: 1.5rem;}
	h6 {font-size: 1.25rem;}
	
	nav ul li a {
		font-size: 1.25rem;
		padding: 18px 24px;
	}
	
	nav ul li a span {
		margin-top: 0;
	}
	nav ul li a .bi {
		display: inline-block;
	}

	#awards .embla__container {margin: 0 24px;}

	.category-card {
		max-height: 540px;
		margin: 0 18px;
		cursor: pointer;
	}
	
	.category-card .description h3 {
		font-size: 2.25rem;
	}
	
	.category-card a.btn {
		font-size: 1.25rem;
	}

	#the-biscuit {display: block;}
	
	#about {background-attachment: fixed;}
	
	.split-wrapper {display: flex;}
	.split-wrapper .split {
		width: 50%;
		float: left;
		align-items: center;
		justify-content: center;
	}

	.split-wrapper .split .container {padding: 15%;}
	.split-wrapper .split .container hr {margin: 40px 0;}

	.split-wrapper .split.img-wrapper img {
		position: absolute;
		max-height: none; 
		height: 100%;
	}
	
	.partner-tier {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.sponsor .avatar { 
		width: 160px;
		height: 160px;
	}
	.sponsor.tbd .avatar img {
		width: 80px;
		height: 80px;
	}
	
	#parriscantcook {
		height: 100%;
		width: 25%;
	}
	#parriscantcook img {
		object-fit: contain;
	}
}

@media (min-width: 1279px) {
	#awards .embla__container {grid-auto-columns: 22%;}
	section {padding: 60px 0;}
}