html {
  background-color: #000000 !important;
  color: inherit;
}

.thumb-img {
  border-color: #000000 !important;
}

#loupeContainer div.background {
  background-color: #000000 !important;
  color: inherit;
}

header div.background {
  background-color: #000000 !important;
  color: inherit;
}

.custom-colorable {
  fill: #A0A0A0 !important;
}

body {
  background-color: #000000 !important;
  color: #828282 !important;
  padding-top: 10vh;
}

header {
  top: 10vh;
}
header div.meta-left {
  width: 100%;
}
header div.meta-right {
  display: none;
}

.logo {
  position: fixed;
  top: 0;
  padding-top: 3vh;
  height: 8vh;
  overflow: hidden;
  z-index: 100;
  background-image: linear-gradient(rgb(1, 19, 63) 0%, rgb(2, 41, 141) 7vh, transparent 7vh);
}

.logo img {
  height: 100%;
}

#galleryTitle{
  display: flex;
  flex-wrap: wrap;
  color: white;
  white-space: inherit;
 
}
.titlespan, .titlelink{
  display: inline-block;

}
.titlespan{
  padding: 3px 12px ;
}

#galleryTitle a{
  display: inline-flex;
  align-items: center;
  color: rgb(191, 191, 191);
  font-weight: 200;
  text-decoration: none;
  padding: 3px 12px ;
  border-radius: 30px;;
}


#galleryTitle a:before{
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-image: url(./../SWEC-S_orange.svg);
  background-size: contain ;
  background-position: center center;
  margin-right: .3em;
  
}

#galleryTitle a.current:before{
  
  background-image: url(./../SWEC-S_blue.svg);
  
  
}


#galleryTitle a:first-of-type{

}
#galleryTitle a:hover{
  color: white;
   background-color: #ffffff3b;
}

#galleryTitle a.current{
  background-color: rgb(255, 255, 255);
  color: black;
  font-weight: bold;
  text-decoration: none;
}

#galleryTitle a.current:hover{
  background-color: rgb(255, 255, 255, 255);
  color: black;
  opacity: 1;
}

@media screen and (max-width: 568px){
  header div.meta-left {
  padding: 10px 20px 10px 20px;
  width: 100%;
}
}