@font-face {
  font-family: 'SometimesTimes';
  src:  url('fonts/SometimesTimes.ttf') format('truetype');
  }
  @font-face {
    font-family: Compacta-Schwarz;
    src: url("fonts/CompactaLTStd-Black.otf") format("opentype");
}
html, body {
  height: 100%;
  margin: 0;
}
.text_sometimes {
  font-family: SometimesTimes;
  font-size: 6vh;
}
.text_compacta {
 font-family: Compacta-Schwarz;
 font-size: 5vh;
}
.oli{
  width: 100%;
  height:100%;
  font-family: SometimesTimes;
  /* font-weight: bold; */
  font-size: 10vh;
  background-color: #adb7c5;
}

.indexoli1{
  font-family: Helvetica;
  font-weight: bold;
  font-size: 6vh;
  padding-left: 1%;
  padding-bottom: 5%;
}
a{
  text-decoration: none;
}
.index2{
  color: red;
  font-family: Helvetica;
  padding-left: 5%;
  font-size: 3vh;
}
.textoli{
  color: black;
  font-family: Helvetica;
  padding-left: 10%;
  font-size: 2vh;
  width: 70%;
}
.close-button {
	/* width: 20px;
	height: 20px; */
	position: absolute;
	right: 4vh;
	top: 4vh;
	/* background: url("pics/button_close.png") no-repeat;
	background-size: cover;
	border: 1px solid rgba(255,255,255,0); */
	cursor: pointer;
  color:yellow;
  font-family: Helvetica;
}

.popup {
  position: fixed;
  top: 0;left: 0;
  height: 100%;
	background-color: black;
	display: none;
  box-shadow: 5px 10px 18px #888888;
  z-index: 999;
  font-size: 30px;
}
img{
position: relative;
top: 50%; left: 50%;
transform: translate(-50%, -50%);

}
/* #popup-info {
  top: 10%;
  left: 20%;
} */

.back {
  position: absolute;
  right:4vh; bottom: 4vh;
  color:yellow;
  font-family: Helvetica;
  cursor: pointer;
}
.pictitle {
  position: absolute;
  left:4vh; top: 4vh;
  color:yellow;
  font-family: Helvetica;
}