/*-------------------------------------------------*/
.anima {
    -ms-animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.anima1 {
    -ms-animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.anima1-5 {
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.anima2 {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.anima2-5 {
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.anima3 {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.anima3-5 {
    -webkit-animation-duration: 3.5s;
    animation-duration: 3.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.anima4 {
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.anima4-5 {
    -webkit-animation-duration: 4.5s;
    animation-duration: 4.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.anima5 {
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.anima5-5 {
    -webkit-animation-duration: 5.5s;
    animation-duration: 5.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.anima6 {
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.anima6-5 {
    -webkit-animation-duration: 6.5s;
    animation-duration: 6.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.anima7 {
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.anima7-5 {
    -webkit-animation-duration: 7.5s;
    animation-duration: 7.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.anima8 {
    -webkit-animation-duration: 8s;
    animation-duration: 8s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.anima8-5 {
    -webkit-animation-duration: 8.5s;
    animation-duration: 8.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.anima9 {
    -webkit-animation-duration: 9s;
    animation-duration: 9s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.anima9-5 {
    -webkit-animation-duration: 9.5s;
    animation-duration: 9.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.anima10 {
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/*--------------------rotation-------------------------------------*/

@-webkit-keyframes rotation {
    from {
       transform:translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform:translate(-50%, -50%) rotate(360deg);
    }
}
@keyframes rotation {
    from {
        transform:translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform:translate(-50%, -50%) rotate(360deg);
    }
}


/*--------------------rerotation-----------------------------*/

@-webkit-keyframes rerotation {
    from {
        transform:translate(-50%, -50%) rotate(360deg);
    }

    to {
        transform:translate(-50%, -50%) rotate(0deg);
    }
}

@keyframes rerotation {
    from {
        transform:translate(-50%, -50%) rotate(360deg);
    }

    to {
        transform:translate(-50%, -50%) rotate(0deg);
    }
}

.rerotation {
    -webkit-animation: rerotation 20s linear infinite;
    animation: rerotation 20s linear infinite;
}
.rerotation2 {
    -webkit-animation: rerotation 10s linear infinite;
    animation: rerotation 10s linear infinite;
}
.rerotation3 {
    -webkit-animation: rerotation 5s linear infinite;
    animation: rerotation 5s linear infinite;
}
.rotation2 {
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
}


@keyframes rotation-90-to0 {
    from {
        transform:translate(-50%, -50%) rotate(-90deg);
    }

    to {
        transform:translate(-50%, -50%) rotate(0deg);
    }
}
.rotation-90-to0 {
    -webkit-animation-name: rotation-90-to0;
    animation-name: rotation-90-to0;
}



@keyframes returnrotation-90-to0 {
    from {
        transform:translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform:translate(-50%, -50%) rotate(-90deg);
    }
}
.returnrotation-90-to0 {
    -webkit-animation-name: returnrotation-90-to0;
    animation-name: returnrotation-90-to0;
}


@keyframes height0-to500 {
    from {
        height:0px;
    }

    to {
	
        height:500px;
    }
}
.height0-to500 {
    -webkit-animation-name: height0-to500;
    animation-name: height0-to500;
}
@keyframes returnheight0-to500 {
    from {
        height:500px;
    }

    to {
        height:0px;
    }
}
.returnheight0-to500 {
    -webkit-animation-name: returnheight0-to500;
    animation-name: returnheight0-to500;
}

@keyframes returnheight0-to20 {
    from {
        height:30px;
    }

    to {
        height:0px;
    }
}
.returnheight0-to20 {
    -webkit-animation-name: returnheight0-to20;
    animation-name: returnheight0-to20;
}

@keyframes height0-to20 {
    from {
        height:0px;
    }
    to {
        height:30px;
    }
}
.height0-to20 {
    -webkit-animation-name: height0-to20;
    animation-name: height0-to20;
}



/*--------------------fadein-----------------------------*/

@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}



.fadein {
    -webkit-animation-name: fadein;
    animation-name: fadein;
}

/*--------------------fadeout-----------------------------*/

@-webkit-keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
 
    }
}

@keyframes fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;

    }
}

.fadeout {
    -webkit-animation-name: fadeout;
    animation-name: fadeout;
}

/*--------------------scalewh-----------------------------*/

@-webkit-keyframes scalewh {
    from {
        transform: scale(0,0,0);
    }

    to {
        transform: scale(1,1,1);
    }
}

@keyframes scalewh {
    from {
        transform: scale(0,0,0);
    }

    to {
        transform: scale(1,1,1);
    }
}

.scalewh {
    -webkit-animation-name: scalewh;
    animation-name: scalewh;
}

/*--------------------rescalewh-----------------------------*/
@-webkit-keyframes rescalewh {
    from {
        transform: scale(1,1,1);
        
    }

    to {
        transform: scale(0,0,0);
       
    }
}

@keyframes rescalewh {
    from {
        transform: scale(1,1,1);
    }

    to {
        transform: scale(0,0,0);
    }
}
.rescalewh {
    -webkit-animation-name: rescalewh;
    animation-name: rescalewh;
}

/*--------------------slidefromright-----------------------------*/
@-webkit-keyframes slidefromright {
    from {
         transform: translate(100%,0%);
        
    }

    to {
        transform: translate(0%,0%);
      
    }
}

@keyframes slidefromright {
    from {
        transform: translate(100%,0%);
		 
    }

    to {
        transform: translate(0%,0%);
		
    }
}
.slidefromright {
    -webkit-animation-name: slidefromright;
    animation-name: slidefromright;
}
/*--------------------returntoright-----------------------------*/
@-webkit-keyframes returntoright {
    from {
        transform: translate(0%,0%);
    }

    to {
		transform: translate(100%,0%);
    }
}

@keyframes returntoright {
    from {
        transform: translate(0%,0%);
    }

    to {
		transform: translate(100%,0%);
    }
}
.returntoright {
    -webkit-animation-name: returntoright;
    animation-name: returntoright;
}
/*--------------------slidefromleft-----------------------------*/
@-webkit-keyframes slidefromleft {
    from {
        transform: translate(-100%,0%);
    }

    to {
		transform: translate(0%,0%);
    }
}
@keyframes slidefromleft {
    from {
        transform: translate(-100%,0%);
    }

    to {
		transform: translate(0%,0%);
    }
}
.slidefromleft {
    -webkit-animation-name: slidefromleft;
    animation-name: slidefromleft;
}

/*--------------------returntoleft-----------------------------*/
@-webkit-keyframes returntoleft {
    from {
        transform: translate(0%,0%);
    }

    to {
		transform: translate(-100%,0%);
    }
}

@keyframes returntoleft {
    from {
        transform: translate(0%,0%);
    }

    to {
		transform: translate(-100%,0%);
    }
}

.returntoleft {
    -webkit-animation-name: returntoleft;
    animation-name: returntoleft;
}
@keyframes returntoleft0 {
    from {
        transform: translate(0%,0%);
    }
    to {
		transform: translate(-100%,0%);
    }
}
.returntoleft0 {
    -webkit-animation-name: returntoleft0;
    animation-name: returntoleft0;
}
@keyframes returntoleft25 {
    from {
        transform: translate(0%,0%);
    }
    to {
		transform: translate(-100%,0%);
    }
}
.returntoleft25 {
    -webkit-animation-name: returntoleft25;
    animation-name: returntoleft25;
}
@keyframes returntoleft50 {
    from {
        transform: translate(0%,0%);
    }
    to {
		transform: translate(-100%,0%);
    }
}
.returntoleft50 {
    -webkit-animation-name: returntoleft50;
    animation-name: returntoleft50;
}
@keyframes returntoleft75 {
    from {
        transform: translate(0%,0%);
    }
    to {
		transform: translate(-100%,0%);
    }
}
.returntoleft75 {
    -webkit-animation-name: returntoleft75;
    animation-name: returntoleft75;
}
@-webkit-keyframes slidetoleft100 {
    from {
        transform: translate(0%,0%);
    }

    to {
		transform: translate(100%,0%);
    }
}
@keyframes slidetoleft100 {
    from {
        transform: translate(0%,0%);
    }
    to {
		transform: translate(100%,0%);
    }
}

.slidetoleft100 {
    -webkit-animation-name: slidetoleft100;
    animation-name: slidetoleft100;
}

@-webkit-keyframes returntoleft100 {
    from {
        transform: translate(0%,100%);
    }

    to {
		transform: translate(0%,0%);
    }
}
@keyframes returntoleft100 {
    from {
        transform: translate(0%,0%);
    }
    to {
		transform: translate(-100%,0%);
    }
}
.returntoleft100 {
    -webkit-animation-name: returntoleft100;
    animation-name: returntoleft100;
}
/*--------------------slidefrombottom-----------------------------*/
@-webkit-keyframes slidefrombottom {
    from {
        transform: translate(0%,100%);
    }

    to {
		transform: translate(0%,0%);
    }
}

@keyframes slidefrombottom {
    from {
        transform: translate(0%,100%);
    }

    to {
		transform: translate(0%,0%);
    }
}
.slidefrombottom {
    -webkit-animation-name: slidefrombottom;
    animation-name: slidefrombottom;
}
/*--------------------slidetobottom-----------------------------*/
@-webkit-keyframes returntobottom {
    from {
        transform: translate(0%,0%);
    }

    to {
		transform: translate(0%,100%);
    }
}

@keyframes returntobottom {
    from {
        transform: translate(0%,0%);
    }

    to {
		transform: translate(0%,100%);
    }
}
.returntobottom {
    -webkit-animation-name: returntobottom;
    animation-name: returntobottom;
}
/*---------------------slideoutLeft-----------------------------*/

@-webkit-keyframes slideoutLeft {
    from {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);visibility: visible;}
    to {-webkit-transform: translate3d(-100%,0,0); transform: translate3d(-100%,0,0);}
}

@keyframes slideoutLeft {
    from {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);visibility: visible;}
    to {-webkit-transform: translate3d(-100%,0,0);transform: translate3d(-100%,0,0);}
}
.slideoutLeft {
    -webkit-animation-name: slideoutLeft;
    animation-name: slideoutLeft;
}
/*---------------------slideformRight-----------------------------*/

@-webkit-keyframes slideformRight {
    from {-webkit-transform: translate3d(100%,0,0);transform: translate3d(100%,0,0);visibility: visible;}
    to {-webkit-transform: translate3d(0,0,0); transform: translate3d(0,0,0);}
}

@keyframes slideformRight {
    from {-webkit-transform: translate3d(100%,0,0);transform: translate3d(100%,0,0);visibility: visible;}
    to {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}
}
.slideformRight {
    -webkit-animation-name: slideformRight;
    animation-name: slideformRight;
}