.pic {
  position: relative;
  width: 100%;
  background: #212121;
}

.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.pic:hover .image {
  opacity: 0.3;
}

.pic:hover .middle {
  opacity: 1;
}

.text {
  	position: relative;
	display: inline-block;
	color: #ccc;
	font-size: 1.2rem;
	font-weight: 900;
}
.text::before {
	content: attr(data-text);
	position: absolute;
	color: #ccc;
	inset: 0;
	color: transparent;
	-webkit-text-stroke: 5px #ff31ca;
	z-index: -1;
}
.modal-header {
	color: #fff;
}
.modal-body {
	color: #fff;
}
.modal-body a {
	color: #ff31ca;
}
.modal-body p {
	word-break: break-all;
}
.modal .outline {
	position: relative;
	display: inline-block;
	color: #ccc;
	text-transform: uppercase;
	z-index: 0;
}
.modal .outline::before {
	content: attr(data-text);
	position: absolute;
	color: #ccc;
	inset: 0;
	color: transparent;
	-webkit-text-stroke: 10px #ff31ca;
	z-index: -1;
}
.work_list div {
	width: 33.33333%;
}
.work_list img {
	width: 100%;
	padding-right: 10px;
}
@media (max-width: 768px) {
	.work_list img {
		width: 50px;
		padding-right: 5px;
	}
	p {
		font-size: small;
	}
}