@font-face {
  font-family: 'DB HelvethaicaX';
  src: url("../fonts/DBHelvethaicaX-55Regular.eot");
  src: url("../fonts/DBHelvethaicaX-55Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/DBHelvethaicaX-55Regular.woff2") format("woff2"), url("../fonts/DBHelvethaicaX-55Regular.woff") format("woff"), url("../fonts/DBHelvethaicaX-55Regular.ttf") format("truetype"), url("../fonts/DBHelvethaicaX-55Regular.svg#DBHelvethaicaX") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'DB HelvethaicaX';
  src: url("../fonts/DBHelvethaicaX-65Med.eot");
  src: url("../fonts/DBHelvethaicaX-65Med.eot?#iefix") format("embedded-opentype"), url("../fonts/DBHelvethaicaX-65Med.woff2") format("woff2"), url("../fonts/DBHelvethaicaX-65Med.woff") format("woff"), url("../fonts/DBHelvethaicaX-65Med.ttf") format("truetype"), url("../fonts/DBHelvethaicaX-65Med.svg#DBHelvethaicaXMed") format("svg");
  font-weight: 600;
  font-style: normal; }
@font-face {
  font-family: 'DB HelvethaicaX';
  src: url("../fonts/DBHelvethaicaX-75Bd.eot");
  src: url("../fonts/DBHelvethaicaX-75Bd.eot?#iefix") format("embedded-opentype"), url("../fonts/DBHelvethaicaX-75Bd.woff2") format("woff2"), url("../fonts/DBHelvethaicaX-75Bd.woff") format("woff"), url("../fonts/DBHelvethaicaX-75Bd.ttf") format("truetype"), url("../fonts/DBHelvethaicaX-75Bd.svg#DBHelvethaicaXBd") format("svg");
  font-weight: 700;
  font-style: normal; }
@keyframes float {
  0% {
    transform: scale(1); }
  50% {
    transform: scale(0.8); }
  100% {
    transform: scale(1); } }
@keyframes floatTwo {
  0% {
    transform: translate(-50%, -50%) scale(1); }
  50% {
    transform: translate(-50%, -50%) scale(0.8); }
  100% {
    transform: translate(-50%, -50%) scale(1); } }
html, body {
  margin: 0;
  padding: 0; }

body {
  color: #fff;
  font-family: 'DB HelvethaicaX', sans-serif;
  font-size: 22px;
  background: url("../images/bg-header.jpg") #1d1d2a no-repeat top center;
  background-size: 100%; }

header {
  height: 60vh;
  overflow: hidden; }
  header .element-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    display: inline-flex;
    margin: 0 auto;
    animation: float 10s infinite;
    max-height: 100%; }
  header .container {
    position: relative;
    height: 100%; }

h1, h2, h3, h4, p {
  margin: 0; }

p {
  color: #d5d6e1; }

.header-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.5rem;
  height: 100%;
  z-index: 1; }
  .header-content img {
    width: 240px;
    max-width: 100%;
    margin-bottom: 32px; }
  @media (min-width: 768px) {
    .header-content {
      font-size: 2rem; }
      .header-content img {
        width: 480px; } }

.section-head {
  text-align: center;
  margin-bottom: 24px; }
  .section-head h1 {
    color: #ffc600; }

.card-feature img {
  margin: 0 auto;
  display: block; }
.card-feature h2 {
  margin-bottom: 16px; }

.card-games {
  background-color: #242734;
  border: 1px solid #2b2d3d;
  padding: 24px;
  border-radius: 24px; }
  @media (min-width: 768px) {
    .card-games {
      padding: 32px; } }
  .card-games h2 {
    margin-bottom: 16px; }
  .card-games .game {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #2b2d3d;
    padding-bottom: 12px;
    margin-bottom: 12px; }
    .card-games .game img {
      max-width: 100%;
      max-height: 53px; }
    .card-games .game .game-logo {
      width: 72px;
      display: flex;
      justify-content: center; }
    .card-games .game .game-info {
      padding-left: 24px; }
      .card-games .game .game-info .game-name {
        margin-bottom: 4px; }
      .card-games .game .game-info .game-status {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 24px;
        padding: 2px 16px;
        font-size: 1rem;
        letter-spacing: 1px; }
        .card-games .game .game-info .game-status.online {
          background-color: #15ad16; }
        .card-games .game .game-info .game-status.offline {
          background-color: #fa2f3d; }

.rental-wrapper {
  position: relative;
  padding: 64px 15px;
  overflow: hidden; }
  @media (min-width: 768px) {
    .rental-wrapper {
      padding: 100px 0; } }
  .rental-wrapper .element-rental {
    position: absolute;
    top: 50%;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, -50%);
    z-index: 0;
    display: block;
    animation: floatTwo 10s infinite;
    max-height: 100%;
    opacity: .5; }
  .rental-wrapper .container {
    text-align: center; }
    .rental-wrapper .container p {
      font-size: 1.5rem;
      padding-bottom: 8px;
      margin-bottom: 8px;
      border-bottom: 1px solid #2b2d3d; }
    @media (min-width: 768px) {
      .rental-wrapper .container p {
        font-size: 2rem;
        padding: 0;
        margin: 0;
        border: 0; } }

.card-addon {
  background-color: #242734;
  border: 1px solid #2b2d3d;
  padding: 32px;
  border-radius: 24px;
  text-align: center;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; }
  .card-addon img {
    display: block;
    margin-bottom: 16px; }
  .card-addon.coming-soon {
    opacity: .75; }

footer .container {
  padding: 24px 0 16px;
  border-top: 1px solid #2b2d3d; }
footer a {
  text-decoration: none;
  color: #fff;
  transition: all .25s ease; }
  footer a:hover {
    color: #ffc600; }
footer img {
  width: 150px; }

/*# sourceMappingURL=style.css.map */