/*----------------------------
          Canvas Animations
-----------------------------*/


.canvas_orig{
    position:fixed;
    width:717px;
    height:526px;

    top:50%;
    left:50%;

    margin:-263px 0 0 -358px;

    //margin:0;

    opacity:0;

    /* Configure the animation for Firefox */
    -moz-animation-duration:9s;
    -moz-animation-name:spin;
    -moz-animation-timing-function:ease-in-out;

    /* Configure it for Chrome and Safari */
    -webkit-animation-duration:9s;
    -webkit-animation-name:spin;
    -webkit-animation-timing-function:linear;


    /* Configure it for Microsoft */
    -ms-animation-duration:9s;
    -ms-animation-name:spin;
    -ms-animation-timing-function:linear;


}


.canvas{
    position:fixed;
    width:359px;
    height:263px;

    top:110px;
    left:10px;

    //margin:-263px 0 0 -358px;

    margin:auto;

    opacity:1;


}


@-moz-keyframes spin{
    0%{
        opacity:0.2;
        -moz-transform:scale(0.2) rotate(0deg);
    }

    15%{
        opacity:1;
        margin:-263px 0 0 -358px;
        -moz-transform:scale(1) rotate(1070deg);
    }


    35%{
        opacity:1;
        margin:-263px 0 0 -358px;
        -moz-transform:scale(1) rotate(1080deg);
    }


    85%{
        opacity:1;
        top:50%;
        -moz-transform:scale(1) rotate(1080deg);
    }


    90%{
        opacity:1;
        top:50%;
        -moz-transform:scale(1) rotate(1090deg);
    }

    100%{
        opacity:0.2;
        top:500%;
        -moz-transform:scale(0.2) rotate(0deg);
    }


}

@-webkit-keyframes spin{
    0%{
        opacity:0.2;
        -webkit-transform:scale(0.2) rotate(0deg);
    }
    15%{
        opacity:1;
        margin:-263px 0 0 -358px;
        -webkit-transform:scale(1) rotate(360deg);
    }


    25%{
        opacity:1;
        margin:-263px 0 0 -358px;
        -webkit-transform:scale(1) rotate(1080deg);
    }


    85%{
        opacity:1;
        top:50%;
        -webkit-transform:scale(1) rotate(1080deg);
    }


    100%{
        opacity:0.2;
        top:500%;
        -webkit-transform:scale(0.2) rotate(1080deg);
    }


}

@-ms-keyframes spin{
    0%{
        opacity:0.2;
        -ms-transform:scale(0.2) rotate(0deg);
    }
    15%{
        opacity:1;
        margin:-263px 0 0 -358px;
        -ms-transform:scale(1) rotate(360deg);
    }


    25%{
        opacity:1;
        margin:-263px 0 0 -358px;
        -ms-transform:scale(1) rotate(1080deg);
    }


    75%{
        opacity:1;
        top:50%;
        -ms-transform:scale(1) rotate(1080deg);
    }


    100%{
        opacity:0.2;
        top:500%;
        -ms-transform:scale(0.2) rotate(1080deg);
    }


}



@media(min-width:567px) {


    .canvas {
        position:fixed;
        width:717px;
        height:526px;

        top:50%;
        left:50%;

        margin:-263px 0 0 -358px;

        opacity:1;

        /* Configure the animation for Firefox */
        -moz-animation-duration:9s;
        -moz-animation-name:spin;
        -moz-animation-timing-function:ease-in-out;

        /* Configure it for Chrome and Safari */
        -webkit-animation-duration:9s;
        -webkit-animation-name:spin;
        -webkit-animation-timing-function:linear;


        /* Configure it for Microsoft */
        -ms-animation-duration:9s; 
        -ms-animation-name:spin;
        -ms-animation-timing-function:linear;



    }

    .not_used {


    }


}