html,body{
    height: 100%;
    font-family: 'gilroy', Arial, sans-serif;
    font-weight: 900;

}
.wrapper{

    position: relative;
    width:100%;
    height:100%;
    background-color: #0ac6ff;

    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    overflow: hidden;

    min-height: 600px;
}
.wrapper.loaded{
    /*background-image: url(../img/bg.png);*/


}
.logo{

    background-image: url("/img/logo-vici.png");
    width: 120px;
    height: 59px;
    position: absolute;
    top: 5%;
    left: 13%;
    margin: 0 0 0 -50px;
    z-index: 1000;
    background-size: contain;
    background-repeat: no-repeat;

}
.logo a{
    display: block;
    width:100%;
    height: 100%;

}
.side-bar{
    position: absolute;
    right: 10%;
    top: 0;
    width: 160px;
    z-index: 234;
    display: none;
    padding:25px 0;
    bottom: 0;
    margin: auto;
    max-height: 515px;

}
.loaded .side-bar{
    display: block;

}

.social-icons{

    text-align: center;
    padding: 0 0 2px 0;

}
.social{

    display: inline-block;
    margin: 0 5px;
    width: 36px;
    height: 36px;
}
.social a{

    background-image: url(/img/social.png);
    background-repeat: no-repeat;
    display: block;
    background-size: cover;
    width:100%;
    height: 100%;

}
.social a:hover{transform: scale(1.1);}
.social.tw a{background-position: center;}
.social.fb a{background-position: right;}
.side-bar-panel{
    border-radius: 20px;
    background-color: #0ac6ff;
    box-shadow: 0px 0px 20px 0px rgba(6, 32, 40, 0.15);
}
.episode-1 .side-bar-panel,
.episode-2 .side-bar-panel,
.episode-3 .side-bar-panel{

display: none;
}




.side-bar-panel ul{
    list-style: none;
    padding: 0px 0 15px 0;
    margin: 0;
    font-size: 13px;
}
.side-bar-panel ul li{
    height: 45%;
    width: 220px;
    margin: 0 -31px 10px;
    background-position: top center;
    background-repeat: no-repeat;
    /* background-image: url(/img/circle.png); */
    text-align: center;
    position: relative;
}
.side-bar-panel ul li .tooltype{
    position: absolute;
    right: 100%;
    bottom: 70%;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background-color: #FFF;
    padding: 46px 18px;
    font-size: 17px;
    line-height: 20px;
    color:#0ac6ff;
    display: none;
}
.side-bar-panel ul li .tooltype::after{

    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 20px;
    height: 20px;
    content: '';
    background-color: #FFF;



}
.side-bar-panel ul li:hover .tooltype{

    display: block;
}

.side-bar-panel ul li a{
    color: #FFF;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    font-weight: 700;
}

.side-bar-panel ul li a .img{
    width: 100%;
    height: 100px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
}
.side-bar-panel ul li a:hover .img{

    transform: scale(1.1);

}



.side-bar-panel ul li a .img {
    background-image: url(/img/palka-1.png);

}

.side-bar-panel ul li.snow-crab a .img{ background-image: url(/img/palka-2.png);}
.side-bar-panel ul li.original-crab a .img{ background-image: url(/img/palka-3.png);}


.move-palka{
    position: absolute;
    background-image: url(/img/palka-1.png);
    height: 76px;
    width: 245px;
    display: none;
    -webkit-background-size:contain;
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1001;

}
.move-palka.snow-crab{ background-image: url(/img/palka-2.png);}
.move-palka.original-crab{ background-image: url(/img/palka-3.png);}
.wrapper.moving .move-palka{

    display: block;
}

.side-bar-panel ul li a .title{
    padding: 0 40px;
    margin: -10px 0 0 0;

}
.girl-control{


    position: absolute;
    left:10px;
    bottom: 10px;

}
.girl-wrapper{
    width: 50%;
    max-width: 1003px;
    margin: 0 auto;
    position: absolute;

    left:0;
    right: 0;
    bottom: -20px;
}
.girl-overlay{
    height:0;
    padding: 0 0 89% 0;
    position: relative;
}
.want-crab{

    position: absolute;
    right: 68%;
    top: 12%;
    width: 40%;
    opacity: 0;
    -webkit-transition: all 3s linear;
    -moz-transition: all 3s linear;
    -o-transition: all 3s linear;
    transition: all 3s linear;
}
.want-crab .img{

    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../img/want-crab.png);
    -webkit-background-size:contain;
    background-size:contain;

    height: 0;
    padding: 0 0 64.83% 0;

}

