#serv {
	height: 100vh;
	position: relative;
	padding-top: 80px;
}

	#serv-cont {
		width: 100%;
		height: 100%;
		background: black;
		text-shadow: 3px 3px 7px #333;
	}
	
		.serv-item {
			width: 33.3%;
			height: 33.3%;
			background: radial-gradient(circle, green 0%, blue 100%);
			float: left;
			background-position: center center;
			background-size: cover;
			background-repeat: no-repeat;
			text-transform: uppercase;
			text-align: center;
		}
		
			.serv-item:after {
			  content: "";
			  display: table;
			  clear: both;
			}
			
			.serv-item a {
				text-decoration: none;
				color: white;
			}
			
			.serv-item h2 {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin: 0;
				width: 100%;
				height: 100%;
			}
		
		#serv1 {
			background-image: url(../img/serv1.jpg);
		}
		
			#serv1 h2 {
				background: rgba(246, 146, 30, .4);
			}

		#serv2 {
			background-image: url(../img/serv2.jpg);
		}
		
			#serv2 h2 {
				background: rgba(236, 41, 123, .4);
			}

		#serv3 {
			background-image: url(../img/serv3.jpg);
		}
		
			#serv3 h2 {
				background: rgba(0, 173, 238, .4);
			}

		#serv4 {
			background-image: url(../img/serv4.jpg);
		}
		
			#serv4 h2 {
				background: rgba(254, 238, 0, .4);
			}

		#serv5 {
			background-image: url(../img/serv5.jpg);
		}
		
			#serv5 h2 {
				background: rgba(132, 195, 65, .4);
			}

		#serv6 {
			background-image: url(../img/serv6.jpg);
		}
		
			#serv6 h2 {
				background: rgba(144, 39, 142, .4);
			}

		#serv7 {
			background-image: url(../img/serv7.jpg);
		}
		
			#serv7 h2 {
				background: rgba(186, 0, 124, .4);
			}

		#serv8 {
			background-image: url(../img/serv8.jpg);
		}
		
			#serv8 h2 {
				background: rgba(0, 29, 126, .4);
			}

		#serv9 {
			background-image: url(../img/serv9.jpg);
		}
		
			#serv9 h2 {
				background: rgba(191, 8, 17, .4);
			}

.modal {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 80px;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	z-index: -1;
	transition: all 300ms ease-in-out;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

#modal1:target {
	opacity: 1;
	z-index: 10;
	background-image: url(../img/serv1.jpg);
}

#modal2:target {
	opacity: 1;
	z-index: 10;
	background-image: url(../img/serv2.jpg);
}

#modal3:target {
	opacity: 1;
	z-index: 10;
	background-image: url(../img/serv3.jpg);
}

#modal4:target {
	opacity: 1;
	z-index: 10;
	background-image: url(../img/serv4.jpg);
}

#modal5:target {
	opacity: 1;
	z-index: 10;
	background-image: url(../img/serv5.jpg);
}

#modal6:target {
	opacity: 1;
	z-index: 10;
	background-image: url(../img/serv6.jpg);
}

#modal7:target {
	opacity: 1;
	z-index: 10;
	background-image: url(../img/serv7.jpg);
}

#modal8:target {
	opacity: 1;
	z-index: 10;
	background-image: url(../img/serv8.jpg);
}

#modal9:target {
	opacity: 1;
	z-index: 10;
	background-image: url(../img/serv9.jpg);
}

	.imgbg {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 80px;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	#imgbg1 {
		background: rgba(246, 146, 30, .4);
	}

	#imgbg2 {
		background: rgba(236, 41, 123, .4);
	}
		
	#imgbg3 {
		background: rgba(0, 173, 238, .4);
	}
		
	#imgbg4 {
		background: rgba(254, 238, 0, .4);
	}
		
	#imgbg5 {
		background: rgba(132, 195, 65, .4);
	}
		
	#imgbg6 {
		background: rgba(144, 39, 142, .4);
	}
		
	#imgbg7 {
		background: rgba(186, 0, 124, .4);
	}
		
	#imgbg8 {
		background: rgba(0, 29, 126, .4);
	}
		
	#imgbg9 {
		background: rgba(191, 8, 17, .4);
	}
		
		.prev, .next {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
		}

		.prev, .next, .close {
			opacity: 0.6;
			transition: all 300ms ease-in-out;
			filter: drop-shadow(3px 3px 7px #333);
			width: 50px;
		}
		
		.prev:hover, .next:hover, .close:hover {
			opacity: 1;
		}		
		
		.prev {
			left: 5%;
		}
		
		.next {
			right: 5%;
		}
		
		.close {
			position: absolute;
			top: 2%;
			right: 2%;
		}
		
		.modal-info {
			width: 900px;
			margin: 0 auto;
			color: white;
			text-shadow: 3px 3px 7px #333;
			line-height: 1.5;
			letter-spacing: 2px;
			text-align: center;
		}
		
			.modal-info h2 {
				text-transform: uppercase;
			}
			
			.modal-info p {
				font-size: 16px;
			}
			
			
/* 769 - 920 */

@media screen and (min-width: 769px) and (max-width: 920px) {
			.prev, .next, .close {
				width: 25px;
			}
			
			.prev {
				left: 2%;
			}
			
			.next {
				right: 2%;
			}
			
			.modal-info {
				width: 680px;
			}
}


/* 481 - 768 */

@media screen and (min-width: 481px) and (max-width: 768px) {
			.serv-item {
				width: 50%;
			}
			
			.serv-item:last-of-type {
				width: 100%;
			}
			
			.prev, .next, .close {
				width: 25px;
			}
			
			.prev {
				left: 2%;
			}
			
			.next {
				right: 2%;
			}
			
			.modal-info {
				width: 400px;
			}
}


/* =< 450 on height */

@media screen and (max-height: 450px) {
				.serv-item h2 {
					font-size: 12px;
				}
			.modal-info {
				width: 450px;
				letter-spacing: 1px;
				font-size: 10px;
			}
			
				.modal-info p {
					font-size: 10px;
				}
}


/* 320 - 480 */

@media screen and (min-width: 320px) and (max-width: 480px) {
	#serv {
		padding-top: 60px;
	}
			.serv-item {
				width: 100%;
			}
			
			.prev, .next, .close {
				width: 20px;
			}
			
			.prev {
				left: 1%;
			}
			
			.next {
				right: 1%;
			}
			
	.modal {
		top: 60px;
	}
	
		.imgbg {
			bottom: 60px;
		}
			
			.modal-info {
				width: 250px;
				letter-spacing: 1px;
				font-size: 12px;
			}
			
				.modal-info p {
					font-size: 12px;
				}
}

/* =< 319 */

@media screen and (max-width: 319px) {
	#serv {
		padding-top: 60px;
		min-width: 319px;
	}
			.serv-item {
				width: 100%;
			}
			
			.prev, .next, .close {
				width: 20px;
			}
			
			.prev {
				left: 1%;
			}
			
			.next {
				right: 1%;
			}
			
	.modal {
		top: 60px;
		min-width: 319px;
	}
	
		.imgbg {
			bottom: 60px;
		}
			
			.modal-info {
				width: 250px;
				letter-spacing: 1px;
				font-size: 12px;
			}
			
				.modal-info p {
					font-size: 12px;
				}
}