body {
    background-color: #222;
    color: #FFF;
    font-family: 'Open Sans', sans-serif;
    margin-bottom: 80px;
}

a {
    color: #FFF;
    font-weight: 600;
}

a:hover {
    color: #FEF;
    text-decoration: none;
}

h1 {
    text-align: center;
}

h1 img.logo {
    max-width: 150px;
}

section {
    padding: 20px;
    margin: 0;
    text-align: left;
}

ul {
    padding: 0;
}

ul li {
    list-style: none;
    margin-bottom: 10px;
}

footer {
    text-align: right;
    padding: 15px 0 0;
}

footer .details {
    font-size: 0.7rem;
}

.grecaptcha-badge {
    visibility: hidden;
}

.nav-item {
    margin: 0
}

/* override bootstrap style mobile */
@media (max-width: 991px) {
    .nav-link {
        padding-right: 0;
        padding-left: 0;
    }
}

/*****************************************************
  Home page
 *****************************************************/

body.home-page {
    background: #111 url('/static/img/background.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.home-page article {
    margin: 0 0 50px 0;
}

.home-page h1 img.logo {
    max-width: 300px;
}

.home-page article p {
    font-size: 1.2rem;
}


.btn-facebook {
    background-color: #4267b2;
    color: #EEE;
}

.btn-facebook:hover, .btn-facebook:active {
    background-color: #2850a4;
}

.btn-google {
    background-color: #FFF;
    color: #d93b3b !important;
    border: 1px solid #FEE;
}

.btn-google:hover, .btn-google:active {
    background-color: #FEE;
    border: 1px solid #FEE;
}

.login-box {
    width: 100%;
    text-align: center;
}

.login-box .spacer {
    margin: 10px 0 10px;
    font-size: 0.8em;
}

/*****************************************************
  Docs page
 *****************************************************/

.docs-page section, .modal section {
    padding: 0;
}

.docs-page article, .modal article {
    font-size: 1rem;
    border-radius: 10px;
    padding: 20px 0;
}

.docs-page .card, .modal .card {
    margin: 0;
}

.docs-page h3, .modal h3 {
    background-color: #e34a44;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 20px;
}

.docs-page h4, .modal h4 {
    background-color: #e34a44;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 10px;
}

.hand-ranking ul li {
    background-color: #333;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
}

.game-screenshot {
    text-align: center;
    margin-bottom: 20px;
}

.game-screenshot img {
    border: 6px solid #e34a44;
    border-radius: 30px;
    max-width: 100%;
}


/*****************************************************
  Room
 *****************************************************/

.room {
    border: 1px solid transparent;
    position: relative;
    margin: 30px auto 30px;
    width: 870px;
}

.game-table {
    width: 510px;
    height: 325px;
    border-radius: 200px;
    padding: 10px 5px 10px 5px;
    box-shadow: 0 0 50px 30px #111;
    margin: 100px auto 70px;
    background: rgb(37,90,52);
    background: radial-gradient(circle, rgba(8,166,53,1) 9%, rgba(19,108,39,1) 65%, rgba(17,70,29,1) 91%);
}

.game-table.disconnected {
    background: rgb(37,90,52);
    background: radial-gradient(circle, rgb(8 166 151), rgb(19 67 108) 65%, rgb(17 31 70) 91%);
}


.room-config .form-range {
    display: block;
    width: 100%;
}

.room-config .row {
    margin-bottom: 20px;
}

.room-config .label {
    text-align: right;
    font-size: .9rem;
}

/*****************************************************
  Seats
 *****************************************************/


.seat {
    position: absolute;
    width: 260px;
    height: 120px;
    text-align: center;
}

.seat .bet {
    position: absolute;
    font-size: 0.8rem;
    clear: both;
    z-index: 99;
    background-image: url('/static/img/chip-100.png?v=0.3');
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-position: top center;
    padding-top: 15px;
}

