@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;700&display=swap');

@font-face {
	font-family: 'gothic';
	src: url('../fonts/gothic.eot');
	src: local('gothic'), url('../fonts/gothic.woff') format('woff'), url('../fonts/gothic.ttf') format('truetype');
	font-weight: 400;
}
@font-face {
	font-family: 'gothic';
	src: url('../fonts/OPTIFuturaDemiBold.otf');
	font-weight: 600;
}




 /* Style the video: 100% width and height to cover the entire window */
#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

/* Add some content at the bottom of the video/page */
.content {
  position: fixed;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

/* Style the button used to pause/play the video */
#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}

#myBtn:hover {
  background: #ddd;
  color: black;
} 


/*  --------------------------  Whitespaces  -------------------------- */
.whitespace-1 {
  height: 1px;
}
.whitespace-2 {
  height: 1px;
}
.whitespace-3 {
  height: 1px;
}
.whitespace-4 {
  height: 1px;
}
.whitespace-5 {
  height: 5px;
}
.whitespace-10 {
  height: 10px;
}
.whitespace-15 {
  height: 15px;
}
.whitespace-20 {
  height: 20px;
}
.whitespace-25 {
  height: 25px;
}
.whitespace-30 {
  height: 30px;
}
.whitespace-35 {
  height: 35px;
}
.whitespace-40 {
  height: 40px;
}
.whitespace-50 {
  height: 50px;
}
.whitespace-60 {
  height: 60px;
}
.whitespace-70 {
  height: 70px;
}
.whitespace-80 {
  height: 80px;
}
.whitespace-90 {
  height: 90px;
}
.whitespace-100 {
  height: 100px;
}
.whitespace-110 {
  height: 110px;
}
.whitespace-120 {
  height: 120px;
}
.whitespace-130 {
  height: 130px;
}
.whitespace-140 {
  height: 140px;
}
.whitespace-150 {
  height: 150px;
}




/* ----------------------------------------------------------------------------------------------------------------------------- */
/* TYPO */
/* ----------------------------------------------------------------------------------------------------------------------------- */







h1, h2, h3, h4 {
	font-family: 'Josefin Sans';
	text-transform: uppercase;
	font-weight: 700;
	display: inline-block;
}

h1 {
	font-size: 38px;
	letter-spacing: -0.05em;
	line-height: 1.33;
	margin-top: 0;
}
h2 {
	font-size: 26px;
	line-height: 1.33;
	letter-spacing: -0.05em;
}
h3 {
	font-size: 18px;
	line-height: 1.5;
	font-weight: 600;
	letter-spacing: -0.025em;
}
h4 {
	font-size: 16px;
	line-height: 32px;
	letter-spacing: -0.025em;
}
.signature {
	border-bottom: 1px solid #000;
}




p {
	line-height: 1.66;
	margin-bottom: 15px;
}
strong, .strong,
.strong ul li
{
	font-weight: 700;
}


.color, 
.color ul li
{
	color: #ff5c39;
}
.line {
	height: 1px;
	border-top: 1px solid #fff;
}




ul.bullet {
  list-style:none;
  padding-left: 0;
	margin-left: 26px;
}

ul.bullet li {
	list-style: none;
	margin-bottom: 15px;
}
ul.bullet li:before {
	content: '';
	display: inline-block;
	height: 1em;
	width: 26px;
	margin-left: -26px;
	background: url(../images/list-bullet-2.svg) left 8px no-repeat;
}


small {
	color: #aaa;
	font-weight: 100;
	font-size: 12px;
	line-height: 1;
}


/* ----------------------------------------------------------------------------------------------------------------------------- */
/* GLOBAL */
/* ----------------------------------------------------------------------------------------------------------------------------- */

