/* Veeb ja 3d visualiseerimine: www.3d.ee */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;300;600&display=swap');
body{background-image: url( "bg2.png");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position-y: bottom;
  font-family:"Raleway";
  margin: 0;
            padding: 0;
            overflow: hidden;

}
.container {
  margin-top:1%;
  height: 100vh;
}

.round-container {
  margin: 0.2em 0.5em;
  display: inline-block;
  position: relative;
  width: 119px;
  height: 119px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  -moz-box-shadow: inset 0 -1px 10px rgb(21, 99, 235), 0 -1px 1px rgb(255, 255, 255), 0 2px 1px rgb(209, 234, 243);
  -webkit-box-shadow: inset 0 -1px 10px rgb(16, 76, 228), 0 -1px 1px rgb(255, 255, 255), 0 2px 1px rgb(209, 234, 243);
  box-shadow: inset 0 -1px 10px rgb(19, 79, 232), 0 -1px 1px rgb(255, 255, 255), 0 2px 1px rgb(209, 234, 243);
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}


.round-content {
  display: block;
  cursor: pointer;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-transition: -moz-transform 200ms ease-in;
  -o-transition: -o-transform 200ms ease-in;
  -webkit-transition: -webkit-transform 200ms ease-in;
  transition: transform 200ms ease-in;
  background-color: rgb(237, 248, 255);
  -moz-box-shadow: 0 3px 7px rgb(101, 170, 207);
  -webkit-box-shadow: 0 3px 7px rgb(101, 170, 207);
  box-shadow: 0 3px 7px rgb(101, 170, 207);
  position: absolute;
  text-align: center;
  color: #555454;
  font-size: 24px;
  font-weight: 600;
  line-height: 26px;
  padding-top: 10px;
  margin: 2px;
  width: 116px;
  height: 116px;
  -moz-border-radius: 80px;
  -webkit-border-radius: 80px;
  border-radius: 80px;
  
}


.map {background-image: url("img/map.png"); background-size: cover;}
.img {background-image: url("img/images.png"); background-size: cover;}
.round-content:hover {
  background-color: rgb(196, 233, 251);
  -moz-transform: rotate(-10deg) scale(0.90);
  -ms-transform: rotate(-10deg) scale(0.90);
  -webkit-transform: rotate(-10deg) scale(0.90);
  transform: rotate(-10deg) scale(0.9);
}
a{text-decoration: none;}

.hind{font-size: 18px; color:rgb(18, 155, 197)}
.asukoht{font-size: 18px; color:rgb(20, 80, 139);margin-top:26px;}
.info{font-size: 12px; color:rgb(36, 36, 36);line-height: 16px;}
.second{margin-top:-6%}

h5{font-weight: 500; font-size: 24px;}


.maja img{margin-top:-9%; margin-bottom: -10%; width:120%;  }
.logo img{ width:16vw; margin-top:2vh; margin-left:1vh; }

#mummud{width:100%; transform: scale(0.80); 
}

@media (max-width: 550px) {
  .logo img{ width:12vw; margin-top:2vh; margin-left:1vh; }
  .maja img{ width:90%; }
  #mummud{width:120%;  margin:-66% -10%;  transform: scale(0.75);
  
  }
  .maja img{margin-top:-9%; margin-bottom: -16%; width:120%;
       }
} 

@media (max-width: 768px) {
  .logo img{ width:12vw; margin-top:2vh; margin-left:1vh; }
  .maja img{ width:90%; }
  #mummud{width:140%;  margin:-5% -20%;  transform: scale(0.75);
  }
} 
@media (min-width: 768px) {
  .logo img{ width:12vw; margin-top:2vh; margin-left:1vh; }
  .maja img{ width:90%; }
  #mummud{width:110%;  margin:4% -5%;  transform: scale(0.95);
    
  }
}

