body.front #homepage-hero-slideshow figure.video figcaption .figure-inner{ position: absolute; max-width:none; width: 100vw;
}
figure.video figcaption .figure-inner video { position: absolute; top: 0; left: 0; width: 100vw; vertical-align: middle; display: block; height: 65vh; min-height: 28rem; -o-object-fit: cover; object-fit: cover;
}
body.front #homepage-hero-slideshow figure.video figcaption .figure-inner .section-inset{ display: block; position: relative; height: 100%;
}
.overlay.custom-overlay{ background-image: linear-gradient(120deg, rgba(35,31,32,0.2), rgba(35,31,32,0.6)); width: 100vw;
}
body.front #homepage-hero-slideshow div.ctas a{ padding: 1.2rem 1.6rem; text-shadow: 1px 1px 1px rgba(32,19,10,0.4);
}
/* Custom Grid Layout Alterations */
body.front #homepage-hero-slideshow .view-content{ height: 64vh; min-height: 32rem;
}
body.front #homepage-hero-slideshow .view-content .views-row{ height: 64vh; min-height: 32rem;
}
body.front #homepage-hero-slideshow figure .hero-slide-image img{ height: 40vh; min-height: 20rem;
}
body.front #homepage-hero-slideshow figure figcaption .figure-inner{ max-width: 100%; width: 100vw !important;
}
.similar-articles{ bottom: -60%; display: flex; flex-direction: column; position: absolute; height: 60%; right: 0; width: 100%;
}
.similar-articles .article-aside{ display: flex; position: relative; height: 33.33%; overflow: hidden; width: 100%; border-top: 1px solid #D1D3D5; background-image: linear-gradient(to right, #fafafa, #f1f3f5); -webkit-transition: background-color 300ms ease; -moz-transition: background-color 300ms ease; -ms-transition: background-color 300ms ease; -o-transition: background-color 300ms ease; transition: background-color 300ms ease;
}
.similar-articles .article-aside .article-overlay{ display: block; height: 100%; width: 100%; z-index: 1; background-color: transparent; -webkit-transition: height 300ms ease, background-color 300ms ease; -moz-transition: height 300ms ease, background-color 300ms ease; -ms-transition: height 300ms ease, background-color 300ms ease; -o-transition: height 300ms ease, background-color 300ms ease; transition: height 300ms ease, background-color 300ms ease;
}
.similar-articles .article-aside img{ max-width: 3.25rem;
}
/* Article Content and Image Positioning */
.similar-articles .article-content { align-self: center; display: flex; position: absolute; width: 100%; z-index: 2; position: absolute;
}
.similar-articles .article-content div{ -webkit-transition: opacity 220ms ease, color 300ms ease; -moz-transition: opacity 220ms ease, color 300ms ease; -ms-transition: opacity 220ms ease, color 300ms ease; -o-transition: opacity 220ms ease, color 300ms ease; transition: opacity 220ms ease, color 300ms ease;
}
.similar-articles .article-content .content-reveal{ display: none;
}
/* Hover and Focus Effects */
.similar-articles .article-aside:nth-of-type(1):hover .article-overlay, .similar-articles .article-aside:nth-of-type(1):focus .article-overlay{ background-color:rgba(201,36,66,1);
}
.similar-articles .article-aside:nth-of-type(2):hover .article-overlay, .similar-articles .article-aside:nth-of-type(2):focus .article-overlay{ background-color:rgba(70,70,109,1);
}
.similar-articles .article-aside:nth-of-type(3):hover .article-overlay, .similar-articles .article-aside:nth-of-type(3):focus .article-overlay{ background-color:rgba(238,166,32,1);
}
.similar-articles .article-aside:hover span, .similar-articles .article-aside:focus span, .similar-articles .article-aside:hover p, .similar-articles .article-aside:focus p{ color: #ffffff;
}
/* Hero Callout Alterations */
body.front #homepage-hero-slideshow .hero-huge-callout{ display: block; margin: 0 auto; top: 50% !important; width: 100%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%);
}
/* Content Animations */
div.hero-huge-callout div.heading-intro{ animation: animDown 1s cubic-bezier(0.25,0.1,0.25,1) both; -webkit-animation: animDown 1s cubic-bezier(0.25,0.1,0.25,1) both; -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } div.hero-huge-callout div.heading{ animation: animDown 1s cubic-bezier(0.25,0.1,0.25,1) both; -webkit-animation: animDown 1s cubic-bezier(0.25,0.1,0.25,1) both; -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } div.hero-huge-callout p.lead-in{ max-width: 32rem; margin-right: auto; margin-left: auto; animation: animDown 1s cubic-bezier(0.25,0.1,0.25,1) both; -webkit-animation: animDown 1s cubic-bezier(0.25,0.1,0.25,1) both; -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } div.hero-huge-callout div.ctas{ animation: animDown 1s cubic-bezier(0.25,0.1,0.25,1) both; -webkit-animation: animDown 1s cubic-bezier(0.25,0.1,0.25,1) both; -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } @-webkit-keyframes animDown{ from { -webkit-transform: translate3d(0,-1rem,0); opacity: 0; transform: translate3d(0,-1rem,0); opacity: 0;} } @keyframes animDown{ from { -webkit-transform: translate3d(0,-1rem,0); transform: translate3d(0,-1rem,0); opacity: 0;} } @-webkit-keyframes animRight{ from { -webkit-transform: translate3d(1rem,0,0); opacity: 0; transform: translate3d(1rem,0,0); opacity: 0;} } @keyframes animRight{ from { -webkit-transform: translate3d(1rem,0,0); transform: translate3d(1rem,0,0); opacity: 0;} } @-webkit-keyframes animLeft{ from { -webkit-transform: translate3d(-2rem,0,0); opacity: 0; transform: translate3d(-2rem,0,0); opacity: 0;} } @keyframes animLeft{ from { -webkit-transform: translate3d(-2rem,0,0); transform: translate3d(-2rem,0,0); opacity: 0;} }
/* Media Queries - Responsive Behavior */
@media screen and (min-width: 30em){ .overlay.custom-overlay{ -webkit-backdrop-filter: none; backdrop-filter: none; } body.front #homepage-hero-slideshow .hero-huge-callout:before { content: ''; position: absolute; height: 120%; width: 100%; left: -8rem; top: -3rem; background: radial-gradient(rgba(218,85,48,0.3), rgba(218,85,48,0.1), rgba(218,85,48,0), rgba(218,85,48,0)); }
}
@media screen and (min-width: 40em){ body.front #homepage-hero-slideshow .view-content{ height: 52vh; min-height: 32rem; } body.front #homepage-hero-slideshow .view-content .views-row{ height: 52vh; min-height: 32rem; } body.front #homepage-hero-slideshow figure .hero-slide-image img{ min-height: 25rem; } body.front #homepage-hero-slideshow .similar-articles{ width: 100%; height: 30%; bottom: -30%; flex-direction: row; } .similar-articles .article-aside{ width: 33.33%; height: 100%; border-left: 1px solid #D1D3D5; } .similar-articles .article-aside:nth-of-type(1){ border-left: none; }
}
@media screen and (min-width: 54em){ figure.video figcaption .figure-inner video { position: absolute; height: 65vh; min-height: 32rem; } .overlay.custom-overlay{ background-image: none; } body.front #homepage-hero-slideshow .hero-huge-callout:before { background: radial-gradient(rgba(32,32,35,0.4), rgba(32,32,35,0.3), rgba(32,32,35,0), rgba(32,32,35,0)); } body.front #homepage-hero-slideshow .hero-huge-callout{ max-width: 50vw; } div.hero-huge-callout p.lead-in{ margin-left: 0; margin-right: 0; } body.front #homepage-hero-slideshow figure.focus-center .hero-slide-image img { -o-object-position: 50% 15%; object-position: 50% 15%; } .similar-articles .article-overlay:nth-of-type(1), .similar-articles .article-overlay:nth-of-type(2), .similar-articles .article-overlay:nth-of-type(3) { background-color: none; } body.front #homepage-hero-slideshow figure .hero-slide-image img{ height: 65vh; min-height: 32rem; } body.front #homepage-hero-slideshow .view-content{ height: 65vh; min-height: 32rem; } body.front #homepage-hero-slideshow .view-content .views-row{ height: 65vh; min-height: 32rem; } body.front #homepage-hero-slideshow .similar-articles{ width: 17rem; height: 100%; padding: 3rem 0 5rem 0; margin-right: 5vw; flex-direction: column; bottom: 0; align-items: stretch; justify-content: space-around; } .similar-articles .article-aside{ width: 100%; height: 20%; min-height: 7rem; border-radius: 5px; border: 0; box-shadow: 0 0 4px rgba(218,85,48,.15); } .similar-articles .article-aside img{ max-width: 5rem; position: relative; right: 5px; } .similar-articles .article-content { justify-content: flex-start; } .similar-articles .article-content div{ top: 0.25rem; position: relative; } .similar-articles .article-aside .article-overlay{ height: 10%; } .similar-articles .article-aside:hover .article-overlay, .similar-articles .article-aside:focus .article-overlay{ height: 100%; } .similar-articles .article-aside:nth-of-type(1) .article-overlay{ background-image:linear-gradient(45deg, rgba(201,36,66,1), rgba(230,71,74,1)); } .similar-articles .article-aside:nth-of-type(2) .article-overlay{ background-image:linear-gradient(45deg, rgba(70,70,109,1), rgba(109,106,142,1)); } .similar-articles .article-aside:nth-of-type(3) .article-overlay{ background-image: linear-gradient(45deg, rgba(238,166,32,1), rgba(239,184,89,1)); } .similar-articles .article-aside:hover .article-content div, .similar-articles .article-aside:focus .article-content div{ opacity: 0; } .similar-articles .article-aside .article-content .content-reveal{ text-align: center; width: 100%; left: 0; } .similar-articles .article-aside:hover .article-content .content-reveal, .similar-articles .article-aside:focus .article-content .content-reveal{ align-self: center; display: flex; position: absolute; max-width: 27rem; animation: animDown 0.5s cubic-bezier(0.25,0.1,0.25,1) both; -webkit-animation: animDown 0.5s cubic-bezier(0.25,0.1,0.25,1) both; } #homepage-hero-slideshow .similar-articles a.article-aside, #homepage-hero-slideshow .similar-articles p{ animation: animRight 1s cubic-bezier(0.25,0.1,0.25,1) both; -webkit-animation: animRight 1s cubic-bezier(0.25,0.1,0.25,1) both; } #homepage-hero-slideshow .similar-articles p{ -webkit-animation-delay: 1.1s; animation-delay: 1.1s; } #homepage-hero-slideshow .similar-articles a.article-aside:nth-of-type(1){ -webkit-animation-delay: 1.25s; animation-delay: 1.25s; } #homepage-hero-slideshow .similar-articles a.article-aside:nth-of-type(2){ -webkit-animation-delay: 1.4s; animation-delay: 1.4s; } #homepage-hero-slideshow .similar-articles a.article-aside:nth-of-type(3){ -webkit-animation-delay: 1.55s; animation-delay: 1.55s; } @media screen and (min-height: 64em){ body.front #homepage-hero-slideshow .similar-articles{ padding: 8rem 0 10rem 0; } }
}
@media screen and (min-width: 72em){ div.hero-huge-callout p.lead-in{ font-size: 1.5rem; max-width: 38rem; } body.front #homepage-hero-slideshow .similar-articles{ margin-right: 8vw; width: 18rem; }
}
@media screen and (min-width: 90em){ body.front #homepage-hero-slideshow .hero-huge-callout{ max-width: 46rem; } body.front #homepage-hero-slideshow .similar-articles{ margin-right: 12vw }
}
@media screen and (min-width: 110em){ body.front #homepage-hero-slideshow .similar-articles{ margin-right: 15vw; }
}
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.loop = true; v.muted = true; v.setAttribute ("poster", "/sites/default/files/public/img/home/01-hero/digipen-campus-footage.jpg"); var s = document.createElement ("source"); s.setAttribute ("src", "/sites/default/files/public/img/home/01-hero/digipen-campus-footage.mp4"); s.setAttribute ("type", "video/mp4"); v.appendChild (s); heroVideoWrapper.appendChild (v); window.setTimeout( function() { v.play ();}, "100");
}