.flex-container {
	
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: row wrap;
	 }

.flex-container	.flex-item {
		margin: 25px;
		border-radius: 12px;
		padding: 4.5em 5em;
		position: relative;
		font-weight: 600;
		box-shadow:10px 10px 50px rgba(0,0,0, 0.8);
		border-top: 1px solid rgba(255, 255 ,255, 0.5);
		border-left: 1px solid rgba(255, 255 ,255, 0.3);
		margin: auto;
		
		
		}
	
.flex-container	.flex-item  a {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			text-decoration: none;
			text-align: center;
			color: #fff;
			font-size: 24px;
			line-height: 1.5;
			transition: 600ms ease;}

.flex-container	.flex-item	span {
				transform: translateZ(50px) scale(0.7);
			}
		
	
}

.tilt {
	border-radius: 5px;
	box-shadow: 0 0px 0px 0px rgba(0, 0, 0, 0.4);
	transform-style: preserve-3d;

	transform: perspective(500px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
	}
	
.tilt:hover {
		box-shadow: 0 40px 70px -15px rgba(0, 0, 0, 0.5);
	}


.bg-one {
	background:url(../images/patterns/A.webp);
	background-size: cover;
	background-position: center;
	width: 180px;
	justify-content: center;
	align-items: center;
	
	}
.bg-one:hover {
	background:url(../images/patterns/A-gif.webp);
	background-size: cover;
	background-position: center;
	}

.flex-container .bg-one span  {
	position: absolute;
	bottom: 10px;
	}


.flex-container .bg-one span p { 
	margin:0 auto ; 
	color:#000;
	font-size: 46px;
	line-height: 0.9;
	font-family: "Courier", sans-serif;
	font-weight: 800;
	letter-spacing: -2px;
	}

.flex-container .bg-one span .te1  { font-size: 42px; }
.flex-container .bg-one span .te1  {  }

.bg-two {
	background:url(../images/patterns/B.webp);
	background-size: cover;
	background-position: center;
	width: 180px;
	justify-content: center;
	align-items: center;
	}
.bg-two:hover {
	background:url(../images/patterns/B-gif.webp);
	background-size: cover;
	background-position: center;
	}

.flex-container .bg-two span {
	position: absolute;
	bottom: 10px;
	
	}
.flex-container .bg-two span p  { 
	margin:0 auto ; 
	color:#000 ;
	font-size: 42px;
	font-weight:600;
	line-height: 0.85;
	font-family: "Arial", sans-serif;}
	
.flex-container .bg-two span .te1  { font-size: 39px; }




.bg-three {
	background:url(../images/patterns/C.webp);
	background-size: cover;
	background-position: center;
	width: 180px;
	justify-content: center;
	align-items: center;
	}
.bg-three:hover {
	background:url(../images/patterns/C-gif.webp);
	background-size: cover;
	background-position: center;
	}

.flex-container .bg-three span {
	position: absolute;
	bottom: 40px;
	}

.flex-container .bg-three span p { 
	margin:0 auto ; 
	color:#000;
	font-size: 34px;
	line-height: 1;
	font-family: "Arial", sans-serif;
	font-weight:600
	}


	

.bg-four {
	background:url(../images/patterns/C2.png);
	background-size: cover;
	background-position: center;
	width: 180px;
	justify-content: center;
	align-items: center;
	
	}
.bg-four:hover {
	background:url(../images/patterns/C2.gif);
	background-size: cover;
	background-position: center;
	}

.flex-container .bg-four span {
	position: absolute;
	
	
	}

.flex-container .bg-four span p { 
	margin:0 auto ; 
	color:#000;
	font-size: 34px;
	line-height: 4.5;
	font-family: "Arial", sans-serif;
	font-weight:600
	}

.flex-container .bg-one .white-laser p {color:#fff}
.flex-container .bg-two .white-laser p {color:#fff}
.flex-container .bg-three .white-laser p {color:#fff}