body{
    overflow-x: hidden;
}    

body.stopanimacije *{
    animation-play-state: paused !important;
}    
    


.raziskovanje{
    display: none;
}


footer {
  min-height: 400px;
  background-color: #025563;
  box-shadow: 3px 3px 13px 0px rgba(0,0,0,0.5);
}

/* Wrapper controls the visible area */
#game-wrapper {
  width: 100vw;    /* or a fixed size */
  /*height: 100vh;*/
  overflow: hidden; 
  display: flex;
  justify-content: center;
  /*align-items: center;*/
  background: #025563; /* game background */
  position: relative;
}

/* Container is the zoomable world */
#game-container {
  position: relative;
  width: 0px;   /* your game world size */
  height: 100vh;
  transform-origin: center center; /* scaling around the middle */
  /* transition: transform 2s ease; /* smooth zoom */
  background-color:#025563;
  transform: scale(0.6);
  top: -100px;
  left: 0px;
}

#game-wrapper .gumb{
    position: absolute;
    z-index: 1000;   
    border: none;
    padding: 2px 30px;
    outline: none;
    color:#fff;
}

#game-wrapper .gumb svg{
    position: absolute;
    top: calc(50vh - 24px);
    left: calc(50% - 24px);
    animation: blink1 2s ease-in-out infinite alternate;
}

#game-wrapper .gumb.skrij{
    pointer-events: none;
}

#game-wrapper .gumb.skrij svg{
    display: none;
}

@keyframes blink1{
    from{opacity: 0}
    to{opacity: 1}
}

#game-wrapper #gumb-levo {
  top: 0;
  width: 10vw;
  height: 100%;
  left: 0;
  background-color: rgba(0,0,0,0.0);
  
}
#game-wrapper #gumb-desno {
  top: 0;
  width: 10vw;
  height: 100%;
  right: 0;
  background-color: rgba(0,0,0,0.0);
  
}
#game-wrapper #gumb-gor{left: 50%; top: 5px;}
#game-wrapper #gumb-dol{left: 50%;bottom:5px;}

#game-container > div{
    position: absolute;
}

#game-container div{
    background-repeat: no-repeat;
}

.drevo, .grm, .kopno, .odsev, .predmet, .skala, .klepet, .oblacek{
    position: absolute;
    pointer-events: all;
}

.grm:hover{
    /*animation: migaj1 15s ease-in-out infinite;*/
}

.oblaki1{
    background-image: url('/bundles/mkzucimse/images2/elements/oblaki_beli.png');
    left: -3000px;
    width: 6604px;
    height: 500px;
    animation: potuj1 linear 250s infinite;
    top: 0px;
    background-repeat: repeat-x !important;
    pointer-events: none;
    
}

@keyframes potuj1{
    from {background-position: 0px 0px;}
    to {background-position: 100% 0px;}
}

.nebo, #filter2nebo {
    width: 7500px;
    height: 3500px;
    top: -3200px;
    left: -3300px;
}

.nebo{
  /*background-color: #43c6ce;*/
  background: linear-gradient(90deg,rgba(59, 187, 237, 1) 30%, rgba(255, 252, 171, 1) 46%, rgba(255, 252, 171, 1) 53%, rgba(120, 143, 125, 1) 68%);
}

#filter2nebo {
  background-color: #091420eb;
  mix-blend-mode: color;
    display: none;
}

.oblak2 {
  background-image: url('/bundles/mkzucimse2/images/otocje/oblak 2.png');
  width: 6000px;
  height: 250px;
  animation: potuj1 linear 400s infinite;
  top: 46px;
  left: -2000px;
  animation-delay: -120s;
  filter: brightness(0.95);
  
}

.zoomable{
    position: relative;
}

.zoomable::before {
    display: block;
    content: "";
    width: 260px;
    height: 300px;
    position: absolute;
    top: -110px;
    left: -40px;
    background: none;
}




.otokpoglavarznanja{
    left: 473px;
    top: 482px;
    height: 70px;
}