@media (min-width: 992px) {
  .logo img{ width:7vw; margin-top:2vh; margin-left:1vh; margin-right: 3vh; }
  .maja img{ width:95%; }
  #mummud{width:160%; margin:0 -30%;   transform: scale(0.85);

  }
}

@media (min-width: 1200px) {
  .logo img{ width:7vw; margin-top:1vh; margin-left:1vh; }
  .maja img{ width:80%; }
  #mummud{width:120%; margin:3vw -10%;  padding: 0;
    transform: scale(0.9);

  }

}

@media (min-width: 1400px) {
  .logo img{ width:7vw; margin-top:1vh; margin-left:1vh; }
  .maja img{ width:80%; }
  #mummud{width:120%; margin:4vw -10%;  padding: 0 5%;
    transform: scale(1);

    
  }
}
@media (min-width: 1750px) {
  .logo img{ width:7vw; margin-top:1vh; margin-left:1vh; }
  .maja img{ width:80%; }
  #mummud{width:120%; margin:4vw -10%;   padding: 0 5%;
    transform: scale(1);
 
  }
}

.content {
  text-align: center;
}

.modal-footer{color:rgb(36, 71, 143);font-weight: 600; font-size: 18px;}
.modal-title{color:rgb(36, 71, 143);}


.galerii{color: rgb(120, 32, 137);}
.creator{color:#aaa;opacity: .7;}
.creator a {color:#aaa;opacity: .2;}
.pisi{width: 20px !important;}

.bold{font-weight: 600;}
.notsame{background-color: blanchedalmond;}

.butt{background-color: rgb(9, 68, 88); border-radius: 2%; padding:5px 20px; width:20%; border:1px solid white; color: rgb(255, 255, 255); font-weight: 600; margin:5px 2px; opacity: 0.85; min-width:100px;}
.footer{  font-size: 18px; font-weight: 600;  width:100%;  padding:0.5% 0;  color: rgb(12, 59, 102); opacity: .9; background-color: aliceblue;}
.bron{color:chocolate;}
.sold{color:red;}
.plokk{display: block; font-size: smaller;}
.soldgroup{margin-right: -90px;}
.g2{z-index: 20;}
.g3{z-index: 30;}
.g4{z-index: 40;}
.g5{z-index: 50;}
#kvlink{margin-top:15px; font-weight: 600;}
.hartcontainer {
  position: absolute;
  top:30%;
width:100%;


}


.hearttext {
  background-image: url(img/syda.png);
  background-size:contain;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) ;
  width: 380px; 
  height: 370px; 
  color:#FF4800;
  text-align: center;
  padding-top: 80px;
}
.hearttext2 {
 font-size: 22px;;
}

.hearttext input {border: none; margin-bottom: 15px; text-align: center; color:red; font-weight: bold; border-bottom: 1px solid red;}



.mt10{margin-top:10px;}

.close{cursor: pointer; font-size: 20px;}





.marquee {
width: 100%;
  height: 70px;
  color: rgb(42, 185, 242);
  font-size: 4vh;
  display: flex;
  align-items: center;
  position: absolute;
  top: 30px;
  white-space: nowrap;
  overflow: hidden;
}

.marquee div {
  padding: 0 50px;

  white-space: nowrap;
  min-width: 100%;
  animation: scrollText 10s linear infinite;
  
}

/* Keyframes for scrolling text */
@keyframes scrollText {
  0% {
      transform: translateX(100%);
  }
  100% {
      transform: translateX(-100%);
  }
}

/* Media query for small devices (up to 768px wide) */
@media (max-width: 768px) {
  .marquee {
      font-size: 2vh; /* Reduce font size */
  }

  .marquee div {
      animation-duration: 12s; /* Dynamic animation duration */
  }
}

/* Media query for extra small devices (up to 480px wide) */
@media (max-width: 480px) {
  .marquee {
    width: 120%;
      font-size: 2.5vh; /* Further reduce font size */
  }

  .marquee div {
      animation-duration: 8s; /* Slower animation for very small screens */
  }
}