/* variables */
/* partials */
#header {
  background: #2D2D2D;
  position: relative;
  height: 100px; }
  @media (max-width: 768px) {
    #header {
      position: inherit; } }
  #header .logo {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    height: 75px; }
    @media (max-width: 768px) {
      #header .logo {
        position: inherit;
        transform: inherit;
        margin-top: 13px; } }
  #header .mobilemenu span {
    display: none; }
    @media (max-width: 768px) {
      #header .mobilemenu span {
        display: initial;
        position: absolute;
        top: 15px;
        left: 7px;
        color: white;
        z-index: 999; } }
  #header nav {
    float: right;
    height: 100px;
    position: relative;
    width: 600px; }
    @media (max-width: 768px) {
      #header nav {
        position: inherit;
        height: inherit; } }
    #header nav .nav-container {
      position: absolute;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
      display: flex;
      width: 600px; }
      @media (max-width: 768px) {
        #header nav .nav-container {
          display: inherit;
          position: inherit;
          top: 0;
          transform: inherit;
          width: inherit; } }
      #header nav .nav-container ul {
        color: white;
        display: flex;
        justify-content: space-around;
        margin: 0 20px;
        padding: 0;
        width: 100%; }
        @media (max-width: 768px) {
          #header nav .nav-container ul {
            display: inherit;
            margin: inherit;
            padding-top: 50px; } }
        #header nav .nav-container ul li {
          color: white;
          list-style-type: none; }
          #header nav .nav-container ul li a.active {
            text-decoration: underline; }
        @media (max-width: 768px) {
          #header nav .nav-container ul span {
            display: none; } }
      #header nav .nav-container .search {
        display: flex;
        justify-content: flex-end; }
        @media (max-width: 768px) {
          #header nav .nav-container .search {
            display: none; } }

footer {
  text-align: center; }

#hero {
  align-items: center;
  background-image: url("../img/banner.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  height: 250px;
  width: 100%; }
  #hero div img {
    float: right;
    height: 150px; }
    @media (max-width: 768px) {
      #hero div img {
        height: 110px; } }

/* site */
* {
  box-sizing: border-box; }

/* CSS Document */
body {
  font-family: "Montserrat", sans-serif;
  margin: 0; }
  body .container {
    width: 75%;
    margin: 0 auto; }
    @media (max-width: 768px) {
      body .container {
        width: 95%; } }
    @media (max-width: 475px) {
      body .container {
        width: 100%;
        padding: 0 10px; } }
  body a {
    color: inherit;
    text-decoration: none; }
    body a:visited {
      color: inherit; }
    body a:hover {
      text-decoration: underline; }
  body .btn {
    width: 110px;
    text-align: center;
    border: 2px solid #64cb72;
    border-radius: 10px;
    padding: 10px; }
    body .btn:hover {
      cursor: pointer;
      text-decoration: underline; }
  body .clear {
    clear: both; }

#home .games {
  display: flex;
  flex-wrap: wrap;
  height: 385px; }
  @media (max-width: 768px) {
    #home .games {
      height: 820px; } }
  @media (max-width: 475px) {
    #home .games {
      height: 1800px; } }
  #home .games .game {
    position: relative;
    width: 33%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; }
    @media (max-width: 768px) {
      #home .games .game {
        width: 50%; } }
    @media (max-width: 475px) {
      #home .games .game {
        width: 100%; } }
    #home .games .game img {
      position: absolute;
      left: 50%;
      top: 50%;
      -webkit-transform: translateX(-50%) translateY(-50%);
      -moz-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      -o-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
      width: 100%; }