body{
  font-family: 'Titillium Web', sans-serif;
  background: url("../img/background.png") no-repeat center center fixed;
  background-size: cover;
  color: #fff;
  overflow-y:  scroll;
  overflow-x: hidden;
}

.portal-kategori {
    font-size: 20px;
    padding-top: 20px;
}

.portal-container {
  width: 85%;
}

#menu {
  float: left;
  margin-top: 1%;
}

#menu a {
  float: left;
  border-radius: 10px;
  display: block;
  color: #fff;
  text-decoration: none;
  text-align:center;
  width:100%;
  margin:5px;
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
  height: 120px;
  min-width: 100%;
  background-color: #666;
}
#menu .grafana{
  background: #333 url('../img/grafana-logo-15BA0AFA8A-seeklogo.com.png') no-repeat center center;
  background-size: 70px 70px;
}
#menu .prometheus{
  background: #e6522c url('../img/prometheus_logo_grey.svg') no-repeat center center;
  background-size: 70px 70px;
}
#menu .prometheus-fed{
  background: #e6522c url('../img/prometheus_logo_grey.svg') no-repeat center center;
  background-size: 70px 70px;
}
#menu .alertmanager{
  background: #1fa67a url('../img/alertmanager.png') no-repeat center center;
  background-size: 70px 70px;
}
#menu .alertmanager-sto2{
  background: #1fa67a url('../img/alertmanager.png') no-repeat center center;
  background-size: 70px 70px;
}
#menu a.dhmap {
  background: #999966 url('../img/dhmap.png') no-repeat center center;
  background-size: 70px 70px;
}
#menu a.trac {
  background: #666 url('../img/trac-2-logo-png-transparent.png') no-repeat center center;
  background-size: 70px 70px;
}
#menu a.svn {
  background: #666 url('../img/subversion.png') no-repeat center center;
  background-size: 70px 70px;
}
#menu a.buildstatus {
  background: #666 url('../img/green-checkmark.png') no-repeat center center;
  background-size: 70px 70px;
}
#menu a.dhcpinfo{
  background: #f69 url('../img/dhcp.png') no-repeat center center;
  background-size: 60px 60px;
}
#menu a.puppet{
  background: #444 url('../img/puppet-4309c63760.png') no-repeat center center;
  background-size: 90px 90px;
}
#menu a.dnsstat{
  background: #63c url('../img/dns.png') no-repeat center center;
  background-size: 60px 60px;
}
#menu a.akvorado{
  background: #fc0 url('../img/akvorado.png') no-repeat center center;
  background-size: 70px 70px;
  color: #000;
}
#menu a.assets{
  background: #ccc url('../img/assets.png') no-repeat center center;
  background-size: 70px 70px;
  color: #000;
}
#menu a.github{
  background: #000 url('../img/github.png') no-repeat center center;
  background-size: 70px 70px;
  color: #fff;
}
#menu a.circleci{
  background: #fff url('../img/circleci-logo.png') no-repeat center center;
  background-size: 70px 70px;
  color: #000;
}
#menu a.quay{
  background: #ccc url('../img/quay.svg') no-repeat center center;
  background-size: 70px 70px;
  color: #000;
}
#menu a.codeclimate{
  background: #01c488 url('../img/climate.png') no-repeat center center;
  background-size: 70px 70px;
  color: #000;
}
#menu a.monday{
  background: #fff url('../img/monday.png') no-repeat center center;
  background-size: 130px 70px;
  color: #000;
}
#menu a.vault{
  background: #fff url('../img/vault.png') no-repeat center center;
  background-size: 70px 70px;
  color: #000;
}
#menu a.vCenter{
  background: #666 url('../img/vsphere.png') no-repeat center center;
  background-size: 70px 70px;
  color: #fff;
}
#menu a.deploy-ui{
  background: #fff url('../img/logo-deploy.jpeg') no-repeat center center;
  background-size: 70px 70px;
  color: #000;
}
#menu a.fusion{
  background: #fff url('../img/fusiondirectory-logo-437090691.jpg') no-repeat center center;
  background-size: 130px 70px;
  color: #000;
}
#menu a.request{
  background: #fff url('../img/request.jpeg') no-repeat center center;
  background-size: 70px 70px;
  color: #000;
}
#menu a.netbox{
  background: #fff url('../img/netbox_logo.svg') no-repeat center center;
  background-size: 130px 70px;
  color: #000;
}

/* CSS3 Effects */
#menu  a {
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  -o-transition: all 0.1s linear;
  -ms-transition: all 0.1s linear;
  transition: all 0.1s linear;
}
#menu  a:hover {
  -webkit-transform: scale(0.98,0.98);
  -moz-transform: scale(0.98,0.98);
  -o-transform: scale(0.98,0.98);
  -ms-transform: scale(0.98,0.98);
  transform: scale(0.98,0.98);
}

#menu a.disabled {
  -webkit-filter: grayscale(100%);
  cursor: default;
  pointer-events: none;
}
#menu  a.disabled:hover {
  -webkit-transform: none;
  -moz-transform: none;
  -o-transform: none;
  -ms-transform: none;
  transform: none;
}