.codedrops {
    max-width:1000px;
    position:relative;
    text-align:center;
    list-style: none;
}
.codedrops .figure {
    position:relative;
    overflow:hidden;
    float:left;
    text-align:center;
    cursor: pointer;
}
.codedrops .image_container.float_above {
    margin-bottom:0;
}
.codedrops figure img {
    max-width:100%;
    position:relative;
    display:block;
    -webkit-transition: opacity 1s, -webkit-transform 1s;
    transition: opacity 1s, transform 0.5s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.codedrops:hover figure img {
    opacity: 0.8;
    -webkit-transform: scale3d(1.1,1.1,1);
    transform: scale3d(1.05,1.05,1);
}
.codedrops .figure a:before,
.codedrops .figure a:hover:after {
    display:none;
}
.codedrops .figure .figcaption .caption {
    padding:1.2em;
    font-size:1.25em;
    text-transform:uppercase;
    background-color: transparent;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    width:100% !important;
}
.codedrops .figure .figcaption::before,
.codedrops .figure .figcaption::after {
    pointer-events: none;
}
.codedrops .figure,
.codedrops .figure .figcaption,
.codedrops .figure .figcaption a {
    width:100%;
    height:100%;
    top:0;
    left:0;
    position:absolute;
}
.codedrops .figure .figcaption .caption a {
    white-space:nowrap;
    font-size:0;
    text-decoration:none;
    text-indent:200%;
    z-index: 1000;
    opacity: 0;
}
.codedrops .figure h2,
.codedrops .figure h3 {
    text-decoration:none;
    word-spacing:-0.15em;
    font-weight: 300;
    font-weight:400;
}
.codedrops .figure a {
    text-decoration:none;
}
.codedrops .figure h2 span {
    font-weight: 800;
}
.codedrops .figure h2,
.codedrops .figure h3,
.codedrops .figure p {
    margin:0;
}
.codedrops .figure p {
    font-size:68.5%;
    letter-spacing:1px;
}
.figure.effectlily {
    background-color:rgba(0C6C4B,.08);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectlily:hover {
    background-color:rgba(0C6C4B,.4);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectlily .figcaption {
    text-align:left;
}
.figure.effectlily .figcaption > div {
    width:100%;
    height:50%;
    bottom:0;
    left:0;
    position:absolute;
    padding:2em;
}
.grid33 .figure.effectlily .figcaption > div {
    width:100%;
    height:70%;
    bottom:0;
    left:0;
    position:absolute;
    padding:2em;
}
.figure.effectlily h2,
.figure.effectlily h3,
.figure.effectlily h4,
.figure.effectlily p {
    -webkit-transform: translate3d(0,40px,0);
    transform: translate3d(0,40px,0);
}
.figure.effectlily h3,
.figure.effectlily h4,
.figure.effectlily h2 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}
.figure.effectlily p {
    opacity: 0;
    -webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
    transition: opacity 0.2s, transform 0.35s;
}
.figure.effectlily:hover p {
    opacity: 1;
}
.figure.effectlily:hover h2,
.figure.effectlily:hover h3,
.figure.effectlily:hover h4,
.figure.effectlily:hover p {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.figure.effectlily:hover p {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
    -webkit-transition-duration: 0.35s;
    transition-duration: 0.35s;
}

/* --------------- */
.figure.effectsadie .figcaption::before {
    width:100%;
    height:100%;
    left:0;
    top:0;
    position:absolute;
    background:-moz-linear-gradient(top,#0C6C4B 0%,#0C6C4B 75%);
    background:-webkit-linear-gradient(top,#0C6C4B 0%,#0C6C4B 75%);
    background:-o-linear-gradient(top,#0C6C4B 0%,#0C6C4B 75%);
    background:-ms-linear-gradient(top,#0C6C4B 0%,#0C6C4B 75%);
    background:linear-gradient(to bottom,#0C6C4B 0%,#0C6C4B 75%);
    -pie-background:linear-gradient(top,#0C6C4B 0%,#0C6C4B 75%);
    content: '';
    opacity: 0;
    -webkit-transform: translate3d(0,50%,0);
    transform: translate3d(0,50%,0);
}
.figure.effectsadie h2,
.figure.effectsadie h3,
.figure.effectsadie h4 {
    width:100%;
    top:50%;
    position:absolute;
    color:#484c61;
    left: 0;
    -webkit-transition: -webkit-transform 0.35s, color 0.35s;
    transition: transform 0.35s, color 0.35s;
    -webkit-transform: translate3d(0,-50%,0);
    transform: translate3d(0,-50%,0);
}
.figure.effectsadie .figcaption::before,
.figure.effectsadie p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}
.figure.effectsadie p {
    width:100%;
    bottom:0;
    left:0;
    position:absolute;
    padding:2em;
    opacity: 0;
    -webkit-transform: translate3d(0,10px,0);
    transform: translate3d(0,10px,0);
}
.figure.effectsadie:hover h2,
.figure.effectsadie:hover h3,
.figure.effectsadie:hover h4,
 {
    color:#fff;
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
    transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
}
.figure.effectsadie:hover .figcaption::before,
.figure.effectsadie:hover p {
    opacity: 0.7;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/* --------------- */
.figure.effectroxy {
    background-color: rgba(103, 103, 103, 0.2);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectroxy .figcaption::before {
    top:30px;
    position:absolute;
    border:1px solid #fff;
    right: 30px;
    bottom: 30px;
    left: 30px;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-20px,0,0);
    transform: translate3d(-20px,0,0);
}
.figure.effectroxy .figcaption {
    padding:3em;
    text-align:left;
}
.grid33 .figure.effectroxy .figcaption {
    padding:2em;
    text-align:left;
}
.figure.effectroxy h2,
.figure.effectroxy h3,
.figure.effectroxy h4 {
    padding: 30% 0 10px 0;
    transition: padding 0.35s, transform 0.35s;
}
.figure.effectroxy p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-10px,0,0);
    transform: translate3d(-10px,0,0);
}
.grid33 .figure.effectroxy:hover h2,
.grid33 .figure.effectroxy:hover h3,
.grid33 .figure.effectroxy:hover h4 {
    padding: 6% 0 5px 0;
    transition: padding 0.35s, transform 0.35s;
}
.figure.effectroxy:hover {
    background-color:rgba(0C6C4B,.6);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.figure.effectroxy:hover .figcaption::before,
.figure.effectroxy:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/* --------------- */
.figure.effectbubba {
    background-color:rgba(0C6C4B,.1);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectbubba:hover {
    background-color:rgba(0C6C4B,.5);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectbubba .figcaption::before,
.figure.effectbubba .figcaption::after {
    top:30px;
    position:absolute;
    right: 30px;
    bottom: 30px;
    left: 30px;
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}
.figure.effectbubba .figcaption::before {
    border-top:1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
}
.figure.effectbubba .figcaption::after {
    border-right:1px solid #fff;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
}
.figure.effectbubba h2,
.figure.effectbubba h3,
.figure.effectbubba h4 {
    padding-top:30%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,-20px,0);
    transform: translate3d(0,-20px,0);
}
.grid33 .figure.effectbubba h2,
.grid33 .figure.effectbubba h3,
.grid33 .figure.effectbubba h4 {
    padding-top:20%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,-20px,0);
    transform: translate3d(0,-20px,0);
}
.figure.effectbubba p {
    padding: 20px 2em;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
}
.figure.effectbubba:hover .figcaption::before,
.figure.effectbubba:hover .figcaption::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.figure.effectbubba:hover h2,
.figure.effectbubba:hover h3,
.figure.effectbubba:hover h4,
.figure.effectbubba:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,-30px,0);
}

/* --------------- */
.figure.effectromeo {
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectromeo:hover {
    background-color:rgba(0C6C4B,.15);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectromeo .figcaption::before,
.figure.effectromeo .figcaption::after {
    width:80%;
    height:1px;
    top:50%;
    position:absolute;
    left: 50%;
    background: #fff;
    content: '';
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
}
.figure.effectromeo:hover .figcaption::before {
    opacity: 0.5;
    -webkit-transform: translate3d(-50%,-50%,0) rotate(45deg);
    transform: translate3d(-50%,-50%,0) rotate(45deg);
}
.figure.effectromeo:hover .figcaption::after {
    opacity: 0.5;
    -webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg);
    transform: translate3d(-50%,-50%,0) rotate(-45deg);
}
.figure.effectromeo h2,
.figure.effectromeo h3,
.figure.effectromeo p {
    width:100%;
    top:50%;
    position:absolute;
    left: 0;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}
.figure.effectromeo h2,
.figure.effectromeo h3 {
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
    transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
}
.figure.effectromeo p {
    padding:.25em 2em;
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,150%,0);
    transform: translate3d(0,-50%,0) translate3d(0,150%,0);
}
.grid33 .figure.effectromeo p {
    padding:.25em 2em;
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,150%,0);
    transform: translate3d(0,-50%,0) translate3d(0,130%,0);
}
.figure.effectromeo:hover h2 {
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
    transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
}
.figure.effectromeo:hover p {
    -webkit-transform: translate3d(0,-50%,0) translate3d(0,100%,0);
    transform: translate3d(0,-50%,0) translate3d(0,100%,0);
}

/* --------------- */
.figure.effectlayla .figcaption {
    padding:1.5em;
}
.figure.effectlayla .figcaption::before,
.figure.effectlayla .figcaption::after {
    position:absolute;
    content: '';
    opacity: 0;
}
.figure.effectlayla .figcaption::before {
    top:50px;
    border-top:1px solid #fff;
    right: 30px;
    bottom: 50px;
    left: 30px;
    border-bottom: 1px solid #fff;
    -webkit-transform: scale(0,1);
    transform: scale(0,1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.figure.effectlayla .figcaption::after {
    top:30px;
    border-right:1px solid #fff;
    right: 50px;
    bottom: 30px;
    left: 50px;
    border-left: 1px solid #fff;
    -webkit-transform: scale(1,0);
    transform: scale(1,0);
    -webkit-transform-origin: 100% 0;
    transform-origin: 100% 0;
}
.figure.effectlayla h2,
.figure.effectlayla h3,
.figure.effectlayla h4 {
    padding-top:26%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}
.grid33 .figure.effectlayla h2,
.grid33 .figure.effectlayla h3,
.grid33 .figure.effectlayla h4 {
    padding-top:8%;
    font-size:1.5em;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}
.figure.effectlayla p {
    padding:.5em 2em;
    text-transform:none;
    opacity: 0;
    -webkit-transform: translate3d(0,-10px,0);
    transform: translate3d(0,-10px,0);
}
.figure.effectlayla h2,
.figure.effectlayla h3,
.figure.effectlayla h4 {
    -webkit-transform: translate3d(0,-30px,0);
    transform: translate3d(0,-30px,0);
}
.figure.effectlayla .figcaption::before,
.figure.effectlayla .figcaption::after,
.figure.effectlayla p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}
.figure.effectlayla:hover .figcaption::before,
.figure.effectlayla:hover .figcaption::after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.figure.effectlayla:hover h2,
.figure.effectlayla:hover h3,
.figure.effectlayla:hover h4,
.figure.effectlayla:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,-10,0);
}
.figure.effectlayla:hover .figcaption::after,
.figure.effectlayla:hover h2,
.figure.effectlayla:hover h3,
.figure.effectlayla:hover h4,
.figure.effectlayla:hover p {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}

/* --------------- */
.figure.effecthoney {
    background: #4a3753;
}
.figure.effecthoney img {
    opacity: 0.9;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}
.figure.effecthoney:hover img {
    opacity: 0.5;
}
.figure.effecthoney .figcaption::before {
    width:100%;
    height:10px;
    bottom:0;
    left:0;
    position:absolute;
    background: #fff;
    content: '';
    -webkit-transform: translate3d(0,10px,0);
    transform: translate3d(0,10px,0);
}
.figure.effecthoney h2 {
    width:100%;
    bottom:0;
    left:0;
    position:absolute;
    padding:1em 1.5em;
    text-align:left;
    -webkit-transform: translate3d(0,-30px,0);
    transform: translate3d(0,-30px,0);
}
.figure.effecthoney h2 i {
    font-style: normal;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,-30px,0);
    transform: translate3d(0,-30px,0);
}
.figure.effecthoney .figcaption::before,
.figure.effecthoney h2 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}
.figure.effecthoney:hover .figcaption::before,
.figure.effecthoney:hover h2,
.figure.effecthoney:hover h2 i {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/* --------------- */
.figure.effectoscar .figcaption {
    padding:2em;
    background-color:rgba(0C6C4B,.25);
    -webkit-transition: background-color 0.35s;
    transition: background-color 0.35s;
}
.figure.effectoscar .figcaption::before {
    top:30px;
    position:absolute;
    border:1px solid #fff;
    right: 30px;
    bottom: 30px;
    left: 30px;
    content: '';
}
.figure.effectoscar h2,
.figure.effectoscar h3,
.figure.effectoscar h4 {
    margin: 8% 0 0px 0 !important;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,-60%,0);
    transform: translate3d(0,-60%,0);
}
.figure.effectoscar .figcaption::before,
.figure.effectoscar p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(0);
    transform: scale(0);
}
.figure.effectoscar:hover h2,
.figure.effectoscar:hover h3,
.figure.effectoscar:hover h4 {
    -webkit-transform: translate3d(0,-10%,0);
    transform: translate3d(0,-30%,0);
}
.figure.effectoscar:hover .figcaption::before,
.figure.effectoscar:hover p {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.figure.effectoscar:hover .figcaption {
    background-color:rgba(255,255,255,.1);
}

/* --------------- */
.figure.effectmarley .figcaption {
    text-align:right;
}
.figure.effectmarley h2,
.figure.effectmarley p {
    right:30px;
    position:absolute;
    padding:10px 0;
    left: 30px;
}
.figure.effectmarley p {
    bottom:30px;
    line-height:1.5;
    -webkit-transform: translate3d(0,100%,0);
    transform: translate3d(0,100%,0);
}
.figure.effectmarley h2,
.figure.effectmarley h3,
.figure.effectmarley h4 {
    top:30px;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
}
.figure.effectmarley:hover h2,
.figure.effectmarley:hover h3,
.figure.effectmarley:hover h4 {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.figure.effectmarley h2::after,
.figure.effectmarley h3::after,
.figure.effectmarley h4::after {
    width:100%;
    height:4px;
    top:100%;
    position:absolute;
    left: 0;
    background: #fff;
    content: '';
    -webkit-transform: translate3d(0,40px,0);
    transform: translate3d(0,40px,0);
}
.figure.effectmarley h3::after,
.figure.effectmarley h4::after,
.figure.effectmarley h2::after,
.figure.effectmarley p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}
.figure.effectmarley h3::after,
.figure.effectmarley h4::after,
.figure.effectmarley:hover h2::after,
.figure.effectmarley:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/* --------------- */
.figure.effectruby {
    background-color:rgba(0C6C4B,.1);
}
.figure.effectruby {
    opacity: 1;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: background-color 0.35s, transform 0.35s;
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
}
.figure.effectruby:hover {
    background-color:rgba(0C6C4B,.4);
    -webkit-transform: scale(1);
    transform: scale(1);
}
.figure.effectruby h2,
.figure.effectruby h3,
.figure.effectruby h4 {
    margin-top:7%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,10px,0);
    transform: translate3d(0,10px,0);
}
.figure.effectruby p {
    margin:1em 0 0;
    padding:1.3em;
    border:1px solid #fff;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,20px,0) scale(1.1);
    transform: translate3d(0,20px,0) scale(1.1);
}
.figure.effectruby:hover h2,
.figure.effectruby:hover h3,
.figure.effectruby:hover h2 {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.figure.effectruby:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0) scale(1);
    transform: translate3d(0,0,0) scale(1);
}

