body{
    overflow-x: hidden;
}
body > .loading {
    background-color: #fff;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 99999999999;
    margin-top: 0px;
    top: 0px;
    #loading-center {
        width: 100%;
        height: 100%;
        position: relative;
        #loading-center-absolute {
            position: absolute;
            left: 50%;
            top: 50%;
            height: 200px;
            width: 200px;
            margin-top: -100px;
            margin-left: -100px;
            #object {
                width: 80px;
                height: 80px;
                animation: animate1 1s infinite ease-in-out;
                margin-right: auto;
                margin-left: auto;
                margin-top: 60px;
            }
        }
    }
    &.demo2{
        #loading-center{
            #loading-center-absolute{
                margin-top: -75px;
                transform: rotate(45deg); 
                .object{
                    width: 20px;
                    height: 20px;
                    position: absolute;
                    left: 65px;
                    top: 65px;
                    &:nth-child(2n+0) {
                        margin-right: 0px;
                    }
                    &#object_one {
                        animation: object_one 2s infinite;
                        animation-delay: 0.2s; 
                        }
                    &#object_two {
                        animation: object_two 2s infinite;
                        animation-delay: 0.3s; 
                        }
                    &#object_three {
                        animation: object_three 2s infinite;
                        animation-delay: 0.4s; 
                        }
                    &#object_four {
                        animation: object_four 2s infinite;
                        animation-delay: 0.5s; 
                    }
                    &#object_five {
                        animation: object_five 2s infinite;
                        animation-delay: 0.6s; 
                    }
                    &#object_six {
                        animation: object_six 2s infinite;
                        animation-delay: 0.7s; 
                    }
                    &#object_seven {
                        animation: object_seven 2s infinite;
                        animation-delay: 0.8s; 
                    }
                    &#object_eight {
                        animation: object_eight 2s infinite;
                        animation-delay: 0.9s; 
                    }
                    &#object_big{
                        position: absolute;
                        width: 50px;
                        height: 50px;
                        left: 50px;
                        top: 50px;
                        animation: object_big 2s infinite;
                        animation-delay: 0.5s; 
                    }	  
                }    
            }
        }
    }
    &.demo3{
        #loading-center{
            #loading-center-absolute{
                .object{
                    width: 50px;
                    height: 50px;
                    background-color: rgba(255,255,255,0);
                    margin-right: auto;
                    margin-left: auto;
                    border: 4px solid;
                    background-color: transparent;
                    left: 73px;
                    top: 73px;
                    position: absolute;
                    &#first_object{
                        animation: first_object_animate 1s infinite ease-in-out;
                    } 
                    &#second_object{
                        animation: second_object 1s forwards, second_object_animate 1s infinite ease-in-out;
                    }	
                    &#third_object{
                        animation: third_object 1s forwards, third_object_animate 1s infinite ease-in-out;
                    }	
                }
            }
        } 
    }
    &.demo4{
        #loading-center{
            #loading-center-absolute{
                height: 118px;
                width: 118px;
                margin-top: -59px;
                margin-left: -59px;
                .object{
                    width: 20px;
                    height: 20px;
                    margin-right: 20px;
                    float: left;
                    margin-bottom: 20px;
                    &:nth-child(3n+0) {
                        margin-right: 0px;
                    }
                    &#object_one {
                        animation: animate4 1s -0.9s ease-in-out infinite ;
                    }
                    &#object_two {
                        animation: animate4 1s -0.8s ease-in-out infinite ;
                    }
                    &#object_three {
                        animation: animate4 1s -0.7s ease-in-out infinite ;
                    }
                    &#object_four {
                        animation: animate4 1s -0.6s ease-in-out infinite ;
                    }
                    &#object_five {
                        animation: animate4 1s -0.5s ease-in-out infinite ;
                    }
                    &#object_six {
                        animation: animate4 1s -0.4s ease-in-out infinite ;
                    }
                    &#object_seven {
                        animation: animate4 1s -0.3s ease-in-out infinite ;
                    }
                    &#object_eight {
                        animation: animate4 1s -0.2s ease-in-out infinite ;
                    }
                    &#object_nine {
                        animation: animate4 1s -0.1s ease-in-out infinite ;
                    }
                }
            }
        }
    }
    &.demo5{
        #loading-center{
            #loading-center-absolute{
                height: 118px;
                width: 72px;
                margin-top: -59px;
                margin-left: -36px;
                .object{
                    width: 26px;
                    height: 26px;
                    margin-right: 20px;
                    float: left;
                    margin-bottom: 20px;
                    &:nth-child(2n+0) {
                        margin-right: 0px;
                    }
                    &#object_one {
                        animation: object_one_5 1s infinite;
                    }
                    &#object_two {
                        animation: object_two_5 1s infinite;
                    }
                    &#object_three {
                        animation: object_three_5 1s infinite;
                    }
                    &#object_four {
                        animation: object_four_5 1s infinite;
                    }
                    &#object_five {
                        animation: object_five_5 1s infinite;
                    }
                    &#object_six {
                        animation: object_six_5 1s infinite;
                    }
                }
            }
        }
    }
    &.demo6{
        #loading-center{
            #loading-center-absolute{
                height: 100px;
                width: 100px;
                margin-top: -50px;
                margin-left: -50px;
                .object{
                    width: 25px;
                    height: 25px;
                    margin-right: 50px;
                    float: left;
                    margin-bottom: 50px;
                    &:nth-child(2n+0) {
                        margin-right: 0px;
                    }
                    &#object_one {
                        animation: object_one_6 2s infinite;
                    }
                    &#object_two {
                        animation: object_two_6 2s infinite;
                    }
                    &#object_three {
                        animation: object_three_6 2s infinite;
                    }
                    &#object_four {
                        animation: object_four_6 2s infinite;
                    }
                }
            }
        }
    }
    &.demo7{
        #loading-center{
            #loading-center-absolute{
                height: 50px;
                width: 50px;
                margin-top: -25px;
                margin-left: -25px;
                transform: rotate(45deg); 
                animation: loading-center-absolute 1.5s infinite;
                .object{
                    width: 25px;
                    height: 25px;
                    float: left;
                    &#object_one {
                        animation: object_one_7 1.5s infinite;
                    }
                    &#object_two {
                        animation: object_two_7 1.5s infinite;
                    }
                    &#object_three {
                        animation: object_three_7 1.5s infinite;
                    }
                    &#object_four {
                        animation: object_four_7 1.5s infinite;
                    }
                }
            }
        }
    }
    &.demo8{
        #loading-center{
            #loading-center-absolute{
                height: 150px;
                width: 150px;
                margin-top: -75px;
                margin-left: -75px;
                transform: rotate(45deg);
                .object{
                    width: 20px;
                    height: 20px;
                    margin-right: 110px;
                    float: left;
                    margin-bottom: 110px;
                    &:nth-child(2n+0) {
                        margin-right: 0px;
                    }
                    &#object_one {
                        animation: object_one_8 2s infinite;
                    }
                    &#object_two {
                        animation: object_two_8 2s infinite;
                    }
                    &#object_three {
                        animation: object_three_8 2s infinite;
                    }
                    &#object_four {
                        animation: object_four_8 2s infinite;
                    }
                    &#object_big{
                        animation: object_big_8 0.5s infinite;
                        position: absolute;
                        width: 50px;
                        height: 50px;
                        left: 50px;
                        top: 50px;
                    }	
                }
            }
        }
    }
    &.demo9{
        #loading-center{
            #loading-center-absolute-one {
                position: absolute;
                left: 50%;
                top: 50%;
                height: 300px;
                width: 50px;
                margin-top: -150px;
                margin-left: -25px;	
            }
            #loading-center-absolute-two {
                position: absolute;
                left: 50%;
                top: 50%;
                height: 300px;
                width: 50px;
                margin-top: -150px;
                margin-left: 50px;	
            }
            .object-one{
                width: 18px;
                height: 18px;
                float: left;
                margin-top: 15px;
                margin-right: 15px;
                transform: rotate(45deg);
                animation: object-one 1s infinite;
                &:nth-child(6){
                    animation-delay: 0.6s;
                }
                &:nth-child(5){
                    animation-delay: 0.5s;
                }
                &:nth-child(4){
                    animation-delay: 0.4s;
                }
                &:nth-child(3){
                    animation-delay: 0.3s;
                }
                &:nth-child(2){
                    animation-delay: 0.2s;
                }
            }
            .object-two{
                width: 18px;
                height: 18px;
                float: left;
                margin-top: 15px;
                margin-right: 15px;
                transform: rotate(45deg);
                animation: object-two 1s infinite;
                &:nth-child(9){
                    animation-delay: 0.9s;
                }
                &:nth-child(8){
                    animation-delay: 0.8s;
                }
                &:nth-child(7){
                    animation-delay: 0.7s;
                }	
                &:nth-child(6){
                    animation-delay: 0.6s;
                }
                &:nth-child(5){
                    animation-delay: 0.5s;
                }
                &:nth-child(4){
                    animation-delay: 0.4s;
                }
                &:nth-child(3){
                    animation-delay: 0.3s;
                }
                &:nth-child(2){
                    animation-delay: 0.2s;
                }
            }
        }
    }
    &.demo10{
        #loading-center{
            #loading-center-absolute{
                height: 150px;
                width: 150px;
                margin-top: -75px;
                margin-left: -75px;
                .object{
                    width: 20px;
                    height: 20px;
                    float: left;
                    margin-right: 20px;
                    margin-top: 65px;
                    border-radius: 50% 50% 50% 50%;
                    &#object_one {	
                        animation: object_one_10 1.5s infinite;
                    }
                    &#object_two {
                        animation: object_two_10 1.5s infinite;
                        animation-delay: 0.25s;
                    }
                    &#object_three {
                        animation: object_three_10 1.5s infinite;
                        animation-delay: 0.5s;
                    }
                }
            }
        }
    }
    &.demo11{
        #loading-center{
            #loading-center-absolute{
                height: 150px;
                width: 150px;
                margin-top: -75px;
                margin-left: -75px;	
                transform: rotate(45deg);
                .object{
                    width: 20px;
                    height: 20px;
                    position: absolute;
                    left: 65px;
                    top: 65px;
                    border-radius: 50% 50% 50% 50%;
                    &:nth-child(2n+0) {
                        margin-right: 0px;
                    }
                    &#object_one {
                        animation: object_one_11 2s infinite;
                        animation-delay: 0.2s; 
                        }
                    &#object_two {
                        animation: object_two_11 2s infinite;
                        animation-delay: 0.3s; 
                        }
                    &#object_three {
                        animation: object_three_11 2s infinite;
                        animation-delay: 0.4s; 
                        }
                    &#object_four {
                        animation: object_four_11 2s infinite;
                        animation-delay: 0.5s; 
                    }
                    &#object_five {
                        animation: object_five_11 2s infinite;
                        animation-delay: 0.6s; 
                    }
                    &#object_six {
                        animation: object_six_11 2s infinite;
                        animation-delay: 0.7s; 
                    }
                    &#object_seven {
                        animation: object_seven_11 2s infinite;
                        animation-delay: 0.8s; 
                    }
                    &#object_eight {
                        animation: object_eight_11 2s infinite;
                        animation-delay: 0.9s; 
                    }
                    &#object_big{
                        position: absolute;
                        width: 50px;
                        height: 50px;
                        left: 50px;
                        top: 50px;
                        animation: object_big_11 2s infinite;
                        animation-delay: 0.5s; 
                    }	
                }
            }
        }
    }
    &.demo12{
        #loading-center{
            #loading-center-absolute{
                height: 60px;
                width: 60px;
                margin-top: -30px;
                margin-left: -30px;
                animation: loading-center-absolute-12 1s infinite;
                .object{
                    width: 20px;
                    height: 20px;
                    float: left;
                    border-radius: 50% 50% 50% 50%;
                    margin-right: 20px;
                    margin-bottom: 20px;	
                    &:nth-child(2n+0) {
                        margin-right: 0px;
                    }
                    &#object_one{
                        animation: object_one_12 1s infinite;
                    }
                    &#object_two{
                        animation: object_two_12 1s infinite;
                    }	
                    &#object_three{
                        animation: object_three_12 1s infinite;
                    }		
                    &#object_four{
                        animation: object_four_12 1s infinite;
                    }		
                }
            }
        }
    }
    &.demo13{
        #loading-center {
            #loading-center-absolute {
                height: 118px;
                width: 118px;
                margin-top: -59px;
                margin-left: -59px;
                .object{
                    width: 20px;
                    height: 20px;
                    margin-right: 20px;
                    float: left;
                    margin-bottom: 20px;
                    border-radius: 50% 50% 50% 50%;
                    &:nth-child(3n+0) {
                        margin-right: 0px;
                    }
                    &#object_one {
                        animation: animate_13 1s -0.9s ease-in-out infinite ;
                    }
                    &#object_two {
                        animation: animate_13 1s -0.8s ease-in-out infinite ;
                    }
                    &#object_three {
                        animation: animate_13 1s -0.7s ease-in-out infinite ;
                    }
                    &#object_four {
                        animation: animate_13 1s -0.6s ease-in-out infinite ;
                    }
                    &#object_five {
                        animation: animate_13 1s -0.5s ease-in-out infinite ;
                    }
                    &#object_six {
                        animation: animate_13 1s -0.4s ease-in-out infinite ;
                    }
                    &#object_seven {
                        animation: animate_13 1s -0.3s ease-in-out infinite ;
                    }
                    &#object_eight {
                        animation: animate_13 1s -0.2s ease-in-out infinite ;
                    }
                    &#object_nine {
                        animation: animate_13 1s -0.1s ease-in-out infinite ;
                    }
                }
            }
        }
    }
    &.demo14{
        #loading-center{
            #loading-center-absolute{
                .object{
                    border-radius: 50% 50% 50% 50%;
                    position: absolute;
                    border-left: 5px solid ;
                    border-right: 5px solid ;
                    border-top: 5px solid transparent;
                    border-bottom: 5px solid transparent;
                    background-color: transparent;
                    animation: animate_14 2s infinite;	
                    &#object_one{
                        left: 75px;
                        top: 75px;
                        width: 50px;
                        height: 50px;
                    }                            
                    &#object_two{
                        left: 65px;
                        top: 65px;
                        width: 70px;
                        height: 70px;
                        animation-delay: 0.1s;
                    }        
                    &#object_three{
                        left: 55px;
                        top: 55px;
                        width: 90px;
                        height: 90px;
                        animation-delay: 0.2s;
                    }
                    &#object_four{
                        left: 45px;
                        top: 45px;
                        width: 110px;
                        height: 110px;
                        animation-delay: 0.3s;   
                    }	
                }
            }
        }
    }
    &.demo15{
        #loading-center{
            #loading-center-absolute{
                transform: rotate(-135deg);
                .object{
                    border-radius: 50% 50% 50% 50%;
                    position: absolute;
                    border-top: 5px solid;
                    border-bottom: 5px solid transparent;
                    border-left:  5px solid;
                    border-right: 5px solid transparent;
                    background-color: transparent;
                    animation: animate_15 2s infinite;	
                    &#object_one{
                        left: 75px;
                        top: 75px;
                        width: 50px;
                        height: 50px;
                    }                          
                    &#object_two{
                        left: 65px;
                        top: 65px;
                        width: 70px;
                        height: 70px;
                        animation-delay: 0.2s;
                    }        
                    &#object_three{
                        left: 55px;
                        top: 55px;
                        width: 90px;
                        height: 90px;
                        animation-delay: 0.4s;
                    }
                    &#object_four{
                        left: 45px;
                        top: 45px;
                        width: 110px;
                        height: 110px;
                        animation-delay: 0.6s;
                    }	
                }
            }
        }
    }
}
#page-loading{
    .loading{
        z-index: 10;
        display: block !important;
        position: static;
        height:300px;
    }
}

