@charset "UTF-8";

.bg{ background:url(../images/bg.jpg) repeat center center; }
.logo{ text-align:center; }
.logo img{ max-width:50%; }
.showpwd{ cursor:pointer; }

#loader{ position: fixed; top: 0; bottom: 0; left: 0; right:0; width: 100%; height: 100%; z-index: 800; background-color:rgba(255,255,255,0.8); display:none; }
#loader #hold{ display: block; position: fixed; left: 50%; top: 50%; width: 150px; height: 150px; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
#loader #hold #spin,
#loader #hold #spin:before,
#loader #hold #spin:after{ position: absolute;  border-radius: 50%; border: 3px solid transparent; }

#loader #hold #spin{  top: 0; left: 0; right: 0; bottom: 0; border-top-color: #7e8d8f; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; }
#loader #hold #spin:before{ content: ""; top: 5px; left: 5px; right: 5px; bottom: 5px; border-top-color: #1A8B9D; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite; }
#loader #hold #spin:after{ content: ""; top: 15px; left: 15px; right: 15px; bottom: 15px; border-top-color: #000; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite; }
@-webkit-keyframes spin{
  0%{ -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
  100%{ -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes spin{
  0%{ -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
}

#btop{ position: fixed; bottom: 40px; right: 10px; width: 40px; height: 40px; background-color: rgba(0,0,0,0.2); cursor: pointer; border-radius: 5px; z-index: 9999; -webkit-transition: all 1s linear; transition: all 0.5s linear; }
#btop.hide{ visibility: hidden; opacity: 0; }
#btop.active{ visibility: visible; opacity: 1; }
#btop.active:hover{ background-color: rgba(0,0,0,0.6); }
#btop i{ align-items: center; display: flex; flex-direction: column; justify-content: center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
#btop.active:hover i{ color:#FFF; }