/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 5.10.2021, 10:00:00
    Author     : urossr
*/

@font-face {
    font-family: 'LitterBox'; /*a name to be used later*/
    src: url('fonts/LitterboxICGA.otf'); /*URL to font*/
}

@font-face {
    font-family: 'FreckleFace'; /*a name to be used later*/
    src: url('fonts/FreckleFace-Regular.ttf'); /*URL to font*/
}

@font-face {
    font-family: 'MKZTropen-Sans'; /*a name to be used later*/
    src: url('fonts/MKZTropen-SansA.ttf'); /*URL to font*/
}

/* IZ ORIGINALA */

.otok .podlaga {
  overflow: auto;
  background-color: rgba(243, 231, 217, 0.95);
  border: 2px solid #F3E7D9;
  box-shadow: 0 2px 4px #BC9786;
  min-height: 560px;
  margin: 0;
  padding: 32px 10px 67px 10px;
  position: relative;
  -webkit-border-radius: 0px 0px 8px 8px;
  -moz-border-radius: 0px 0px 8px 8px;
  border-radius: 0px 0px 8px 8px;
}

.plaza, .cicisvet, .razred10 {
  background-image: url('../images/ozadja/plaza2023.jpg');
  background-color: #009087;
}


#vsebina{
    margin: 0; 
    padding: 0;
}

#scenarij{
    display: none;
}

.container{
    max-width: 1050px;
}


body{
    font-family: 'Trebuchet MS';
}

header {
  box-shadow: 0px 2px 10px -4px rgba(255,255,255,0.8);
  background-color: rgba(0,0,0,0.08);
  z-index: 10;
  position: relative;
}

header > .container {
    padding: 12px 0;
}

header .logo {
  max-width: 100%;
  width: 540px;
}

/* OTOČJE */

.otocje{
    background-color:#185393;
}

/* OTOK RAZREDI */

.otok {
  background-position: center top;
  background-repeat: no-repeat;
  height: 200px;
}

.plaza, .razred10{
    background-image: url('../images/ozadja/plaza2019.jpg');
    background-color:  #048988;   
}

.razred100{
    background-image: url('../images/ozadja/morje-1-5.jpg');
    background-color:  #004b68;
}

.razred1{
    background-image: url('../images/ozadja/otok1.jpg');
    background-color:  #008ca3;
}

.razred2{
    background-image: url('../images/ozadja/otok2.jpg');
    background-color:  #0094A4;    
}

.razred3{
    background-image: url('../images/ozadja/otok3.jpg');
    background-color:  #048ba8;    
}

.razred4{
    background-image: url('../images/ozadja/otok4.jpg');
    background-color:  #23313c;    
}

.razred5{
    background-image: url('../images/ozadja/otok5.jpg');
    background-color:  #206769;    
}

.razred6{
    background-image: url('../images/ozadja/otok6novi.jpg');
    background-color:  #206c80;    
}

.razred7{
    background-image: url('../images/ozadja/otok7novi.jpg');
    background-color:  #004d5f;    
}

.razred8{
    background-image: url('../images/ozadja/otok8novi.jpg');
    background-color:  #399996;    
}

.razred9{
    background-image: url('../images/ozadja/otok9novi.jpg');
    background-color:  #34706a;    
}

/* PODLAGA */

#podlaga{
    padding: 50px 10px 37px 10px;    
    overflow: auto;
     min-height: 650px;  
}

.otok #podlaga {
    
    background-color: rgba(243, 231, 217, 0.95);
    
  border: 2px solid #F3E7D9;
  box-shadow: 0 2px 4px #BC9786;
 
  position: relative;
  border-radius: 0px 0px 8px 8px;
  margin-bottom: 50px;
}


/* DROBTINICE */

#drobtinice {
    position: relative;
    z-index: 1000;
    margin-bottom: -25px;
    height: 26px;
    line-height: 1em;
}

