@charset "UTF-8";
/* CSS Document */

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

@font-face {
  font-family: 'RIS Symbols';
  src: url('../_Font/RISSymbols-Regular.eot'); /* IE9 Compat Modes */
  src: url('../_Font/RISSymbols-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../_Font/RISSymbols-Regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../_Font/RISSymbols-Regular.woff') format('woff'), /* Pretty Modern Browsers */
       url('../_Font/RISSymbols-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('../_Font/RISSymbols-Regular.svg') format('svg'); /* Legacy iOS */
}

/* LESS Document */
@desktop: ~"only screen and (min-width: 768px)";
@tablet: ~"only screen and (max-width: 767px) and (min-width: 481px)";
@tabletAndMobile: ~"only screen and (max-width: 767px)";
@mobile-landscape: ~"(max-width:1024px) and (orientation: landscape)";
@mobile: ~"only screen and (max-width: 480px) and (min-width: 320px)";
@mobileAndBelow: ~"only screen and (max-width: 480px)";
@mobileTall: ~"only screen and (max-width: 414px)";
@spacer:  calc(100vw / 24);
@col:  calc(100vw / 12);
@default-height: 80vh;
@spacer-mobile: 6vh;

.logo-block {
	img { 
		width: 158px;
		filter: invert(1);
	}
}

/* ------------------------- Global ------------------------ */

body {
	font-family: "Space Mono", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 0.9vw;
	line-height: 120%;
	text-transform: uppercase;
	color: #ffffff;
	font-kerning: normal;
	background-color: #151515;
	
	@media @mobile-landscape {
		font-size: 16px!important;
		line-height: 20px;
	}
	
	@media @mobile {
		font-size: 16px!important;
		line-height: 20px;
    }
}

a {
 	//cursor: none !important;
	
	color: #ffffff;
	text-decoration: none;
	display: flex;
	
	span {
		font-size: 2em;
		display: block;
		position: relative;
		float: right;
		transition: all 0.5s;
		bottom: 5px;
		left: 10px;
	}

	&:hover {
		color: #ffffff;
		
		span {
			transform: rotate(90deg);
			bottom: 0;
			
		}
		
	}
}

h1 {
	font-family: 'Space Mono';
	font-style: normal;
	font-weight: 700;
	font-size: 4.4em;
	line-height: 90%;
	text-transform: uppercase;
	color: #FFFFFF;
	
	@media @mobile {
		font-size: 2.4em;
    }
	
	@media @mobile-landscape {
		font-size: 2.4em;
	}
	
	span {
		font-family: "RIS Symbols";
	}
}

h2 {
	font-family: 'Space Mono';
	font-weight: 700;
	font-size: 3em;
	line-height: 90%;
	text-transform: uppercase;
	
	@media @mobile {
		font-size: 1.8em;
    }
	
	@media @mobile-landscape {
		font-size: 1.8em;
	}
}

h3 {
	font-family: 'Space Mono';
	font-weight: 700;
	font-size: 2.2em;
	line-height: 90%;
	text-transform: uppercase;
}

h4 {
	font-family: 'Space Mono';
	font-weight: 700;
	font-size: 1em;
	line-height: 90%;
	text-transform: uppercase;
}

.module-section-title {
	writing-mode: vertical-rl;
	text-orientation: mixed;

	
	@media @mobile {
		writing-mode: horizontal-tb;
		text-orientation: mixed;
		height: auto!important;
	}
	
	@media @mobile-landscape {
		writing-mode: horizontal-tb;
		text-orientation: mixed;
		height: auto!important;
	}
	
	h2 {
		text-align: right;
		vertical-align: middle;
		
		@media @mobile {
			text-align: left;
			padding: 30px 15px;
		}
		
		@media @mobile-landscape {
			text-align: left;
			padding: 30px 15px;
		}
	}
}

.button-white,
.button-black {
	display: flex;
	text-decoration: none;
	background-color: #ffffff;
	justify-content: center;
	align-items: center;
	color: #000000;
	font-weight: 700;
	font-size: 17px;
	height: 48px;
	width: 100%;
	transition: all 0.2s;
	
	&:hover {
		border-radius: 15px;
		cursor: pointer;
		color: #000000;
		text-decoration: underline;
	}
}

.button-black {
	background-color: #000000;
	color: #ffffff;
	
	&:hover {
		color: #ffffff;
	}
}

/* ------------------------- Header ------------------------ */

.section-header-sticky {
	background-color: #151515;
	width: 100%;
	transition: all 0.5s;
	margin: auto 0;
	top: 0;
	left: 0;
	
	.logo-block {
		display: flex!important;
		overflow: hidden;
		height: calc(@col * 0.2);
		transition: all 0.5s;
		
		@media @mobile {
			height: 25px;
			transition: all 0.5s;
		}
	}
}


/* ------------------------- Hamburger menu------------------------ */


header {
	display: flex;
	justify-content: space-between;
	transition: all 0.5s;
	margin: auto @col;
	position: fixed;
	width: 82%;
	padding: 30px;

	z-index: 1000;
	
	@media @mobile {
		transition: all 0.5s;
		padding: 10px;
		margin: 0;
		width: 92%;
	}
	
	@media @mobile-landscape {
		transition: all 0.5s;
		padding: 20px;
		margin: 0;
		width: 92%;
	}
	
	.logo-block {
		width: @col;
		height: auto;
		transition: all 0.5s;
		display: block;
		
		@media @mobile {
			width:auto;
			transition: all 0.5s;
		}
		
		@media @mobile-landscape {
			width:auto;
			transition: all 0.5s;
		}
		
		img {
			width: @col;
			height: auto;
			
			@media @mobile {
				width:35vw;
			}
			
			@media @mobile-landscape {
				width:15vw;
			}
		}
		
		a {
			display: block;
		}

	}
		
	nav {
		@media @mobile {
			display: none;
			bottom: -100vh;
			transition: all 2s;
		}
		
		@media @mobile-landscape {
			display: none;
		}
	}
	
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
		
		li {
			margin-left: 30px;
			display: inline-block;
			
			@media @mobile {
				display: block;
				padding: 20px 0;
			}
			
			a {
				text-decoration: none;
				cursor: pointer;
				color: #e0e4d4;
			}

			a:hover {
				text-decoration: none;
				cursor: pointer;
				color: #e0e4d4;
			}
		}
	}
	
	.hamburger-menu {
		display: inline-block;
		cursor: pointer;
		position:absolute;
		top: 10px;
		right: 10px;
		display: none;
		
		@media @mobile {
			display: block;
		}

		.bar-1, 
		.bar-2 {
			width: 25px;
			height: 2px;
			background-color: white;
			margin: 7px 0;
			transition: 0.4s;
		}
	}

	.hamburger-menu-active {
		
		top: 12px;

		.bar-1 {
			-webkit-transform: rotate(-45deg);
			transform: rotate(-45deg);
			background-color: white;
		}

		.bar-2 {
			-webkit-transform: rotate(45deg) translate(-2px, -6px);
			transform: rotate(45deg) translate(-6px, -6px);
			background-color: white;
		}
	}
	
	.menu-active {
		display: flex!important;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: auto;
		background-color: #151515;
		padding: @spacer-mobile;
		transition: all 2s;
	}
	
}