.cicisvet{left: -1004px; top: 742px; width: 400px; background: none;}

.cicisvet .kit{
    top: 0px;
    left: 0px;
    top: 100px;
}

.cicisvet .cicisvet-tabla{
    left: 60px;
    top: 0px;
}


.otok1{left: -1146px;top: 315px; height: 80px; width: 280px;}
.otok2{left: -1347px;top: 584px; width: 450px;}
.otok3{left: -659px;top: 500px;height: 100px; width: 468px;}
.otok4{left: -429px;top: 842px; width: 450px;}
.otok5{left: -150px;top: 445px; height: 290px; width: 450px;}
.otok7{left: 782px;top: 469px; width: 450px;}
.otok8{left: 507px;top: 840px; width: 450px;}
.otok6{left: 688px;top: 299px; width: 450px;}
.otok9{left: -127px;top: 255px; width: 450px;}

.otok1,.otok2,.otok3{
    text-transform: uppercase;
}

#filter1 {
  position: fixed;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: color-burn;
  background-color: #cfe2ff;
  opacity: 0.5;
  left: 0;
}

.pngsenca{
    filter: drop-shadow(0px 0px 1px rgb(0, 0, 0));
}

div.klepet {
    cursor: pointer;
    font-size: 22px;
    border: 1px solid #000;
    width: 40px;
    height: 27px;
    background-color: #fff;
    border-radius: 10px;
    line-height: 11px;
    text-align: center;

    {% if not is_granted('ROLE_KLEPET') %}display: none;{% endif %}
}

div.klepet:hover{
    color:gold;
    border: 1px solid gold;
}

div.klepet::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: calc(86% - 10px);
  border-width: 5px 2px 0 6px;
  border-style: solid;
  border-color: #000 transparent transparent transparent;
}

div.klepet:hover::after{
  border-color: gold transparent transparent transparent;
}  


#gui #chat-container{
    position: absolute;
    top: -40px;
    width: 80%;
    left: calc(10%);
    max-width: 100%;
    transition: all 0.3s ease-in-out;
}

#gui #chat-container[data-id='1'],
#gui #chat-container[data-id='2']{
    text-transform: uppercase;
}

#gui #chat-container.skrij{
    opacity: 0;
    pointer-events: none;
}

#gui #chat-container .navodila{
    font-size: 0.8em; 
    color:#fff; 
    text-shadow: 1px 1px 1px #000;
    padding-left: 20px;
    padding-right: 20px;
}

#gui #chat-container .navodila .zapri{
    color:#000;
    cursor: pointer;
    text-shadow: none;
    pointer-events: all;
}

#gui #chat-container .navodila .zapri:hover{
    color:red;
}

#gui #chat-container .vnos {
  width: 100%;
  border-radius: 100px;
  font-size: 16px;
  color: #333;
  padding: 8px 11px 8px 18px;
  box-shadow: 0px 0px 11px 6px rgba(0,0,0,0.1);
  display: flex;
  background-color: #fff;
  border: 2px solid #fff;
}

#gui #chat-container.posiljam{
    pointer-events: none;
}

#gui #chat-container.posiljam .vnos{
    background: repeating-linear-gradient(120deg,#fffbe4 0 10px,white 10px 19px);
    animation: moveBG 100s linear infinite;
}

@keyframes moveBG {
  to {
    background-position: 4000px 0;
  }
}

#gui #chat-container .vnos input[name=vnos]{
    background: transparent;
    border: 0;
    outline: none;     
    box-shadow: none;  
    width: 100%;
}

#gui #chat-container .vnos input[name=vnos]:hover,
#gui #chat-container .vnos input[name=vnos]:focus,
#gui #chat-container .vnos input[name=vnos]:active{
    outline: none;     
    box-shadow: none;  
    
}

#gui #chat-container .vnos button {
    background-color: #000;
    color: #fff;
    border-radius: 100px;
    border: 0;
    width: 35px;
    height: 35px;
}

