body{
	background-color: lightgray;
	font-family: "Times New Roman", Times, serif;
}
.jumis {
  background-color: lightgray;
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
  /* background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(115,115,115,1) 53%, rgba(255,255,255,1) 100%); 
*/
  background-image: url("/atteli/patterns/grida.jpg")
}
.stabs {
  height: 100vh;
  width: 20.83vw;
  background-color: #555;
  position: absolute;
  top: 0vh;
  left: 28.65vw;
  z-index: 1;
  background-image: url("/atteli/patterns/565.GIF");
  background-repeat: repeat;


}

.stabs2 {
  height: 61.11vh;
  width: 18.23vw;
  background-color: #555;
  position: absolute;
  top: 38.89vh;
  left: 0vw;
  z-index: 1;
  background-image: url("/atteli/patterns/565.GIF");
  background-repeat: repeat;


}

.stabs3 {
  height: 32.41vh;
  width: 52.08vw;
  background-color: #555;
  position: absolute;
  top: -12.04vh;
  left: 28.65vw;
  z-index: 1;
  background-image: url("/atteli/patterns/565.GIF");
  background-repeat: repeat;


}

.stabs4 {
  height: 37.04vh;
  width: 83.33vw;
  background-color: #555;
  position: absolute;
  top: 38.89vh;
  left: 0vw;
  z-index: 1;
  background-image: url("/atteli/patterns/565.GIF");
background-repeat: repeat;


}

.stabsena {
  height: 100vh;
  width: 20.83vw;
  background-color: black;
  position: absolute;
  top: 0vh;
  left: 29.17vw;
  z-index: 0;
}

.stabs2ena {
  height: 61.11vh;
  width: 18.23vw;
  background-color: black;
  position: absolute;
  top: 38.89vh;
  left: 0.52vw;
  z-index: 0;
}

.stabs3ena {
  height: 32.41vh;
  width: 52.08vw;
  background-color: black;
  position: absolute;
  top: -12.04vh;
  left: 29.17vw;
  z-index: 0;
}

.stabs4ena {
  height: 37.04vh;
  width: 83.33vw;
  background-color: black;
  position: absolute;
  top: 38.89vh;
  left: 0.52vw;
  z-index: 0;
}
/*
.stabs {
  height: 1080px;
  width: 400px;
  background-color: #555;
  position: absolute;
  top: 0px;
  left: 550px;
  z-index: 1;
 }
 .stabs2 {
  height: 660px;
  width: 350px;
  background-color: #555;
  position: absolute;
  top: 420px;
  left: 0px;
  z-index: 1;
}
.stabs3 {
  height: 350px;
  width: 1000px;
  background-color: #555;
  position: absolute;
  top: -130px;
  left: 550px;
  z-index: 1;
}
.stabs4 {
  height: 400px;
  width: 1600px;
  background-color: #555;
  position: absolute;
  top: 420px;
  left: 0px;
  z-index: 1;
} 
 

.stabsena {
  height: 1080px;
  width: 400px;
  background-color: black;
  position: absolute;
  top: 0px;
  left: 560px;
  z-index: 0;
 }
 .stabs2ena {
  height: 660px;
  width: 350px;
  background-color: black;
  position: absolute;
  top: 420px;
  left: 10px;
  z-index: 0;
}
.stabs3ena {
  height: 350px;
  width: 1000px;
  background-color: black;
  position: absolute;
  top: -130px;
  left: 560px;
  z-index: 0;
}
.stabs4ena {
  height: 400px;
  width: 1600px;
  position: absolute;
  background-color: black;
  top: 420px;
  left: 10px;
  z-index: 0;
} 
*/
.izvelne {
  /*height: 400px;
  width: 150px;*/
  position: absolute;
  background-color: transparent;
/*  top: 420px;
  left: 1450px;*/
  display: inline-block;
  z-index: 1;
    height: 37.04vh;
  width: 7.81vw; 
  top: 38.89vh;
  left: 75.52vw;
    opacity: 0;
  pointer-events: none; /* Disable pointer events when transparent */
  transition: opacity 1s ease;
}

.izvelne a {
  color: white; /* Black text color */
  display: block; /* Make the links appear below each other */
  margin: 0.6vw; /* Add some padding */
  text-decoration: none; /* Remove underline from links */
  text-align: center;
  background-clip: content-box;
  background-color: black;
  font-size: 1.32vh;
  border:1px outset white;
}
.izvelne a:hover {
  color: darkgrey;
  background-color: darkred;
  border: 1px inset grey;
  text-decoration: none;
}

.box {
    position: absolute;
    top: 6vh;
    left: 1vw;
    width: 26.04vw;
    height: 27.78vh;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(115,115,115,1) 53%, rgba(255,255,255,1) 100%);
    cursor: grab;
    z-index: 1;
    border: 1px outset black;
}
.box-line{
    height: 2px;
    background-color: #000;
    margin: 0px;
}

.prevent-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.box-text {
    color: black;
    padding: 0.4vw;
    font-size: 2.04vh;
    transform:scale(1,2);
}
#descriptionDiv {
    color: black;
    padding: 0.4vw;
    font-size: 2.04vh;
}
.fona-teksts {
    position: absolute;
    bottom: -4vh;
    right: 1;
    color: darkred;
    font-size: 10vh;
    opacity: 0;
    transform: scale(1, 0.1);
    transition: opacity 1s ease, transform 1s ease;
}
.atslega {
	position:absolute;
	height: 10vh;
	width: 20vw;
	z-index:1;
	top:5vh;
	left:3vw;
	cursor: pointer;
	opacity: 1;
	transition: opacity 1s ease;
}
.navigators {
  width: 150px;*/
  position: absolute;
  background-color: transparent;
  left: 1450px;*/
  display: inline-block;
  z-index: 1;
    height: 37.04vh;
  width: 7.81vw;
  top: 38.89vh;
  left: 75.52vw;
  color:black;
}

.fade-out {
  opacity: 0;
  pointer-events: none; /* Disable pointer events when fading out */
}
.fade-in{
  opacity: 1;
  pointer-events: auto; /* Enable pointer events when opaque */
}
.expand {
  opacity: 1;
  transform: scale(1, 2);
}