@font-face {
	font-family: 'Upheaval TT -BRK-';
	font-style: normal;
	font-weight: normal;
	src: local("Upheaval TT -BRK-"), url("../font/upheavtt.woff") format("woff")
}

body,
div,
h1,
h3,
h4,
ul,
li,
header {
	margin: 0;
	padding: 0
}

header,
footer {
	display: block
}

a {
	text-decoration: none;
	color: inherit
}

a:visited {
	text-decoration: none;
	color: inherit
}

* {
	box-sizing: border-box
}

body {
	color: #fff;
	background: #282526;
	background-image: linear-gradient(to bottom, #282526, #000);
	background-repeat: no-repeat;
	background-position: 0 1000px;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 18px;
	line-height: 28px
}

h2,
h3,
h4 {
	font-family: 'Upheaval TT -BRK-';
	font-weight: normal
}

h2 {
	font-size: 49.5px;
	line-height: 49px
}

h3 {
	font-size: 37px;
	line-height: 37px
}

h4 {
	font-size: 25px;
	margin-bottom: 16px
}

img {
	max-width: calc(100% - 40px)
}

ul {
	list-style: none
}

li {
	list-style: none;
	display: inline-block
}

iframe,
object,
embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}

.inner-content {
	width: 788px;
	display: block;
	margin: 0 auto;
	max-width: calc(100% - 40px)
}

#main {
	height: 1000px;
	width: 100%;
	max-width: 1700px;
	margin: 0 auto;
	position: relative;
	overflow: hidden;
	background: linear-gradient(to right, #eddeb0, #a690a4) no-repeat 0 0
background-color: #7c7c7c;
}

@media (max-width: 840px) {
	#main {
		height: auto
	}
}

#main:after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 100px;
	width: 100%;
	background-image: linear-gradient(to bottom, transparent, #282526)
}

#main .main-bg {
	position: absolute
}

#logo {
	width: calc(100% + 10px);
	margin-left: -5px
}

#logo img {
	max-width: none;
	width: 100%
}

#main-bg--left,
#main-bg--right {
	bottom: 253px;
	height: 800px;
	width: auto
}

@media (max-width: 1500px) {
	#main-bg--left,
	#main-bg--right {
		height: calc(100vw - 700px)
	}
}

@media (max-width: 1200px) {
	#main-bg--left,
	#main-bg--right {
		display: none
	}
}

#main-bg--left {
	left: 0
}

#main-bg--right {
	right: 0
}

#main-bg--center {
	left: 50%;
	transform: translateX(-50%);
	top: 210px;
	height: 540px;
	width: auto;
	min-width: 100%;
	max-width: none
}

@media (max-width: 840px) {
	#main-bg--center {
		top: auto;
		bottom: 190px
	}
}

#main-bg--bottom {
	left: 50%;
	transform: translateX(-50%);
	top: 679px;
	height: auto;
	width: 1500px;
	min-width: 100%;
	max-width: none
}

@media (max-width: 840px) {
	#main-bg--bottom {
		top: auto;
		bottom: -133px
	}
}

#page-header {
	display: inline-block;
	margin-top: 46px;
	position: relative;
	z-index: 2
}

#game-box {
width: 1024;
	height: 576px;
	margin-top: 33px;
	padding: 6px;
	position: relative;
	z-index: 2
}

@media (max-width: 640px) {
	#game-box {
		background: #d5dcdb;
		height: calc((100vw - 40px) * .7539)
	}
	.is-mobile #game-box {
		height: auto
	}
}



.is-mobile #game {
	display: none
}

#game-hint {
	display: none;
	color: #282526;
	font-size: 24px;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	font-weight: bold;
	line-height: 50px;
	padding: 20px
}

.is-mobile #game-hint {
	display: block
}

@media (max-width: 840px) {
	#game-hint {
		top: auto;
		transform: none
	}
}

#social-links {
	margin-bottom: 120px
}

#social-links ul {
	margin: 42px 0 0
}

#social-links li {
	margin: 0 8px
}

@media (max-width: 840px) {
	#social-links li {
		max-width: 15%
	}
}

#social-links .social-link {
	width: 70px;
	height: 70px;
	display: block;
	background: no-repeat 0 0
}

@media (max-width: 840px) {
	#social-links .social-link {
		max-width: 100%;
		max-height: 100%;
		background-size: 100%
	}
}

#social-links .social-link--facebook {
	background-image: url(../img/fb.png)
}

#social-links .social-link--twitter {
	background-image: url(../img/twitter.png)
}

#social-links .social-link--google {
	background-image: url(../img/gplus.png)
}

#social-links .social-link--email {
	background-image: url(../img/mail.png)
}

#social-links .social-link--whatsapp {
	background-image: url(../img/whatsapp.png)
}

#video-box {
	position: relative;
	width: 854px;
	height: 480px;
	background: grey;
	margin: 0 auto 90px
}

@media (max-width: 840px) {
	#video-box {
		height: calc((100vw - 40px) * .675)
	}
}

#game-description {
	z-index: 1;
	position: relative;
	margin-top: -106px;
	margin-bottom: 37px
}

@media (max-width: 840px) {
	#game-description {
		margin-top: 50px
	}
}

#game-description p {
	margin-top: 74px
}

#characters {
	margin-bottom: 88px
}

@media (max-width: 1300px) {
	#characters ul {
		width: 640px;
		margin: 0 auto
	}
}

@media (max-width: 680px) {
	#characters ul {
		width: auto
	}
}

#characters li {
	width: 192px;
	margin: 0 9px 30px
}

#characters li img {
	width: 100%;
	height: auto;
	max-width: none
}

#downloads {
	margin-bottom: 124px
}

#download-items {
	margin-top: 86px
}

#download-items .download-link a {
	background: no-repeat 0 0;
	background-size: 100% auto;
	display: block;
	margin: 0 40px;
	max-width: calc(100% - 80px)
}

@media (max-width: 480px) {
	#download-items .download-link a {
		margin: 0 16px;
		max-width: calc(100% - 32px)
	}
}

#download-items .download-link--mac {
	max-width: 43.9%
}

#download-items .download-link--mac a {
	width: 143px;
	height: 163px;
	background-image: url(../img/mac.png)
}

#download-items .download-link--windows {
	max-width: 56.1%
}

#download-items .download-link--windows a {
	width: 205px;
	height: 163px;
	background-image: url(../img/windows.png)
}

#bbb {
	margin: 0 auto 82px
}

#bbb h2 {
	margin-bottom: 93px
}

#bohemian-link {
	display: block;
	margin-bottom: 78px
}

footer {
	padding-bottom: 48px
}

h2 {
	margin-bottom: -50px;
	padding: 0px;
}

p {
	margin: 0px;
	padding: 0px;
}

p {
  margin: 24px 0;
  line-height: 2;
}

.wrapper {
  padding: 32px;
}

.cookie-container {
  position: fixed;
  z-index: 1000;
  bottom: -100%;
  left: 0;
  right: 0;
  background: #2f3640;
  color: #f5f6fa;
  padding: 0 32px;
  box-shadow: 0 -2px 16px rgba(47, 54, 64, 0.39);

  transition: 100ms;
}

.cookie-container.active {
  bottom: 0;
}

.cookie-container a {
  color: orange;
}

.cookie-btn {
  background: #e84118;
  border: 0;
  color: #f5f6fa;
  padding: 12px 48px;
  font-size: 18px;
  margin-bottom: 16px;
  border-radius: 8px;
  cursor: pointer;
}