/* ------------------------- Section Social Media ------------------------ */

.section-socialmedia {
	position: fixed;
	bottom: 12vh;;
	right: 0;
	z-index: 300;
	display: flex;
	justify-content: center;
	
	@media @mobile {
		left: 15px;
	}
	
	ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
	a {
		width: 24px;
		height: 24px;
		color: #191919;
		display: block;
		background-repeat: no-repeat;
		background-position: center;
		text-indent: 9999px;
		margin-bottom: 50px;
		overflow: hidden;

		@media @mobile {
			margin-bottom: 30px;
		}
	}

	a.icon-twitter {
		background-image: url("../_Images/_Icons/_SocialMedia/Icon_Twitter.png");
	}

	a.icon-youtube {
		background-image: url("../_Images/_Icons/_SocialMedia/Icon_Youtube.png");
	}

	a.icon-twitch {
		background-image: url("../_Images/_Icons/_SocialMedia/Icon_Twitch.png");
	}

	a.icon-facebook {
		background-image: url("../_Images/_Icons/_SocialMedia/Icon_Facebook.png");
	}
	
	a.icon-artstation {
		background-image: url("../_Images/_Icons/_SocialMedia/Icon_ArtStation.png");
		background-size: 24px 24px;
	}
	
	a.icon-steam {
		background-image: url("../_Images/_Icons/_SocialMedia/Icon_Steam.png");
		background-size: 24px 24px;
	}
	
	a.icon-instagram {
		background-image: url("../_Images/_Icons/_SocialMedia/Icon_Instagram.png");
		background-size: 24px 24px;
	}
}

