// LAYOUT
// ---------
.page{
transform:scale(0.4);
  position:relative;
  .square(100%);
  min-height:170px;
  .transition(all .5s ease-in-out);
}

// FRAME
.frame{
  position:absolute;
  left:0;
  top:0;
  .square(100%);

  -webkit-transform: translate3d(0,0,0);
  
  .st0{
    fill-rule:evenodd;
    clip-rule:evenodd;
    fill:#67CDB6;
  }
}

.in-page{
  position:relative;
  .square(100%);

  &:hover{
    .action{
      //.opacity(100);
      .scale(1.1);
    }
  }
}



// ACTION
// ---------
.action{
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-295px;
  margin-top:-120px;
  .size(590px, 140px);
  z-index:5;
  .opacity(60);

  .transition(all .3s ease-in-out);

  .st0{
    fill:#474e66;
  }
}


// BG
// ---------
.bot-bg{
  position:absolute;
  margin:0 auto;
margin:0 auto;
left:0;
right:0;
top:-70px;
  .square(250px);

  .bg{
    position:absolute;
    left:0;
    top:0;
    .square(100%);
    border:40px solid #cef5ec;
    .border-radius(180px);
    background:@white;
    .scale(0.2);
    .opacity(0);
    .transition(all .4s .2s cubic-bezier(.32,0,.31,1.44));
    
    &:before,
    &:after{
      content:'';
      position:absolute;
      top:40px;
      left:60px;
      .square(0);
      border-style: solid;
      border-width: 240px 120px 0 120px;
      border-color: @white transparent transparent transparent;
      .opacity(0);
      .transition(all .2s ease-in-out);
    }
    &:before{
      left:0;
      top:0;
      border-width: 360px 180px 0 180px;
      border-color: #eee6ff transparent transparent transparent;
    }
  }
  .bg-small{
    position:absolute;
    left:180px;
    top:180px;
    margin:-13px 0 0 -13px;
    .square(26px);
    border:5px solid #cef5ec;
    .border-radius(14px);
    background:@white;
    .opacity(0);
    .transition(all .4s .3s cubic-bezier(.32,0,.31,1.44));

    &:before,
    &:after{
      content:'';
      position:absolute;
      top:11px;
      left:8px;
      .square(0);
      border-style: solid;
      border-width: 0 5px 10px 5px;
      border-color: transparent transparent @white transparent;
      .opacity(0);
      .transition(all .2s ease-in-out);
    }
    &:before{
      left:0;
      top:0;
      border-width: 0 13px 26px 13px;
      border-color: transparent transparent #eee6ff transparent;
    }
  }
}



// BOT
// ---------
.bot{
  position:absolute;
  left:0;
  right:0;
margin:0 auto;
  .size(500px, 177px);
  z-index:20;
  text-align: center;
  .transition(all .5s ease-in-out);

  -webkit-transform: translate3d(0,0,0);
}


// BOT - STAND BY
// ---------
.bot-stand-by{
  background:#2a2f40;
  
  .frame,
  nav{
    .st0{
      fill:#3d4359;
    }
  }
  nav{
    top:-100px;
  }
  .bot{
    margin-top:80px;
  }
  .bot-head{
    top:-90px;

    .st0{
      fill:#3d4359;
    }
    .st1{
      fill:#474e66;
      stroke:#212636;
    }
    .st2{
      fill:@white;
      .opacity(0);
    }
    .st3{
      fill:#212636;
    }
  }
  .bot-body-active{
    visibility:hidden;
    .opacity(0);

    .st0{
      fill:#3D4359;
    }
    .st1{
      fill:#474E66;
    }
    .st2{
      //fill:@white;
    }
    .st3{
      fill:#212636;
    }
    .st4{
      stroke:#212636;
    }
  }
  .bot-body-dont-active{
    visibility:visible;
    .opacity(100);

    .st0{
      fill:#3D4359;
    }
    .st1{
      fill:#212636;
    }
    .st2{
      stroke:#212636;
    }
  }
  .bot-shadow{
    bottom:-5px;
  }
}


