html{
  height: 100%;
}
body {
  min-height: 100%;
}

@font-face {
  font-family: 'proxima_bold';
  src: url("../fonts/proximanova/proxima_bold.otf");
}
@font-face {
  font-family: 'proxima_black';
  src: url("../fonts/proximanova/proxima_black.otf");
}
@font-face {
  font-family: 'proxima_condensed_bold';
  src: url("../fonts/proximanova/proxima_condensed_bold.otf");
}
@font-face {
  font-family: 'proxima_regular';
  src: url("../fonts/proximanova/proxima_regular.otf");
}

*{
  font-family: 'proxima_regular', sans-serif;
}
h1,h2,h3,h4,h5{
  font-family: 'proxima_bold', sans-serif;
}
p{
  font-size:1.5rem;
  color:#7a8a94;
}

/* LOADING DATA */
.sk-chase {
    width: 40px;
    height: 40px;
    position: relative;
    animation: sk-chase 2.5s infinite linear both;
  }
  
  .sk-chase-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0; 
    animation: sk-chase-dot 2.0s infinite ease-in-out both; 
  }
  
  .sk-chase-dot:before {
    content: '';
    display: block;
    width: 25%;
    height: 25%;
    background-color: #fff;
    border-radius: 100%;
    animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
  }
  
  .sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
  .sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
  .sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
  .sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
  .sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
  .sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
  .sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
  .sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
  .sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
  .sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
  .sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
  .sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
  
  @keyframes sk-chase {
    100% { transform: rotate(360deg); } 
  }
  
  @keyframes sk-chase-dot {
    80%, 100% { transform: rotate(360deg); } 
  }
  
  @keyframes sk-chase-dot-before {
    50% {
      transform: scale(0.4); 
    } 100%, 0% {
      transform: scale(1.0); 
    } 
  }
/* LOADING DATA */

/* PUBLIC CSS */
.loading{
  width:100%;
  height:100vh;
  visibility: hidden;
  opacity: 0;
  position:fixed;
  top:0px;
  background:rgba(0, 0, 0, 0.6);
  z-index:9999;
  display:flex!important;
  align-items:center;
  justify-content: center;
  transition: visibility 0.5s, opacity 0.5s linear;
}
.loading.active{
  visibility: visible;
  opacity: 1;
  display:flex!important;
  transition: visibility 0.5s, opacity 0.5s linear!important;
}

.login-1{
    margin-top:15px;
}

.rifqy{
  position:absolute;
  left:0;
  right:0;
  bottom:10px;
  margin-left: auto; 
  margin-right: auto; 
  width: 100%;
}

.login-page{
  height:100vh!important;
  display:flex!important;
  align-items:center;
  justify-content: center;
}
.login-box{
  margin:auto!important;
}

.log{
  width:100%;
  height: 100vh;
  background:url(../images/login.svg);
  background-size:cover;
  background-position: left;
  display:flex!important;
  align-items:center;
  justify-content: left;
  padding:50px;
}
.log-1 > *{
  color:#c7d2d8;
}
.log-1 > h5{
  font-family: 'proxima_bold', sans-serif;
  color:#C8FF00;
  letter-spacing: 1px;
}
.log-1 > h1{
  font-family: 'proxima_black', sans-serif;
  font-size:5rem;
  color:#fff;
}
.log-2{
  background:#C8FF00;
  border:0px;
  color:#000;
  font-family: 'proxima_black', sans-serif;
  padding:10px 35px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top:35px;
  transition: 0.2 all ease-in;
}
.log-2:hover,.log-2:focus,.log-2:active{
  background:#addd00;
  color:#000;
  transition: 0.2 all ease-out;
}
.log-3{
  padding:50px;
  display:flex!important;
  align-items:center;
  justify-content: left;
}
.log-4{
  height:50px;
  border:1px solid #0079fb5d;
  border-radius:3px;
  font-size:1.6rem;
  padding-left:15px;
  padding-right:15px;
}
.log-5{
  font-family: 'proxima_bold', sans-serif;
  font-size:2.5rem;
  margin-top:60px;
  margin-bottom:25px;
  color:#353f45;  
}
.log-6{
  width:100%;
  padding:10px 35px;
  background:#0078FB;
  color:#fff;
  font-family: 'proxima_bold', sans-serif;
  font-size:1.7rem;
  margin-top:10px;
}
.log-6:hover,.log-6:active,.log-6:focus{
  background:#0078FB;
  color:#fff;
}
.log-7{
  font-family: 'proxima_regular', sans-serif;
  font-size:1.3rem;
}
.log-8{
  position:absolute;
  bottom:5px;
  left:15px;
  color:#fff;
  font-size:1.2rem;
}

/* responsive */
@media screen and (max-width: 600px) {
  .login-box{
    margin: 7% auto!important;
  }
}