@import url("/_resources/css/juice-social-feed.css");
@import url("/_resources/css/new-snippets.css");
/* match direct edit link to styling */
a#de {
    background: none !important;
}
/* a-to-z letters inline */
ul.sitemap li{
    display:inline;
    margin-left:.7em;
}
.left-border-red{
	    border-left: 2px solid var(--coral);
}
.left-border-black{
	    border-left: 2px solid var(--black);
}
ol.alphaList{
	list-style-type: upper-alpha
}
ol.alphaList>ol{
	list-style-type: normal;
}
ol.alphaList>ol.alphaList {
	list-style-type: lower-alpha
}
ul.longlist{
    column-count:2
}
@media screen and (max-width:768px){
    ul.longlist{
        column-count:1
    }
}
/* Header Background Gradients */
.Hero__background.no-gradient:after{
    background-image: none !important;
}
.Hero__background.medium-gradient:after{
    background-image: linear-gradient(transparent, var(--black-70)) !important;
}
.Hero__background.heavy-gradient:after{
    background-image: linear-gradient(transparent, var(--black)) !important;
}
/* Image Styles */
img.square-img{
    aspect-ratio: 1;
    object-fit: cover;
}
.portrait-img-crop{
    aspect-ratio: 2/3;
    width:100%;
    object-fit:cover;
    margin-bottom: 1rem;
}
.classic-portrait-img-crop{
    aspect-ratio: 28/31;
    width:100%;
    object-fit:cover;
    margin-bottom: 1rem;
}
.landscape-img-crop{
    aspect-ratio: 3/2;
    width:100%;
    object-fit:cover;
    margin-bottom: 1rem;
}
.Feed__grid img{
    display: block;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
}
/* Current Course Offerings
*/
label[for="program-select"] {
    font-family: 'Forza';
    padding-left: 1rem;
}
#program-select{
    border: 0;
    border-bottom: 1px solid var(--black);
}
.cco-table td, .cco-table th{
    padding: 1rem;
}
.cco-table td:nth-child(1){
    font-weight: 700;
}
@media screen and (max-width:1080px){
    .cco-table thead{
        display:none;
    }
    .cco-table tbody{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem
    }
    .cco-table tr{
        display:grid;
        background: unset !important;
    }
    .cco-table td{
        padding: 0;
    }
    .cco-table td:before{
        font-weight: 700;
        padding-right: .5rem
    }
    .cco-table .cco-col-instructor:before{
        content: "Instructor:"
    }
    .cco-table .cco-col-format:before{
        content: "Format:"
    }
    .cco-table .cco-col-day:before{
        content: "Day:"
    }
    .cco-table .cco-col-date:before{
        content: "Start Date:"
    }
    .cco-table .cco-col-time:before{
        content: "Start Time:"
    }
	    .cco-table .cco-col-term:before{
        content: "Recent term:"
    }
    .cco-table .cco-col-audience:before{
        content: "Audience:"
    }
}
@media screen and (max-width:768px){
    .cco-table tbody{
        grid-template-columns:1fr;}
}
/*  ---------------- Inline Image Classes -------------------------------*/
.float-right{
    float: right;
    padding-left:1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.float-left{
    float: left;
    padding-right:1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}
@media screen and (max-width:768px){
    .float-left,.float-right{
        width:100%;
        padding:1rem;
        float: normal;
    }
}
/*  ---------------- Timeline Classes -------------------------------*/
/* Timeline Container */
.timeline {
    margin: 20px auto;
    padding: 20px;
}
/* Card container */
.tl-card {
    position: relative;
    max-width: 100%;
}
/* setting padding based on even or odd */
.tl-card:nth-child(odd) {
    padding: 30px 0 30px 30px;
}
.tl-card:nth-child(even) {
    padding: 30px 30px 30px 0;
}
/* Global ::before */
.tl-card::before {
    content: "";
    position: absolute;
    width: 50%;
    border: solid var(--black);
}
/* Setting the border of top, bottom, left */
.tl-card:nth-child(odd)::before {
    left: 0px;
    top: -4px;
    bottom: -4px;
    border-width: 4px 0 4px 4px;
}
/* Setting the top and bottom to "-5px" because earlier it was out of a pixel in mobile devices */
@media only screen and (max-width: 400px) {
    .tl-card:nth-child(odd)::before {
        top: -5px;
        bottom: -5px;
    }
}
/* Setting the border of top, bottom, right */
.tl-card:nth-child(even)::before {
    right: 0;
    top: 0;
    bottom: 0;
    border-width: 4px 4px 4px 0;
}
/* Removing the border if it is the first card */
.tl-card:first-child::before {
    border-top: 0;
    border-top-left-radius: 0;
}
/* Removing the border if it is the last card  and it's odd */
.tl-card:last-child:nth-child(odd)::before {
    border-bottom: 0;
    border-bottom-left-radius: 0;
}
/* Removing the border if it is the last card  and it's even */
.tl-card:last-child:nth-child(even)::before {
    border-bottom: 0;
    border-bottom-right-radius: 0;
}
/* Information about the timeline */
.tl-info {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    padding: 10px;
}
/* Title of the card */
.tl-title {
    color: var(--black);
    position: relative;
    font-family: 'Forza';
    font-size: 1.5rem;
}
/* Timeline dot  */
.tl-title::before {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    background: white;
    border-radius: 999px;
    border: 4px solid var(--black);
}
/* text right if the card is even  */
.tl-card:nth-child(even) > .tl-info > .tl-title {
    text-align: right;
}
/* setting dot to the left if the card is odd */
.tl-card:nth-child(odd) > .tl-info > .tl-title::before {
    left: -45px;
    top: 10px;
}
/* setting dot to the right if the card is odd */
.tl-card:nth-child(even) > .tl-info > .tl-title::before {
    right: -45px;
    top: 10px;
}
.container{
    margin-block: calc(var(--space) / 2);
    padding-inline: var(--container);
}
/*------------------ To be moved to primary CSS file --------------------*/
h1,h2,h3,h4,h5,h6 {
    margin-block: 1em 0.5em;}
blockquote:not(.Quote__text) {
    font-size: 1.5rem;
    font-family: Forza, sans-serif;
    font-weight: 700;
	line-height: normal;
}
blockquote:not(.Quote__text)::before {
    position: absolute;
    content: "\201C";
    font-size: 3rem;
    margin-left: -2rem;
    margin-top: -1rem;
}
.Split__image{
	height: 600px;
}
.Hero__breadcrumbs{
    text-transform: none;
}
/* Uniform sizing for News and Blog images. */
.List--news .News img, .News__image{
    aspect-ratio: 3/2;
    width:100%;
    object-fit:cover;
}
/* Homepage News Images */
.PostSlider__image{
    aspect-ratio:2/3;
}
.RouterGrid.include-images .Feed__item img {
	display:block !important;
}
.PostSlider__image img{
    height:100%;
    object-fit: cover;
    overflow:hidden;
}
/* Video in phone (overflow hidden) */
.phone-image-frame-container{
    display:flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.phone-image-frame-container img{
    height:100%;
    z-index: 1000;
    pointer-events: none;
}
.videobox {
    position: absolute;
    padding: 0 8%;
    height: 100%;
    padding-bottom: 10%;
}
.videobox > video {
    height: 100%;
    background: black;
}
/* End Video in Phone */
/* Multi-Image-Component */
.multi-image-slider{
    padding-inline: 0;
}
.multi-image-slider .Media__wrap:before{
    background-image: none;
}
.multi-image-slider .Panel__item{
    width:25vw;
    min-width: 300px;
}
.multi-image-slider .Media__wrap, .multi-image-slider .Media--full, .multi-image-slider img{
    height: 100%;
}
.multi-image-slider img{
    object-fit: cover;
}
.unset-ratio .Panel__slider, .unset-ratio .multi-image-slider .Panel__item{
    aspect-ratio: unset !important;}
img.landscape,.landscape .Media.Media--full,.landscape  .Media__wrap,.landscape  .Media__wrap img,
.square .Media.Media--full,.square  .Media__wrap,.square  .Media__wrap img, .square .custom-grid-item img{
    width: 100%;
	object-fit:cover;
}
img.square, .square .Panel__slider, .square .multi-image-slider .Panel__item, .square .custom-grid-item img, .square .Media.Media--full,.square  .Media__wrap,.square  .Media__wrap img{
    aspect-ratio: 1;
    overflow: hidden;
}
img.landscape, .landscape .Media.Media--full,.landscape  .Media__wrap,.landscape  .Media__wrap img, .landscape .custom-grid-item img{
	aspect-ratio: 3/2;
	overflow: hidden;
}
img.portrait,.portrait .Media.Media--full,.portrait  .Media__wrap,.portrait  .Media__wrap img, .portrait .custom-grid-item img{
	aspect-ratio: 2/3;
	overflow: hidden;
}
.landscape .Media img{
    width: 100%;
    height: 100%;
}
figcaption.Media__caption.gradient{
    background: linear-gradient(0deg, rgba(0,0,0,.75) 20%, rgba(0,0,0,0) 100%);
}
/* Media Query Controllers*/
@media screen and (max-width: 63.9375em){
    .show-for-large {
        display: none !important;
    }
}
@media screen and (max-width: 39.9375em), screen and (min-width: 64em){
    .show-for-medium-only {
        display: none !important;
    }
}
@media screen and (max-width: 0em), screen and (min-width: 40em){
    .show-for-small-only {
        display: none !important;
    }
}
@media screen and (max-width:768px) {
    .fw-img-xs{
        width: 100% !important;
        height: unset !important;
        padding: 1rem 0 !important;
    }
}


@container (width >= 48rem) {
   .stats-6col .Stats__grid {
        grid-template-columns: repeat(6, 1fr);
        margin-top: 2rem;
    }

	.stat-large, .stat-medium, .stat-small{
		display: flex;
		justify-content: center;
		align-items:center;
	}
	.stat-large{
		grid-column: span 6;
		flex-direction: row;
		text-align: left;
	}
	.stat-medium{
		grid-column: span 2;
		flex-direction: column;
		justify-content: flex-start;
	}
	.stat-small{
		grid-column: span 3;
		flex-direction:row; 
		text-align: left;
		padding-left: 0
	}
	.stats-6col .Stats__value{
        margin: 1rem;
	}
	.stats-6col .Stats__item{
		margin:1rem 0;
	}
	.stats-6col .Stats__item:first-child{
		border-top: 0;
        border-left: 0.125rem solid var(--coral);
	}
	.stat-large .Stats__value{
		font-size: 8rem;
			margin-right: 2rem;
	}
	.stat-small .Stats__value {
    font-size: 3rem;
	width:30%
}
	.stat-small .Stats__desc{
		width:70%
	}
	.stats-6col .full-width{
		grid-column: span 6 !important;
	}
	.Stats.reduced-v-space{
		margin: 0 !important;
	}
	 .Stats.reduced-v-space .Stats__item{
		 padding: 1rem 0 !important;
	 }
}
.Stats__value .small-numbers {
    font: var(--h2);
    margin-bottom: 1rem;
}
/* Certificate Styles */
ul.cert-stream__body{
    column-count: 2
}
.cert-summary > :first-child{
    margin-top: 0;
}
.nogradient, .RouterGrid__grid.nogradient .RouterGrid__item:before, .nogradient .Media__wrap:before {
    background-image: none !important;
}
.SubNav.Panel--red a, .SubNav.Panel--gray a,  .SubNav.Panel--white a{
    color:black;
}
@media screen and (max-width: 768px){
    ul.cert-stream__body{
        column-count: 1
    }
}
.ou-auto-collapse-column-snippet img{
    max-width:300px !important;
}
/* Search Styles */
.gsc-search-box.gsc-search-box-tools {
    font-size: 13px;
    margin: 0 0 4px;
    width: 100%;
}
.gsc-control-cse.gsc-control-cse-en {
    border-color: unset;
    background-color: unset;
    font-family: unset;
    border: unset;
    width: unset;
    font-size: unset;
    display: flex;
    gap: .5rem;
    padding: 1rem;
    color: #ffffff !important;
}
.gsc-input-box {
    background-color: unset !important;
    color: #ffffff !important;
}
.gsc-control-cse.gsc-control-cse-en input {
    display: block;
    width: 100% !important;
    border: 0 !important;
    border-radius: 12rem;
    background: #333333 !important;
    font-size: clamp(1rem,3vw,1.5rem) !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    padding: 24px !important;
    max-width: 100%;
    text-overflow: ellipsis;
}
.gsc-control-cse.gsc-control-cse-en .gsc-expansionArea {
	border-color: #1A1A1A;
	background-color: #1A1A1A;
}
.gsc-control-cse.gsc-control-cse-en .gsc-expansionArea .gsc-webResult.gsc-result,
.gsc-control-cse.gsc-control-cse-en .gsc-expansionArea .gsc-webResult.gsc-result a.gs-title:active,
.gsc-control-cse.gsc-control-cse-en .gsc-expansionArea .gsc-webResult.gsc-result a.gs-title:visited,
.gsc-control-cse.gsc-control-cse-en .gsc-expansionArea .gsc-webResult.gsc-result a.gs-title:hover,
.gsc-control-cse.gsc-control-cse-en .gsc-expansionArea .gsc-webResult.gsc-result a.gs-title:link,
.gsc-control-cse.gsc-control-cse-en .gsc-expansionArea .gsc-webResult.gsc-result b,
.gsc-control-cse.gsc-control-cse-en .gsc-expansionArea .gsc-webResult.gsc-result a.gs-title:active b,
.gsc-control-cse.gsc-control-cse-en .gsc-expansionArea .gsc-webResult.gsc-result a.gs-title:visited b,
.gsc-control-cse.gsc-control-cse-en .gsc-expansionArea .gsc-webResult.gsc-result a.gs-title:hover b,
.gsc-control-cse.gsc-control-cse-en .gsc-expansionArea .gsc-webResult.gsc-result a.gs-title:link b,
.gsc-control-cse.gsc-control-cse-en .gsc-expansionArea .gsc-webResult.gsc-result .gs-snippet,
.gsc-control-cse.gsc-control-cse-en .gsc-expansionArea .gsc-webResult.gsc-result div.gs-visibleUrl
{
    border-color: #1A1A1A;
	background-color: #1A1A1A;
	color: #FFFFFF;
}
.gsc-results .gsc-cursor-box .gsc-cursor-page {
    background-color: #FFFFFF !important;
	color: #000000 !important;
	padding: 3px;
}
.gsc-results .gsc-cursor-box .gsc-cursor-page:hover,
.gsc-results .gsc-cursor-box .gsc-cursor-page.gsc-cursor-current-page {
	border: none;
    background-color: #FFFFFF !important;
	color: #000000 !important;
	font-weight: bold;
	padding: 12px;
}
.gcsc-more-maybe-branding-root {
	display: none;
}
.gsc-selected-option-container.gsc-inline-block {
    width: 105px;
}
.op-top{
	object-position:top;
}
.op-center{
	object-position:center;
}
.op-bot{
	object-position: bottom;
}
#myModal{
	display:none;
}
/* Required for Slide-show full screen */
.Media__caption, .Media--overlay .Media__wrap:before{
	pointer-events: none !important;
}
.Profile__visible img{
	width: 100%;
	height: 100%;
	object-fit:cover;
}
.Slider.static .Slider__item{
	width: 12rem;
	aspect-ratio: 1;
	height: unset;
}
/* Tabs Pane */
.tab-trigger-set {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    align-items: stretch;
}
.tab-trigger-list > [type="button"].active{
    background-color: #ff4438;
    border: 2px solid #ff4438;
    color: #000000;
    pointer-events: none;
}
.tab-trigger-list > [type="button"] {
	font-family: forza;
    width: fit-content;
    font-size: 1rem;
    font-weight: 300;
    padding: 0.3rem 2rem;
    background-color: black;
    color: #ffffff;
    border: 2px solid #000000;
    height: auto;
}
.otis-loader {
    width: 48px;
    height: 48px;
    border: 5px solid #eee;
    border-bottom-color: var(--coral);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }
    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    }
