.homepage-hero-slideshow{ --bg-overlay-color: var(--true-black); --callout-bg-color: var(--true-black);
}
#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.5), rgba(var(--bg-overlay-color),0.3), rgba(var(--bg-overlay-color),0.4), rgba(var(--bg-overlay-color),0.2)); 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: 40% !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: 200%; left: -50%; 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:first-of-type{ border: 0; background-image: linear-gradient(var(--dir), rgba(186, 17, 36, var(--alpha1)) var(--pos1), rgba(231, 27, 43, var(--alpha2)) var(--pos2), rgba(var(--red-light-tint), var(--alpha3)) var(--pos4)); } /* 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 .callout-container:before { background:radial-gradient(rgba(var(--callout-bg-color),0.6), rgba(var(--callout-bg-color),0.25), 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{ 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: 1rem 1.5rem; } #homepage-hero-slideshow .overlay.custom-overlay{ background-image: linear-gradient(120deg, rgba(var(--bg-overlay-color),0.5), rgba(var(--bg-overlay-color),0.2), rgba(var(--bg-overlay-color),0.15), 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; } }
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 ("id", "hero-video"); v.muted = true; v.setAttribute ("poster", "/sites/default/files/public/img/home/01-hero/digipen-student-3d-environment-by-juthapat-limpattanakul-poster.webp"); var s = document.createElement ("source"); s.setAttribute ("src", "/sites/default/files/public/img/home/01-hero/digipen-student-3d-environment-by-juthapat-limpattanakul.mp4"); s.setAttribute ("type", "video/mp4"); v.appendChild (s); heroVideoWrapper.appendChild (v); window.setTimeout( function() { v.play ();}, "100");
}