/* ------------------------- Section Hero ------------------------ */

.section-hero-wrap {
	background-color: rgba(0, 0, 0, 0.6);
	margin-top: 24px;
	display: flex;
	position: relative;
	overflow: hidden;
	
	video {
		height: auto;
		width: 100%;
		top: 0;
		position: absolute;
		z-index: -1!important;
		
		@media @mobile {
			height: 100%;
			width: auto;
			left: -80%;
		}
	}
	
	.section-hero-content {

		height: @default-height;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		background-image: url("../_Images/hero-branding.svg");
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: center center;
	
		@media @mobile {
			padding: 15px;
			background-image: none;
		}
		
		@media @mobile-landscape {
			padding: 35px;
			background-image: none;
		}
		
		
		&:before {
			content: '';
			z-index: -1;
			background-image: url("../_Images/_HeroImage/HeroImage_001.jpg");
			background-size: cover;
			background-position: center center;
			width: 100%;
			height: 100%;
			position: absolute;
		}
	}
}

/* ------------------------- Section Projects ------------------------ */


.section-projects-wrap {
	margin-top: @spacer;
	
	.row {
		
		div {
			height: @default-height;
			
			@media @mobile {
				height: auto;
			}
			
			@media @mobile-landscape {
				height: auto;
			}
		}
	}
	
	.module-project {
		background-position: center center;
		background-size: cover;
		background-position: left;
		transition: all 0.5s;
		position: relative;
		overflow: hidden;
		
		@media @mobile {
			margin-bottom: @spacer-mobile;
		}
		
		@media @mobile-landscape {
			margin-bottom: @spacer-mobile;
		}

		
		
		video {
			height: 100%;
			width: auto;
			top: 0;
			position: absolute;
			z-index: -1!important;
			opacity: 0;
			
			@media @mobile {
				opacity: 1;
			}
			
			@media @mobile-landscape {
				opacity: 1;
				height: auto;
				width: 100%;
				top: -30vh;
			}
			
		}
	
		.module-project-info {
			background-color: rgba(0,0,0,0.3);
			transition: all 0.5s;
			padding: @spacer;
			position: relative;
			overflow: hidden;
			
			&:hover {
				cursor: pointer;
			}
			
			@media @mobile {
				height: 100%; 
			}
			
			@media @mobile-landscape {
				height: 100%; 
			}
			
			.module-project-bagde {
				text-transform: uppercase;
				display: flex;
				align-content: center;
				justify-content: center;
				font-weight: 700;
				height: 24px;
				transform: rotate(-45deg);
				line-height: 24px;
				position: absolute;;
				bottom: 60px;
				right:  -70px;
				width: 300px;
				
				@media @mobile {
					font-size: 10px;
					height: 18px;
					line-height: 18px;
					width: 220px;
					bottom: 40px;
					right: -70px;
				}
			}
			
			.module-project-bagde-wip_a {
				background-color:#FF5800;
				color: #D9D9D9;
				background-image: url("../_Images/FollowOnSteam.png");
				background-repeat: no-repeat;
				background-position: center center;
				background-size: 50%;
			}
			
			.module-project-bagde-wip {
				background-color:#1A1A1A;
				color: #D9D9D9;
			}

			.module-project-bagde-cs {
				background-color: #D9D9D9;
				color: #1A1A1A;
			}
			
			img {
				position: absolute;
				bottom: @spacer;
				
				@media @mobile {
					width: 80%;
					height: auto;
				}
			}
			
			p {
				margin-top: 1.5em;
			}
			
		}
		
		&:hover {
			background-position: right;
			background-image: none;

			.module-project-info {
				background-color: rgba(0,0,0,0.7);
			}
			
			video {
				opacity: 1;
			}
		}
	}
	
	.module-project-avr {
		background-image: url("../_Images/_Projects/projects_avr.jpg");
			
		@media @mobile {
			height: 70vh!important;
			background-image: none;
		}
		
		@media @mobile-landscape {
			height: 90vh!important;
			background-image: none;
		}
	}
	
	.module-project-riese {
		background-image: url("../_Images/_Projects/projects_riese.jpg");
		@media @mobile {
			height: 70vh!important;
			background-image: none;
		}
		
		@media @mobile-landscape {
			height: 90vh!important;
			background-image: none;
		}
	}
	
	.module-project-new {
		background-image: url("../_Images/_Projects/projects_new.jpg");
		opacity: 0.2;
		
		&:hover {
			opacity: 1;
		}
	}
}

