.site-map {
  font-family: 'Work Sans', sans-serif;
  height: 80px;
  background-color: none;
  color: #f2f2f2;
  font-size: 16px;
  font-weight: bold;
  border: none;
  padding: 12px 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
  vertical-align: middle;
  font-size: 24px;
}

.site-map img {
  vertical-align: middle;
  text-align: center;
   background-color: none;
}

#site-icon {
  font-family: 'Work Sans', sans-serif;
  height: 40px;
  width: 40px;
  display: flex;
  flex-wrap: wrap;
  background-color: none;
  overflow: hidden;
  animation-duration: 1s;
  position: relative;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: none;
  padding: 12px 4px;
  border-radius: 4px;
  cursor: pointer;
  vertical-align: middle;
}

#site-icon button {
  position: absolute;
  cursor: pointer;
}

@keyframes spin-site-icon {
  0%   {transform: rotate(0deg)}
  100% {transform: rotate(360deg)}
}

.site-icon-img {
  border: none;
  cursor: pointer;
}

.site-map-menu-content {
  display: none;
  position: absolute;
  top: 70px;
  left: 20px;
  background-color: #3E4C76;
  min-width: 200px;
  max-width: 360px;
  overflow: none;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1000;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  font-family: 'Work Sans', sans-serif;
  flex-wrap: wrap;
//  background-color: rgba(255, 255, 255, 0.7);
  opacity: 1.0;
  border: 4px solid #FFB11B;
  color: #FFB11B;
}

.site-map-menu-content a {
// color: black;
  color: #FFB11B;
  padding: 2px 2px;
  text-decoration: none;
  display: flex;
}

.show {display: flex;}

.site-apps-menu-header {
  color: #FFB11B;
  position: relative;
  width: 100%;
  text-align: left;
  font-family: 'Work Sans', sans-serif;
  align-items: center; 
  font-size: 20px;
  font-weight: bold;
  margin: 5px;
  margin-bottom: 10px;
}

.site-apps-box {
  position: relative;
  width: 100px;
  height: 110px;
  text-align: center;
  font-family: 'Work Sans', sans-serif;
  align-items: center; 
  color: black;
  margin-bottom: 15px;

}

.site-apps-icon {
  font-family: 'Work Sans', sans-serif;
  position: relative;
  background-color: #E5E4E2;
  background: linear-gradient(to bottom, #FFFFFF, #E5E4E2, #E5E4E2, #E5E4E2, #E5E4E2, #E5E4E2, #E5E4E2, #D3D3D3, #36454F);
  width: 80px;
  height: 80px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
  border-radius: 20px;
  text-align: center;
  align-items: center; 
  font-size: 14px;
  color: #000;
  opacity: 1.0; 
  border: 1px solid black;
  border-right: 2px solid black;
  border-bottom: 3px solid black;
  padding: 5px;
}

.site-apps-icon img {
  width: 75px;
  height: 75px;
}

.pulse {
	animation: pulse 1s linear infinite;
}

@-webkit-keyframes "pulse" {
0% {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
}
50% {
   -webkit-transform: scale(0.98);
   transform: scale(0.98);
}
100% {
    -webkit-transform: scale(1);
   transform: scale(1);
}
}


.site-apps-icon-gray {
  font-family: 'Work Sans', sans-serif;
  position: relative;
  background-color: ##818589;
  background: linear-gradient(to bottom, #E5E4E2, #D3D3D3, #D3D3D3, #D3D3D3, #818589, #818589, #808080, #808080, #36454F);
  width: 80px;
  height: 80px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
  border-radius: 20px;
  text-align: center;
  align-items: center; 
  font-size: 14px;
  color: #fff;
  opacity: 1.0; 
  border: 1px solid black;
  border-right: 2px solid black;
  border-bottom: 3px solid black;
  padding: 5px;
}

.site-apps-icon-gray img {
  width: 75px;
  height: 75px;
}


.site-apps-icon-darkblue {
  font-family: 'Work Sans', sans-serif;
  position: relative;
  background-color: #000041;
  background: linear-gradient(to bottom, #466696, #191970, #000041, #000041, #000041, #000041, #000041, #000041, #000000);
  width: 80px;
  height: 80px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
  border-radius: 20px;
  text-align: center;
  align-items: center; 
  font-size: 14px;
  color: #fff;
  opacity: 1.0; 
  border: 1px solid black;
  border-right: 2px solid black;
  border-bottom: 3px solid black;
  padding: 5px;
}

.site-apps-icon-darkblue img {
  width: 75px;
  height: 75px;
}

.site-apps-icon-gold {
  font-family: 'Work Sans', sans-serif;
  position: relative;
  background-color: #FFB11B;
  background: linear-gradient(to bottom, #fafad2, #FFB11B, #FFB11B, #FFB11B, #FFB11B, #FFB11B, #FFB11B, #FFB11B, #85754e);
  width: 80px;
  height: 80px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
  border-radius: 20px;
  text-align: center;
  align-items: center; 
  font-size: 14px;
  color: black;
  opacity: 1.0; 
  border: 1px solid black;
  border-right: 2px solid black;
  border-bottom: 3px solid black;
  padding: 5px;
}

.site-apps-icon-liteblue img {
  width: 75px;
  height: 75px;
}

.site-apps-icon-liteblue {
  font-family: 'Work Sans', sans-serif;
  position: relative;
  background-color: #466696;
  background: linear-gradient(to bottom, #89CFF0, #466696, #466696, #466696, #466696, #466696, #466696, #466696, #0047AB);
  width: 80px;
  height: 80px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
  border-radius: 20px;
  text-align: center;
  align-items: center; 
  font-size: 14px;
  color: #fff;
  opacity: 1.0; 
  border: 1px solid black;
  border-right: 2px solid black;
  border-bottom: 3px solid black;
  padding: 5px;
}

.site-apps-icon-gold img {
  width: 75px;
  height: 75px;
}

.site-apps-icon-nobg {
  font-family: 'Work Sans', sans-serif;
  position: relative;
  width: 80px;
  height: 80px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
  border-radius: 20px;
  text-align: center;
  align-items: center; 
  font-size: 14px;
  color: #fff;
  opacity: 1.0; 
  padding: 5px;
}

.site-apps-icon-nobg img {
  width: 75px;
  height: 75px;
  border-radius: 10px;
}

.site-apps-label {
  font-family: 'Work Sans', sans-serif;
  border-radius: 10px;
  text-align: center;
  align-items: center; 
  font-size: 16px;
  color: white;
}