.archive-title {
margin-bottom: 25px;
}
.archive-single.gallery {
width: 32.5%;
float: left;
background-size: cover;
background-position: center center;
position: relative;
height: 350px;
margin-bottom: 1.25%;
}
.archive-container a:nth-of-type( 3n-1 ) .archive-single.gallery {
margin-left: 1.25%;
margin-right: 1.25%;
}
@media screen and ( max-width: 1024px ) {
.archive-single.gallery {
width: 49.5%;
}
.archive-container a:nth-of-type( 3n-1 ) .archive-single.gallery {
margin-left: 0;
margin-right: 0;
}
.archive-container a:nth-of-type( 2n ) .archive-single.gallery {
margin-left: 1%;
}
}
@media screen and ( max-width: 800px ) {
.archive-single.gallery {
width: 100%;
margin-left: 0!important;
margin-right: 0!important;
}
}
.archive-single.gallery .overlay {
width: 100%;
height: 100%;
position: relative;
background-color: rgba(35, 35, 35, 0.7);
opacity: 0;
transition: 300ms;
}
.archive-single.gallery .icon {
position: absolute;
top: 50%;
left: 50%;
transform: translateX( -50% ) translateY( -50% );
font-size: 50px;
color: #fff;
width: 60px;
text-align: center;
border: 3px solid #fff;
border-radius: 50%;
padding: 15px;
}
.archive-single.gallery:hover .overlay {
opacity: 1;
}
.archive-single.gallery:hover .icon i {
animation: 1s bloop 1;
}
@keyframes bloop {
0% { transform: scale( .8 ); }
50% { transform: scale( 1.1 ); }
100% { transform: scale( 1 ); }
}