/* ---------------------------------------------------
    Error Validation
    ----------------------------------------------------- */
  .message {
      display: none;
      color: #000;
      position: relative;
      padding: 20px;
      margin-top: 5px;
  }

  .message label {
  	  margin:	5px;
      padding: 5px 35px;
      font-size: 1em;
  }

  label	
  {
  	display: hide;
  }

  .valid:before {
      position: relative;
      left: -35px;
      content: "✔";
  }

  .invalid:before {
      position: relative;
      left: -35px;
      content: "✖";
  }

  .loader
  {
    margin-left: auto; 
    margin-right: auto;
  }

  #login 
  {
    box-shadow: 0 0 0 0 black;
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
  }

  #pendaftaran 
  {
    box-shadow: 0 0 0 0 black;
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
  }

  #forget 
  {
    box-shadow: 0 0 0 0 black;
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
  }

  #login:hover
  {
    box-shadow: 0 31px 29px -29px black;
  }

  #pendaftaran:hover
  {
    box-shadow: 0 31px 29px -29px black;
  }

  #forget:hover
  {
    box-shadow: 0 31px 29px -29px black;
  }

.image-box {
  width: 100%;
  height: auto;
  margin: 25px auto 10px auto;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.image-box img {
  width: 100%;
  height: auto;
  transition: all 2s;
}

.box {
  position: relative;
  max-width: 100%;
  height: auto;
  margin: 25px auto;
  box-sizing: border-box;
  display: block;
}

/*--------------------------------- Media Queries --------------------------------------*/
@media (min-width:  1680px) {
}

@media (max-width: 1024px) {

}

@media (max-width: 768px) {
}

@media (max-width: 450px) {
}

@media (max-width: 400px) {
}

@media (max-width: 360px) {
}

@media (max-width: 350px) {
}