@import url(https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i);
  
html {
   color: white;
   text-shadow: 1px 1px 3px #000;
   height: 100%;
   scroll-behavior: smooth;
   
   --main-color: #1A1A1A;
   --main-title-color: #e39147;
   --main-title-color-dark: #C07736;
}

h2 {
   color: white;
}

hr {
   margin: 0;
   color: var(--main-color);
   opacity: 0;
}
blockquote {
   font-style: italic;
}

body {
	margin: 0;
	padding: 0;
	background-color: var(--main-color);

   font-size: 96%;
	font-family: 'Rubik', sans-serif;
	line-height: 1.7em;
   
   -webkit-text-stroke-width: 0.15px;
   -webkit-text-stroke-color: #000000;
   
	background-image: url('images/bg_blank.jpg');
	background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
   height: 100%;
}

#header {
   position: fixed;
   width: 100vw;
   padding-left: 10px;
   
   font-size: 130%;
   
   top: 0;
   transition: top 0.3s;
   
   z-index:99;
   background-color: var(--main-color);
	background-image: url('images/bg_header.png');
	background-position: bottom;
   background-repeat: repeat-x;
   
   /*border-bottom: 2px solid black;*/

   height: 106px;
   margin-bottom: -106px;

   opacity: 0.99;
   
   -webkit-transition: all .25s;
   -moz-transition: all .25s;
   -o-transition: all .25s;
   transition: all .25s;

   user-select: none;
}

#header img {
  margin: auto;
  display: block;
}

#wrapper {
   min-height: 100%;
   /*min-width: 830px;*/

   /* equal to footer height */
   margin-bottom: -60px; 

   background-color: black;
   background-image: url('images/bg_blank.jpg');
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
}
#wrapper:after {
  content: "";
}

#footer, #wrapper:after {
  /* .push must be the same height as footer */
  height: 40px; 
}

#footer {
   width: 100%;

   background-color: var(--main-color);
	background-image: url('images/bg_footer.png');
	background-position: top;
   background-repeat: repeat-x;
   
   /*border-top: 2px solid black;*/
   
   font-size: 78%;

   padding: 20px 0 15px 0;
   text-align: center;
	line-height:1.5em;
   
   opacity: 0.99;
}

#footer p {
   padding: 0;
   margin: 0;
}

/* Only used for news box */
.content {
	max-width: 75%;
 
	margin: auto;

   padding-bottom: 85px;

   text-align: center;

   padding-top: 136px;
   min-height: 136px;
}

/* Increase the size of the h2 elements on main page */
.category {
   font-size: 260%; 
	line-height:0.8em;
}

.connect {
   font-size: 140%;
   margin: 0 auto 10px auto;
   padding-top: 10px;
   user-select: none;
   text-align: center;
}

.description {
   /*min-height: 100vh;
   min-height: 850px;*/
   padding: 35px 0 60px 0;
   text-align: justify;
}
.description h2 {
   text-align: center;
}

.bg_games {
   background-image: url('images/bg_games.jpg'), url('images/bg_grid.png');
	background-position: center;
   background-repeat: no-repeat, repeat;
   background-attachment: fixed, local;
   background-size: cover, contain;
}
.bg_about {
   background-color: #000;
}
.bg_jobs {
   background-image: url('images/bg_games.jpg');
	background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
}
.bg_dark {
   background-color: #000;
}
.bg_bright {
   background-color: var(--main-color);
}

.description_narrov {
   z-index:100;
   max-width: 697px; /* shitty workaround, but whatever */
   margin: auto;
}

#imprint-return {
   margin: -25px auto -20px auto;
   padding: 0;
   text-align: left;
   width: 727px;
}

a {
   color: white;
   text-decoration: none;
   position: relative;
}
a.active::before {
   content: '';
   position: absolute;
   width: 100%;
   transform: scaleX(1);
   height: 1px;
   bottom: 0;
   left: 0;
   background-color: #fff;
   transform-origin: bottom right;
   transition: transform 0.25s ease-out;
   opacity: 0.7;
}

.description a:hover, .menu a:hover, p a:hover, h1 a:hover {
   /*color: #e39147;*/
   opacity: 0.7;
   transition: all 0.25s ease-out;
}
.description a::after, .menu a:after, p a:after, h1 a:after {
   content: '';
   position: absolute;
   width: 100%;
   transform: scaleX(0);
   height: 1px;
   bottom: 0;
   left: 0;
   background-color: white;
   transform-origin: bottom right;
   transition: transform 0.25s ease-out;
   opacity: 0.7;
}
.description a:hover::after, .menu a:hover::after, p a:hover::after, h1 a:hover::after {
   transform: scaleX(1);
   transform-origin: bottom left;
}

