body {
	font-family: 'Aileron', sans-serif;
	background-image: url('/img/background_01.jpg');
	background-size: cover;
	background-attachment: fixed;
}

main {
	margin-top: 10rem;
}

iframe {
	max-width: 100%;
}

section {
	margin-bottom: 4rem;
}

h1 {
	margin-bottom: 20px;
}

h2 {
	margin-bottom: 15px;
}

h1, h2, h3 {
	color: #15467a;
}

a {
	color: #0056b3;
}

h1, h2, h3 {
	font-family: 'EB Garamond', serif;
	text-align: center;
	padding-bottom: 15px;
	background-image: url('/img/Unterline_medium.png');
	background-repeat: no-repeat;
	background-position: center bottom;
}

h2, h3 {
	font-weight: normal;
}

h1 a:hover, h2 a:hover, h3 a:hover {
	text-decoration: none;
}

h1.game{
	margin-bottom: 0px;
}

h1.collab{
	margin-bottom: 10px;
}

.platforms {
	background-color: #d0d0d0;
	margin-top: 20px;
	margin-bottom: 40px;
	margin-left: -32px;
	margin-right: -32px;
	text-align: center;
	align-items: center;
	padding: 10px;
}

.platforms img {
	max-height: 60px;
	margin: 4px;
}

h1.short-line, h2.short-line, h3.short-line {
	background-image: url('/img/Unterline_short.png');	
}

h1.long-line, h2.long-line, h3.long-line {
	background-image: url('/img/Unterline_tall.png');	
}

.header-leaves {
	margin: 0;
	height: 1em;
}

::selection {
  background: #15467a;
  color: #ffffff;
}

::-moz-selection {
	background: #15467a;
	color: #ffffff;
}

img {
	max-width: 100%;
}

.img-thumbnail {
	border-radius: 0;
}

.horizontal-center {
	align-items: center;
	text-align: center;
}

.vertical-align {
	display: flex;
	align-items: center;
}

.vertical-align.top {
	align-items: stretch;
}

.no-shadow {
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
}

p.emphasized {
	font-size: 1.2em;
	font-family: 'EB Garamond', serif;
	letter-spacing: 3px;
}

.overlap {
	margin-top: -3rem !important;
}

.linefix {
	margin-top: -1px !important;
}

.rot-1 {
	transform: rotate(1deg);
}

.rot-2 {
	transform: rotate(2deg);
}

.rot--1 {
	transform: rotate(-1deg);
}

.rot--2 {
	transform: rotate(-2deg);
}

.rot-90 {
	transform: rotate(90deg);
}

.rot-180 {
	transform: rotate(180deg);
}

.box {
	padding: 1rem 2rem;
	-webkit-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.3);
	-moz-box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.3);
	box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.3);
}

.box.white {
	background-color: #FFFFFF;
}

.box.pattern01 {
	background-image: url('/img/Pattern_01.png');
	background-repeat: repeat;
}

.box.pattern02 {
	background-image: url('/img/Pattern_02.png');
	background-repeat: repeat;
}

.box.pattern03 {
	background-image: url('/img/Pattern_03.png');
	background-repeat: repeat;
}

.box.photo {
	padding: 0;
}

.box.photo img {
	width: 100%;
}

.box-border {
	width: 100%;
	position: relative;
	background-position: bottom center;
	background-repeat: no-repeat;
}

.box-border.border-rip {
	min-height: 50px;
	margin-top: -1px;
	background-image: url('/img/Snippet1_Bottom1.png');
}

.box-border.border-holes {
	min-height: 90px;
	background-image: url('/img/Snippet1_Bottom2.png');
}

.box.shadowed {
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 0;
	padding: 20px 15px;
	color: #FFFFFF;
}

.box.shadowed a {
	color: #FFFFFF;
}

.polaroid .polaroid-img {
	margin-top: 1rem;
}

.polaroid .polaroid-label {
	font-family: 'Kalam', cursive;
	text-align: center;
	margin-top: .5rem;
	margin-bottom: 0;
}

.tape {
	background-image: url('/img/tape.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 150px;
	height: 150px;
	position: absolute;
	pointer-events:none;
	transform: rotate(45deg);
}

.tape.tape-reverse {
	transform: rotate(-45deg);
}

.tape-bottom {
	bottom: -50px;
}

.tape-top {
	top: -50px;
}

.tape-left {
	left: -40px;
}

.tape-right {
	right: -40px;
}

/* --- HEADER --- */
.navbar {
	width: 100%;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.navbar-bottom {
	background-image: url('/img/Header_Bottom.png');
	background-position: top;
	background-repeat: repeat-x;
	-webkit-transition: all 0.4s ease;
	transition: all 0.4s ease;
	width: 100%;
	position: absolute;
	left: 0;
	bottom: -35px;
	height: 35px;
	opacity: 0;	
}

.navbar #header-logo {
  -webkit-transition: all 0.4s ease;
   transition: all 0.4s ease;
   height: 100px;
}

header.shrink #header-logo {
	height: 55px;
}