/*demo1*/
@keyframes animate1 {
    0% {
        transform: perspective(160px) rotateX(0deg) rotateY(0deg);
    }
    50% {
        transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
    }
    100% {
        transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
    }
}


/*demo2*/
@keyframes object_big {
    50% {
        transform: scale(0.5);
    }
}

@keyframes object_one {
    50% {
        transform: translate(-65px, -65px);
    }
}

@keyframes object_two {
    50% {
        transform: translate(0, -65px);
    }
}

@keyframes object_three {
    50% {
        transform: translate(65px, -65px);
    }
}

@keyframes object_four {
    50% {
        transform: translate(65px, 0);
    }
}

@keyframes object_five {
    50% {
        transform: translate(65px, 65px);
    }
}

@keyframes object_six {
    50% {
        transform: translate(0, 65px);
    }
}

@keyframes object_seven {
    50% {
        transform: translate(-65px, 65px);
    }
}

@keyframes object_eight {
    50% {
        transform: translate(-65px, 0);
    }
}

/*demo3*/
@keyframes second_object {
    100% {
        width: 100px;
        height: 100px;
        left: 48px;
        top: 48px;
    }
}

@keyframes third_object {
    100% {
        width: 150px;
        height: 150px;
        left: 23px;
        top: 23px;
    }
}

