@font-face {
  font-family: mont;
  src: url(Montserrat-Regular.ttf);
}
@font-face {
  font-family: montBold;
  src: url(Montserrat-Bold.ttf);
}
@font-face {
  font-family: montItalic;
  src: url(Montserrat-Italic.ttf);
}

@keyframes slideInFromTop {
  0% {
    transform: translateY(-200px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

body{
  float:left;
  width:100%;
  height:100%;
  margin:0px;
  padding:0px;
  transition: all 0.5s;
  font-size: 12px;
}
header{
  position: absolute;
  width:100%;
  height:100%;
}

/* Message */
.msg_container{
  position: fixed;
  z-index: 100;
  height:auto;
  width:auto;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom : 0px;
  background-color: rgba(0,0,0,.5);
  transition: all 0.5s;
  z-index: 999;
}
.msg{
  position: fixed;
  z-index: 101;
  width: 300px;
  min-height: 200px;
  background-color: rgba(255,255,255,.95);
  border-radius: 10px;
  top: calc(50% - 100px);
  left: calc(50% - 150px);
  right: calc(50% - 150px);
  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
  transition: all 0.5s;
}
.msg_logo{
  float:left;
  width:100%;
  height:100px;
  text-align: center;
  font-size: 70px;
}
.msg_core{
  float:left;
  width:80%;
  height:auto;
  margin-left: 10%;
  margin-right: 10%;
  text-align: center;
}
.msg_btn{
  float:left;
  width:90%;
  height:auto;
  margin-left: 5%;
  margin-right: 5%;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 20px;
}

.msg_btn_ok{
  display:inline-block;
  margin-left: 2px;
  margin-right: 2px;
  background-color: #251D3A;
  color: white;
  font-family: mont;
  font-size: 14px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  border: solid 0px white;
  border-radius: 20px;
}

.msg_btn_batal{
  display:inline-block;
  margin-left: 2px;
  margin-right: 2px;
  background-color: gray;
  color: white;
  font-family: mont;
  font-size: 14px;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  border: solid 0px white;
  border-radius: 20px;
}

/* Transition */
.transition{
  position: fixed;
  background-color: white;
  transition: all 0.5s;
  z-index: 200;
}

.transition{
  position: fixed;
  opacity:1;
  visibility:visible;
  width:auto;
  height:auto;
  top:0px;
  bottom:0px;
  left:0px;
  right:0px;
  border-radius:0px;
  background-color: white;
  z-index: 1000;
}

.ulin_logo{
  position: absolute;
  width: 150px;
  height: 150px;
  left: calc(50% - 75px);
  right: calc(50% - 75px);
  transition: all 0.5s;
}
.loadingbar{
  position:absolute;
  width: 150px;
  height:5px;
  background-color: grey;
  left:calc(50% - 75px);
  right:calc(50% - 75px);
  transition: all 0.5s;
}
.loadingbar_progress{
  float:left;
  width: 0%;
  height:5px;
  background-color: white;
  transition: all 0.5s;
}
.credit{
  position: absolute;
  width:auto;
  height:auto;
  left: 20px;
  right: 20px;
  color: white;
  font-family: mont;
  font-size: 10px;
  text-align: center;
  transition: all 0.5s;
}
.login_form{
  position: fixed;
  width: auto;
  height: 200px;
  background-color: rgba(255,255,255,.9);
  border-radius: 10px;
  left: calc(50% - 125px);
  right: calc(50% - 125px);
  top:calc(50% - 20px);
  transition: all 0.5s;
}
.login_form_title{
  float:left;
  width:100%;
  height:auto;
  font-size: 20px;
  text-align: center;
  margin-top: 20px;
}
.login_form_core{
  float:left;
  height:auto;
  width:100%;
  text-align: center;
  margin-top: 5px;
}
.login_form_core_title{
  float:left;
  height:auto;
  width:100%;
}
.login_form_core input{
  display:inline-block;
  width:60%;
  height:auto;
  background-color: rgba(255,255,255,0);
  border: solid 0px white;
  border-bottom: solid 1px #251D3A;;
  font-family: mont;
  text-align: center;
  outline: none;
}
.login_form_submit{
  float:left;
  width: 100%;
  height:auto;
  text-align: center;
  margin-top: 10px;
}
.login_form_submit button{
  display:inline-block;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #251D3A;
  color:white;
  font-family: mont;
  border: solid 0px white;
  border-radius: 20px;
  transition: all 0.5s;
}

.login_form_submit button:hover{
  display:inline-block;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: orange;
  color:#251D3A;
  font-family: mont;
  border: solid 0px white;
  border-radius: 20px;
}

.login_attempt{
  position: fixed;
  width: auto;
  height: 200px;
  border-radius: 10px;
  left: calc(50% - 125px);
  right: calc(50% - 125px);
  top:calc(50% + 200px);
  transition: all 0.5s;
  color: white;
  text-align: center;
  transition: all 0.5s;
}

/* Wave */
.wave_box{
  position: fixed;
  top: 0;
  transform: rotate(80deg); 
  left: 20%;
  transition: all 0.5s;
}

@keyframes rotate {
  from {transform: rotate(0deg);}
  from {transform: rotate(360deg);}
}

.wave_core {
  position: absolute;
  opacity: .4;
  width: 1500px;
  height: 1300px;
  margin-left: -150px;
  margin-top: -250px;
  border-radius: 43%;
}

.wave_core.-one {
  animation: rotate 20000ms infinite linear;
  opacity: 2%;
  background: white;
}

.wave_core.-two {
  animation: rotate 12000ms infinite linear;
  opacity: 5%;
  background: white;
}

@media (orientation: portrait) {
  .wave_box{
    left: -20%;
  }
}