/* ------------------------- Section Merch ------------------------ */

.section-merch {
	.module-section-title {
		height: @default-height;
	}
}

.merch-image-hoodie {
	background-image: url("../_Images/_Merch/hoodie_001.png");
	background-position: center center;
	background-size: contain;
	background-repeat:no-repeat;
	width: 100%;
	height: @default-height;
	
	@media @mobile {
		height: 60vh;
	}
	
	@media @mobile-landscape {
		height: 100vh;
	}
}

.merch-details {
	display: flex;
	justify-content: center;
	flex-direction: column;
	
	@media @mobile {
		padding: 0 25px @spacer-mobile 25px;
	}
	
	@media @mobile-landscape {
		padding: 0 25px 60px 25px;
	}
	
	.merch-retailers-container-active {
		display: flex!important;
	}
	.merch-retailers-container {
		
		background-color:rgba(0,0,0,0.86);
		display: none;
		width: 100vw;
		height: 100%;
		position:fixed;
		top: 0;
		left: 0;
		z-index: 600;
		justify-content: center;
		align-items: center;
		
		h3 {
			color: #000000;
		}
		
		.merch-retailers {
			width: 350px;
			display: flex;
			flex-direction: column;
			padding: 50px;
			background-color: #ffffff;
			align-content: center;
			gap: 30px;
			
			a {
				text-align: center;
				display: block;
				img {
					height: 50px;
					width: auto;
				}
				
				&:hover {
					opacity: 0.7;
					cursor: pointer!important;
					
				}
			}
			

		}
	}

	
	.merch-buy {
		width: 100%;
		margin: 10% 0;
		display: inline-block;

		
		@media @mobile-landscape {
			margin: 5% 0;
		}
		
		.button-white {
			float: left;
			width: 50%;
		}
		
		.merch-price {
			padding-left: 20px;
			background-clip: red;
			display: flex;
			flex-direction: column;
			
			b {
				font-size: 1.8em;
				line-height: 1.2em;
			}
		}
	}
}

/* ------------------------- Section About ------------------------ */

.section-whoandwhat-wrap {
	margin-top: @spacer;
	padding-top: @spacer;
	margin-bottom: @spacer;
	border-bottom: solid 1px #323332;
	
	.module-who {
		display: flex;
		flex-direction: column;
		align-content: space-between;
		
		a {
			@media @mobile {
				display: none;
			}
		}
		
		@media @mobile {
			margin-bottom: @spacer-mobile;
			padding: 15px;
		}
		
		@media @mobile-landscape {
			margin-bottom: @spacer-mobile;
			padding: 15px;
		}
	}
	
	.module-what {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
		padding: 0;
		
		.module-what-info {
			width: 33%;
			padding-left: @spacer;
			margin-bottom: @spacer;
			overflow: hidden;
			
			@media @mobile {
				width: 50%;
			}
			
			@media @mobile-landscape {
				width: 50%;
			}
			
			&:hover {
				.module-what-info-title {
					margin-left: -100%;
				}
			}
			
			.module-what-info-title {
				margin-bottom: 30px;
				width: 200%;
				height: 8vh;
				margin-left: 0%;
				transition: all 0.5s;
				
				@media @mobile-landscape {
					height: 14vh;
				}
				
				.module-what-info-icon {
					display: block;
					width: 50%;
				}
				
				h2 {
					display: block;
					width: 50%;
					float: right;
			
				}
				img {
					filter: invert(1);
				}
			}
		}
	}
}
						