.seat.dealer .player {
    border: 3px solid #fde8c7;
}

.inactive .player, .inactive .cards {
    opacity: 40%;
}

.seat.acting .player {
    box-shadow: 0 0 40px 20px #0ef;
}

.seat.winner .player {
    box-shadow: 0 0 30px 40px #FFEB3B;
}

.seat .player {
    font-size: 0.9rem;
    border-radius: 3px 3px 30px 30px;
    background-color: #44A;
    width: 175px;
    height: 80px;
    text-align: center;
    overflow: hidden;
    padding: 0;
    margin: 0 auto;
}

.seat img.profile-picture {
    float: left;
    width: 50px;
    height: 50px;
}

.seat .clock {
    position: absolute;
    top: -10px;
    right: 28px;
    background-color: #282827;
    padding: 0 3px;
    border-radius: 15px;
    z-index: 99;
}

.seat .player p {
    padding: 0 0 0 5px;
    margin: 0;
}

.seat .player .stack {
    font-size: 0.8rem;
}

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

.seat .card.medium {
    box-shadow: -4px 1px 4px 0 #333;
    margin-left: -5px;
    margin-right: -5px;
}

.seat .score, .me .score {
    background-color: #061639;
    opacity: 90%;
    padding: 5px;
    width: 240px;
    display: block;
    margin: -5px auto;
    border-radius: 40px;
    font-size: 9pt;
}

.score p {
    margin: 0;
}

.seat-1 {
    top: 430px;
    left: 0;
    width: 100%;
}

.seat-1 .player {
    margin: auto;
}

.seat-1 .player .clock {
    right: 310px;
}

.seat-3 {
    left: 60px;
    top: 10px;
}

.seat-4 {
    right: 60px;
    top: 10px;
}

.seat-2 {
    left: 0;
    top: 280px;
}

.seat-5 {
    right: 0;
    top: 280px;
}

.seat-3 .cards.size-9 { margin: 0 60px 0 -60px; }
.seat-3 .cards.size-8 { margin: 0 45px 0 -45px; }
.seat-3 .cards.size-7 { margin: 0 30px 0 -30px; }
.seat-3 .cards.size-6 { margin: 0 15px 0 -15px; }

.seat-4 .cards.size-9 { margin: 0 -60px 0 60px; }
.seat-4 .cards.size-8 { margin: 0 -45px 0 45px; }
.seat-4 .cards.size-7 { margin: 0 -30px 0 30px; }
.seat-4 .cards.size-6 { margin: 0 -15px 0 15px; }

/*****************************************************
  Bets
 *****************************************************/

.seat-1 .bet {
    top: -40px;
    left: 48%;
}

.seat-3 .bet {
    top: 110px;
    left: 220px;
}

.seat-4 .bet {
    top: 110px;
    right: 220px;
}

.seat-2 .bet {
    top: 20px;
    right: -20px;
}

.seat-5 .bet {
    top: 20px;
    left: -30px;
}

/*****************************************************
  Board
 *****************************************************/

.board {
    text-align: center;
}

.board .pot-wrapper {
    height: 60px;
    text-align: center;
}

.board .pot-wrapper .pot {
    background-image: url('/static/img/chips-50.png?v=0.3');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 30px;
    display: inline-block;
    padding-left: 35px;
    height: 50px;
}

.board .pot-wrapper .pot p {
    display: inline-block;
    padding: 0;
    line-height: 45px;
}

.board .pot-wrapper .pot p:not(:first-child) {
    margin-left: 10px;
}

.board .pot-wrapper .pot .win {
    text-shadow: 0 0 20px #FFEB3B, 0 0 20px #FFEB3B, 0 10px 20px #FFEB3B;
    display: inline-block;
}

.board .cards-wrapper {
    position: relative;
    width: 240px;
    height: 210px;
    margin: 0 auto;
}

.board .cards-wrapper .cell {
    position: absolute;
}