// BOT - ACTIVE
// ---------
.bot-happy,
.bot-sad,
.bot-sliding,
.bot-surprised{
  .action{
    //top:45%;
    .opacity(0);
    .scale(0.8);
    visibility:hidden;
  }
  .bot-bg{
    .bg{
      .scale(1);
      .opacity(100);
    }
    .bg-small{
      .opacity(100);
    }
    .bg-first{
      left:-13px;
      top:50px;
    }
    .bg-second{
      left:340px;
      top:35px;
    }
    .bg-third{
      left:380px;
      top:250px;
    }
  }
  .bot-shadow{
    .opacity(0);
    .scale(0.4);
  }
  .bot{
    -webkit-animation: pulse 4s infinite ease-in-out;
    -webkit-animation-delay: .5s;

    -moz-animation: pulse 4s infinite ease-in-out;
    -moz-animation-delay: .5s;

    animation: pulse 4s infinite ease-in-out;
    animation-delay: .5s;
  }
  .bot-head{
    .st2{
      fill:@white;
      .opacity(40);
    }
  }
  .bot-body-active{
    .st2{
      .opacity(20);
    }
    .st3{
      fill:@white;
    }
  }
  .levitas{
    .opacity(100);

    i{
      -webkit-animation: levitas 3s infinite ease-in-out;
      -moz-animation: levitas 3s infinite ease-in-out;
      animation: levitas 3s infinite ease-in-out;
    }
    .levitas-second{
      -webkit-animation-delay: .8s;
      -moz-animation-delay: .8s;
      animation-delay: .8s;
    }
    .levitas-third{
      -webkit-animation-delay: 1.5s;
      -moz-animation-delay: 1.5s;
      animation-delay: 1.5s;
    }
    .levitas-four{
      -webkit-animation-delay: 2.2s;
      -moz-animation-delay: 2.2s;
      animation-delay: 2.2s;
    }
  }
}



// BOT - HAPPY
// ---------
.bot-happy{
  .bot-head{
    .st0{
      fill:#31c9ff;
    }
    .st1{
      fill:#a3e2f9;
      stroke:#0269ff;
    }
    .st3{
      fill:#0269ff;
    }
  }
  .bot-face{
    .eye{
      .opacity(100);
      background:#0269ff;
      &:before,
      &:after{
        height:0;
      }
    }
    .mouth{
      margin-left:-39px;
      .size(78px, 20px);
      .opacity(100);
      background:4px solid #0269ff;

      &:after{
        .size(78px, 10px);
      }
    }
  }
  .bot-body-active{
    .st0{
      fill:#31c9ff;
    }
    .st1{
      fill:#0269ff;
    }
    .st4{
      stroke:#0269ff;
    }

  }
  .bot-body-dont-active{
    .st0{
      fill:#66CDB6;
    }
    .st1{
      fill:#328D79;
    }
    .st2{
      stroke:#328D79;
    }
  }
}
.bot-happy-start{
  .bot-face{
    .eye{
      &:before,&:after{
        -webkit-animation: eye .6s ease-in-out;
        -webkit-animation-delay: .5s;
        -webkit-animation-fill-mode:forwards;
        -webkit-animation-iteration-count: 1;

        -moz-animation: eye .6s ease-in-out;
        -moz-animation-delay: .5s;
        -moz-animation-fill-mode:forwards;
        -moz-animation-iteration-count: 1;

        animation: eye .6s ease-in-out;
        animation-delay: .5s;
        animation-fill-mode:forwards;
        animation-iteration-count: 1;
      }
    }
    .mouth{
      .transition(all .3s 1s ease-in-out);
    }
  }
}

// BOT - sliding
// ---------
.bot-sliding{
  .frame,
  nav{
    .st0{
      fill:#f26461;
    }
  }
  nav{
    .btn-sliding{
      &:after{
        background:#f8acaa;
      }
      &:before{
        background:#a34240;
      }
    }
    .btn-happy{
      &:after{
        background:#f8acaa;
      }
      &:before{
        background:#a34240;
      }
    }
    .btn-sliding{
      &:after{
        background:#f8acaa;
      }
      &:before{
        background:#a34240;
      }
    }
    .btn-surprised{
      &:after{
        border-color: transparent transparent #f8acaa transparent;
      }
      &:before{
        border-color: transparent transparent #a34240 transparent;
      }
    }
  }
  .bot-bg{
    .bg{
      border-color:#ffcbca;
      .border-radius(0);
      .rotate(90deg);
    }
    .bg-small{
      border-color:#ffcbca;
      .border-radius(0);
    }
    .bg-first{
      left:-45px;
      top:90px;
    }
    .bg-second{
      left:420px;
      top:55px;
    }
    .bg-third{
      left:400px;
      top:280px;
    }
  }
  .bot-head{
    .st0{
      fill:#f667a5;
    }
    .st1{
      fill:#f5b9d3;
      stroke:#a32aa9;
    }
    .st3{
      fill:#a32aa9;
    }
  }
  .bot-face{
    .eye{
      margin-top:2px;
      .size(10px, 10px);
      .border-radius(6px);
      background:#a32aa9;
      .opacity(100);

      &:before,
      &:after{
        .opacity(0);
      }
    }
    .mouth{
      top:83px;
      margin-left:-20px;
      .size(38px, 16px);
      border:4px solid #a32aa9;
      .opacity(100);
      .transition(all .2s ease-in-out);
      
      &:before{
        content:'';
        position:absolute;
        left:50%;
        bottom:-4px;
        margin-left:-50px;
        .size(100px, 8px);
        background:transparent;
      }
      &:after{
        display:none;
      }
    }
  }
  .bot-body-active{
    .st0{
      fill:#f667a5;
    }
    .st1{
      fill:#a32aa9;
    }
    .st4{
      stroke:#a32aa9;
    }
  }
  .levitas{
    i{
      background:#f667a5;
    }
  }
}

