/*  



	Author : Amedea

	Author URI : https://amedeapro.com

	Author : Moskva Yigit

	Author URI : http://moskvayigit.com

	Version : 0.0.3.9



	Table of Contents

	- Double Image

	- Repetition Hover

	- Hover Image

	- Tilt Image

	 

*/



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

	.-- Double Image

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



.double--image__container {

    min-height: 50vh;

    display: flex;

    flex-direction: column;

}



.double--image {

	flex: 1;

	display: grid;

	align-items: center;

	grid-template-columns: auto minmax(50%,600px);

}



.double {

	display: grid;

	aspect-ratio: 4 / 2.5;

	position: absolute;

	overflow: hidden;

	cursor: pointer;

	width: 100%;	

}



.double__img {

	grid-area: 1 / 1 / -1 / -1;

	background: url(../img/1.jpg) no-repeat 50% 50%;

	background-size: cover;

	width: 100%;

	height: 100%;

	position: relative;

}



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

	.-- Repetition Hover

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



.image {

	max-width: 30vw;

	margin: 0 1vw;

	display: grid;

	cursor: pointer;

	position: relative;

	overflow: hidden;

}



.image--style-1 {

	width: 285px;

	height: 450px;

	border-radius: 145px;

}



.image--style-2 {

	width: 320px;

	height: 320px;

	border-radius: 50%;

}



.image--style-3 {

	width: 285px;

	height: 450px;

	border-radius: 5px;

}



.image--style-4 {

	width: 285px;

	height: 450px;

	border-radius: 145px 145px 0 0;

}



.image > .image__element,

.image__wrap {

	transform-origin: inherit;

	position: relative;

	grid-area: 1 / 1 / 2 / 2;

	width: 100%;

	height: 100%;

	will-change: transform;

	border-radius: inherit;

}



.image__wrap {

	overflow: hidden;

}



.image__element {

	width: 100%;

	height: 100%;

	background-size: cover;

	background-position: 50% 50%;

}



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

	.-- Hover Image

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



.grid--hover {

    position: relative;

    margin: 0 auto;

    width: 100%;

    height: 100%;

    list-style: none;

    text-align: center;

}



.grid--hover figure {

    position: relative;

    float: left;

    overflow: hidden;

    margin: 10px 1%;

    width: 100%;

    height: 100%;

    background: #3085a3;

    text-align: center;

    cursor: pointer;

}



.grid--hover figure img {

    position: relative;

    display: block;

    min-height: 100%;

    max-width: 100%;

    opacity: 0.8;

    width: 100%;

}



.grid--hover figure figcaption {

    padding: 2em;

    color: #fff;

    text-transform: uppercase;

    font-size: 1.25em;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

}



.grid--hover figure figcaption::before,

.grid--hover figure figcaption::after {

    pointer-events: none;

}



.grid--hover figure figcaption,

.grid--hover figure figcaption > a {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}



.grid--hover figure figcaption > a {

    z-index: 1000;

    text-indent: 200%;

    white-space: nowrap;

    font-size: 0;

    opacity: 0;

}



.grid--hover figure h2 {

    word-spacing: -0.15em;

    font-weight: 300;

}



.grid--hover figure h2 span {

    font-weight: 800;

}



.grid--hover figure h2,

.grid--hover figure p {

    margin: 0;

}



.grid--hover figure p {

    letter-spacing: 1px;

    font-size: 68.5%;

}



figure.effect-lily img {

    max-width: none;

    width: -webkit-calc(100% + 50px);

    width: calc(100% + 50px);

    opacity: 0.7;

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

    text-align: left;

}



figure.effect-lily figcaption > div {

    position: absolute;

    bottom: 0;

    left: 0;

    padding: 2em;

    width: 100%;

    height: 50%;

}



figure.effect-lily h2,

figure.effect-lily p {

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

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

}



figure.effect-lily h2 {

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

    transition: transform 0.35s;

}



figure.effect-lily 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;

}



figure.effect-lily:hover img,

figure.effect-lily:hover p {

    opacity: 1;

}



figure.effect-lily:hover img,

figure.effect-lily:hover h2,

