.process {
			width: 1220px;
			height: auto;
			margin: 2% auto;
		}
		
		.process-box {
			width: 100%;
			height: 100%;
			margin: 4% auto;
			display: flex;
			flex-flow: row wrap;
		}
		
		.process-card {
			width: 33%;
			height: auto;
			overflow: hidden;
			position: relative;
			margin: 4% auto;

		}
		.process-card::before{
			content: '';
			width: 100%;
			height:80px;
			opacity: 1;
			transform: translateX(-50%);
			position: absolute;
			top: 81%;
			left: 50%;
			z-index: 1;
			transition: all 0.4s ease;
			padding: 1%;
			background-color: white;
            font-size: 32px;
		}
		.process-card:hover:before{
			
			width: 100%;
			height:390px;
			position: absolute;
			top: 0%;
			left: 45%;
			z-index: 1;
			transition: all 0.4s ease;
			padding: 1%;
			background-color: rgba(255,0,0,0.4);
		}
		.process-card .process-title{
			color: black;
			width: 95%;
			height: auto;
			opacity: 1;
			transform: translateX(-50%);
			position: absolute;
			top: 85%;
			left: 50%;
			z-index: 2;
			transition: all 0.4s ease;
			padding: 1%;
			text-align: center;
		}
		.process-card:hover .process-title{
            color: black;
			width: 95%;
			height: auto;
			opacity: 0;
			transform: translateX(-50%);
			position: absolute;
			top: 85%;
			left: 50%;
			z-index: 2;
			transition: all 0.4s ease;
			padding: 1%;
			text-align: center;
		}
		.process-card .process-text{
			color: white;
			width: 95%;
			height: auto;
			opacity: 0;
			transform: translateX(-50%);
			position: absolute;
			top: 30%;
			left: 50%;
			z-index:1;
			transition: all 0.4s ease;
			padding: 1%;
		}
		
		.process-card:hover .process-text {
			color: white;
			position: absolute;
			top: 25%;
			left: 50%;
			opacity: 1;
		}
		
		
		.process-text h3 {
			font-size: 36px;
			text-align: center;
		}
		
		.process-text p {
			margin-top: 10%;
			font-size: 20px;
			position: relative;
			top: 10%;

		}
		
		@media screen and (max-width: 1680px) {
			.process {
				width: 1220px;
				height: auto;
				margin: 2% auto;
			}
			
			.process-box {
				width: 100%;
				height: 100%;
				margin: 4% auto;
				display: flex;
				flex-flow: row wrap;
			}
			
			.process-card {
				width: 33%;
				height: auto;
				overflow: hidden;
				position: relative;
				margin: 4% auto;
	
			}
			.process-card::before{
				content: '';
				width: 100%;
				height:80px;
				opacity: 1;
				transform: translateX(-50%);
				position: absolute;
				top: 81%;
				left: 50%;
				z-index: 1;
				transition: all 0.4s ease;
				padding: 1%;
				background-color: white;
				font-size: 32px;
			}
			.process-card:hover:before{
				
				width: 100%;
				height:390px;
				position: absolute;
				top: 0%;
				left: 45%;
				z-index: 1;
				transition: all 0.4s ease;
				padding: 1%;
				background-color: rgba(255,0,0,0.4);
			}
			.process-card .process-title{
				color: black;
				width: 95%;
				height: auto;
				opacity: 1;
				transform: translateX(-50%);
				position: absolute;
				top: 85%;
				left: 50%;
				z-index: 2;
				transition: all 0.4s ease;
				padding: 1%;
				text-align: center;
			}
			.process-card:hover .process-title{
				color: black;
				width: 95%;
				height: auto;
				opacity: 0;
				transform: translateX(-50%);
				position: absolute;
				top: 85%;
				left: 50%;
				z-index: 2;
				transition: all 0.4s ease;
				padding: 1%;
				text-align: center;
			}
			.process-card .process-text{
				color: white;
				width: 95%;
				height: auto;
				opacity: 0;
				transform: translateX(-50%);
				position: absolute;
				top: 30%;
				left: 50%;
				z-index:1;
				transition: all 0.4s ease;
				padding: 1%;
			}
			
			.process-card:hover .process-text {
				color: white;
				position: absolute;
				top: 25%;
				left: 50%;
				opacity: 1;
			}
			
			
			.process-text h3 {
				font-size: 36px;
				text-align: center;
			}
			
			.process-text p {
				margin-top: 10%;
				font-size: 20px;
				position: relative;
				top: 10%;
	
			}
		}
		
		@media screen and (max-width: 1440px) {
			.process {
				width: 1220px;
				height: auto;
				margin: 2% auto;
			}
			
			.process-box {
				width: 100%;
				height: 100%;
				margin: 4% auto;
				display: flex;
				flex-flow: row wrap;
			}
			
			.process-card {
				width: 30%;
				height: auto;
				overflow: hidden;
				position: relative;
				margin: 4% auto;
	
			}
			.process-card::before{
				content: '';
				width: 100%;
				height:80px;
				opacity: 1;
				transform: translateX(-50%);
				position: absolute;
				top: 81%;
				left: 50%;
				z-index: 1;
				transition: all 0.4s ease;
				padding: 1%;
				background-color: white;
				font-size: 32px;
			}
			.process-card:hover:before{
				
				width: 100%;
				height:390px;
				position: absolute;
				top: 0%;
				left: 50%;
				z-index: 1;
				transition: all 0.4s ease;
				padding: 1%;
				background-color: rgba(255,0,0,0.4);
			}
			.process-card .process-title{
				color: black;
				width: 95%;
				height: auto;
				opacity: 1;
				transform: translateX(-50%);
				position: absolute;
				top: 85%;
				left: 50%;
				z-index: 2;
				transition: all 0.4s ease;
				padding: 1%;
				text-align: center;
			}
			.process-card:hover .process-title{
				color: black;
				width: 95%;
				height: auto;
				opacity: 0;
				transform: translateX(-50%);
				position: absolute;
				top: 85%;
				left: 50%;
				z-index: 2;
				transition: all 0.4s ease;
				padding: 1%;
				text-align: center;
			}
			.process-card .process-text{
				color: white;
				width: 95%;
				height: auto;
				opacity: 0;
				transform: translateX(-50%);
				position: absolute;
				top: 30%;
				left: 50%;
				z-index:1;
				transition: all 0.4s ease;
				padding: 1%;
			}
			
			.process-card:hover .process-text {
				color: white;
				position: absolute;
				top: 25%;
				left: 50%;
				opacity: 1;
			}
			
			
			.process-text h3 {
				font-size: 36px;
				text-align: center;
			}
			
			.process-text p {
				margin-top: 10%;
				font-size: 20px;
				
				position: relative;
				top: 10%;
	
			}
		}
		
		@media screen and (max-width: 1280px) {
			.process {
				width: 1220px;
				height: auto;
				margin: 2% auto;
			}
			
			.process-box {
				width: 100%;
				height: 100%;
				margin: 4% auto;
				display: flex;
				flex-flow: row wrap;
			}
			
			.process-card {
				width: 30%;
				height: auto;
				overflow: hidden;
				position: relative;
				margin: 4% auto;
	
			}
			.process-card::before{
				content: '';
				width: 100%;
				height:80px;
				opacity: 1;
				transform: translateX(-50%);
				position: absolute;
				top: 81%;
				left: 50%;
				z-index: 1;
				transition: all 0.4s ease;
				padding: 1%;
				background-color: white;
				font-size: 32px;
			}
			.process-card:hover:before{
				
				width: 100%;
				height:390px;
				position: absolute;
				top: 0%;
				left: 50%;
				z-index: 1;
				transition: all 0.4s ease;
				padding: 1%;
				background-color: rgba(255,0,0,0.4);
			}
			.process-card .process-title{
				color: black;
				width: 95%;
				height: auto;
				opacity: 1;
				transform: translateX(-50%);
				position: absolute;
				top: 85%;
				left: 50%;
				z-index: 2;
				transition: all 0.4s ease;
				padding: 1%;
				text-align: center;
			}
			.process-card:hover .process-title{
				color: black;
				width: 95%;
				height: auto;
				opacity: 0;
				transform: translateX(-50%);
				position: absolute;
				top: 85%;
				left: 50%;
				z-index: 2;
				transition: all 0.4s ease;
				padding: 1%;
				text-align: center;
			}
			.process-card .process-text{
				color: white;
				width: 80%;
				height: auto;
				opacity: 0;
				transform: translateX(-50%);
				position: absolute;
				top: 20%;
				left: 50%;
				z-index:1;
				transition: all 0.4s ease;
				padding: 1%;
			}
			
			.process-card:hover .process-text {
				color: white;
				position: absolute;
				top: 5%;
				left: 50%;
				opacity: 1;
			}
			
			
			.process-text h3 {
				font-size: 36px;
				text-align: center;
			}
			
			.process-text p {
				margin-top: 10%;
				font-size: 20px;
				
				position: relative;
				top: 10%;
	
			}
		}
		
		@media screen and (max-width: 1220px) {
			.process {
				width: 96%;
				height: auto;
				margin: 2% auto;
			}
			
			.process-box {
				width: 100%;
				height: 100%;
				margin: 4% auto;
				display: flex;
				flex-flow: row wrap;
			}
			
			.process-card {
				width: 30%;
				height: auto;
				overflow: hidden;
				position: relative;
				margin: 4% auto;
	
			}
			.process-card::before{
				content: '';
				width: 100%;
				height:80px;
				opacity: 1;
				transform: translateX(-50%);
				position: absolute;
				top: 81%;
				left: 50%;
				z-index: 1;
				transition: all 0.4s ease;
				padding: 1%;
				background-color: white;
				font-size: 32px;
			}
			.process-card:hover:before{
				
				width: 100%;
				height:390px;
				position: absolute;
				top: 0%;
				left: 50%;
				z-index: 1;
				transition: all 0.4s ease;
				padding: 1%;
				background-color: rgba(255,0,0,0.4);
			}
			.process-card .process-title{
				color: black;
				width: 95%;
				height: auto;
				opacity: 1;
				transform: translateX(-50%);
				position: absolute;
				top: 85%;
				left: 50%;
				z-index: 2;
				transition: all 0.4s ease;
				padding: 1%;
				text-align: center;
			}
			.process-card:hover .process-title{
				color: black;
				width: 95%;
				height: auto;
				opacity: 0;
				transform: translateX(-50%);
				position: absolute;
				top: 85%;
				left: 50%;
				z-index: 2;
				transition: all 0.4s ease;
				padding: 1%;
				text-align: center;
			}
			.process-card .process-text{
				color: white;
				width: 80%;
				height: auto;
				opacity: 0;
				transform: translateX(-50%);
				position: absolute;
				top: 20%;
				left: 50%;
				z-index:1;
				transition: all 0.4s ease;
				padding: 1%;
			}
			
			.process-card:hover .process-text {
				color: white;
				position: absolute;
				top: 5%;
				left: 50%;
				opacity: 1;
			}
			
			
			.process-text h3 {
				font-size: 36px;
				text-align: center;
			}
			
			.process-text p {
				margin-top: 10%;
				font-size: 16px;
				
				position: relative;
				top: 10%;
	
			}
		}
		
		@media screen and (max-width: 1024px) {
			.process {
				width: 96%;
				height: auto;
				margin: 2% auto;
			}
			
			.process-box {
				width: 100%;
				height: 100%;
				margin: 4% auto;
				display: flex;
				flex-flow: row wrap;
			}
			
			.process-card {
				width: 30%;
				height: auto;
				overflow: hidden;
				position: relative;
				margin: 4% auto;
	
			}
			.process-card::before{
				content: '';
				width: 100%;
				height:80px;
				opacity: 1;
				transform: translateX(-50%);
				position: absolute;
				top: 81%;
				left: 50%;
				z-index: 1;
				transition: all 0.4s ease;
				padding: 1%;
				background-color: white;
				font-size: 32px;
			}
			.process-card:hover:before{
				
				width: 100%;
				height:390px;
				position: absolute;
				top: 0%;
				left: 50%;
				z-index: 1;
				transition: all 0.4s ease;
				padding: 1%;
				background-color: rgba(255,0,0,0.4);
			}
			.process-card .process-title{
				color: black;
				width: 95%;
				height: auto;
				opacity: 1;
				transform: translateX(-50%);
				position: absolute;
				top: 85%;
				left: 50%;
				z-index: 2;
				transition: all 0.4s ease;
				padding: 1%;
				text-align: center;
			}
			.process-card:hover .process-title{
				color: black;
				width: 95%;
				height: auto;
				opacity: 0;
				transform: translateX(-50%);
				position: absolute;
				top: 85%;
				left: 50%;
				z-index: 2;
				transition: all 0.4s ease;
				padding: 1%;
				text-align: center;
			}
			.process-card .process-text{
				color: white;
				width: 80%;
				height: auto;
				opacity: 0;
				transform: translateX(-50%);
				position: absolute;
				top: 20%;
				left: 50%;
				z-index:1;
				transition: all 0.4s ease;
				padding: 1%;
			}
			
			.process-card:hover .process-text {
				color: white;
				position: absolute;
				top: 5%;
				left: 50%;
				opacity: 1;
			}
			
			
			.process-text h3 {
				font-size: 36px;
				text-align: center;
			}
			
			.process-text p {
				margin-top: 10%;
				font-size: 16px;
				
				position: relative;
				top: 10%;
	
			}
		}
		
		@media screen and (max-width: 950px) {
			.process {
				width: 96%;
				height: auto;
				margin: 2% auto;
			}
			
			.process-box {
				width: 100%;
				height: 100%;
				margin: 4% auto;
				display: flex;
				flex-flow: row wrap;
			}
			
			.process-card {
				width: 30%;
				height: auto;
				overflow: hidden;
				position: relative;
				margin: 4% auto;
	
			}
			.process-card::before{
				content: '';
				width: 100%;
				height:80px;
				opacity: 1;
				transform: translateX(-50%);
				position: absolute;
				top: 81%;
				left: 50%;
				z-index: 1;
				transition: all 0.4s ease;
				padding: 1%;
				background-color: white;
				font-size: 32px;
			}
			.process-card:hover:before{
				
				width: 100%;
				height:390px;
				position: absolute;
				top: 0%;
				left: 50%;
				z-index: 1;
				transition: all 0.4s ease;
				padding: 1%;
				background-color: rgba(255,0,0,0.4);
			}
			.process-card .process-title{
				color: black;
				width: 95%;
				height: auto;
				opacity: 1;
				transform: translateX(-50%);
				position: absolute;
				top: 85%;
				left: 50%;
				z-index: 2;
				transition: all 0.4s ease;
				padding: 1%;
				text-align: center;
			}
			.process-card:hover .process-title{
				color: black;
				width: 95%;
				height: auto;
				opacity: 0;
				transform: translateX(-50%);
				position: absolute;
				top: 85%;
				left: 50%;
				z-index: 2;
				transition: all 0.4s ease;
				padding: 1%;
				text-align: center;
			}
			.process-card .process-text{
				color: white;
				width: 80%;
				height: auto;
				opacity: 0;
				transform: translateX(-50%);
				position: absolute;
				top: 20%;
				left: 50%;
				z-index:1;
				transition: all 0.4s ease;
				padding: 1%;
			}
			
			.process-card:hover .process-text {
				color: white;
				position: absolute;
				top: 5%;
				left: 50%;
				opacity: 1;
			}
			
			
			.process-text h3 {
				font-size: 36px;
				text-align: center;
			}
			
			.process-text p {
				margin-top: 10%;
				font-size: 12px;
				
				position: relative;
				top: 10%;
	
			}
		}
		
		@media screen and (max-width: 768px) {
			.process {
				width: 96%;
				height: auto;
				margin: 2% auto;
			}
			
			.process-box {
				width: 100%;
				height: 100%;
				margin: 4% auto;
				display: flex;
				flex-flow: row wrap;
			}
			.process-box::after{
				content: '';
				width: 50%;
			}
			
			.process-card {
				width: 48%;
				height: auto;
				overflow: hidden;
				position: relative;
				margin: 4% auto;
	
			}
			.process-card::before{
				content: '';
				width: 100%;
				height:80px;
				opacity: 1;
				transform: translateX(-50%);
				position: absolute;
				top: 81%;
				left: 50%;
				z-index: 1;
				transition: all 0.4s ease;
				padding: 1%;
				background-color: white;
				font-size: 32px;
			}
			.process-card:hover:before{
				
				width: 100%;
				height:390px;
				position: absolute;
				top: 0%;
				left: 50%;
				z-index: 1;
				transition: all 0.4s ease;
				padding: 1%;
				background-color: rgba(255,0,0,0.4);
			}
			.process-card .process-title{
				color: black;
				width: 95%;
				height: auto;
				opacity: 1;
				transform: translateX(-50%);
				position: absolute;
				top: 85%;
				left: 50%;
				z-index: 2;
				transition: all 0.4s ease;
				padding: 1%;
				text-align: center;
			}
			.process-card:hover .process-title{
				color: black;
				width: 95%;
				height: auto;
				opacity: 0;
				transform: translateX(-50%);
				position: absolute;
				top: 85%;
				left: 50%;
				z-index: 2;
				transition: all 0.4s ease;
				padding: 1%;
				text-align: center;
			}
			.process-card .process-text{
				color: white;
				width: 80%;
				height: auto;
				opacity: 0;
				transform: translateX(-50%);
				position: absolute;
				top: 20%;
				left: 50%;
				z-index:1;
				transition: all 0.4s ease;
				padding: 1%;
			}
			
			.process-card:hover .process-text {
				color: white;
				position: absolute;
				top: 5%;
				left: 50%;
				opacity: 1;
			}
			
			
			.process-text h3 {
				font-size: 36px;
				text-align: center;
			}
			
			.process-text p {
				margin-top: 2%;
				font-size: 18px;
				
				
	
			}
		}
		
		@media screen and (max-width: 600px) {
			.process {
				width: 96%;
				height: auto;
				margin: 2% auto;
			}
			
			.process-box {
				width: 100%;
				height: 100%;
				margin: 4% auto;
				display: flex;
				flex-flow: row wrap;
			}
			.process-box::after{
				content: '';
				width: 50%;
			}
			
			.process-card {
				width: 48%;
				height: auto;
				overflow: hidden;
				position: relative;
				margin: 4% auto;
	
			}
			.process-card::before{
				content: '';
				width: 100%;
				height:80px;
				opacity: 1;
				transform: translateX(-50%);
				position: absolute;
				top: 81%;
				left: 50%;
				z-index: 1;
				transition: all 0.4s ease;
				padding: 1%;
				background-color: white;
				
			}
			.process-card:hover:before{
				
				width: 100%;
				height:390px;
				position: absolute;
				top: 0%;
				left: 50%;
				z-index: 1;
				transition: all 0.4s ease;
				padding: 1%;
				background-color: rgba(255,0,0,0.4);
			}
			.process-card .process-title{
				color: black;
				width: 95%;
				height: auto;
				opacity: 1;
				transform: translateX(-50%);
				position: absolute;
				top: 85%;
				left: 50%;
				z-index: 2;
				transition: all 0.4s ease;
				padding: 1%;
				text-align: center;
			}
			.process-card:hover .process-title{
				color: black;
				width: 95%;
				height: auto;
				opacity: 0;
				transform: translateX(-50%);
				position: absolute;
				top: 85%;
				left: 50%;
				z-index: 2;
				transition: all 0.4s ease;
				padding: 1%;
				text-align: center;
			}
			.process-card .process-text{
				color: white;
				width: 87%;
				height: auto;
				opacity: 0;
				transform: translateX(-50%);
				position: absolute;
				top: 20%;
				left: 50%;
				z-index:1;
				transition: all 0.4s ease;
				padding: 1%;
			}
			
			.process-card:hover .process-text {
				color: white;
				position: absolute;
				top: 5%;
				left: 50%;
				opacity: 1;
			}
			
			.process-title h3 {
				font-size: 16px;
				text-align: center;
			}
			
			.process-text p {
				margin-top: 1%;
				font-size: 11px;
			}
		}
		@media screen and (max-width: 370px) {
			.process {
				width: 96%;
				height: auto;
				margin: 2% auto;
			}
			
			.process-box {
				width: 100%;
				height: 100%;
				margin: 4% auto;
				
			}
			.process-box::after{
				content: '';
				width: 50%;
			}
			
			.process-card {
				width: 95%;
				height: auto;
				overflow: hidden;
				position: relative;
				margin: 4% auto;
	
			}
			.process-card::before{
				content: '';
				width: 100%;
				height:80px;
				opacity: 1;
				transform: translateX(-50%);
				position: absolute;
				top: 81%;
				left: 50%;
				z-index: 1;
				transition: all 0.4s ease;
				padding: 1%;
				background-color: white;
				
			}
			.process-card:hover:before{
				
				width: 100%;
				height:390px;
				position: absolute;
				top: 0%;
				left: 50%;
				z-index: 1;
				transition: all 0.4s ease;
				padding: 1%;
				background-color: rgba(255,0,0,0.4);
			}
			.process-card .process-title{
				color: black;
				width: 95%;
				height: auto;
				opacity: 1;
				transform: translateX(-50%);
				position: absolute;
				top: 85%;
				left: 50%;
				z-index: 2;
				transition: all 0.4s ease;
				padding: 1%;
				text-align: center;
			}
			.process-card:hover .process-title{
				color: black;
				width: 95%;
				height: auto;
				opacity: 0;
				transform: translateX(-50%);
				position: absolute;
				top: 85%;
				left: 50%;
				z-index: 2;
				transition: all 0.4s ease;
				padding: 1%;
				text-align: center;
			}
			.process-card .process-text{
				color: white;
				width: 87%;
				height: auto;
				opacity: 0;
				transform: translateX(-50%);
				position: absolute;
				top: 20%;
				left: 50%;
				z-index:1;
				transition: all 0.4s ease;
				padding: 1%;
			}
			
			.process-card:hover .process-text {
				color: white;
				position: absolute;
				top: 5%;
				left: 50%;
				opacity: 1;
			}
			
			.process-title h3 {
				font-size: 16px;
				text-align: center;
			}
			
			.process-text p {
				margin-top: 1%;
				font-size: 16px;
			}
		}