@charset "utf-8";  

@-webkit-keyframes fadeIn{ 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 
,@-moz-keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 
@keyframes fadeIn { 
    0% {opacity: 0;} 
    100% {opacity: 1;} 
} 
.fadeIn { 
    -webkit-animation-name: fadeIn; 
	-moz-animation-name: fadeIn;
    animation-name: fadeIn; 
}
/*---------banner slider--------------*/
/*---------homepage-project-slider-animation--------------*/
.animated { 
    -webkit-animation-duration: 2s; 
	-moz-animation-duration: 2s; 
    animation-duration: 2s; 
    -webkit-animation-fill-mode: forwards; 
	-moz-animation-fill-mode: forwards; 
    animation-fill-mode: forwards; 
	-webkit-animation-timing-function: ease-in; 
	-moz-animation-timing-function: ease-in; 
	animation-timing-function: ease-in; visibility:visible !important;
	
} 
@-webkit-keyframes bounceInDown{ 
   0% {   opacity: 0;       -webkit-transform: translateY(-100px);     } 
    60% {    opacity: 1;    -webkit-transform: translateY(0px);    } 
    80% {  -webkit-transform: translateY(0);     } 
    100% {   -webkit-transform: translateY(0); opacity: 1;    } 
} 
@-moz-keyframes bounceInDown { 
   0% {   opacity: 0;       -moz-transform: translateY(-100px);     } 
    60% {    opacity: 1;    -moz-transform: translateY(0px);    } 
    80% {  -moz-transform: translateY(0);     } 
    100% {   -moz-transform: translateY(0); opacity: 1;    } 
} 
@keyframes bounceInDown { 
    0% {    opacity: 0;   transform: translateY(-100px);  } 
    60% {  opacity: 1;  transform: translateY(0px);  } 
    80% {   transform: translateY(0);  } 
    100% {  transform: translateY(0);   } } 
.bounceInDown {   -webkit-animation-name: bounceInDown; 
-moz-animation-name: bounceInDown; 
    animation-name: bounceInDown; opacity: 1;
}


@-webkit-keyframes flipInX { 
    0% { 
        -webkit-transform: perspective(400px) rotateX(90deg); 
        opacity: 0; 
    } 
    40% { 
        -webkit-transform: perspective(400px) rotateX(-10deg); 
    } 
    70% { 
        -webkit-transform: perspective(400px) rotateX(10deg); 
    } 
    100% { 
        -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1;
        
    } 
} 
@-moz-keyframes flipInX { 
    0% { 
        -moz-transform: perspective(400px) rotateX(90deg); 
        opacity: 0; 
    } 
    40% { 
        -moz-transform: perspective(400px) rotateX(-10deg); 
    } 
    70% { 
        -moz-transform: perspective(400px) rotateX(10deg); 
    } 
    100% { 
        -moz-transform: perspective(400px) rotateX(0deg); opacity: 1;
        
    } 
} 
@keyframes flipInX { 
    0% { 
        transform: perspective(400px) rotateX(90deg); 
        opacity: 0; 
    } 
    40% { 
        transform: perspective(400px) rotateX(-10deg); 
    } 
    70% { 
        transform: perspective(400px) rotateX(10deg); 
		
    } 
    100% { 
        transform: perspective(400px) rotateX(0deg); opacity: 1;
        
    } 
} 
.flipInX { 
    -webkit-backface-visibility: visible !important; 
    -webkit-animation-name: flipInX; 
	-moz-backface-visibility: visible !important; 
    -moz-animation-name: flipInX; 
    backface-visibility: visible !important; 
    animation-name: flipInX; 
}
@-webkit-keyframes bounceInLeft { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateX(-100px); 
    } 
    60% { 
        opacity: 1; 
        -webkit-transform: translateX(30px); 
    } 
    80% { 
        -webkit-transform: translateX(-10px); 
    } 
    100% { 
        -webkit-transform: translateX(0); opacity: 1;
    } 
} 
@-moz-keyframes bounceInLeft { 
    0% { 
        opacity: 0; 
        -moz-transform: translateX(-100px); 
    } 
    60% { 
        opacity: 1; 
        -moz-transform: translateX(30px); 
    } 
    80% { 
        -moz-transform: translateX(-10px); 
    } 
    100% { 
        -moz-transform: translateX(0); opacity: 1;
    } 
}

@keyframes bounceInLeft { 
    0% { 
        opacity: 0; 
        transform: translateX(-100px); 
    } 
    60% { 
        opacity: 1; 
        transform: translateX(30px); 
    } 
    80% { 
        transform: translateX(-10px); 
    } 
    100% { 
        transform: translateX(0); opacity: 1;
    } 
} 
.bounceInLeft { 
    -webkit-animation-name: bounceInLeft; 
	-moz-animation-name: bounceInLeft;
    animation-name: bounceInLeft; 
}

@-webkit-keyframes bounceInRight { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateX(100px); 
    } 
    60% { 
        opacity: 1; 
        -webkit-transform: translateX(0); 
    } 
    80% { 
        -webkit-transform: translateX(0); 
    } 
    100% { 
        -webkit-transform: translateX(0); opacity: 1;
    } 
} 
@-moz-keyframes bounceInRight { 
    0% { 
        opacity: 0; 
        -moz-transform: translateX(100px); 
    } 
    60% { 
        opacity: 1; 
        -moz-transform: translateX(0); 
    } 
    80% { 
        -moz-transform: translateX(0); 
    } 
    100% { 
        -moz-transform: translateX(0); opacity: 1;
    } 
}