@keyframes first_object_animate {
    0% {
        transform: perspective(100px) rotateX(0deg) rotateY(0deg);
    }
    50% {
        transform: perspective(100px) rotateX(-180deg) rotateY(0deg);
    }
    100% {
        transform: perspective(100px) rotateX(-180deg) rotateY(-180deg);
    }
}

@keyframes second_object_animate {
    0% {
        transform: perspective(200px) rotateX(0deg) rotateY(0deg);
    }
    50% {
        transform: perspective(200px) rotateX(180deg) rotateY(0deg);
    }
    100% {
        transform: perspective(200px) rotateX(180deg) rotateY(180deg);
    }
}

@keyframes third_object_animate {
    0% {
        transform: perspective(300px) rotateX(0deg) rotateY(0deg);
    }
    50% {
        transform: perspective(300px) rotateX(-180deg) rotateY(0deg);
    }
    100% {
        transform: perspective(300px) rotateX(-180deg) rotateY(-180deg);
    }
}

/*demo4*/
@keyframes animate4 {
    50% {
        transform: scale(1.5, 1.5);
    }
    100% {
        transform: scale(1, 1);
    }
}

/*demo 5*/
@keyframes object_one_5 {
    50% {
        transform: translate(-100px, 46px) rotate(-179deg);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes object_two_5 {
    50% {
        transform: translate(100px, 46px) rotate(179deg);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes object_three_5 {
    50% {
        transform: translate(-100px, 0) rotate(-179deg);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes object_four_5 {
    50% {
        transform: translate(100px, 0) rotate(179deg);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes object_five_5 {
    50% {
        transform: translate(-100px, -46px) rotate(-179deg);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes object_six_5 {
    50% {
        transform: translate(100px, -46px) rotate(179deg);
    }
    100% {
        transform: translate(0, 0);
    }
}

/*demo 6*/
@keyframes object_one_6 {
    25% {
        transform: translate(75px, 0) rotate(-90deg) scale(0.5);
    }
    50% {
        transform: translate(75px, 75px) rotate(-180deg);
    }
    75% {
        transform: translate(0, 75px) rotate(-270deg) scale(0.5);
    }
    100% {
        transform: rotate(-360deg);
    }
}

@keyframes object_two_6 {
    25% {
        transform: translate(0, 75px) rotate(-90deg) scale(0.5);
    }
    50% {
        transform: translate(-75px, 75px) rotate(-180deg);
    }
    75% {
        transform: translate(-75px, 0) rotate(-270deg) scale(0.5);
    }
    100% {
        transform: rotate(-360deg);
    }
}

@keyframes object_three_6 {
    25% {
        transform: translate(0, -75px) rotate(-90deg) scale(0.5);
    }
    50% {
        transform: translate(75px, -75px) rotate(-180deg);
    }
    75% {
        transform: translate(75px, 0) rotate(-270deg) scale(0.5);
    }
    100% {
        transform: rotate(-360deg);
    }
}

@keyframes object_four_6 {
    25% {
        transform: translate(-75px, 0) rotate(-90deg) scale(0.5);
    }
    50% {
        transform: translate(-75px, -75px) rotate(-180deg);
    }
    75% {
        transform: translate(0, -75px) rotate(-270deg) scale(0.5);
    }
    100% {
        transform: rotate(-360deg);
    }
}

/*demo 7*/
@keyframes loading-center-absolute {
    100% {
        transform: rotate(-45deg);
    }
}

@keyframes object_one_7 {
    25% {
        transform: translate(0, -50px) rotate(-180deg);
    }
    100% {
        transform: translate(0, 0) rotate(-180deg);
    }
}

@keyframes object_two_7 {
    25% {
        transform: translate(50px, 0) rotate(-180deg);
    }
    100% {
        transform: translate(0, 0) rotate(-180deg);
    }
}

@keyframes object_three_7 {
    25% {
        transform: translate(-50px, 0) rotate(-180deg);
    }
    100% {
        transform: translate(0, 0) rotate(-180deg);
    }
}

@keyframes object_four_7 {
    25% {
        transform: translate(0, 50px) rotate(-180deg);
    }
    100% {
        transform: translate(0, 0) rotate(-180deg);
    }
}

/*demo8*/
@keyframes object_big_8 {
    25% {
        transform: scale(0.5);
    }
}

@keyframes object_one_8 {
    25% {
        transform: translate(130px, 0) rotate(-90deg);
    }
    50% {
        transform: translate(130px, 130px) rotate(-180deg);
    }
    75% {
        transform: translate(0, 130px) rotate(-270deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

@keyframes object_two_8 {
    25% {
        transform: translate(0, 130px) rotate(-90deg);
    }
    50% {
        transform: translate(-130px, 130px) rotate(-180deg);
    }
    75% {
        transform: translate(-130px, 0) rotate(-270deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

@keyframes object_three_8 {
    25% {
        transform: translate(0, -130px) rotate(-90deg);
    }
    50% {
        transform: translate(130px, -130px) rotate(-180deg);
    }
    75% {
        transform: translate(130px, 0) rotate(-270deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

@keyframes object_four_8 {
    25% {
        transform: translate(-130px, 0) rotate(-90deg);
    }
    50% {
        transform: translate(-130px, -130px) rotate(-180deg);
    }
    75% {
        transform: translate(0, -130px) rotate(-270deg);
    }
    100% {
        transform: rotate(-360deg);
    }
}

/*demo 9*/		
@keyframes object-one {
    50% {
        transform: translate(100px, 0);
    }
}

@keyframes object-two {
    50% {
        transform: translate(-100px, 0);
    }
}

/*demo 10*/
@keyframes object_one_10 {
    75% {
        transform: scale(0);
    }
}

@keyframes object_two_10 {
    75% {
        transform: scale(0);
    }
}

@keyframes object_three_10 {
    75% {
        transform: scale(0);
    }
}

/*demo 11*/
@keyframes object_big_11 {
    50% {
        transform: scale(0.5);
    }
}

@keyframes object_one_11 {
    50% {
        transform: translate(-65px, -65px);
    }
}

@keyframes object_two_11 {
    50% {
        transform: translate(0, -65px);
    }
}

@keyframes object_three_11 {
    50% {
        transform: translate(65px, -65px);
    }
}

@keyframes object_four_11 {
    50% {
        transform: translate(65px, 0);
    }
}

@keyframes object_five_11 {
    50% {
        transform: translate(65px, 65px);
    }
}

@keyframes object_six_11 {
    50% {
        transform: translate(0, 65px);
    }
}

@keyframes object_seven_11 {
    50% {
        transform: translate(-65px, 65px);
    }
}

@keyframes object_eight_11 {
    50% {
        transform: translate(-65px, 0);
    }
}

/*demo 12*/
@keyframes loading-center-absolute-12 {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes object_one_12 {
    50% {
        transform: translate(20px, 20px);
    }
}

@keyframes object_two_12 {
    50% {
        transform: translate(-20px, 20px);
    }
}

@keyframes object_three_12 {
    50% {
        transform: translate(20px, -20px);
    }
}

@keyframes object_four_12 {
    50% {
        transform: translate(-20px, -20px);
    }
}

/*demo 13*/
@keyframes animate_13 {
    50% {
        transform: scale(1.5, 1.5);
    }
    100% {
        transform: scale(1, 1);
    }
}

/*demo 14*/
@keyframes animate_14 {
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

/*demo 15*/
@keyframes animate_15 {
    50% {
        transform: rotate(360deg) scale(0.8);
    }
}