#editor .heart-slideshow-block-container .heart-slideshow {
height: 0;
min-height: 0;
}
.heart-slideshow-block-container {
position: relative;
}
.heart-slideshow .link-container::before {
content: "";
background: linear-gradient(
to top,
hsl(0, 0%, 0%) 0%,
hsla(0, 0%, 0%, 0.987) 8.1%,
hsla(0, 0%, 0%, 0.951) 15.5%,
hsla(0, 0%, 0%, 0.896) 22.5%,
hsla(0, 0%, 0%, 0.825) 29%,
hsla(0, 0%, 0%, 0.741) 35.3%,
hsla(0, 0%, 0%, 0.648) 41.2%,
hsla(0, 0%, 0%, 0.55) 47.1%,
hsla(0, 0%, 0%, 0.45) 52.9%,
hsla(0, 0%, 0%, 0.352) 58.8%,
hsla(0, 0%, 0%, 0.259) 64.7%,
hsla(0, 0%, 0%, 0.175) 71%,
hsla(0, 0%, 0%, 0.104) 77.5%,
hsla(0, 0%, 0%, 0.049) 84.5%,
hsla(0, 0%, 0%, 0.013) 91.9%,
hsla(0, 0%, 0%, 0) 100%
);
position: absolute;
top: auto;
right: 0;
bottom: -40px;
left: 0;
z-index: -1;
height: 20em;
opacity: 0.2;
}
.heart-slideshow .link-container {
position: absolute;
top: auto;
right: 0;
bottom: 40px;
left: 0;
z-index: 30;
text-align: center;
}
@media screen and (min-width: 60em) {
.heart-slideshow .link-container {
bottom: 60px;
}
.heart-slideshow .link-container::before {
bottom: -60px;
}
}
.heart-slideshow .link-container a.project-click {
display: inline-block;
opacity: 1;
margin: 0 auto;
padding: 1em 0 0;
font: var(--font-primary);
color: var(--color-sand);
font-size: 1.3em;
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
.heart-slideshow .link-container a.project-click:hover {
opacity: 0.6;
}
.heart-slideshow .heart-slide.has-project-link,
.heart-slideshow .heart-slide.has-project-link figure {
pointer-events: auto;
} #editor .heart-slideshow {
opacity: 1;
visibility: visible;
max-height: 0;
padding-top: 60%;
} .progress-container.type-dash {
--gutter: 2% !important;
} .heart-slide.start-anim[data-effect="zoom-in"] .image-holder {
-webkit-animation: zoomIn 7s forwards linear;
animation: zoomIn 7s forwards linear;
}
@-webkit-keyframes zoomIn {
to {
-webkit-transform: translate3d(0, 0, 0) scale(1.2) rotate(0.05deg);
transform: translate3d(0, 0, 0) scale(1.2) rotate(0.05deg);
}
}
@keyframes zoomIn {
to {
-webkit-transform: translate3d(0, 0, 0) scale(1.1) rotate(0.05deg);
transform: translate3d(0, 0, 0) scale(1.1) rotate(0.05deg);
}
}
@media screen and (min-width: 45em) {
@-webkit-keyframes zoomIn {
to {
-webkit-transform: translate3d(0, 0, 0) scale(1.1) rotate(0.05deg);
transform: translate3d(0, 0, 0) scale(1.1) rotate(0.05deg);
}
}
@keyframes zoomIn {
to {
-webkit-transform: translate3d(0, 0, 0) scale(1.1) rotate(0.05deg);
transform: translate3d(0, 0, 0) scale(1.1) rotate(0.05deg);
}
}
} .heart-slide.start-anim[data-effect="zoom-out"] .image-holder {
-webkit-animation: zoomOut 7s forwards linear;
animation: zoomOut 7s forwards linear;
}
@-webkit-keyframes zoomOut {
from {
-webkit-transform: translate3d(0, 0, 0) scale(1.2) rotate(0.05deg);
transform: translate3d(0, 0, 0) scale(1.2) rotate(0.05deg);
}
to {
-webkit-transform: translate3d(0, 0, 0) scale(1) rotate(0.05deg);
transform: translate3d(0, 0, 0) scale(1) rotate(0.05deg);
}
}
@keyframes zoomOut {
from {
-webkit-transform: translate3d(0, 0, 0) scale(1.2) rotate(0.05deg);
transform: translate3d(0, 0, 0) scale(1.2) rotate(0.05deg);
}
to {
-webkit-transform: translate3d(0, 0, 0) scale(1) rotate(0.05deg);
transform: translate3d(0, 0, 0) scale(1) rotate(0.05deg);
}
}
@media screen and (min-width: 45em) {
@-webkit-keyframes zoomOut {
from {
-webkit-transform: translate3d(0, 0, 0) scale(1.1) rotate(0.05deg);
transform: translate3d(0, 0, 0) scale(1.1) rotate(0.05deg);
}
to {
-webkit-transform: translate3d(0, 0, 0) scale(1) rotate(0.05deg);
transform: translate3d(0, 0, 0) scale(1) rotate(0.05deg);
}
}
@keyframes zoomOut {
from {
-webkit-transform: translate3d(0, 0, 0) scale(1.1) rotate(0.05deg);
transform: translate3d(0, 0, 0) scale(1.1) rotate(0.05deg);
}
to {
-webkit-transform: translate3d(0, 0, 0) scale(1) rotate(0.05deg);
transform: translate3d(0, 0, 0) scale(1) rotate(0.05deg);
}
}
} .heart-slide.start-anim[data-effect="pan-up"] .image-holder {
-webkit-animation: panUp 7s forwards linear;
animation: panUp 7s forwards linear;
}
@-webkit-keyframes panUp {
from {
-webkit-transform: translate3d(0, 5%, 0) scale(1.1) rotate(0.05deg);
transform: translate3d(0, 5%, 0) scale(1.1) rotate(0.05deg);
}
to {
-webkit-transform: translate3d(0, -5%, 0) scale(1.1) rotate(0.05deg);
transform: translate3d(0, -5%, 0) scale(1.1) rotate(0.05deg);
}
}
@keyframes panUp {
from {
-webkit-transform: translate3d(0, 2.5%, 0) scale(1.1) rotate(0.05deg);
transform: translate3d(0, 2.5%, 0) scale(1.1) rotate(0.05deg);
}
to {
-webkit-transform: translate3d(0, -2.5%, 0) scale(1.1) rotate(0.05deg);
transform: translate3d(0, -2.5%, 0) scale(1.1) rotate(0.05deg);
}
}
@media screen and (min-width: 45em) {
@-webkit-keyframes panUp {
from {
-webkit-transform: translate3d(0, 2.5%, 0) scale(1.05) rotate(0.05deg);
transform: translate3d(0, 2.5%, 0) scale(1.05) rotate(0.05deg);
}
to {
-webkit-transform: translate3d(0, -2.5%, 0) scale(1.05) rotate(0.05deg);
transform: translate3d(0, -2.5%, 0) scale(1.05) rotate(0.05deg);
}
}
@keyframes panUp {
from {
-webkit-transform: translate3d(0, 2.5%, 0) scale(1.05) rotate(0.05deg);
transform: translate3d(0, 2.5%, 0) scale(1.05) rotate(0.05deg);
}
to {
-webkit-transform: translate3d(0, -2.5%, 0) scale(1.05) rotate(0.05deg);
transform: translate3d(0, -2.5%, 0) scale(1.05) rotate(0.05deg);
}
}
} .heart-slide.start-anim[data-effect="pan-down"] .image-holder {
-webkit-animation: panDown 7s forwards linear;
animation: panDown 7s forwards linear;
}
@-webkit-keyframes panDown {
from {
-webkit-transform: translate3d(0, -5%, 0) scale(1.1) rotate(0.05deg);
transform: translate3d(0, -5%, 0) scale(1.1) rotate(0.05deg);
}
to {
-webkit-transform: translate3d(0, 5%, 0) scale(1.1) rotate(0.05deg);
transform: translate3d(0, 5%, 0) scale(1.1) rotate(0.05deg);
}
}
@keyframes panDown {
from {
-webkit-transform: translate3d(0, -2.5%, 0) scale(1.05) rotate(0.05deg);
transform: translate3d(0, -2.5%, 0) scale(1.05) rotate(0.05deg);
}
to {
-webkit-transform: translate3d(0, 2.5%, 0) scale(1.05) rotate(0.05deg);
transform: translate3d(0, 2.5%, 0) scale(1.05) rotate(0.05deg);
}
}
@media screen and (min-width: 45em) {
@-webkit-keyframes panDown {
from {
-webkit-transform: translate3d(0, -2.5%, 0) scale(1.05) rotate(0.05deg);
transform: translate3d(0, -2.5%, 0) scale(1.05) rotate(0.05deg);
}
to {
-webkit-transform: translate3d(0, 2.5%, 0) scale(1.05) rotate(0.05deg);
transform: translate3d(0, 2.5%, 0) scale(1.05) rotate(0.05deg);
}
}
@keyframes panDown {
from {
-webkit-transform: translate3d(0, -2.5%, 0) scale(1.05) rotate(0.05deg);
transform: translate3d(0, -2.5%, 0) scale(1.05) rotate(0.05deg);
}
to {
-webkit-transform: translate3d(0, 2.5%, 0) scale(1.05) rotate(0.05deg);
transform: translate3d(0, 2.5%, 0) scale(1.05) rotate(0.05deg);
}
}
} .heart-slide.start-anim[data-effect="pan-left"] .image-holder {
-webkit-animation: panLeft 7s forwards linear; animation: panLeft 7s forwards linear;
}
@-webkit-keyframes panLeft {
from {
-webkit-transform: translate3d(4%, 0, 0) scale(1.08) rotate(0.05deg); transform: translate3d(4%, 0, 0) scale(1.08) rotate(0.05deg);
}
to {
-webkit-transform: translate3d(-4%, 0, 0) scale(1.08) rotate(0.05deg); transform: translate3d(-4%, 0, 0) scale(1.08) rotate(0.05deg);
}
}
@keyframes panLeft {
from {
-webkit-transform: translate3d(4%, 0, 0) scale(1.08) rotate(0.05deg); transform: translate3d(4%, 0, 0) scale(1.08) rotate(0.05deg);
}
to {
-webkit-transform: translate3d(-4%, 0, 0) scale(1.08) rotate(0.05deg); transform: translate3d(-4%, 0, 0) scale(1.08) rotate(0.05deg);
}
}
@media screen and (min-width: 45em) {
@-webkit-keyframes panLeft {
from {
-webkit-transform: translate3d(2%, 0, 0) scale(1.04) rotate(0.05deg); transform: translate3d(2%, 0, 0) scale(1.04) rotate(0.05deg);
}
to {
-webkit-transform: translate3d(-2%, 0, 0) scale(1.04) rotate(0.05deg); transform: translate3d(-2%, 0, 0) scale(1.04) rotate(0.05deg);
}
}
@keyframes panLeft {
from {
-webkit-transform: translate3d(2%, 0, 0) scale(1.04) rotate(0.05deg); transform: translate3d(2%, 0, 0) scale(1.04) rotate(0.05deg);
}
to {
-webkit-transform: translate3d(-2%, 0, 0) scale(1.04) rotate(0.05deg); transform: translate3d(-2%, 0, 0) scale(1.04) rotate(0.05deg);
}
}
} .heart-slide.start-anim[data-effect="pan-right"] .image-holder {
-webkit-animation: panRight 7s forwards linear; animation: panRight 7s forwards linear;
}
@-webkit-keyframes panRight {
from {
-webkit-transform: translate3d(-4%, 0, 0) scale(1.08) rotate(0.05deg); transform: translate3d(-4%, 0, 0) scale(1.08) rotate(0.05deg);
}
to {
-webkit-transform: translate3d(4%, 0, 0) scale(1.08) rotate(0.05deg); transform: translate3d(4%, 0, 0) scale(1.08) rotate(0.05deg);
}
}
@keyframes panRight {
from {
-webkit-transform: translate3d(-4%, 0, 0) scale(1.08) rotate(0.05deg); transform: translate3d(-4%, 0, 0) scale(1.08) rotate(0.05deg);
}
to {
-webkit-transform: translate3d(4%, 0, 0) scale(1.08) rotate(0.05deg); transform: translate3d(4%, 0, 0) scale(1.08) rotate(0.05deg);
}
}
@media screen and (min-width: 45em) {
@-webkit-keyframes panRight {
from {
-webkit-transform: translate3d(-2%, 0, 0) scale(1.04) rotate(0.05deg); transform: translate3d(-2%, 0, 0) scale(1.04) rotate(0.05deg);
}
to {
-webkit-transform: translate3d(2%, 0, 0) scale(1.04) rotate(0.05deg); transform: translate3d(2%, 0, 0) scale(1.04) rotate(0.05deg);
}
}
@keyframes panRight {
from {
-webkit-transform: translate3d(-2%, 0, 0) scale(1.04) rotate(0.05deg); transform: translate3d(-2%, 0, 0) scale(1.04) rotate(0.05deg);
}
to {
-webkit-transform: translate3d(2%, 0, 0) scale(1.04) rotate(0.05deg); transform: translate3d(2%, 0, 0) scale(1.04) rotate(0.05deg);
}
}
} .heart-slideshow[style*="--anim-duration"] .heart-slide {
animation-duration: 0s;
}
.heart-slideshow[style*="--anim-duration"] .heart-slide.start-anim {
animation-duration: var(--anim-duration, 7s);
}