// BOT - SAD
// ---------
.bot-sad{
  .frame,
  nav{
    .st0{
      fill:#f26461;
    }
  }
  nav{
    .btn-sad{
      &:after{
        background:#f8acaa;
      }
      &:before{
        background:#a34240;
      }
    }
    .btn-happy{
      &:after{
        background:#f8acaa;
      }
      &:before{
        background:#a34240;
      }
    }
    .btn-surprised{
      &:after{
        border-color: transparent transparent #f8acaa transparent;
      }
      &:before{
        border-color: transparent transparent #a34240 transparent;
      }
    }
  }
  .bot-bg{
    .bg{
      border-color:#ffcbca;
      .border-radius(0);
      .rotate(90deg);
    }
    .bg-small{
      border-color:#ffcbca;
      .border-radius(0);
    }
    .bg-first{
      left:-45px;
      top:90px;
    }
    .bg-second{
      left:420px;
      top:55px;
    }
    .bg-third{
      left:400px;
      top:280px;
    }
  }
  .bot-head{
    .st0{
      fill:#9491ff;
    }
    .st1{
      fill:#d7d6ff;
      stroke:#6d67ff;
    }
    .st3{
      fill:#6a64ff;
    }
  }
  .bot-face{
    .eye{
      margin-top:2px;
      .size(10px, 10px);
      .border-radius(6px);
      background:#6a64ff;
      .opacity(100);

      &:before,
      &:after{
        .opacity(0);
      }
    }
    .mouth{
      top:83px;
      margin-left:-20px;
      .size(38px, 16px);
      border:4px solid #6a64ff;
      .opacity(100);
      .transition(all .2s ease-in-out);
      
      &:before{
        content:'';
        position:absolute;
        left:50%;
        bottom:-4px;
        margin-left:-50px;
        .size(100px, 8px);
        background:#d7d6ff;
      }
      &:after{
        display:none;
      }
    }
  }
  .bot-body-active{
    .st0{
      fill:#9491ff;
    }
    .st1{
      fill:#6a64ff;
    }
    .st4{
      stroke:#6a64ff;
    }
  }
  .levitas{
    i{
      background:#9491ff;
    }
  }
}


// BOT - SURPRISED
// ---------
.bot-surprised{
  .frame,
  nav{
    .st0{
      fill:#a681fa;
    }
  }
  nav{
    .btn-sad{
      &:after{
        background:#cdb7ff;
      }
      &:before{
        background:#5f40a6;
      }
    }
    .btn-happy{
      &:after{
        background:#cdb7ff;
      }
      &:before{
        background:#5f40a6;
      }
    }
    .btn-surprised{
      &:after{
        border-color: transparent transparent #cdb7ff transparent;
      }
      &:before{
        border-color: transparent transparent #5f40a6 transparent;
      }
    }
  }
  .bot-bg{
    .bg{
      .border-radius(0);
      border:0;
      .rotate(180deg);

      &:before,
      &:after{
        .opacity(100);
      }
    }
    .bg-small{
      border:0;
      .border-radius(0);

      &:before,
      &:after{
        .opacity(100);
      }
    }
    .bg-first{
      left:45px;
      top:50px;
    }
    .bg-second{
      left:320px;
      top:105px;
    }
    .bg-third{
      left:380px;
      top:270px;
    }
  }
  .bot-head{
    .st0{
      fill:#fcb857;
    }
    .st1{
      fill:#ffd69c;
      stroke:#ff534c;
    }
    .st3{
      fill:#ff534c;
    }
  }
  .bot-face{
    .eye{
      margin-top:-10px;
      .size(30px, 30px);
      .border-radius(18px);
      background:#ff534c;
      .opacity(100);

      &:before,
      &:after{
        display:block;
        left:5px;
        top:5px;
        .square(9px);
        .border-radius(6px);
        background:@white;
        .opacity(100);
      }
      &:after{
        top:14px;
        left:14px;
        .square(4px);
      }
    }
    .eye-left{
      margin-left:-50px;
    }
    .eye-right{
      margin-left:25px;
    }
    .mouth{
      top:86px;
      margin-left:-9px;
      .size(18px, 10px);
      .border-radius(50%);
      border:0;
      background:#ff534c;
      .opacity(100);
      .transition(all .4s ease-in-out);
      
      &:before{
        bottom:-20px;
        .opacity(0);
      }
      &:after{
        display:none;
      }
    }
  }
  .bot-body-active{
    .st0{
      fill:#fcb857;
    }
    .st1{
      fill:#ff534c;
    }
    .st4{
      stroke:#ff534c;
    }
  }
  .levitas{
    i{
      background:#fcb857;
    }
  }
}




