DigiPen Institute of Technology

.overlay.admissions-overlay{ background-image: linear-gradient(30deg, rgba(var(--snowflake-grey), 0.66), rgba(var(--snowflake-grey), 0.2)); } body.front #homepage-hero-slideshow figure.admissions.focus-center .hero-slide-image img { -o-object-position: 42%; object-position: 42%; } div#applications-open{ top: 40% !important; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); max-width: 15rem; } @media screen and (min-width: 30em){ body.front #homepage-hero-slideshow figure.admissions.focus-center .hero-slide-image img { -o-object-position: 35%; object-position: 35%; } div#applications-open{ max-width: 34rem; } } @media screen and (min-width: 54em){ .overlay.admissions-overlay{ background-image: none; } div#applications-open{ max-width: 38rem; padding: 5rem; margin-left: -5rem; } div#applications-open .heading{ max-width: none; font-size: 2.25rem; } div#applications-open .lead-in{ max-width: 24rem; } }

body.front #homepage-hero-slideshow .hero-huge-callout#evergreen-programs-offered{ top: 5%; -webkit-transform: none; -ms-transform: none; transform: none; } body.front #homepage-hero-slideshow figure.evergreen-programs-focus-center .hero-slide-image img{ -o-object-position: 40%; object-position: 40%; } div#evergreen-programs-offered{ width: 100%; } #evergreen-programs-offered .flex-wrapper{ flex-direction: column; } #evergreen-programs-offered .article-aside{ display: flex; width: 100%; max-width: 22rem; align-self: center; height: 8.5rem; position: relative; border: 1px solid #231F20; background-image:url(/sites/default/files/public/img/home/01-hero/digipen-europe-bilbao-programs-offered-banner.webp); background-size: 180%; background-position: 15% 40%; border-radius: 5px; box-shadow: 0 0 4px rgba(218,85,48,.15); overflow: hidden; -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; } #evergreen-programs-offered .article-aside:nth-of-type(1){ box-shadow: 0px 0px 0px 2px #e6474a; } #evergreen-programs-offered .article-aside:nth-of-type(2){ box-shadow: 0px 0px 0px 2px #07cbca; background-position: 90% 50%; } #evergreen-programs-offered .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; } #evergreen-programs-offered .article-content div{ -webkit-transition: opacity 300ms ease, color 300ms ease; -moz-transition: opacity 300ms ease, color 300ms ease; -ms-transition: opacity 300ms ease, color 300ms ease; -o-transition: opacity 300ms ease, color 300ms ease; transition: opacity 300ms ease, color 300ms ease; } #evergreen-programs-offered .article-content { display: flex; justify-content: center; position: absolute; width: 100%; top: 50%; z-index: 2; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } #evergreen-programs-offered .article-content div{ top: 0.5rem; position: relative; } #evergreen-programs-offered .article-content .content-reveal{ display: none; text-align: center; width: 100%; left: 0; } #evergreen-programs-offered .article-aside .article-overlay{ height: 0.75rem; } #evergreen-programs-offered .article-aside:hover .article-overlay, #evergreen-programs-offered .article-aside:focus .article-overlay{ height: 100%; } #evergreen-programs-offered .article-aside:nth-of-type(1) .article-overlay{ background-image:linear-gradient(45deg, rgba(201,36,66,1), rgba(230,71,74,1)); } #evergreen-programs-offered .article-aside:nth-of-type(2) .article-overlay{ background-image: linear-gradient(45deg, rgba(0,171,192,1), rgba(7,203,202,1)); } /* Hover and Focus Effects */ #evergreen-programs-offered .article-aside:hover span, #evergreen-programs-offered .article-aside:focus span, #evergreen-programs-offered .article-aside:hover p, #evergreen-programs-offered .article-aside:focus p{ color: #ffffff; } #evergreen-programs-offered .article-aside:hover .article-content div, #evergreen-programs-offered .article-aside:focus .article-content div{ opacity: 0; } #evergreen-programs-offered .article-aside:hover .article-content .content-reveal, #evergreen-programs-offered .article-aside:focus .article-content .content-reveal{ align-self: center; display: flex; position: absolute; 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; } @media screen and (min-width: 30em){ body.front #homepage-hero-slideshow figure.evergreen-programs-focus-center .hero-slide-image img{ -o-object-position: 35%; object-position: 35%; } } @media screen and (min-width: 54em){ body.front #homepage-hero-slideshow .hero-huge-callout#evergreen-programs-offered{ top: 50%; -webkit-transform: translate(0,-50%); -ms-transform: translate(0,-50%); transform: translate(0,-50%); } body.front #homepage-hero-slideshow figure.evergreen-programs-focus-center .hero-slide-image img{ -o-object-position: 44%; object-position: 44%; } #evergreen-programs-offered .article-aside{ background-image: linear-gradient(to right, rgba(250,250,250,0.9), rgba(241,241,243,0.85)); height: 5rem; border: none; box-shadow: none !important; } #evergreen-programs-offered .article-content div.font-family-proximaB{ color: #231F20; text-shadow: none; } #evergreen-programs-offered .heading { order: 1; padding: 2rem 0; margin-bottom: 0.5rem; font-size: 4rem; } #evergreen-programs-offered .article-aside:nth-of-type(1) { order: 0; align-self: flex-start; margin-left: 8rem; } #evergreen-programs-offered .article-aside:nth-of-type(2) { order: 2; align-self: flex-end; margin-right: 8rem; } html.cssanimations body.page-animation-ready:not(.animation-rewriting) .dynamicSlide.active .figure-inner #evergreen-programs-offered .article-aside:nth-of-type(1), html.cssanimations body.page-animation-ready:not(.animation-rewriting) .homepage-slideshow-heading-view.row-count-1 #evergreen-programs-offered .article-aside:nth-of-type(1){ --animation-translate-y:1rem; --animation-translate-x:0; } }