#drobtinice div {
    border-radius: 0px 0px 15px 0px;
    box-shadow: 1px 1px 2px -1px rgba(0,0,0,0.7);
    color: #FFFFFF;
    display: inline-block;
    font-size: 13px;
    letter-spacing: -0.025em;
    padding: 3px 10px 3px 31px;
    margin-right: 0px;
    position: relative;
    margin-left: -30px;
    transition: all 0.2s linear;
    text-transform: uppercase;
}

#drobtinice a:hover div {
    color: #dcee7f;
}

#drobtinice a{
    position: relative;
}

#drobtinice .razred { margin-left: 0px; padding-left: 15px; }

#drobtinice a:nth-of-type(1){ z-index: 20; }
#drobtinice a:nth-of-type(2){ z-index: 19; }
#drobtinice a:nth-of-type(3){ z-index: 18; }
#drobtinice a:nth-of-type(4){ z-index: 17; }

#drobtinice div:nth-of-type(1){ z-index: 10; }
#drobtinice div:nth-of-type(2){ z-index: 9; }
#drobtinice div:nth-of-type(3){ z-index: 8; }
#drobtinice div:nth-of-type(4){ z-index: 7; }

#drobtinice .razred{
    background: #555;
    background: linear-gradient(to bottom, #777777 0%, #555555 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-radius: 0px 0px 15px 10px;
}

#drobtinice .predmet{
    background-color: #ed1d24;
}

#drobtinice .predmet.slovenscina{       background-color: #c72225;   }
#drobtinice .predmet.matematika{        background-color: #ea5a00;   }
#drobtinice .predmet.spoznavanje-okolja{background-color: #7bab36;   }
#drobtinice .predmet.glasbena-umetnost{ background-color: #d9ba11;   }
#drobtinice .predmet.anglescina{        background-color: #ed1d24;   }
#drobtinice .predmet.geografija{        background-color: #539ed6;   }
#drobtinice .predmet.naravoslovje{      background-color: #95c400;   }
#drobtinice .predmet.fizika{            background-color: #8f80bc;   }
#drobtinice .predmet.kemija{            background-color: #ed1d24;   }
#drobtinice .predmet.biologija{         background-color: #ed1d24;   }
#drobtinice .predmet.kultura{           background-color: #5a989e;   }
#drobtinice .predmet.zgodovina{         background-color: #b48755;   }
#drobtinice .predmet.narava{            background-color: #ed1d24;   }
#drobtinice .predmet.druzba{            background-color: #0661be;   }
#drobtinice .predmet.matematik-nande{   background-color: #ed1d24;   }

#drobtinice .ts{
    background-color: #4D8010;
}

#drobtinice .prezentacija{
    background-color: #4b119f;
}

#drobtinice .naloga{
    background-color: #3050BF;
}

footer {
  color: #fff;
  font-size: 11px;
  position: relative;
  z-index: 10;
  padding-top: 20px;
}

body.prezentacija{
    box-shadow: 0px -8px 4px -8px rgba(255,255,255,0.8);
}

footer a{
    color:#fff;
    text-decoration: underline;
}

footer a:hover{
    color:#fff;
    text-decoration: none;
}


/******************************** ELEMENTI NOVEGA OTOČJA ***************************************/

/********* LASTNOSTI *************/

.hue1{filter: hue-rotate(10deg);}
.hue2{filter: hue-rotate(20deg);}
.hue3{filter: hue-rotate(30deg);}
.hue4{filter: hue-rotate(40deg);}
.hue5{filter: hue-rotate(50deg);}
.hue6{filter: hue-rotate(60deg);}

.hue10{filter: hue-rotate(100deg);}

.hue14{filter: hue-rotate(140deg);}
.hue17{filter: hue-rotate(170deg);}

.hue27{filter: hue-rotate(270deg);}

.hue31{filter: hue-rotate(310deg);}