.dark1{filter: brightness(0.5) hue-rotate(20deg);}
.dark2{filter: brightness(0.6) hue-rotate(210deg);}
.dark3{filter: hue-rotate(210deg) brightness(0.9) grayscale(0.6);}

.mirror{
    transform: scaleX(-1);
}

.filter{
    /*display: none;*/
}

.otok .chat{
    position: absolute;
    width: 600px;
    border: 0px solid #000;
    min-height: 20px;
    z-index: 100000;
    pointer-events: none;
    max-width: 90vw;
}

.otok .chat .vprasanje{
    background-color: #000;
    color:#fff;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 1em;
    line-height: 1.2em;
    margin-bottom: 3px;
    animation: fadeOutMinute 120s linear forwards;
    display: inline-block;    
    clear: both;
    
}

.otok .chat .sporocilo{
    background-color: rgba(255,255,255,0.9);
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 1em;
    line-height: 1.2em;
    margin-bottom: 3px;
    animation: fadeOutMinute 120s linear forwards;
    display: inline-block;
    clear: both;
    break-before: always;
}

@keyframes fadeOutMinute{
    0% {opacity: 1 pointer-events: all;}
    90% {opacity: 1; pointer-events: all;}
    100% {opacity: 0; pointer-events: none;}
}

.vila {
  background-image: url('/bundles/mkzucimse2/images/otocje/otok 3 - vila navikanka.svg');
  width: 167px;
  height: 201px;
  position: absolute;
  top: -100px;
  left: 90px;
  scale: 0.7;
}

.zmaj {
  background-image: url('/bundles/mkzucimse2/images/otocje/zmaj.svg');
  width: 305px;
  height: 147px;
  position: absolute;
  scale: 1;
}

.vampir {
    background-image: url('/bundles/mkzucimse2/images/otocje69/vampir1.png');
    width: 207px;
    height: 261px;
    position: absolute;
    top: -110px;
    transform: scaleX(-0.8) scaleY(0.8);
    left: -100px;
}

.velikan {
  background-image: url('/bundles/mkzucimse2/images/otocje69/cvek1.png');
  width: 207px;
  height: 261px;
  position: absolute;
  scale: 0.8;
}

.sirena {
  background-image: url('/bundles/mkzucimse2/images/otocje69/sirena1.png');
  width: 253px;
  height: 217px;
  position: absolute;
  top: -110px;
  left: 340px;
  scale: 0.7;
}

.poglavar {
  background-image: url('/bundles/mkzucimse2/images/otocje69/strogos1.png');
  width: 122px;
  height: 284px;
  position: absolute;
  top: -210px;
  left: 120px;
  scale: 0.7;
}

.svetilnik{
  background-image: url('/bundles/mkzucimse2/images/otocje/svetilnik1.png');
  width: 122px;
  height: 284px;
  position: absolute;
  top: -210px;
  left: -580px;    
}

.naobzorju{
  background-image: url('/bundles/mkzucimse2/images/otocje/otok svetilnik.png');
  width: 410px;
  height: 100px;
  position: absolute;
  top: 260px;
  left: -720px;     
}

.ciciplaza{
  background-image: url('/bundles/mkzucimse2/images/otocje/ciciplaza.png');
  width: 410px;
  height: 100px;
  position: absolute;
 
}

.nande {
  background-image: url('/bundles/mkzucimse2/images/otocje/nande.svg');
  width: 140px;
  height: 150px;
  position: absolute;
}

.skoljka1 {
  background-image: url('/bundles/mkzucimse2/images/otocje/skoljka 1.svg');
  width: 140px;
  height: 150px;
  position: absolute;
}

.morskazvezda {
  background-image: url('/bundles/mkzucimse2/images/otocje/morska zvezda.svg');
  width: 140px;
  height: 150px;
  position: absolute;
}

.nande {
  background-image: url('/bundles/mkzucimse2/images/otocje/nande.svg');
  width: 140px;
  height: 150px;
  position: absolute;
}