@keyframes arrows-anim {
    0% { transform: rotate(0deg); }
    25% {transform: rotate(5deg); }
    50% {transform: rotate(3deg); }
    75% {transform: rotate(7deg); }
    100% {transform: rotate(0deg); }
}
@-webkit-keyframes arrows-anim {
    0% { transform: rotate(0deg); }
    25% {transform: rotate(5deg); }
    50% {transform: rotate(3deg); }
    75% {transform: rotate(7deg); }
    100% {transform: rotate(0deg); }
}



@keyframes want-crab {
    0% {transform: scale(1)   ; }
    25% {transform:scale(1.05); }
    50% {transform: scale(1.1);}
    75% {transform: scale(1.05); }
    100% {transform: scale(1);}
}
@-webkit-keyframes want-crab {
    0% {transform: scale(1) ; }
    25% {transform:scale(1.05) ; }
    50% {transform: scale(1.1) ;}
    75% {transform: scale(1.05); }
    100% {transform: scale(1)  ;}
}

@keyframes showhide {
    0% {display: none; }
    100% {display: block;}
}
@-webkit-keyframes showhide {

    0% {display: none; }
    100% {display: block;}

}

@keyframes head-open {
    0% { transform: rotate(0deg); }
    100% {transform: rotate(122deg); }
}
@-webkit-keyframes head-open {
    0% { transform: rotate(0deg); }

    100% {transform: rotate(122deg); }
}
.arrow-graph{

    position: absolute;
    width: 15%;
    opacity: 0;
    right: 8%;
    top: 41%;
}
.arrow-graph .img{

    background-position: center;
    background-repeat: no-repeat;
    background-image: url(../img/arrow-graph.png);
    -webkit-background-size:contain;
    background-size:contain;
    height: 0;
    padding:  0 0 100% 0;


}
.girl-img{
    position: absolute;
    left:0;
    right: 0;
    bottom: 0;
    top:0;
}
.girl-img,
.girl-img::after{
    background-image: url(../img/girls_1.png);
    background-repeat: no-repeat;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;

}

.girl-img::after{
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
   opacity: 0;
    content: '';
    background-position:50%  80%;


}
.girl-lips{
    position: absolute;
    top: 48%;
    left: 42%;
    right: 38%;
    bottom: 28%;
    transform: rotate(10deg);
    cursor: pointer;
}
.girl-yes{
    position: absolute;
    top: 27%;
    bottom: 53%;
}
.girl-yes.girl-yes1{left:35%;right:50%;}
.girl-yes.girl-yes2{left: 54%; right: 29%;}


.rainbow{


    position: absolute;
    width:310%;
    display: none;


}
.girl-yes.girl-yes1 .rainbow{
    right: 3%;
    top: -58%;
}
.girl-yes.girl-yes2 .rainbow{
    left:17%;
    top: -69%;
}

.rainbow-img{

    width:100%;
    -webkit-background-size:contain;
    background-size:contain;
    padding:0 0 67.6416% 0;
    height: 0;
    background-repeat: no-repeat;


}
.girl-yes.girl-yes1 .rainbow .rainbow-img{background-image: url("/img/e1/rainbow_1.png");}
.girl-yes.girl-yes2 .rainbow .rainbow-img{background-image: url("/img/e1/rainbow_2.png");}
.wrapper[kdr="0"] .girl-overlay{
    display:none;
}
.wrapper[kdr='4'] .girl-img.em{
    /*background: transparent;*/

}
.wrapper[kdr='4'] .girl-img.em{
    opacity: 1;
    background-position:50%  57.25%;

}
.wrapper[kdr='1'] .girl-img{ background-position:50%  0%;}
.wrapper[kdr='2'] .girl-img{ background-position:50%  14.5%;}
.wrapper[kdr='3'] .girl-img{ background-position:50%  28.8%;}
.wrapper[kdr='4'] .girl-img{ background-position:50%  43%;}
.wrapper[kdr='5'] .girl-img{ background-position:50%  71.5%;}



