.projects {
	margin-top: calc(var(--unit) * 5);
	border-bottom: 1px solid var(--border-color);
}

.projects h2 {
	padding: calc(var(--unit) * 2) var(--unit);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.work-item a {
	display: block;
	position: relative;
	border-top: 1px solid var(--border-color);
	cursor: pointer;
	padding: calc(var(--unit) * 2) var(--unit);
	transition: all .3s;
}

.work-item a::after {
	content: ' ';
	position: absolute;
	top: calc(var(--unit) * 2);
	right: var(--unit);
}

.work-item a:hover {
	background-color: #000;
	color: #fff;
	padding: calc(var(--unit) * 2);
}

.about {
	display: inline-block;
	position: absolute;
	right: calc(var(--unit) / 2);
	bottom: calc(var(--unit) / 2);
}

.project-thumb {
	margin-bottom: var(--unit);
}

/* Reel */

.reel video {
	border-radius: 5px;
	width: 100%;
	padding: 10px;
}

.play-reel-btn {
	position: relative;
	width: 100%;
	margin-top: var(--unit);
	z-index: 1001;
}

.play-reel-btn video {
	width: 100%;
	border-radius: 5px;
}

.play-reel-txt {
	position: absolute;
	right: 14px;
	bottom: 14px;
	color: #fff;	
}

#fade {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1002;
  -moz-opacity: 0.95;
  opacity: .95;
  filter: alpha(opacity=95);
}

#light {
  display: none;
  position: absolute;
  top: 50%;
  left: 0;
	width: 100%;
  max-width: 900px;
  max-height: 495px;
  margin-left: 0;
  margin-top: -200px;
  z-index: 1003;
  overflow: visible;
}

#boxclose {
  float: right;
  cursor: pointer;
  color: #fff;
  display: inline-block;
  line-height: 0px;
  padding: 11px 3px;
  position: absolute;
  right: 14px;
  top: 14px;
  z-index: 1003;
  opacity: 1;
}

.boxclose:before {
  content: "close reel";
}

#fade:hover ~ #boxclose {
  display:none;
}

video::-webkit-media-controls {
  display:none !important;
}

@media screen and (min-width: 65rem) {
	.about {
		right: var(--unit);
		bottom: var(--unit);
	}
	.accordion-content {
		padding: calc(var(--unit) * 2) var(--unit);
	}
	.play-reel-btn {
		position: relative;
		width: 25%;
		margin-top: 0;
		z-index: 1001;
	}
	#light {
	  display: none;
	  position: absolute;
	  top: 50%;
	  left: 50%;
		width: 100%;
	  max-width: 900px;
	  max-height: 495px;
	  margin-left: -450px;
	  margin-top: -247px;
	  z-index: 1003;
	  overflow: visible;
	}
}

@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@-moz-keyframes fadein {
	from {
		opacity: 0;
	}
	to {
	opacity: 1;
	}
}
@-webkit-keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}