.delay1{animation-delay: 1s !important;}
.delay2{animation-delay: 2s !important;}
.delay3{animation-delay: 3s !important;}
.delay4{animation-delay: 4s !important;}
.delay5{animation-delay: 5s !important;}



/************ ELEMENTI ***************/

.otok1 .kopno {
    background-image: url('/bundles/mkzucimse2/images/otocje/otok 1.png');
    width: 282px;
    height: 76px;
}

.otok1 .odsev {
  background-image: url('/bundles/mkzucimse2/images/otocje/otok 1 - odsev.png');
  top: 65px;
  width: 250px;
  height: 93px;
  left: 13px;
}

.otok2 .kopno{
    background-image: url('/bundles/mkzucimse2/images/otocje/otok 2.png');
    width: 482px;
    height: 133px;
}

.otok2 .odsev {
  background-image: url('/bundles/mkzucimse2/images/otocje/otok 2 - odsev.png');
  top: 123px;
  width: 482px;
  height: 133px;
  left: 80px;
}

.otok3 .kopno {
  background-image: url('/bundles/mkzucimse2/images/otocje/otok 3.png');
  width: 470px;
  height: 105px;
}

.otok3 .odsev {
  background-image: url('/bundles/mkzucimse2/images/otocje/otok 3 - odsev.png');
  top: 93px;
  width: 482px;
  height: 133px;
  left: 20px;
}

.otok4 .kopno{
background-image: url('/bundles/mkzucimse2/images/otocje/otok 4.png');
  width: 547px;
  height: 179px;
}

.otok4 .odsev {
  background-image: url('/bundles/mkzucimse2/images/otocje/otok 4 - odsev.png');
  top: 169px;
  width: 525px;
  height: 83px;
  left: 10px;
}

.otok5 .kopno{
    background-image: url('/bundles/mkzucimse2/images/otocje/otok 5.png');
    width: 573px;
    height: 291px;
}

.otok5 .spredaj {
  background-image: url('/bundles/mkzucimse2/images/otocje/otok 5 spredaj.png');
  width: 363px;
  height: 181px;
  top: 150px;
  position: absolute;
  left: 180px;
}

.otok5 .odsev {
  background-image: url('/bundles/mkzucimse2/images/otocje/otok 5 - odsev.png');
  top: 279px;
  width: 525px;
  height: 83px;
  left: 10px;
}

.otok6 .kopno{
    background-image: url('/bundles/mkzucimse2/images/otocje69/otok 6.png');
    width: 302px;
    height: 133px;
}

.otok6 .odsev {
  background-image: url('/bundles/mkzucimse2/images/otocje69/otok 6 - odsev.png');
  top: 70px;
  width: 482px;
  height: 133px;
  left: 30px;
}

.otok8 .kopno{
    background-image: url('/bundles/mkzucimse2/images/otocje69/otok 7.png');
    width: 482px;
    height: 133px;
}

.otok8 .odsev {
  background-image: url('/bundles/mkzucimse2/images/otocje69/otok 7 - odsev.png');
  top: 123px;
  width: 482px;
  height: 133px;
  left: 30px;
}

.otok7 .kopno {
  background-image: url('/bundles/mkzucimse2/images/otocje69/otok 8.png');
  width: 574px;
  height: 236px;
}

.otok7 .odsev {
  background-image: url('/bundles/mkzucimse2/images/otocje69/otok 8 - odsev.png');
  top: 210px;
  width: 482px;
  height: 133px;
  left: 40px;
}

.otok9 .kopno {
  background-image: url('/bundles/mkzucimse2/images/otocje69/otok 9 sirene - 2.png');
  width: 632px;
  height: 140px;
}

.otok9 .odsev {
  background-image: url('/bundles/mkzucimse2/images/otocje69/otok 9 - odsev.png');
  top: 123px;
  width: 617px;
  height: 93px;
  left: 10px;
}

.otokpoglavarznanja .kopno {
  background-image: url('/bundles/mkzucimse2/images/otocje69/otok poglavar znanja 6-9.png');
  width: 182px;
  height: 140px;
}