.episode-2  .girl-overlay .girl-img{background-image: url(/img/e2/girl-min_2.png);}

.wrapper[kdr='5'].episode-2 .girl-img{ background-position:50%  25.2%;}
/*.wrapper[kdr='5'].episode-2 .girl-img.em{background: none;}*/
/*.wrapper[kdr='5'].episode-2 .girl-img.em::after{*/
    /*background-image: url(/img/e2/girl-min_2.png);*/
    /*background-position:50%  25.2%;*/
    /*opacity: 1;*/
/*}*/

.wrapper[kdr='5'].episode-2 .girl-img.open-head{

    background-position:50% 50.4%;
}
.wrapper[kdr='5'].episode-2 .girl-img.em.open-head::after{
    /*background-position:50%  50.4%;*/
}


.girl-head{
    position: absolute;
    margin: auto;
    transform-origin: 101% 98%;
    top:0;
    left:0;
    right: 0;
    display: none;
    z-index: 1;
    width: 38%;
}

@keyframes grass {
    0% {transform: rotate(0deg); }
    100% {transform: rotate(360deg);}
}
@-webkit-keyframes grass {

    0% {transform: rotate(0deg); }
    100% {transform: rotate(360deg);}
}

.girl-head::after{
    padding: 0 0 38.09% 0;
    background-image: url(/img/e2/head.png);
    height: 0;
    background-size: cover;
    content: '';
    display: block;


}
.wrapper[kdr='5'].episode-2 .girl-img.open-head .girl-head{

    display: block;
    -webkit-animation:  head-open 1s linear  ;
    animation: head-open 1s linear ;
    transform: rotate(122deg);


}

.girl-grass{
    position: absolute;
    top:0;
    margin-left:32%;
    width: 38%;
    height: 15.9%;
    overflow: hidden;
    display: none;

}
.wrapper[kdr='5'].episode-2 .girl-img.open-head .girl-grass{

    display: block;
}
.girl-grass::after{
    padding: 0 0 100% 0;
    background-image: url(/img/e2/grass.png);
    height: 0;
    background-size: cover;
    content: '';
    display: block;

    -webkit-animation:  grass 5s linear  infinite;
    animation: grass 5s linear infinite;
}

.wrapper[kdr='5'].episode-2 .girl-img.open-head .girl-grass {


}
.wrapper[kdr='6'] .girl-overlay{

    transform: translate(-65.5%, 0%);

    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;

}
.wrapper[kdr='6'] .girl-wrapper{

    z-index: 50;

}


.girl-overlay .im-happy{

    position: absolute;
    left: 85%;
    opacity: 0;
    top:0;
    border:1px solid #FFF;
    width: 60%;
    border-radius: 50%;
}

.girl-overlay .im-happy .happy-wrapper{

    height: 0;
    padding:0 0 100% 0;


}

.girl-overlay .im-happy .happy-wrapper .happy-inner{


    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding: 10%;
    text-align: center;

}
.girl-overlay .im-happy::before,
.girl-overlay .im-happy::after{

    content: '';
    position: absolute;
    width:0;
    height: 0;
    transform: rotate(-201deg);
    top: 64%;
    left: -3.45%;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;


}

.girl-overlay .im-happy::after{

    border-left: 38px solid #0ac6ff;
    margin: -1px 0px 0px 2px;
}
.girl-overlay .im-happy::before{



    border-left: 38px solid #fff;

}


.wrapper[kdr='6'] .im-happy{
    opacity: 1;
}
.happy-title{

    font-size:42px;
    line-height: 58px;
    color:#FFF;
    text-transform: uppercase;
    margin: 0 0 20px 0;
}

