/*---------------*/

/***** Sadie *****/

/*---------------*/



figure.effect-sadie figcaption::before {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: -webkit-linear-gradient(top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.8) 75%);

    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.4) 75%);

    content: '';

    opacity: 0;

    -webkit-transform: translate3d(0,50%,0);

    transform: translate3d(0,50%,0);

}



figure.effect-sadie h2 {

    position: absolute;

    top: 31%;

    left: 0;

    width: 100%;

    color: #ffffff;

    -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.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: 0px 10px;

    width: 100%;

    opacity: 0;

    -webkit-transform: translate3d(0,10px,0);

    transform: translate3d(0,10px,0);

    font-size: 13px;

    color: #fff;

    top: 24%;

    font-family: 'Open Sans', sans-serif;

}





figure.effect-sadie:hover h2 {

    color: #fff;

    -webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);

    transform: translate3d(0,-50%,0) translate3d(0,-40px,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);

}



/*---------------*/

/***** Oscar *****/

/*---------------*/



figure.effect-oscar {

    background: -webkit-linear-gradient(45deg, #000000 0%, #333333 40%, #111111 100%);

    background: linear-gradient(45deg, #000000 0%,#333333 40%,#111111 100%);

}



figure.effect-oscar img {

    opacity: 0.9;

    -webkit-transition: opacity 0.65s;

    transition: opacity 0.65s;

}



figure.effect-oscar figcaption {

    -webkit-transition: background-color 0.35s;

    transition: background-color 0.35s;

    padding: 5px 20px;

}



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-top: 10%;

    -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);

    font-family: 'Open Sans', sans-serif;

    font-size: 13px;

    color: #ffffff;

	padding: 0 10px;

}



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(0,0,0,0.8);

}



figure.effect-oscar:hover img {

    opacity: 0.4;

}



/*---------------*/

/***** Marley *****/

/*---------------*/



figure.effect-marley figcaption {

    text-align: center;

}



figure.effect-marley h2,

figure.effect-marley p {

    position: absolute;

    right: 30px;

    left: 30px;

    padding: 10px 0;

}

figure.effect-marley p {

    top:40%;

    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: 4px;

    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;

    font-size: 13px;

    color: #ffffff;

    font-family: 'Open Sans', sans-serif;

}



figure.effect-marley:hover h2::after,

figure.effect-marley:hover p {

    opacity: 1;

    -webkit-transform: translate3d(0,0,0);

    transform: translate3d(0,0,0);

}



/*---------------*/

/***** Bubba *****/

/*---------------*/



figure.effect-bubba {

    background: #000000;

}



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: 12%;

    -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 {

    padding: 0 30px;

    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);

    color: #ffffff;

    font-size: 13px;

    font-family: 'Open Sans', sans-serif;

    font-weight: lighter;

}

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);

}





/*---------------*/

/***** Romeo *****/

/*---------------*/



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

{

    position: absolute;

    top: 50%;

    left: 0;

    width: 100%;

    -webkit-transition: -webkit-transform 0.35s;

    transition: transform 0.35s;

}

figure.effect-romeo p{

    position: absolute;

    top: 36%;

    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 {

    color: #ffffff;

    font-size: 15px;

    font-family: 'Open Sans', sans-serif;

    padding: 0 20px;

    -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);

}



/*---------------*/

/***** Dexter *****/

/*---------------*/



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: 30px;

    bottom: 30px;

    left: 30px;

    height: -webkit-calc(50% - 30px);

    height: calc(50% - 30px);

    border: 7px 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: left;

}



figure.effect-dexter p {

    color: #ffffff;

    font-size: 15px;

    font-family: 'Open Sans', sans-serif;

    position: absolute;

    right: 60px;

    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.effect-dexter:hover p {

    opacity: 1;

    -webkit-transform: translate3d(0,0,0);

    transform: translate3d(0,0,0);

}



/*---------------*/

/***** Chico *****/

/*---------------*/



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 p {

    margin: 0 auto;

    -webkit-transform: scale(1.5);

    transform: scale(1.5);

    color: #ffffff;

    font-size: 13px;

    font-family: 'Open Sans', sans-serif;

}



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: 50em) {

    .content {

        padding: 0 10px;

        text-align: center;

    }

    .grid figure {

        display: inline-block;

        float: none;

        margin: 10px auto;

        width: 100%;

    }

}

/*-----------------*/

/***** Apollo *****/

/*-----------------*/



figure.effect-apollo {

    background: #000000;

}



figure.effect-apollo img {

    opacity: 0.6;

    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

    transition: opacity 0.35s, transform 0.35s;

    -webkit-transform: scale3d(1.05,1.05,1);

    transform: scale3d(1.05,1.05,1);

}



figure.effect-apollo figcaption::before {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(255,255,255,0.1);

    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.effect-apollo p {

    color: #ffffff;

    font-size: 13px;

    font-family: 'Open Sans', sans-serif;

	font-weight: lighter;

    position: absolute;

    right: 0;

    margin: 0;

    padding: 0 30px;

    text-align: center;

    opacity: 0;

    -webkit-transition: opacity 0.35s;

    transition: opacity 0.35s;

}



figure.effect-apollo h2 {

   margin-top: 40px;

}



figure.effect-apollo:hover img {

    opacity: 0.6;

    -webkit-transform: scale3d(1,1,1);

    transform: scale3d(1,1,1);

}



figure.effect-apollo: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.effect-apollo:hover p {

    opacity: 1;

    -webkit-transition-delay: 0.1s;

    transition-delay: 0.1s;

}

/*---------------*/

/***** Jazz *****/

/*---------------*/



figure.effect-jazz {

   /* background: -webkit-linear-gradient(-45deg, #f3cf3f 0%,#f33f58 100%);

    background: linear-gradient(-45deg, #f3cf3f 0%,#f33f58 100%);*/

}



figure.effect-jazz img {

    opacity: 0.9;

}



figure.effect-jazz figcaption::after,

figure.effect-jazz img,

figure.effect-jazz p {

    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;

    transition: opacity 0.35s, transform 0.35s;

}



figure.effect-jazz figcaption::after {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    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.effect-jazz h2,

figure.effect-jazz p {

    opacity: 1;

    -webkit-transform: scale3d(0.8,0.8,1);

    transform: scale3d(0.8,0.8,1);

}



figure.effect-jazz h2 {

    padding-top: 12%;

    -webkit-transition: -webkit-transform 0.35s;

    transition: transform 0.35s;

}



figure.effect-jazz p {

    padding: 0.5em 2em;

    text-transform: none;

    opacity: 0;

    color: #ffffff;

    font-size: 15px;

    font-family: 'Open Sans', sans-serif;

}



figure.effect-jazz:hover img {

    opacity: 0.7;

    -webkit-transform: scale3d(1.05,1.05,1);

    transform: scale3d(1.05,1.05,1);

}



figure.effect-jazz: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.effect-jazz:hover h2,

figure.effect-jazz:hover p {

    opacity: 1;

    -webkit-transform: scale3d(1,1,1);

    transform: scale3d(1,1,1);

}