.bot-head{
  position:absolute;
  left:50%;
  margin-left:-110px;
  .size(219px, 157px);
  z-index:10;
  .transition(all .5s ease-in-out);

  .st0{
    fill-rule:evenodd;
    clip-rule:evenodd;
  }
  .st1{
    stroke-width:3;
    stroke-miterlimit:10;
    fill-rule:evenodd;
    clip-rule:evenodd;
  }
  .st2{
    fill-rule:evenodd;
    clip-rule:evenodd;
  }
  .st3{
    
  }
}
.bot-face{
  position:absolute;
  left:0;
  top:0;
  .size(100%, 100%);

  .eye{
    position:absolute;
    left:50%;
    top:50px;
    .size(10px, 14px);
    .border-radius(50%);
    background:#277463;
    .opacity(0);
    .transition(all .3s ease-in-out);

    &:before,
    &:after{
      content:'';
      position:absolute;
      left:0;
      .size(100%, 7px);
      background:#b9e7dd;
    }
    &:before{
      top:0;
    }
    &:after{
      bottom:0;
    }
  }
  .eye-left{
    margin-left:-44px;
  }
  .eye-right{
    margin-left:34px;
  }
  .mouth{
    position:absolute;
    left:50%;
    top:83px;
    margin-left:-20px;
    .size(40px, 20px);
    .border-radius(10px);
    border:4px solid #0269ff;
    .opacity(0);
    .transition(all .3s ease-in-out);

    &:after{
      content:'';
      position:absolute;
      left:-4px;
      top:-5px;
      .size(40px, 11px);
      background:#a3e2f9;
    }
  }
}

.bot-body{
  position:relative;
  .size(226px, 177px);
  z-index:5;
top:110px;
}
.bot-body-active{
  position:relative;
  visibility:visible;
  .opacity(100);
  z-index:5;
  .transition(all .2s ease-in-out);

  .st0{
    fill-rule:evenodd;
    clip-rule:evenodd;
  }
  .st1{
    fill-rule:evenodd;
    clip-rule:evenodd;
  }
  .st2{
    .opacity(20);
  }
  .st3{
    fill-rule:evenodd;
    clip-rule:evenodd;
  }
  .st4{
    fill-rule:evenodd;
    clip-rule:evenodd;
    fill:none;
    stroke-width:6;
    stroke-miterlimit:10;
  }
}
.bot-body-dont-active{
  position:absolute;
  left:0;
  top:0;
  .size(226px, 175px);
  .opacity(0);
  visibility:hidden;
  z-index:2;
  .transition(all .2s ease-in-out);

  .st0{
    fill-rule:evenodd;
    clip-rule:evenodd;
  }
  .st1{
    fill-rule:evenodd;
    clip-rule:evenodd;
  }
  .st2{
    fill-rule:evenodd;
    clip-rule:evenodd;
    fill:none;
    stroke-width:6;
    stroke-miterlimit:10;
  }
}

.levitas{
  position:absolute;
  left:0;
  top:300px;
  margin-top:-20px;
  .size(100%, 70px);
  .opacity(0);
  .transition(all .5s ease-in-out);

  i{
    position:absolute;
    left:50%;
    top:-30px;
    margin-left:-50px;
    .size(100px, 24px);
    .border-radius(50%);
    background:#31c9ff;
    .transition(all .2s ease-in-out);
  }
}
.bot-shadow{
  position:absolute;
  left:50%;
  bottom:-75px;
  margin-left:-75px;
  .size(150px, 20px);
  .border-radius(50%);
  background:#212636;
  .opacity(70);
  .scale(1);
  .transition(all .5s ease-in-out);
}


