html { 
      margin: 0;
      padding: 0;
      height: 100%;
      overflow-y: hidden;
      background-color: black;
      background: black url("../css/image/backmob.png") no-repeat center center;
      background-size: cover;
		}

#body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-y: hidden;
  min-height: 100vh;
  background: black url("../css/image/backmob.png") no-repeat center center;
  background-size: cover;
}
#mainfield{ 
width: 90vw;
height: 90vw; 
margin-left:5vw;
margin-top:5vh;
display:block;
background-color:black;
opacity:0.6;
z-index:1;
border-radius: 1vw;
}
#primary{
font-family:light;
width: 100vw;
height:100vh;
display:inline-block;
}

#fotoleft{
font-family:light;
width: 40vw;
height:90vw;
margin-top:10vw;
margin-left:6.5vw;
display:inline-block;
background-color:black;
}


#fotocenter{
font-family:light;
width: 25vw;
height: 45vh;
margin-top:5vh;
margin-left:5vw;
display:inline-block;
background:blue;
}
#fotoright{
font-family:light;
width: 40vw;
height: 80vw;
margin-top:0px;
display:inline-block;
background-position: center;background-size:40vw 80vw;
}
#kf { 
width: 98vw;
height: 50vw; 
color:white;
margin-left:1vw;
margin-top:50vw;
position:absolute;

}
#map { 
width: 98vw;
height: 40vw; 
display:block;
border-radius:5px;
margin-left:1vw;
margin-top:1vw;
position:absolute;
	background-image: url("../css/image/map1.png");
	background-repeat: no-repeat, repeat;
	 background-position: center;
	background-size: 98vw 40vw; /* Resize the background image to cover the entire container */
}

#rightCube { 
display:block;
position:absolute;
width:30vw;
height: 60vw;
margin-left:55vw;
margin-top:-47vw;
background-image: url("../css/image/panna.png");
	background-repeat: no-repeat, repeat;
background-position: center;
background-size: 35vw 60vw;
}

span{
	color:white;
	font-size:18px;
	font-family: "Sans-serif", Sans-serif, serif;
	}
a {
  text-decoration: none;
  color: white;
  opacity:1;
  font-family: 'work sans', sans serif;
  font-size: 1.5em;
  font-weight: 400;
  transition: 200ms;
}
a:hover {
  opacity:0.5;
}
ul {
  padding: 0;
  list-style-type: none;
}

.mob {
	display:block;
	opacity:1;
}
.pcver {
	display:hidden;
	opacity:0;
}

.container {
  margin-top: 50px; 
  Display: flex;
  justify-content: center;
  align-items: center;
}
.phone {
  background-color: #36383F;
  border-radius: 40px;
  width: 300px;
  height: 600px;
  Display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 30px 50px 100px #85888C;
}
.content {
  border: 1px solid #36383F;
  border-radius: 20px;
  width: 94%;
  height: 91%;
  background-color: #F5F6FA;
  overflow: hidden;
}
nav {
  background-color: #1E1E23;
  height: 65px;
}


#menuToggle {
  display: flex;
  flex-direction: column;
  position: relative;
  top: 25px;
  left: 25px;
  z-index: 3;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: flex;
  width: 40px;
  height: 32px;
  position: absolute;
  cursor: pointer;
  opacity: 0;
  z-index: 4;
}

#menuToggle span
{
  display: flex;
  width: 29px;
  height: 2px;
  margin-bottom: 5px;
  position: relative;
  background: #ffffff;
  border-radius: 3px;
  z-index: 3;
  transform-origin: 5px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-3px, -1px);
  background: #36383F;
}
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

#menu
{
  position: absolute;
  width: 100vw;
  height: 100vh;
  box-shadow: 0 0 10px #85888C;
  margin: -50px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  background-color: black;
  color: white;
  -webkit-font-smoothing: antialiased;
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  transition-delay: 2s;
}

#menuToggle input:checked ~ ul
{
  transform: none;
}






#leader1 { 
width: 5vw;
height: 5vw;
display:block;
border-radius:100vw;
margin-left:32.5vw;
margin-top:3vw;
z-index:1;
position:absolute;
	background-image: url("../css/image/petr.jpg");
	background-repeat: no-repeat, repeat;
	 background-position: center;
	background-size: 5vw 5vw; /* Resize the background image to cover the entire container */
}