.board .cards-wrapper .cell.row-1 { top: 0; }
.board .cards-wrapper .cell.row-2 { top: 70px; }
.board .cards-wrapper .cell.row-3 { top: 140px; }
.board .cards-wrapper .cell.cell-1 { left: 0; }
.board .cards-wrapper .cell.cell-2 { left: 50px; }
.board .cards-wrapper .cell.cell-3 { left: 100px; }
.board .cards-wrapper .cell.cell-4 { left: 150px; }
.board .cards-wrapper .cell.cell-5 { left: 200px; }

.board.elevators .cards-wrapper .cell.cell-2 { left: 40px; }
.board.elevators .cards-wrapper .cell.cell-3 .card { transform: rotate(-90deg); }
.board.elevators .cards-wrapper .cell.cell-4 { left: 160px; }

.board .cards-wrapper .card {
    margin: 0;
}

/*****************************************************
  Cards
 *****************************************************/

.card-wrapper {
    display: inline-block;
    position: relative;
}

.card-wrapper .card.card-2 {
    position: absolute;
    top: 10px;
    left: 0;
    z-index: 2;
}

.card-wrapper .card.card-3 {
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 3;
}

.card-wrapper .card.card-4 {
    position: absolute;
    top: 30px;
    left: 0;
    z-index: 4;
}

.card {
    background-image: url('/static/img/cards/card-back.png?v=0.3');
    background-size: 100% 100%;
    background-color: #FFE;
    border: 1px solid #999;
    display: inline-block;
    margin-top: 10px;
}

.card.large {
    box-shadow: -4px 0 15px 0 #111;
    border-radius: 18px;
    width: 180px;
    height: 265px;
    margin: 0 -60px;
}

.card.large.contracted {
    margin-right: -112px;
}

.card.large.expanding {
    margin-right: -60px;
    transition: margin-right 2000ms ease-in;
}

.card.large.expanded {
    margin-right: -60px;
}

.card.medium {
    border-radius: 5px;
    width: 38px;
    height: 56px;
}

/******************************** LARGE CARDS **********************************/

.card.large.ace.hearts      { background-image: url('/static/img/cards/standard/AH.svg?v=0.3'); }
.card.large.ace.diamonds    { background-image: url('/static/img/cards/standard/AD.svg?v=0.3'); }
.card.large.ace.clubs       { background-image: url('/static/img/cards/standard/AC.svg?v=0.3'); }
.card.large.ace.spades      { background-image: url('/static/img/cards/standard/AS.svg?v=0.3'); }

.card.large.king.hearts     { background-image: url('/static/img/cards/standard/KH.svg?v=0.3'); }
.card.large.king.diamonds   { background-image: url('/static/img/cards/standard/KD.svg?v=0.3'); }
.card.large.king.clubs      { background-image: url('/static/img/cards/standard/KC.svg?v=0.3'); }
.card.large.king.spades     { background-image: url('/static/img/cards/standard/KS.svg?v=0.3'); }

.card.large.queen.hearts    { background-image: url('/static/img/cards/standard/QH.svg?v=0.3'); }
.card.large.queen.diamonds  { background-image: url('/static/img/cards/standard/QD.svg?v=0.3'); }
.card.large.queen.clubs     { background-image: url('/static/img/cards/standard/QC.svg?v=0.3'); }
.card.large.queen.spades    { background-image: url('/static/img/cards/standard/QS.svg?v=0.3'); }

.card.large.jack.hearts     { background-image: url('/static/img/cards/standard/JH.svg?v=0.3'); }
.card.large.jack.diamonds   { background-image: url('/static/img/cards/standard/JD.svg?v=0.3'); }
.card.large.jack.clubs      { background-image: url('/static/img/cards/standard/JC.svg?v=0.3'); }
.card.large.jack.spades     { background-image: url('/static/img/cards/standard/JS.svg?v=0.3'); }

