.pic-box{
    text-align: center;
    padding-bottom: 150px;
}
.pic-list{
	width: 20%;
	display: block;
	position: absolute;
	overflow: hidden;
}
.pic-list-mask{
	width: 100%;
	height: 100%;
	display: block;
	background-color: rgba(0,0,0,0.6);
	transition: all .5s ease;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
	background-size: 20px;
	background-position: center;
	background-image: url(../img/hover-icon.png);
}
.pic-list img{
	transition: all .4s ease;
}
.pic-list:hover .pic-list-mask{
	opacity: 1;
}
.pic-list:hover img{
	transform: scale(1.05);

}
.pic-list-box{
	width: calc(100% - 20px);
	max-width: 100%;
	display: block;
	margin: 0 auto;
}
.pic-list{
	width: calc(20% - 10px);
	margin-bottom: 12.5px;
}
.gutter-sizer{
	width: 12.5px;
}

.pic-fancybox-box{
	width: 100%;
	height: 100vh;
	display:none;
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	padding:40px 80px;
	box-sizing: border-box;
}
.pic-fancybox-box.active{
	display: block;
}
.pic-fancybox-img{
	width: 100%;
	height: 100%;
	z-index: 3;
	display: block;
}
.pic-mask-box{
	width: 100%;
	height: 100vh;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.7);
}
.pic-facybox-prev{
	width: 30px;
	max-width: 100%;
	display: block;
	position: absolute;
	top: calc(50% - 17px);
	left: 20px;
	z-index: 1;
	opacity: 0.4;
	transition: all .5s ease;
}
.pic-facybox-next{
	width: 30px;
	max-width: 100%;
	display: block;
	position: absolute;
	top: calc(50% - 17px);
	right: 20px;
	z-index: 1;
	opacity: 0.4;
	transition: all .5s ease;

}
.pic-facybox-prev:hover,
.pic-facybox-next:hover{
	opacity: 1;
}
.pic-fancybox-out{
	width: 40px;
	height: 40px;
	display: block;
	position: absolute;
	max-width: 100%;
	top: 0;
	right: 0;
	line-height: 40px;
	background-color: #555;
	color: #FFF;
	text-align: center;
	font-size: 20px;
	transition: all .5s ease;
	cursor: pointer;
}
.pic-fancybox-out:hover{
	background-color:#c41b1b; 
}
.noactive{
	display: none;
}
.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #c41b1b;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}