:root {
	--vg-text : #fff;
}

.light {
		--vg-text : var(--fa-p);
}

.row{
	display: flex;
	flex-wrap: wrap;
}

.video-gallery .container{
	width: 100%;
}

.video video.hide {
	display: none;
}

.video {
  overflow: hidden;
  border-radius: 1em;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.5);
}

.video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  outline: none;
  border: none;
}

/*.gallery*/
.video-gallery{
	width: 100%;
	display: flex;
	padding: 2em 0;
}
.video-gallery .gallery-filter{
	width: 100%;
	margin-bottom: 1em;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.video-gallery .gallery-filter .filter-item{
  background-color: var(--bg-primary);
  border: 2px solid var(--bg-primary);
  color: var(--vg-text);
  padding: 6px 16px;
  border-radius: 20px;
  margin: 6px;
  cursor: pointer;
}
.video-gallery .gallery-filter .filter-item.selected{
  background-color: var(--fa-p);
  border: 2px solid var(--fa-p);
	color: white;
}
.video-gallery .gallery-filter .filter-item:hover{
  border: 2px solid var(--fa-p);
}
.video-gallery .gallery-item{
	width: calc(calc(100% / 4) - 1em);
  height: calc(calc(100vw / 8.6) - 1em);
	padding: 0.5em;
}
.video-gallery .gallery-item-inner img{
	width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-gallery .gallery-item-inner img:hover, video:hover{
  transition: .2s linear;
  transform: scale(1.2);
}

.video-gallery .gallery-item-inner .play{
  display: flex;
  justify-content: center;
  align-items: center;
	cursor: pointer;
}

.video-gallery .gallery-item-inner .play i{
  color: #fff;
  opacity: 0.4;
  font-size: 3.2em;
	margin-top: -50%;
	border-radius: 1em;
	padding: 0 2px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.video-gallery .gallery-item-inner .play i:hover{
	background: var(--fa-p);
  opacity: 1;
  transition: 600ms;
}

.video-gallery .gallery-item.show{
	animation: fadeIn 0.5s ease;
}
@keyframes fadeIn{
	0%{
		opacity: 0;
		transform: scale(0.5);
	}
	100%{
		opacity: 1;
		transform: scale(1);
	}
}
.video-gallery .gallery-item.hide{
	display: none;
}

/*responsive*/
@media(max-width: 991px){
	.video-gallery .gallery-item{
    width: calc(calc(100% / 3) - 1em);
    height: calc(calc(100vw / 6.4) - 1em);
	}
}
@media(max-width: 767px){
  .video-gallery .gallery-item{
    width: calc(calc(100% / 2) - 1em);
    height: calc(calc(100vw / 5) - 1em);
	}
}

@media (max-width: 480px) {
  .video-gallery .gallery-item{
    width: calc(100% - 1em);
    height: calc(calc(100vw / 2.4) - 1em);
	}
	.video-gallery .gallery-filter .filter-item{
		margin-bottom: 0.5em;
	}
}


/* Modal */

.video-container {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  background-color: rgba(35, 35, 46, 0.6);
  display: flex;
	opacity: 0;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.video-container .close{
  position: fixed;
  top: 10%;
  right: 32px;
  font-size: 2em;
  color: #fff;
	opacity: 0.4;
  cursor: pointer;
	transform: scale(0);
}

.video-container video{
  width: 75vw;
  transform: scale(0);
  box-shadow: 0 1em 1.25em rgba(0, 0, 0, 0.2);
  outline: none;
}

.video-container.show{
  pointer-events: all;
  opacity: 1;
}

.video-container.show .close{
  transform: scale(1);
	transition: all 1s ease;
}

.video-container.show video{
  transform: scale(1);
	transition: all 600ms ease;
}