.box {
   margin-top: 20px;
   padding: 1px 15px;
   min-height: 4em;
   /*font-size: 75%;*/
   color: rgba(255,255,255,0.95);
   background-color: rgba(0,0,0,0.85);
   -moz-box-shadow: 2px 2px 4px rgba(0,0,0,.5);
   -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,.5);
   box-shadow: 2px 2px 4px rgba(0,0,0,.5);
}
.box p {
   /*margin-top: -10px;*/
}
.box h2 {
   margin-bottom: -5px;
}
.box h3 {
   margin-bottom: -5px;
}

.no_bg {
   background: none;
}

.header-logo {  
   display: block;
   user-select: none;
}
.header-logo img {
   -webkit-transition: all .25s;
   -moz-transition: all .25s;
   -o-transition: all .25s;
   transition: all .25s;
}
.header-logo img:hover {
  opacity: 0.7;
}

.img-logo {
   text-align: center;
   display: block;
   user-select: none;
}
/*
#r_logo:hover {
   content:url("images/logo_rotators_hover.png");
}
*/

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

/* Style all font awesome icons */
.fa {
   padding: 30px 30px 15px 30px;
   font-size: 0;
   width: 50px;
   text-align: center;
   text-decoration: none;
	background-position: center;
   background-repeat: no-repeat;

   -webkit-transition: all .25s;
   -moz-transition: all .25s;
   -o-transition: all .25s;
   transition: all .25s;
}

.fa:hover {
  opacity: 0.75;
}
.fa-github {
  background-image: url('images/icon_github.png');
}/*
.fa-github:hover {
  background-image: url('images/icon_github_hover.png');
}*/
.fa-steam {
  background-image: url('images/icon_steam.png');
}/*
.fa-steam:hover {
  background-image: url('images/icon_steam_hover.png');
}*/
.fa-discord {
  background-image: url('images/icon_discord.png');
} /*
.fa-discord:hover {
  background-image: url('images/icon_discord_hover.png');
} */
.fa-youtube {
   background-image: url('images/icon_youtube.png');
} /*
.fa-youtube:hover {
   background-image: url('images/icon_youtube_hover.png');
} */
.fa-facebook {
   background-image: url('images/icon_facebook.png');
   padding: 30px 15px 15px 10px;
}/*
.fa-facebook:hover {
   background-image: url('images/icon_facebook_hover.png');
   padding: 30px 15px 15px 10px;
}*/
.fa-twitter {
   background-image: url('images/icon_twitter.png');
} /*
.fa-twitter:hover {
   background-image: url('images/icon_twitter_hover.png');
} */

.arrow {
   -webkit-transition: opacity .25s;
   -moz-transition: opacity .25s;
   -o-transition: opacity .25s;
   transition: opacity .25s;
}

.arrow-box-wrap {
  display: inline-block;
  position: relative;

  width: 1.1em;
  height: 1.1em;
}

.arrow-box {
   transform: rotate(90deg);
   user-select: none;
   position: relative;

   width: 1.1em;
   height: 1.1em;
   
   -webkit-transition: all .25s;
   -moz-transition: all .25s;
   -o-transition: all .25s;
   transition: all .25s;
}

.arrow-box.down {
   transform: rotate(0deg);
   position: relative;
}

/*.arrow-content {
   display: grid;
   grid-template-rows: 0fr;
   opacity: 0;
   transition: .3s ease-out;
}

.arrow-content.open {
   grid-template-rows: 1fr;
   opacity: 1;
   transition: .3s ease-in;
}*/
.arrow-content {
   display: grid;
   grid-template-rows: 1fr;
   opacity: 1;
   transition: .3s ease-in;
}

.arrow-content.open {
   grid-template-rows: 0fr;
   opacity: 0;
   transition: .3s ease-out;
}

.arrow-content > .inner {
   overflow: hidden;
}