html, body {
	font-family: 'gothic';
	webkit-tap-highlight-color: #f00;
	line-height: 20px;
	font-size: 18px;
	color: #0B1020;
	background: none;
}
body { 
	font-size: 100%; 
}
::-moz-selection {
  text-shadow: none;
  background: #a89254;
	color: #fff;
}
::selection {
  text-shadow: none;
  background: #a89254;
	color: #fff;
}
img::selection {
  background: transparent;
}
img::-moz-selection {
  background: transparent;
}
img { 
	max-width: 100%; 
	height: auto;  
	border: 0; 
	-ms-interpolation-mode: bicubic; 
	transition:all 0.3s ease-in-out 0s; 
	-webkit-transition:all 0.3s ease-in-out 0s; 
}
a {
	cursor: pointer;
	color: #fff;
	text-decoration: none;
	transition: all 0.4s; 
	-webkit-transition: all 0.4s; 
	outline: none;
}
a:hover {
	color: #a89254;
}
a:focus, a:hover {
	text-decoration: none;
}

.no-transition {
  -webkit-transition: height 0.01s !important;
  -moz-transition: height 0.01s !important;
  -ms-transition: height 0.01s !important;
  -o-transition: height 0.01s !important;
  transition: height 0.01s !important;
}





/* ----------------------------------------------------------------------------------------------------------------------------- */
/* COMMON ELEMENTS */
/* ----------------------------------------------------------------------------------------------------------------------------- */


button {
	border: none;
}



.button {
	display: inline-block;
	font-family: 'Josefin Sans';
	letter-spacing: -0.05em;
	border: 1px solid #000;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	user-select: none;
	background-color: #000;
	padding: 14px 30px 10px !important;
	font-size: 14px;
	line-height: 1.33;
	box-shadow: none;
	transition: .2s ease-in-out;
	color: #000;
	text-transform: uppercase;	
}
.button:hover, .button.light:hover {
	color: #fff;
	border-color: #ff5c39;
	background-color: #ff5c39;
}
.button.light {
	border: 1px solid #fff;
	color: #fff;
	background: none;
}
.button.big {
	font-size: 22px;
	border-width: 2px;
	padding: 18px 34px 14px !important;
}
.button.small {
	font-size: 14px;
	border-width: 1px;
	padding: 8px 20px 4px !important;
}
.button.fillColor {
	background-color: #ff5c39;
	border-color: #ff5c39;
}