.card.large.ten.hearts      { background-image: url('/static/img/cards/standard/10H.svg?v=0.3'); }
.card.large.ten.diamonds    { background-image: url('/static/img/cards/standard/10D.svg?v=0.3'); }
.card.large.ten.clubs       { background-image: url('/static/img/cards/standard/10C.svg?v=0.3'); }
.card.large.ten.spades      { background-image: url('/static/img/cards/standard/10S.svg?v=0.3'); }

.card.large.nine.hearts     { background-image: url('/static/img/cards/standard/9H.svg?v=0.3'); }
.card.large.nine.diamonds   { background-image: url('/static/img/cards/standard/9D.svg?v=0.3'); }
.card.large.nine.clubs      { background-image: url('/static/img/cards/standard/9C.svg?v=0.3'); }
.card.large.nine.spades     { background-image: url('/static/img/cards/standard/9S.svg?v=0.3'); }

.card.large.eight.hearts    { background-image: url('/static/img/cards/standard/8H.svg?v=0.3'); }
.card.large.eight.diamonds  { background-image: url('/static/img/cards/standard/8D.svg?v=0.3'); }
.card.large.eight.clubs     { background-image: url('/static/img/cards/standard/8C.svg?v=0.3'); }
.card.large.eight.spades    { background-image: url('/static/img/cards/standard/8S.svg?v=0.3'); }

.card.large.seven.hearts    { background-image: url('/static/img/cards/standard/7H.svg?v=0.3'); }
.card.large.seven.diamonds  { background-image: url('/static/img/cards/standard/7D.svg?v=0.3'); }
.card.large.seven.clubs     { background-image: url('/static/img/cards/standard/7C.svg?v=0.3'); }
.card.large.seven.spades    { background-image: url('/static/img/cards/standard/7S.svg?v=0.3'); }

.card.large.six.hearts      { background-image: url('/static/img/cards/standard/6H.svg?v=0.3'); }
.card.large.six.diamonds    { background-image: url('/static/img/cards/standard/6D.svg?v=0.3'); }
.card.large.six.clubs       { background-image: url('/static/img/cards/standard/6C.svg?v=0.3'); }
.card.large.six.spades      { background-image: url('/static/img/cards/standard/6S.svg?v=0.3'); }

.card.large.five.hearts     { background-image: url('/static/img/cards/standard/5H.svg?v=0.3'); }
.card.large.five.diamonds   { background-image: url('/static/img/cards/standard/5D.svg?v=0.3'); }
.card.large.five.clubs      { background-image: url('/static/img/cards/standard/5C.svg?v=0.3'); }
.card.large.five.spades     { background-image: url('/static/img/cards/standard/5S.svg?v=0.3'); }

.card.large.four.hearts     { background-image: url('/static/img/cards/standard/4H.svg?v=0.3'); }
.card.large.four.diamonds   { background-image: url('/static/img/cards/standard/4D.svg?v=0.3'); }
.card.large.four.clubs      { background-image: url('/static/img/cards/standard/4C.svg?v=0.3'); }
.card.large.four.spades     { background-image: url('/static/img/cards/standard/4S.svg?v=0.3'); }

.card.large.three.hearts    { background-image: url('/static/img/cards/standard/3H.svg?v=0.3'); }
.card.large.three.diamonds  { background-image: url('/static/img/cards/standard/3D.svg?v=0.3'); }
.card.large.three.clubs     { background-image: url('/static/img/cards/standard/3C.svg?v=0.3'); }
.card.large.three.spades    { background-image: url('/static/img/cards/standard/3S.svg?v=0.3'); }

.card.large.two.hearts      { background-image: url('/static/img/cards/standard/2H.svg?v=0.3'); }
.card.large.two.diamonds    { background-image: url('/static/img/cards/standard/2D.svg?v=0.3'); }
.card.large.two.clubs       { background-image: url('/static/img/cards/standard/2C.svg?v=0.3'); }
.card.large.two.spades      { background-image: url('/static/img/cards/standard/2S.svg?v=0.3'); }

