:root {
  interpolate-size: allow-keywords;
}

/* Colors 

Orange - #C6542D
Light Blue - #5CA6CC
Dark Blue - #0B306B
Alt Dark Blue - #203469
Light Green - #95BE4F
Tan - #F2EBE1
Alt Tan - #EDCA95

*/

body { background: #EDCA9580; font-size: 18px; line-height: 30px; } 

.pageVideo { width: 100vw; position: relative; }

.pageLogo { position: absolute; top: 25px; left: 25px; z-index: 1; }
.pageLogo img { width: 160px; height: auto; }

.pageVideoContainer { width: 100%; position: relative; height: calc(50vh - 7.5px); max-height: calc(50vh - 7.5px); transition: max-height 1s ease-out, padding 1s ease-out; }
.pageVideoContainer.minHeader, .pageVideoContainer.minAltHeader { max-height: 200px; }
.bottomHeader { position: absolute; bottom: -200px; }
.pageVideoContainer video { width: 100%; height: 100%; object-fit: cover; position: absolute; }
.pageNav { position: absolute; bottom: 20px; width: calc(100% - 60px); max-width: 1440px; display: flex; justify-content: space-between; align-items: end; margin-left: calc(50% - 720px); }
@media screen and (max-width: 1500px) { 
    .pageNav { margin-left: 30px; }
}
.pageNav h1 { color: #FFFFFF; font-family: 'CocoGothicSmallCaps-Bold', 'Mulish', sans-serif; text-transform: uppercase; font-size: 72px; line-height: 74px; color: #FFFFFF; margin: 0; width: calc(100% - 200px); opacity: 1; transition: opacity 1s ease-in-out; }
.pageNav div { width: 200px; text-align: right; }
.pageNav div a { background: #0B306B; color: #FFFFFF; text-decoration: none; display: inline-block; padding: 8px 24px; border-radius: 360px; text-transform: uppercase; font-weight: 700; font-size: 16px; transition: width 1s; }
.pageNav div a i { color: #95BE4F; margin-left: 10px; font-size: 18px; width: auto; }

.pageLive { max-height: 0; transition: max-height 1s ease-in-out, padding 1s ease-in-out; overflow: hidden; }
.pageLive.showLive { max-height: none; }
.pageVideoContainer.minHeader .pageNav h1 { opacity: 0; }
.pageVideoContainer.minHeader .pageNav div a i { margin-left: 0; }

.pageWork { max-height: 0; transition: max-height 1s ease-in-out, padding 1s ease-in-out; overflow: hidden; }
.pageWork.showWork { max-height: none; }

.hideHeader { display: none !important; }

@media screen and (max-width: 800px) { 
    .pageNav h1 { font-size: 44px; line-height: 48px; }
}
@media screen and (max-width: 600px) { 
    .pageLogo { top: 15px; left: 15px; }
    .pageLogo img { width: 140px; }
    .pageNav { bottom: 15px; margin-left: 15px; width: calc(100% - 30px); }
    .pageNav h1 { font-size: 32px; line-height: 36px; width: calc(100% - 150px); }
    .pageNav div { width: 150px; }
    .pageNav div a { padding: 4px 10px; font-size: 14px; }
    .pageNav div a i { margin-left: 0; }
    .pageVideoContainer.bottomContainer .pageNav { bottom: 40px; }
}

h2 { font-size: 36px; line-height: 44px; margin: 20px 0; }

.pageHeader { width: 100%; height: 15px; display: flex; box-shadow: 0 0 10px #00000080; }
.pageHeader.videoDivider { box-shadow: none; }
.pageHeader div { width: 25%; }
.phDkBlue { background: #203469; }
.phLtBlue { background: #5CA6CC; }
.phOrange { background: #C6542D; }
.phGreen { background: #95BE4F; }

.bkgLtBlue { width: 100%; background: #5CA6CC; margin: 40px auto; color: #FFFFFF; }
.bkgOrange { width: 100%; background: #C6542D; margin: 40px auto; color: #FFFFFF; }
.bkgDkBlue { width: 100%; background: #203469; margin: 40px auto; color: #FFFFFF; }

.textFull { width: calc(100% - 40px); max-width: 1440px; margin: 0 auto; }
.textFull h1 { font-family: 'CocoGothicSmallCaps-Bold', 'Mulish', sans-serif; font-size: 72px; line-height: 74px; color: #C6542D; text-transform: uppercase; max-width: 1090px; margin-bottom: 25px; }
.textFull .pageIntro { font-size: 24px; line-height: 36px; color: #203469; font-weight: 700; max-width: 1090px; }

@media screen and (max-width: 800px) { 
    .textFull h1 { font-size: 50px; line-height: 50px; }
    .textFull .pageIntro { font-size: 22px; line-height: 32px; }
}

.textMain { background-image: url(/live/assets/background.png); background-size: cover; background-position: right top; padding: 1px 0 40px; margin-bottom: -40px; }
.textPhoto { width: calc(100% - 40px); max-width: 1440px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 50px 0; }
#pageMessage2.textPhoto { padding: 20px 0 10px; }
.columnText { width: calc(100% - 580px); }
.columnPhoto { width: 550px; }
.columnPhoto img { width: 100%; }
a.columnButton { background: #203469; border-radius: 360px; text-transform: uppercase; color: #FFFFFF; text-transform: uppercase; padding: 10px 20px; text-decoration: none; font-weight: 700; display: inline-block; margin: 10px 0 0; }
a.columnButton i { color: #95BE4F; margin-left: 10px; }

.textPhoto.altLayout .columnPhoto { width: calc(50% - 15px); }
.textPhoto.altLayout .columnText { width: calc(50% - 15px); text-align: right;  }

.textVideo { width: calc(100% - 40px); max-width: 1440px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 50px 0; }
.columnVideo { width: calc(50% - 15px); }
.columnText.withVideo { width: calc(50% - 15px); }

@media screen and (max-width: 950px) { 
    .textPhoto, .textPhoto.altLayout { flex-wrap: wrap; }
    .columnText, .textPhoto.altLayout .columnText { width: 100%; margin: 0; }
    .textPhoto.altLayout .columnText { text-align: left; }
    .columnPhoto, .textPhoto.altLayout .columnPhoto { width: 100%; max-width: 600px; margin: 30px auto 0; }
    .textVideo { flex-wrap: wrap; }
    .columnVideo { width: 100%; max-width: 600px; margin: 0 auto 30px; }
    .columnText, .columnText.withVideo { width: 100%; margin: 0; }
}

.textCallout { width: calc(100% - 40px); max-width: 720px; margin: 0 auto; text-align: center; }
.textStats { padding: 50px 0; }
.iconsStats { width: calc(100% - 40px); max-width: 1050px; margin: 0 auto; display: flex; align-items: flex-start; }
.iconStat { width: 300px; padding: 25px; text-align: center; }
.iconStat img { display: block; margin: 0 auto 15px; width: 125px; height: 125px; }

@media screen and (max-width: 1050px) { 
    .iconsStats { max-width: 350px; flex-wrap: wrap; }
}

.activityGrid { width: calc(100% - 10px); max-width: 1470px; margin: 0 auto 40px; display: flex; flex-wrap: wrap; }
.activityGrid .textCallout { margin: 0 calc(50% - 360px); color: #203469; }
@media screen and (max-width: 720px) { 
    .activityGrid .textCallout { margin: 0 auto; }
}
.activityGrid .textCallout h2 { color: #C6542D; }
.gridItem { width: calc(33.3333% - 30px); margin: 15px; }
.gridItem img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin: 0 0 10px; }
.gridItem b { display: block; margin: 0 0 5px; font-size: 20px; }
.gridItem b a { color: #000000; text-decoration: underline; }
.gridItem b a:hover { color: #000000; text-decoration: none; }

@media screen and (max-width: 1200px) { 
    .gridItem { width: calc(50% - 30px); }
}
@media screen and (max-width: 800px) { 
    .activityGrid { max-width: 600px; }
    .gridItem { width: calc(100% - 30px); }
}

.textMain.textGrid { background: #FFFFFF; background-image: url(/live_work/assets/gears.png); background-size: 1000px auto; background-position: right top; background-repeat: no-repeat; }
.logoGrid { width: calc(100% - 10px); max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-evenly; }
.logoGrid.workGrid { margin-top: 50px; }
.logoGrid .textCallout { margin: 0 calc(50% - 360px); color: #203469; }
@media screen and (max-width: 720px) { 
    .logoGrid .textCallout { margin: 0 auto; }
}
.logoGrid .textCallout h2 { color: #203469; }
.gridLogo { width: 250px; margin: 15px; }
.gridLogo img { width: 250px; height: 200px; display: block; object-fit: contain; object-position: center center; }

@media screen and (max-width: 560px) { 
    .logoGrid.workGrid .gridLogo { width: calc(50% - 30px); }
    .logoGrid.workGrid .gridLogo img { width: 100%; height: 150px; }
}