.bea-wid-con {
	.bea-flip-box {
		background-color: transparent;
		width: 100%;
		height: 350px;
		-webkit-perspective: 1000px;
		perspective: 1000px;
		&:hover {
			.bea-flip-box-inner {
				-webkit-transform: rotateY(180deg);
				transform: rotateY(180deg);
			}
		}
		&.flip-animate {
			&.right-to-left {
				&:hover {
					.bea-flip-box-inner {
						-webkit-transform: rotateY(-180deg);
						transform: rotateY(-180deg);
					}
				}
			}
			&.bottom-to-top {
				&:hover {
					.bea-flip-box-inner {
						-webkit-transform: rotateX(180deg);
						transform: rotateX(180deg);
					}
				}
				.bea-flip-box-back {
					-webkit-transform: rotateX(180deg);
					transform: rotateX(180deg);
				}
			}
			&.top-to-bottom {
				&:hover {
					.bea-flip-box-inner {
						-webkit-transform: rotateX(-180deg);
						transform: rotateX(-180deg);
					}
				}
				.bea-flip-box-back {
					-webkit-transform: rotateX(180deg);
					transform: rotateX(180deg);
				}
			}
		}
		&.slide-animate {
			.bea-flip-box-inner {
				position: relative;
				overflow: hidden;
				-webkit-transform: none;
				transform: none;
			}
			.bea-flip-box-back {
				position: absolute;
				top: 0;
				width: 100%;
				height: 100%;
				-webkit-transform: translateX(100%);
				transform: translateX(100%);
				-webkit-transition: .5s ease-in-out;
				transition: .5s ease-in-out;
				visibility: hidden;
				opacity: 0;
				z-index: 2;
			}
			&:hover {
				.bea-flip-box-inner {
					.bea-flip-box-back {
						visibility: visible;
						opacity: 1;
						-webkit-transform: translateX(0);
						transform: translateX(0);
					}
				}
			}
			&.left-to-right {
				.bea-flip-box-back {
					-webkit-transform: translateX(-100%);
					transform: translateX(-100%);
				}
			}
			&.right-to-left {
				.bea-flip-box-inner {
					-webkit-transform: none;
					transform: none;
				}
				.bea-flip-box-back {
					-webkit-transform: translateX(100%);
					transform: translateX(100%);
				}
			}
			&.top-to-bottom {
				.bea-flip-box-inner {
					-webkit-transform: none;
					transform: none;
				}
				.bea-flip-box-back {
					-webkit-transform: translateY(-100%);
					transform: translateY(-100%);
					.wrap-back {
						-webkit-transform: none;
						transform: none;
					}
				}
			}
			&.bottom-to-top {
				.bea-flip-box-inner {
					-webkit-transform: none;
					transform: none;
				}
				.bea-flip-box-back {
					-webkit-transform: translateY(100%);
					transform: translateY(100%);
					.wrap-back {
						-webkit-transform: none;
						transform: none;
					}
				}
			}
		}
		&.zoom-animate {
			&.zoom-up {
				.bea-flip-box-inner {
					-webkit-transform: none;
					transform: none;
				}
				.bea-flip-box-back {
					-webkit-transform: scale(0);
					transform: scale(0);
					-webkit-transition: .9s ease-in-out;
					transition: .9s ease-in-out;
					z-index: 2;
				}
				&:hover {
					.bea-flip-box-back {
						-webkit-transform: scale(100%);
						transform: scale(100%);
						-webkit-transition: .8s ease-in-out;
						transition: .8s ease-in-out;
					}
				}
			}
			&.zoom-out {
				.bea-flip-box-inner {
					-webkit-transform: none!important;
					transform: none!important;
				}
				.bea-flip-box-front {
					-webkit-transition: 1.4s;
					transition: 1.4s;
				}
				.bea-flip-box-back {
					-webkit-transition: .9s;
					transition: .9s;
					-webkit-transform: scale(0);
					transform: scale(0);
					z-index: 2;
				}
				&:hover {
					.bea-flip-box-front {
						-webkit-transform: scale(.3);
						transform: scale(.3);
					}
					.bea-flip-box-back {
						-webkit-transform: scale(1);
						transform: scale(1);
					}
				}
			}
		}
		&.flip-3d-animate {
			.bea-flip-box-inner {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			.bea-flip-box-inner-wrap {
				-webkit-transform: translateZ(70px) scale(.93);
				transform: translateZ(70px) scale(.93);
				width: auto;
			}
			.bea-flip-box-front {
				-webkit-transition: -webkit-transform .75s ease-in-out;
				transition: -webkit-transform .75s ease-in-out;
				transition: transform .75s ease-in-out;
				transition: transform .75s ease-in-out,-webkit-transform .75s ease-in-out;
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			.bea-flip-box-back {
				-webkit-transition: -webkit-transform .75s ease-in-out;
				transition: -webkit-transform .75s ease-in-out;
				transition: transform .75s ease-in-out;
				transition: transform .75s ease-in-out,-webkit-transform .75s ease-in-out;
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
			}
			&.right-to-left {
				&:hover {
					.bea-flip-box-inner {
						-webkit-transform: rotateY(-180deg);
						transform: rotateY(-180deg);
					}
				}
			}
			&.bottom-to-top {
				.bea-flip-box-back {
					-webkit-transform: rotateX(-180deg);
					transform: rotateX(-180deg);
				}
				&:hover {
					.bea-flip-box-inner {
						-webkit-transform: rotateX(-180deg);
						transform: rotateX(-180deg);
					}
				}
			}
			&.top-to-bottom {
				.bea-flip-box-back {
					-webkit-transform: rotateX(180deg);
					transform: rotateX(180deg);
				}
				&:hover {
					.bea-flip-box-inner {
						-webkit-transform: rotateX(180deg);
						transform: rotateX(180deg);
					}
				}
			}
		}
		&.fade-animate {
			.bea-flip-box {
				-webkit-transform: none;
				transform: none;
			}
			.bea-flip-box-inner {
				-webkit-transform: none;
				transform: none;
				&:hover {
					.bea-flip-box-front {
						opacity: 0;
					}
					.bea-flip-box-back {
						opacity: 1;
					}
				}
			}
			.bea-flip-box-front {
				-webkit-transition: .9s ease-in-out;
				transition: .9s ease-in-out;
			}
			.bea-flip-box-back {
				opacity: 0;
				-webkit-transform: none;
				transform: none;
				-webkit-transition: .9s ease-in-out;
				transition: .9s ease-in-out;
			}
		}
		&.push-animate {
			.bea-flip-box {
				-webkit-transform: none;
				transform: none;
			}
			.bea-flip-box-inner {
				-webkit-transform: none;
				transform: none;
				overflow: hidden;
				&:hover {
					.bea-flip-box-front {
						-webkit-transform: translateX(100%);
						transform: translateX(100%);
						-webkit-transition: .6s ease-in-out;
						transition: .6s ease-in-out;
					}
					.bea-flip-box-back {
						-webkit-transform: translateX(0);
						transform: translateX(0);
						visibility: visible;
						-webkit-backface-visibility: visible;
						backface-visibility: visible;
						-webkit-transition: .6s ease-in-out;
						transition: .6s ease-in-out;
					}
				}
			}
			.bea-flip-box-front {
				-webkit-transition: .6s ease-in-out;
				transition: .6s ease-in-out;
			}
			.bea-flip-box-back {
				-webkit-transform: translateX(-100%);
				transform: translateX(-100%);
				-webkit-transition: .6s ease-in-out;
				transition: .6s ease-in-out;
			}
			&.right-to-left {
				.bea-flip-box-inner {
					&:hover {
						.bea-flip-box-front {
							-webkit-transform: translateX(-100%);
							transform: translateX(-100%);
							-webkit-transition: .6s ease-in-out;
							transition: .6s ease-in-out;
						}
						.bea-flip-box-back {
							-webkit-transform: translateX(0);
							transform: translateX(0);
							visibility: visible;
							-webkit-backface-visibility: visible;
							backface-visibility: visible;
							-webkit-transition: .6s ease-in-out;
							transition: .6s ease-in-out;
						}
					}
				}
				.bea-flip-box-back {
					-webkit-transform: translateX(100%);
					transform: translateX(100%);
					-webkit-transition: .6s ease-in-out;
					transition: .6s ease-in-out;
				}
			}
			&.bottom-to-top {
				.bea-flip-box-inner {
					&:hover {
						.bea-flip-box-front {
							-webkit-transform: translateY(-100%);
							transform: translateY(-100%);
							-webkit-transition: .6s ease-in-out;
							transition: .6s ease-in-out;
						}
						.bea-flip-box-back {
							-webkit-transform: translateY(0);
							transform: translateY(0);
							visibility: visible;
							-webkit-backface-visibility: visible;
							backface-visibility: visible;
							-webkit-transition: .6s ease-in-out;
							transition: .6s ease-in-out;
						}
					}
				}
				.bea-flip-box-back {
					-webkit-transform: translateY(100%);
					transform: translateY(100%);
					-webkit-transition: .6s ease-in-out;
					transition: .6s ease-in-out;
				}
			}
			&.top-to-bottom {
				.bea-flip-box-inner {
					&:hover {
						.bea-flip-box-front {
							-webkit-transform: translateY(100%);
							transform: translateY(100%);
							-webkit-transition: .6s ease-in-out;
							transition: .6s ease-in-out;
						}
						.bea-flip-box-back {
							-webkit-transform: translateY(0);
							transform: translateY(0);
							visibility: visible;
							-webkit-backface-visibility: visible;
							backface-visibility: visible;
							-webkit-transition: .6s ease-in-out;
							transition: .6s ease-in-out;
						}
					}
				}
				.bea-flip-box-back {
					-webkit-transform: translateY(-100%);
					transform: translateY(-100%);
					-webkit-transition: .6s ease-in-out;
					transition: .6s ease-in-out;
				}
			}
		}
		&.transform-flip-animate {
			.bea-flip-box {
				-webkit-transform: none;
				transform: none;
				overflow: hidden;
			}
			.bea-flip-box-inner {
				-webkit-transform: none;
				transform: none;
				&:hover {
					.bea-flip-box-back {
						-webkit-transform: rotateY(0);
						transform: rotateY(0);
						z-index: 2;
					}
					.bea-flip-box-front {
						-webkit-transform: rotateY(180deg);
						transform: rotateY(180deg);
						-webkit-transform-origin: 0 0;
						transform-origin: 0 0;
					}
				}
			}
			.bea-flip-box-front {
				transition: transform .6s cubic-bezier(.2,.85,.4,1.275),-webkit-transform .6s cubic-bezier(.2,.85,.4,1.275);
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
				-webkit-transition-duration: 1.6s;
				transition-duration: 1.6s;
			}
			.bea-flip-box-back {
				-webkit-transform: rotateY(-180deg);
				transform: rotateY(-180deg);
				position: absolute;
				transition: transform .6s cubic-bezier(.2,.85,.4,1.275),-webkit-transform .6s cubic-bezier(.2,.85,.4,1.275);
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
				-webkit-transition-duration: 1.6s;
				transition-duration: 1.6s;
			}
			&.right-to-left {
				.bea-flip-box-inner {
					&:hover {
						.bea-flip-box-back {
							-webkit-transform: rotateY(0);
							transform: rotateY(0);
							z-index: 2;
							-webkit-transform-origin: 100% 100%;
							transform-origin: 100% 100%;
						}
						.bea-flip-box-front {
							-webkit-transform: rotateY(180deg);
							transform: rotateY(180deg);
							-webkit-transform-origin: 100% 100%;
							transform-origin: 100% 100%;
						}
					}
				}
				.bea-flip-box-front {
					transition: transform .6s cubic-bezier(.2,.85,.4,1.275),-webkit-transform .6s cubic-bezier(.2,.85,.4,1.275);
					-webkit-transition-duration: 1.6s;
					transition-duration: 1.6s;
					-webkit-transform-origin: 100% 100%;
					transform-origin: 100% 100%;
				}
				.bea-flip-box-back {
					-webkit-transform: rotateY(-180deg);
					transform: rotateY(-180deg);
					position: absolute;
					transition: transform .6s cubic-bezier(.2,.85,.4,1.275),-webkit-transform .6s cubic-bezier(.2,.85,.4,1.275);
					-webkit-transform-origin: 100% 100%;
					transform-origin: 100% 100%;
					-webkit-transition-duration: 1.6s;
					transition-duration: 1.6s;
				}
			}
			&.bottom-to-top {
				.bea-flip-box-inner {
					&:hover {
						.bea-flip-box-back {
							-webkit-transform: rotateX(0);
							transform: rotateX(0);
							z-index: 2;
						}
						.bea-flip-box-front {
							-webkit-transform: rotateX(180deg);
							transform: rotateX(180deg);
							-webkit-transform-origin: 100% 100%;
							transform-origin: 100% 100%;
						}
					}
				}
				.bea-flip-box-front {
					transition: transform .6s cubic-bezier(.2,.85,.4,1.275),-webkit-transform .6s cubic-bezier(.2,.85,.4,1.275);
					-webkit-transform-origin: 100% 100%;
					transform-origin: 100% 100%;
					-webkit-transition-duration: 1.6s;
					transition-duration: 1.6s;
				}
				.bea-flip-box-back {
					-webkit-transform: rotateX(-180deg);
					transform: rotateX(-180deg);
					position: absolute;
					transition: transform .6s cubic-bezier(.2,.85,.4,1.275),-webkit-transform .6s cubic-bezier(.2,.85,.4,1.275);
					-webkit-transform-origin: 100% 100%;
					transform-origin: 100% 100%;
					-webkit-transition-duration: 1.6s;
					transition-duration: 1.6s;
				}
			}
			&.top-to-bottom {
				.bea-flip-box-inner {
					&:hover {
						.bea-flip-box-back {
							-webkit-transform: rotateX(0);
							transform: rotateX(0);
							z-index: 2;
						}
						.bea-flip-box-front {
							-webkit-transform: rotateX(180deg);
							transform: rotateX(180deg);
							-webkit-transform-origin: 0 0;
							transform-origin: 0 0;
						}
					}
				}
				.bea-flip-box-front {
					transition: transform .6s cubic-bezier(.2,.85,.4,1.275),-webkit-transform .6s cubic-bezier(.2,.85,.4,1.275);
					-webkit-transform-origin: 0 0;
					transform-origin: 0 0;
					-webkit-transition-duration: 1.6s;
					transition-duration: 1.6s;
				}
				.bea-flip-box-back {
					-webkit-transform: rotateX(-180deg);
					transform: rotateX(-180deg);
					position: absolute;
					transition: transform .6s cubic-bezier(.2,.85,.4,1.275),-webkit-transform .6s cubic-bezier(.2,.85,.4,1.275);
					-webkit-transform-origin: 0 0;
					transform-origin: 0 0;
					-webkit-transition-duration: 1.6s;
					transition-duration: 1.6s;
				}
			}
		}
		&.angle-flip-normal {
			.wrap-back {
				transform: rotate(90deg);
			}
			&:hover {
				.bea-flip-box-inner {
					transform: rotate3d(1, 1, 0, 180deg) rotate(0);
				}
			}
		}
		&.angle-flip-reverse {
			.wrap-back {
				transform: rotate(90deg);
			}
			&:hover {
				.bea-flip-box-inner {
					transform: rotate3d(1, 1, 0, -180deg) rotate(0);
				}
			}
		}
		&.angle-flip-rotate {
			&:hover {
				.bea-flip-box-inner {
					transform: rotate3d(1, 1, 0, 180deg) rotate(-90deg);
				}
			}
		}
		&.angle-flip-rotate-reverse {
			&:hover {
				.bea-flip-box-inner {
					transform: rotate3d(1, 1, 0, -180deg) rotate(-90deg);
				}
			}
		}
	}
	.bea-flip-box-inner {
		position: relative;
		width: 100%;
		height: 100%;
		text-align: center;
		-webkit-transition: -webkit-transform .8s;
		transition: -webkit-transform .8s;
		transition: transform .8s;
		transition: transform .8s,-webkit-transform .8s;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
	}
	.bea-flip-box-inner-wrap {
		width: 100%;
		z-index: 2;
	}
	.bea-flip-box-front {
		background-color: #596ae7;
		color: #fff;
		z-index: 1;
		// color: #fff;
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 100%;
		}
       
		.front-description{
			font-size: 14px;
		}
		.front-sub-title{
			text-transform: capitalize;
			font-size: 20px;
		}
	}
	.bea-flip-box-back {
		background-color: #596ae7;
		color: #fff;
		-webkit-transform: rotateY(180deg);
		transform: rotateY(180deg);
		z-index: 1;
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 100%;
		}
		.back-description{
			font-size: 14px;

		}
		.back-title{
			font-size:30px;
		}
		.back-sub-title{
			text-transform: capitalize;
			font-size: 20px;
		}
	}
    .bea-flip-box-front,.bea-flip-box-back{
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .bea-flip-box-wrapper {
        overflow: hidden;
    }
	.front-icon,.back-icon{
		display: inline-block;
	}

	.bea-social-links{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		transition: all .3s ease;	
		a{
			line-height: 1;
		}
	}


	.bea-btn{
		display: inline-flex;
		flex-direction: row;
		align-content: center;
		flex-wrap: wrap;
		justify-content: center;
		background-color: #f6f9fc;
		line-height: 1;
		padding: 15px 35px;
		&.txt-trans {
			position: relative;
			.txt {
				position: relative;
				display: inline-block;
				transition: all 0.3s ease;
				&::after {
					content: attr(data-text);
					display: inline-block;
					position: absolute;
					top: 50%;
					left: 50%;
					opacity: 0;
					transform: translate(-50%, 100%);
					transition: opacity .2s, transform .2s;
					transition-timing-function: cubic-bezier(.455,.03,.515,.955);
					white-space: nowrap;
				}
				span {
					display: inline-block;
					transform: translateY(0%);
					opacity:1;
					transition: opacity .2s, transform .2s;
					transition-timing-function: cubic-bezier(.455,.03,.515,.955);
				}
			}
			&:hover {
				.txt {
					span {
						transform: translateY(-150%);
						opacity: 0;
					}
					&::after {
						transform: translate(-50%, -50%);
						opacity: 1;
					}
				}
			}
		}
	}  



}