.active .appear {
    animation: appear;
    animation-duration: 1.5s;
    -webkit-animation:appear 1.5s;
    animation-fill-mode: forwards;
    display:block;
    position: absolute;
    bottom: 0;
    right: 0;
}
@-webkit-keyframes appear {
    from {bottom: -1.88rem}
    to {bottom:0;}
}
@keyframes appear {
    from {bottom: -1.88rem}
    to {bottom:0;}
}

.active .appear-1 {
    animation: appear-1;
    animation-duration: 1.5s;
    -webkit-animation:appear-1 1.5s;
    animation-fill-mode: backwards;
    display:block;
    position: absolute;
    top: 0;
    left: 0;
}
@-webkit-keyframes appear-1 {
    from { top:-1.13rem}
    to{ top:0}
}
@keyframes appear-1 {
    from { top:-1.13rem}
    to{ top:0}
}

.active .a-slow-big{
    animation:slowBig 1.5s ease-in-out both;
    transform-origin: 50% 50%;
    -webkit-animation:slowBig 1.5s ease-in-out both;
    -webkit-transform-origin: 50% 50%;
}
@keyframes slowBig {
    0%{transform:scale(0) rotate(-60deg);opacity:0;}
    100%{transform:scale(1) rotate(0deg);opacity:1;}
}
@-webkit-keyframes slowBig {
    0%{-webkit-transform:scale(0) rotate(-60deg);opacity:0;}
    100%{-webkit-transform:scale(1) rotate(0deg);opacity:1;}
}

.active .a-big{
    animation:slowBig 1.5s ease-in-out both;
    transform-origin: 50% 50%;
    -webkit-animation:slowBig 1.5s ease-in-out both;
    -webkit-transform-origin: 50% 50%;
}
@keyframes slowBig {
    0%{transform:scale(0);opacity:0;}
    100%{transform:scale(1);opacity:1;}
}
@-webkit-keyframes slowBig {
    0%{-webkit-transform:scale(0);opacity:0;}
    100%{-webkit-transform:scale(1);opacity:1;}
}
.active .a_top{
    animation:top_move .8s ease-in-out both;
    -webkit-animation:top_move .8s ease-in-out both;
}
@keyframes top_move{
    0%{opacity:0;transform:translate(0,-.3rem)}
    100%{opacity:1;transform:translate(0,0)}
}
@-webkit-keyframes top_move {
    0%{opacity:0;-webkit-transform:translate(0,-.3rem)}
    100%{opacity:1;-webkit-transform:translate(0,0)}
}

.active .a_bottom{
    animation:bottom_move 1.5s ease-in-out both;
    -webkit-animation:bottom_move 1.5s ease-in-out both;
}
@keyframes bottom_move{
    0%{opacity:0;transform:translate(0,.16rem)}
    100%{opacity:1;transform:translate(0,0)}
}
@-webkit-keyframes bottom_move {
    0%{opacity:0;-webkit-transform:translate(0,.16rem)}
    100%{opacity:1;-webkit-transform:translate(0,0)}
}

.active .a_right{
    animation:right_move 1.5s ease-in-out both;
    -webkit-animation:right_move 1.5s ease-in-out both;
}
@keyframes right_move{
    0%{opacity:0;transform:translate(.5rem,0)}
    100%{opacity:1;transform:translate(0,0)}
}
@-webkit-keyframes right_move{
    0%{opacity:0;-webkit-transform:translate(.5rem,0)}
    100%{opacity:1;-webkit-transform:translate(0,0)}
}

.active .a_left{
    animation:left_move 1.5s ease-in-out both;
    -webkit-animation:left_move 1.5s ease-in-out both;
}
@keyframes left_move{
    0%{opacity:0;transform:translate(-.5rem,0)}
    100%{opacity:1;transform:translate(0,0)}
}
@-webkit-keyframes left_move {
    0%{opacity:0;-webkit-transform:translate(-.5rem,0)}
    100%{opacity:1;-webkit-transform:translate(0,0)}
}