.happy-text{


    font-size: 16px;
    color: #c2f1ff;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.happy-text a{color: #FFF;}
.wrapper[kdr='6'] .girl-img{
    background-position:50%  0%;



}
.wrapper[kdr='7'] .girl-img{ background-position:50%  50.26%;}
.wrapper[kdr='8'] .girl-img{ background-position:50%  57.44%;}
.wrapper[kdr='9'] .girl-img{ background-position:50%  64.62%;}
.wrapper[kdr='10'] .girl-img{ background-position:50%  71.8%;}
.wrapper[kdr='11'] .girl-img{ background-position:50%  78.98%;}
.wrapper[kdr='12'] .girl-img{ background-position:50%  86.16%;}
.wrapper[kdr='13'] .girl-img{ background-position:50%  93.34%;}
.wrapper[kdr='14'] .girl-img{ background-position:50%  100.52%;}
.wrapper[kdr='15'] .girl-img{ background-position:50%  107.7%;}
.wrapper[kdr='16'] .girl-img{ background-position:50%  114.88%;}
.wrapper[kdr='17'] .girl-img{ background-position:50%  122.06%;}
.wrapper[kdr='18'] .girl-img{ background-position:50%  129.24%;}
.wrapper[kdr='19'] .girl-img{ background-position:50%  136.42%;}





/*-----------------------EPISODE 1-------------------------*/

.wrapper[kdr="5"].episode-1 .girl-img .rainbow{display: block; }
.wrapper[kdr="1"] .want-crab,
.wrapper[kdr="2"] .want-crab{
    opacity: 1;
    -webkit-animation: want-crab 2s linear infinite;
    animation: want-crab 2s linear infinite;
}
.wrapper[kdr="2"] .want-crab{}
.wrapper[kdr="3"] .want-crab{}
.wrapper[kdr="2"] .arrow-graph{
    opacity: 1;
    -webkit-animation: arrows-anim 1s linear infinite;
    animation: arrows-anim 1s linear infinite;
}
.copilka{

    overflow:hidden;
    width:0;
    height: 0;
}
.copilka img{
    max-width: none;

}
.preloader{

    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom: 0;
    width:1000px;
    height: 500px;
    margin:auto;
    opacity: 0;
}


.load-percent{position: absolute;top:100%;left:0;right:0;text-align: center; color:#FFF; margin:20px 0 0 0;font-size: 26px;font-weight: 900;}
.preloder-1,
.preloder-2{

    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom: 0;
    background-repeat:no-repeat;
    background-position: center;
    -webkit-background-size:cover;
    background-size:cover;


}
.b-els{

    position: absolute;
    left:0;
    right:0;
    bottom:0;
    top:0;
    z-index: 10;

}

.bat::after,
.bat,
.b-els .el{
    position: absolute;
    -webkit-background-size:cover;
    background-size:contain;
    background-repeat:no-repeat;
    background-position: center;

}
.b-els .el.el0{background-image: url(/img/e1/star.png);}
.b-els .el.el1{background-image: url(/img/e1/emoji_love.png);}
.b-els .el.el2{background-image: url(/img/e1/star_red.png);  }
.b-els .el.el3{background-image: url(/img/e1/candy.png);}
.b-els .el.el4{background-image: url(/img/e1/candy_gold.png);}
.b-els .el.el5{background-image: url(/img/e1/animated-star-image-0012.gif);}
.b-els .el.el6{background-image: url(/img/e1/candy_green.png);}
.b-els .el.el7{background-image: url(/img/e1/candy_pink.png);}
.b-els .el.el8{background-image: url(/img/e1/cat.png);}
.b-els .el.el9{background-image: url(/img/e1/ice_cream_rainbow.png);}
.b-els .el.el10{background-image: url(/img/e1/iphone.png);}
.b-els .el.el11{background-image: url(/img/e1/prince.png);}
.b-els .el.el12{background-image: url(/img/e1/donut_high.png);}
.b-els .el.el13{background-image: url(/img/e1/lillopop.png);}
.b-els .el.el14{background-image: url(/img/e1/heart.png);}
.b-els .el.el15{background-image: url(/img/e1/pancake.png);}
.b-els .el.el16{background-image: url(/img/e1/diamond.png);}
.b-els .el.el17{background-image: url(/img/e1/unicorn.png);}
.b-els .el.el18{background-image: url(/img/e1/donut_high.png);}


.b-els .el.el19{background-image: url(/img/e1/Vici_gfs/tumblr_nf3ohbPs4N1u1nuzeo1_500.gif);}
.b-els .el.el20{background-image: url(/img/e1/Vici_gfs/animated-rainbow-image-0029.gif);}
.b-els .el.el21{background-image: url(/img/e1/Vici_gfs/tumblr_nklrhxZoV61te9khoo1_500.gif);}
.b-els .el.el22{background-image: url(/img/e1/Vici_gfs/tumblr_nqgxpwXZ0M1rsh9bio1_400.gif);}
.b-els .el.el23{background-image: url(//img/e1/Vici_gfs/tumblr_nwqg65q2X81tkzb9zo1_500.gif);}
.b-els .el.el24{background-image: url(//img/e1/Vici_gfs/pic.gif);}
.b-els .el.el25{background-image: url(//img/e1/Vici_gfs/tumblr_oc16918mcX1vx777ao1_540.gif);}
.b-els .el.el26{background-image: url(//img/e1/panda.png);}

.b-els .el.rotate0{transform: rotate(-59deg);}
.b-els .el.rotate1{transform: rotate(3deg);}
.b-els .el.rotate2{transform: rotate(-15deg);}
.b-els .el.rotate3{transform: rotate(80deg);}
.b-els .el.rotate4{transform: rotate(48deg);}
.b-els .el.rotate5{transform: rotate(20deg);}
.b-els .el.rotate6{transform: rotate(0deg);}


/* ----------------------- EPISODE 2 ---------------------------*/
.bat{
    position: absolute;
    width: 100px;
    height: 100px;
}
.bat::after{

    content:'';
    display:block;
    width:100%;
    height: 100%;
    opacity: 0;

}
.bat0::after{background-image: url(/img/e2/animated-butterfly-image-0132.gif);}
.bat1::after{background-image: url(/img/e2/butterfly-animated-gif-13.gif);}
.bat2::after{background-image: url(/img/e2/butterfly_blue.gif);}
.bat3::after{background-image: url(/img/e2/butterfly_yellow.gif);}

.bat.act::after{
    opacity: 1;

}
.b-els .el.speed3{
    -webkit-transition: all 3s linear;
    -moz-transition: all 3s linear;
    -o-transition: all 3s linear;
    transition: all 3s linear;
}

.b-els .el.speed2{
    -webkit-transition: all 2s linear;
    -moz-transition: all 2s linear;
    -o-transition: all 2s linear;
    transition: all 2s linear;
}

.b-els .el.speed1{
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;

}

.b-els .bat.speed3{
    -webkit-transition: all 10s linear;
    -moz-transition: all 10s linear;
    -o-transition: all 10s linear;
    transition: all 10s linear;
}
.b-els .bat.speed2{
    -webkit-transition: all 20s linear;
    -moz-transition: all 20s linear;
    -o-transition: all 20s linear;
    transition: all 20s linear;
}
.b-els .bat.speed1{
    -webkit-transition: all 15s linear;
    -moz-transition: all 15s linear;
    -o-transition: all 15s linear;
    transition: all 15s linear;
}


.bat.goto1{transform: rotate(-30deg);}
.bat.goto2{transform: rotate(90deg);}
.bat.goto3{transform: rotate(-35deg);}
.bat.goto4{transform: rotate(0deg);}

.bat.act.goto1{transform: rotate(-30deg) translate(600%, -900%);}
.bat.act.goto2{transform: rotate(90deg) translate(600%, -900%);}
.bat.act.goto3{transform: rotate(-65deg) translate(-600%, 900%);}
.bat.act.goto4{transform: translate(-600%, -900%);}




@keyframes crab {
    0% {transform: translateY(-100%) rotate(0deg); }
    10% {transform: translateY(50%) rotate(10deg); }
    20% {transform: translateY(100%) rotate(-10deg); }
    30% {transform: translateY(200%) rotate(10deg); }
    40% {transform: translateY(300%) rotate(-10deg); }
    50% {transform: translateY(400%) rotate(10deg); }
    60% {transform: translateY(500%) rotate(-10deg); }
    70% {transform: translateY(600%) rotate(10deg); }
    80% {transform: translateY(700%) rotate(-10deg); }
    90% {transform: translateY(800%) rotate(10deg); }
    100% {transform:translateY(800%);}
}
@-webkit-keyframes crab {
    0% {transform: translateY(-100%) rotate(0deg); }
    10% {transform: translateY(50%) rotate(10deg); }
    20% {transform: translateY(100%) rotate(-10deg); }
    30% {transform: translateY(200%) rotate(10deg); }
    40% {transform: translateY(300%) rotate(-10deg); }
    50% {transform: translateY(400%) rotate(10deg); }
    60% {transform: translateY(500%) rotate(-10deg); }
    70% {transform: translateY(600%) rotate(10deg); }
    80% {transform: translateY(700%) rotate(-10deg); }
    90% {transform: translateY(800%) rotate(10deg); }
    100% {transform:translateY(800%);}
}

.crab{

    width: 25%;
    position: absolute;



}

.crab::after{
    display: block;
    content: '';
    padding:0 0 100% 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

}
.crab0::after{background-image: url(/img/e2/crab.png);}
.crab1::after{background-image: url(/img/e2/crab_2.png);}
.crab-pos1.crab0{
    -webkit-animation: crab 10s linear;
    animation: crab 10s linear;
    width:10%;
}
.crab-pos1.crab1{
    -webkit-animation: crab 20s linear;
    animation: crab 20s linear;

    width:15%;
}
.crab-pos2.crab0{
    -webkit-animation: crab 25s linear;
    animation: crab 25s linear;
    width:20%;
}
.crab-pos2.crab1{
    -webkit-animation: crab 30s linear;
    animation: crab 30s linear;
    width:20%;
}

.crab-pos3.crab0{
    -webkit-animation: crab 35s linear;
    animation: crab 35s linear;
    width:30%;
}
.crab-pos3.crab1{
    -webkit-animation: crab 40s linear;
    animation: crab 40s linear;
    width:25%;
}

.crab-pos1.crab0{left:5%;transform:translateY(-900%);}
.crab-pos2.crab0{left:25%;transform:translateY(-600%);}
.crab-pos1.crab1{left:50%;transform:translateY(-100%);}
.crab-pos2.crab1{left:70%;transform:translateY(-400%);}

.crab-pos3.crab0{left:45%;margin:-400px 0 0 0;transform:translateY(-100%);}
.crab-pos3.crab1{left:10%;transform:translateY(-400%);}

/*-------------- girl face --------------------*/
.girl-face{
    width: 100%;
    height: 0;
    padding: 0 0 89.03% 0;
    background-image: url(/img/e2/girl-head.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center top;
    margin: -20% 0 0 0;
    position: absolute;
    top: 0;
    display: none;
    z-index: 2;
}


.face .girl-face{  display: block;  }
.face0 .girl-face{background-position: center top;}
.face1 .girl-face{background-position: center center;}
.face2 .girl-face{background-position: center bottom;}

/*---------------------BOOM---------------------*/
.booms div,
.booms{position: absolute;left:0;right:0;top:0;bottom: 0;
    background-size: cover;background-repeat: no-repeat;background-position: center;  display: none; z-index: 10; }

.booms .boom1{background-image: url(/img/e2/boom_1.png);}
.booms .boom2{background-image: url(/img/e2/boom_2.png);}
.booms .boom3{background-image: url(/img/e2/boom_3.png);}
.booms .boom4{background-image: url(/img/e2/boom_4.png);}
.booms .boom5{background-image: url(/img/e2/boom_5.png);}


.booms.show{display: block;}


/* ------------------------- EPISODE 3 ------------------------------*/
/* ------------------------- EPISODE 3 ------------------------------*/
@keyframes laser {
    0% {transform: rotate(0deg); }
    100% {transform:rotate(360deg);}
}
@-webkit-keyframes laser {
    0% {transform:  rotate(0deg); }
    100% {transform:rotate(360deg);}
}



.episode-3 .girl-overlay .girl-img{
    background-image: url(/img/e3/girl-min_3.png);
    background-position: 50% 33.9%;


}
.wrapper[kdr='5'].episode-3.laser .girl-img{background-position: 50%  33.9%;}
.wrapper[kdr='5'].episode-3.wather-time .girl-img{background-position: 50%  66.9%;}
.girl-img .laser{
    position: absolute; top:22%;
    transform: rotate(10deg);
    width: 0;
    height: 0;
    display: none;
    -webkit-animation: laser 6s linear infinite;
    animation: laser 6s linear infinite;
}
.wrapper[kdr='5'].episode-3 .girl-img.laser .laser{

    display: block;
}
.laser-img{
    width: 3607px;
    height:190px;
    background-image: url(/img/e3/lazer.png);
    background-repeat: no-repeat;
    background-position: center right;
    position: absolute;
    transform-origin: 50% ;

    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.girl-yes.girl-yes1 .laser{left:59%;}
.girl-yes.girl-yes2 .laser{left:32%;}




.fontans{
    position: absolute;
    width:200%;
    left:-50%;
    right:-50%;
    top: -38%;
    bottom:0;
    overflow: hidden;
    display: none;
    -webkit-transition: all 5s linear;
    -moz-transition: all 5s linear;
    -o-transition: all 5s linear;
    transition: all 5s linear;

}
 .fontans.show{
     display: block;
     /*bottom:138%;*/

}


.fontans.show{}
.fontan{
    position:absolute;
    left:0;
    right:0;
    top:0;
   height: 0;
    padding:  0 0 61.37% 0;
    background-image: url(/img/e3/water_narezka.png);

    background-size: 100% auto;
    background-repeat: no-repeat;




}

.fontan{opacity: 0;}

.fontan0{background-position: 50% 0%;}
.fontan1{background-position: 50% 32.25%;}
.fontan2{background-position: 50% 65%;}
.fontan3{background-position: 50% 97.2%;}

.fontans[kdr="0"] .fontan0{opacity: 1;}
.fontans[kdr="1"] .fontan1{opacity: 1;}
.fontans[kdr="2"] .fontan2{opacity: 1;}
.fontans[kdr="3"] .fontan3{opacity: 1;}


.wather{

    background-color: rgba(10,198,255,0.6);
    position: absolute;left:0;right:0;top:0;bottom: 0;
    z-index: 1;



    -webkit-transform: translate(0%, 100%);
    -moz-transform: translate(0%, 100%);
    -ms-transform: translate(0%, 100%);
    -o-transform: translate(0%, 100%);
    transform: translate(0%, 100%);

    -webkit-transition: all 5s linear;
    -moz-transition: all 5s linear;
    -o-transition: all 5s linear;
    transition: all 5s linear;
}
.more{
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    -webkit-transition: all 5s linear;
    -moz-transition: all 5s linear;
    -o-transition: all 5s linear;
    transition: all 5s linear;

}

.more1{  background-image: url(/img/e3/animated-fish-image-0316.gif);width: 83px; height: 79px; left:40%; top:10%; }
.more2{background-image: url(/img/e3/bubble_1.png);height: 80px;width: 90px;left: 33%;top: 60%;}
.more3{background-image: url(/img/e3/bubble_2.png);height: 70px;width: 70px;left: 56%;top:10%;}
.more4{background-image: url(/img/e3/crab_bubble.png);height: 250px;width: 250px;left: 3%;top:10%;}
.more5{background-image: url(/img/e3/jelly.png);height: 275px;width: 275px;left: 40%;top: 26%;}
.more6{background-image: url(/img/e3/meduzka.png);height: 160px;width: 160px;left: 73%;top:10%;}
.more7{background-image: url(/img/e3/tumblr_o9cpfkAC5t1vruiago1_250.gif);width: 250px;height: 250px;left: 33%;top: 0%;}
.more8{background-image: url(/img/e3/tumblr_o543a1z0EL1uf5j8co1_500.gif);width: 250px;height: 254px;    left: 42%;
    top: 77%;}
.more9{background-image: url(/img/e3/tumblr_oaxjx8nFLR1uf5tbgo1_1280.gif);width: 300px;height: 300px;left: 61%;top: 71%;}



.more10{background-image: url(/img/e3/animated-fish-image-0316.gif);width: 83px;height: 79px;left: 41%;top: 69%;}
.more11{background-image: url(/img/e3/bubble_1.png);height: 80px;width: 90px;left: 90%;top: 85%;}
.more12{background-image: url(/img/e3/bubble_2.png);height: 70px;width: 70px;left: 43%;top: 58%;}
.more13{background-image: url(/img/e3/crab_bubble.png);height: 250px;width: 250px;left: 60%;top: 35%;}
.more14{background-image: url(/img/e3/jelly.png);height: 233px;width: 219px;left: 22%;top: 70%;transform: rotate(36deg);}
.more15{background-image: url(/img/e3/meduzka.png);height: 160px;width: 160px;left: 6%;top: 71%;}
.more16{background-image: url(/img/e3/tumblr_o9cpfkAC5t1vruiago1_250.gif);width: 250px;height: 250px;left: 46%;top: 60%;}
.more17{background-image: url(/img/e3/tumblr_o543a1z0EL1uf5j8co1_500.gif);width: 250px;height: 254px;left: 19%;top: 22%;}
.more18{background-image: url(/img/e3/tumblr_oaxjx8nFLR1uf5tbgo1_1280.gif);width: 300px;height: 300px;left: 18%;top: 36%;}



.wather.show{

    -webkit-transform: translate(0%, 00%);
    -moz-transform: translate(0%, 00%);
    -ms-transform: translate(0%, 00%);
    -o-transform: translate(0%, 00%);
    transform: translate(0%, 00%);

}

.wather.show .more1{  left:100%; top:80%;  }
.wather.show .more2{ left: 83%;top: 20%;  }
.wather.show .more3{      left: 26%;  top: 40%;  }
.wather.show .more4{  left: 3%;top:15%; transform: rotate(40deg); }
.wather.show .more5{      left: 35%;  top: 6%; }
.wather.show .more6{     left: 80%;  top: 5%;  }
.wather.show .more7{      left: 10%;  top: 40%; transform: rotate(20deg); }
.wather.show .more8{      left: 62%;
    top: 52%;  }
.wather.show .more9{      left: 161%;  top: 71%; }
/*.wather.show .more10{  left:100%; top:80%;  }*/
/*.wather.show .more11{  left:100%; top:80%;  }*/
/*.wather.show .more12{  left:100%; top:80%;  }*/
.wather.show .more13{ left: 60%;top: 30%;transform: rotate(40deg); }
/*.wather.show .more14{  left:100%; top:80%;  }*/
/*.wather.show .more15{  left:100%; top:80%;  }*/
/*.wather.show .more16{  left:100%; top:80%;  }*/
.wather.show .more17{     left: 45%;  top: 0%; transform: rotate(10deg); }
.wather.show .more18{      left: 75%;  top: 36%;  }
/* ------------------------- EPISODE 3 ------------------------------*/


.labSVG{
    width: 1000px;
    height: 500px;

}
.preloder-1{
    /*background-image: url(/img/crab_grange_letters-01.svg);*/
}
.preloder-2{ background-image: url(/img/crab_grange.png);}

.glitch{
    position: absolute;
    left:0;top:0;right:0;bottom: 0;
    background-color: #ED1E79;
    display: none;
}
.footer{
    position: absolute;
    left: 3%;
    bottom: 6%;
    opacity: 0.5;
    color:#FFF;
    font-size: 14px;

}
.footer a{color:#FFF;text-decoration: none;}
.left{
    position: absolute;
    white-space: nowrap;

}
.left.v {
    left: -3px;
    bottom: -17px;
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    transform-origin: -1% 0%;
}
/**/
.darkBubbleGroup circle,
.liquidBubblesGroup circle{
    display: none;


}
.to-landscape{

    display: none;
    font-size: 54px;
    color: #FFF;
    text-align: center;

    position: fixed;
    left:0;
    right:0;
    top:0;
    bottom: 0;

}

@media screen and (max-width: 1450px){

.logo{top:5%;}
    .girl-wrapper{


        bottom: -80px;
    }
}
@media screen and (max-width: 1024px) {

    .wrapper {
        min-height: 530px;
    }

    .side-bar {
        transform: scale(0.65);
    }

    .happy-title {
        font-size: 28px;
        line-height: 35px;
    }

    .girl-overlay .im-happy::before, .girl-overlay .im-happy::after {

        left: -7.45%;
    }

    .footer {
        display: none;
    }



}

@media screen and (orientation: portrait){

.side-bar,    .girl-wrapper{display: none!important;}
    .to-landscape{display: block}

    .logo {
        background-image: url("/img/logo-vici.png");
        width: 200px;
        height: 97px;
        margin: 0 0 0 -100px;
    }
    .preloader{display: none!important;}
}