.section-activations-wrap {
	padding-top: @spacer;
	
	.module-section-title {
		height: 65vh;
	}
	
	.module-owls {
		height: 65vh;
		background-image: url("../_Images/_Owls/owls-background.jpg");
		background-position: bottom center;
		background-size: cover;
		display: flex;
		transition: all 0.5s;
		
		@media @mobile-landscape {
			height: 80vh;
		}
		
		&:hover {
			background-position: center center;	
		}
		
		.module-owls-container {
			background-color: rgba(0,0,0,0.3);
			display: flex;
			width: 100%;
			height: 100%;
			padding: @spacer;
			
			.module-owls-info {
				transition: all 0.5s;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
			}

			.module-owls-tshirt {
				text-align: right;

				img {
					height: 100%;
				}
			}
			
		}
	}
	
	.module-spotify {
		height: 65vh;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		
		@media @mobile {
			height: auto;
			padding: @spacer-mobile 0;
			gap: 20px;
		}
		
		@media @mobile-landscape {
			flex-direction: row;
			height: 80vh;
			padding: @spacer-mobile 0;
			margin-bottom: 60px;
		}

		img {
			width: 100%;
			
			@media @mobile-landscape {
				height: 80vh;
				width: 80vh;
			}
		}
		
		.module-spotify-info {
			@media @mobile-landscape {
				display: block;
				width: 50%;
			}
		}
	}
}

/* ------------------------- Section Footer ------------------------ */

footer {
	background-color: white;
	z-index: 500!important;
		
	@media @mobile {
		padding: 15px;
	}
	
	@media @mobile-landscape {
		padding: 15px;
	}
}

/* ------------------------- Section Career ------------------------ */

.section-career {
	margin-top: @spacer;
	margin-bottom: @spacer;
	padding-top: @spacer;
	padding-bottom: @spacer;
	color: black;
	
	@media @mobile {
		padding-top: 0;
	}
	
	@media @mobile-landscape {
		padding-top: 0;
	}
	
	.section-career-container {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		height: 100%;
		padding-right: 3vw;
		
		@media @mobile {
			padding: @spacer-mobile 0;
			border-bottom: solid 1px #cccccc;
			
		}
		
		@media @mobile-landscape {
			padding: @spacer-mobile 0;
			border-bottom: solid 1px #cccccc;
		}
	}
	
	h1 {
		color: black;
	}
	
	ul {
		list-style: none;
		padding: 0;
		
		li {
			padding: 0 0 20px 0;
		}
	}
	
}

/* ------------------------- Section Contact ------------------------ */

.section-contact {
	margin-top: @spacer;
	padding-top: @spacer;
	padding-bottom: @spacer;
	border-top: solid 1px #323332;
	color: black;
	
	@media @mobile {
		border-top: none;
	}
	
	@media @mobile-landscape {
		border-top: none;
	}
	
	.col-md-2,
	.col-md-4,
	a {
		@media @mobile {
			padding-top: 20px;
		}
		
		@media @mobile-landscape {
			padding-top: 20px;
		}
	}
	
	h1 {
		color: black;
		margin-bottom: 0.5em;
	}
	
	a {
		font-family: 'Space Mono';
		font-weight: 700;
		font-size: 1em;
		line-height: 90%;
		text-transform: uppercase;
		text-decoration: none;
		color: black;
	}
	
	.section-socialmedia {
		position: relative!important;
		filter: invert(1);
		justify-content: space-between;
		clear: both;
		bottom: 0;
		right: 0;
		z-index: 10;
		width: 80%;
		
	}
}