/******************************** SMALL CARDS **********************************/

.card.medium.ace.hearts     { background-image: url('/static/img/cards/minimal/AH.svg?v=0.3'); }
.card.medium.ace.diamonds   { background-image: url('/static/img/cards/minimal/AD.svg?v=0.3'); }
.card.medium.ace.clubs      { background-image: url('/static/img/cards/minimal/AC.svg?v=0.3'); }
.card.medium.ace.spades     { background-image: url('/static/img/cards/minimal/AS.svg?v=0.3'); }

.card.medium.king.hearts    { background-image: url('/static/img/cards/minimal/KH.svg?v=0.3'); }
.card.medium.king.diamonds  { background-image: url('/static/img/cards/minimal/KD.svg?v=0.3'); }
.card.medium.king.clubs     { background-image: url('/static/img/cards/minimal/KC.svg?v=0.3'); }
.card.medium.king.spades    { background-image: url('/static/img/cards/minimal/KS.svg?v=0.3'); }

.card.medium.queen.hearts   { background-image: url('/static/img/cards/minimal/QH.svg?v=0.3'); }
.card.medium.queen.diamonds { background-image: url('/static/img/cards/minimal/QD.svg?v=0.3'); }
.card.medium.queen.clubs    { background-image: url('/static/img/cards/minimal/QC.svg?v=0.3'); }
.card.medium.queen.spades   { background-image: url('/static/img/cards/minimal/QS.svg?v=0.3'); }

.card.medium.jack.hearts    { background-image: url('/static/img/cards/minimal/JH.svg?v=0.3'); }
.card.medium.jack.diamonds  { background-image: url('/static/img/cards/minimal/JD.svg?v=0.3'); }
.card.medium.jack.clubs     { background-image: url('/static/img/cards/minimal/JC.svg?v=0.3'); }
.card.medium.jack.spades    { background-image: url('/static/img/cards/minimal/JS.svg?v=0.3'); }

.card.medium.ten.hearts     { background-image: url('/static/img/cards/minimal/10H.svg?v=0.3'); }
.card.medium.ten.diamonds   { background-image: url('/static/img/cards/minimal/10D.svg?v=0.3'); }
.card.medium.ten.clubs      { background-image: url('/static/img/cards/minimal/10C.svg?v=0.3'); }
.card.medium.ten.spades     { background-image: url('/static/img/cards/minimal/10S.svg?v=0.3'); }

.card.medium.nine.hearts    { background-image: url('/static/img/cards/minimal/9H.svg?v=0.3'); }
.card.medium.nine.diamonds  { background-image: url('/static/img/cards/minimal/9D.svg?v=0.3'); }
.card.medium.nine.clubs     { background-image: url('/static/img/cards/minimal/9C.svg?v=0.3'); }
.card.medium.nine.spades    { background-image: url('/static/img/cards/minimal/9S.svg?v=0.3'); }

.card.medium.eight.hearts   { background-image: url('/static/img/cards/minimal/8H.svg?v=0.3'); }
.card.medium.eight.diamonds { background-image: url('/static/img/cards/minimal/8D.svg?v=0.3'); }
.card.medium.eight.clubs    { background-image: url('/static/img/cards/minimal/8C.svg?v=0.3'); }
.card.medium.eight.spades   { background-image: url('/static/img/cards/minimal/8S.svg?v=0.3'); }

.card.medium.seven.hearts   { background-image: url('/static/img/cards/minimal/7H.svg?v=0.3'); }
.card.medium.seven.diamonds { background-image: url('/static/img/cards/minimal/7D.svg?v=0.3'); }
.card.medium.seven.clubs    { background-image: url('/static/img/cards/minimal/7C.svg?v=0.3'); }
.card.medium.seven.spades   { background-image: url('/static/img/cards/minimal/7S.svg?v=0.3'); }