/*/////////////////////*/
#top_image {
   width: 100%;
   height: 82vh;
   /*height: calc(82vh - 50px);*/
   
   min-height: 350px;
   /*max-height: 750px;*/
   
   margin-bottom: -75px; /* to pull up the news category a little higher */

   background-image: url('images/bg_topImage.jpg');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;

   mask-image: url('images/bg_topImage_mask.svg');
   mask-repeat: no-repeat;
   mask-position: bottom center;
   mask-size: cover;
   
   user-select: none;
}
#top_image .title_highlight {
   font-size: 145%;
   padding-left: 7.5%
}
.top_image_text {
   width: 100%;
   height: 100%;
   
   padding-top: 40px;

   font-size: 1.5vw;
   
   display: flex;
   justify-content: center;
   align-items: center;
   line-height: 2em;
   
   text-shadow: 2px 2px 6px #000;
   white-space: nowrap;
}
.top_image_text h1 a:hover {
   transition: all 0.25s ease-out;
   opacity: 1;
   color: var(--main-title-color);
}
.top_image_text h1 a:after {
   content: '';
   position: absolute;
   width: 100%;
   transform: scaleX(0);
   height: 0.3vmax;
   bottom: 0;
   left: 0;
   background-color: white;
   transform-origin: bottom right;
   transition: transform 0.25s ease-out;
   opacity: 1;
}
.top_image_text h1 a:hover::after {
   transform: scaleX(1);
   transform-origin: bottom left;
   opacity: 1;
}
#top_video {
   position: fixed;
   top: 0;
   min-width: 100%;
   min-height: 100%;
}

.top_overlay {
   position: absolute;
   width: 100%;
   height: 100%;

   background-image: url('images/bg_grid.png');
   background-repeat: repeat;
}

#top_arrow a {
   min-height: 350px;
   padding-top: 60px;
   top: 35vh;
}
#top_arrow a span {
   position: absolute;
   top: 0;
   left: 50%;
   width: 30px;
   height: 50px;
   margin-left: -15px;
   border: 2px solid #fff;
   border-radius: 50px;
   box-sizing: border-box;
}
#top_arrow a span::before {
   position: absolute;
   top: 10px;
   left: 50%;
   content: '';
   width: 6px;
   height: 6px;
   margin-left: -3px;
   background-color: #fff;
   border-radius: 100%;
   -webkit-animation: sdb10 2s infinite;
   animation: sdb10 2s infinite;
   box-sizing: border-box;
}
@-webkit-keyframes sdb10 {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb10 {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/*/////////////////////*/

/* Flexbox Styles */
.list_wrapper {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}

.gameslist_box {
	margin: 10px;
   padding: 10px;

   width: 290px;
   min-height: 390px;

	background-position: center;
   background-repeat: no-repeat;
   background-size: 100%;
   
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;

   /* Since the box scales up on hover, we reduce the text size a bit */
   font-size: 95%;
   line-height: 1.55em;

   text-shadow: 1px 1px 6px #000;
   
   cursor: pointer;
}
.gameslist_box:hover {
   -ms-transform: scale(1.075);
   -moz-transform: scale(1.075);
   -webkit-transform: scale(1.075);
   -o-transform: scale(1.075);
   transform: scale(1.075);
   
   background-size: 107.5%;
}
.gameslist_box:hover .gameslist_text:before,
.gameslist_box:focus .gameslist_text:before {
   display: block;
}

.gameslist_text {
   width: 100%;
   height: 100%;
}
.gameslist_text h2 {
   position: relative;
   
   line-height: 1.35em;
   opacity: 0;
   
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;
}
.gameslist_text:hover h2 {
   opacity: 1;
}
.gameslist_text p {
   position: relative;

   opacity: 0;
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;

   text-align: justify;
}
.gameslist_text:hover p {
   opacity: 1;
}
.gameslist_text::before {
   content: "";
   display: none;
   height: 100%;
   width: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background-color: rgba(0, 0, 0, 0.65);
}
.gameslist_text:focus {
   display: block;
}

/*
   NEWS BLOCK
*/
/* Flexbox Styles */
.list_box {
	margin: 20px;
   padding: 0px;

   height: 100%; /* fix box height issue */
   width: 325px;

   color: rgba(255,255,255,0.95);
   
   /*background-color: rgba(20, 20, 20, 0.65);*/
   background-color: rgba(0,0,0,0.85);
   box-shadow: 2px 2px 4px rgba(0,0,0,.5);

   text-shadow: 1px 1px 6px #000;
   transition: all .5s;

   cursor: pointer;
}
.list_box:hover {
   background-color: rgba(25,25,25,0.85);
}

.list_box:hover h2 {
   background-color: var(--main-title-color);
   transition: all .5s;
}

.list_box_text {
   width: 100%;
   min-height: 190px; /* fix box height issue */
}

.news {
   line-height: 1.3em;
}

.list_box_text h2 {
   margin-top: 0px;
   padding: 10px;
   position: relative;
   line-height: 1.3em;
   background-color: var(--main-title-color-dark);
   transition: all .5s;
}
.news h2 { /* subclass from list_box_text */
   margin-top: -8px;
}

.list_box_text p {
   padding: 0 15px 0 15px;
   position: relative;
}

.list_box_text li {
   margin: 0 15px 0 30px;
   text-align: left;
}

.jobs {
   width: 400px;
   /*border: 4px solid #111;*/
}

/*
   HEADER NAVIGATION
*/
.top-nav {
  margin-right: 25px;
  
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.menu {
   display: flex;
   flex-direction: row;
   list-style-type: none;
   margin: 0;
   padding: 0;

   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;

   background-color: var(--main-color);
   border-radius: 5px;
}

.menu > li {
  margin: 0 1rem;
  overflow: hidden;
  
  padding: 5px;
}
.menu-button-container {
  display: none;
  height: 100%;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#menu-toggle {
  display: none;
}

/* Turns into Hamburger menu */
.menu-button,
.menu-button::before,
.menu-button::after {
   margin-right: 15px;
   
   display: block;
   background-color: #fff;
   position: absolute;
   height: 4px;
   width: 30px;
   transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
   border-radius: 2px;
}
.menu-button::before {
  content: '';
  margin-top: -8px;
}
.menu-button::after {
  content: '';
  margin-top: 8px;
}

/* Hamburger transition animation */
#menu-toggle:checked + .menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(45deg);
}
#menu-toggle:checked + .menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}
#menu-toggle:checked + .menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-45deg);
}

@media (max-width: 800px) {
   .menu-button-container {
      display: flex;
   }
   .menu {
      position: absolute;
      top: 0;
      margin-top: 106px;
      left: 0;
      flex-direction: column;
      width: 100%;
      justify-content: center;
      align-items: center;
   }
   #menu-toggle ~ .menu li {
      height: 0;
      margin: 0;
      padding: 0;
      border: 0;
      transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
   }
   #menu-toggle:checked ~ .menu li {
      border: 1px solid #333;
      height: 2.5em;
      padding: 0.5em;
      transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
   }
   .menu > li {
      box-sizing: border-box;
      display: flex;
      justify-content: center;
      margin: 0;
      padding: 0.5em 0;
      width: 100%;
      color: white;
      background-color: var(--main-color);
   }
   .menu > li:not(:last-child) {
      border-bottom: 1px solid #444;
   }
}