.or {
	font-weight: 600;
	font-size: 16px;
	margin: 0 15px;
	opacity: 0.75;
	font-style: italic;
}
.nobutton {
	border-color: transparent !important;
	text-decoration: underline;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.nobutton:hover {
	background: inherit !important;
	text-decoration: underline;
}



/* --------- MODAL --------- */

/* MODAL FULL */
.full-modal .modal-dialog {
  margin: 0;
  height: 100%;
  width: auto;
}
.full-modal .modal-content {
  border-radius: 0;
  background-clip: border-box;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  min-height: 100%;
  padding: 60px 0;
	background: #111;
	color: #fff;
}
.full-modal .close-modal {
  position: fixed !important;
  width: 75px;
  height: 75px;
  background-color: transparent;
  top: 25px;
  right: 50px;
  cursor: pointer;
	z-index: 10000000;
}
.full-modal .close-modal .lr {
  height: 75px;
  width: 1px;
  margin-left: 35px;
  background-color: #fff;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  z-index: 1051;
}
.full-modal .close-modal .lr .rl {
  height: 75px;
  width: 1px;
  background-color: #fff;
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  z-index: 1052;
}
.full-modal .close-modal:hover .lr {
  transition: all 0.75s;
  -ms-transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  transform: rotate(225deg);
}
.full-modal .modal-backdrop {
  opacity: 0;
  display: none;
}









/* TESTIMONIALS BOX */

.box {
	background: url(../images/box-bg.jpg) center center #333;
	padding: 60px;
	position: relative;
}
.box .col-pic img.avatar{
	margin-top: -19px;
	width: 200px;
	border-radius: 100px;
}
.box .col-pic {
	display: flex;
	align-content: stretch;	
	align-items: center;
	text-align: center;
	padding-left: 0;
}
.box .signed {
	font-weight: bold;
	font-family: 'Josefin Sans';
	margin-top: 30px;
	margin-bottom: -5px;
	padding-bottom: 0;
}
.box .col-desc h2 {
	margin-top: 0;
	margin-bottom: 30px;
}
.box::after {
	content: '';
	width: 100px;
	position: absolute;
	background: url(../images/torn-right.svg) right top;
	right: 0;
	top: 0;
	height: 100%;
}


.box-nav .prev {
	position: absolute;
	left: 45px;
	top: 50%;
	margin-top: -28px;
	z-index: 100;
}
.box-nav .next {
	position: absolute;
	right: 120px;
	top: 50%;
	margin-top: -28px;
	transform: rotate(180deg);
	z-index: 100;
}
.testimonials .row {
	display: flex
}

@media (max-width: 992px) {
	.box {
		background: none;
		padding: 0;
	}
	.box::after {
		display: none;
	}
	.box .col-pic {
		display: none;
	}
	.box .col-desc h2 {
		display: none;
	}
	.box .box-nav {
		display: none;
	}
}



/* ----------------------------------------------------------------------------------------------------------------------------- */
/* HEAD & NAVIGATION */
/* ----------------------------------------------------------------------------------------------------------------------------- */

.head {
	background: url(../images/head-bg.svg) center bottom no-repeat;
	background-size: cover;
	color: #fff;
	position: relative;
}
.mainpage .head {
	padding-bottom: 185px;
}






/* Navbar */
.navbar {
	font-family: 'Josefin Sans';
	letter-spacing: -0.025em;
	margin: 0;
	z-index: 1000;
	border-radius: 0;
	width: 100%;
	text-transform: uppercase;	
	transition: all 0.4s;
	-webkit-transition: all 0.4s;
	padding-bottom: 30px;
	position: absolute; 
}
.sub .navbar {
	background: #000;
}
.logo {
	float: left;
	margin-top: 22px;
	margin-bottom: 0 !important;
	height: auto;
	margin-left: 2px;
}
.logo::after {
	content: ' ';
	border-top: solid 5px #319cff; 
	border-bottom: solid 5px #ffe646; 
	box-shadow: -2px -2px 1px #000;
	height: 0px;
	width: 17px;
	bottom: 1px;
	left: 37px;
	position: absolute;
	background: #0081f8;
}
@media (min-width:1200px) {
	.main .logo::after {
		display: none;
	}
}

.navbar .logo-mark-2 {
	margin-top: 10px;
}

.navbar-toggle {
	margin-top: 38px;
	margin-right: 17px;	
	padding: 0;
	z-index: 2;
}

.navbar .button:hover 
{
	border-color: #ff5c39;
	color: #fff;
}

/* Menu */
.navbar-collapse.collapse {
	padding: 0 !important;
}
.menu {
	margin-left: 30px;
	margin-top: 50px;
	font-weight: 600;
	float: right;
}
.menu li a {
	padding: 10px 12px;
	margin-left: 5px;
	color: #fff;
}

.menu > li > a:focus, 
.menu > li > a:hover {
	background: none;
}
.menu li.active a {
	opacity: 0.6;
}
.menu-actions {
	margin-left: 15px;
}
.menu-actions i {
	font-size: 8px;
	margin-left: 2px;
	vertical-align: 19%;
}
.menu .button {
	margin-top: -6px;
}
.menu .button:hover {
}














/* HEADER */

header {
	background: #000;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-position: center center;
  background-size: cover;
  color: white;
	position: relative;
}




















/* MAIN BANNER / VIDEO */
.slide {
	background: #000;
}



/*.video-wrap img {
	width: auto !important;
	height: auto !important;
	display: inline !important;
	margin-top: 6%;
}*/
.picture-wrap {
	overflow: hidden;
	height: 100vh;
  animation: skew 3s ease-in-out, shake-opacity2 5s ease-in-out infinite, bright 2s infinite; 
	
}
.picture-wrap::before {
	content: "";
	position: absolute;
	top: 0px;
	left: 0;
	right: 0;
	width: 100%;
	height: 250px;
  background: linear-gradient(#000 0%, transparent 100%);
}




.picture-wrap video {
	position: fixed;
	height: 100vh;
}
.video-overlay,
.video-placeholder {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 5;
	-webkit-backface-visibility: hidden;
	background: #000;
	opacity: 0.7;
}
.video-placeholder {
	z-index: 4;
	background-repeat: no-repeat !important;
}
.bgHeader .container {
	position: relative;
	height: 100%;
}



@keyframes bright {
	10% {
		 opacity: 1;
	}
	11% {
		 opacity: 0.98;
	}
	29% {
		 opacity: 1;
	}	
	35% {
		 opacity: 1;
	}
	44% {
		 opacity: 0.99;
	}
	45% {
		 opacity: 1;
	}	
	55% {
		 opacity: 1;
	}
	56% {
		 opacity: 0.97;
	}
	65% {
		 opacity: 1;
	}	
	80% {
		 opacity: 1;
	}
	81% {
		 opacity: 0.96;
	}
	90% {
		 opacity: 1;
	}
	91% {
		 opacity: 0.95;
	}
	98% {
		 opacity: 1;
	}
}












/* TOP CONTENT */
.headerContent {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 60;
  background: linear-gradient(90deg, #000 30%, transparent 30%);
}

.headerContent row {
	height: 100vh;
}
.headerContent::after {
	position: absolute;
	content: '';
	left: 40%;
	top: 0;
	width: 50%;
	height: 100%;
  background: linear-gradient(125deg, rgba(255,155,155,0.15) 0%, transparent 70%);
	z-index: -1000;
}


/* Left */
.sideLeft {
	background: url(../images/header-side-bg.svg) right top no-repeat;
	height: 100vh;
	padding-right: 180px;
	position: relative;
	display: flex;
	align-items: center;
}
@media (max-height: 830px) {
	.sideLeft {
		align-items: flex-start;
		padding-top: 55px;
	}
	.sideLeft .button {
		background: #000;
	}
	.headerContent::after {
		background: none;
	}		
}
.intro {
	margin-top: -15px;
}
.intro h1 {
	line-height: 1.23;
	margin-top: -2px;
	letter-spacing: -0.1em;
}
.intro .text {
	margin-top: 30px;
	padding-top: 90px;
	border-top: 1px solid #fff;
}
.intro .button {
	margin-top: 90px;
}



/* Right */
.sideRight {
	z-index: 500;
	position: relative;
	height: 100vh;
	text-align: center;
	padding-left: 22px;
	
}


/* nav */
.sideRight .slideNav {
	z-index: 505;
	position: absolute;
	bottom: 60px;
	font-size: 50px;
	font-weight: 100;
	width: 100%;
}
.sideRight .slideNav .slide-prev {
	float: left;
}
.sideRight .slideNav .slide-next {
	float: right;
}






/* OWL CAROUSEL */
.owl-dots02 .owl-dots {
	z-index: 200;
	position: absolute;
	right: 33%;
	bottom: 20px;
}
.owl-dots02 .owl-dots .owl-dot {
	display: inline-block;
}
.owl-dots02 .owl-dots .owl-dot span {
	 width:10px;
	 height:10px;
	 background: #fff;
	 display:block;
	 -webkit-backface-visibility:visible;
	 transition:opacity .2s ease;
	 border-radius:30px
}
.owl-dots02 .owl-dot.active span,.owl-theme .owl-dots .owl-dot:hover span {
	opacity: 0.6;
}
.owl-theme .owl-dots,
.owl-theme .owl-nav {
	text-align: center;
	-webkit-tap-highlight-color: transparent
}

.owl-theme .owl-dots .owl-dot span {
	display: block;
	-webkit-backface-visibility: visible;
	transition: opacity .2s ease;
}


/* dots */
#customDots .owl-dot span {
	margin: 0;
	border-radius: 0;
	opacity: 0.6;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 7px solid #ff5c39;
}
#customDots {
	width: 100%;
}
#customDots .owl-dot {
	background: none;
	margin: 0;
	padding: 15px 0;
	outline: none !important;
}
#customDots .owl-dot:not(:last-child) {
	margin-right: 30px;
}
#customDots .owl-dot.active span {
	opacity: 1;
	border-bottom: 7px solid #ff5c39;
	border-top: none;
}