#leader1:hover { 
width: 80vw;
height: 30vw; 
display:block;
border-radius:5px;
margin-left:0vw;
margin-top:0vw;
z-index:3;
position:absolute;
background-color: none;
background-image:none;
}
.leader1Hidden { 
width: 80vw;
height: 30vw; 
border-radius:5px;
margin-left:0vw;
margin-top:100vw;
display:block;
position:absolute;
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity 1s;  
background-color: none;
opacity: 0;
}
#leader1:hover .leader1Hidden { 
width: 80vw;
height: 30vw; 
display:block;
border-radius:5px;
margin-left:0vw;
margin-top:0vw;
z-index:3;
opacity: 1;
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity 1s;  
overflow:scroll;
overflow-x: hidden;
position:absolute;
background-color: black;
background-image:none;
}






#leader2 { 
width: 5vw;
height: 5vw;
display:block;
border-radius:100vw;
margin-left:42.5vw;
margin-top:3vw;
z-index:1;
position:absolute;
	background-image: url("../css/image/venca.jpg");
	background-repeat: no-repeat, repeat;
	 background-position: center;
	background-size: 5vw 5vw; /* Resize the background image to cover the entire container */
}


#leader2:hover { 
width: 80vw;
height: 30vw; 
display:block;
border-radius:5px;
margin-left:0vw;
margin-top:0vw;
z-index:3;
position:absolute;
background-color: none;
background-image:none;
}
.leader2Hidden { 
width: 80vw;
height: 30vw; 
border-radius:5px;
margin-left:0vw;
margin-top:100vw;
display:block;
position:absolute;
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity 1s;  
background-color: none;
opacity: 0;
}
#leader2:hover .leader2Hidden { 
width: 80vw;
height: 30vw; 
display:block;
border-radius:5px;
margin-left:0vw;
margin-top:0vw;
z-index:3;
opacity: 1;
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity 1s;  
overflow:scroll;
overflow-x: hidden;
position:absolute;
background-color: black;
background-image:none;
}








#core1 { 
width: 5vw;
height: 5vw;
display:block;
border-radius:100vw;
margin-left:10vw;
margin-top:16vw;
z-index:1;
position:absolute;
	background-image: url("../css/image/sarka.jpg");
	background-repeat: no-repeat, repeat;
	background-position: center;
	background-size: 5vw 5vw; /* Resize the background image to cover the entire container */
}



#core1:hover { 
width: 80vw;
height: 30vw; 
display:block;
border-radius:5px;
margin-left:0vw;
margin-top:0vw;
opacity: 1;
z-index:3;
position:absolute;
background-color: none;
background-image:none;
}

.core1Hidden { 
width: 80vw;
height: 30vw; 
border-radius:5px;
margin-left:0vw;
margin-top:100vw;
display:block;
position:absolute;
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity 1s;  
opacity: 0;
}
#core1:hover .core1Hidden { 
width: 80vw;
height: 30vw; 
opacity:1;
display:block;
border-radius:5px;
margin-left:0vw;
margin-top:0vw;
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity 1s;  
z-index:3;
overflow:scroll;
overflow-x: hidden;
position:absolute;
background-color: black;
background-image:none;
}








/* Resize the background image to cover the entire container */
/* Resize the background image to cover the entire container */
/* Resize the background image to cover the entire container */
/* Resize the background image to cover the entire container */




#core2 { 
width: 5vw;
height: 5vw;
display:block;
border-radius:100vw;
margin-left:25vw;
margin-top:16vw;
z-index:1;
position:absolute;
	background-image: url("../css/image/jirka.jpg");
	background-repeat: no-repeat, repeat;
	background-position: center;
	background-size: 5vw 5vw; /* Resize the background image to cover the entire container */
}



#core2:hover { 
width: 80vw;
height: 30vw; 
display:block;
border-radius:5px;
margin-left:0vw;
margin-top:0vw;
opacity: 1;
z-index:3;
position:absolute;
background-color: none;
background-image:none;
}

.core2Hidden { 
width: 80vw;
height: 30vw; 
border-radius:5px;
margin-left:0vw;
margin-top:100vw;
display:block;
position:absolute;
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity 1s;  
opacity: 0;
}
#core2:hover .core2Hidden { 
width: 80vw;
height: 30vw; 
opacity:1;
display:block;
border-radius:5px;
margin-left:0vw;
margin-top:0vw;
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity 1s;  
z-index:3;
overflow:scroll;
overflow-x: hidden;
position:absolute;
background-color: black;
background-image:none;
}


