@font-face {
	font-family: 'hp-simplified';
	src: url('fonts/hpsimplified_rg-webfont.eot');
	src: url('fonts/hpsimplified_rg-webfont.woff') format('woff'),
		 url('fonts/hpsimplified_rg-webfont.ttf') format('truetype'),
		 url('fonts/hpsimplified_rg-webfont.svg#hp_simplifiedregular') format('svg');
	font-weight: normal;
	font-style: normal;
}

* {
	padding: 0;
	margin: 0;
	list-style: none;
}

.omen,
.blocks,
.block {
	transition: all .3s ease;
}

.top {
	height: 100vh;
	width: 100vh;
	background: url(../public/images/svg/OMEN-Cube-Background.svg);
	background-repeat: no-repeat;
}

@media (max-width: 100vh) {

	.top {
		height: 100vw;
		width: 100vw;
	}

}

.container {
	width: 60%;
	height: 60%;
	left: 20%;
	top: 20%;
	background: initial;
	border-radius: 10px;
	border: 20px #fff solid;
	transform: rotate(45deg);
	position: relative;
	box-sizing: border-box;
}

.mask {
	position: relative;
	top: -1%;
	left: -1%;
	width: 102%;
	height: 102%;
	overflow: hidden;
}

.omen {
	width: 103%;
	position: absolute;
	z-index: 3;
	top: -1.5%;
	left: -1.5%;
}

.blocks{
	top: -101%;
	padding: .71%;
	width: 98.6%;
	height: 98.6%;
	position: relative;
	z-index: 4;
	background-color: #fff;
	display: flex;
	flex-wrap: wrap;
}

.block {
	width: calc(33.333% - 4px);
	height: calc(33.333% - 4px);
	margin: 2px;
	background: #ff0000;
	top: 0;
	left: 0;
}

.block:nth-child(2) {
	left: calc(33.333% + 2px);
}

.block:nth-child(3) {
	left: calc(33.333% * 2 + 4px);
}

.block:nth-child(4) {
	top: calc(33.333% + 2px);
}

.block:nth-child(5) {
	top: calc(33.333% + 2px);
	left: calc(33.333% + 2px);
}

.block:nth-child(6) {
	top: calc(33.333% + 2px);
	left: calc(33.333% * 2 + 4px);
}

.block:nth-child(7) {
	top: calc(33.333% * 2 + 4px);
}

.block:nth-child(8) {
	top: calc(33.333% * 2 + 4px);
	left: calc(33.333% + 2px);
}

.block:nth-child(9) {
	top: calc(33.333% * 2 + 4px);
	left: calc(33.333% * 2 + 4px);
}

.block img {
	transform: rotate(-45deg);
	width: 66%;
	top: 17%;
	position: relative;
	left: 17%;
}

.bind {
	width: 100%;
	opacity: 0;
}

.bottom {
	position: relative;
	height: calc(100vh - 100vw);
	z-index: -1;
}

.text-wrapper {
	height: 78%;
	position: relative;
}

.diamond {
	position: absolute;
	width: 6.66vw;
	bottom: 7.4vw;
	right: 7.4vw;
}

.text {
	color: #000;
	width: 70vw;
	margin: 0 auto;
	position: relative;
	top: 50%;
	transform:translateY(-50%);
}

.headline {
	position: relative;
}

.headline::before,
.headline::after {
	content: '';
	width: 100%;
	height: 10px;
	display: block;
	background: rgb(255,0,0);
	background: -moz-linear-gradient(90deg, rgba(255,85,225,1) 0%, rgba(255,0,0,1) 50%, rgba(255,180,0,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(255,85,225,1) 0%, rgba(255,0,0,1) 50%, rgba(255,180,0,1) 100%);
	background: linear-gradient(90deg, rgba(255,85,225,1) 0%, rgba(255,0,0,1) 50%, rgba(255,180,0,1) 100%);
}

.text h2 {
	font-family: 'Montserrat', sans-serif;	
	font-weight: 900;
	font-size: 6vw;
	line-height: 1.3;
	text-transform: uppercase;
	margin: 32px 0;
}

.text p {
	font-family: 'hp-simplified', sans-serif;
	font-weight: 400;
	font-size: 4.5vw;
	line-height: 1.2;
	margin-top: 2.5vw;
}

footer {
	position: absolute;
	bottom: 0;
	background: #000;
	width: 100%;
	height: 22%;
}

footer.sponsor .footer-logo-container {
	margin: 0 auto;
	display: block;
	width: 60%;
	height: 100%;
}

footer.sponsor img {
	float: left;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

footer.sponsor img.partner {
	float: right;
	width: 25%;
	filter: brightness(0) invert(1);
}

footer .footer-logo-container {
	height: 100%;
}

footer img {
	margin: 0 auto;
	display: block;
	width: 40%;
	max-width: 340px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

@media (min-width: 100vh) {

	.bottom {
		height: 100vh;
		width: calc(100% - 100vh);
		left: 100vh;
		position: absolute;
		top: 0;
	}

	.text-wrapper {
		height: 82%;
	}

	footer {
		height: 18%;
	}

	footer.sponsor .footer-logo-container {
		width: 70%;
	}

	footer.sponsor img.partner {
		height: auto;
	}

	.diamond {
		width: 6.66vh;
		bottom: 7.4vh;
		right: 7.4vh;
	}

	.headline::before,
	.headline::after {
		background: rgb(255,0,0);
		background: -moz-linear-gradient(270deg, rgba(255,85,225,1) 0%, rgba(255,0,0,1) 50%, rgba(255,180,0,1) 100%);
		background: -webkit-linear-gradient(270deg, rgba(255,85,225,1) 0%, rgba(255,0,0,1) 50%, rgba(255,180,0,1) 100%);
		background: linear-gradient(270deg, rgba(255,85,225,1) 0%, rgba(255,0,0,1) 50%, rgba(255,180,0,1) 100%);
	}

	.text {
		width: 70%;
	}

	.text h2 {
		font-size: 7vh;
	}

	.text p {
		font-size: 4.5vh;
		margin-top: 2.5vh;
	}

}

.container.slide {
	background: #fff;
	transition-delay: .3s;
}

.container.slide .omen {
	top: 100%;
}

.container.slide.end .omen {
	top: 0;
	left: -100%;
}

.container.end .omen {
	left: 0;
}

.container.slide .blocks {
	top: 0;
}

.container.slide.end .blocks {
	top: 0;
	left: 0;
}

.container.end .blocks {
	top: 0;
	left: 101%;
}

.start .blocks {
	top: -101%;
	left: 101%;
}

li.position {
	background: #fff;
}

.block.icon.position > img,
.block.icon.result > img {
	filter: brightness(0);
}

@keyframes result {
	0%	{ background-color:#fff; }
	20%	{ background-color:#000; }
	40%	{ background-color:#fff; }
	55%	{ background-color:#000; }
	70%	{ background-color:#fff; }
	85%	{ background-color:#000; }
	100%{ background-color:#fff; }
}

li.result {
	background: #fff;
	animation: result 1.2s ease 1s 1;
}

li.icon.result {
	background: #fff;
	animation: none;
}

@keyframes lose {
	0%	{ background-color:#fff; }
	20%	{ background-color:#ff0000; }
	40%	{ background-color:#fff; }
	55%	{ background-color:#ff0000; }
	70%	{ background-color:#fff; }
	85%	{ background-color:#ff0000; }
	100%{ background-color:#fff; }
}

li.icon.lose.result {
	background: #fff;
	animation: lose 1.2s ease 1s 1;
}

li.result.enlarge {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 10;
}

audio {
	display:none;
}