/* XWIDTH - xtra large container */

@media (min-width: 480px) {
	.xwidth {
		width:450px
 	}
}
@media (min-width:992px) {
	.xwidth {
		width:970px
 	}
}
@media (min-width:768px) {
	.xwidth {
		width:750px
 	}
}
@media (min-width:1200px) {
 .xwidth {
	  width:1170px
 }
}
@media (min-width:1530px) {
	.xwidth {
		width: 1500px;
	}
}



.gameMedia {
	height: 100vh;
	display: flex;
	align-items: center;
	z-index: 1000;
	text-align: center;
	justify-content: center;
	padding-left: 22px;
}
.gameMedia > div {
	width: 100%;
}
.picture-wrap .container {
	position: relative;	
}
.gameLogo-container {
	position: relative;
	display: block;
	z-index: 500;
}

.owl-carousel .owl-item img.gameLogo {
	height: auto;
	display: inline-block;
}
img.gameLogo.blairwitch {
	width: 300px;
	margin-top: -180px;
}
img.gameLogo.medium {
	width: 796px;
}
img.gameLogo.wasteland {
	width: 496px;
}
img.gameLogo.gotham {
	width: 520px;
}
img.gameLogo.chernobylite {
	width: 500px;
}
img.gameLogo.greenhell {
	width: 580px;
}
img.gameLogo.sherlock {
	width: 400px;
}
img.gameLogo.kao {
	width: 500px;
}
img.gameLogo.wmd {
	width: 450px;
}
img.gameLogo.suicidesquad {
	width: 350px;
}
img.gameLogo.stalker {
	width: 550px;
}


