@media screen and (min-width: 601px) {
  div.appsmenu { display: none; }
}
@media screen and (max-width: 600px) {
  div.appsmenu { display: block; }
}
.backg {
    background: 
        url('https://admin.sultansr12official.com/images/gedungsr12.jpg') no-repeat;
    background-size: cover;
    background-position:center center;
    background-attachment: fixed;
}
.homebar {
  position: fixed;
  bottom:-60px;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 3;
}
.homebar a {
  display: block;
  color: #8f4704;
  text-align: center;
  text-decoration: none;
}
.dot {
  background-color: #ffffff;
  height:90px;
  width:90px;
  border-radius: 50%;
  display: inline-block;
  z-index: 2;
  outline-style: solid;
  outline-color: #ffffff;
  outline-width: 6px;
}
.androbar {
  overflow: hidden;
  position: fixed;
  bottom: 0;
  right:0;
  left:0;
  width: 104%;
  height:63px;
}
.androbar a {
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.androbar div.active {
  background-color: #012552;
  color: white;
}
    .w3-animate-left{position:relative;animation:animateleft 0.8s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
    .w3-animate-right{position:relative;animation:animateright 0.8s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
    .w3-animate-rightt{position:relative;animation:animateright 0.9s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
    .w3-animate-righttt{position:relative;animation:animateright 1.3s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
    .hey:hover .image {
      opacity: 0.8;
      transform: scale(1.1);
    }
    .hoy:hover {
      transform: scale(1.05);
      opacity: 0.4;
    }
#button-test:hover {
   color: #0d54af;
}

.bg-muted { background-color:#f2f2f2;}
.btn-muted { background-color:#f2f2f2;}
.mtmin10 { margin-top:-10px;}
.mtmin13 { margin-top:-13px;}
.mtmin15 { margin-top:-15px;}
.mtmin20 { margin-top:-20px;}

.required:after {content:" *";color: red; }

.hoy:hover {
  transform: scale(1.05);
}
    .w3-animate-left{position:relative;animation:animateleft 0.8s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
    .w3-animate-right{position:relative;animation:animateright 0.8s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
    .w3-animate-rightt{position:relative;animation:animateright 1.5s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
    .w3-animate-righttt{position:relative;animation:animateright 1s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
    
.announce {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 666;
}
.fade-out {
  animation: fadeOut ease 8s forwards;
  -webkit-animation: fadeOut ease 8s forwards;
  -moz-animation: fadeOut ease 8s forwards;
  -o-animation: fadeOut ease 8s forwards;
  -ms-animation: fadeOut ease 8s forwards;
  animation-delay: 1s;
}
@keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-moz-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-webkit-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-o-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
  }
}

@-ms-keyframes fadeOut {
  0% {
    opacity:1;
  }
  100% {
    opacity:0;
}