/* ------ jQuery assisted Animation ------- */

.animated-area
{
    -webkit-transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity;
    transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    opacity: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
}
@media only screen and (max-width: 1068px) {
      .animated-area 
      { 
			-webkit-transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    		transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   		 	transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity;
    		transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   			opacity: 1;
    		-webkit-transform: translateX(0%);
    		transform: translateX(0%)
      }
}

@media only screen and (max-width: 735px) {
      .animated-area 
      { 
			-webkit-transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    		transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   		 	transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity;
    		transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   			opacity: 1;
    		-webkit-transform: translateX(0%);
    		transform: translateX(0%)
      }
}



.icon-animated-area
{
    -webkit-transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity;
    transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    opacity: 0;
    -webkit-transform: translateY(200%);
    transform: translateY(200%)
}

@media only screen and (max-width: 1068px) {
      .icon-animated-area 
      { 
			-webkit-transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    		transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   		 	transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity;
    		transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   			opacity: 1;
    		-webkit-transform: translateX(0%);
    		transform: translateX(0%)
      }
}

@media only screen and (max-width: 735px) {
      .icon-animated-area 
      { 
			-webkit-transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    		transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   		 	transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity;
    		transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   			opacity: 1;
    		-webkit-transform: translateX(0%);
    		transform: translateX(0%)
      }
}

.animated-area1
{
    -webkit-transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity;
    transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    opacity: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
}
@media only screen and (max-width: 1068px) {
      .animated-area1 
      { 
			-webkit-transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    		transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   		 	transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity;
    		transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   			opacity: 1;
    		-webkit-transform: translateX(0%);
    		transform: translateX(0%)
      }
}

@media only screen and (max-width: 735px) {
      .animated-area1 
      { 
			-webkit-transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    		transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   		 	transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity;
    		transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   			opacity: 1;
    		-webkit-transform: translateX(0%);
    		transform: translateX(0%)
      }
}



.icon-animated-area1
{
    -webkit-transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity;
    transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    opacity: 0;
    -webkit-transform: translateY(200%);
    transform: translateY(200%)
}

@media only screen and (max-width: 1068px) {
      .icon-animated-area1 
      { 
			-webkit-transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    		transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   		 	transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity;
    		transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   			opacity: 1;
    		-webkit-transform: translateX(0%);
    		transform: translateX(0%)
      }
}

@media only screen and (max-width: 735px) {
      .icon-animated-area1 
      { 
			-webkit-transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    		transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   		 	transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity;
    		transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   			opacity: 1;
    		-webkit-transform: translateX(0%);
    		transform: translateX(0%)
      }
}

.animated-area2
{
    -webkit-transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity;
    transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    opacity: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
}
@media only screen and (max-width: 1068px) {
      .animated-area2 
      { 
			-webkit-transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    		transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   		 	transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity;
    		transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   			opacity: 1;
    		-webkit-transform: translateX(0%);
    		transform: translateX(0%)
      }
}

@media only screen and (max-width: 735px) {
      .animated-area2
      { 
			-webkit-transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    		transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   		 	transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity;
    		transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   			opacity: 1;
    		-webkit-transform: translateX(0%);
    		transform: translateX(0%)
      }
}



.icon-animated-area2
{
    -webkit-transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity;
    transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    opacity: 0;
    -webkit-transform: translateY(200%);
    transform: translateY(200%)
}

@media only screen and (max-width: 1068px) {
      .icon-animated-area2 
      { 
			-webkit-transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    		transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   		 	transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity;
    		transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   			opacity: 1;
    		-webkit-transform: translateX(0%);
    		transform: translateX(0%)
      }
}

@media only screen and (max-width: 735px) {
      .icon-animated-area2 
      { 
			-webkit-transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    		transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   		 	transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity;
    		transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   			opacity: 1;
    		-webkit-transform: translateX(0%);
    		transform: translateX(0%)
      }
}

.animated-area3
{
    -webkit-transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity;
    transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    opacity: 0;
    -webkit-transform: translateX(100%);
    transform: translateX(100%)
}
@media only screen and (max-width: 1068px) {
      .animated-area3 
      { 
			-webkit-transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    		transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   		 	transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity;
    		transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   			opacity: 1;
    		-webkit-transform: translateX(0%);
    		transform: translateX(0%)
      }
}