img.gameLogo.gotham.glitch-1 {
	filter: grayscale(100%);
}
.glitch-1 {
	position: absolute;
	z-index: 10000000000;
	animation: shake-opacity 5s ease-in-out infinite;
}
.glitch-2 {
	filter: brightness(40%) sepia(100%) hue-rotate(-40deg) saturate(800%);
  animation: skew 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite; 
	z-index: 1;
}


@media (max-height: 690px) {
	img.gameLogo {
		width: auto !important;
		max-height: 120px !important;
		margin-top: 0 !important;
	}
}

@keyframes shake-opacity {
 0% {
  transform:translate(0, 0);
  opacity:.92
 }
 2% {
  transform:translate(1px, 0);
  opacity:.92
 }
 3% {
  transform:translate(-1px, 0);
  opacity:.92;
 }
 13% {
	clip-path: none;
 }
 15% {
	 clip-path: polygon(101.33% 33.54%, -81.67% 36.54%, 105.67% 36.83%, 121.66% 116.08%, 0px 111.68%, 0% -1.68%, 115.67% -3.18%);
 }
 16% {
	 clip-path: none;
 }
 26% {
 	clip-path: polygon(2px 61.59%, 3.34% 0px, 109.67% 0px, 121.66% 116.08%, 0px 111.68%, 2px 64.12%, 160% 63.36%);
 }
 27% {
	clip-path: none;
 }
 30% {
  transform:translate(0px, 0);
  opacity:.94
 }
 31% {
  transform:translate(-1px, 0);
  opacity:1
 }
 32% {
  transform:translate(1px, 0);
  opacity:1;
 }
 78% {
  transform:translate(0, 0);
  opacity:.95;
 }
 80% {
  transform:translate(0px, 1px);
  opacity:.81;
 }
 82% {
  transform:translate(0, -1px);
  opacity:.90;
 }
}
@keyframes shake-opacity2 {
 0% {
  transform:translate(0, 0);
  opacity:.92
 }
 2% {
  transform:translate(1px, 0);
  opacity:.92
 }
 3% {
  transform:translate(-1px, 0);
  opacity:.92;
 }
 30% {
  transform:translate(0px, 0);
  opacity:.94
 }
 31% {
  transform:translate(-1px, 0);
  opacity:1
 }
 32% {
  transform:translate(1px, 0);
  opacity:1;
 }
 78% {
  transform:translate(0, 0);
  opacity:.95;
 }
 80% {
  transform:translate(0px, 1px);
  opacity:.81;
 }
 82% {
  transform:translate(0, -1px);
  opacity:.90;
 }
}
.shake-opacity {
	animation: shake-opacity 5s ease-in-out infinite;
}

