.overlay.custom-overlay{ background-image: linear-gradient(30deg, rgba(var(--white), 0.9), rgba(var(--white), 0.7));
}
body.front #homepage-hero-slideshow figure.focus-right .hero-slide-image img { -o-object-position: 60%; object-position: 60%;
}
div.hero-huge-callout{ height: 100%; display: flex; flex-direction: column; justify-content: center; width: 100%; top: 50% !important; background-image: radial-gradient(rgba(var(--white),0.3), rgba(var(--white),0.1), rgba(var(--white),0), rgba(var(--white),0)); -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%);
}
div.hero-huge-callout:before{ animation: animIn 0.75s cubic-bezier(0.135, 0.40, 0.54, 1.000) both; -webkit-animation: animIn 0.75s cubic-bezier(0.135, 0.40, 0.54, 1.000) both; -webkit-animation-delay: 0.2s; animation-delay: 0.2s;
}
div.hero-huge-callout p.secondary-text{ max-width: 19rem;
}
@-webkit-keyframes animIn{ from { -webkit-transform: rotate(14deg) scaleY(2) scaleX(1); opacity: 0; transform: rotate(14deg) scaleY(2) scaleX(1); opacity: 0;}
}
@keyframes animIn{ from { -webkit-transform: rotate(14deg) scaleY(2) scaleX(1); transform: rotate(14deg) scaleY(2) scaleX(1); opacity: 0;}
}
@media screen and (min-width: 30em){ body.front #homepage-hero-slideshow figure.focus-right .hero-slide-image img{ o-object-position: 70%; object-position: 70%; } div.hero-huge-callout p.secondary-text{ max-width: 21rem; }
}
@media screen and (min-width: 40em){ .overlay.custom-overlay{ background-image: none; } div.hero-huge-callout{ max-width: 34rem; padding: 4rem 1rem 4rem 15rem; margin-left: -15rem; } div.hero-huge-callout::before{ content: ''; width: 100%; height: 100%; position: absolute; display: block; background-image: linear-gradient(8deg, rgba(var(--white),0.6), rgba(var(--white),0.9), rgba(var(--white),1)); left: -20px; box-shadow: 3px 3px 5px rgba(var(--black),0.2); transform: rotate(14deg) scaleY(2) scaleX(1.1); } div.hero-huge-callout p.secondary-text{ max-width: 16rem; font-family: var(--proxima); }
}
@media screen and (min-width: 54em){ div.hero-huge-callout{ max-width: 35rem; padding-right: 2rem; }
}
@media screen and (min-width: 68em){ div.hero-huge-callout{ padding: 5rem 2rem 5rem 2rem; margin-left: -2rem; max-width: 28rem; } div.hero-huge-callout .heading{ font-size: 3rem; margin-bottom: 0; } div.hero-huge-callout p.secondary-text{ font-size: 1.2rem; max-width: 22rem; } div.hero-huge-callout p.lead-in{ font-size: 1.5rem; }
}