.card.medium.six.hearts     { background-image: url('/static/img/cards/minimal/6H.svg?v=0.3'); }
.card.medium.six.diamonds   { background-image: url('/static/img/cards/minimal/6D.svg?v=0.3'); }
.card.medium.six.clubs      { background-image: url('/static/img/cards/minimal/6C.svg?v=0.3'); }
.card.medium.six.spades     { background-image: url('/static/img/cards/minimal/6S.svg?v=0.3'); }

.card.medium.five.hearts    { background-image: url('/static/img/cards/minimal/5H.svg?v=0.3'); }
.card.medium.five.diamonds  { background-image: url('/static/img/cards/minimal/5D.svg?v=0.3'); }
.card.medium.five.clubs     { background-image: url('/static/img/cards/minimal/5C.svg?v=0.3'); }
.card.medium.five.spades    { background-image: url('/static/img/cards/minimal/5S.svg?v=0.3'); }

.card.medium.four.hearts    { background-image: url('/static/img/cards/minimal/4H.svg?v=0.3'); }
.card.medium.four.diamonds  { background-image: url('/static/img/cards/minimal/4D.svg?v=0.3'); }
.card.medium.four.clubs     { background-image: url('/static/img/cards/minimal/4C.svg?v=0.3'); }
.card.medium.four.spades    { background-image: url('/static/img/cards/minimal/4S.svg?v=0.3'); }

.card.medium.three.hearts   { background-image: url('/static/img/cards/minimal/3H.svg?v=0.3'); }
.card.medium.three.diamonds { background-image: url('/static/img/cards/minimal/3D.svg?v=0.3'); }
.card.medium.three.clubs    { background-image: url('/static/img/cards/minimal/3C.svg?v=0.3'); }
.card.medium.three.spades   { background-image: url('/static/img/cards/minimal/3S.svg?v=0.3'); }

.card.medium.two.hearts     { background-image: url('/static/img/cards/minimal/2H.svg?v=0.3'); }
.card.medium.two.diamonds   { background-image: url('/static/img/cards/minimal/2D.svg?v=0.3'); }
.card.medium.two.clubs      { background-image: url('/static/img/cards/minimal/2C.svg?v=0.3'); }
.card.medium.two.spades     { background-image: url('/static/img/cards/minimal/2S.svg?v=0.3'); }

.card.highlighted {
    box-shadow: 0 0 5px 5px #1dc1d4 !important;
}

.card.selected {
    top: -25px;
}

.card.selectable {
    box-shadow: 0 0 5px 5px #1dc1d4 !important;
    cursor: pointer;
}

.card.hidden {
    opacity: 0;
}

/*****************************************************
  Controls
 *****************************************************/

.controls {
    background-color: #424242;
    padding: 20px;
    border-radius: 20px;
    margin-bottom: 20px;
    margin-top: 10px;
    z-index: 9;
    position: relative;
}

.controls ul.game-heading {
    margin-top: -15px;
    font-size: 0.9rem;
    color: #AAA;
    list-style: none;
}

.controls ul.game-heading li {
    display: inline;
    margin-right: 10px;
    background-color: #363635;
    padding: 5px 10px;
}

.controls div .btn {
    margin: 2px;
}

.shareable-link {
    cursor: pointer;
    margin-bottom: 3px;
}

.raise-bar {
    padding-top: 15px;
    margin-top: 15px;
    border-top: 2px solid #555;
}

.raise-bar input[type=range] {
    width: 100%;
    margin: 12px;
    cursor: grabbing;
}

/*****************************************************
  Me
 *****************************************************/

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

.me .score {
    min-height: 40px;
    width: 375px;
    margin-top: -145px;
}

/*****************************************************
  Balloons & logs
 *****************************************************/