.zoga{
    background-image: url('/bundles/mkzucimse2/images/otocje/zoga.svg');
    width: 47px;
    height: 43px;
}

.tabla1{
    background-image: url('/bundles/mkzucimse2/images/otocje/tabla 1.svg');
    width: 85px;
    height: 59px;   
}

.tabla2 {
  background-image: url('/bundles/mkzucimse2/images/otocje/tabla dvojna 1-5 svetla - puscica.svg');
  width: 109px;
  height: 54px;
}

.tabla2::after{
    content: "";
    background-image: url('/bundles/mkzucimse2/images/otocje/tabla dvojna 6-9 - palica.svg');
}

.palica{
    background-image: url('/bundles/mkzucimse2/images/otocje/tabla dvojna 6-9 - palica.svg');
  width: 47px;
  height: 142px;
  position: absolute;
}


.tabla3 {
  background-image: url('/bundles/mkzucimse2/images/otocje/tabla 3.svg');
  width: 95px;
  height: 103px;
}

.predmet .napis{
    color:#fff;
    position: absolute;
    text-align: center;
    width: 100%;
    font-size: 0.9em;
}

.musnica{
    background-image: url('/bundles/mkzucimse2/images/otocje/musnica.svg');
    width: 49px;
    height: 50px;   
}

.skala1{
    background-image: url('/bundles/mkzucimse2/images/otocje/skala 1.png');
    width: 140px;
    height: 114px;
}

.skala1::before{
    content: "";
    width: 100%;
    height: 20px;
    background-color:#ccc;
}

.skala2{
    background-image: url('/bundles/mkzucimse2/images/otocje/skala 2.png');
    width: 133px;
    height: 124px;
}

.skala3{
    background-image: url('/bundles/mkzucimse2/images/otocje/skala 3.svg');
    width: 79px;
    height: 73px;   
}

.skala4{
    background-image: url('/bundles/mkzucimse2/images/otocje/skala 4.svg');
    width: 88px;
    height: 73px;   
}

.skala5{
    background-image: url('/bundles/mkzucimse2/images/otocje/skala 5.svg');
    width: 94px;
    height: 50px;   
}

.skala6{
    background-image: url('/bundles/mkzucimse2/images/otocje69/skala 1.png');
    width: 101px;
    height: 56px;   
}

.skala7{
    background-image: url('/bundles/mkzucimse2/images/otocje69/skala 2.png');
    width: 142px;
    height: 112px;   
}

.skala8{
    background-image: url('/bundles/mkzucimse2/images/otocje69/skala 3.png');
    width: 86px;
    height: 68px;   
}

.roza1 {
  background-image: url('/bundles/mkzucimse2/images/otocje/otok 3 - roza1.svg');
  width: 53px;
  height: 114px;
}

.roza2 {
  background-image: url('/bundles/mkzucimse2/images/otocje/otok 3 - roza2.svg');
  width: 51px;
  height: 112px;
}

.roza3 {
  background-image: url('/bundles/mkzucimse2/images/otocje/otok 3 - roza3.svg');
  width: 45px;
  height: 112px;
}




.celina15vrh {
  background-image: url('/bundles/mkzucimse2/images/otocje/celina 1-5 vrh.png');
  width: 1500px;
  height: 330px;
  left: -960px;
  top: 200px;
  
}

.celina15 {
  background-image: url('/bundles/mkzucimse2/images/otocje/celina 1-5 v.png');
  width: 2000px;
  height: 955px;
  left: -1010px;
  top: 180px;
}

.celina69vrh {
  background-image: url('/bundles/mkzucimse2/images/otocje/celina 6-9 zgornji del rev.png');
  width: 1730px;
  height: 800px;
  left: 3060px;
  top: 120px;
}

.celina69 {
  background-image: url('/bundles/mkzucimse2/images/otocje/celina 6-9 spodnji del rev.png');
  width: 2509px;
  height: 666px;
  left: 2600px;
  top: 550px;
  pointer-events: none;
}

