.realms .fluid {
  max-width: calc(320px * 6);
  width: 100%;
  padding-bottom: 40px; }

.realms .realm {
  font-family: "UbuntuLight";
  display: block;
  float: left;
  background-position: 50% 0;
  background-repeat: no-repeat;
  width: 50%;
  height: 215px;
  max-width: initial;
  background-size: cover;
  padding-right: 15px;
  padding-left: 15px; }
  .realms .realm.tww {
    background-image: url("../img/realm/tww.png"); }
  .realms .realm.df {
    background-image: url("../img/realm/dragonflight.png"); }
  .realms .realm.sl {
    background-image: url("../img/realm/shadowlands.png"); }
  .realms .realm.bfa {
    background-image: url("../img/realm/bfa.jpg"); }
  .realms .realm.legion {
    background-image: url("../img/realm/legion.jpg"); }
  .realms .realm.wod {
    background-image: url("../img/realm/wod.jpg"); }
  .realms .realm.mop {
    background-image: url("../img/realm/mop.jpg"); }
  .realms .realm.cata {
    background-image: url("../img/realm/cata.jpg"); }
  .realms .realm.tlk {
    background-image: url("../img/realm/wotlk.jpg"); }
  .realms .realm.vanilla {
    background-image: url("../img/realm/vanilla_banner_1280.jpg"); }
  .realms .realm .left-side {
    margin: 0 15px;
    width: 60%;
    height: 100%;
    float: left; }
    .realms .realm .left-side .realm_top {
      padding: 30px 15px 5px 0;
      line-height: 30px;
      height: 50px; }
      .realms .realm .left-side .realm_top .status {
        display: block;
        width: 100%;
        height: 35px;
        float: left;
        padding-left: 5px;
        font-size: 14px; }
        .realms .realm .left-side .realm_top .status:before {
          display: inline-block;
          content: '';
          width: 6px;
          height: 6px;
          border-radius: 100%;
          margin-right: 5px;
          vertical-align: middle; }
        .realms .realm .left-side .realm_top .status.online:before {
          background-color: #2ff800; }
        .realms .realm .left-side .realm_top .status.offline:before {
          background-color: #eb432d; }
      .realms .realm .left-side .realm_top .queue {
        display: block;
        width: 100%;
        float: left;
        line-height: 5px; }
        .realms .realm .left-side .realm_top .queue:before {
          display: inline-block;
          content: '';
          width: 6px;
          height: 6px;
          border-radius: 100%;
          margin-right: 9px;
          vertical-align: middle;
          background-color: #fe9e02; }
      .realms .realm .left-side .realm_top .type {
        float: right;
        line-height: 25px;
        width: 100%;
        font-size: 16px;
        text-align: left; }
        .realms .realm .left-side .realm_top .type .rate {
          display: inline-block;
          width: 35px;
          height: 35px;
          background: white;
          color: #525E66;
          border-radius: 100%;
          font-family: "UbuntuBold";
          font-size: 16px;
          text-align: center;
          line-height: 35px; }
          .realms .realm .left-side .realm_top .type .rate.fun {
            font-size: 12px; }
    .realms .realm .left-side .realm_infos {
      padding: 0 0 15px 0; }
      .realms .realm .left-side .realm_infos .name {
        font-family: "UbuntuBold";
        font-size: 40px; }
      .realms .realm .left-side .realm_infos .players {
        font-family: "UbuntuBold";
        font-size: 28px;
        line-height: 20px; }
        .realms .realm .left-side .realm_infos .players span {
          font-size: 18px;
          font-family: "UbuntuLight"; }
  .realms .realm.df .left-side {
    width: 50%; }
    .realms .realm.df .left-side .beta {
      font-size: 2rem;
      position: relative;
      left: 5px; }
  .realms .realm .realm_bottom {
    margin: 0;
    width: 200px;
    height: 100%;
    float: right;
    text-align: center; }
    .realms .realm .realm_bottom img {
      width: auto;
      height: 100%; }
    .realms .realm .realm_bottom .expansion {
      font-family: "ElanITCStdBold";
      text-align: center;
      font-size: 20px;
      margin-top: -10px; }
  .realms .realm .left-side + .left-side + .realm_bottom {
    margin-top: 0; }
  .realms .realm .left-side + .left-side {
    border-top: none; }

@media screen and (max-width: 1500px) {
  .realms .realm {
    width: 100%;
    height: 180px;
    max-width: initial;
    background-size: cover;
    padding-left: 25px;
    padding-right: 0; }
    .realms .realm.tww {
      background-image: url("../img/realm/tww.png"); }
    .realms .realm.df {
      background-image: url("../img/realm/dragonflight.png"); }
    .realms .realm.sl {
      background-image: url("../img/realm/shadowlands.png"); }
    .realms .realm.bfa {
      background-image: url("../img/realm/bfa.jpg"); }
    .realms .realm.legion {
      background-image: url("../img/realm/legion.jpg"); }
    .realms .realm.wod {
      background-image: url("../img/realm/wod.jpg"); }
    .realms .realm.mop {
      background-image: url("../img/realm/mop.jpg"); }
    .realms .realm.cata {
      background-image: url("../img/realm/cata.jpg"); }
    .realms .realm.tlk {
      background-image: url("../img/realm/wotlk.jpg"); }
    .realms .realm.vanilla {
      background-image: url("../img/realm/vanilla_banner_1280.jpg"); }
    .realms .realm .left-side {
      width: 62%;
      height: 100%;
      float: left;
      margin-bottom: 0; }
      .realms .realm .left-side .realm_infos .name {
        font-size: 35px; }
      .realms .realm .left-side .realm_infos .players {
        font-size: 20px; }
        .realms .realm .left-side .realm_infos .players span {
          font-size: 18px; }
      .realms .realm .left-side .realm_top {
        padding: 5px 15px 5px 0; }
        .realms .realm .left-side .realm_top .status {
          width: 100%;
          font-size: 14px; }
        .realms .realm .left-side .realm_top .type {
          width: 100%;
          font-size: 16px;
          text-align: left; }
          .realms .realm .left-side .realm_top .type .rate {
            width: 35px;
            height: 35px;
            line-height: 35px;
            font-size: 14px; }
    .realms .realm .realm_bottom {
      margin: 0;
      width: 200px;
      height: 100%;
      float: right;
      text-align: center; }
      .realms .realm .realm_bottom .expansion {
        font-size: 15px;
        margin-top: -10px; }
    .realms .realm .left-side + .left-side + .realm_bottom {
      margin-top: 0; }
    .realms .realm .left-side + .left-side {
      border-top: none; } }

@media screen and (max-width: 640px) {
  .realms .fluid {
    width: 320px; }
  .realms .realm {
    width: 100%;
    height: auto;
    min-height: 442px;
    max-width: initial;
    background-size: cover;
    padding: 0; }
    .realms .realm.tww {
      background-image: url("../img/realm/tww_mobile.png"); }
    .realms .realm.df {
      background-image: url("../img/realm/df_mobile.png"); }
    .realms .realm.sl {
      background-image: url("../img/realm/sl_mobile.png"); }
    .realms .realm.bfa {
      background-image: url("../img/realm/bfa_mobile.png"); }
    .realms .realm.legion {
      background-image: url("../img/realm/legion_mobile.jpg"); }
    .realms .realm.wod {
      background-image: url("../img/realm/wod_mobile.jpg"); }
    .realms .realm.mop {
      background-image: url("../img/realm/mop_mobile.jpg"); }
    .realms .realm.cata {
      background-image: url("../img/realm/cata_mobile.jpg"); }
    .realms .realm.tlk {
      background-image: url("../img/realm/tlk_mobile.jpg"); }
    .realms .realm.vanilla {
      background-image: url("../img/realm/vanilla_mobile.jpg"); }
    .realms .realm .left-side {
      width: calc(100% - 30px);
      height: initial;
      margin-bottom: 0; }
      .realms .realm .left-side .realm_infos {
        padding-top: 0px; }
        .realms .realm .left-side .realm_infos .name {
          font-family: "UbuntuBold";
          font-size: 40px; }
        .realms .realm .left-side .realm_infos .players {
          font-family: "UbuntuBold";
          font-size: 18px;
          line-height: 18px; }
          .realms .realm .left-side .realm_infos .players span {
            font-size: 15px;
            font-family: "UbuntuLight"; }
      .realms .realm .left-side .realm_top {
        width: 100%;
        padding: 15px 15px 0 0; }
        .realms .realm .left-side .realm_top .status {
          width: 65%;
          font-size: 14px; }
        .realms .realm .left-side .realm_top .type {
          width: 25%;
          font-size: 20px;
          margin-top: 0;
          text-align: left; }
          .realms .realm .left-side .realm_top .type .rate {
            width: 35px;
            height: 35px;
            line-height: 35px;
            font-size: 15px; }
    .realms .realm .realm_bottom {
      width: 100%;
      height: initial;
      text-align: center;
      margin-top: 35px;
      margin-bottom: 30px; }
      .realms .realm .realm_bottom img {
        display: none; }
      .realms .realm .realm_bottom .expansion {
        font-size: 15px; }
    .realms .realm .left-side + .left-side {
      border-top: 1px solid rgba(255, 255, 255, 0.3); }
  .realms .clearfix {
    margin-bottom: 18px; } }