/* CSS Document */
@import url('font-awesome.min.css');

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

body div.section .galleries{
	display: flex;
	flex-wrap:wrap;
	width: 100%;
}
body div.section .galleries p.read{margin-top:5em;}
body div.section .galleries article{
	position:relative;
	cursor: pointer; 
	margin: 1em 1.66%;
	width: 30%;
	min-width:200px;
	overflow:hidden;
}
body div.section .galleries article .cover{
	position:relative;
	width:100%;
	overflow:hidden;
	background-size:cover;
	background-position:center;
	border-radius:2px;
	transition:.4s;
	-webkit-filter: grayscale(70%);
	filter: grayscale(70%);
}
body div.section .galleries article:hover .cover{
	-webkit-filter: grayscale(0%);
	filter: grayscale(0%);
}
body div.section .galleries article .title{
	position:absolute;
	bottom:4px;
	right:4px;
	left:4px;
	color: #FFF;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:10px;
	background: rgba(0,0,0,.7);
	border-radius:2px;
	transition:.2s;
	opacity:0;
}
body div.section .galleries article:hover .title{background: rgba(0,0,0,.9);opacity:1;}
body div.section .galleries article .title span{
	display:block;
	width:100%;
	white-space:nowrap;
	text-overflow:ellipsis;
	overflow:hidden;
	text-align:center;
}
div.shadowbg{
	display:inline-block;
	position:fixed;
	top:0;left:0;
	background:rgba(0,0,0,.4);
	min-height:inherit;
	height:100%;
	width:100%;
	z-index:10;
	opacity:0;
	visibility:hidden;
	transition:.2s;
	padding:0 20px;
}
div.shadowbg.show{opacity:1;visibility:visible;}
div.gallery-frame{
	position:absolute;
	top:0;left:0;
	min-height:inherit;
	height:100%;
	width:100%;
	z-index:10;
	opacity:0;
	visibility:hidden;
	transition:.2s;
	padding:0 20px;
}
div.gallery-frame.show{
	opacity:1;
	visibility:visible;
}
div.gallery-frame .imgbox{
	position:relative;
	background:#FFF;
	border-radius:5px 5px 3px 3px;
	margin:60px auto;
	max-width:900px;
	display:flex;
	flex-direction:column;
	align-items:stretch;
	justify-content:space-between;
	box-shadow:0 1px 10px rgba(0,0,0,.2);
}
div.gallery-frame .imgbox #close{
	position:absolute;
	top:8px;right:8px;
	height:12px;
	width:12px;
	background:url(../img/close-white.svg);
	background-size:contain;
	background-position:center;
	opacity:.4;
	transition:.1s;
}
div.gallery-frame .imgbox #close:hover{opacity:1;}
div.gallery-frame .imgbox #close:active{opacity:.6;}
div.gallery-frame .imgbox .text{padding:10px 12px;}
div.gallery-frame .imgbox .text p{margin:0;}
div.gallery-frame .imgbox .image-frame{
	position:relative;
	border-radius:3px 3px 0 0;
	flex:2;
	width:100%;
	min-height:300px;
	background:#111;
	text-align:center;
	padding:10px;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	-o-user-select:none;
	user-select:none;
}
div.gallery-frame .imgbox .image-frame .loading{
	position:absolute;
	top:50%;left:50%;
	margin-top:-50px;
	margin-left:-50px;
	opacity:0;
	visibility:hidden;
	height:100px;
	width:100px;
}
div.gallery-frame .imgbox .image-frame .loading.show{
	opacity:1;
	visibility:visible;
}
div.gallery-frame .imgbox .image-frame .loading .loader {
  margin:auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
div.gallery-frame .imgbox .image-frame .loading .loader,
div.gallery-frame .imgbox .image-frame .loading .loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}
div.gallery-frame .imgbox .image-frame img{
	opacity:1;
	visibility:visible;
	transition:.2s;
	max-height:580px;
	max-width:100%;
	box-shadow:0 1px 5px rgba(0,0,0,.4);
}
div.gallery-frame .imgbox .image-frame img.hide{
	opacity:0;
	visibility:hidden;
}
div.gallery-frame .imgbox .image-frame .arrow{
	position:absolute;
	height:50px;
	width:50px;
	color:#FFF;
	background:rgba(0,0,0,.8);
	border-radius:50%;
	top:50%;
	transform:translateY(-50%);
	opacity:0;
	transition:.2s;
	font-size:2em;
	display:flex;
	align-items:center;
	justify-content:center;
}
div.gallery-frame .imgbox .image-frame .arrow{font-family:'FontAwesome';}
div.gallery-frame .imgbox .image-frame:hover .arrow{opacity:.2;}
div.gallery-frame .imgbox .image-frame:hover .arrow:hover{opacity:1;}
div.gallery-frame .imgbox .image-frame:hover .arrow:active{opacity:.6;}
div.gallery-frame .imgbox .image-frame .arrow.left{left:10px;}
div.gallery-frame .imgbox .image-frame .arrow.right{right:10px;}
div.gallery-frame .imgbox .image-frame .arrow.left:after{content:'\f060';display:block;}
div.gallery-frame .imgbox .image-frame .arrow.right:after{content:'\f061';display:block;}
div.gallery-frame .imgbox .image-frame .arrow.hide,
div.gallery-frame .imgbox .image-frame .arrow.hide:hover,
div.gallery-frame .imgbox .image-frame .arrow.hide:active{
	opacity:0;
	visibility:hidden;
}

div.gallery-frame .imgbox .image-frame .header{
	border-radius:3px 3px 0 0;
	position:absolute;
	top:0;left:0;
	width:100%;
	background:rgba(0,0,0,.6);
	padding:10px 14px;
	color:#FFF;
	display:flex;
	align-items:center;
	justify-content:space-between;
	opacity:0;
	transition:.2s;
}
div.gallery-frame .imgbox .image-frame:hover .header{
	opacity:1;
}
div.gallery-frame .imgbox .image-frame .header h3{
	font-weight:300;
	margin:0;
}
div.gallery-frame .imgbox .image-frame .header #close{
	position:static;
	height:20px;
	width:20px;
	background:url(../img/close-white.svg);
	background-size:contain;
	background-position:center;
	opacity:.4;
	transition:.1s;
}
div.gallery-frame .imgbox .image-frame .header #close:hover{opacity:1;}
div.gallery-frame .imgbox .image-frame .header #close:active{opacity:.6;}