/* Resize the background image to cover the entire container */
/* Resize the background image to cover the entire container */
/* Resize the background image to cover the entire container */
/* Resize the background image to cover the entire container */




#core3 { 
width: 5vw;
height: 5vw;
display:block;
border-radius:100vw;
margin-left:50vw;
margin-top:16vw;
z-index:1;
position:absolute;
	background-image: url("../css/image/tom.jpg");
	background-repeat: no-repeat, repeat;
	background-position: center;
	background-size: 5vw 5vw; /* Resize the background image to cover the entire container */
}



#core3:hover { 
width: 80vw;
height: 30vw; 
display:block;
border-radius:5px;
margin-left:0vw;
margin-top:0vw;
opacity: 1;
z-index:3;
position:absolute;
background-color: none;
background-image:none;
}

.core3Hidden { 
width: 80vw;
height: 30vw; 
border-radius:5px;
margin-left:0vw;
margin-top:100vw;
display:block;
position:absolute;
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity 1s;  
opacity: 0;
}
#core3:hover .core3Hidden { 
width: 80vw;
height: 30vw; 
opacity:1;
display:block;
border-radius:5px;
margin-left:0vw;
margin-top:0vw;
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity 1s;  
z-index:3;
overflow:scroll;
overflow-x: hidden;
position:absolute;
background-color: black;
background-image:none;
}


/* Resize the background image to cover the entire container */
/* Resize the background image to cover the entire container */
/* Resize the background image to cover the entire container */
/* Resize the background image to cover the entire container */




#core4 { 
width: 5vw;
height: 5vw;
display:block;
border-radius:100vw;
margin-left:65vw;
margin-top:16vw;
z-index:1;
position:absolute;
	background-image: url("../css/image/benny.jpg");
	background-repeat: no-repeat, repeat;
	background-position: center;
	background-size: 5vw 5vw; /* Resize the background image to cover the entire container */
}



#core4:hover { 
width: 80vw;
height: 30vw; 
display:block;
border-radius:5px;
margin-left:0vw;
margin-top:0vw;
opacity: 1;
z-index:3;
position:absolute;
background-color: none;
background-image:none;
}

.core4Hidden { 
width: 80vw;
height: 30vw; 
border-radius:5px;
margin-left:0vw;
margin-top:100vw;
display:block;
position:absolute;
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity 1s;  
opacity: 0;
}
#core4:hover .core4Hidden { 
width: 80vw;
height: 30vw; 
opacity:1;
display:block;
border-radius:5px;
margin-left:0vw;
margin-top:0vw;
-webkit-transition: opacity 1s; /* For Safari 3.1 to 6.0 */
transition: opacity 1s;  
z-index:3;
overflow:scroll;
overflow-x: hidden;
position:absolute;
background-color: black;
background-image:none;
}

/* ---------- Mobile index redesign ---------- */
.home-mobile {
  color: #efe7dc;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.2px;
}

.home-shell {
  height: 100vh;
  padding: 20px 18px 28px;
  background:
    radial-gradient(circle at top, rgba(40, 40, 40, 0.9), rgba(10, 10, 10, 0.98) 55%),
    url("../css/image/backmob.png") center top / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.home-content {
  padding: 18px 4px 10px;
  font-size: 16px;
  line-height: 1.6;
}

.home-content h1 {
  font-size: 22px;
  font-style: italic;
  font-weight: 500;
  margin: 6px 0 14px;
}

.home-content h2 {
  font-size: 18px;
  font-weight: 600;
  margin: 16px 0 10px;
}

.home-content ul {
  margin: 0 0 12px;
  padding-left: 18px;
  list-style: disc;
}

.home-content li {
  margin-bottom: 8px;
}

.home-note {
  color: #a9b4ff;
  margin: 6px 0 12px;
  font-style: italic;
}

.home-contact {
  margin-bottom: 10px;
}

.home-links {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 14px;
  letter-spacing: 0.5px;
  margin-top: 10px;
}

.home-links a {
  color: #c7d0ff;
  text-decoration: underline;
}