@-webkit-keyframes pulse {
  0% {
    //margin-top:10px;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  40% {
    //margin-top:40px;
    -webkit-transform: translate3d(0,30px,0);
    transform: translate3d(0,30px,0);
  }
  100% {
    //margin-top:10px;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}
@-webkit-keyframes eye {
  0% {
    height:7px;
  }
  30% {
    height:4px;
  }
  60% {
    height:7px;
  }
  100% {
    height:0;
  }
}
@-webkit-keyframes levitas {
  0% {
    top:-30px;
    .opacity(100);
    .scale(1);
  }
  50% {
    .opacity(100);
  }
  100% {
    top:50px;
    .opacity(0);
    .scale(0.4);
  }
}

@-moz-keyframes pulse {
  0% {
    -moz-transform: translate3d(0,0,0);
  }
  40% {
    -moz-transform: translate3d(0,30px,0);
  }
  100% {
    -moz-transform: translate3d(0,0,0);
  }
}
@-moz-keyframes eye {
  0% {
    height:7px;
  }
  30% {
    height:4px;
  }
  60% {
    height:7px;
  }
  100% {
    height:0;
  }
}
@-moz-keyframes levitas {
  0% {
    top:-30px;
    .opacity(100);
    .scale(1);
  }
  50% {
    .opacity(100);
  }
  100% {
    top:50px;
    .opacity(0);
    .scale(0.4);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
  40% {
    -webkit-transform: translate3d(0,30px,0);
    -moz-transform: translate3d(0,30px,0);
    transform: translate3d(0,30px,0);
  }
  100% {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }
}
@keyframes eye {
  0% {
    height:7px;
  }
  30% {
    height:4px;
  }
  60% {
    height:7px;
  }
  100% {
    height:0;
  }
}
@keyframes levitas {
  0% {
    top:-30px;
    .opacity(0);
    visibility:visible;
  }
  10% {
    top:-30px;
    .opacity(100);
    .scale(1);
  }
  50% {
    .opacity(100);
  }
  90% {
    top:50px;
    .opacity(0);
    .scale(0.4);
  }
  100% {
    top:50px;
    .opacity(0);
    visibility:hidden;
  }
}






// MEDIA QUERIES
// ---------

@media screen and (max-width: 670px) , screen and (max-height: 630px){

  .in-page{
    .scale(0.8);
  }

}

@media screen and (max-width: 510px) , screen and (max-height: 500px){

  .in-page{
    .scale(0.6);
  }


}

@media screen and (max-width: 400px) , screen and (max-height: 380px){
  

  .action{
    margin-left:-180px;
    margin-top:-80px;
    .size(360px, 100px);
  }

}



// Colors
@white:     #fff;
@black:			#000;




// FONTS
// --------------------------------------------------

#font {
  #family {
    .serif() {
      font-family: Georgia, "Times New Roman", Times, serif;
    }
    .sans-serif() {
      font-family: 'Arial CE', Arial, sans-serif;
    }
  }

  .size(@font-size: 16, @line: 1) {
    @rem: (@font-size / 10);
    font-size: @font-size * 1px;
    font-size: ~"@{rem}rem";
    line-height: @line;
  }

}

.font-size(@font-size: 16, @line: 1) {
  @rem: (@font-size / 10);
  font-size: @font-size * 1px;
  font-size: ~"@{rem}rem";
  line-height: @line;
}


// Sizing shortcuts
// -------------------------
.size(@width: 5px, @height: 5px) {
  width: @width;
  height: @height;
}
.square(@size: 5px) {
  .size(@size, @size);
}

// Border Radius
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

// Transformations
.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
     -moz-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees);
       -o-transform: rotate(@degrees);
          transform: rotate(@degrees);
}
.scale(@ratio) {
  -webkit-transform: scale(@ratio);
     -moz-transform: scale(@ratio);
      -ms-transform: scale(@ratio);
       -o-transform: scale(@ratio);
          transform: scale(@ratio);
}
.translate(@x: 0, @y: 0) {
  -webkit-transform: translate(@x, @y);
     -moz-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y);
       -o-transform: translate(@x, @y);
          transform: translate(@x, @y);
}

// Opacity
.opacity(@opacity: 100) {
  opacity: @opacity / 100;
   filter: e(%("alpha(opacity=%d)", @opacity));
}

// Transitions
.transition(@transition) {
  -webkit-transition: @transition;
     -moz-transition: @transition;
      -ms-transition: @transition;
       -o-transition: @transition;
          transition: @transition;
}