.drevo1 {
    background-image: url('/bundles/mkzucimse2/images/otocje/drevo-deblo.svg');
    width: 275px;
    height: 329px;
    transform-origin: 138px 320px;
}

.drevo1 .krosnja{
    background-image: url('/bundles/mkzucimse2/images/otocje/drevo-krosnja.svg');  
    width: 275px;
    height: 227px;
    transform-origin: 130px 200px;
}

.grm1a {
    background-image: url('/bundles/mkzucimse2/images/otocje/GRM simple non line.svg');
    width: 131px;
    height: 141px;
    transform-origin: 65px 140px;
}

.grm1 {
    background-image: url('/bundles/mkzucimse2/images/otocje/grm 1.svg');
    width: 242px;
    height: 138px;
    transform-origin: 65px 140px;
}

.grm2 {
    background-image: url('/bundles/mkzucimse2/images/otocje/grm 2.svg');
    width: 116px;
    height: 81px;
    transform-origin: 57px 81px;
}

.grm3 {
    background-image: url('/bundles/mkzucimse2/images/otocje/grm 3.svg');
    width: 95px;
    height: 64px;
    transform-origin: 47px 64px;
}

.grm4 {
    background-image: url('/bundles/mkzucimse2/images/otocje/grm 4.svg');
    width: 62px;
    height: 68px;
    transform-origin: 65px 140px;
}

/*.grm4d {
    background-image: url('/bundles/mkzucimse2/images/otocje/grm 4d.svg');
    width: 62px;
    height: 68px;
    transform-origin: 65px 140px;
}*/

.grm4 {
    background-image: url('/bundles/mkzucimse2/images/otocje/grm 4.svg');
    width: 62px;
    height: 68px;
    transform-origin: 65px 140px;
}

.grm5 {
    background-image: url('/bundles/mkzucimse2/images/otocje/grm 5.svg');
    width: 97px;
    height: 52px;
    transform-origin: 65px 140px;
}

.grm6 {
    background-image: url('/bundles/mkzucimse2/images/otocje/grm 6.svg');
    width: 48px;
    height: 52px;
    transform-origin: 65px 140px;
}

.grm6r {
    background-image: url('/bundles/mkzucimse2/images/otocje/grm 6 r.png');
    width: 127px;
    height: 134px;
    transform-origin: 25px 25px;
}

.grm7 {
    background-image: url('/bundles/mkzucimse2/images/otocje/grm 7.svg');
    width: 48px;
    height: 32px;
    transform-origin: 65px 140px;
}

.grm8 {
    background-image: url('/bundles/mkzucimse2/images/otocje/grm 8.svg');
    width: 53px;
    height: 34px;
    transform-origin: 27px 34px;
}

.pomol{
    background-image: url('/bundles/mkzucimse2/images/otocje/pomol.svg');
    width: 368px;
    height: 91px;
    transform-origin: 27px 34px;
}

.val1 {
    background-image: url('/bundles/mkzucimse2/images/otocje/valov.svg');
    width: 74px;
    height: 28px;
}

/***************** GENERIRANO ***************/

.oblacek3 {
  display: inline-block;
  position: relative;
  font-size: 13px;
  background: #fff;
    background-repeat: repeat;
  border-radius: 12px;
  padding: 10px 15px;
  max-width: 200px;
  pointer-events: none;
  box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.1);
  transition: all 0.3s ease-in-out;
  opacity: 0;
}

/* triangle tail */
.oblacek3::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: calc(50% - 10px);
  border-width: 20px 10px 0 10px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}

/* triangle border outline */
.oblacek3::before {
  content: "";
  position: absolute;
  bottom: -12px; /* slightly lower than the ::after */
  left: 28px;
  border-width: 12px 12px 0 12px;
  border-style: solid;
  border-color: transparent transparent transparent transparent; /* matches border color */
}

