/*  rotate  */

.rotate {

/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

/*  colorFill  */

@-webkit-keyframes colorFill{
    0%{}
    20%{fill:rgba(124,240,10,0.5)}
    50%{fill:rgba(124,240,10,0.5)}
    100%{fill:transparent;}
}

@keyframes colorFill{
    0%{}
    20%{fill:rgba(124,240,10,0.5)}
    50%{fill:rgba(124,240,10,0.5)}
    100%{fill:transparent;}
}

/*  bounce in  */

@-webkit-keyframes bounceIn{
    0%,100%,20%,40%,60%,80%{
        -webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);
        animation-timing-function:cubic-bezier(0.215,.61,.355,1)
    }
    0%{
        -webkit-transform:scale3d(1.1,1.1,1.1);
        transform:scale3d(1.1,1.1,1.1)
    }
    20%{
        opacity:0;
        -webkit-transform:scale3d(.3,.3,.3);
        transform:scale3d(.3,.3,.3)
    }
    40%{
        -webkit-transform:scale3d(0.9,0.9,0.9);
        transform:scale3d(0.9,0.9,0.9)
    }
    60%{
        opacity:1;
        -webkit-transform:scale3d(1.03,1.03,1.03);
        transform:scale3d(1.03,1.03,1.03)
    }
    80%{
      /*  -webkit-transform:scale3d(.97,.97,.97);
        transform:scale3d(.97,.97,.97)  */
        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 bounceIn{
    0%,100%,20%,40%,60%,80%{
        -webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);
        animation-timing-function:cubic-bezier(0.215,.61,.355,1)
    }
    0%{
        -webkit-transform:scale3d(1.1,1.1,1.1);
        transform:scale3d(1.1,1.1,1.1)
    }
    20%{
        opacity:0;
        -webkit-transform:scale3d(.3,.3,.3);
        transform:scale3d(.3,.3,.3)
    }
    40%{
        -webkit-transform:scale3d(0.9,0.9,0.9);
        transform:scale3d(0.9,0.9,0.9)
    }
    60%{
        opacity:1;
        -webkit-transform:scale3d(1.03,1.03,1.03);
        transform:scale3d(1.03,1.03,1.03)
    }
    80%{
      /*  -webkit-transform:scale3d(.97,.97,.97);
        transform:scale3d(.97,.97,.97)  */
        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)

    }
}

/*  bounce in stay  */

@-webkit-keyframes bounceInStay{
    0%,100%,20%,40%,60%,80%{
        -webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);
        animation-timing-function:cubic-bezier(0.215,.61,.355,1)
    }
    0%{
        -webkit-transform:scale3d(1.1,1.1,1.1);
        transform:scale3d(1.1,1.1,1.1)
    }
    20%{
        opacity:0;
        -webkit-transform:scale3d(.3,.3,.3);
        transform:scale3d(.3,.3,.3)
    }
    40%{
        -webkit-transform:scale3d(0.9,0.9,0.9);
        transform:scale3d(0.9,0.9,0.9)
    }
    60%{
        opacity:1;
        -webkit-transform:scale3d(1.03,1.03,1.03);
        transform:scale3d(1.03,1.03,1.03)
    }
    80%{
      /*  -webkit-transform:scale3d(.97,.97,.97);
        transform:scale3d(.97,.97,.97)  */
        opacity:1;
        -webkit-transform:scale3d(1,1,1);
        transform:scale3d(1,1,1)        
    }
    100%{
        opacity:1;
        -webkit-transform:scale3d(1,1,1);
        transform:scale3d(1,1,1)

    }
}