.tablapristanstarsi{
  background-image: url('/bundles/mkzucimse2/images/otocje/pristan.png');
  width: 140px;
  height: 150px;
  position: absolute;    
}

.tablapark{
  background-image: url('/bundles/mkzucimse2/images/otocje/park.png');
  width: 140px;
  height: 150px;
  position: absolute;    
}

.ucnepoti{
    position: absolute;  
    left: -207px; 
    top: 280px;
    scale: 1.3;
}

#gumbucnepoti {
  background-image: url("/bundles/mkzucimse/images/otocje/boja_ucnepoti_starejsi.png");
  height: 270px;
  width: 170px;
  z-index: 100;
  animation: levodesno 4s 1s ease-in-out infinite alternate;
  transform: scale(0.8) translateX(0px) translateY(0px);
}

#gumbucnepoti:hover {
  background-position: 0 -292px;
}

@keyframes levodesno{
    from {transform: scale(0.8) translateX(0px) translateY(0px)}
    to {transform: scale(0.8) translateX(8px) translateY(-4px)}
}

.gumb.zapri {
  position: absolute;
right: 30px;
top: 2px;
  color: #6f3f31;
  font-size: 36px;
  background-color: transparent;
  border: none;
}

.gumb.zapri:hover{
    color:#fff;
}

.gumb {
  font-size: 1.1em;
  padding: 8px 15px;
  color: #fff;
  border-radius: 20px;
  border: 1px solid #fff;
  cursor: pointer;
}

.gumb:hover{
    filter: brightness(1.1);
}

.gumb.zeleni{
    background-color:#8dc63f;
}

.gumb.modri{
    background-color:#048988;
}     

.gumb.majhen{
  font-size: 0.9em;
  padding: 4px 6px;    
  border-radius: 5px;
}

.promoobvestilo {
  color:#3b3977;
  position: absolute;
  z-index: 100000;
  left: calc(50% - 225px);
  top: 20vh;
  background-color: rgba(255, 255, 255, 0.9);
  width: 450px;
  padding: 20px;
  border-radius: 10px;
  font-size: 19px;
  text-align: center;
  max-width: 100%;
  transition: all 0.6s cubic-bezier(.68,-0.55,.27,1.55);
}

.promoobvestilo p{
    line-height: 1.3em;
    margin-bottom: 15px;
}

.promoobvestilo .vecji{
    font-size: 2em;
    font-weight: bold;
    margin: 10px 0;
    display: inline-block;
}

.promoobvestilo .manjsi{
    font-size: 0.875em;
}

.promoobvestilo.skrij{
    pointer-events: none;
    opacity: 0;
    top: 200px;
    scale: 0.5;
}

.otok5 .oblacek{
    pointer-events: none;
    animation: levodesno2 5s ease-in-out infinite alternate;
}

.malioblacek1{
  background-image: url('/bundles/mkzucimse2/images/otocje/otok 5 - oblacek 1.svg');
  width: 140px;
  height: 150px;     
  animation-delay: -1s !important;
}

.malioblacek2{
  background-image: url('/bundles/mkzucimse2/images/otocje/otok 5 - oblacek 2.svg');
  width: 140px;
  height: 150px;     
  animation-delay: -2s !important;
}

.malioblacek3{
  background-image: url('/bundles/mkzucimse2/images/otocje/otok 5 - oblacek 3.svg');
  width: 140px;
  height: 150px;      
  animation-delay: -3s !important;  
}

.malioblacek4{
  background-image: url('/bundles/mkzucimse2/images/otocje/otok 5 - oblacek 4.svg');
  width: 140px;
  height: 150px;    
  animation-delay: -4s !important;
}

@keyframes levodesno2{
    from {transform: translateX(0px)}
    to {transform: translateX(48px)}
}

.titi {
  position: absolute;
  background-image: url('/bundles/mkzucimse2/images/otocje/titi.png');
  width: 80px;
  height: 94px;
  transition: all 0.5s cubic-bezier(.68,-0.55,.27,1.55);
  transform: scaleX(-1);
}