.active .left-to-right{
    animation: left-to-right;
    animation-duration: 1.5s;
    -webkit-animation:left-to-right 1.5s;
    animation-fill-mode: backwards;
    display:block;
    left: 0;
}
@-webkit-keyframes left-to-right {
    from { left: -1rem}
    to{ left:0}
}
@keyframes left-to-right {
    from { left: -1rem}
    to{ left:0}
}
.active .left-to-right-1{
    animation: left-to-right-1;
    animation-duration: 1.5s;
    -webkit-animation:left-to-right-1 1.5s;
    animation-fill-mode: backwards;
    display:block;
    left: 0;
}
@-webkit-keyframes left-to-right-1 {
    from { left: -2.6rem}
    to{ left:0}
}
@keyframes left-to-right-1 {
    from { left: -2.6rem}
    to{ left:0}
}
.active .left-to-right-2{
    animation: left-to-right-2;
    animation-duration: 1.5s;
    -webkit-animation:left-to-right-2 1.5s;
    animation-fill-mode: backwards;
    display:block;
    left: 0;
}
@-webkit-keyframes left-to-right-2 {
    from { width:0; height:.5rem;}
    to { width:3.34rem; height:.5rem;}
}
@keyframes left-to-right-2 {
    from { width:0; height:.5rem;}
    to { width:3.34rem; height:.5rem;}
}
.active .left-to-right-3{
    animation: left-to-right-3;
    animation-duration: 1.5s;
    -webkit-animation:left-to-right-3 1.5s;
    animation-fill-mode: backwards;
    display:block;
    left: 0;
}
@-webkit-keyframes left-to-right-3 {
    from { width:0; height:.3rem;}
    to { width:2.74rem; height:.3rem;}
}
@keyframes left-to-right-3 {
    from { width:0; height:.3rem;}
    to { width:2.74rem; height:.3rem;}
}
.active .left-to-right-4{
    animation: left-to-right-4;
    animation-duration: 1.5s;
    -webkit-animation:left-to-right-4 1.5s;
    animation-fill-mode: backwards;
    display:block;
    left: 0;
}
@-webkit-keyframes left-to-right-4 {
    from { width:0; height:.3rem;}
    to { width:.86rem; height:.3rem;}
}
@keyframes left-to-right-4 {
    from { width:0; height:.3rem;}
    to { width:.86rem; height:.3rem;}
}
.active .left-to-right-5{
    animation: left-to-right-5;
    animation-duration: 1.5s;
    -webkit-animation:left-to-right-5 1.5s;
    animation-fill-mode: backwards;
    display:block;
    left: 0;
}
@-webkit-keyframes left-to-right-5 {
    from { width:0; height:.3rem;}
    to { width:.3rem; height:.3rem;}
}
@keyframes left-to-right-5 {
    from { width:0; height:.3rem;}
    to { width:.3rem; height:.3rem;}
}
.active .left-to-right-6{
    animation: left-to-right-6;
    animation-duration: 1.5s;
    -webkit-animation:left-to-right-6 1.5s;
    animation-fill-mode: backwards;
    display:block;
    left: 0;
}
@-webkit-keyframes left-to-right-6 {
    from { width:0; height:.3rem;}
    to { width:.74rem; height:.3rem;}
}
@keyframes left-to-right-6 {
    from { width:0; height:.3rem;}
    to { width:.74rem; height:.3rem;}
}
.active .left-to-right-7{
    animation: left-to-right-7;
    animation-duration: 1.5s;
    -webkit-animation:left-to-right-7 1.5s;
    animation-fill-mode: backwards;
    display:block;
    left: 0;
}
@-webkit-keyframes left-to-right-7 {
    from { width:0; height:.3rem;}
    to { width:.14rem; height:.3rem;}
}
@keyframes left-to-right-7 {
    from { width:0; height:.3rem;}
    to { width:.14rem; height:.3rem;}
}
.left-to-right-8{
    animation: left-to-right-8;
    animation-duration: 2s;
    -webkit-animation:left-to-right-8 2s;
    animation-fill-mode: backwards;
    display:block;
    left: 0;
}
@-webkit-keyframes left-to-right-8 {
    from { width:0; height:.3rem;}
    to { width:.93rem; height:.3rem;}
}
@keyframes left-to-right-8 {
    from { width:0; height:.3rem;}
    to { width:.93rem; height:.3rem;}
}
.left-to-right-9{
    animation: left-to-right-9;
    animation-duration: 2s;
    -webkit-animation:left-to-right-9 2s;
    animation-fill-mode: backwards;
    display:block;
    left: 0;
}
@-webkit-keyframes left-to-right-9 {
    from { width:0; height:.3rem;}
    to { width:.35rem; height:.3rem;}
}
@keyframes left-to-right-9 {
    from { width:0; height:.3rem;}
    to { width:.35rem; height:.3rem;}
}
.left-to-right-10{
    animation: left-to-right-10;
    animation-duration: 2s;
    -webkit-animation:left-to-right-10 2s;
    animation-fill-mode: backwards;
    display:block;
    left: 0;
}
@-webkit-keyframes left-to-right-10 {
    from { width:0; height:.3rem;}
    to { width:.7rem; height:.3rem;}
}
@keyframes left-to-right-10 {
    from { width:0; height:.3rem;}
    to { width:.7rem; height:.3rem;}
}
.left-to-right-11{
    animation: left-to-right-11;
    animation-duration: 2s;
    -webkit-animation:left-to-right-11 2s;
    animation-fill-mode: backwards;
    display:block;
    left: 0;
}
@-webkit-keyframes left-to-right-11 {
    from { width:0; height:.3rem;}
    to { width:.24rem; height:.3rem;}
}
@keyframes left-to-right-11 {
    from { width:0; height:.3rem;}
    to { width:.24rem; height:.3rem;}
}