#hp-spacer {
  height: 40px;
}

#hp-games {
}

.hp-game {
  position: relative;
  float:left;
  width:16.66%;
  padding:1%;
}
.popup {
  background: #A599FF;
  border-radius: 40px;
  border:10px solid #D1BFFF;
  box-shadow: 0 0 0 4px #B49BF2, 0 0 150px 10px #8E78ED inset;
  padding: 20px;
  position: fixed;
  top:50%;
  left:50%;
  transform: translateY(-50%) translateX(-50%);
}
.hp-game.popup .icon {
  height: auto !important;
  position: static !important;
  transform: none !important;
  float: left;
}
.hp-game.popup .web-gl {
  /*position:absolute;*/
  float:none;
}

.hp-game.popup .web-gl img.big {
  width:150% ;
  max-width:150%;
}
.hp-game.popup .description {
  color: #322152;
  text-shadow: 0 2px rgba(255, 255, 255, .5);
}

.hp-game.popup .title {
  text-shadow: 2px 2px rgba(50,33,82, .35);
}

.hp-game > div > * {
  display:none;
  z-index:21;
}
.popup .close {
  position:absolute;
  top:0;
  right:-5px;
  transform: translateX(50%) translateY(-50%);
  display:none;
}
.hp-game .icon {
  display:block;
  width:100%;
  max-width:100%;
}
.hp-game .name {
  font-weight:bold;
  text-align:center;
  display:block;
  color:#FFE4A4;
  font-size: 30px;
}
.hp-game .title {
  color:#FFE4A4;
  font-weight:bold;
  font-size:35px;
  font-family: "dimbo_regular", Verdana;
}
.hp-game .description {
  color:#fff;
  font-size: 28px;
}
.hp-game .web-gl {
  float:right;
}
.hp-game .description {
  padding: 10px 0;
}
.hp-game .links {
  text-align:center;
  padding:20px 0 10px 0;
  display:none;
}
.hp-game .links a {
  width:auto;
  margin: 0 auto;
  display:inline-block !important;
  text-align:center;
}
.hp-game .links a img {max-width:100%;}

.hp-cover {
  display:none;
  position:fixed;
  background-color: rgba(0,0,0,.5);
  top:0;
  right:0;
  bottom:0;
  left:0;
}

/* fixed characters */
#char-left {
  position:absolute;
  left:-450px;
  bottom:0;
}
#char-left img {
  position:absolute;
  bottom:-90px;
}

#char-right {
  display:none;
  position:absolute;
  /*z-index:10;*/
  width:250px;
  height:1080px;
  top:0;
  right:0;
}

@media only screen and (max-width:768px) {
  .hp-game  {
    margin-bottom: 10px;
  }
  /*main .sizer {margin-bottom:30px;}*/
  .hp-game .links {padding-bottom:0;padding-top:0;}
}

@media only screen and (max-width:600px) {
  .hp-game .icon {
    display:block;
    margin-left:auto;
    margin-right:auto;
  }
}