/* VC Custom BOC Animations */

/* For larger screens */
@media only screen and (min-width: 769px) {

	.boc_animate_when_almost_visible {
		opacity: 0;
	}
	/* Used for gradually showing items like .info_item */
	.boc_anim_hidden {
		opacity: 0;
	}

	/* Global animation. delay: 0.25s */
	.boc_start_animation, .wpb_start_animation {
		opacity:1;
		-webkit-transition:  transform 0.7s cubic-bezier(.26,.87,.44,1) 0.25s, opacity 0.6s ease 0.25s;
		-moz-transition: transform 0.7s cubic-bezier(.26,.87,.44,1) 0.25s, opacity 0.6s ease 0.25s;
		-o-transition: transform 0.7s cubic-bezier(.26,.87,.44,1) 0.25s, opacity 0.6s ease 0.25s;
		-ms-transition: transform 0.7s cubic-bezier(.26,.87,.44,1) 0.25s, opacity 0.6s ease 0.25s;
		transition: transform 0.7s cubic-bezier(.26,.87,.44,1) 0.25s, opacity 0.6s ease 0.25s;
	}

	/* Especially for buttons */
	.boc_start_animation.button {
		-webkit-transition: all 0.15s linear, transform 0.9s cubic-bezier(.26,.87,.44,1) 0.25s, opacity 0.6s ease 0.25s;
		-moz-transition: all 0.15s linear, transform 0.9s cubic-bezier(.26,.87,.44,1) 0.25s, opacity 0.6s ease 0.25s;
		-ms-transition: all 0.15s linear, transform 0.9s cubic-bezier(.26,.87,.44,1) 0.25s, opacity 0.6s ease 0.25s;
		-o-transition: all 0.15s linear, transform 0.9s cubic-bezier(.26,.87,.44,1) 0.25s, opacity 0.6s ease 0.25s;
		transition: all 0.15s linear, transform 0.9s cubic-bezier(.26,.87,.44,1) 0.25s, opacity 0.6s ease 0.25s;
	}

	/*  Bounce back */
	.boc_start_animation.back {
		-webkit-transition:  transform 0.7s cubic-bezier(.25,1.59,.62,1.04), opacity 0.7s ease;
		-moz-transition: transform 0.7s cubic-bezier(.25,1.59,.62,1.04), opacity 0.7s ease;
		-o-transition: transform 0.7s cubic-bezier(.25,1.59,.62,1.04), opacity 0.7s ease;
		-ms-transition: transform 0.7s cubic-bezier(.25,1.59,.62,1.04), opacity 0.7s ease;
		transition: transform 0.7s cubic-bezier(.25,1.59,.62,1.04), opacity 0.7s ease;
	}

	.boc_start_animation.boc_top-to-bottom, .wpb_start_animation.boc_top-to-bottom {
		transform: translateY(0px);
	}
	.boc_top-to-bottom {
		transform: translateY(-40px);
	}

	.boc_start_animation.boc_bottom-to-top, .wpb_start_animation.boc_bottom-to-top {
		transform: translateY(0px);
	}
	.boc_bottom-to-top {
		transform: translateY(40px);
	}

	.boc_start_animation.boc_left-to-right, .wpb_start_animation.boc_left-to-right {
		transform: translateY(0px);
	}
	.boc_left-to-right {
		transform: translateX(-40px);
	}

	.boc_start_animation.boc_right-to-left, .wpb_start_animation.boc_right-to-left {
		transform: translateY(0px);
	}
	.boc_right-to-left {
		transform: translateX(40px);
	}

	/* Preloader */
	@-webkit-keyframes spin{
		100%{-webkit-transform:rotate(360deg)}
	}
	@-moz-keyframes spin{
		100%{-moz-transform:rotate(360deg)}
	}
	@keyframes spin{
		100%{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}
	}	
	

	/* These are for Owl Carousel from Animation.css lib */

	@-webkit-keyframes fadeIn {
	  0% {opacity: 0;}
	  100% {opacity: 1;}
	}
	@keyframes fadeIn {
	  0% {opacity: 0;}
	  100% {opacity: 1;}
	}
	.fadeIn {
	  -webkit-animation-name: fadeIn;
			  animation-name: fadeIn;
	}

	@-webkit-keyframes fadeOutDown {
	  0% {
		opacity: 1;
	  }
	  100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
				transform: translate3d(0, 100%, 0);
	  }
	}
	@keyframes fadeOutDown {
	  0% {
		opacity: 1;
	  }
	  100% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
				transform: translate3d(0, 100%, 0);
	  }
	}
	.fadeOutDown {
	  -webkit-animation-name: fadeOutDown;
			  animation-name: fadeOutDown;
	}

	@-webkit-keyframes fadeInUp {
	  0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
				transform: translate3d(0, 100%, 0);
	  }
	  100% {
		opacity: 1;
		-webkit-transform: none;
				transform: none;
	  }
	}
	@keyframes fadeInUp {
	  0% {
		opacity: 0;
		-webkit-transform: translate3d(0, 100%, 0);
				transform: translate3d(0, 100%, 0);
	  }
	  100% {
		opacity: 1;
		-webkit-transform: none;
				transform: none;
	  }
	}
	.fadeInUp {
	  -webkit-animation-name: fadeInUp;
			  animation-name: fadeInUp;
	}


	@-webkit-keyframes flipInX {
	  0% {
		-webkit-transform: perspective(6000px) rotate3d(1, 0, 0, 90deg);
				transform: perspective(6000px) rotate3d(1, 0, 0, 90deg);
		-webkit-transition-timing-function: ease-in;
				transition-timing-function: ease-in;
		opacity: 0;
	  }
	  40% {
		-webkit-transform: perspective(6000px) rotate3d(1, 0, 0, -20deg);
				transform: perspective(6000px) rotate3d(1, 0, 0, -20deg);
		-webkit-transition-timing-function: ease-in;
				transition-timing-function: ease-in;
	  }
	  60% {
		-webkit-transform: perspective(6000px) rotate3d(1, 0, 0, 10deg);
				transform: perspective(6000px) rotate3d(1, 0, 0, 10deg);
		opacity: 1;
	  }
	  80% {
		-webkit-transform: perspective(6000px) rotate3d(1, 0, 0, -5deg);
				transform: perspective(6000px) rotate3d(1, 0, 0, -5deg);
	  }
	  100% {
		-webkit-transform: perspective(6000px);
				transform: perspective(6000px);
	  }
	}
	@keyframes flipInX {
	  0% {
		-webkit-transform: perspective(6000px) rotate3d(1, 0, 0, 90deg);
				transform: perspective(6000px) rotate3d(1, 0, 0, 90deg);
		-webkit-transition-timing-function: ease-in;
				transition-timing-function: ease-in;
		opacity: 0;
	  }
	  40% {
		-webkit-transform: perspective(6000px) rotate3d(1, 0, 0, -20deg);
				transform: perspective(6000px) rotate3d(1, 0, 0, -20deg);
		-webkit-transition-timing-function: ease-in;
				transition-timing-function: ease-in;
	  }
	  60% {
		-webkit-transform: perspective(6000px) rotate3d(1, 0, 0, 10deg);
				transform: perspective(6000px) rotate3d(1, 0, 0, 10deg);
		opacity: 1;
	  }
	  80% {
		-webkit-transform: perspective(6000px) rotate3d(1, 0, 0, -5deg);
				transform: perspective(6000px) rotate3d(1, 0, 0, -5deg);
	  }
	  100% {
		-webkit-transform: perspective(6000px);
				transform: perspective(6000px);
	  }
	}
	.flipInX {
	  -webkit-backface-visibility: visible !important;
			  backface-visibility: visible !important;
	  -webkit-animation-name: flipInX;
			  animation-name: flipInX;
	}



	/* Btn arrow bounce */
	@-webkit-keyframes sideBounce {
		0, 100% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
			-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
			animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		}
		50% {
			-webkit-transform: translateX(6px);
			transform: translateX(6px);
			-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.2);
			animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.2);
		}
	}
	@keyframes sideBounce {
		0, 100% {
			-webkit-transform: translateX(0);
			transform: translateX(0);
			-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
			animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		}
		50% {
			-webkit-transform: translateX(6px);
			transform: translateX(6px);
			-webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.2);
			animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.2);
		}
	}

	.sideBounce{
	-webkit-animation: sideBounce .85s linear infinite;
			animation: sideBounce .85s linear infinite;
	}
	/* For button Icons */
	.side_bounce_icon i.icon{
		      display: inline-block;
	-webkit-animation: sideBounce .85s linear infinite;
			animation: sideBounce .85s linear infinite;
	}






	/* Typed.js */
	.typed-cursor{
		opacity: 1;
		-webkit-animation: blink 0.7s infinite;
		-moz-animation: blink 0.7s infinite;
		animation: blink 0.7s infinite;
	}
	@keyframes blink{
		0% { opacity:1; }
		50% { opacity:0; }
		100% { opacity:1; }
	}
	@-webkit-keyframes blink{
		0% { opacity:1; }
		50% { opacity:0; }
		100% { opacity:1; }
	}
	@-moz-keyframes blink{
		0% { opacity:1; }
		50% { opacity:0; }
		100% { opacity:1; }
	}











	/* Custom Animation for Side Icon boxes */
	.side_icon_box.boc_animate_when_almost_visible.boc_start_animation > * {
		-webkit-transition: all 600ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms;
		-moz-transition: all 600ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms;
		-o-transition: all 600ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms;
		-ms-transition: all 600ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms;
		transition: all 600ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms;
	}

	.side_icon_box.boc_animate_when_almost_visible .icon_feat {
		opacity:0;
		transform: translateX(-40px);
	}
	.side_icon_box.boc_animate_when_almost_visible.boc_start_animation .icon_feat {
		opacity:1;
		transform: translateX(0px);
	}

	.side_icon_box.boc_animate_when_almost_visible h3 {
		opacity:0;
		transform: translateX(40px);
	}
	.side_icon_box.boc_animate_when_almost_visible.boc_start_animation h3 {
		opacity:1;
		transform: translateX(0px);
	}

	.side_icon_box.boc_animate_when_almost_visible .side_icon_box_content {
		opacity:0;
		transform: translateX(40px);
	}
	.side_icon_box.boc_animate_when_almost_visible.boc_start_animation .side_icon_box_content {
		opacity:1;	
		transform: translateX(0px);
	}
	/* Custom Animation for Top Icon boxes : END */






	/* Custom Animation for Top Icon boxes */
	.top_icon_box.boc_animate_when_almost_visible > *:not(a), 
	.top_icon_box.boc_animate_when_almost_visible > a > div {
		opacity:0;
	}
	.top_icon_box.boc_animate_when_almost_visible.boc_start_animation > *, 
	.top_icon_box.boc_animate_when_almost_visible.boc_start_animation > a > div  {
		opacity:1;

		-webkit-transition: all 1200ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms;
		-moz-transition: all 1200ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms;
		-o-transition: all 1200ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms;
		-ms-transition: all 1200ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms;
		transition: all 1200ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms;
	}

	.top_icon_box.boc_animate_when_almost_visible .icon_holder {
		display: block;
		-moz-transform: rotateY( 180deg );
		-webkit-transform: rotateY( 180deg );
		transform: rotateY( 180deg );
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
	}
	.top_icon_box.boc_animate_when_almost_visible.boc_start_animation .icon_holder {
		-moz-transform: rotateY( 360deg );
		-webkit-transform: rotateY( 360deg );
		transform: rotateY( 360deg );	
	}

	.top_icon_box.boc_animate_when_almost_visible h3 {
		opacity:0;
		top:-40px;
	}
	.top_icon_box.boc_animate_when_almost_visible.boc_start_animation h3 {
		opacity:1;
		top:0px;
		-webkit-transition: all 600ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms;
		-moz-transition: all 600ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms;
		-o-transition: all 600ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms;
		-ms-transition: all 600ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms;
		transition: all 600ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms;
	}

	.top_icon_box.boc_animate_when_almost_visible p {
		opacity:0;
		top:40px;
	}
	.top_icon_box.boc_animate_when_almost_visible.boc_start_animation p {
		opacity:1;
		top:0px;

		-webkit-transition: all 600ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms;
		-moz-transition: all 600ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms;
		-o-transition: all 600ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms;
		-ms-transition: all 600ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms;
		transition: all 600ms cubic-bezier(0.230, 1.000, 0.320, 1.000) 0ms;
	}
	/* Custom Animation for Top Icon boxes : END */
}

/* For smaller screens */
@media only screen and (max-width: 768px) {
	
	/* VC default animations (vc_single_image, vc_column_text) */
	.wpb_animate_when_almost_visible {
	  opacity: 1;
	  filter: alpha(opacity=100);
	}
}