html, body{
 
  font-family: "ERARIA_1";
  font-size: 15px;
}


ul {
  padding-left: 0;
  margin-bottom: 0; }

a {
  text-decoration: none; }

:focus {
  outline: none; }


label {
  margin-bottom: 11px;
  display: block; }
  
.modelt {
  height:900px ;
  /*#background-image: url('Rectangle.png');*/
  background-color: #F2F5F6 ; 
  background-repeat: no-repeat;
}

.image-logo{
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.image-login{
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
}
    
.button {
  position: relative;
  background-color: #0066c8;
  border: none;
  font-size: 20px;
  color: #FFFFFF;
  padding: 5px;
  width: 100%;
  text-align: center;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
}

.button:after {
  content: "";
  background: #90EE90;
  display: block;
  position: absolute;
  padding-top: 350%;
  padding-left: 350%;
  margin-left: -20px!important;
  margin-top: -120%;
  opacity: 0;
  transition: all 0.8s
}

.button:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

.teks{
    padding-top:250px;
    text-align:center;
}

.login { 
    position: absolute;
    top: 550px;
    left: 50%;
    transform: translate(-50%, -50%);
	width:380px;
}


/*# sourceMappingURL=style.css.map */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .modelt {
      /*#background-image: url('Rectangle.png');*/
      background-color: #F2F5F6 ; 
      height:200px;
    }

     .image-logo{
         width:50%;
    }
    
    .image-login{
        width:50%;
    }
    
    .teks{
    padding-top:50px;
    text-align:center;
    }
    
    .login { 
    position: absolute;
    top: 180px;
    left: 50%;
    transform: translate(-50%, -50%);
	width:380px;
    }
} 

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
     .modelt {
      /*#background-image: url('Rectangle.png');*/
      background-color: #F2F5F6 ; 
      height:500px;
    }

    .image-logo{
         width:70%;
    }
    
    .image-login{
        width:70%;
    }
    
    .teks{
    padding-top:50px;
    text-align:center;
    }
    
    .login { 
    position: absolute;
    top: 180px;
    left: 50%;
    transform: translate(-50%, -50%);
	width:380px;
    }
} 

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
     .modelt {
      /*#background-image: url('Rectangle.png');*/
      background-color: #F2F5F6 ; 
      height:500px;
    }

     .image-logo{
         width:70%;
    }
    
    .image-login{
        width:70%;
    }
    
    .teks{
    padding-top:80px;
    text-align:center;
    }
    
} 

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .modelt {
      height:900px ;
      /*#background-image: url('Rectangle.png');*/
      background-color: #F2F5F6 ; 
      background-repeat: no-repeat;
    }
    
    .image-logo{
      position: absolute;
      top: 25%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    .image-login{
      position: absolute;
      top: 65%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    .teks{
    padding-top:250px;
    text-align:center;
    }
    
} 

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .modelt {
  height:900px ;
  /*#background-image: url('Rectangle.png');*/
  background-color: #F2F5F6 ; 
  background-repeat: no-repeat;
}

.image-logo{
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.image-login{
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
}
}