.otb.archive-single {
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 ) .otb.archive-single {
margin-left: 1.25%;
margin-right: 1.25%;
}
.otb.archive-single .image-overlay {
width: 100%;
height: 100%;
background-color: transparent;
text-align: center;
transition: 200ms;
transition-timing-function: linear;
position: relative;
}
.otb.archive-single .image-overlay:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
transition: 200ms;
transition-timing-function: linear;
opacity: 0;
}
.otb.archive-single .image-overlay .border {
line-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX( -50% ) translateY( -50% );
-webkit-transform: translateX( -50% ) translateY( -50% );
opacity: 0;
transition: 200ms;
border: 2px solid #fff;
border-radius: 50%;
padding: 15px;
z-index: 1;
}
.otb.archive-single .image-overlay .border i {
color: #fff;
font-size: 34px;
transition: 100ms;
}
.otb.archive-single .overlay {
position: absolute;
bottom: 0;
background-color: #fff;
padding: 10px;
width: 100%;
box-sizing: border-box;
}
.otb.archive-single .overlay h2 {
font-weight: 900;
font-size: 25px;
text-transform: uppercase;
}
.otb.archive-single .overlay p {
font-size: 13px;
}
.otb.archive-single .overlay .title-line {
margin-left: 0;
margin-right: auto;
margin-top: 10px;
margin-bottom: 15px;
width: 75px;
} .otb.archive-single:hover .image-overlay:before {
opacity: .6;
}
.otb.archive-single:hover .image-overlay .border {
opacity: 1;
}
.otb.archive-single:hover .image-overlay .border i {
animation: 1s bloop 1;
}
@keyframes bloop {
0% { transform: scale( .8 ); }
50% { transform: scale( 1.1 ); }
100% { transform: scale( 1 ); }
} @media screen and ( max-width: 1024px ) {
.otb.archive-single {
width: 45%;
}
.archive-container a:nth-of-type( 3n-1 ) .otb.archive-single {
margin-left: auto;
margin-right: auto;
}
.archive-container a:nth-of-type( 2n-1 ) .otb.archive-single {
margin-right: .5%;
margin-left: 4.5%;
}
.archive-container a:nth-of-type( 2n ) .otb.archive-single {
margin-left: .5%;
margin-right: 4.5%;
}
}
@media screen and ( max-width: 800px ) {
.archive-container a .otb.archive-single {
width: 99%!important;
margin-left: .5%!important;
margin-right: .5%!important;
}
}