header.shrink .navbar {
	background-color: rgba(0, 0, 0, 0.65);
}

header.shrink .navbar-bottom {
	opacity: 1;	
}

/* overwrite collapse */
.navbar-collapse {
	display: -webkit-box!important;
	display: -ms-flexbox!important;
	display: flex!important;
	-ms-flex-preferred-size: auto;
	flex-basis: auto;
}
.navbar-expand-md .navbar-nav {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
}

.navbar-expand-md {
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-flow: row nowrap;
	flex-flow: row nowrap;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

.nav-item-page .nav-link {
	width: 110px;
	height: 70px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-transition: all 0.1s ease;
	transition: all 0.1s ease;
}

.nav-item-about a {
	background-image: url('/img/Icon_Header_AboutUs.png');
}

.nav-item-about:hover a, .nav-item-about.active a {
	background-image: url('/img/Icon_Header_AboutUs02.png');
	transform: rotate(5deg) scale(1.1);
}

.nav-item-games a {
	background-image: url('/img/Icon_Header_Games.png');
	margin: 0 -10px 0 -5px;
}

.nav-item-games:hover a, .nav-item-games.active a {
	background-image: url('/img/Icon_Header_Games02.png');
	transform: rotate(-5deg) scale(1.1);
}

.nav-item-jobs a {
	background-image: url('/img/Icon_Header_Jobs.png');
	margin: 0 -10px 0 -5px;
}

.nav-item-jobs:hover a, .nav-item-jobs.active a {
	background-image: url('/img/Icon_Header_Jobs02.png');	
	transform: rotate(5deg) scale(1.1);
}

.nav-item-vienna a {
	background-image: url('/img/Icon_Header_Vienna.png');
}

.nav-item-vienna:hover a, .nav-item-vienna.active a {
	background-image: url('/img/Icon_Header_Vienna02.png');
	transform: rotate(-5deg) scale(1.1);
}

.nav-item-contact a {
	background-image: url('/img/Icon_Header_Contact.png');
}

.nav-item-contact:hover a, .nav-item-contact.active a {
	background-image: url('/img/Icon_Header_Contact02.png');
	transform: rotate(5deg) scale(1.1);
}

.nav-item-social {
	margin-top: 20px;
	margin-left: 0;
}

a.social-link {
	display: inline-block;
	width: 40px;
	height: 40px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-transition: all 0.1s ease;
	transition: all 0.1s ease;
}

a.dc-link {
	background-image: url('/img/Icon_Header_Discord.png');
}

a.dc-link:hover {
	transform: rotate(5deg) scale(1.1);
}

a.nl-link {
	background-image: url('/img/Icon_Header_Newsletter.png');
}

a.nl-link:hover {
	transform: rotate(5deg) scale(1.1);
}

a.tw-link {
	background-image: url('/img/Icon_Header_Twitter.png');
}

a.tw-link:hover {
	transform: rotate(5deg) scale(1.1);
}

a.fb-link {
	background-image: url('/img/Icon_Header_Facebook.png');
}

a.fb-link:hover {
	transform: rotate(-5deg) scale(1.1);
}

a.yt-link {
	background-image: url('/img/Icon_Header_Youtube.png');
}

a.yt-link:hover {
	transform: rotate(-5deg) scale(1.1);
}

a.li-link {
	background-image: url('/img/Icon_Linkedin.png');
}

a.li-link:hover {
	transform: rotate(-5deg) scale(1.1);
}

a.xi-link {
	background-image: url('/img/Icon_Xing.png');
}

a.xi-link:hover {
	transform: rotate(5deg) scale(1.1);
}

a.in-link {
	background-image: url('/img/Icon_Header_Instagram.png');
}

a.in-link:hover {
	transform: rotate(5deg) scale(1.1);
}

.navbar-nav .nav-item .nav-link span, a.social-link span {
	visibility: hidden;
}


/* --- FOOTER --- */

.footer-top {
	background-image: url('/img/Snippet1_Top1.png');
	background-repeat: repeat-x;
	background-position: top;
	height: 56px;
	margin-bottom: -1px;
}

footer {
  font-family: 'GlacialIndifference', sans-serif;
}

footer .wrapper {	
	background-color: white;
}

footer .navbar {
	padding: 0;
}

footer .navbar .nav-item-social {
	margin-top: 0;
}

footer .footer-contact {
	text-align: right;
}

.no-footer footer {
	display: none;
}

/* --- LANDING PAGE --- */

body.landingpage {
	overflow: hidden;
}

.landingpage-content {
	text-align: center;
}

.landingpage-content p {
	margin-bottom: 0;
}

.landingpage-content img {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	min-height: 100%;
	min-width: 100%;
	max-width: initial;
}

.langinpage-overlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0; 
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.3);
}

