@charset "utf-8";
.cbutton{position:relative;display:inline-block;padding:0;border:none;background:none;color:#286aab;font-size:1.4em;overflow:visible;-webkit-transition:color .7s;transition:color .7s;-webkit-tap-highlight-color:rgba(0,0,0,0)}
.cbutton.cbutton--click,.cbutton:focus{outline:none;color:#3c8ddc}
.cbutton__icon{display:block}
.cbutton__text{position:absolute;opacity:0;pointer-events:none}
.cbutton::after{position:absolute;top:50%;left:50%;margin:-35px 0 0 -35px;width:70px;height:70px;border-radius:50%;content:'';opacity:0;pointer-events:none}
.cbutton--box{width:24px;height:24px;border:4px solid #16232f}
.cbutton--box-color-1{background:#ff8b00}
.cbutton--box-color-2{background:#b61854}
.cbutton--box-color-3{background:#1d5cab}
.cbutton--box-color-4{background:#f2438c}
.cbutton--box-color-5{background:#ff6414}
.cbutton--box-color-6{background:#5ed500}
.cbutton--box-color-7{background:#07f}
.cbutton--box-color-8{background:#7bff00}
.cbutton--box-color-9{background:#fff}
.cbutton--effect-boris::after{background:rgba(170,170,170,0.1)}
.cbutton--effect-boris.cbutton--click::after{-webkit-animation:anim-effect-boris .3s forwards;animation:anim-effect-boris .3s forwards}
@-webkit-keyframes anim-effect-boris {
0%{-webkit-transform:scale3d(0.3,0.3,1);transform:scale3d(0.3,0.3,1)}
25%,50%{opacity:1}
to{opacity:0;-webkit-transform:scale3d(1.2,1.2,1);transform:scale3d(1.2,1.2,1)}
}
@keyframes anim-effect-boris {
0%{-webkit-transform:scale3d(0.3,0.3,1);transform:scale3d(0.3,0.3,1)}
25%,50%{opacity:1}
to{opacity:0;-webkit-transform:scale3d(1.2,1.2,1);transform:scale3d(1.2,1.2,1)}
}
.cbutton--effect-jelena::after{border:2px solid rgba(170,170,170,0.5)}
.cbutton--effect-jelena.cbutton--click::after{-webkit-animation:anim-effect-jelena .3s ease-out forwards;animation:anim-effect-jelena .3s ease-out forwards}
@-webkit-keyframes anim-effect-jelena {
0%{opacity:1;-webkit-transform:scale3d(0.5,0.5,1);transform:scale3d(0.5,0.5,1)}
to{opacity:0;-webkit-transform:scale3d(1.2,1.2,1);transform:scale3d(1.2,1.2,1)}
}
@keyframes anim-effect-jelena {
0%{opacity:1;-webkit-transform:scale3d(0.5,0.5,1);transform:scale3d(0.5,0.5,1)}
to{opacity:0;-webkit-transform:scale3d(1.2,1.2,1);transform:scale3d(1.2,1.2,1)}
}
.cbutton--effect-radomir::after{box-shadow:inset 0 0 0 35px rgba(170,170,170,0)}
.cbutton--effect-radomir.cbutton--click::after{-webkit-animation:anim-effect-radomir .5s ease-out forwards;animation:anim-effect-radomir .5s ease-out forwards}
@-webkit-keyframes anim-effect-radomir {
0%{opacity:1;-webkit-transform:scale3d(0.4,0.4,1);transform:scale3d(0.4,0.4,1)}
80%{box-shadow:inset 0 0 0 2px rgba(170,170,170,0.8);opacity:.1}
100%{box-shadow:inset 0 0 0 2px rgba(170,170,170,0.8);opacity:0;-webkit-transform:scale3d(1.2,1.2,1);transform:scale3d(1.2,1.2,1)}
}
@keyframes anim-effect-radomir {
0%{opacity:1;-webkit-transform:scale3d(0.4,0.4,1);transform:scale3d(0.4,0.4,1)}
80%{box-shadow:inset 0 0 0 2px rgba(170,170,170,0.8);opacity:.1}
100%{box-shadow:inset 0 0 0 2px rgba(170,170,170,0.8);opacity:0;-webkit-transform:scale3d(1.2,1.2,1);transform:scale3d(1.2,1.2,1)}
}
.cbutton--effect-sanja::after{background:rgba(170,170,170,0.1)}
.cbutton--effect-sanja.cbutton--click::after{-webkit-animation:anim-effect-sanja 1s ease-out forwards;animation:anim-effect-sanja 1s ease-out forwards}
@-webkit-keyframes anim-effect-sanja {
0%{opacity:1;-webkit-transform:scale3d(0.5,0.5,1);transform:scale3d(0.5,0.5,1)}
25%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
100%{opacity:0;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
@keyframes anim-effect-sanja {
0%{opacity:1;-webkit-transform:scale3d(0.5,0.5,1);transform:scale3d(0.5,0.5,1)}
25%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
100%{opacity:0;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
.cbutton--effect-novak::after{background:rgba(170,170,170,0.25)}
.cbutton--effect-novak.cbutton--click::after{-webkit-animation:anim-effect-novak .5s forwards;animation:anim-effect-novak .5s forwards}
@-webkit-keyframes anim-effect-novak {
0%{opacity:1;-webkit-transform:scale3d(0.1,0.1,1);transform:scale3d(0.1,0.1,1)}
100%{opacity:0;-webkit-transform:scale3d(8,8,1);transform:scale3d(8,8,1)}
}
@keyframes anim-effect-novak {
0%{opacity:1;-webkit-transform:scale3d(0.1,0.1,1);transform:scale3d(0.1,0.1,1)}
100%{opacity:0;-webkit-transform:scale3d(8,8,1);transform:scale3d(8,8,1)}
}
.cbutton--effect-ilinka::after{background:rgba(170,170,170,0.25)}
.cbutton--effect-ilinka.cbutton--click::after{-webkit-animation:anim-effect-ilinka .5s ease-out forwards;animation:anim-effect-ilinka .5s ease-out forwards}
@-webkit-keyframes anim-effect-ilinka {
0%{opacity:1}
100%{opacity:0}
}
@keyframes anim-effect-ilinka {
0%{opacity:1}
100%{opacity:0}
}
.cbutton--effect-marin::after{box-shadow:inset 0 0 0 3px rgba(170,170,170,0.05)}
.cbutton--effect-marin.cbutton--click::after{-webkit-animation:anim-effect-marin .5s ease-out forwards;animation:anim-effect-marin .5s ease-out forwards}
@-webkit-keyframes anim-effect-marin {
0%{opacity:1}
100%{box-shadow:inset 0 0 0 3px rgba(170,170,170,0.8);opacity:0;-webkit-transform:scale3d(0.75,0.75,1);transform:scale3d(0.75,0.75,1)}
}
@keyframes anim-effect-marin {
0%{opacity:1}
100%{box-shadow:inset 0 0 0 3px rgba(170,170,170,0.8);opacity:0;-webkit-transform:scale3d(0.75,0.75,1);transform:scale3d(0.75,0.75,1)}
}
.cbutton--effect-nikola::after{background:rgba(170,170,170,0.1)}
.cbutton--effect-nikola.cbutton--click::after{-webkit-animation:anim-effect-nikola .5s forwards;animation:anim-effect-nikola .5s forwards}
@-webkit-keyframes anim-effect-nikola {
0%{opacity:0;-webkit-transform:scale3d(0.2,0.2,1);transform:scale3d(0.2,0.2,1)}
50%{opacity:1;-webkit-transform:scale3d(1.2,1.2,1);transform:scale3d(1.2,1.2,1)}
100%{opacity:0;-webkit-transform:scale3d(0.8,0.8,1);transform:scale3d(0.8,0.8,1)}
}
@keyframes anim-effect-nikola {
0%{opacity:0;-webkit-transform:scale3d(0.2,0.2,1);transform:scale3d(0.2,0.2,1)}
50%{opacity:1;-webkit-transform:scale3d(1.2,1.2,1);transform:scale3d(1.2,1.2,1)}
100%{opacity:0;-webkit-transform:scale3d(0.8,0.8,1);transform:scale3d(0.8,0.8,1)}
}
.cbutton--effect-tamara::after{box-shadow:0 0 0 3px rgba(170,170,170,0.05)}
.cbutton--effect-tamara.cbutton--click::after{-webkit-animation:anim-effect-tamara .5s ease-out forwards;animation:anim-effect-tamara .5s ease-out forwards}
@-webkit-keyframes anim-effect-tamara {
0%{box-shadow:0 0 0 3px rgba(170,170,170,0.3);opacity:1;-webkit-transform:scale3d(0.6,0.6,1);transform:scale3d(0.6,0.6,1)}
100%{box-shadow:0 0 0 100px rgba(170,170,170,0);opacity:0;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
@keyframes anim-effect-tamara {
0%{box-shadow:0 0 0 3px rgba(170,170,170,0.3);opacity:1;-webkit-transform:scale3d(0.6,0.6,1);transform:scale3d(0.6,0.6,1)}
100%{box-shadow:0 0 0 100px rgba(170,170,170,0);opacity:0;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
.cbutton--effect-zoran::after{background:rgba(170,170,170,0.1)}
.cbutton--effect-zoran.cbutton--click::after{-webkit-animation:anim-effect-zoran .5s ease-out forwards;animation:anim-effect-zoran .5s ease-out forwards}
@-webkit-keyframes anim-effect-zoran {
0%{opacity:.2}
50%{opacity:1;-webkit-transform:scale3d(0.6,1,1);transform:scale3d(0.6,1,1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{opacity:.3;-webkit-transform:scale3d(1.1,1.1,1);transform:scale3d(1.1,1.1,1)}
}
@keyframes anim-effect-zoran {
0%{opacity:.2}
50%{opacity:1;-webkit-transform:scale3d(0.6,1,1);transform:scale3d(0.6,1,1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}
100%{opacity:.3;-webkit-transform:scale3d(1.1,1.1,1);transform:scale3d(1.1,1.1,1)}
}
.cbutton--effect-ivana::before{position:absolute;top:50%;left:50%;margin:-35px 0 0 -35px;width:70px;height:70px;border-radius:50%;content:'';opacity:0;pointer-events:none}
.cbutton--effect-ivana::before,.cbutton--effect-ivana::after{box-shadow:0 0 0 2px rgba(170,170,170,0.8)}
.cbutton--effect-ivana.cbutton--click::before{-webkit-animation:anim-effect-ivana-1 .5s forwards;animation:anim-effect-ivana-1 .5s forwards}
.cbutton--effect-ivana.cbutton--click::after{-webkit-animation:anim-effect-ivana-2 .5s forwards;animation:anim-effect-ivana-2 .5s forwards}
@-webkit-keyframes anim-effect-ivana-1 {
0%{opacity:1;-webkit-transform:scale3d(0.5,0.5,1);transform:scale3d(0.5,0.5,1)}
100%{opacity:0;-webkit-transform:scale3d(1.1,1.1,1);transform:scale3d(1.1,1.1,1)}
}
@keyframes anim-effect-ivana-1 {
0%{opacity:1;-webkit-transform:scale3d(0.5,0.5,1);transform:scale3d(0.5,0.5,1)}
100%{opacity:0;-webkit-transform:scale3d(1.1,1.1,1);transform:scale3d(1.1,1.1,1)}
}
@-webkit-keyframes anim-effect-ivana-2 {
0%{opacity:1;-webkit-transform:scale3d(0.5,0.5,1);transform:scale3d(0.5,0.5,1)}
50%,100%{opacity:0;-webkit-transform:scale3d(1.2,1.2,1);transform:scale3d(1.2,1.2,1)}
}
@keyframes anim-effect-ivana-2 {
0%{opacity:1;-webkit-transform:scale3d(0.5,0.5,1);transform:scale3d(0.5,0.5,1)}
50%,100%{opacity:0;-webkit-transform:scale3d(1.2,1.2,1);transform:scale3d(1.2,1.2,1)}
}
.cbutton--effect-marko::after{box-shadow:inset 0 0 0 2px rgba(170,170,170,0.3)}
.cbutton--effect-marko.cbutton--click::after{-webkit-animation:anim-effect-marko .5s forwards;animation:anim-effect-marko .5s forwards}
@-webkit-keyframes anim-effect-marko {
0%{opacity:1}
50%{box-shadow:inset 0 0 0 35px rgba(170,170,170,0.1);opacity:1}
100%{box-shadow:inset 0 0 0 35px rgba(170,170,170,0.1);opacity:0;-webkit-transform:scale3d(1.1,1.1,1);transform:scale3d(1.1,1.1,1)}
}
@keyframes anim-effect-marko {
0%{opacity:1}
50%{box-shadow:inset 0 0 0 35px rgba(170,170,170,0.1);opacity:1}
100%{box-shadow:inset 0 0 0 35px rgba(170,170,170,0.1);opacity:0;-webkit-transform:scale3d(1.1,1.1,1);transform:scale3d(1.1,1.1,1)}
}
.cbutton--effect-stoja::before{position:absolute;top:50%;left:50%;margin:-35px 0 0 -35px;width:70px;height:70px;border-radius:50%;content:'';opacity:0;pointer-events:none}
.cbutton--effect-stoja::before,.cbutton--effect-stoja::after{box-shadow:0 0 0 2px rgba(170,170,170,0.5)}
.cbutton--effect-stoja-left::before,.cbutton--effect-stoja-left::after{-webkit-clip-path:polygon(0% 0%,50% 0%,50% 50%,0% 50%);clip-path:polygon(0% 0%,50% 0%,50% 50%,0% 50%)}
.cbutton--effect-stoja-top::before,.cbutton--effect-stoja-top::after{-webkit-clip-path:polygon(10% 0%,90% 0%,50% 50%);clip-path:polygon(25% 0%,75% 0%,50% 50%)}
.cbutton--effect-stoja-right::before,.cbutton--effect-stoja-right::after{-webkit-clip-path:polygon(50% 0%,100% 0%,100% 50%,50% 50%);clip-path:polygon(50% 0%,100% 0%,100% 50%,50% 50%)}
.cbutton--effect-stoja.cbutton--click::before{-webkit-animation:anim-effect-stoja-1 .5s forwards;animation:anim-effect-stoja-1 .5s forwards}
.cbutton--effect-stoja.cbutton--click::after{-webkit-animation:anim-effect-stoja-2 .5s forwards;animation:anim-effect-stoja-2 .5s forwards}
@-webkit-keyframes anim-effect-stoja-1 {
0%{opacity:1;-webkit-transform:scale3d(0.3,0.3,1);transform:scale3d(0.3,0.3,1)}
100%{opacity:0;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
@keyframes anim-effect-stoja-1 {
0%{opacity:1;-webkit-transform:scale3d(0.3,0.3,1);transform:scale3d(0.3,0.3,1)}
100%{opacity:0;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
@-webkit-keyframes anim-effect-stoja-2 {
0%{opacity:1;-webkit-transform:scale3d(0.5,0.5,1);transform:scale3d(0.5,0.5,1)}
100%{opacity:0;-webkit-transform:scale3d(1.5,1.5,1);transform:scale3d(1.5,1.5,1)}
}
@keyframes anim-effect-stoja-2 {
0%{opacity:1;-webkit-transform:scale3d(0.5,0.5,1);transform:scale3d(0.5,0.5,1)}
100%{opacity:0;-webkit-transform:scale3d(1.5,1.5,1);transform:scale3d(1.5,1.5,1)}
}
.cbutton--effect-jagoda::before{position:absolute;top:50%;left:50%;margin:-25px 0 0 -25px;width:50px;height:50px;border-radius:50%;content:'';opacity:0;pointer-events:none}
.cbutton--effect-jagoda::after{margin:-25px 0 0 -25px;width:50px;height:50px}
.cbutton--effect-jagoda::before,.cbutton--effect-jagoda::after{box-shadow:0 0 0 2px rgba(170,170,170,0.5)}
.cbutton--effect-jagoda.cbutton--click::before,.cbutton--effect-jagoda.cbutton--click::after{-webkit-animation-name:anim-effect-jagoda-2,anim-effect-jagoda-1;animation-name:anim-effect-jagoda-2,anim-effect-jagoda-1;-webkit-animation-duration:1.2s;animation-duration:1.2s;-webkit-animation-iteration-count:5;animation-iteration-count:5;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}
.cbutton--effect-jagoda.cbutton--click::after{-webkit-animation-delay:.6s;animation-delay:.6s}
@-webkit-keyframes anim-effect-jagoda-1 {
0%,100%{opacity:0}
40%,60%{opacity:1}
}
@keyframes anim-effect-jagoda-1 {
0%,100%{opacity:0}
40%,60%{opacity:1}
}
@-webkit-keyframes anim-effect-jagoda-2 {
0%{-webkit-transform:scale3d(0.5,0.5,1);transform:scale3d(0.5,0.5,1)}
100%{-webkit-transform:scale3d(1.4,1.4,1);transform:scale3d(1.4,1.4,1)}
}
@keyframes anim-effect-jagoda-2 {
0%{-webkit-transform:scale3d(0.5,0.5,1);transform:scale3d(0.5,0.5,1)}
100%{-webkit-transform:scale3d(1.4,1.4,1);transform:scale3d(1.4,1.4,1)}
}
.cbutton--effect-simo::before{position:absolute;top:50%;left:-20px;margin:-4px 0 0;width:8px;height:8px;border-radius:50%;background:rgba(170,170,170,0.3);content:'';opacity:0;-webkit-transform-origin:35px 50%;transform-origin:35px 50%}
.cbutton--effect-simo::after{border:8px solid rgba(170,170,170,0.1)}
.cbutton--effect-simo.cbutton--click::after{-webkit-animation:anim-effect-simo-1 5s forwards;animation:anim-effect-simo-1 5s forwards}
.cbutton--effect-simo.cbutton--click::before{-webkit-animation-name:anim-effect-simo-2,anim-effect-simo-3;animation-name:anim-effect-simo-2,anim-effect-simo-3;-webkit-animation-duration:5s,.4s;animation-duration:5s,.4s;-webkit-animation-iteration-count:1,infinite;animation-iteration-count:1,infinite;-webkit-animation-timing-function:ease,linear;animation-timing-function:ease,linear;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}
@-webkit-keyframes anim-effect-simo-1 {
0%,100%{-webkit-transform:scale3d(0,0,1);transform:scale3d(0,0,1);opacity:0}
5%,95%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
@keyframes anim-effect-simo-1 {
0%,100%{-webkit-transform:scale3d(0,0,1);transform:scale3d(0,0,1);opacity:0}
5%,95%{opacity:1;-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
}
@-webkit-keyframes anim-effect-simo-2 {
0%,5%,95%,100%{opacity:0}
10%,90%{opacity:1}
}
@keyframes anim-effect-simo-2 {
0%,5%,95%,100%{opacity:0}
10%,90%{opacity:1}
}
@-webkit-keyframes anim-effect-simo-3 {
100%{-webkit-transform:rotate3d(0,0,1,360deg);transform:rotate3d(0,0,1,360deg)}
}
@keyframes anim-effect-simo-3 {
100%{-webkit-transform:rotate3d(0,0,1,360deg);transform:rotate3d(0,0,1,360deg)}
}
.cbutton--effect-milan::before{content:"";position:absolute;top:50%;left:50%;margin:-35px 0 0 -35px;width:70px;height:70px;border-radius:50%;opacity:0;pointer-events:none}
.cbutton--effect-milan::after,.cbutton--effect-milan::before{border:4px solid rgba(170,170,170,0.1)}
.cbutton--effect-milan.cbutton--click::after{-webkit-animation-name:anim-effect-milan-3,anim-effect-milan-1;animation-name:anim-effect-milan-3,anim-effect-milan-1;-webkit-animation-duration:5s,2s;animation-duration:5s,2s;-webkit-animation-iteration-count:1,infinite;animation-iteration-count:1,infinite;-webkit-animation-timing-function:ease,linear;animation-timing-function:ease,linear;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}
.cbutton--effect-milan.cbutton--click::before{-webkit-animation-name:anim-effect-milan-3,anim-effect-milan-2;animation-name:anim-effect-milan-3,anim-effect-milan-2;-webkit-animation-duration:5s,2s;animation-duration:5s,2s;-webkit-animation-iteration-count:1,infinite;animation-iteration-count:1,infinite;-webkit-animation-timing-function:ease,linear;animation-timing-function:ease,linear;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}
@-webkit-keyframes anim-effect-milan-1 {
0%{-webkit-transform:perspective(1000px) rotate3d(1,1,1,0deg);transform:perspective(1000px) rotate3d(1,1,1,0deg)}
100%{-webkit-transform:perspective(1000px) rotate3d(1,1,1,360deg);transform:perspective(1000px) rotate3d(1,1,1,360deg)}
}
@keyframes anim-effect-milan-1 {
0%{-webkit-transform:perspective(1000px) rotate3d(1,1,1,0deg);transform:perspective(1000px) rotate3d(1,1,1,0deg)}
100%{-webkit-transform:perspective(1000px) rotate3d(1,1,1,360deg);transform:perspective(1000px) rotate3d(1,1,1,360deg)}
}
@-webkit-keyframes anim-effect-milan-2 {
0%{-webkit-transform:perspective(1000px) rotate3d(-1,-1,-1,0deg);transform:perspective(1000px) rotate3d(-1,-1,-1,0deg)}
100%{-webkit-transform:perspective(1000px) rotate3d(-1,-1,-1,360deg);transform:perspective(1000px) rotate3d(-1,-1,-1,360deg)}
}
@keyframes anim-effect-milan-2 {
0%{-webkit-transform:perspective(1000px) rotate3d(1,-1,1,0deg);transform:perspective(1000px) rotate3d(1,-1,1,0deg)}
100%{-webkit-transform:perspective(1000px) rotate3d(1,-1,1,360deg);transform:perspective(1000px) rotate3d(1,-1,1,360deg)}
}
@-webkit-keyframes anim-effect-milan-3 {
0%,100%{opacity:0}
25%,75%{opacity:1}
}
@keyframes anim-effect-milan-3 {
0%,100%{opacity:0}
25%,75%{opacity:1}
}
.play-btn.cbutton::after,.play-btn.cbutton::before{margin:-70px 0 0 -70px;width:140px;height:140px}