@keyframes skew {
  0% {
    opacity: 0.9;
    transform: skew(0deg, 0deg);
    transform: translateY(-1px);
  }
  2% {
    opacity: 0.9;
    transform: skew(0deg, 0deg);
    transform: translateY(1px);
  }
  10% {
    transform: skew(0deg, 0deg);
  }
  12% {
    filter: hue-rotate(0deg);
    transform: skew(-7deg, 0deg);
  }
  14% {
    filter: hue-rotate(-1deg);
    opacity: 0.8;
    transform: skew(7deg, 0deg);
  }
  16% {
    filter: hue-rotate(2deg);
    opacity: 0.85;
    transform: skew(0deg, 0deg);
  }
  17% {
    opacity: 0.7;
  }
  45% {
    opacity: 0.7;
    filter: hue-rotate(4deg);
    transform: skew(0deg, 0deg);
  }
  44% {
    opacity: 0.2;
    transform: skew(5deg, 0deg);
  }
  46% {
    opacity: 0.2;
    transform: skew(-5deg, 0deg);
  }
  47% {
    transform: skew(0deg, 0deg);
  }
  100% {
    opacity: 0.7;
    transform: skew(0deg, 0deg);
  }
}






















section {
	color: #fff;
	background: #000;
	padding-top: 120px;
	padding-bottom: 180px;
}
section h1 {
	margin-bottom: 18px;
}
#why::after {
	position: absolute;
	content: '';
	left: 0;
	bottom: -40px;
	width: 100%;
	height: 110px;
  background: linear-gradient(transparent 0%, #000 66%);
	z-index: 502;
}
@media (max-height: 830px) {
	#why {
		padding-top: 200px;
	}
	#why::after {
		display: none;
	}	
}
@media (max-height: 530px) {
	#why {
		padding-top: 350px;
	}
}
@media (max-height: 370px) {
	#why {
		padding-top: 500px;
	}
}

.sub section {
	padding-top: 240px;
}








/* ----------------------------------------------------------------------------------------------------------------------------- */
/* PORTFOLIO */
/* ----------------------------------------------------------------------------------------------------------------------------- */

.game {
	position: relative;
	cursor: pointer;
	overflow: hidden;
	margin-bottom: 30px;
	transition: all 0.5s;
}
.game-logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);	
	z-index: 101;
}
.game-logo img {
	max-width: 440px;
	max-height: 180px;
}
.game:hover .game-picture
{
  animation: skew 3s ease-in-out, shake-opacity2 5s ease-in-out infinite; 
}
.game:hover .game-picture img {
	transform: scale(1.15);
	transition-duration: 8s;
}

.game-info {
	position: absolute;
	width: 100%;
	height: 100px;
	bottom: -100px;
	background: #ff5c39;
	transition: all 0.5s;
	z-index: 102;
	padding: 22px 30px;
}
@media (min-width: 767px) {
	.game:hover .game-info {
		bottom: 0px;
	}
}
.game-info h2 {
	margin: 0;
}
.game-info h3 {
	margin: 4px 0 0 0;
}
.game-info .platform {
	padding-top: 8px;
	text-align: right;
}
.game-info .platform img {
	height: 38px;
	margin-left: 10px;
}
.game-details {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 100%;
	background: #ff5c39;
	padding: 30px 60px 30px 30px;
	z-index: 550;
	cursor: default;
	transition: top 0.5s ease;
	font-size: 16px;
}
.game-details-visible {
	top: 0;
}
.game-details article,
.game-details .x
{
	transition: opacity 0.3s;
	opacity: 0;
}
.game-details-visible article,
.game-details-visible .x {
	opacity: 1;
}
.x::before {
	position: absolute;
	width: 40px;
	height: 40px;
	right: 6px;
	top: 22px;
  content: '\00d7';
	font-size: 40px;
  color: #fff;
  font-weight: 100;
	opacity: 1;
}
.game-details h2 {
	margin-bottom: 15px;
}
.game-details ul {
	margin-bottom: 30px;
}
.game-details p.desc {
	margin-bottom: 30px;
}
.game-details .button {
	margin-bottom: 10px;
	margin-right: 5px;
}

@media (max-width: 1530px) {
	.game-logo img {
		max-width: 240px !important;
	}
	.game-details {
		padding-top: 6px;
	}
	.game-details h2 {
		font-size: 18px;
	}
	.game-details .button {
		border: none;
		text-decoration: underline;
		margin: 0;
		padding: 5px 0px 10px 20px !important;
		min-height: 0;
		display: inline-block;
		width: auto;
	}
	.game-visible .game-details{
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: 1000000000000;
	}
}
@media (max-width: 767px) {
	.game-details p.desc {
		display: none;
	}
}

