html {
    height:100%;
    margin:0;
  }
  
  body {
    display: flex; 	
    flex-direction: column;
    height: 100%;
    background-color: #018458;
    background-image:url(../img/back12.jpg);
    background-size:100%;
    background-position:top center;
    background-repeat:no-repeat;
    color:#018458;
    line-height:1.5;
    font-size:11pt;
    font-family:'Roboto',sans-serif;
    font-weight:400;
    padding:0;
    margin:0;
  }
  
  img {
    display:block;
  }
  
  a {
    color:#efdf77;
    text-decoration:none;
  }
  
  a:hover {
    color:#f2f2f2;
  }
  
  a:active {
    color:#000000;
  }
  
  a:visited {
    color:#018458;
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin:0;
    color:#018458;
    line-height:1.25;
    font-family:'Roboto',sans-serif;
    margin-bottom:1%;
  }
  
  h2 {}
  
  h1 {
    font-size:32pt;
  }
  
  h2 {
    font-size:27pt;
  }
  
  h3 {
    font-size:22pt;
  }
  
  h4 {
    font-size:17pt;
  }
  
  h5 {
    font-size:12pt;
  }
  
  h6 {
    font-size:11pt;
  }
  
  br {
    content:" ";
    display:block;
    margin:10px 0;
    line-height:22px;
  }
  
  p {
    margin:0;
    padding:0;
  }
  
  ul,
  ol,
  li {
    list-style:none;
    margin:0;
    padding:0;
  }
  
  hr {
    margin:15px 0;
    border-color:#ddd;
  }
  
  * {
    box-sizing:border-box;
  }
  
  td {
    padding:5px 5px;
    line-height:1;
  }
  
  table {
    width:100%;
    text-align:center;
  }
  
  .flex {
    align-items:center;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
  }
  
  .header {
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
  }
  
  .header-bottom {
    background:#121518;
    width:100%;
  }
  
  .header-top {
    padding:15px 15px;
    width:100%;
  }
  
  .header-top-right {
    width:70%;
  }
  
  .logo {
    width:25%;
  }
  
  .logo img {
    width:100%;
  }
  
  .head-right {
    width:65%;
  }
  
  .wrapper {
    width:1100px;
    margin:0 auto;
  }
  
  .header,
  .slider-body {
    margin-bottom:30px;
    box-shadow:#000 0 0 15px;
  }
  
  .scrolltext {
    color:#fff;
    font-size:16px;
    line-height:1;
    border-bottom-right-radius:10px;
    border-bottom-left-radius:10px;
    overflow:hidden;
    background:#000;
  }
  
  marquee {
    width:100%;
  }
  
  .top-button {
    width:27%;
    text-align:center;
    padding:0.5%;
    font-size:16pt;
    margin:0;
  }
  
  .top-button a {
    cursor:pointer;
    border-radius:5px;
    padding:10px;
    margin:0;
    width:48%;
  }
  
  .top-button a:hover {
    background:#2c2c2c;
    box-shadow:#000 0 0 5px inset;
    color:#018458;
  }
  
  .content {
    margin-top:20px;
    padding:25px 30px;
    border-radius:15px;
  }
  
  .footer {
    margin:0 auto 10px;
    border-radius:5px;
    text-align:center;
    padding:10px 0;
    width:1100px;
    max-width:100%;
  }
  
  .form-item {
    margin:0;
    font-size:16px;
    text-transform:uppercase;
    padding:0;
    border:none;
    line-height:2;
    vertical-align:middle;
    text-align:center;
  }
  
  div#CaptchaDiv {
    border-radius:5px;
    overflow:hidden;
    color:#1c1c1c;
  }
  
  #txtCode,
  #CaptchaDiv {
    background:#ddd;
    border-radius:5px;
    margin-left:4%;
    width:40%;
    text-align:center;
    color:#000000;
  }
  
  .username,
  .password {
    width:30%;
    background:#cfcfcf;
    color:#4e4e4e;
    box-shadow:#fff 0 0 10px inset;
  }
  
  .username,
  .password,
  .login,
  .daftar {
    border-radius:5px;
    margin-left:1%;
  }
  
  .login,
  .daftar {
    width:15%;
    color:#fff;
    cursor:pointer;
    font-size:12pt;
    font-weight:700;
  }
  
  .daftar:hover,
  .login:hover {
    background:#222 !important;
    box-shadow:#02573a 0 0 10px inset,#018458 0 0 10px;
    color:#018458;
    cursor:pointer;
  }
  
  i.fas.fa-user,
  i.fas.fa-lock,
  i.fas.fa-key {
    margin-left:15px;
  }
  
  textarea:focus,
  input:focus {
    outline:none;
  }
  
  .button,
  input[type=password],
  input[type=text] {
    padding:0;
    display:block;
    border:none;
    font-size:inherit;
    line-height:inherit;
    flex:1;
  }
  
  input[type=password],
  input[type=text] {
    width:100px;
    background:none;
    text-align:left;
    color:#4e4e4e;
  }
  
  ::placeholder {
    /* Chrome,Firefox,Opera,Safari 10.1+ */
  
    color:#4e4e4e;
  }
  
  form.flex.form {
    flex-wrap:nowrap;
    width:100%;
    margin-left:auto;
  }
  
  .button {
    text-transform:uppercase;
    background:none;
    color:inherit;
    font-weight:bold;
  }
  
  .fas {
    margin-right:5px;
  }
  
  /*color*/
  
  .color {
    background:#b7b7b7;
    background:-moz-linear-gradient(top,#b7b7b7 0%,#ffffff 50%,#b7b7b7 100%);
    background:-webkit-linear-gradient(top,#b7b7b7 0%,#ffffff 50%,#b7b7b7 100%);
    background:linear-gradient(to bottom,#b7b7b7 0%,#ffffff 50%,#b7b7b7 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7b7b7',endColorstr='#b7b7b7',GradientType=0 );
    box-shadow:#ffffff 0 0 10px inset;
    color:#02573a;
  }
  
  .color a {
    color:#02573a;
  }
  
  .color-2 {
    background:#02573a;
    background:-moz-linear-gradient(top,#02573a 0%,#003825 30%,#02573a 100%);
    background:-webkit-linear-gradient(top,#02573a 0%,#003825 30%,#02573a 100%);
    background:linear-gradient(to bottom,#02573a 0%,#003825 0%,#02573a 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#02573a',endColorstr='#02573a',GradientType=0 );
  }
  
  .color-2 {
    color:#fff;
  }
  
  .color-3,
  .navbar a:hover {
    color:#fff;
    background:#018458;
    background:-moz-linear-gradient(top,#018458 0%,#018458 50%,#018458 100%);
    background:-webkit-linear-gradient(top,#018458 0%,#018458 50%,#018458 100%);
    background:linear-gradient(to bottom,#018458 0%,#018458 50%,#018458 100%);
    filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#018458',endColorstr='#018458',GradientType=0 );
    box-shadow:#018458 0 0 5px inset;
  }
  
  /*colour*/
  
  .nav-block {
    width:100%;
  }
  
  .nav {
    border:none;
  }
  
  .navbar a {
    font-size:20px;
    color: #02573a;;
    text-align:center;
    text-transform:uppercase;
    text-decoration:none;
    transition:0.3s;
    padding:10px 16px;
    flex-grow:1;
    font-weight:700;
  }
  
  .toggle,
  label.lbl-toggle {
    display:none;
  }
  
  .games-block a {
    width:25%;
  }
  
  .games-block a img {
    width:100%;
  }
  
  .slider-body {
    border-radius:15px;
    overflow:hidden;
    border:5px solid #cb0000;
  }
  
  .bottom {
    border-radius:10px;
    overflow:hidden;
    flex:1;
    text-align:center;
    margin-left:1%;
    position:relative;
    display:flex;
  }
  
  .bottom-block {
    margin-top:15px;
    align-items:inherit;
  }
  
  .bottom img {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:0;
  }
  
  .bottom:first-child {
    text-align:left;
    margin:0;
  }
  
  .bottom h3 {
    background:#1c1c1c;
    margin-top:auto;
    margin-bottom:0;
    width:100%;
    color:#efd359;
    padding:10px 0;
    font-size:18pt;
    text-transform:uppercase;
    z-index:1;
    box-shadow:#000 0 0 15px 5px;
  }
  
  /* Smartphones (portrait & landscape) ----------- */
  
  @media only screen and (max-device-width:823px) and (min-device-width:320px) {
    .menuMobile{
      height: 295px!important;
    }

    .menuMB{
      display: block!important;
    }
    .header-top-right {
      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:100%;
      margin:65px auto 10px;
    }
    .wrapper {
      width:90%;
    }
    .nav a {
      flex:none;
      font-size:17pt;
      width:100%;
      padding:10px 0;
      border-right:none;
      border-bottom:1px solid #565656;
      color:#ffffff;
    }
    .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%;
    }
    .username,
    .password {
      width:100%;
    }
    .login,
    .daftar,
    .username,
    .password {
      border-radius:5px;
    }
    /*responsive nav*/.toggle,
    label.lbl-toggle {
      position:relative;
      display:block;
      width:100%;
    }
    input[type='checkbox'] {
      display:none;
    }
    .wrap-collabsible {
      margin:0;
      position:fixed;
      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:25px;
      color:#000;
      text-transform:uppercase;
      text-align:left;
      padding:5px 10px;
      margin-bottom:20px;
      cursor:pointer;
      transition:all 0.25s ease-out;
    }
    .lbl-toggle::before {
      bottom:auto;
      top:auto;
      margin-top:0;
      margin-right:10px;
      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::before {
      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:#02573af5;
      padding:10px 20px;
    }
    .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;
      /* margin-top:100px;
      */;
    }
    input#CaptchaInput {
      margin:0;
    }
    .form-item.captcha.flex {
      width:100%;
    }
    marquee,
    .top-button {
      width:93%;
      margin:0 auto;
    }
    marquee {
      order:2;
      padding:10px 0;
    }
    .games-block a {
      width:50%;
    }
    .header-top {
      padding:0 15px 5px;
    }
    .form-item {
      margin:5px 0;
    }
    #CaptchaInput,
    #CaptchaDiv {
      width:48%;
    }
    .nav a:last-child {
      border:none;
    }
  }