@keyframes bounceInStay{
    0%,100%,20%,40%,60%,80%{
        -webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);
        animation-timing-function:cubic-bezier(0.215,.61,.355,1)
    }
    0%{
        -webkit-transform:scale3d(1.1,1.1,1.1);
        transform:scale3d(1.1,1.1,1.1)
    }
    20%{
        opacity:0;
        -webkit-transform:scale3d(.3,.3,.3);
        transform:scale3d(.3,.3,.3)
    }
    40%{
        -webkit-transform:scale3d(0.9,0.9,0.9);
        transform:scale3d(0.9,0.9,0.9)
    }
    60%{
        opacity:1;
        -webkit-transform:scale3d(1.03,1.03,1.03);
        transform:scale3d(1.03,1.03,1.03)
    }
    80%{
      /*  -webkit-transform:scale3d(.97,.97,.97);
        transform:scale3d(.97,.97,.97)  */
        opacity:1;
        -webkit-transform:scale3d(1,1,1);
        transform:scale3d(1,1,1)        
    }
    100%{
        opacity:1;
        -webkit-transform:scale3d(1,1,1);
        transform:scale3d(1,1,1)

    }
}


/*  drow line   */

@-webkit-keyframes draw {
  0% {
    stroke-dasharray: 0 2500;
    stroke-dashoffset: 0;
    stroke-width: 2px;
  }
  100% {      
    stroke-dasharray: 2500;
    stroke-dashoffset: 0;
    stroke-width: 2px;
  }
}
@keyframes draw {
  0% {
    stroke-dasharray: 0 2500;
    stroke-dashoffset: 0;
    stroke-width: 2px;
  }
  100% {      
    stroke-dasharray: 2500;
    stroke-dashoffset: 0;
    stroke-width: 2px;
  }
}

/*  fade  */

@-webkit-keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}  
@keyframes fadeIn {
    from { opacity: 0; }
      to { opacity: 1; }
}

/*  fade from white  */

@-webkit-keyframes fadeInWhite {
    from { opacity: 0; background-color:#fff;}
      to { opacity: 1; background-color:transparent;}
}  
@keyframes fadeInWhite {
    from { opacity: 0; background-color:#fff;}
      to { opacity: 1; background-color:transparent;}
}

/*  zoom  */

@-webkit-keyframes zoomIn{
    0%{
    opacity:0;
    -webkit-transform:scale3d(.3,.3,.3);
    transform:scale3d(.3,.3,.3)}
    50%{opacity:1}
}

@keyframes zoomIn{
    0%{
    opacity:0;
    -webkit-transform:scale3d(.3,.3,.3);
    transform:scale3d(.3,.3,.3)
    }
    50%{opacity:1}
}

/*  bounce  */
@-webkit-keyframes bounce{
    0%,100%,20%,53%,80%{
    -webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);
    animation-timing-function:cubic-bezier(0.215,.61,.355,1);
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)
    }
    40%,43%{
    -webkit-animation-timing-function:cubic-bezier(0.755,.050,.855,.060);
    animation-timing-function:cubic-bezier(0.755,.050,.855,.060);
    -webkit-transform:translate3d(0,-30px,0);
    transform:translate3d(0,-30px,0)
    }
    70%{
    -webkit-animation-timing-function:cubic-bezier(0.755,.050,.855,.060);
    animation-timing-function:cubic-bezier(0.755,.050,.855,.060);
    -webkit-transform:translate3d(0,-15px,0);
    transform:translate3d(0,-15px,0)
    }
    90%{
    -webkit-transform:translate3d(0,-4px,0);
    transform:translate3d(0,-4px,0)
    }
}

@keyframes bounce{
    0%,100%,20%,53%,80%{
    -webkit-animation-timing-function:cubic-bezier(0.215,.61,.355,1);
    animation-timing-function:cubic-bezier(0.215,.61,.355,1);
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0)
    }
    40%,43%{
    -webkit-animation-timing-function:cubic-bezier(0.755,.050,.855,.060);
    animation-timing-function:cubic-bezier(0.755,.050,.855,.060);
    -webkit-transform:translate3d(0,-30px,0);
    transform:translate3d(0,-30px,0)
    }
    70%{
    -webkit-animation-timing-function:cubic-bezier(0.755,.050,.855,.060);
    animation-timing-function:cubic-bezier(0.755,.050,.855,.060);
    -webkit-transform:translate3d(0,-15px,0);
    transform:translate3d(0,-15px,0)
    }
    90%{
    -webkit-transform:translate3d(0,-4px,0);
    transform:translate3d(0,-4px,0)
    }
}