.oblacek3.levo::after{
    left: 60%;  
    border-width: 50px 10px 0 10px;  
    bottom: -33px;
    rotate: -50deg;
}

.oblacek3.desno::after{
    left: 40%;  
    border-width: 50px 10px 0 10px;  
    bottom: -33px;
    rotate: 50deg;
}

.otok .oblacek3{
    /*opacity: 0;*/
}

.otok:hover .oblacek3{
    opacity: 0.9;
    transform: translateY(-10px);
}

.otok:hover .oblacek3.levo{
    opacity: 0.9;
    transform: translate(-10px, -10px);
}

.otok:hover .oblacek3.desno{
    opacity: 0.9;
    transform: translate(10px, -10px);
}


/*************** CICISVET **********/

.cicisvet-tabla-container{

}

#cicisvet.zaklenjeno{
    cursor: default;
}

.cicisvet-tabla {
  background-image: url('/bundles/mkzucimse/images/plaza/cicisvet_tabla.png');
  left: 660px;
  top: 60px;
  width: 174px;
  height: 229px;
  position: absolute;
  scale: 0.6;
  
}

.floating2{
    animation: floating2 2s ease-in-out infinite alternate;
}

@keyframes floating2 {
    to {transform: translateY(10px)}
}         

.cicisvet-tabla .lucke{
    background-image: url('/bundles/mkzucimse/images/plaza/cicisvet_tabla_lucke.png');
    width: 174px;
    height: 229px;
    position: absolute;
    top: 1px;        
    animation: utripaj1 0.8s ease-in-out infinite alternate;
}

.cicisvet-tabla .lucke2{
    background-image: url('/bundles/mkzucimse/images/plaza/cicisvet_tabla_lucke2.png');
    width: 174px;
    height: 229px;
    position: absolute;
    top: 1px;        
    animation: utripaj1 0.8s ease-in-out infinite alternate;
    animation-delay: 0.8s;
}    

@keyframes utripaj1 {
  to {opacity: 0.2}
}        

.kit {
    scale: 0.85;
  left: 630px;
  top: 200px;
  width: 265px;
  height: 204px;
  transition: all 4s ease-in-out;
  position: absolute;
  transform-origin: 170px 100px;
  animation: plavaj1 20s ease-in-out infinite;
}

@keyframes plavaj1 {
  0%  {transform: scaleX(-1) translateX(-200px) translateY(-50px)}
  50%  {transform: scaleX(-1) translateX(0px) translateY(0px)}
  50.0001% {transform: scaleX(1) translateX(0px) translateY(0px)}
  99.9999% {transform: scaleX(1) translateX(200px) translateY(-50px)}
  100% {transform: scaleX(-1) translateX(-200px) translateY(-50px)}
}        

.kit .telo{
    position: absolute;
    background-image: url('/bundles/mkzucimse/images/plaza/kit.png');
    width: 263px;
    height: 204px;
}

.kit .odsev {
  background-image: url('/bundles/mkzucimse/images/plaza/kitodsev.png');
  position: absolute;
  left: 60px;
  top: 164px;
  width: 206px;
  height: 40px;
  background-repeat: no-repeat;
  animation: migetanje1 4s linear infinite alternate;
}  

@keyframes migetanje1 {
  0% {opacity: 0.3}
  20% {opacity: 1}
  40% {opacity: 0.4}
  60% {opacity: 1} 
  100% {opacity: 0.3}
}    

.kit .repcontainer {
  position: absolute;
  top: 97px;
  width: 200px;
  height: 100px;
  left: -5px;
}

.kit .repcontainer.maha .rep{
    animation: mahanje1 1s linear infinite alternate;
}

@keyframes mahanje1 {
  0% {transform: rotateZ(-2deg)}
  100% {transform: rotateZ(2deg)}
}     

.kit .repcontainer .repwrap{
    position: absolute;
    overflow: hidden;
    height: 68px;
    width: 160px;
    left: -80px;
}