@keyframes bounceInRight { 
    0% { 
        opacity: 0; 
        transform: translateX(100px); 
    } 
    60% { 
        opacity: 1; 
        transform: translateX(0); 
    } 
    80% { 
        transform: translateX(0); 
    } 
    100% { 
        transform: translateX(0); opacity: 1;
    } 
} 

.bounceInRight { 
    -webkit-animation-name: bounceInRight; 
	-moz-animation-name: bounceInRight; 
    animation-name: bounceInRight; 
}


@-webkit-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-30px);} 
    60% {-webkit-transform: translateY(-15px);} 
} 
@-moz-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);} 
    40% {-moz-transform: translateY(-30px);} 
    60% {-moz-transform: translateY(-15px);} 
}

@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    40% {transform: translateY(-30px);} 
    60% {transform: translateY(-15px);} 
} 

.bounce { 
    -webkit-animation-name: bounce;
	-moz-animation-name: bounce; 
    animation-name: bounce; 
}
@-webkit-keyframes bounceInUp { 
    0% { 
        opacity: 0; 
        -webkit-transform: translateY(100px); 
    } 
    60% { 
        opacity: 1; 
        -webkit-transform: translateY(-30px); 
    } 
    80% { 
        -webkit-transform: translateY(0); 
    } 
    100% { 
        -webkit-transform: translateY(0); opacity: 1;
    } 
} 

@-moz-keyframes bounceInUp { 
    0% { 
        opacity: 0; 
        -moz-transform: translateY(100px); 
    } 
    60% { 
        opacity: 1; 
        -moz-transform: translateY(-30px); 
    } 
    80% { 
        -moz-transform: translateY(0); 
    } 
    100% { 
        -moz-transform: translateY(0); opacity: 1;
    } 
}
@keyframes bounceInUp { 
    0% { 
        opacity: 0; 
        transform: translateY(100px); 
    } 
    60% { 
        opacity: 1; 
        transform: translateY(-30px); 
    } 
    80% { 
        transform: translateY(0); 
    } 
    100% { 
        transform: translateY(0); opacity: 1;
    } 
} 

.bounceInUp { 
    -webkit-animation-name: bounceInUp; 
	-moz-animation-name: bounceInUp;
    animation-name: bounceInUp; 
}
@-webkit-keyframes flipOutY { 
    0% { 
        -webkit-transform: perspective(400px) rotateY(0deg); 
        opacity: 1; 
    } 
    100% { 
        -webkit-transform: perspective(400px) rotateY(90deg); 
        opacity: 0; 
    } 
} 
@-moz-keyframes flipOutY { 
    0% { 
        -moz-transform: perspective(400px) rotateY(0deg); 
        opacity: 1; 
    } 
    100% { 
        -moz-transform: perspective(400px) rotateY(90deg); 
        opacity: 0; 
    } 
}
@keyframes flipOutY { 
    0% { 
        transform: perspective(400px) rotateY(0deg); 
        opacity: 1; 
    } 
    100% { 
        transform: perspective(400px) rotateY(90deg); 
        opacity: 0; 
    } 
} 
.flipOutY { 
    -webkit-backface-visibility: visible !important; 
    -webkit-animation-name: flipOutY; 
	-moz-backface-visibility: visible !important; 
    -moz-animation-name: flipOutY; 
    backface-visibility: visible !important; 
    animation-name: flipOutY; 
}
/*---------homepage-project-slider-animation--------------*/

@-webkit-keyframes swing { 
    20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } 
    20% { -webkit-transform: rotate(15deg); } 
    40% { -webkit-transform: rotate(-10deg); } 
    60% { -webkit-transform: rotate(5deg); } 
    80% { -webkit-transform: rotate(-5deg); } 
    100% { -webkit-transform: rotate(0deg); } 
} 
@-moz-keyframes swing { 
    20%, 40%, 60%, 80%, 100% { -moz-transform-origin: top center; } 
    20% { -moz-transform: rotate(15deg); } 
    40% { -moz-transform: rotate(-10deg); } 
    60% { -moz-transform: rotate(5deg); } 
    80% { -moz-transform: rotate(-5deg); } 
    100% { -moz-transform: rotate(0deg); } 
} 
@keyframes swing { 
    20% { transform: rotate(15deg); } 
    40% { transform: rotate(-10deg); } 
    60% { transform: rotate(5deg); } 
    80% { transform: rotate(-5deg); } 
    100% { transform: rotate(0deg); } 
} 
.swing { 
    -webkit-transform-origin: top center; 
	-moz-transform-origin: top center; 
    transform-origin: top center; 
    -webkit-animation-name: swing; 
	-moz-animation-name: swing; 
    animation-name: swing; 
}

@-webkit-keyframes pulse { 
    0% { -webkit-transform: scale(1); } 
    50% { -webkit-transform: scale(1.05); } 
    100% { -webkit-transform: scale(1); } 
} 
@-moz-keyframes pulse { 
    0% { -moz-transform: scale(1); } 
    50% { -moz-transform: scale(1.05); } 
    100% { -moz-transform: scale(1); } 
}
@keyframes pulse { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.05); } 
    100% { transform: scale(1); } 
} 
.pulse { 
    -webkit-animation-name: pulse; 
	-moz-animation-name: pulse;
    animation-name: pulse; 
}

@-webkit-keyframes rollIn { 
    0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-150deg); } 
    100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } 
}
@-moz-keyframes rollIn { 
    0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-150deg); } 
    100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } 
} 
@keyframes rollIn { 
    0% { opacity: 0; transform: translateX(-100%) rotate(-150deg); } 
    100% { opacity: 1; transform: translateX(0px) rotate(0deg); } 
} 
.rollIn { 
    -webkit-animation-name: rollIn; 
	-moz-animation-name: rollIn; 
    animation-name: rollIn; 
}