@media only screen and (max-width: 735px) {
      .animated-area3 
      { 
			-webkit-transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    		transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   		 	transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity;
    		transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   			opacity: 1;
    		-webkit-transform: translateX(0%);
    		transform: translateX(0%)
      }
}



.icon-animated-area3
{
    -webkit-transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity;
    transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    opacity: 0;
    -webkit-transform: translateY(200%);
    transform: translateY(200%)
}

@media only screen and (max-width: 1068px) {
      .icon-animated-area3 
      { 
			-webkit-transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    		transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   		 	transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity;
    		transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   			opacity: 1;
    		-webkit-transform: translateX(0%);
    		transform: translateX(0%)
      }
}

@media only screen and (max-width: 735px) {
      .icon-animated-area3 
      { 
			-webkit-transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    		transition: 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   		 	transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity;
    		transition: 2.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 0.18s linear opacity, 2.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
   			opacity: 1;
    		-webkit-transform: translateX(0%);
    		transform: translateX(0%)
      }
}





/* ------ Web Kit Useful for Horizontal Animations ------- */

			/* ------ Using the Animation Functions ------------- */

.animated-text-area
{
	opacity: 0;
	-webkit-animation: h-slidein-extra 5s forwards; 
	animation: h-slidein 5s forwards;
	animation-delay: 2s;
}

			/* -------- Animation Function --------------- */

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

    to {
        opacity: 1
    }
}

@keyframes fadein {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

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

    to {
        opacity: 0
    }
}

@keyframes fadeout {
    from {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@-webkit-keyframes v-slidein {
    from {
        -webkit-transform: translateY(35px);
        transform: translateY(35px);
        opacity: 0
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes v-slidein {
    from {
        -webkit-transform: translateY(35px);
        transform: translateY(35px);
        opacity: 0
    }

    to {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }
}

@-webkit-keyframes v-slideout {
    from {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }

    to {
        -webkit-transform: translateY(35px);
        transform: translateY(35px);
        opacity: 0
    }
}

@keyframes v-slideout {
    from {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }

    to {
        -webkit-transform: translateX(35px);
        transform: translateY(35px);
        opacity: 0
    }
}

@-webkit-keyframes h-slidein {
    from {
	    -webkit-transition: 1.8s linear opacity, 1.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	transition: 1.8s linear opacity, 1.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	transition: 1.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 1.8s linear opacity, 1.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	opacity: 0;
    	-webkit-transform: translateX(200%);	/* 280px */
    }

    to {
    	-webkit-transition: 1.8s linear opacity, 1.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	transition: 1.8s linear opacity, 1.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	transition: 1.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 1.8s linear opacity, 1.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	opacity: 1;
    	-webkit-transform: translateX(0%);		/* 15px */
    }
}

@keyframes h-slidein {
    from {
	    transition: 1.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 1.8s linear opacity;
    	opacity: 0;
    	transform: translateX(200%);	/* 280px */
    }

    to {
    	transition: 1.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 1.8s linear opacity;
    	opacity: 1;
    	transform: translateX(0%);		/* 15px */
    }
}

@-webkit-keyframes h-slideout {
    from {
    	-webkit-transition: 1.8s linear opacity, 1.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	transition: 1.8s linear opacity, 1.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	transition: 1.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 1.8s linear opacity, 1.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	opacity: 1;
    	-webkit-transform: translateX(0%);		/* 15px */
    }

    to {
	    -webkit-transition: 1.8s linear opacity, 1.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	transition: 1.8s linear opacity, 1.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	transition: 1.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 1.8s linear opacity, 1.5s cubic-bezier(0.23, 1, 0.32, 1) -webkit-transform;
    	opacity: 0;
    	-webkit-transform: translateX(200%);	/* 280px */
    }
}

@keyframes h-slideout {
    from {
    	transition: 1.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 1.8s linear opacity;
    	opacity: 1;
    	transform: translateX(0%);		/* 15px */
    }

    to {
	    transition: 1.5s cubic-bezier(0.23, 1, 0.32, 1) transform, 1.8s linear opacity;
    	opacity: 0;
    	transform: translateX(200%);	/* 280px */
    }
}

/* ------ End of Web Kit Horizontal Animations ------- */