.kuku:hover .titi{
    transform: scaleX(-1) translateX(-20px) translateY(-20px) rotate(-10deg);
}

.carovnica {
  position: absolute;
  background-image: url('/bundles/mkzucimse2/images/otocje/carovnica.svg');
  width: 167px;
  height: 163px;
}

.muca {
  position: absolute;
  background-image: url('/bundles/mkzucimse2/images/otocje/muca.svg');
  width: 167px;
  height: 163px;
}

.skrati {
  position: absolute;
  background-image: url('/bundles/mkzucimse2/images/otocje/skrat 1.svg');
width: 97px;
  height: 129px;
}

.avto {
  position: absolute;
  background-image: url('/bundles/mkzucimse2/images/otocje/otok 1 - avto.svg');
width: 97px;
  height: 129px;
}

@media (max-width: 480px) {
    #glava .logo{
        width: 130px !important;
    }
    #game-container{
        transform: scale(0.6) translateY(-300px);
    }
    #game-wrapper{
        height: 90vh;
    }
    #game-wrapper .gumb{
        display: none;
    }

    .sf-toolbar{
        display: none !important;
    }
    .promoobvestilo{
        max-width: calc(100% - 20px);
        left: 10px;
        right: 10px;
    }
}

@media (max-width: 975px) {
    #game-wrapper .gumb{
        display: none;
    }    
    body.np #gui{
        display: none;
    }    
}

.flasa2{
    position: absolute;
    left: 2400px;
    top: 380px;
    
}

.flasa2 .steklenica{
    cursor: pointer;
    opacity: 0;
    animation: steklenica1 60s 10s linear infinite;
}

.flasa2 .steklenica:hover{
    filter: brightness(1.2);
}

@keyframes steklenica1{
    0% {transform: translateX(-100px) translateY(-200px) scale(0.2); opacity: 0;}
    20% {transform: translateX(0px) translateY(0px) scale(1); opacity: 1;}
    50% {transform: translateX(300px) translateY(0px) scale(1); opacity: 1;}
    65% {transform: translateX(420px) translateY(-200px) scale(0.2); opacity: 0;}
    100% {transform: translateX(350px) translateY(-50px) scale(0.2); opacity: 0;}
}


.flasa2 .nadvodo{
    height: 65px;
    overflow: hidden;
}

.flasa2 .nadvodo .f{
    background-image: url('/bundles/mkzucimse2/images/flasa2.png');
    width: 53px;
    height: 82px;
    background-size: contain;    
    animation: gordol2 2s ease-in-out infinite alternate;
}

@keyframes gordol2{
    from {transform: translateY(0px)}
    to {transform: translateY(10px)}
}

.flasa2 .podvodo{
    height: 65px;
    overflow: hidden;
    opacity: 0.1;
}    

.flasa2 .podvodo .f{
    background-image: url('/bundles/mkzucimse2/images/flasa2.png');
    width: 53px;
    height: 82px;
    background-size: contain;    
    transform: scaleX(-1) rotate(180deg);        
    animation: gordol2mirrored 2s ease-in-out infinite alternate;    
}

@keyframes gordol2mirrored{
    from {transform: scaleX(-1) rotate(180deg) translateY(15px)}
    to {transform: scaleX(-1) rotate(180deg) translateY(25px)}
}

.celina15{
    width: 2800px;
    border-radius: 300px;
    left: -3750px;
}

.celina15vrh{
    left: -3300px;
}

.celina69{
    border-radius: 300px;
    border-radius: 100px;
    background-position: -70px;
    left: 860px;
}

.celina69vrh{
    left: 1320px;
}

.tabla1{
    scale: 2;
}

.krmilo{
    background-image: url('/bundles/mkzucimse2/images/krmilo.png');
    width: 150px;
    height: 150px;
    --speed: 30s;
    display: inline-block;
    animation: rotate3 var(--speed) linear infinite;
}

@keyframes rotate3 {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}