/* Funny logo rotation */
.logo {
   position: relative;
   user-select: none;
   float: right;
   margin: 2.5em 1em 0.5em 2em;
}
.logo img {
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;
}
.logo img:hover {
   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;
   
   -ms-transform: scale(1.075);
   -moz-transform: scale(1.075);
   -webkit-transform: scale(1.075);
   -o-transform: scale(1.075);
   transform: scale(1.075);
}

.logo-rotation  {
   user-select: none;
   float: right;
   margin: 2.5em 1em 0.5em 2em;
}

.logo-rotation img {
   position: relative;
   -webkit-transition: all 1.5s ease-out;
   -moz-transition: all 1.5s ease-out;
   -o-transition: all 1.5s ease-out;
   transition: all 1.5s ease-out;
}
.logo-rotation img:hover {
   position: relative;
   transform: rotate(720deg);
}

/* News stuff */
.news_date {
   margin: 5px auto;
   text-align: center;
   display: block;
}
.news_image {
   width: 100%;
   object-fit: contain;
}

.title_highlight {
   color: var(--main-title-color);
}

/* no JS style */
#no-script {
   position: absolute;
   width: 100%;
   height: 100%;
	background-color: #000;
   z-index: 1;
}
#no-script-box {
   position: absolute;
   margin: auto;
   top: 50%;
   left: 50%;

   text-align: center;
   transform: translate(-50%, -50%);
}

/* Back to top Button */
#ToTopButton {
   opacity: 0;
   
   -ms-transform: scale(1);
   -moz-transform: scale(1);
   -webkit-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
   
   width: 50px;
   height: 50px;

   position: fixed;
   bottom: 14px;
   right: 35px;
   z-index: 99; /* Make sure it does not overlap */
   border: none;
   outline: none;
   
   background-color: var(--main-color);
   background-image: url('images/icon_totop.png');
	background-position: center;
   background-repeat: no-repeat;

   cursor: pointer;
   padding: 15px;
   border-radius: 45px; /* Rounded corners */
   font-size: 18px;

   -webkit-transition: all .5s;
   -moz-transition: all .5s;
   -o-transition: all .5s;
   transition: all .5s;
}

#ToTopButton:hover {
   background-color: #555;
}