.landingpage-logo {
	position: absolute;
	top: calc(50% - 315px);
	left: 10%;
}

img.tls-landingpage {
	-ms-interpolation-mode: nearest-neighbor; 
	image-rendering: -webkit-optimize-contrast; 
	image-rendering: -webkit-crisp-edges; 
	image-rendering: -moz-crisp-edges; 
	image-rendering: -o-crisp-edges; 
	image-rendering: pixelated;
}

/* --- ABOUT --- */

.infobox {
	font-family: 'GlacialIndifference', sans-serif;
}

.infobox a {
	color: #ffffff;
	text-decoration: none;
}

.infobox img {
	height: 70px;
}

.infobox .col-md-4:not(:last-child) {
	border-right: 1px solid #fff;
}

/* --- GAMES --- */
.game-filters button {
	color: #808080;
}

.game-filters button.active,
.game-filters button:active,
.game-filters button:hover {
	color: #15467a;
	text-decoration: none;
}

.game-column {
	opacity: 0;
	transition: .1s ease;
}

.single-game-container {
	position: relative;
}

.game-image {
	width: 100%;
	padding: .8rem;
	border-radius: 0;
	border: none;
}

.game-overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: .8rem;
	width: calc(100% - 1.6rem);
	max-height: 100%;
	opacity: 0;
	transition: ease;
	color: #FFFFFF;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility:    hidden;
	-ms-backface-visibility:     hidden;
}

.game-overlay-shadow {
	width: 100%;
	height: calc(100% - 48px);
	position: absolute;
	z-index: 0;
	background-color: #000000;
	opacity: 0.7;
}

.game-text {
	position: absolute;
	height: calc(100% - 50px - 40px);
	margin: 20px;
	z-index: 9999;
}

.game-text a {
	color: #FFFFFF;
}

.game-more-link {
	position: absolute;
	bottom: 0;
	width: 100%;
}

.single-game-container:hover .game-overlay {
  opacity: 1.0;
}

.game-note {
	background-color: #fff;
	height: 50px;
	margin-top: -1px;
}

.game-note p {
	font-family: 'Kalam', cursive;
	font-size: 1.3em;
	line-height: 50px;
}

/* --- JOBS --- */
.job-listing h3 {
	background-image: none;
	margin-bottom: 0;
}

/* --- RSVP --- */
body.rsvp {
	background-image: url('/img/rsvp_bg_Christmas_2019.jpg');
}

/* --- TIMELINE --- */
.timeline-background {
	position: relative;
	max-width: 1200px;
	margin-top: 100px;
	margin-bottom: 25px;
	padding-top: 50px;
	padding-bottom: 25px;
	background-image: url('/img/Pattern_04.png');
	background-repeat: repeat;
	background-position: top;
	left: 50%;
	transform: translate(-50%, 0);
}
.timeline-background::before {
	content: "";
	height: 56px;
	top: -56px;
	left: 0;
	right: 0;
	position: absolute;
	background-image: url('/img/Snippet1_Top1.png');
	background-repeat: repeat-x;
}
.timeline-background::after {
	content: "";
	height: 50px;
	bottom: -50px;
	left: 0;
	right: 0;
	position: absolute;
	background-image: url('/img/Snippet1_Bottom1.png');
	background-repeat: repeat-x;
}

.timeline {
	position: relative;
	max-width: 1200px;
	margin-top: 0px;
	margin-bottom: 25px;
	background-image: url('/img/TimelineStalkMiddle.png');
	background-repeat: repeat-y;
	background-position: center;
	left: 50%;
	transform: translate(-50%, 0);
}
.timeline::before {
	content: '';
	position: absolute;
	width: 10px;
	height: 56px;
	background-image: url('/img/TimelineStalkTop.png');
	background-repeat: repeat-y;
	background-position: center;
	top: -55px;
	left: 50%;
	margin-left: -5px;
}
.timeline::after {
	content: '';
	position: absolute;
	width: 10px;
	height: 44px;
	background-image: url('/img/TimelineStalkBottom.png');
	background-position-x: 0px;
	background-repeat: repeat-y;
	background-position: center;
	bottom: -44px;
	left: 50%;
	margin-left: -5px;
}

