body { font-family:sans-serif; padding:0; margin:0; }

.btn { text-decoration:none; padding:9px 17px; border-radius:5px; text-shadow:1px 1px 0 #000; }

header { position:fixed; color:#fff; background:#000; background:linear-gradient(to bottom, #45484d 0%,#000 100%); padding:10px; height:40px; top:0; left:0; width:100%; z-index:9; }
#login { position:absolute; top:11px; right:30px; background:#139713; color:#fff;  }
h1 { margin:0; padding:0; }
nav { position: fixed; background: #c0c0c0; bottom:0; left:0; width:100%; height:66px; display: flex; }
nav a { flex-grow: 1; text-align: center; color:#000; text-decoration: none; }
nav a span { display: block; font-size:30px; margin:5px; }

#main { margin-top:60px; padding:15px; }
#content { max-width: 700px; margin:auto; margin-top:60px; padding:15px; }

.glogin { position:relative; border:2px solid #4285f4; color:#fff; display:block; text-decoration:none; border-radius:4px; }
.glogin:hover { box-shadow: 3px 2px 10px 0px rgba(0,0,0,0.75); }
.glogin svg { position: absolute; top:5px; left:5px; }
.glogin .gsl { background:#4285f4; display: block; padding:5px 0 5px 5px; margin-left:30px; text-align:center; }



@font-face {
  font-family: 'ico';
  src:
    url('ico.ttf?tkom76') format('truetype'),
    url('ico.woff?tkom76') format('woff'),
    url('ico.svg?tkom76#ico') format('svg');
  font-weight: normal;
  font-style: normal;
}


#unlock {
	max-width: 400px;
	margin: auto;
}

.door {
  height: 200px;
  margin-bottom: 20px;
}

#unlock button {
	width: 100%;
  height: 100%;
	padding: 20px 0;
}

#unlock-btn .icon-unlock, .unlock-btn .icon-unlock {
	display: block;
	font-size: 100px;
}
#unlock .icon-loading {
	display: none;
	font-size: 100px;
	width: 100px;
	height: 100px;
	margin: auto;
}

#unlocked, .unlocked {
	display: none;
	color: #0f0;
	position: relative;
	width: 200px;
	height: 200px;
	margin: auto;
}
#unlocked1, #unlocked2, .unlocked1, .unlocked2 {
	font-size: 200px;
	position: absolute;
	top: 0;
	left: 0;
}
#unlocked2, .unlocked2 {
	animation: scale-up-center 1s linear 1;
}




@keyframes scale-up-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 1;
  }
  100% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
            opacity: 0;
  }
}


.icon-loading {
	-webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
    display: inline-block;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'ico' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-clock:before {
  content: "\e901";
}
.icon-time:before {
  content: "\e901";
}
.icon-schedule:before {
  content: "\e901";
}
.icon-calendar:before {
  content: "\e902";
}
.icon-date:before {
  content: "\e902";
}
.icon-schedule1:before {
  content: "\e902";
}
.icon-time1:before {
  content: "\e902";
}
.icon-day:before {
  content: "\e902";
}
.icon-key:before {
  content: "\e903";
}
.icon-password:before {
  content: "\e903";
}
.icon-login:before {
  content: "\e903";
}
.icon-signin:before {
  content: "\e903";
}
.icon-spinner:before {
  content: "\e900";
}
.icon-loading:before {
  content: "\e900";
}
.icon-loading-wheel:before {
  content: "\e900";
}
.icon-busy:before {
  content: "\e900";
}
.icon-wait:before {
  content: "\e900";
}
.icon-unlock:before {
  content: "\f09c";
}