.gsheet-data-extractor .Table__scroll{
	max-height:800px
}
.gsheet-data-extractor td{
	white-space: nowrap !important;
}
.gsheet-data-extractor.freeze-first-row tr:first-child{
	    position: sticky;
		top: 0;
		background-color: #fff;
		box-shadow: 2px 2px black;
}
/* Content over image  */
/* Layout */
.content-over-image-row{
	width: 100%;
	height: auto;
	background-size: cover;
	display:flex;
}
.content-over-image-row.h-align-l{
	justify-content: left;
}
.content-over-image-row.h-align-r{
	justify-content:right;
}
.content-over-image-panel{
	padding: var(--gutter);
}
/* Widths */
.content-over-image-panel.w-30{
	width:30%
}
.content-over-image-panel.w-40{
	width:40%
}
.content-over-image-panel.w-50{
	width:50%
}
.content-over-image-panel.w-60{
	width:60%
}
.content-over-image-panel.w-70{
	width:70%
}
/* Color Themes */
.content-over-image-panel.panel-color-black{
	background-color: rgba(0,0,0,.8);
	color: var(--coral);
}
.content-over-image-panel.panel-color-black .wrapper{
	color: var(--coral);
}
.content-over-image-panel.panel-color-gray{
	background-color: rgba(var(--gray),0.8);
	color: black;
}
.content-over-image-panel.panel-color-gray .wrapper{
	color: black;
}
.content-over-image-panel.panel-color-white{
	background-color: rgba(255,255,255,0.8);
	color: black;
}
.content-over-image-panel.panel-color-white .wrapper{
	color: black;
}
/* .content-over-image-row.h-align-l .content-over-image-panel{
	border-right: 3px solid currentcolor;
}
.content-over-image-row.h-align-r .content-over-image-panel{
	border-left: 3px solid currentcolor;
} */
.content-over-image-panel.panel-color-black .wrapper p, .content-over-image-panel.panel-color-black .wrapper a, .content-over-image-panel.panel-color-black .wrapper div{color:white}
.content-over-image-panel.panel-color-black .wrapper ul{list-style-type:square;}
.content-over-image-panel.panel-color-black .wrapper li::marker{ color:var(--coral)}
.custom-grid{
	display: grid;
	gap: 2rem;
}
.grid-column-count-2{
	grid-template-columns: repeat(2, 1fr);
}
.grid-column-count-3{
	grid-template-columns: repeat(3, 1fr);
}
.grid-column-count-4{
	grid-template-columns: repeat(4, 1fr);
}
.grid-column-count-5{
	grid-template-columns: repeat(5, 1fr);
		gap: 1rem;
}
.grid-column-count-6{
	grid-template-columns: repeat(6, 1fr);
		gap: 2rem;
}
.feed-2col{
	padding: 0;
	margin-top: 0;
}
.feed-2col .Feed__grid{
	grid-template-columns: repeat(2,1fr)
}
@media screen and (max-width: 768px){
	.Columns--1-2, .Columns--2-1, .Columns--1-1{
		margin-bottom: 2rem
	}
	.feed-2col .Feed__grid{
	grid-template-columns: 1fr;
}
	.grid-column-count-3,.grid-column-count-4,.grid-column-count-5,.grid-column-count-6{
		display:grid;
		grid-template-columns: repeat(2, 1fr);
	}
}
/* Extension Instructor Bios */
.extension-bio-grid {
    margin-top: 3rem;
}
        .extension-bio-filters {
            display: flex;
            gap: 1rem;
            margin-bottom: 1rem;
            flex-wrap: wrap;
        }
        .extension-bio-card {
			cursor: pointer;
        }