/* --------------- */
.figure.effectmilo {
    background-color: rgba(103, 103, 103, 0.1);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectmilo:hover {
    background-color:rgba(0C6C4B,.6);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectmilo h2 {
    right:0;
    bottom:0;
    position:absolute;
    padding:1em 1.2em;
}
.figure.effectmilo p {
    width:50%;
    padding:0 10px 0 0;
    text-align:right;
    border-right:1px solid #fff;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-40px,0,0);
    transform: translate3d(-40px,0,0);
}
.figure.effectmilo:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/* --------------- */
.figure.effectdexter {
    background-color:rgba(255,255,255,.1);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectdexter:hover {
    background-color:rgba(0C6C4B,.4);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectdexter .figcaption::after {
    right:30px;
    position:absolute;
    border:7px solid #fff;
    bottom: 30px;
    left: 30px;
    height: -webkit-calc(45% - 30px);
    height: calc(45% - 30px);
    content: '';
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,-100%,0);
    transform: translate3d(0,-100%,0);
}
.figure.effectdexter:hover .figcaption::after {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.figure.effectdexter .figcaption {
    padding:2em;
    text-align:left;
}
.grid33 .figure.effectdexter .figcaption {
    padding:1.4em 2em;
    text-align:left;
}
.figure.effectdexter p {
    right:60px;
    position:absolute;
    bottom: 60px;
    left: 60px;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,-100px,0);
    transform: translate3d(0,-100px,0);
}
.figure.effectdexter:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/* --------------- */
.figure.effectsarah {
    background-color:rgba(207,207,207,.15);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectsarah:hover {
    background-color:rgba(0C6C4B,.5);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectsarah .figcaption {
    text-align:left;
}
.figure.effectsarah h2,
.figure.effectsarah h3,
.figure.effectsarah h4 {
    position:relative;
    overflow:hidden;
    padding:.5em 0;
}
.figure.effectsarah h2::after,
.figure.effectsarah h3::after,
.figure.effectsarah h4::after {
    width:100%;
    height:3px;
    bottom:0;
    left:0;
    position:absolute;
    background: #fff;
    content: '';
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(-100%,0,0);
    transform: translate3d(-100%,0,0);
}
.figure.effectsarah:hover h2::after,
.figure.effectsarah:hover h3::after,
.figure.effectsarah:hover h4::after {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.figure.effectsarah p {
    padding:1em 0;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(100%,0,0);
    transform: translate3d(100%,0,0);
}
.figure.effectsarah:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/* --------------- */
.figure.effectchico {
    background-color:rgba(255,255,255,.1);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectchico:hover {
    background-color:rgba(0C6C4B,.6);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectchico .figcaption {
    padding:3em;
}
.grid33 .figure.effectchico .figcaption {
    padding:2em;
}
.figure.effectchico .figcaption::before {
    top:30px;
    position:absolute;
    border:1px solid #fff;
    right: 30px;
    bottom: 30px;
    left: 30px;
    content: '';
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.grid33 .figure.effectchico .figcaption::before {
    bottom:20px;
    left:20px;
    right:20px;
    top:20px;
    position:absolute;
    border:1px solid #fff;
    content: '';
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.figure.effectchico .figcaption::before,
.figure.effectchico p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}
.figure.effectchico h2 {
    padding: 16% 0 20px 0;
}
.grid33 .figure.effectchico h2 {
    padding: 10% 0 10px 0;
}
.figure.effectchico p {
    max-width:250px;
    margin:0 auto;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}
.figure.effectchico:hover .figcaption::before,
.figure.effectchico:hover p {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

/* --------------- */
.figure.effectjulia {
    background-color:rgba(255,255,255,.02);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectjulia:hover {
    background-color:rgba(0C6C4B,.1);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectjulia .figcaption {
    text-align:left;
}
.figure.effectjulia h2,
.figure.effectjulia h3,
.figure.effectjulia h4 {
    position:relative;
    padding:.5em 0;
}
.figure.effectjulia p {
    display:inline-block;
    margin:0 0 .25em;
    padding:.4em 1em;
    font-size:75%;
    color:#2f3238;
    text-transform:none;
    background: rgba(255,255,255,0.9);
    font-weight: 500;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-500px,0,0);
    transform: translate3d(-500px,0,0);
}
.figure.effectjulia p:first-child {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}
.figure.effectjulia p:nth-of-type(2) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
.figure.effectjulia p:nth-of-type(3) {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}
.figure.effectjulia:hover p:first-child {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}
.figure.effectjulia:hover p:nth-of-type(2) {
    -webkit-transition-delay: 0.05s;
    transition-delay: 0.05s;
}
.figure.effectjulia:hover p:nth-of-type(3) {
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}
.figure.effectjulia:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/* ----------------- */
.figure.effectgoliath {
    background-color: rgba(103, 103, 103, 0.1);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectgoliath h2,
.figure.effectgoliath h3 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}
.figure.effectgoliath h2,
.figure.effectgoliath h3,
.figure.effectgoliath p {
    bottom:0;
    left:0;
    position:absolute;
    padding:30px;
}
.figure.effectgoliath p {
    font-size:90%;
    text-transform:none;
    background: #373a3e;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,50px,0);
    transform: translate3d(0,50px,0);
}
.figure.effectgoliath:hover h2,
.figure.effectgoliath:hover h3 {
    -webkit-transform: translate3d(0,-100px,0);
    transform: translate3d(0,-100px,0);
}
.figure.effectgoliath:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/* ----------------- */
.figure.effectselena {
    background-color: rgba(103, 103, 103, 0.1);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectselena:hover {
    background-color: rgba(103, 103, 103, 0.3);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectselena h2,
.figure.effectselena h3,
.figure.effectselena h4 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,20px,0);
    transform: translate3d(0,20px,0);
}
.figure.effectselena p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: perspective(1000px) rotate3d(1,0,0,90deg);
    transform: perspective(1000px) rotate3d(1,0,0,90deg);
    -webkit-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}
.figure.effectselena:hover h2,
.figure.effectselena:hover h3,
.figure.effectselena:hover h4 {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.figure.effectselena:hover p {
    opacity: 1;
    -webkit-transform: perspective(1000px) rotate3d(1,0,0,0);
    transform: perspective(1000px) rotate3d(1,0,0,0);
}

/* ----------------- */
.figure.effectapollo {
    background: rgba(49, 52, 56, 0.1);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectapollo:hover {
    background-color:rgba(0C6C4B,.2);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectapollo .figcaption::before {
    width:100%;
    height:100%;
    left:0;
    top:0;
    position:absolute;
    background-color:rgba(0C6C4B,.5);
    content: '';
    -webkit-transition: -webkit-transform 0.6s;
    transition: transform 0.6s;
    -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
    transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
}
.figure.effectapollo p {
    max-width:150px;
    right:0;
    bottom:0;
    position:absolute;
    margin:3em;
    padding:0 1em;
    text-align:right;
    border-right:4px solid #fff;
    opacity: 0;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}
.figure.effectapollo h2,
.figure.effectapollo h3 {
    text-align:left;
}
.figure.effectapollo:hover .figcaption::before {
    -webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
    transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
}
.figure.effectapollo:hover p {
    opacity: 1;
    -webkit-transition-delay: 0.1s;
    transition-delay: 0.1s;
}

/* ----------------- */
.figure.effectsteve {
    overflow:visible;
    z-index: auto;
    background: rgba(49, 52, 56, 0.1);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectsteve:before,
.figure.effectsteve h3:before,
.figure.effectsteve h2:before {
    width:100%;
    height:100%;
    top:0;
    left:0;
    position:absolute;
    z-index: -1;
    background: #000;
    content: '';
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}
.figure.effectsteve:before {
    box-shadow: 0 3px 30px rgba(0,0,0,0.8);
    opacity: 0;
}
.figure.effectsteve .figcaption {
    z-index: 1;
}
.figure.effectsteve h2,
.figure.effectsteve h3,
.figure.effectsteve p {
    color:#2d434e;
    background: #fff;
}
.figure.effectsteve h2,
.figure.effectsteve h3 {
    position:relative;
    margin-top:1em;
    padding:.25em;
}
.figure.effectsteve h2:before,
.figure.effectsteve h3:before {
    box-shadow: 0 1px 5px rgba(0,0,0,0.5);
}
.figure.effectsteve p {
    margin-top:1em;
    padding:.5em;
    font-weight: 800;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale3d(0.9,0.9,1);
    transform: scale3d(0.9,0.9,1);
}
.figure.effectsteve:hover:before {
    opacity: 1;
}
.figure.effectsteve:hover h2:before,
.figure.effectsteve:hover h3:before {
    opacity: 0;
}
.figure.effectsteve:hover p {
    opacity: 1;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}

/* ----------------- */
.figure.effectmoses {
    background: rgba(49, 52, 56, 0.1);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectmoses:hover {
    background: rgba(49, 52, 56, 0.6);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectmoses h2,
.figure.effectmoses h3,
.figure.effectmoses p {
    width:50%;
    height:50%;
    padding:20px;
    border:2px solid #fff;
}
.grid33 .figure.effectmoses h2,
.grid33 .figure.effectmoses h3,
.grid33 .figure.effectmoses p {
    width:50%;
    height:50%;
    padding:10px;
    border:2px solid #fff;
}
.figure.effectmoses h2,
.figure.effectmoses h3 {
    width:50%;
    height:50%;
    padding:20px;
    text-align:left;
    background: rgba(49, 52, 56, 0.30);
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(10px,10px,0);
    transform: translate3d(10px,10px,0);
}
.figure.effectmoses p {
    float:right;
    padding:20px;
    text-align:right;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
}
.figure.effectmoses:hover h2,
.figure.effectmoses:hover h3 {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.figure.effectmoses:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/* --------------- */
.figure.effectjazz {
    background: rgba(49, 52, 56, 0.1);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectjazz:hover {
    background: rgba(49, 52, 56, 0.4);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectjazz .figcaption::after,
.figure.effectjazz p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}
.figure.effectjazz .figcaption::after {
    width:100%;
    height:100%;
    top:0;
    left:0;
    position:absolute;
    border-top:1px solid #fff;
    border-bottom: 1px solid #fff;
    content: '';
    opacity: 0;
    -webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
    transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.figure.effectjazz h2,
.figure.effectjazz h3,
.figure.effectjazz p {
    opacity: 1;
    -webkit-transform: scale3d(0.8,0.8,1);
    transform: scale3d(0.8,0.8,1);
}
.figure.effectjazz h2,
.figure.effectjazz h3 {
    padding-top:26%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}
.grid33 .figure.effectjazz h2,
.grid33 .figure.effectjazz h3 {
    padding-top:16%;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}
.figure.effectjazz p {
    padding:.5em 2em;
    font-size:.85em;
    text-transform:none;
    opacity: 0;
}
.figure.effectjazz:hover .figcaption::after {
    opacity: 1;
    -webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
    transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
}
.figure.effectjazz:hover h2,
.figure.effectjazz:hover h3,
.figure.effectjazz:hover p {
    opacity: 1;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}

/* --------------- */
.figure.effectming {
    background: rgba(49, 52, 56, 0.1);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectming:hover {
    background-color:rgba(0C6C4B,.3);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectming img {
    opacity: 0.9;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}
.figure.effectming .figcaption::before {
    top:30px;
    position:absolute;
    border:2px solid #fff;
    right: 30px;
    bottom: 30px;
    left: 30px;
    box-shadow: 0 0 0 30px rgba(255,255,255,0.4);
    content: '';
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale3d(1.4,1.4,1);
    transform: scale3d(1.4,1.4,1);
}
.figure.effectming h2 {
    margin: 11% 0 10px 0;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}
.grid33 .figure.effectming h2 {
    margin: 8% 0 10px 0;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
}
.figure.effectming p {
    padding:1em;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}
.figure.effectming p {
    padding:.7em;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
}
.figure.effectming:hover h2 {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}
.figure.effectming:hover .figcaption::before,
.figure.effectming:hover p {
    opacity: 1;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}
.figure.effectming:hover .figcaption {
    background-color: rgba(58,52,42,0);
}

/* --------------- */
.figure.effectlexi {
    background: rgba(49, 52, 56, 0.1);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectlexi:hover {
    background-color:rgba(0C6C4B,.4);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectlexi .figcaption::before,
.figure.effectlexi p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}
.figure.effectlexi .figcaption::before {
    width:300px;
    height:300px;
    right:-100px;
    position:absolute;
    border:2px solid #fff;
    border-radius:50%;
    bottom: -100px;
    box-shadow: 0 0 0 900px rgba(255,255,255,0.5);
    content: '';
    opacity: 0;
    -webkit-transform: scale3d(0.5,0.5,1);
    transform: scale3d(0.5,0.5,1);
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.figure.effectlexi h2 {
    text-align:left;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(5px,5px,0);
    transform: translate3d(5px,5px,0);
}
.figure.effectlexi p {
    width:140px;
    right:0;
    bottom:0;
    position:absolute;
    padding:0 1.5em 1.5em 0;
    text-align:right;
    opacity: 0;
    -webkit-transform: translate3d(20px,20px,0);
    transform: translate3d(20px,20px,0);
}
.figure.effectlexi:hover .figcaption::before {
    opacity: 1;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}
.figure.effectlexi:hover h2,
.figure.effectlexi:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/* --------------- */
.figure.effectduke {
    background: rgba(49, 52, 56, 0.1);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectduke:hover {
    background: rgba(49, 52, 56, 0.6);
    transition: background-color 0.35s, transform 0.35s;
}
.figure.effectduke p {
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}
.figure.effectduke h2 {
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: scale3d(0.8,0.8,1);
    transform: scale3d(0.8,0.8,1);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
}
.figure.effectduke p {
    bottom:0;
    left:0;
    position:absolute;
    margin:20px;
    padding:30px;
    border:2px solid #fff;
    font-size:90%;
    text-transform:none;
    opacity: 0;
    -webkit-transform: scale3d(0.8,0.8,1);
    transform: scale3d(0.8,0.8,1);
    -webkit-transform-origin: 50% -100%;
    transform-origin: 50% -100%;
}
.grid33 .figure.effectduke p {
    bottom:0;
    left:0;
    position:absolute;
    margin:20px;
    padding:20px;
    border:2px solid #fff;
    font-size:90%;
    text-transform:none;
    opacity: 0;
    -webkit-transform: scale3d(0.8,0.8,1);
    transform: scale3d(0.8,0.8,1);
    -webkit-transform-origin: 50% -100%;
    transform-origin: 50% -100%;
}
.figure.effectduke:hover h2,
.figure.effectduke:hover p {
    opacity: 1;
    -webkit-transform: scale3d(1,1,1);
    transform: scale3d(1,1,1);
}