figure.effect-lily:hover p {

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

    transform: translate3d(0, 0, 0);

}



figure.effect-lily:hover p {

    -webkit-transition-delay: 0.05s;

    transition-delay: 0.05s;

    -webkit-transition-duration: 0.35s;

    transition-duration: 0.35s;

}



figure.effect-sadie figcaption::before {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: -webkit-linear-gradient(

        top,

        rgba(72, 76, 97, 0) 0%,

        rgba(72, 76, 97, 0.8) 75%

    );

    background: linear-gradient(

        to bottom,

        rgba(72, 76, 97, 0) 0%,

        rgba(72, 76, 97, 0.8) 75%

    );

    content: "";

    opacity: 0;

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

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

}



figure.effect-sadie h2 {

    position: absolute;

    top: 50%;

    left: 0;

    width: 100%;

    color: #484c61;

    -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: 2em;

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

}



figure.effect-honey {

    background: #4a3753;

}



figure.effect-honey img {

    opacity: 0.9;

    -webkit-transition: opacity 0.35s;

    transition: opacity 0.35s;

}



figure.effect-honey:hover img {

    opacity: 0.5;

}



figure.effect-honey figcaption::before {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 10px;

    background: #fff;

    content: "";

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

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

}



figure.effect-honey h2 {

    position: absolute;

    bottom: 0;

    left: 0;

    padding: 1em 1.5em;

    width: 100%;

    text-align: left;

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

    transform: translate3d(0, -30px, 0);

}



figure.effect-honey 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.effect-honey figcaption::before,

figure.effect-honey h2 {

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

    transition: transform 0.35s;

}



figure.effect-honey:hover figcaption::before,

figure.effect-honey:hover h2,

figure.effect-honey:hover h2 i {

    opacity: 1;

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

    transform: translate3d(0, 0, 0);

}



figure.effect-honey p {

    display: none;

}



figure.effect-milo {

    background: #2e5d5a;

}



figure.effect-milo img {

    max-width: none;

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

}



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

    background: #42b078;

}



figure.effect-sarah img {

    max-width: none;

    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-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: 20% 0 20px 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);

}



figure.effect-julia {

    background: #2f3238;

}



figure.effect-julia img {

    max-width: none;

    /*height: 400px;*/

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

    transition: opacity 1s, transform 1s;

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

}



figure.effect-julia figcaption {

    text-align: left;

}



figure.effect-julia h2 {

    position: relative;

    padding: 0.5em 0;

}



figure.effect-julia p {

    display: inline-block;

    margin: 0 0 0.25em;

    padding: 0.4em 1em;

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

    color: #2f3238;

    text-transform: none;

    font-weight: 500;

    font-size: 75%;

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

    transition: opacity 0.35s, transform 0.35s;

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

    transform: translate3d(-360px, 0, 0);

}



figure.effect-julia p:first-child {

    -webkit-transition-delay: 0.15s;

    transition-delay: 0.15s;

}



figure.effect-julia p:nth-of-type(2) {

    -webkit-transition-delay: 0.1s;

    transition-delay: 0.1s;

}



figure.effect-julia p:nth-of-type(3) {

    -webkit-transition-delay: 0.05s;

    transition-delay: 0.05s;

}



figure.effect-julia:hover p:first-child {

    -webkit-transition-delay: 0s;

    transition-delay: 0s;

}



figure.effect-julia:hover p:nth-of-type(2) {

    -webkit-transition-delay: 0.05s;

    transition-delay: 0.05s;

}



figure.effect-julia:hover p:nth-of-type(3) {

    -webkit-transition-delay: 0.1s;

    transition-delay: 0.1s;

}



figure.effect-julia:hover img {

    opacity: 0.4;

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

    transform: scale3d(1.1, 1.1, 1);

}



figure.effect-julia:hover p {

    opacity: 1;

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

    transform: translate3d(0, 0, 0);

}



figure.effect-apollo {

    background: #3498db;

}



figure.effect-apollo img {

    opacity: 0.95;

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

    position: absolute;

    right: 0;

    bottom: 0;

    margin: 3em;

    padding: 0 1em;

    max-width: 150px;

    border-right: 4px solid #fff;

    text-align: right;

    opacity: 0;

    -webkit-transition: opacity 0.35s;

    transition: opacity 0.35s;

}