.name-department-wrapper h3{
	    margin: .5rem 0;
}
.extension-bio-departments{
    margin:.5rem 0;
}
        .extension-bio-hidden {
            display: none !important;
        }
        .extension-bio-details {
    height: var(--height, 0);
			overflow:hidden;
    transition: height var(--transition), visibility var(--transition);
}
.extension-bio-card.open .extension-bio-details {
    height: var(--height, auto);
}
.extension-bio-card-trigger{
 display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    position: relative;
    width: 100%;
    border: 0;
    border-top: 0.125rem solid transparent;
    background: none;
    text-align: left;}
.extension-bio-card-trigger:after {
    content: "";
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    mask-image: url(../assets/plus.svg);
    transition: transform var(--transition);
    background: currentcolor;
  }
@media screen and (max-width:800){
	.extension-bio-card-trigger .name-department-wrapper *{
		font-size: 115%
	}
}
.extension-bio-card:hover .extension-bio-card-trigger:after{
	background: var(--coral)
}
.extension-bio-card-trigger:before{
	    content: "";
    position: absolute;
    right: 0px;
    bottom: 100%;
    left: 0px;
    opacity: 0.1;
    border-top: 0.125rem solid;
}
.extension-bio-grid:after {
    content: "";
    display: block;
    border-top: 0.125rem solid;
    opacity: 0.1;
}
.extension-bio-card.open
.extension-bio-card-trigger:after {
    transform: rotate(135deg);
}
.Split.new  .Split__caption.with-cta{
	    flex-direction: column;
    justify-content: end;
    align-items: baseline;
}
.Split.new  .Split__scroll {
  overflow: hidden;
  width: 100%;
  position: relative;
}
.Split.new  #scrollContainer {
  display: flex;
  transition: transform 0.5s ease-in-out;
  will-change: transform;
}
.Split.new  .Split__group__new {
	display: flex;
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
}
@media (min-width: 64rem) {
   .Split.new  .Split__slider {
        margin-top: var(--space);
        padding-right: 0;
        overflow: hidden;
    }
}
.Split.new .Split__scroll{
	overflow:visible;
	gap:0
}

@media screen and (max-width: 768px){
	body{
		overflow-x:hidden;
	}
	.Split.new .Split__caption.with-cta{
		justify-content: start;
		background-color: rgba(0,0,0,.5);
		padding: 1rem;
	}
	.Split__toggle:after{
		display:none
	}
	.Split__item[data-active] {
    flex: 3;
}

}

	body {
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
}