.homepage-hero-slideshow{ --bg-overlay-color: var(--true-black); --callout-bg-color: var(--true-black); --sr-color: 240, 226, 210;
}
#homepage-hero-slideshow [class*="sun-ray"]{ width: 110vw; left: -5vw; -webkit-animation: sunRays var(--sr-duration) both infinite; animation: sunRays var(--sr-duration) both infinite; -webkit-animation-timing-function: var(--animation-ease); animation-timing-function: var(--animation-ease); opacity: 0; --sr-duration: 15s; --sr-bg-shift: 1; --sr-angle: 315deg;
}
#homepage-hero-slideshow .sun-ray-1{ background: linear-gradient(var(--sr-angle), transparent 5%, rgba(var(--sr-color), 0.2) 10%, transparent 20%, rgba(var(--sr-color), 0.1) 35%, transparent 50%, rgba(var(--sr-color), 0.3) 60%, transparent 75%, rgba(var(--sr-color), 0.3) 85%, transparent 95%); --sr-duration: 15s; --sr-bg-shift: 2;
}
#homepage-hero-slideshow .sun-ray-2{ background: linear-gradient(var(--sr-angle), transparent 20%, rgba(var(--sr-color), 0.2) 30%, transparent 40%, rgba(var(--sr-color), 0.3) 50%, transparent 60%, rgba(var(--sr-color), 0.1) 70%, transparent 75%, rgba(var(--sr-color), 0.3) 85%, transparent 95%); animation-delay: 2s; --sr-duration: 10s;
}
#homepage-hero-slideshow .sun-ray-3{ background: linear-gradient(var(--sr-angle), transparent 10%, rgba(var(--sr-color), 0.1) 20%, transparent 30%, rgba(var(--sr-color), 0.2) 35%, transparent 45%, rgba(var(--sr-color), 0.2) 50%, transparent 60%, rgba(var(--sr-color), 0.3) 70%, transparent 85%); animation-delay: 4s; --sr-duration: 12s;
}
#homepage-hero-slideshow .sun-ray-4{ background: linear-gradient(var(--sr-angle), transparent 12%, rgba(var(--sr-color), 0.3) 18%, transparent 20%, transparent 60%, rgba(var(--sr-color), 0.2) 65%, transparent 70%, rgba(var(--sr-color), 0.3) 75%, transparent 80%); animation-delay: 1s; --sr-duration: 5s; --sr-bg-shift: 2;
}
#homepage-hero-slideshow .sun-ray-4{ background: linear-gradient(var(--sr-angle), transparent 15%, rgba(var(--sr-color), 0.2) 25%, transparent 35%, transparent 40%, rgba(var(--sr-color), 0.2) 60%, transparent 80%, transparent 85% rgba(var(--sr-color), 0.2) 90%, transparent 95%); animation-delay: 2s; --sr-duration: 20s;
}
#homepage-hero-slideshow figure.video figcaption .figure-inner{ position: absolute; max-width:none; width: 100vw;
}
figure.video figcaption .figure-inner video { position: absolute; width: 100vw; top: 0; left: 0; vertical-align: middle; display: block; height: 100%; min-height: 25rem; -o-object-fit: cover; object-fit: cover;
}
#homepage-hero-slideshow figure.video figcaption .figure-inner .section-inset{ position: relative; height: 100%;
}
#homepage-hero-slideshow .view-content .views-row.views-row-first{ overflow: hidden;
}
#homepage-hero-slideshow .overlay.custom-overlay{ background-image: linear-gradient(350deg, rgba(var(--bg-overlay-color),0.4), rgba(var(--bg-overlay-color),0.3), rgba(var(--bg-overlay-color),0.15), rgba(var(--bg-overlay-color),0)); width: 100vw; -webkit-animation: animate 3s both; animation: animate 3s both; -webkit-animation-timing-function: var(--animation-ease); animation-timing-function: var(--animation-ease); --animation-opacity: 0;
} /* Custom Grid Layout Alterations */ #homepage-hero-slideshow figure figcaption .figure-inner{ max-width: 100%; width: 100vw !important; } /* Hero Callout Alterations */ #homepage-hero-slideshow .hero-huge-callout{ display: block; top: 50% !important; width: 100%; height: 100%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } #homepage-hero-slideshow .callout-container{ text-align:center; margin: 0 auto; position: relative; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } #homepage-hero-slideshow .callout-container:before { content: ''; position: absolute; height: 200%; width: 150%; left: -30%; top: -50%; background: radial-gradient(rgba(var(--callout-bg-color),0.4), rgba(var(--callout-bg-color),0.2), rgba(var(--callout-bg-color),0), rgba(var(--callout-bg-color),0)); -webkit-animation: animate 3s both; animation: animate 3s both; -webkit-animation-timing-function: var(--animation-ease); animation-timing-function: var(--animation-ease); --animation-opacity: 0; } div.hero-huge-callout p.lead-in{ max-width: 14rem; margin-left: auto; margin-right: auto; } #homepage-hero-slideshow div.ctas a.button{ text-transform: none; font-family: var(--proximaSera); font-weight: 800; font-style: italic; letter-spacing: 0.01rem; padding: 0.4rem 1rem 0.6rem; text-shadow: 1px 1px 3px rgba(var(--black),.5); } /* Media Queries - Responsive Behavior */ @media screen and (min-width: 30em){ div.hero-huge-callout div.font-size-xxl{ font-size: 2.75rem; } div.hero-huge-callout p.lead-in{ max-width: 27rem; } } @media screen and (min-width: 54em){ #homepage-hero-slideshow .hero-huge-callout{ top: 45% !important; } #homepage-hero-slideshow .callout-container:before { background:radial-gradient(rgba(var(--callout-bg-color),0.4), rgba(var(--callout-bg-color),0.15), rgba(var(--callout-bg-color),0), rgba(var(--callout-bg-color),0)); background-position-x: -5rem; } figure.video figcaption .figure-inner video { position: absolute; height: 65vh; min-height: 32rem; } #homepage-hero-slideshow figure .figure-title{ display: block; margin-right: 5vw; -webkit-animation: animate 2s both; animation: animate 2s both; -webkit-animation-timing-function: var(--animation-ease); animation-timing-function: var(--animation-ease); -webkit-animation-delay: 2s; animation-delay: 2s; --animation-opacity: 0; } #homepage-hero-slideshow .callout-container{ margin: 0; text-align: left; max-width: none; } div.hero-huge-callout p.lead-in{ margin-left: 0; max-width: 31rem; } #homepage-hero-slideshow div.ctas a.button{ padding: 0.6rem 2rem 0.8rem; } #homepage-hero-slideshow .overlay.custom-overlay{ background-image: linear-gradient(120deg, rgba(var(--bg-overlay-color),0.2), rgba(var(--bg-overlay-color),0.1), rgba(var(--bg-overlay-color),0), rgba(var(--bg-overlay-color),0)); } } @media screen and (min-width: 68em){ #homepage-hero-slideshow .callout-container{ width: 62rem; } #homepage-hero-slideshow figure .figure-title{ margin-right: 8vw; } div.hero-huge-callout div.font-size-xxl{ font-size: 3.25rem; } div.hero-huge-callout p.lead-in{ max-width: 37rem; font-size: 1.5rem; } #homepage-hero-slideshow .cta.font-size-sm{ font-size: 1rem; } } @media screen and (min-width: 85.5em){ #homepage-hero-slideshow figure .figure-title{ margin-right: calc((100vw - 72rem) / 2); } } @media screen and (min-width: 90em){ div.hero-huge-callout div.font-size-xxl{ font-size: 3.5rem; } }
@keyframes sunRays { 0%{ opacity: 0; } 15%{ opacity: 0.4; background-position: calc(var(--sr-bg-shift) * -1rem); } 40%{ opacity: 0.6; background-position: 0rem; } 60%{ opacity: 0; background-position: calc(var(--sr-bg-shift) * 1rem); } 75%{ opacity: 0.5; background-position: 0; } 90%{ opacity: 0.3; background-position: calc(var(--sr-bg-shift) * -1rem); } 100%{ opacity: 0; background-position: 0; }
}
var heroVideoWrapper = document.querySelector ("#hero-video-wrapper");
if (heroVideoWrapper) { var v = document.createElement ("video"); v.setAttribute ("width", "100%"); v.setAttribute ("height", "auto"); v.setAttribute ("preload", "auto"); v.setAttribute ("autoplay", "autoplay"); v.setAttribute ("playsinline", ""); v.setAttribute ("loop", ""); v.setAttribute ("id", "hero-video"); v.muted = true; v.setAttribute ("poster", "/sites/default/files/public/img/home/01-hero/digipen-student-3d-environment-by-ren-cortez-poster.webp"); var s = document.createElement ("source"); s.setAttribute ("src", "/sites/default/files/public/img/home/01-hero/digipen-student-3d-environment-by-ren-cortez.mp4"); s.setAttribute ("type", "video/mp4"); v.appendChild (s); heroVideoWrapper.appendChild (v); window.setTimeout( function() { v.play ();}, "100");
}