figure {
position: relative;
overflow: hidden;
margin: 0.8em 0;
padding: 0;
width: 100%;
height: auto;
background: #dcafaa;
text-align: center;
text-decoration: none;
}
figure img {
position: relative;
display: block;
width: 100%;
height: auto;
text-align: center;
text-decoration: none;
opacity: 0.9;
}
figure.effect-jazz {
background: -webkit-linear-gradient(-45deg, #163a30 0%,#0a241d 100%);
background: linear-gradient(-45deg, #163a30 0%,#0a241d 100%);
}
figure.effect-jazz img {
opacity: 1.0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
figure.effect-jazz:hover img {
opacity: 0.7;
-webkit-transform: scale3d(1.05,1.05,1);
transform: scale3d(1.05,1.05,1);
}

#media figure {
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
height: auto;
background: #dcafaa;
text-align: center;
cursor: pointer;
text-decoration: none;
}
#media figure img {
position: relative;
display: block;
width: 100%;
height: auto;
text-align: center;
text-decoration: none;
opacity: 0.8;
}
#media figure.effect-media {
background: -webkit-linear-gradient(-45deg, #163a30 0%,#0a241d 100%);
background: linear-gradient(-45deg, #163a30 0%,#0a241d 100%);
}
#media figure.effect-media img {
opacity: 0.9;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}
#media figure.effect-media:hover img {
opacity: 0.7;
-webkit-transform: scale3d(1.05,1.05,1);
transform: scale3d(1.05,1.05,1);
}
#media figure.effect-media figcaption {
text-align: left;
}
#media figure.effect-media figcaption > div {
position: absolute;
top: 50px;
left: 50px;
padding: 15% 0 0 5em;
margin: 0;
width: 100%;
height: 50%;
}
#media figure.effect-media h1 {
padding: 0;
margin: 0px auto;
font-size: 4.7em;
font-weight: 300;
letter-spacing: -1px;
outline: none;
text-decoration: none;
font-variant: small-caps;
}
#media figure.effect-media p {
padding: 0 0 0 5px;
margin: -15px auto;
font-size: 1.5em;
font-weight: 300;
}
#media figure.effect-media h1,
#media figure.effect-media p {
-webkit-transform: translate3d(0,40px,0);
transform: translate3d(0,40px,0);
}
#media figure.effect-media h1 {
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
}
#media figure.effect-media p {
color: rgba(255,255,255,0.8);
opacity: 0;
-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
transition: opacity 0.2s, transform 0.35s;
}
#media figure.effect-media:hover p {
opacity: 1;
}
#media figure.effect-media:hover h1,
#media figure.effect-media:hover p {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
#media figure.effect-media:hover p {
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
-webkit-transition-duration: 0.35s;
transition-duration: 0.35s;
}