body { font-family: Roboto; font-size: 16px; line-height: 1.3em; }

.nawigacja-animacji > span { margin: 0 0.2em; cursor: pointer; }

#promienie05a g > path:nth-child(1),
#fale > g > g > path:nth-child(1),
.fala-pulsowanie g > path:nth-child(1){
    fill-opacity: 0.1;
    animation-name: pulsowanie; animation-duration: 1.333s; animation-iteration-count: infinite;
    animation-delay: 0.666s;
}

#promienie05a g > path:nth-child(2),
#fale > g > g > path:nth-child(2),
.fala-pulsowanie g > path:nth-child(2){
    fill-opacity: 0.1;
    animation-name: pulsowanie; animation-duration: 1.333s; animation-iteration-count: infinite;
    animation-delay: 0.333s;
}

#promienie05a g > path:nth-child(3),
#fale > g > g > path:nth-child(3),
.fala-pulsowanie g > path:nth-child(3){
    fill-opacity: 0.2;
    animation-name: pulsowanie; animation-duration: 1.333s; animation-iteration-count: infinite;
}

#linie line {
    display: none;
    stroke-dasharray: 15;
    stroke-dashoffset: 150;
    stroke-width: 1px;
    animation: dash 1s linear backwards;
    animation-iteration-count: infinite;

}




.tooltip { display: none; position: absolute; font-size: 14px; }

.tooltip {
    background-color: white; padding: 1em 2em; transform: scale(0.1); display: block; opacity: 0;
    max-width: 340px; box-sizing: border-box; border: solid 1px rgba(224,224,224,1); border-radius: 18px;
    box-shadow: 0px 0px 40px rgba(0,0,0,0.4);
}
.tooltip h2 { font-size: 16px; }
.tooltip .img {
    width: 100%; height: 130px; background-color: rgba(0,0,0,0.05); margin-top: 2em; margin-bottom: 1em;
    background-image: url("../img/animacja-ekran-komputera.gif"); background-repeat: no-repeat;
    background-position: 50% 50%; background-size: contain;
}
.tooltip.opis-komputer .img { background-color: white; }

.tooltip ul { list-style: none; padding: 0; padding-left: 1.5em; }
.tooltip ul > li { margin-bottom: 0.5em; position: relative; }
.tooltip ul > li:before {
    content: " "; width: 1.3em; background-image: url("../img/check.svg"); background-repeat: no-repeat;
    background-size: contain; display: block; left: -1.5em; height: 1.3em; position: absolute;
}
.tooltip.open { display: block; transform: scale(1.0); opacity: 1; }


.tmp { box-sizing: border-box !important; border: solid 1px #00FF00 !important; }
.animacja-svg { position: relative; }
.animacja-svg > svg { width: 100%; }


.opis-latarni, .opis-latarni.open,
.opis-chmura, .opis-chmura.open,
.opis-komputer, .opis-komputer.open {

    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;

    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

#latarnia01 > g:not(#swiatlo01) { cursor: pointer; }
#latarnia01 > g:not(#swiatlo01):hover { opacity: 0.9; }
#latarnia-obrys { stroke-width: 0; stroke: #2de236; }
#latarnia01 > g:not(#swiatlo01):hover #latarnia-obrys { stroke-width: 3px; }

#chmura-obrys path { stroke-width: 0; stroke: #2de236; }
#chmura:hover { cursor: pointer; }
#chmura:hover { opacity: 0.9; }
#chmura:hover #chmura-obrys path { stroke-width: 6px; }

#komputer { cursor: pointer; }
#komputer:hover { opacity: 0.9; }
#komputer-obrys path { stroke-width: 0; stroke: #2de236; }
#komputer:hover #komputer-obrys path { stroke-width: 6px; }
#komputer-obrys.hover path { stroke-width: 6px; }

.opis-latarni { bottom: 10%; left: 10%; }
.opis-chmura { right: 50%; top:10% }
.opis-komputer { right: 10%; top:5%; min-width:300px; }

.alert-slick  div.slick-slide { padding: 1em; background-color: #fce8e8; border-radius: 12px;  }
.alert-slick h2.alert:before { content: " "; width: 2em; display: inline-block; height: 1.4em; margin-bottom: -5px;
    background-image: url("../img/ico-alert.svg"); background-size: contain; background-repeat: no-repeat;
    background-position: 50% 50%;
}
.alert-slick h2.info:before { content: " "; width: 2em; display: inline-block; height: 1.4em; margin-bottom: -5px;
    background-image: url("../img/ico-info.svg"); background-size: contain; background-repeat: no-repeat;
    background-position: 50% 50%;
}

#kolko01.end { display: none; }
#kolko02.end { display: none; }
#kolko03.end { display: none; }
#kolko04.end { display: none; }
#kolko05.end { display: none; }
#kolko06.end { display: none; }
#kolko07.end { display: none; }
#kolko08.end { display: none; }
#kolko09.end { display: none; }

#kolko01c.end { display: none; }


#tory path.widoczna { stroke: #666; stroke-width: 1; stroke-dasharray: 15; }
#tory #tor04a.tor-widoczny path.widoczna { stroke: #666; stroke-width: 1; stroke-opacity: 0.5; stroke-dasharray: 15; }
#tor03a.tor-widoczny { display: block; }
#tor04a.tor-widoczny { display: block; }
#tor05a.tor-widoczny { display: block; }

#promienie05a { display: none; }
#promienie05a.promienie-widoczne { display: block; }

/*
forwards
backwards
*/

.kierunek-a {
    stroke-dasharray: 15;
    stroke-dashoffset: -45;
    stroke-width: 1px;
    animation: dash 1s linear forwards;
    animation-iteration-count: infinite;
}
.kierunek-b {
    stroke-dasharray: 15;
    stroke-dashoffset: 150;
    stroke-width: 1px;
    animation: dash 1s linear forwards;
    animation-iteration-count: infinite;
}


@keyframes pulsowanie {

    0%   { fill-opacity: 0.1; }
    50%  { fill-opacity: 1; }
    100% { fill-opacity: 0.1; }

}

@keyframes dash {
    to {
        stroke-dashoffset: 60;
    }
}