figure.effect-apollo h2 {

    text-align: left;

}



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;

}



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

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

    transition: transform 0.35s;

}



figure.effect-jazz p {

    padding: 0.5em 2em;

    text-transform: none;

    font-size: 0.85em;

    opacity: 0;

}



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

}



figure.effect-lexi {

    background: -webkit-linear-gradient(-45deg, #000 0%, #fff 100%);

    background: linear-gradient(-45deg, #000 0%, #fff 100%);

}



figure.effect-lexi img {

    margin: -10px 0 0 -10px;

    max-width: none;

    width: -webkit-calc(100% + 10px);

    width: calc(100% + 10px);

    opacity: 0.9;

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

    transition: opacity 0.35s, transform 0.35s;

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

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

    -webkit-backface-visibility: hidden;

    backface-visibility: hidden;

}



figure.effect-lexi figcaption::before,

figure.effect-lexi p {

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

    transition: opacity 0.35s, transform 0.35s;

}



figure.effect-lexi figcaption::before {

    position: absolute;

    right: -100px;

    bottom: -100px;

    width: 300px;

    height: 300px;

    border: 2px solid #fff;

    border-radius: 50%;

    box-shadow: 0 0 0 900px rgba(255, 255, 255, 0.2);

    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.effect-lexi:hover img {

    opacity: 0.6;

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

    transform: translate3d(0, 0, 0);

}



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

    position: absolute;

    right: 0;

    bottom: 0;

    padding: 0 1.5em 1.5em 0;

    width: 140px;

    text-align: right;

    opacity: 0;

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

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

}



figure.effect-lexi:hover figcaption::before {

    opacity: 1;

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

    transform: scale3d(1, 1, 1);

}



figure.effect-lexi:hover h2,

figure.effect-lexi: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 {

    max-width: none;

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

}



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

	.-- Tilt Image

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



.tilter {

	display: block;

	position: relative;

	width: 300px;

	/*height: 415px;*/

	margin: 1.5em 2.5em;

	color: #fff;

	flex: none;

	perspective: 1000px;

}



.tilter * {

	pointer-events: none;

}



.tilter:hover,

.tilter:focus {

	color: #fff;

	outline: none;

}



/*

.tilter__figure,

.tilter__deco,

.tilter__caption {

	will-change: transform;

}*/



.tilter__figure,

.tilter__image {

	margin: 0;

	width: 100%;

	height: 100%;

	display: block;

}



.tilter__figure > * {

	transform: translateZ(0px); /* Force correct stacking order */

}



.smooth .tilter__figure,

.smooth .tilter__deco--overlay,

.smooth .tilter__deco--lines,

.smooth .tilter__deco--shine div,

.smooth .tilter__caption {

	transition: transform 0.2s ease-out;

}



.tilter__figure {

	position: relative;

}



.tilter__figure::before {

	content: '';

	position: absolute;

	width: 90%;

	height: 90%;

	top: 5%;

	left: 5%;

	box-shadow: 0 30px 20px rgba(35,32,39,0.5);

}



.tilter__deco {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	overflow: hidden;

}



.tilter__deco--overlay {

	background-image: linear-gradient(45deg, rgba(226, 60, 99, 0.4), rgba(145, 58, 252, 0.4), rgba(16, 11, 192, 0.4));

}



.tilter__deco--shine div {

	position: absolute;

	width: 200%;

	height: 200%;

	top: -50%;

	left: -50%;

	background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);

}



.tilter__deco--lines {

	fill: none;

	stroke: #fff;

	stroke-width: 1.5px;

}



.tilter__caption {

	position: absolute;

	bottom: 0;

	width: 100%;

	padding: 4em;

}



.tilter__title {

	margin: 0;

	font-weight: normal;

	font-size: 2.5em;

	line-height: 1;

}



.tilter__description {

	margin: 1em 0 0 0;

	font-size: 0.85em;

	letter-spacing: 0.15em;

}



/* Individual styles */



/* Example 1 (Default) */

.tilter--1 .tilter__figure::before {

	box-shadow: 0 30px 20px rgba(0,0,0,0.5);

}



/* Example 2 (thicker lines, overlay) */

.tilter--2,

.tilter--2:hover,

.tilter--2:focus {

	color: #2e27ad;

}



.tilter--2 .tilter__deco--overlay {

	background-image: linear-gradient(45deg, rgba(245, 239, 40, 0.6), rgba(164, 22, 169, 0.6));

}



.tilter--2 .tilter__deco--lines {

	stroke: #2e27ad;

	stroke-width: 4px;

}



/* Example 3 (no lines, overlay hard-light) */

.tilter--3 .tilter__deco--overlay {

	background-image: linear-gradient(45deg, rgba(205, 81, 220, 0.6), rgba(41, 94, 230,0.5));

}



.tilter--3 .tilter__caption {

	padding: 2em;

	text-align: right;

	text-shadow: 0.1em 0.8em 1em rgba(0,0,0,0.35);

}



/* Example 4 (caption sliding in) */

.tilter--4 .tilter__deco--overlay {

	background-image: linear-gradient(20deg, rgb(214, 100, 40), rgba(46, 39, 173, 0.58), rgba(53, 74, 165, 0.6));

}



@media screen and (min-width: 30em) {

	.tilter--4 .tilter__deco--lines {

		transform: scale3d(0.8,0.8,1);

		transition: transform 0.4s;

	}

	.tilter--4:hover .tilter__deco--lines {

		transform: scale3d(1,1,1);

	}

	.tilter--4 .tilter__title,

	.tilter--4 .tilter__description {

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

		opacity: 0;

		transition: transform 0.4s, opacity 0.4s;

	}

	.tilter--4:hover .tilter__description {

		transition-delay: 0.1s;

	}

	.tilter--4:hover .tilter__title,

	.tilter--4:hover .tilter__description {

		transform: translate3d(0,0,0);

		opacity: 1;

	}

}



/* Example 5 (line animating) */

.tilter--5 .tilter__deco--lines path {

	stroke-dasharray: 1270;

	stroke-dashoffset: 1270;

	transition: stroke-dashoffset 0.7s;

}



.tilter--5:hover .tilter__deco--lines path {

	stroke-dashoffset: 0;

}



.tilter--5 .tilter__figure::before {

	box-shadow: none;

}



/* Example 6 (different line position) */

.tilter--6,

.tilter--6:hover,

.tilter--6:focus {

	color: #2e27ad;

}



.tilter--6 .tilter__deco--overlay {

	background-image: linear-gradient(45deg, rgba(46, 39, 173, 0.2), rgba(255, 186, 59, 0.58));

}



.tilter--6 .tilter__deco--lines {

	stroke: #2e27ad;

	stroke-width: 6px;

	top: -50px;

	left: -50px;

}



.tilter--6 .tilter__caption {

	padding: 0 4em 5.5em 1em;

}



.tilter--6 .tilter__figure::before {

	box-shadow: none;

}



/* Example 7 (different line) */

.tilter--7 .tilter__deco--overlay {

	background-image: linear-gradient(45deg, rgba(93, 203, 106, 0.48), rgba(59, 239, 255, 0.58));

}



.tilter--7 .tilter__deco--lines {

	stroke-width: 20px;

	transform: scale3d(0.9,0.9,1);

	opacity: 0;

	transition: transform 0.3s, opacity 0.3s;

}



.tilter--7:hover .tilter__deco--lines {

	opacity: 1;

	transform: scale3d(1,1,1);

}



.tilter--7 .tilter__figure::before {

	box-shadow: none;

}



/* Example 8 (different line) */

.tilter--8 {

	perspective: none;

}



.tilter--8 .tilter__figure {

	transform-style: flat;

}



.tilter--8 .tilter__deco--lines {

	stroke: #9255ae;

	stroke-width: 6px;

	mix-blend-mode: color-burn;

}



.tilter--8 .tilter__caption {

	color: #9255ae;

	mix-blend-mode: color-burn;

}



.tilter--8 .tilter__figure::before {

	box-shadow: none;

}