@media (max-width: 1200px) and (min-width: 992px) {
	.game-info .platform {
		display: none;
	}
}
@media (min-width: 992px) and (max-width: 1530px) {
	.game-info .platform img {
		height: 30px;
		margin-top: 6px;
	}
}






/* ----------------------------------------------------------------------------------------------------------------------------- */
/* CONTACT */
/* ----------------------------------------------------------------------------------------------------------------------------- */
body.jobs {
}
/*section#jobs {
	background: url(../images/team-06.jpg) center top no-repeat #000 !important;
	background-size: cover;
}*/
section#jobs {
	background: none;
	position: relative;
	background: url(../images/team-06.jpg) center top no-repeat #000 !important;
	background-size: cover;
}
body.jobs .navbar {
	background: none;
	
}
.row-benefits .col-txt {
	padding-left: 10px;
	font-size: 16px;
}
.row-benefits h3 {
}




/* ----------------------------------------------------------------------------------------------------------------------------- */
/* CONTACT */
/* ----------------------------------------------------------------------------------------------------------------------------- */
section#contact {
	padding-bottom: 0px;
}
.contact-cta {
	padding-top: 23px;
}
.contact-cta .button {
	width: 100%;
}
.map {
	position: relative;
	background: #c8715e;
	margin-top: 120px;
	border-top: 5px solid #ff5c39;
}
.map iframe {
	width: 100%;
	height: 800px;
	mix-blend-mode: hard-light;
}

.gradient-bottom::after {
	content: "";
	position: absolute;
	bottom: 0px;
	left: 0;
	right: 0;
	width: 100%;
	height: 350px;
  background: linear-gradient(transparent 0%, #000 100%);
	z-index: 100;
}





/* ----------------------------------------------------------------------------------------------------------------------------- */
/* TEAM */
/* ----------------------------------------------------------------------------------------------------------------------------- */


#team .platform {
}
#team .platform img {
	width: 39px;
}










/* ----------------------------------------------------------------------------------------------------------------------------- */
/* FOOTER */
/* ----------------------------------------------------------------------------------------------------------------------------- */
footer {
	background: url(../images/torn-horizontal.svg) center top no-repeat #ff5c39;
	box-shadow: inset 0 4px 0 #000;
	padding-top: 30px;
	position: relative;
	z-index: 1000;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
}
footer a {
	color: #fff;
	padding: 3px 3px 2px 3px;
}
footer .links {
	margin-top: 70px;
	padding-bottom: 20px;
}
footer .links h4 {
	margin: 0;
	margin-right: 30px;
}
footer .links .col-copy a:not(:last-child) {
	margin-right: 30px;
}
footer .links .col-copy a:hover {
	color: #ff5c39;
	background: #fff;
}
footer .links .col-social {
	text-align: right;
}
footer .links .col-social img {
	max-height: 20px;
	max-width: 24px;
}
footer .links .col-social a:not(:first-child) {
	margin-left: 15px;
}
footer .links .col-social a:hover img {
	margin-top: -10px;
}
footer .legal {
	font-weight: 200;
	font-size: 12px;
	margin-top: 10px;
}
.blackDrakkar {
	text-decoration: underline;
}

@media (max-width: 767px) {
	footer .links .col-social {
		text-align: left;
		margin-top: 5px;
	}
}





.main .logo-mark-2 {
	display: none;
}