.timeline .year .header {
	display: inline-block;
	cursor: pointer;
	padding: 5px;
	width: 100%;
	outline: none;
	font-size: 15px;
	background-image: url('/img/TimelineYearLine.png');
	background-repeat: repeat-x;
	background-position-y: 100%;
}
.timeline .year .header .number {
	font-family: 'Kalam';
	font-weight: bold;
	color: #0056b3;
}
.timeline .year .header .number.left {
	margin-left: 10px;
	float: left;
}
.timeline .year .header .number.left::before {
	margin-right: 10px;
	content: '\002B'; /* Unicode character for "plus" sign (+) */
	color: #0056b3;
	font-size: 13px;
}
.timeline .year.active .header .number.left::before {
	content: "\002D"; /* Unicode character for "minus" sign (-) */
}
.timeline .year .header .number.right {
	margin-right: 10px;
	float: right;
}
.timeline .year .header .number.right::after {
	margin-left: 10px;
	content: '\002B'; /* Unicode character for "plus" sign (+) */
	color: #0056b3;
	font-size: 13px;
}
.timeline .year.active .header .number.right::after {
	content: "\002D"; /* Unicode character for "minus" sign (-) */
}

.timeline .event {
	min-height: 20px;
	text-align: center;
	color: #15467a;
	width: 100%;
	float: left;
	margin-bottom: 60px;
}
.timeline .event p {
	margin-left: 15px;
	margin-right: 15px;
}
.timeline .year.inactive .event {
	display: none;
}
.timeline .event .left {
	top: 0px;
	width: 50%;
	float: left;
}
.timeline .event .left::before {
	content: '';
	float: right;
	top: 50%;
	width: 75px;
	height: 75px;
	background-image: url('/img/TimelineLeafLeft.png');
	z-index: 20;
}
.timeline .event .right {
	top: 0px;
	width: 50%;
	float: right;
}
.timeline .event .right::before {
	content: '';
	position: absolute;
	left: 0px;
	margin-top: 0%;
	margin-left: 0px;
	margin-left: 50%;
	width: 75px;
	height: 75px;
	background-image: url('/img/TimelineLeafRight.png');
	z-index: 20;
}
.timeline .event .extra::before {
	width: 50px;
	height: 50px;
	background-repeat: round;
}
.timeline .event .title {
	margin-top: 20px;
}
.timeline .event .title .date {
	font-weight: bold;
}
.timeline .event .photo {
	left: 50%;
	transform: translate(-50%, 0);
}
.timeline .event a {
	font-family: 'Kalam', cursive;
	font-weight: bold;
}
.timeline-link {
	margin-top: 15px;
}

/* PRELOAD IMAGES */
body:after{
 display:none;
 content: 
 	url(/img/Icon_Header_AboutUs02.png) 
 	url(/img/Icon_Header_Games02.png) 
 	url(/img/Icon_Header_Jobs02.png) 
 	url(/img/Icon_Header_Vienna02.png) 
 	url(/img/Icon_Header_Contact02.png) 
}

/* FIT FOR MOBILE */
@media (max-width: 768px) { 
	/* tape cutoff */
	main {
		margin-top: 5rem;
		overflow: hidden;
	}

	section {
		margin-bottom: 3rem;
	}

	.overlap, .overlap-sm {
		margin-top: -3rem !important;
	}

	.rot-1, .rot-2, .rot--1, .rot--2 {
		transform: rotate(0deg);
	}

	header .navbar {
		padding-left: 0;
		padding-right: 0;
	}

	header .navbar-nav {
		width: 100%;
		position: relative;
	}

	header .nav-item {
		width: 20%;
	}

	header .nav-item-page .nav-link {
		max-width: 100%;
		width: 100%;
		height: auto;
	}

	header .nav-item-jobs a, header .nav-item-games a {
		margin: 0;
	}

	footer .footer-contact {
		text-align: left;
	}

	.landingpage-logo {
		left: 0;
		top: calc(50% - 200px);
	}

	.landingpage-content img {
		left: -100%;
	}

	.infobox .col-md-4:not(:last-child) {
		border-right: 0;
		border-bottom: 1px solid #fff;
		margin-bottom: 1rem;
	}

	.non-mobile {
		display: none;
	}

	/* --- TIMELINE --- */
	.timeline {
		background-position: left;
	}
	.timeline::before {
		background-position: left;
		left: 0%;
		margin-left: 0px;
	}
	.timeline::after {
		background-position: left;
		left: 0%;
		margin-left: 0px;
	}
	.timeline .event .left {
		width: 100%;
	}
	.timeline .event .right {
		width: 100%;
	}
	.timeline .event .left::before {
		float: left;
		background-image: url('/img/TimelineLeafRight.png');
	}
	.timeline .event .right::before {
		margin-left: 0%;
	}
}


@media (max-width: 360px) {
	.game-note {
		font-size: 0.8rem;
	}
	.game-text {
		font-size: 0.8rem;
	}
}