html {
    width: 100%;
    height: 100%;
}
body {
    width: 100%;
    height: 100%;
}

section {
	/*padding: 2em 0;*/
}

img {
	max-width: 100%;
}


/*******************animations******************/
/**********animation fadein start**********/

.animate-section-fadein {
	-webkit-animation: fadein 1s;
	   -moz-animation: fadein 1s;
	    -ms-animation: fadein 1s;
	     -o-animation: fadein 1s;
	        animation: fadein 1s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

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

@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/**********animation fadein end**********/

/**********animation slidedown start**********/
.animate-section-down{
	animation-name: slidedown;
	-webkit-animation-name: slidedown;
	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;
	animation-timing-function: ease;
	-webkit-animation-timing-function: ease;
	visibility: visible !important;						
}

@keyframes slidedown {
	0% {
		transform: translateY(-100%);
	}
	40%{
		transform: translateY(10%);
	}
	65%{
		transform: translateY(-5%);
	}
	80%{
		transform: translateY(5%);
	}
	95%{
		transform: translateY(-2%);
	}			
	100% {
		transform: translateY(0%);
	}		
}

@-webkit-keyframes slidedown {
	0% {
		-webkit-transform: translateY(-100%);
	}
	40%{
		-webkit-transform: translateY(10%);
	}
	65%{
		-webkit-transform: translateY(-5%);
	}
	80%{
		-webkit-transform: translateY(5%);
	}
	95%{
		-webkit-transform: translateY(-2%);
	}			
	100% {
		-webkit-transform: translateY(0%);
	}	
}

/**********animation slidedown end**********/

/**********animation slideup start**********/
.animate-section-up{
	animation-name: slideup;
	-webkit-animation-name: slideup;
	animation-duration: 2s;	
	-webkit-animation-duration: 2s;
	animation-timing-function: ease;
	-webkit-animation-timing-function: ease;
	visibility: visible !important;						
}

@keyframes slideup {
	0% {
		transform: translateY(100%);
	}
	100%{
		transform: translateY(0%);
	}
}

@-webkit-keyframes slideup {
	0% {
		-webkit-transform: translateY(100%);
	}		
	100% {
		-webkit-transform: translateY(0%);
	}	
}

/**********animation slideup end**********/


/**********animation slideright start**********/
.animate-section-right{
	animation-name: slideright;
	-webkit-animation-name: slideright;
	animation-duration: 2s;	
	-webkit-animation-duration: 2s;
	animation-timing-function: ease;
	-webkit-animation-timing-function: ease;
	visibility: visible !important;						
}

@keyframes slideright {
	0% {
		transform: translateX(-100%);
	}
	100%{
		transform: translateX(0%);
	}
}

@-webkit-keyframes slideright {
	0% {
		-webkit-transform: translateX(-100%);
	}		
	100% {
		-webkit-transform: translateX(0%);
	}	
}

/**********animation slideright end**********/


/**********animation slideright start**********/
.animate-section-left{
	animation-name: slideleft;
	-webkit-animation-name: slideleft;
	animation-duration: 3s;	
	-webkit-animation-duration: 3s;
	animation-timing-function: ease;
	-webkit-animation-timing-function: ease;
	visibility: visible !important;						
}

@keyframes slideleft {
	0% {
		transform: translateX(100%);
	}
	100%{
		transform: translateX(0%);
	}
}

@-webkit-keyframes slideleft {
	0% {
		-webkit-transform: translateX(100%);
	}		
	100% {
		-webkit-transform: translateX(0%);
	}	
}

/**********animation slideright end**********/

/*********************************************/