.kit .repcontainer .rep{
    background-image: url('/bundles/mkzucimse/images/plaza/kitovrep2.png');
    background-repeat: no-repeat;
    position: absolute;
    left: 80px;
    width: 56px;
    height: 90px;
    transform: rotatez(0deg);
    transform-origin: 68px 88px;
}

.kit .repcontainer .odsev{
    background-image: url('/bundles/mkzucimse/images/plaza/kitovrepodsev.png');
    background-repeat: no-repeat;
    position: absolute;
    width: 31px;
    height: 26px;
    top: 68px;
    left: 15px;
    transform: rotateZ(10deg);
    transform-origin: 15px 0px;

}

.kit .zogacontainer{
    position: absolute;
    z-index: -100;
    animation: gordol1 2s ease-in-out infinite alternate;
    top: 20px;
}

@keyframes gordol1 {
  to {transform: translateY(-70px);}
}          

.kit .zogacontainer .zoga{
    position: absolute;
    background-image: url('/bundles/mkzucimse/images/plaza/cicisvet_zoga.png');
    background-repeat: no-repeat;      
    width: 100px;
    height: 100px;
    left: 120px;
    top: -65px;
    background-size: contain;
    transform-origin: 50px 45px;
    animation: rotacija1 5s linear infinite;
    opacity: 0.8;
}

@keyframes rotacija1 {
  to {transform: rotateZ(360deg)}
}         

.kit .zogacontainer .plusk{
    position: absolute;
    left: 70px;
    z-index: -100;
    top: 0px;
    transition: all 1s ease-in-out;
}

.kit .zogacontainer .plusk path {
    stroke-dasharray: 8;
    animation: dash 25s linear infinite;
    stroke-width: 6px;
    stroke: #7ed9dc;
}

@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
}
#cicisvet .cicisvet-tabla .kljucavnica{
    display:none;
    width: 40px;
    height: 50px;
    position: absolute;
    top: 77px;
    left: 29px;
}

#cicisvet.zaklenjeno .cicisvet-tabla:hover::after{
    opacity: 1;
}

#cicisvet.zaklenjeno .cicisvet-tabla .kljucavnica{
    display: block;
}
#cicisvet.zaklenjeno .cicisvet-tabla:after{
    content: "Za dostop do CICISVETA nimaš veljavne kode. Pridobiš jo z naročilom revije CICIBAN ali CICIDO.";
    background-color: #fff;
    border: 2px solid #999;
    border-radius: 15px;
    opacity: 0;
    padding: 14px;
    position: absolute;
    left: -230px;
    text-align: left;
    top: 28px;
    width: 200px;
    transition: all 0.3s linear;
    color: #555;
    line-height: 15px;
    font-size: 12px;
    pointer-events: none;
    z-index: 10000000;
    text-align: center;
}





/****************** ANIMACIJE ***************/

.veter1{
    animation: veter1 2s ease-in-out infinite alternate;
}

@keyframes veter1{
    from {transform: rotateZ(-2deg)}
    to {transform: rotateZ(2deg)}
}

.migaj1{
    animation: migaj1 15s ease-in-out infinite;
}

@keyframes migaj1{
    0% {transform: scale(1)}
    1% {transform: scale(1.02) rotate(-2deg)}
    2% {transform: scale(1.02) rotate(2deg)}
    3% {transform: scale(1) rotate(0deg)}
}

.blur1{
    /*animation: blur1 2s ease-in-out infinite alternate;*/
    filter: blur(5px);
}

@keyframes blur1{
    from{filter: blur(2px)}
    to{filter: blur(15px)}
}

.valovanje2{
    animation: valovanje2 1s ease-in-out infinite alternate;
}

@keyframes valovanje2 {
    from {transform: scaleX(0.9) scaleY(1.1)}
    to {transform: scaleX(1.1) scaleY(0.9) translateY(3px)}
}