/* Smartphones (portrait & landscape) ----------- */
  
  @media only screen and (max-device-width:823px) and (min-device-width:320px) {
    .header-top-right,
    .promo img {
      width:100%;
    }
    .bottom:first-child {
      flex:auto;
      height:auto;
      width:100%;
      margin-bottom:15px;
    }
    .bottom {
      width:30%;
      margin:0;
      flex:none;
      display:block;
    }
    .bottom img {
      position:relative;
      width:100%;
      left:0;
      transform:inherit;
    }
    .logo {
      width:85%;
      margin-left:auto;
    }
    .wrapper {
      width:90%;
    }
    .nav a {
      flex:none;
      font-size:17pt;
      width:100%;
      padding:10px 0;
      border-right:none;
      border-bottom:1px solid #565656;
      color:#ff0000;
    }
    .navbar a {
      background-position:left;
      text-align:left;
      justify-content:flex-start;
      padding:10px 0 10px 40px;
    }
    .nav {
      height:auto;
      background:none;
      box-shadow:none;
    }
    form.flex.form {
      flex-wrap:wrap;
      width:100%;
    }
    .login,
    .daftar {
      width:48%;
    }
    .promo,
    .username,
    .password {
      width:100%;
    }
    .login,
    .daftar,
    .promo,
    .username,
    .password {
      border-radius:5px;
      margin:5px 0;
    }
    /*responsive nav*/.toggle,
    label.lbl-toggle {
      position:relative;
      display:block;
      width:0;
    }
    input[type='checkbox'] {
      display:none;
    }
    .wrap-collabsible {
      margin:0;
      position:absolute;
      z-index:99;
      top:0;
      left:0;
      right:0;
      margin-left:auto;
      margin-right:auto;
      height:0;
    }
    .lbl-toggle {
      display:block;
      font-weight:bold;
      font-size:18px;
      text-transform:uppercase;
      text-align:left;
      padding:15px 10px;
      margin-bottom:20px;
      cursor:pointer;
      transition:all 0.25s ease-out;
    }
    .lbl-toggle:hover {
      color:#ffffff;
    }
    .lbl-toggle::after {
      color:#ff0000;
      position:absolute;
      bottom:auto;
      top:auto;
      font-size:30pt;
      margin-top:0;
      margin-bottom:0;
      left:15px;
      content:"\f0c9";
      font-family:"Font Awesome 5 Free";
      transform:translateY(-2px);
      transition:transform .2s ease-out;
    }
    .toggle:checked+.lbl-toggle::after {
      content:"\f057";
      transform:rotate(90deg) translateX(-3px);
    }
    .collapsible-content {
      max-height:0;
      overflow:hidden;
      transition:max-height .25s ease-in-out;
      width:90%;
      margin:0 auto;
    }
    .toggle:checked + .lbl-toggle + .collapsible-content {
      width:90%;
      margin:0 auto;
      max-height:750px;
      box-shadow:#000 0 0 15px;
      border-radius:10px;
      border:1px solid #444444;
    }
    .collapsible-content .content-inner {
      background:#000000f5;
      padding:10px 20px;
    }
    .contact a {
      padding:10px 0 10px 85px;
      width:100%;
      flex:none;
      font-size:19pt;
    }
    .contact h4 {
      font-size:21pt;
    }
    .contact i {
      font-size:50pt;
    }
    .image-slide img {
      width:100%;
    }
    .labels {
      bottom:0;
    }
    .bottom h3 {
      width:100%;
      display:block;
      padding:5px 0;
      font-size:15pt;
    }
    .bottom a {
      width:100%;
      display:block;
    }
    .header {
      position:relative;
    }
    input#CaptchaInput {
      margin:0;
    }
    div#CaptchaDiv {
      margin-left:3%;
    }
    .form-item.captcha.flex {
      width:100%;
    }
    marquee,
    a.livechat {
      width:90%;
      margin:0 auto;
    }
    a.livechat {
      order:1;
    }
    marquee {
      order:2;
      padding:10px 0;
    }
  }