.main-title{color: #2d2d2d;text-align: center;text-transform: capitalize;padding: 0.7em 0;}.content {position: relative;margin: auto;overflow: hidden;}.content .content-overlay {background: rgba(21, 34, 85, 0.7);position: absolute;height: 100%;width: 100%;left: 0;top: 0;bottom: 0;right: 0;opacity: 0;-webkit-transition: all 0.4s ease-in-out 0s;-moz-transition: all 0.4s ease-in-out 0s;transition: all 0.4s ease-in-out 0s;}.content:hover .content-overlay{opacity: 1;}.content-image{width: 100%;}.content-details {position: absolute;text-align: center;padding-left: 1em;padding-right: 1em;width: 100%;top: 50%;left: 50%;opacity: 0;-webkit-transform: translate(-50%, -50%);-moz-transform: translate(-50%, -50%);transform: translate(-50%, -50%);-webkit-transition: all 0.3s ease-in-out 0s;-moz-transition: all 0.3s ease-in-out 0s;transition: all 0.3s ease-in-out 0s;}.content:hover .content-details{top: 50%;left: 50%;opacity: 1;}.content-details h2{color: #fff;margin-bottom: 0.5em;}.content-details p{color: #fff;}.fadeIn-bottom{top: 80%;}.fadeIn-top{top: 20%;}.fadeIn-left{left: 20%;}.fadeIn-right{left: 80%;}.codrops-top {width: 100%;text-transform: uppercase;font-size: 0.69em;line-height: 2.2;}.codrops-top a {display: inline-block;padding: 0 1em;text-decoration: none;letter-spacing: 1px;}.codrops-top span.right {float: right;}.codrops-top span.right a {display: block;float: left;}.codrops-icon:before {margin: 0 4px;text-transform: none;font-weight: normal;font-style: normal;font-variant: normal;font-family: 'codropsicons';line-height: 1;speak: none;-webkit-font-smoothing: antialiased;}.codrops-icon-drop:before {content: "\e001";}.codrops-icon-prev:before {content: "\e004";}.related {padding: 6em 1em;font-size: 120%;}.related > a {border: 1px solid #4f7f90;display: inline-block;text-align: center;margin: 20px 10px;padding: 25px;}.related a:hover {border-color: #39545e;}.related a img {max-width: 100%;opacity: 0.8;}.related a:hover img, .related a:active img {opacity: 1;}.related a h3 {margin: 0;padding: 0.5em 0 0.3em;max-width: 300px;text-align: left;}@media screen and (max-width: 25em) {.codrops-header {font-size: 75%;}.codrops-icon span {display: none;}}@media screen and (max-width:992px) {.figure.effect-sadie p {padding:0.5em!important }}.h-hover.grid figure {height: 220px!important;}.grid figure {position: relative;z-index: 1;display: inline-block;overflow: hidden;margin: -0.135em;width:100%;background: #3085a3;text-align: center;cursor: pointer;}.grid figure img {position: relative;display: block;min-height: 100%;width:100% }.grid figure figcaption {padding: 2em;color: #fff;-webkit-backface-visibility: hidden;backface-visibility: hidden;}.grid figure figcaption::before, .grid figure figcaption::after {pointer-events: none;}.grid figure figcaption, .grid figure a {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}.grid figure a {z-index: 1000;text-indent: 200%;white-space: nowrap;font-size: 0;opacity: 0;}.grid figure h2, .grid figure p {margin: 0;}figure.effect-sadie figcaption::before {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: -webkit-linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(0, 0, 0, 0.72) 75%);background:linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(0, 0, 0, 0.72) 75%);content: '';-webkit-transform: translate3d(0,50%,0);transform: translate3d(0,50%,0);}figure.effect-sadie h2 {position: absolute;bottom:20px;left: 0;width: 100%;color: #fff;-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);padding:0 10px;}figure.effect-sadie figcaption::before, figure.effect-sadie p {-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;}figure.effect-sadie p {position: absolute;bottom: 0;left: 0;padding: 3em 1em;width: 100%;opacity: 0;-webkit-transform: translate3d(0,10px,0);transform: translate3d(0,10px,0);}figure.effect-sadie:hover h2 {color: #fff;-webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);transform: translate3d(0,-80%,0) translate3d(0,-60px,0);}figure.effect-sadie:hover figcaption::before , figure.effect-sadie:hover p {opacity: 1;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}figure.effect-roxy {background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);background: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%);}figure.effect-roxy img {width: -webkit-calc(100% + 60px);width: calc(100% + 60px);-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: translate3d(-50px,0,0);transform: translate3d(-50px,0,0);}figure.effect-roxy figcaption::before {position: absolute;top: 30px;right: 30px;bottom: 30px;left: 30px;border: 1px solid #fff;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.effect-roxy figcaption {padding: 3em;text-align: left;}figure.effect-roxy h2 {padding: 30% 0 10px 0;}figure.effect-roxy 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);}figure.effect-roxy:hover img {opacity: 0.7;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}figure.effect-roxy:hover figcaption::before, figure.effect-roxy:hover p {opacity: 1;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}figure.effect-bubba {background: #9e5406;}figure.effect-bubba img {opacity: 0.7;-webkit-transition: opacity 0.35s;transition: opacity 0.35s;}figure.effect-bubba:hover img {opacity: 0.4;}figure.effect-bubba figcaption::before, figure.effect-bubba figcaption::after {position: absolute;top: 30px;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.effect-bubba figcaption::before {border-top: 1px solid #fff;border-bottom: 1px solid #fff;-webkit-transform: scale(0,1);transform: scale(0,1);}figure.effect-bubba figcaption::after {border-right: 1px solid #fff;border-left: 1px solid #fff;-webkit-transform: scale(1,0);transform: scale(1,0);}figure.effect-bubba h2 {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.effect-bubba p {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.effect-bubba:hover figcaption::before, figure.effect-bubba:hover figcaption::after {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}figure.effect-bubba:hover h2, figure.effect-bubba:hover p {opacity: 1;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}figure.effect-romeo {-webkit-perspective: 1000px;perspective: 1000px;}figure.effect-romeo img {-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: translate3d(0,0,300px);transform: translate3d(0,0,300px);}figure.effect-romeo:hover img {opacity: 0.6;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}figure.effect-romeo figcaption::before, figure.effect-romeo figcaption::after {position: absolute;top: 50%;left: 50%;width: 80%;height: 1px;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.effect-romeo:hover figcaption::before {opacity: 0.5;-webkit-transform: translate3d(-50%,-50%,0) rotate(45deg);transform: translate3d(-50%,-50%,0) rotate(45deg);}figure.effect-romeo:hover figcaption::after {opacity: 0.5;-webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg);transform: translate3d(-50%,-50%,0) rotate(-45deg);}figure.effect-romeo h2, figure.effect-romeo p {position: absolute;top: 50%;left: 0;width: 100%;-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;}figure.effect-romeo h2 {-webkit-transform: translate3d(0,-50%,0) translate3d(0,-150%,0);transform: translate3d(0,-50%,0) translate3d(0,-150%,0);}figure.effect-romeo p {padding: 0.25em 2em;-webkit-transform: translate3d(0,-50%,0) translate3d(0,150%,0);transform: translate3d(0,-50%,0) translate3d(0,150%,0);}figure.effect-romeo:hover h2 {-webkit-transform: translate3d(0,-50%,0) translate3d(0,-100%,0);transform: translate3d(0,-50%,0) translate3d(0,-100%,0);}figure.effect-romeo:hover p {-webkit-transform: translate3d(0,-50%,0) translate3d(0,100%,0);transform: translate3d(0,-50%,0) translate3d(0,100%,0);}figure.effect-layla img {min-width: 100%;height: -webkit-calc(100% + 40px);height: calc(100% + 40px);}figure.effect-layla figcaption::before, figure.effect-layla figcaption::after {position: absolute;content: '';opacity: 0;}figure.effect-layla figcaption::before {top: 50px;right: 30px;bottom: 50px;left: 30px;border-top: 1px solid #fff;border-bottom: 1px solid #fff;-webkit-transform: scale(0,1);transform: scale(0,1);-webkit-transform-origin: 0 0;transform-origin: 0 0;}figure.effect-layla figcaption::after {top: 30px;right: 50px;bottom: 30px;left: 50px;border-right: 1px solid #fff;border-left: 1px solid #fff;-webkit-transform: scale(1,0);transform: scale(1,0);-webkit-transform-origin: 100% 0;transform-origin: 100% 0;}figure.effect-layla h2 {padding-top: 15%;-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;}figure.effect-layla p {padding: 0.5em 2em;text-transform: none;opacity: 0;-webkit-transform: translate3d(0,-10px,0);transform: translate3d(0,-10px,0);}figure.effect-layla img, figure.effect-layla h2 {}figure.effect-layla img, figure.effect-layla figcaption::before, figure.effect-layla figcaption::after, figure.effect-layla p {-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;}figure.effect-layla:hover img {opacity: 0.7;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}figure.effect-layla:hover figcaption::before, figure.effect-layla:hover figcaption::after {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}figure.effect-layla:hover h2, figure.effect-layla:hover p {opacity: 1;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}figure.effect-layla:hover figcaption::after, figure.effect-layla:hover h2, figure.effect-layla:hover p, figure.effect-layla:hover img {-webkit-transition-delay: 0.15s;transition-delay: 0.15s;}figure.effect-oscar {background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);}figure.effect-oscar img {opacity: 0.9;-webkit-transition: opacity 0.35s;transition: opacity 0.35s;}figure.effect-oscar figcaption {padding: 3em;background-color:rgba(39, 126, 118, 0.7);-webkit-transition: background-color 0.35s;transition: background-color 0.35s;}figure.effect-oscar figcaption::before {position: absolute;top: 30px;right: 30px;bottom: 30px;left: 30px;border: 1px solid #fff;content: '';}figure.effect-oscar h2 {margin:15% 0 10px 0;-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;-webkit-transform: translate3d(0,100%,0);transform: translate3d(0,100%,0);}figure.effect-oscar figcaption::before, figure.effect-oscar 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.effect-oscar:hover h2 {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}figure.effect-oscar:hover figcaption::before, figure.effect-oscar:hover p {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}figure.effect-oscar:hover figcaption {background-color: rgba(58,52,42,0);}figure.effect-oscar:hover img {opacity: 0.4;}figure.effect-marley figcaption {text-align: right;}figure.effect-marley h2, figure.effect-marley p {position: absolute;right: 30px;left: 30px;padding: 10px 0;}figure.effect-marley p {bottom: 30px;line-height: 1.5;-webkit-transform: translate3d(0,100%,0);transform: translate3d(0,100%,0);}figure.effect-marley h2 {top: 30px;-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;-webkit-transform: translate3d(0,20px,0);transform: translate3d(0,20px,0);}figure.effect-marley:hover h2 {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}figure.effect-marley h2::after {position: absolute;top: 100%;left: 0;width: 100%;height: 2px;background: #fff;content: '';-webkit-transform: translate3d(0,40px,0);transform: translate3d(0,40px,0);}figure.effect-marley h2::after, figure.effect-marley p {opacity: 0;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;}figure.effect-marley:hover h2::after, figure.effect-marley:hover p {opacity: 1;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}figure.effect-ruby {background-color:#031b21;}figure.effect-ruby img {opacity: 0.9;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: scale(1.15);transform: scale(1.15);}figure.effect-ruby:hover img {opacity: 0.48;-webkit-transform: scale(1);transform: scale(1);}figure.effect-ruby h2 {margin-top:45%;-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;-webkit-transform: translate3d(0,20px,0);transform: translate3d(0,20px,0);}figure.effect-ruby p {margin: 1em 0 0;padding:1em;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.effect-ruby:hover h2 {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}figure.effect-ruby:hover p {opacity: 1;-webkit-transform: translate3d(0,0,0) scale(1);transform: translate3d(0,0,0) scale(1);}figure.effect-milo {background: #2e5d5a;}figure.effect-milo img {width: -webkit-calc(100% + 60px);width: calc(100% + 60px);opacity: 1;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: translate3d(-30px,0,0) scale(1.12);transform: translate3d(-30px,0,0) scale(1.12);-webkit-backface-visibility: hidden;backface-visibility: hidden;}figure.effect-milo:hover img {opacity: 0.5;-webkit-transform: translate3d(0,0,0) scale(1);transform: translate3d(0,0,0) scale(1);}figure.effect-milo h2 {position: absolute;right: 0;bottom: 0;padding: 1em 1.2em;}figure.effect-milo p {padding: 0 10px 0 0;width: 50%;border-right: 1px solid #fff;text-align: right;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.effect-milo:hover p {opacity: 1;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}figure.effect-dexter {background: -webkit-linear-gradient(top, rgba(37,141,200,1) 0%, rgba(104,60,19,1) 100%);background: linear-gradient(to bottom, rgba(37,141,200,1) 0%,rgba(104,60,19,1) 100%);}figure.effect-dexter img {-webkit-transition: opacity 0.35s;transition: opacity 0.35s;}figure.effect-dexter:hover img {opacity: 0.4;}figure.effect-dexter figcaption::after {position: absolute;right: 20px;bottom: 30px;left: 20px;height: -webkit-calc(50% - 30px);height: calc(50% - 20px);border: 2px solid #fff;content: '';-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;-webkit-transform: translate3d(0,-100%,0);transform: translate3d(0,-100%,0);}figure.effect-dexter:hover figcaption::after {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}figure.effect-dexter figcaption {padding: 3em;text-align: right;}figure.effect-dexter p {position: absolute;right: 60px;bottom: 40px;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.effect-dexter:hover p {opacity: 1;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}figure.effect-sarah {background: #42b078;}figure.effect-sarah img {width: -webkit-calc(100% + 20px);width: calc(100% + 20px);-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);-webkit-backface-visibility: hidden;backface-visibility: hidden;}figure.effect-sarah:hover img {opacity: 0.4;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}figure.effect-sarah figcaption {text-align: left;}figure.effect-sarah h2 {position: relative;overflow: hidden;padding: 0.5em 0;}figure.effect-sarah h2::after {position: absolute;bottom: 0;left: 0;width: 100%;height: 3px;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.effect-sarah:hover h2::after {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}figure.effect-sarah 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.effect-sarah:hover p {opacity: 1;-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}figure.effect-zoe figcaption {top: auto;bottom: 0;padding: 1em;height: 3.75em;background:#fff;color:#000;-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;-webkit-transform: translate3d(0,100%,0);transform: translate3d(0,100%,0);}figure.effect-zoe h2 {float: right;}figure.effect-zoe figcaption > i {float: left;}figure.effect-zoe p {position: absolute;bottom: 8em;padding: 2em;color: #fff;text-transform: none;font-size: 90%;opacity: 0;-webkit-transition: opacity 0.35s;transition: opacity 0.35s;}figure.effect-zoe h2, figure.effect-zoe figcaption > span {-webkit-transition: -webkit-transform 0.35s;transition: transform 0.35s;-webkit-transform: translate3d(0,200%,0);transform: translate3d(0,200%,0);}figure.effect-zoe figcaption > span::before {display: inline-block;padding: 8px 10px;font-family: 'feathericons';speak: none;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.icon-eye::before {content: '\e000';}.icon-paper-clip::before {content: '\e001';}.icon-heart::before {content: '\e024';}figure.effect-zoe h2 {display: inline-block;}figure.effect-zoe:hover p {opacity: 1;}figure.effect-zoe:hover figcaption, figure.effect-zoe:hover h2, figure.effect-zoe:hover figcaption > span {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}figure.effect-zoe:hover h2 {-webkit-transition-delay: 0.05s;transition-delay: 0.05s;}figure.effect-zoe:hover figcaption > span:nth-child(4) {-webkit-transition-delay: 0.1s;transition-delay: 0.1s;}figure.effect-zoe:hover figcaption > span:nth-child(3) {-webkit-transition-delay: 0.15s;transition-delay: 0.15s;}figure.effect-zoe:hover figcaption > span:nth-child(2) {-webkit-transition-delay: 0.2s;transition-delay: 0.2s;}figure.effect-chico img {-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;-webkit-transform: scale(1.12);transform: scale(1.12);}figure.effect-chico:hover img {opacity: 0.5;-webkit-transform: scale(1);transform: scale(1);}figure.effect-chico figcaption {padding: 3em;}figure.effect-chico figcaption::before {position: absolute;top: 30px;right: 30px;bottom: 30px;left: 30px;border: 1px solid #fff;content: '';-webkit-transform: scale(1.1);transform: scale(1.1);}figure.effect-chico figcaption::before, figure.effect-chico p {opacity: 0;-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;transition: opacity 0.35s, transform 0.35s;}figure.effect-chico h2 {padding: 10% 0 10px 0;}figure.effect-chico p {margin: 0 auto;max-width: 200px;-webkit-transform: scale(1.5);transform: scale(1.5);}figure.effect-chico:hover figcaption::before, figure.effect-chico:hover p {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}@media screen and (max-width: 69.5em) {}@media screen and (max-width: 41.5em) {.grid figure {width: 100%;}}@media (min-width:992px) and (max-width:1025px) {figure.effect-sadie h2 {bottom:30px!important;}}