@media (max-width: 1200px) {
	.sideLeft {
		background: none;
		height: auto;
		padding: 54px 0 0 0;
		text-align: center;
	}
	.sideRight {
		display: none;
	}
	.headerContent {
		position: relative;
		background: none;
	}
	.headerContent::after {
		background: none;
	}	
	.main .logo-mark-2 {
		display: block;
	}
	.main .col-logo {
		display: none;
	}	
	.owl-nav {
		display: none;
	}
	#owl-head {
		margin-top: -240px;
	}
	.picture-wrap {
		max-height: 80vh;
	}
	.picture-wrap::after {
		content: "";
		position: absolute;
		bottom: 0px;
		left: 0;
		right: 0;
		width: 100%;
		height: 250px;
		background: linear-gradient(transparent 0%, #000 100%);
	}	
	.gameMedia {
		padding: 0;
	}
	img.gameLogo {
		margin-top: 0 !important;
		max-width: 80vw;
		max-height: 170px;
		width: auto !important;		
	}
	
	#why {
		margin-top: -84px;
	}
	#why::after {
		display: none;
	}	
	section {
		padding-top: 80px;
	}
	
	
	
	.game-logo img {
		max-width: 75vw;
	}
	
	.intro .button {
		width: auto;
		margin-top: 40px;
	}
	
}
@media (max-width: 800px) {
	.sideLeft {
		padding: 154px 15px 0 15px;
	}

}







/* Accordion */
.folds-group {
	border-top: 1px solid #fff;
}
.fold-heading {
	border-bottom: 1px solid #fff;
	padding: 16px 15px 15px 30px;
	position: relative;
	cursor: pointer;
}
.fold-heading:hover {
	color: #ff5c39;
	transition: .2s;
}
.fold-heading:before {
	content: '+';
	font-size: 31px;
	position: absolute;
	left: 0;
	top: 28px;
}
.fold-body {
	padding: 30px;
	font-size: 16px;
	border-bottom: 1px solid #fff;
}










.slidex {
	display: flex;
	align-items: center;
	height: 200px;
	text-align: center;
	justify-content: center;
	margin: 10px;
	padding: 30px;
}
.slidex img {
	width: auto !important;
	height: auto !important;
	max-height: 110px;
}
























label {
	display: block;
	font-weight: 500;
	margin-top: 30px;
	margin-bottom: 10px;
	color: #fff;
	font-size: 16px;
}
.options label {
	margin: 0;	
  display: flex;
  align-items: baseline;
}
.req::after {
  content: '*';
  color: #ff5c39;
  margin-left: 5px;
	font-size: 24px;
	position: absolute;
}
.req2::after {
  content: '*';
  color: #ff5c39;
  margin-left: 25px;
	font-size: 24px;
	position: absolute;
}




/* input */
input.form-control, input, textarea, select {
	font-family: 'gothic';
	border-radius: 0px;
	box-sizing: initial;
	display: inline-block;
	border: 1px solid #fff;
	font-weight: 400;
	text-decoration: none;
	user-select: none;
	background: #222;
	padding: 14px 15px 14px !important;
	height: auto !important;
	font-size: 16px;
	box-shadow: none;
	transition: .2s ease-in-out;
	color: #fff;
	white-space: nowrap;
	width: 90%;
}
input:focus, 
textarea:focus, 
select:focus {
	box-shadow: 0 0 4px #ff5c39 !important;
	border: 1px solid #f00;
}
input[type=checkbox] {
 	width: auto !important;
	padding: 0 !important;
  flex: none;
  margin-right: 25px;
}
.input-label {
	line-height: 22px;
	margin-top: 8px;
	margin-bottom: 2px;
}
textarea {
	height: auto;
}


/* select */
.container-select {
	margin-bottom: 14px;
}
select option {
	font-family: 'gothic' !important;
}
.select-label {
	line-height: 22px;
	margin-top: 6px;
	margin-bottom: 3px;
}
.select-textfield select {
	background-color: #222;
	border: 1px solid #fff;
	border-radius: 4px;
	box-sizing: border-box;
	height: 42px;
	margin-bottom: 0;
	padding: 10px;
	min-width: 267px;
}
.select-textfield .small {
	width: 144px;
	min-width: 0;
}








.no-events {
	pointer-events: none;
}

video.reelVideo {
	max-width: 100%;
	opacity: 0.6;
	cursor: pointer;
	filter: contrast(.5);
}
.video-wrapper {
	position: relative;
	cursor: pointer;
}
.playpause {
    width:140px;
    height:140px;
    position:absolute;
    left:0%;
    right:0%;
    top:0%;
    bottom:0%;
    margin:auto;
    background-size:contain;
    background-position: center;
		cursor: pointer;
}
.video-wrapper:hover .playpause {
	transform: scale(1.1);
	transition: all 0.5s;
}

.col-reelVid h1 {
	margin-bottom: 0;
}