.balloon {
    position: relative;
    background: #deeced;
    border-radius: 1em;
    width: 180px;
    padding: 6px 0;
    color: #1b2845;
    z-index: 999;
    margin: -25px auto -5px auto;
    font-size: 8pt;
    box-shadow: 0 0 20px 2px #1b2845;
}

.balloon:after {
    content: '';
    position: absolute;
    top: 0;
    left: 15%;
    width: 0;
    height: 0;
    border: 11px solid transparent;
    border-bottom-color: #deeced;
    border-top: 0;
    margin-left: -11px;
    margin-top: -11px;
}

.logs {
    background-color: #444;
    color: #222;
    padding: 10px 5px 30px 5px;
    border-radius: 10px 10px 50px 50px;
}

.logs .card {
    margin: 0;
    box-shadow: none;
}

.logs .score {
    background: transparent;
}

.log {
    border-radius: 10px;
    padding: 5px;
    background-color: #333;
    color: #FFF;
    margin: 10px;
}

.log p {
    margin: 0;
}

.modal-content {
    background-color: #111;
}

.modal-header {
    background-color: #0A0A0A;
    border: 1px solid #333;
}

.app-logo {
    background-color: #FFF;
    box-shadow: 0 0 40px 40px #fff;
    border-radius: 120px;
}

.spinning {
    animation: spin-360 infinite 4s linear;
}

@keyframes spin-360 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}


/*****************************************************
  Poorman responsive layout
 *****************************************************/

@media (max-width: 399px) {
    .room { zoom: 30%; }
    .me .cards.size-9 { zoom: 50% }
    .me .cards.size-8 {zoom: 50%;}
    .me .cards.size-7 { zoom: 55% }
    .me .cards.size-6 { zoom: 60% }
    .me .cards.size-5 { zoom: 75% }
}
@media (min-width: 400px) {
    .room { zoom: 40%; }
    .me .cards.size-9 { zoom: 56% }
    .me .cards.size-8 { zoom: 63% }
    .me .cards.size-7 { zoom: 68% }
    .me .cards.size-6 { zoom: 73% }
    .me .cards.size-5 { zoom: 90% }
}
@media (min-width: 500px) {
    .room { zoom: 50%; }
    .me .cards.size-9 { zoom: 70% }
    .me .cards.size-8 { zoom: 78% }
    .me .cards.size-7 { zoom: 86% }
    .me .cards.size-6 { zoom: 90% }
    .me .cards.size-5 { zoom: 100% }
}
@media (min-width: 600px) {
    .room { zoom: 60%; }
    .me .cards.size-9 { zoom: 85% }
    .me .cards.size-8 { zoom: 90% }
    .me .cards.size-7 { zoom: 100% }
}
@media (min-width: 700px) {
    .room { zoom: 70%; }
    .me .cards.size-9 { zoom: 100% }
    .me .cards.size-8 { zoom: 100% }
}
@media (min-width: 800px) {
    .room { zoom: 80%; }
}
@media (min-width: 900px) {
    .room { zoom: 90%; }
}
@media (min-width: 1000px) {
    .room { zoom: 100%;}
}
@media (min-width: 1200px) {
    .room { zoom: 90%;}
}
@media (min-width: 1300px) {
    .room { zoom: 100%;}
}

/*****************************************************
  Breadcrumbs
 *****************************************************/

ul.breadcrumb {
    padding: 10px 16px;
    list-style: none;
    background-color: #1b1616;
    border-radius: 10px;
}
ul.breadcrumb li {
    display: inline;
    margin: 0;
}
ul.breadcrumb li+li:before {
    padding: 8px;
    content: "/\00a0";
}
ul.breadcrumb li a {
    text-decoration: none;
}

/*****************************************************
  Leaderboard
 *****************************************************/

.leaderboard-item {
    clear: both;
    margin: 20px 0;
}

.leaderboard-item .profile-picture {
    width: 50px;
    float: left;
    margin-right: 20px;
}

.leaderboard-item p {
    margin: 0;
}