@charset "UTF-8";
/* CSS Document */
html {
font-size:18px;
overflow: hidden;
}
body {
max-width:1224px;
margin:0 auto;
background-color:#f0f0f0;
}
a {
color: #0075BE;
}
@font-face {
font-family: "Nice Poster Light";
src: url("https://www.bentley.edu/themes/custom/bentley/fonts/NicePoster-Light.woff2") format("woff2")
}
@font-face {
font-family: "Nice Poster Light Italic";
src: url("https://www.bentley.edu/themes/custom/bentley/fonts/NicePoster-LightItalic.woff2") format("woff2")
}
@font-face {
font-family: "Nice Poster Bold";
src: url("https://www.bentley.edu/themes/custom/bentley/fonts/NicePoster-Bold.woff2") format("woff2")
}
@font-face {
font-family: "Nice Poster Bold Italic";
src: url("https://www.bentley.edu/themes/custom/bentley/fonts/NicePoster-BoldItalic.woff2") format("woff2")
}
main {
background:white;
overflow: hidden; /* keep the clouds in bounds */
}
section {
background: linear-gradient(to bottom, #FFFFFF, #F0F0F0);
position: relative;
}
.bg-white {
background:white !important;
}
.bg-black {
background:#231F20 !important;
}
.chartreuse {
color:#D9F04D !important;
}
.salmon {
color:#F36F45 !important;
}
.dark {
color:#585858 !important;
}
.light {
color:white !important;
}
.sinewave {
width: 100%;
margin: 0 0 -39px 0;
position: relative;
}
.sinewave img {
margin: 0 0 -21px -90px;
}
.sinewave-adjustment {
margin-top:6rem;
}
.sinewave::after {
content: "";
position: absolute;
right: -35px;
top: -172px;
z-index: 2;
background-image: url("assets/displays2-blinking.svg");
background-size: 350px auto;
background-repeat: no-repeat;
width: 350px;
height:350px;
}
h2.sinewave-adjustment.light {
margin-top: 4rem;
}
.article-type1 {
margin:3rem auto;
width:50%;
position: relative;
}
.article-type2 {
margin:2rem auto 0;
width:100%;
background:white;
overflow: auto;
position: relative;
}
.dark-wrap {
margin:0 auto 5rem;
background:white;
padding:3rem;
position: relative;
}
.dark-wrap .flex-wrap {
align-items:center;
padding:0 2rem;
height: 240px; /* keep from expanding when carousel is tall */
}
.dark-wrap::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2rem;
background-color: #231F20;
transform: skewY(-1.2deg);
transform-origin: top left;
}
.dark-wrap::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2rem;
background-color: #231F20;
transform: skewY(1.2deg);
transform-origin: top left;
}
.carousel-2 .carousel-slide {
display:flex;
}
.stat {
font-size: 3.5rem;
color: #D9F04D;
font-family: "Nice Poster Bold", serif;
line-height: 1.5;
font-weight: bold;
padding-right: 1rem;
}
aside .stat {
margin-top: 0.35rem;
line-height: 1.6;
}
.article-type2 h2 {
text-align: center;
}
.article-type2 h2::after {
content:url("assets/stars-red.svg");
padding-left:1rem;
}
.article-type2.bg-black h2::after {
content:url("assets/stars-green.svg");
padding-left:1rem;
}
.full-width{
width:100%;
}
.col-50-50 {
display: flex;
}
.row-80 {
width:80%;
display: block;
margin:0 auto;
}
.row-70 {
width:70%;
}
.no-padding {
padding:0 !important;
}
.article-type2 div {
padding:1rem 3rem;
position: relative;
flex:1;
}
.article-type2 div:first-child::after {
content: url("assets/divider-red.svg");
background-repeat: no-repeat;
background-position: right;
position: absolute;
right:0;
top:50%;
margin-top: -266px;
}
.article-type2.bg-black div:first-child::after {
content: url("assets/divider-purple.svg");
}
.vid-row {
padding:0 2rem 0 0;
margin: 8rem 0 0;
}
.vid-row div:first-child {
width: 100%;
padding: 0 4rem 0 0;
transform: rotate(-3.2deg);
margin-bottom: -44px;
margin-left:-30px;
}
.stat-row {
padding: 0 6rem;
justify-content: space-around;
}
.stat-box {
flex-basis: 50%;
padding:0;
}
.stat-box p{
margin-top:0;
}
.vid-row div:last-child {
padding:2rem 4rem 0 0;
}
h2 {
font-family: "Nice Poster Bold", serif;
font-size:2.2rem;
color:#585858;
line-height: 1.25;
}
h3 {
font-family: "Nice Poster", serif;
font-size:1.3rem;
color:#585858;
line-height: 1.25;
font-weight: normal;
}
p,ul,ol {
font-family: arial, sans-serif;
color:#585858;
line-height: 1.5;
}
li {
padding-left:1rem;
vertical-align: bottom;
margin-bottom: 1rem;
}
li::marker {
font-weight: bold;
}
.highlight {
background-color:#D9F04D;
padding:0.1rem 0.25rem;
position: relative;
white-space: nowrap;
}
.highlight::before {
background-color: #D9F04D;
width: 3px;
height: 100%;
content: "";
display: block;
left: -3px;
position: absolute;
top: 0;
}
.no-psuedo {
padding: 0.1rem 0;
}
.slug-box {
width:60%;
margin: 8rem auto 4rem;
background:#F0F0F0;
padding:2rem;
border-radius: 1rem;
position: relative;
border:1px solid #333;
}
.byline {
text-transform: uppercase;
}
.flex-wrap {
display: flex;
}
aside {
width: 100%;
margin: 2rem 0 2rem 0.5rem;
background: #fff;
border: 1px solid #333;
border-radius: 1rem;
padding: 0.75rem 2rem;
position: relative;
box-sizing: border-box;
}
.asides {
width:82%;
margin:4rem auto 8rem;
}
.flex-wrap aside:first-child {
flex-basis:50%;
margin-left:0;
}
aside:first-child p {
margin-top:0;
font-weight:bold;
}
aside:last-child::after {
content: "";
position: absolute;
bottom: -270px;
right: -200px;
width: 430px;
height: 100%;
background-image: url("assets/displays.svg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
.sky {
background-image: linear-gradient(to bottom, #82BCE5, #DAF2FF);
background-repeat: no-repeat, no-repeat;
background-size: cover;
background-position: bottom;
position: relative;
}
.sky img {
display: block;
}
.chevron-list li{
list-style-image: url("assets/arrow-bullet.svg");
}
.sky::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2rem;
background-color: #82BCE5;
transform: skewY(-1.2deg);
transform-origin: top left;
}
.cloud {
}
.cloud:last-of-type {
padding-bottom:3rem;
}
.cloud img {
position: relative;
padding:0;
transform: translateY(-50%);
animation: floatAcross 30s linear infinite;
}
.cloud .small {
position: relative;
width:180px;
padding:8rem 0 0 0;
transform: translateY(-50%);
animation: floatAcross 31s linear infinite alternate;
}
.cloud .small2 {
position: relative;
width:100px;
right:0;
padding:0;
transform: translateY(-50%);
animation: floatAcross 23s linear infinite;
}
@keyframes floatAcross {
0% {
left: -300px;
}
100% {
left: 100vw;
}
}
.arrow {
display: none
}
/* Animation for clockwise rotation */
@keyframes rotateClockwise {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* Animation for counterclockwise rotation */
@keyframes rotateCounterClockwise {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
/* Apply animation to gear1 */
#gear1 {
animation: rotateClockwise 5s linear infinite;
transform-origin: center;
}
/* Apply animation to gear2 */
#gear2 {
animation: rotateCounterClockwise 5s linear infinite;
transform-origin: center;
}
.CTA {
width: fit-content;
margin: 8rem auto 0;
background: #ffffff80;
border: 1px solid #333;
border-radius: 1rem;
padding: 0.75rem 2rem;
position: relative;
box-sizing: border-box;
}
.carousel {
width: 100%;
margin: 2rem auto 0;
background: #fff;
border: 1px solid #333;
border-radius: 1rem;
padding: 2rem;
position: relative;
box-sizing: border-box;
}
.carousel-slides {
width: 100%;
}
.carousel-slide {
opacity: 0;
transition: opacity 1s ease;
display: none; /* Hide inactive slides */
}
.carousel-slide.active {
opacity: 1;
display: block; /* Show only the active slide */
}
.carousel-pagination {
text-align: center;
margin-top: 1rem;
}
.carousel-dot {
cursor: pointer;
width: 0.8rem;
height: 0.8rem;
margin: 0 4px;
background-color: #CDCDCD;
border-radius: 50%;
display: inline-block;
}
.carousel-dot.active {
background-color: #F36F45;
}
.carousel-pagination-2 .carousel-dot.active {
background-color: #D9F04D;
opacity: 100%;
}
.carousel-pagination-2 .carousel-dot {
opacity: 50%;
}
.carousel-1 {
min-height: 436px; /* avoid the jump since slide 1 is so long */
align-items: center;
display: flex;
}
.small-heading {
font-size:1.5rem;
text-transform: uppercase;
color:white;
font-family: arial, sans-serif;
line-height: 1.5;
}
.dark-wrap .small-heading {
padding-right:3rem;
}
.carousel-btn, .carousel-btn2 {
background:
url("assets/arrow-btn.svg"), linear-gradient(to right, white 50%, #F8F8F8 50%);
background-repeat: no-repeat;
width:68px;
height:68px;
border:none;
position: absolute;
right:0;
top:50%;
margin:-34px -34px 0 0;
}
.carousel-btn2 {
background-color:transparent;
background-image: url("assets/arrow-btn2.svg");
}
.carousel-2 {
background-color:transparent;
border-color:white;
min-height: 200px;
display: flex;
align-items: center;
}
.carousel-2 p{
color:white;
}
.person-desk-container {
position: relative;
}
.article-type2.bg-black {
padding: 0 0 2rem 0;
}
.person-desk-container {
position: relative;
width: 100%;
}
.attribution {
text-align: center;
opacity: 0.6;
font-size: 0.8rem;
color: white;
}
@keyframes rotate-clockwise {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.hero-vid {
mix-blend-mode: multiply;
}
.video-container {
position: relative;
width: 100%;
}
.video-container .poster-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
z-index: 2;
}
.video-container .hero-vid {
position: relative;
width: 100%;
z-index: 1;
}
.poster-img {
display: none;
}
.small-video-container {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.small-video-container iframe {
position: absolute;
top: 0;
right: 0;
width: 80%;
height: 80%;
border: 0;
margin: 3rem 3rem 0 0;
}
@media screen and (max-width: 700px) {
.poster-img {
display: block;
}
.small-video-container {
padding-top: 56.25% !important; /* 16:9 aspect ratio (9 / 16 = 0.5625) */
width:100%;
height:100%;
}
.small-video-container iframe {
position: absolute;
top: 0;
right: auto;
width: 100%;
height: 100%;
border: 0;
margin: 3rem 3rem 0 0;
}
.flex-wrap {
flex-direction: column;
}
.dark-wrap .flex-wrap {
height: auto;
padding:0;
}
.small-heading {
font-size: 1.25rem;
}
.article-type1 {
width:80%
}
.row-70 {
width:100%;
}
.asides {
margin: 4rem auto;
}
aside {
margin: 0.25rem 0;
}
aside:last-child::after {
display: none
}
.vid-row {
padding: 0;
margin: 0;
flex-direction: column-reverse;
}
.vid-row div:last-child {
padding: 0;
margin: 0 auto;
}
.vid-row div:first-child {
width: 90%;
padding: 0;
transform: rotate(-3.2deg);
margin:5rem auto -44px;
}
.article-type2 div {
flex-direction: column;
overflow: hidden;
}
.article-type2 div {
padding:1rem;
}
.article-type2 div:first-child::after {
content: url("assets/divider-red-h.svg");
background-repeat: no-repeat;
margin-top: 0;
position: absolute;
bottom: auto;
top: auto;
left: -50%;
right:auto;
}
.article-type2.bg-black div:first-child::after {
content: url("assets/divider-purple-h.svg");
}
.stat-row {
flex-direction: column;
padding:0 2rem;
}
.stat-row img {
margin:3rem 0 -0.5rem;
}
.carousel-1 {
min-height:600px;
}
.carousel-2 {
min-height:330px;
}
.carousel-1 .carousel-slide:first-of-type {
font-size:0.8rem;
}
.sinewave-adjustment {
margin-bottom: 0;
}
.bg-black .sinewave-adjustment {
margin-top:2.5rem;
}
.sinewave::after {
right: 50%;
margin-right: -150px;
top: 30px;
background-size: 300px auto;
background-repeat: no-repeat;
width: 300px;
height: 300px;
}
.arrow {
display: none;
}
.slug-box {
width: 90%;
margin:4rem auto;
box-sizing: border-box;
}
.carousel-slide {
flex-direction: column;
}
.carousel-2 p {
margin: 0 0 1rem;
}
.sinewave img {
margin: 4rem 0 -132px -90px;
padding: 6rem 0;
}
h2 {
font-size:1.5rem;
}
h3 {
font-size: 1rem;
line-height: 1.5;
}
.article-type2 h2 {
padding: 0 1rem;
}
.article-type2 h2::after, .article-type2.bg-black h2::after {
display:none
}
.article-type2 h2::before {
content: url("assets/stars-red.svg");
padding-left: 0;
flex-direction: column;
display: flex;
}
.article-type2.bg-black h2::before {
content: url("assets/stars-green.svg");
padding-left: 0;
flex-direction: column;
display: flex;
}
.article-type2.bg-black {
padding: 0;
}
.CTA {
width: 90%;
margin: 4rem auto 0;
}
.cloud img {
animation: floatAcross 15s linear infinite;
}
.cloud .small {
animation: floatAcross 16s linear infinite alternate;
}
.cloud .small2 {
animation: floatAcross 11s linear infinite;
}
}