/* Smartphones (portrait & landscape) ----------- */

@media only screen and (max-device-width:823px) and (min-device-width:320px) {
  .logo img {
    width:85%;
  }
  .contact a {
    margin:2px 0;
    width:36%;
    flex:none;
    display:block;
  }
  .footer-left {
    margin-bottom:15px;
  }
  .game a {
    width:48% !important;
    margin-bottom:15px;
  }
  .game {
    align-items:stretch;
    margin-bottom:-15px;
  }
  .game a:last-child img {
    height:100%;
    object-fit:cover;
  }
  .logo,
  .login {
    width:100%;
  }
  input[type=text],
  input[type=password],
  .button,
  .captcha {
    flex:none;
  }
  .button {
    width:49%;
  }
  .login-input {
    width:49% !important;
    margin:0 0 5px !important;
  }
  .login {
    margin-bottom:10px;
  }
  /***navigation***/.nav-item,
  .mega {
    width:100%;
    position:relative;
  }
  .nav-item {
    flex:none;
    display:flex;
    align-items:center;
  }
  .navigation {
    position:absolute;
    top:0;
    right:0;
    width:100%;
    z-index:999;
  }
  .nav img {
    margin:0 15px 0 25px;
    width:12%;
  }
  a.nav-item {
    font-size:20px;
    border-bottom:1px solid #430000;
  }
  input[type='checkbox'] {
    display:none;
  }
  .lbl-toggle {
    position:absolute;
    right:0;
    top:20px;
    width:15%;
    display:block;
    text-align:center;
    color:#DDD;
    cursor:pointer;
    transition:all 0.25s ease-out;
    z-index:99999;
  }
  .lbl-toggle:hover {
    color:#FFF;
  }
  .lbl-toggle::before {
    font-family:'Font Awesome\ 5 Free';
    content:"\f0c9";
    font-size:2rem;
    font-weight:900;
    display:block;
    vertical-align:middle;
    transform:translateY(-2px);
    transition:transform .2s ease-out;
  }
  .toggle:checked+.lbl-toggle::before {
    font-family:'Font Awesome\ 5 Free';
    content:"\f00d";
    font-weight:900;
    transform:rotate(90deg) translateX(-3px);
  }
  .nav {
    max-height:0;
    overflow:hidden;
    transition:max-height .25s ease-in-out;
  }
  .toggle:checked + .lbl-toggle + .nav {
    max-height:1000px;
  }
  #div-marquee{
    width: 188px!important;
  }
  #txtUsername {
    margin-left: -15px !important;
  }
}

@media screen and (min-device-width: 481px) and (max-device-width: 768px) { 
  #div-marquee {
    width: 530px !important;
  }
  #txtUsername {
    margin-left: -28px !important;
  }
}