/*HIDDEN*/
.out-of-view{opacity: 0}

/*SERVICES GRID*/
.services-container{
	width: 60%;
	height: 100%;
	margin-left: 10%;
	padding: 5%;
	display: grid;
	grid-template-columns: 45% 45% 45%;
	column-gap: 2%;
	row-gap: 2%;
}

/*CARDS STYLES*/
.icon{font-size: 6rem;}
.service-card{
	opacity: 0;
	background-color: white;
	position: relative;
	height: 500px;
	transition: 1s;
	border-radius: 25px;
	-webkit-box-shadow: 0px 0px 44px -35px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 0px 44px -35px rgba(0,0,0,0.75);
	box-shadow: 0px 0px 44px -35px rgba(0,0,0,0.75);
	overflow: hidden;
}
.card-header{
	padding: 5%;
	text-align: center;
	align-content: center;
	margin-top: 35%;
	transition: 1s;
	color: #3EC483;
}
.card-title{
	text-align: center;
	align-content: center;
	//font-family: "Roboto Mono", monospace;
	font-size: 2.5rem;
	font-weight: bold;
	color: #3EC483;
	transition: 1s;
}
.card-body{
	padding-left: 2%;
	align-content: center;
	text-align: center;
	max-width: 96%;
	max-height: 45%;
	//font-family: "Roboto Mono", monospace;
	
	font-weight: 400;
	color: white;
	overflow: hidden;
	top: 100%;
	position: absolute;
	transition: 1s;
	opacity: 0;
}
.card-body p{font-size: 2.5rem;}

/*APPLIED ANIMATIONS*/
.service-card:hover .card-body{top: 50%;opacity: 1;}
.service-card:hover .card-header{margin-top: 5%;color: white;}
.service-card:hover .card-title{color: white;}
.service-card:hover{background-color: #3EC483;}
.service-animate{animation: service-animation 1.5s forwards;}
.service-animate-left{animation:  titleFadeDown 1s forwards;}
.service-animate-right{animation: titleFadeDown 1s forwards;}
.service-animate-center{animation: titleFadeUp 1s forwards;}
.service-animate-left-out{animation: outLeft 1s ;}
.service-animate-right-out{animation: outRight 1s ;}
.service-animate-center-out{animation: outUp 1s ;}