/*  ==========================================================================
    Master stylesheet for 国产福利资源 CoTA
    Author: Charlotte Koh, 国产福利资源 University Communications and Marketing
    Author URL: http://www.usf.edu/ucm/
    ==========================================================================  */

/*  ==========================================================================
    Clearfix, Collapsing and Accessibility
    ==========================================================================  */
    .secondary-navigation .collapsible-heading-toggle { padding-top: 1em; padding-bottom: 1em; display: block; text-transform: uppercase; }

/*  ==========================================================================
    Utilities
    ==========================================================================  */
    .content .u-wrapper {
        -webkit-box-sizing: border-box; 
        -moz-box-sizing: border-box; 
        box-sizing: border-box;
    }

    .u-highlight { color: #9ccb3b; }

    a.u-button {
        display: block;
        
        padding: 0.75em 0.5em;
        font-size: 0.813em;
        font-weight: 600;
        text-align: center;
        text-transform: uppercase;
        background-color: #9ccb3b;
        color: #000;
        position: relative;
        transform: perspective(1px) translateZ(0);
        
        -webkit-transition: color 0.3s ease;
        -moz-transition: color 0.3s ease;
        -o-transition: color 0.3s ease;
        transition: color 0.3s ease;
    }
    a.u-button:before {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: #000;
        transform: scaleX(0);
        transform-origin: 50%;

        -webkit-transition: transform 0.3s ease-out;
        -moz-transition: transform 0.3s ease-out;
        -o-transition: transform 0.3s ease-out;
        transition: transform 0.3s ease-out;
    }
    a.u-button:hover,
    a.u-button:active,
    a.u-button:focus {
        color: #fff;
    }

    a.u-button:hover:before,
    a.u-button:active:before,
    a.u-button:focus:before {
        transform: scaleX(1);
    }

	@media (min-width: 700px), print {
        .u-flex--large { display: flex; justify-content: space-around; }

        .u-flexItem--large,
        .u-flexItem--largeExtra { flex: 1; margin-top: 0; }

        .u-flexItem--large + .u-flexItem--large, 
        .u-flex--reverse > .u-flexItem--large { margin-left: 1.5em; }
        
        .u-flexItem--largeExtra + .u-flexItem--largeExtra,
        .u-flex--reverse > .u-flexItem--largeExtra { margin-left: 3em;}

        .u-flex--reverse > .u-flexItem--large:last-child,
        .u-flex--reverse > .u-flexItem--largeExtra:last-child { margin-left: 0; }
    }

/*  ==========================================================================
    Type
    ==========================================================================  */
	.content { color: #333; }

    .heading {
        font: 700 1.5em/1.5em "Open Sans", sans-serif;
        letter-spacing: 3px;
        text-transform: uppercase;
    }

    .heading--gallery {
        border-bottom: 1px solid #e0e1e2;
        padding-bottom: 0.66em;
    }

    .heading--section {
        padding-bottom: 0.75em;
        position: relative;
    }
    .heading--section:after {
        border-bottom: 1px solid #9ccb3b;
        bottom: 0;
        content: "";
        left: 0;
        position: absolute;
        width: 150px;
        -webkit-transition: width 0.5s ease;
        -moz-transition: width 0.5s ease;
        -o-transition: width 0.5s ease;
        transition: width 0.5s ease;
    }
    a.heading--section, a.heading--section:visited {
        color: #333;
		display: block;
        font-weight: 600;
    }
    a.heading--section:hover,
    a.heading--section:active,
    a.heading--section:focus {
        text-decoration: none;
    }
    a.heading--section:hover:after,
    a.heading--section:active:after,
    a.heading--section:focus:after {
        width: 100%;
    }

	h2:not(.header_title) {  font: 600 1.5em/1.25em "Open Sans", sans-serif; }
    * + h2:not(.header_title) { margin-top: 1em; }

    h3 { font: 600 1em/1.5em "Open Sans", sans-serif; text-transform: uppercase; letter-spacing: 1px; }
	h4 { font: 600 0.93em/1.6em "Open Sans", sans-serif; text-transform: uppercase; }
	h5, h6 { font: 700 0.93em/1.6em "Open Sans", sans-serif; }
	h6 { font-style: italic; }
    

/*  ==========================================================================
    Layout
    ==========================================================================  */
    .content, .content .homeTitle + * { margin-top: 0; }
	.content:not(.content--home) > *:first-child { margin-top: 4em; }

	.secondaryNav, .additionalContent {
        border-top: 1px solid #e6e7e8;
        margin-top: 2.5em;
        padding-top: 2.5em;
    }
    .secondaryNav a {
        color: #555;
        font-weight: 400;
    }
    .secondaryNav a:hover,
    .secondaryNav a:active,
    .secondaryNav a:focus,
    a.secondaryNav_link--active {
        color: #000;
    }
    a.secondaryNav_link--active { font-weight: 700; }

    @media screen and (min-width: 500px), print {
        .content > * + * { margin-top: 4em; }  
		.content--home + footer { margin-top: 0; }
    }
    @media screen and (min-width: 700px), print {
        .pageContent { flex: 4; }
        .secondaryNav {
            border-top: none;
            padding-top: 0;
            margin-top: 0;
        }
    }

/*  ==========================================================================
    Page Banner
    ==========================================================================  */
    .pageBanner, .content:not(.content--home):before {
        min-height: 200px;
        position: relative;

        -webkit-transition: min-height 1s ease;
        -moz-transition: min-height 1s ease;
        -o-transition: min-height 1s ease;
        transition: min-height 1s ease;
    }
	.content:not(.content--home):before {
		content: "";
		display: block;
		margin-top: 0;
		width: 100%;
	}

    #pageBanner_video, #pageBanner_control, .pageBanner_iframe { display: none; }

    .pageBanner_content {
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 2px;
        padding-top: 3em;
        padding-bottom: 3em;
        margin-top: 0;
		-webkit-transition: min-height 1s ease;
        -moz-transition: min-height 1s ease;
        -o-transition: min-height 1s ease;
        transition: min-height 1s ease;
    }
    .pageBanner_caption {
        font: 300 24px/34px "Open Sans", sans-serif;
        margin-top: 1em;
		-webkit-transition: font-size 1s ease;
        -moz-transition: font-size 1s ease;
        -o-transition: font-size 1s ease;
        transition: font-size 1s ease;
    }
    .pageBanner_tagInner, .pageBanner_captionInner { background: rgba(0, 0, 0, 0.65); }
    .pageBanner_tagInner { padding: 0.25em 0.5em; }

    .pageBanner_captionInner {
        padding: 0 .25em;
        -webkit-box-decoration-break: clone;
        box-decoration-break: clone;
    }
    a.pageBanner_button {
        display: inline-block;
        padding: 0.75em 1.5em;
        letter-spacing: 4px;
    }
    a.pageBanner_button:before { background-color: #006747; }

    @media screen and (min-width: 500px), print {
        .pageBanner_caption {
            font: 300 24px/34px "Open Sans", sans-serif;
            margin-top: 1em;
            max-width: 300px;
        }
    }

    @media screen and (min-width: 850px) {
        .pageBanner, .content:not(.content--home):before { min-height: 500px; }
		
        .pageBanner--home {
            min-height: 450px;
            overflow: hidden;
        }
        .pageBanner_iframe {
            padding-bottom: 56.25%;
            overflow: hidden;
        }
        .pageBanner_iframe iframe,
        .pageBanner_iframe object,
        .pageBanner_iframe embed {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            pointer-events: none;
            height: 100%;
        }
        video#pageBanner_video, .pageBanner_iframe { 
            margin-top: 0;
            position: absolute;
            display: block;

            top: 50%;
            left: 50%;
            min-width: 101%;
            min-height: 101%;
            width: auto;
            height: auto;
            -ms-transform: translateX(-50%) translateY(-50%);
            -moz-transform: translateX(-50%) translateY(-50%);
            -webkit-transform: translateX(-50%) translateY(-50%);

            background: url('/_resources/images/home-header.jpg') no-repeat center center;
            background-size: cover;
        }
        #pageBanner_control {
            position: absolute;
            bottom: 1.5em;
            left: 1.5em;
            z-index: 10;
            display: block;
            cursor: pointer;
            font-size: 0.813em;
            font-weight: 600;
            text-align: center;
            text-transform: uppercase;
            background-color: #9ccb3b;
            color: #000;

            -webkit-transition: background-color 0.3s ease;
            -moz-transition: background-color 0.3s ease;
            -o-transition: background-color 0.3s ease;
            transition: background-color 0.3s ease;
        }
        #pageBanner_control:hover,
        #pageBanner_control:active,
        #pageBanner_control:focus {
            background-color: #000;
        }

        .pageBanner_pause { background: url("/_resources/images/arts/video/pause-hover.png") no-repeat center center; }
        .pageBanner_play { background: url("/_resources/images/arts/video/play-hover.png") no-repeat center center; }
		
        .pageBanner_controlIcon {
            margin: 0 auto;
            opacity: 1;
            -webkit-transition: opacity 0.3s ease;
            -moz-transition: opacity 0.3s ease;
            -o-transition: opacity 0.3s ease;
            transition: opacity 0.3s ease;
        }
        #pageBanner_control:hover .pageBanner_controlIcon,
        #pageBanner_control:active .pageBanner_controlIcon,
        #pageBanner_control:focus .pageBanner_controlIcon {
            opacity: 0;
        }
        .pageBanner_content {
            min-height: 400px;
            position: relative;
        }
        .pageBanner_caption {
            line-height: 55px;
            font-size: 40px;
            margin-top: 0.6em;
            max-width: 300px;
        }
        .pageBanner_text, .pageBanner_link {
            position: absolute;
            bottom: 80px;
        }
        .pageBanner_text { left: 20px; }
        .pageBanner_link { right: 20px; }
        .pageBanner_tag, a.pageBanner_button { font-size: 1.125em; }
        a.pageBanner_button { padding: 0.75em 2em; }
    }

    @media screen and (min-width: 1000px) { 
        .pageBanner--home {
            min-height: 560px;
        }
        .pageBanner_content {
            min-height: 510px;
            position: relative;
        }

    }

    @media screen and (min-width: 1320px) { 
        .pageBanner--home { min-height: 740px; }
		
        .pageBanner_content {
            min-height: 690px;
            position: relative;
        }
        .pageBanner_caption {
            line-height: 74px;
            font-size: 54px;         
            max-width: 400px;
            margin-top: 1em;
        }
    }




/*  ==========================================================================
    Tables
    ==========================================================================  */
	table { 
		width: 100%; 
		margin-bottom: 1.5em;
		table-layout: fixed;
	}
	caption {
		padding: .625em; 
		font-weight: bold;
		font-size: 1.2em; 
		line-height: 1.25em;
		text-align: left;
	}
	thead th {
		border-bottom: 3px solid #DCDDDE;
	}
	tr + tr td {
		border-top: 1px solid #DCDDDE;
	}
	th, td {
		padding: .813em;
		text-align: left;
	}
	th {
		font-weight: bold;
	}
	.table-striped tbody tr:nth-child(odd), 
	.table-bordered-striped tbody tr:nth-child(odd) {
		background-color: #ECEDED;
	}
	.table-striped td, 
	.table-striped tbody th {
		border: 2px solid #fff;
	}
	.lt-ie9 .table-striped td {
		border: none;
		border-top: 1px solid #DCDDDE;
	}
	.table-bordered, 
	.table-bordered-striped {
		border: 1px solid #DCDDDE;
	}
	.table-bordered td + td, 
	.table-bordered thead th + th, 
	.table-bordered-striped td + td, 
	.table-bordered-striped thead th + th {
		border-left: 1px solid #DCDDDE;
	}

	table a[href^=mailto] {
		overflow-wrap: break-word;
	}

/*  ==========================================================================
    Tables - Responsive
    ==========================================================================  */
	.responsive-table, 
	.responsive-table caption, 
	.responsive-table thead, 
	.responsive-table tbody, 
	.responsive-table tr, 
	.responsive-table th, 
	.responsive-table td {
		display: block;
	}
	.responsive-table thead, 
	.responsive-table thead th {
		width:1px;
		height:1px;
		position:absolute;
		left:-9999px;
		top:auto;
		overflow:hidden;
	}
	.responsive-table tr:before, 
	.responsive-table tr:after {
		content: '';
		display: table;
	}
	.responsive-table tr:after {
		clear: both;
	}
	.responsive-table tr {
		*zoom: 1;
	}
	.responsive-table th, 
	.responsive-table td {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;    
		box-sizing: border-box;         
	}
	.responsive-table td {
		width: 100%;
		padding-left: 50%;
		position: relative;
		float: left;
		border: none;
		border-bottom: 1px solid #DCDDDE;
		text-align: left;
	}
	.responsive-table td:before {
		width: 45%;
		padding: 10px;
		position: absolute;
		top: 0;
		left: 0;
		content: attr(data-usf-tblcolumn);
		font-weight: bold;
	}
	.responsive-table tbody tr:nth-child(odd) {
		background-color: #ECEDED;
	}
	.responsive-table tbody tr:nth-child(odd) td {
		border-bottom: 1px solid #fff;
	}
	.responsive-table.table-bordered, 
	.responsive-table.table-bordered-striped {
		border: none;
	}
	.responsive-table.table-bordered td + td, 
	.responsive-table.table-bordered thead th + th, 
	.responsive-table.table-bordered-striped td + td, 
	.responsive-table.table-bordered-striped thead th + th {
		border-left: none;
	}

/*  ==========================================================================
    Snippet - Media
    ==========================================================================  */
    .media-caption { margin: 0; font-style: italic; }
	.media-large, [class*="media-medium"], [class*="media-small"] { margin-bottom: 1.5em; }
	.media-large img, [class*="media-medium"] img, [class*="media-small"] img { max-width: 100%; }

    [class*="media-small"] { width: 100px; }

    .media-small-right { float: right; margin-left: 1.5em; }
    .media-small-left { float: left; margin-right: 1.5em; }

	@media (min-width: 515px), print {
		[class*="media-medium"] { width: 44%; }

		.media-medium-right { float: right; margin-left: 1.5em; }
		.media-medium-left { float: left; margin-right: 1.5em; }
	}

/*  ==========================================================================
    Snippet - Image Grid
    ==========================================================================  */
	[class*="grid-image"] { margin-bottom: 1.5em; }
	[class*="grid-image"] img { max-width: 100%; }

/*  ==========================================================================
    Snippet - Toggle
    ==========================================================================  */
	.toggle-section .toggle {
		margin-bottom: 1.5em;
		font-weight: bold;
	}
	.toggle-section .collapsible-heading a {
		padding-left: 2.25em;
		display: block;
		background: url("/_resources/images/global/elements/toggle-sprite.png") 0px -392px no-repeat;
		color: #7FB539;
	}
	.toggle-section .collapsible-heading-collapsed a, .toggle-section .collapsible-heading-collapsed a:visited {
		background: url("/_resources/images/global/elements/toggle-sprite.png") 0px -196px no-repeat;
		color: #057B56;
	}
	.toggle-section .collapsible-heading-collapsed a:hover, .toggle-section .collapsible-heading-collapsed a:focus {
		background: url("/_resources/images/global/elements/toggle-sprite.png") 0px -296px no-repeat;
		color: #7FB539;
	}
	.toggle-section .collapsible-content { padding-left: 2.25em; }

/*  ==========================================================================
    General Gallery Module
    ==========================================================================  */
    .galleryItem_image { margin: 0 auto; }

/*  ==========================================================================
    Media Module
    ==========================================================================  */
    .pageMedia {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
    }

    .pageMedia iframe, 
    .pageMedia object,
    .pageMedia embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .pageMedia-holder + * {
        border-top: 1px solid #e6e7e8;
        padding-top: 2.5em;
        margin-top: 2.5em;
    }
    .pageMedia-holder + h2 {
        padding-top: 1.66em;
        margin-top: 1.66em;
    }

/*  ==========================================================================
    Rotator Module
    ==========================================================================  */
    .rotator { position: relative; }

	.rotator .flex-viewport { margin-top: 0; }

    .rotator_prev, 
    .rotator_next, 
    .rotator_controls,
    .rotator_controlBar {
        z-index: 3;
    }
    .rotator_prev, 
    .rotator_next {
        position: absolute;
        top: 171px;
        display: block;
        margin: 0;
		-webkit-filter: drop-shadow(1px 0 5px #000) drop-shadow(-1px 0 5px #000);
		filter: drop-shadow(1px 0 5px #000) drop-shadow(-1px 0 5px #000);
    }
    .rotator_prev { left: 2em; }
    .rotator_next { right: 2em; }

    .rotator_controls, 
    .rotator_controlBar {
        display: none;
    }

	.rotator_slides { margin-top: 0; }
    .rotator_slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
    html[xmlns] .rotator_slides {display: block;}
    * html .rotator_slides {height: 1%;}

    .js .rotator_slide {
        display: none; 
        margin-top: 0;
        -webkit-backface-visibility: hidden; /* Hide the slides before the JS is loaded. Avoids image jumping */
    } 
	.rotator_slide:first-child { display: block; }

    .rotator_image {
		display: block;
        height: 500px;

        -webkit-transition: min-height 1s ease;
        -moz-transition: min-height 1s ease;
        -o-transition: min-height 1s ease;
        transition: min-height 1s ease;
		
		/* Accessibility Improvement. Added to improve focus of the current slide. */
		-webkit-transition: all .5s ease-out;
  		transition: all .5s ease-out;
  		box-shadow: inset 0 0 0 4px rgba(255, 0, 0, 0);
    }

	/* Accessibility Improvement. Added to improve focus of the current slide. */
	a.rotator_image:hover,
	a.rotator_image:focus,
	a.rotator_image:active {
	  box-shadow: inset 0 0 0 8px #009374;
	  -webkit-transition: all .5s ease-out;
	  transition: all .5s ease-out;
	}
    .rotator_title { font-weight: 700; }
    .rotator .collapsible-heading-status { width: auto; height: auto; position: static; left: 0; top: 0; overflow: auto; }
    .rotator_caption { margin-top: 0; }

    .rotator_overlay {
        position: relative;
        height: 500px;
		margin-top: 0;
    }
    .rotator_overlayText {
        position: absolute;
        bottom: 0px;
        left: 0px;
        background: rgba(0, 0, 0, 0.75);
        padding: 1em;
    }
    .rotator_overlayText span {
        color: #fff;
        font-weight: 300;
    }

	@media (max-width: 849px) {
		@supports (aspect-ratio: auto) {
			.rotator_image {
				height: auto;
				aspect-ratio: 3/2;
			}
			.rotator_overlay {
				position: static;
				height: auto;
			}
			.rotator_prev, .rotator_next {
				top: calc(50% - 80px);
			}
			.galleryItem .rotator_prev, .galleryItem .rotator_next {
				top: 60px;
			}
			.rotator_prev img, .rotator_next img {
				height: 100px;
			}
		}
	}

    @media (min-width: 850px), print {
        .rotator_slide { position: relative; }
		
        .rotator_overlay {
            position: relative;
            height: 500px;
        }
        .rotator_overlayText {
            position: absolute;
            bottom: 80px;
            left: 20px;
            width: 50%;
            padding: 0;
            background: none;
        }
        .rotator_overlayText span {
            padding: 0 .25em;
            -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
            background: rgba(0, 0, 0, 0.75);
            font-size: 1.5em;
            line-height: 1.42em;
        }
		.rotator_prev, 
		.rotator_next {
			filter: drop-shadow(1px 0 10px #000) drop-shadow(-1px 0 10px #000);
			-webkit-filter: drop-shadow(1px 0 10px #000) drop-shadow(-1px 0 10px #000);
		}
        .rotator_controls {
            position: absolute;
            display: inline;
            width: 100%;
            margin: 0;
            text-align: center;
            list-style: none;
            top: 450px;
        }
        .rotator_controlItem {
            display: inline-block;
            position: relative;
        }
        .rotator_controlItem + .rotator_controlItem { margin: 0 0 0 1.5em; }
		
        .rotator_controlLink, 
        .rotator_controlLink:visited {
            width: 15px;
            height: 15px;
            display: block;
            background: rgba(255,255,255, 0.4);
            border-radius: 15px;
            -webkit-transition: background 0.5s ease;
            -moz-transition: background 0.5s ease;
            -o-transition: background 0.5s ease;
            transition: background 0.5s ease;
        }
        .rotator_controlLink.flex-active, 
        .rotator_controlLink:hover, 
        .rotator_controlLink:active, 
        .rotator_controlLink:focus {
            background: rgba(255,255,255, 1);
        }

        .rotator--bar { padding-bottom: 15px; }
		
        .rotator_controlBar {
            display: flex;
            position: absolute;
            bottom: 0px;
            left: 0;
            width: 100%;
        }
        .rotator_controlBarItem + .rotator_controlBarItem { margin-left: 10px; }
		
        .rotator_controlBarLink {
            height: 10px;
            display: block;
            background-color: #000;
            -webkit-transition: background 0.3s ease;
            -moz-transition: background 0.3s ease;
            -o-transition: background 0.3s ease;
            transition: background 0.3s ease;
        }
        .rotator_controlBarLink.flex-active, 
        .rotator_controlBarLink:hover, 
        .rotator_controlBarLink:active, 
        .rotator_controlBarLink:focus {
            background-color: #9ccb3b;
        }
    }

	@media screen and (min-width: 1200px) {
		.rotator_image, 
		.rotator_overlay {
			height: 700px;
		}
		.rotator_prev, 
		.rotator_next {
			top: 271px;
		}
		.rotator_controls { top: 650px; }
	}

	@media screen and (min-width: 1440px) {
		.rotator_image, 
		.rotator_overlay {
			height: 1000px;
		}
		.rotator_prev, 
		.rotator_next {
			top: 421px;
		}
		.rotator_controls { top: 950px; }
	}

/*  ==========================================================================
    Intro Module
    ==========================================================================  */
    .intro_heading {
        padding: 0 20px 0.66em;
        position: relative;
        text-align: center;
    }
    .intro_heading:before {
        border-bottom: 1px solid #dcddde;
        content: "";
        left: 0;
        position: absolute;
        top: 50%;
        margin-top: -0.33em;
        width: 100%;
        z-index: -1;
    }
    .intro_heading:after {
        border-bottom: 1px solid #9ccb3b;
        bottom: 0;
        content: "";
        left: 50%;
        margin-left: -55px;
        position: absolute; 
        width: 110px; 

        -webkit-transition: width 1s ease, margin-left 1s ease;
        -moz-transition: width 1s ease, margin-left 1s ease;
        -o-transition: width 1s ease, margin-left 1s ease;
        transition: width 1s ease, margin-left 1s ease;
    }
    .intro_heading:hover:after {
        width: 200px;
        margin-left: -100px;
    }
    .intro_heading span {
        background-color: #fff;
        display: inline-block;
        padding: 0 0.5em;
    }
    .intro_text {
        text-align: center;
        max-width: 625px;
        margin-left: auto;
        margin-right: auto;
    }
    .intro_items { text-align: center; }
    .intro_item {
        text-transform: uppercase;
        font-size: 0.813em;
        letter-spacing: 1px;
    }
    .intro_item + .intro_item {
        margin-top: 1em;
        padding-top: 1em;
        border-top: 1px solid #cecece;
    }
    .intro_link { font-weight: 400; }

    @media (min-width: 500px), print {
        .intro_item { display: inline-block; }
		
        .intro_item + .intro_item {
            margin: 0.25em 0 0 1em;
            padding: 0 0 0 1em;
            border-top: none;
            border-left: 1px solid #cecece;
        }
		.intro_item:nth-child(2) {
			border-left: none;
			margin-left: 0;
		}
    }

/*  ==========================================================================
    Program Display Module
    ==========================================================================  */
    .programDisplay + .programDisplay { margin-top: 1.5em; }
    .programDisplay_item--filler { display: none; }

    .programDisplay_link {
        display: block;
        height: 320px;
        position: relative;
        overflow: hidden;
    }
    .programDisplay_link:before {
        position: absolute;
        bottom: 0;
        left: 0;
        content: "";
        width: 100%;
        height: 320px;
        -webkit-transition: transform 1s ease;
        -moz-transition: transform 1s ease;
        -o-transition: transform 1s ease;
        transition: transform 1s ease;
    }
    .programDisplay_link:hover:before,
    .programDisplay_link:focus:before,
    .programDisplay_link:active:before {
        transform: scale(1.15);
    }
    .programDisplay_link:hover .programDisplay_name,
    .programDisplay_link:focus .programDisplay_name,
    .programDisplay_link:active .programDisplay_name {
        text-decoration: underline;
    }
    .programDisplay_text {
        padding: 1.5em 2em;
        font-weight: 300;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: rgba(0,0,0,0.8);
        -webkit-box-sizing: border-box; 
        -moz-box-sizing: border-box; 
        box-sizing: border-box;
    }
    .programDisplay_highlight {
        color: #9ccb3b;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 0.813em;
    }
    .programDisplay_name {
        margin-top: 0;
        color: #fff;
        font-size: 1.25em;
    }
    
    @media (min-width: 700px), print {
        .programDisplay_item { flex: 3; }
        .programDisplay_item--filler + .programDisplay_item { margin-left: 0; }
        .programDisplay_text {
            width: 65%;
            max-width: 300px;
        }
    }
    @media screen and (min-width: 850px) {
        .programDisplay_item--filler {
            flex: 1;
            display: block;
        }
        .programDisplay_item--filler + .programDisplay_item {
            margin-left: 1.5em;
        }
    }
	@media screen and (min-width: 1600px) {
		.programDisplay_link,
		.programDisplay_link:before {
			height: 500px;
		}
	}

/*  ==========================================================================
    Programs Module
    ==========================================================================  */
    .programForm { display: inline-block; }

    .program_selector {
        margin-top: 0;
        width: 200px;
		border: 1px solid #004832;
		color: #006747;
		text-transform: uppercase;
		padding: .5em;
		cursor: pointer;
    }
    .program_option { margin-top: 0; }

    .programs {
        justify-content: flex-start;
        flex-wrap: wrap;
        padding-right: 1.5em;
        max-width: 320px;
        margin: 2.5em auto 0;
    }
    .programs_title { padding-left: 1em; }

    .programs_message {
        padding-left: 1.5em;
        display: none;
    }
    .program_item {
        margin-left: 24px;
        margin-top: 24px;
        position: relative;
        max-width: 320px;
        overflow: hidden;
        flex: none;
    }
    .program_link:hover .program_name,
    .program_link:active .program_name,
    .program_link:focus .program_name {
        text-decoration: underline;
    }
    .program_image {
        -webkit-transition: transform 1s ease;
        -moz-transition: transform 1s ease;
        -o-transition: transform 1s ease;
        transition: transform 1s ease;
    }
    .program_link:hover .program_image,
    .program_link:active .program_image,
    .program_link:focus .program_image {
        transform: scale(1.15);
    }
    .program_text {
        position: absolute;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.8);
        width: 100%;
        padding: 1em 1.5em;
        -webkit-box-sizing: border-box; 
        -moz-box-sizing: border-box; 
        box-sizing: border-box;
    }
    .program_name {
        font-weight: 400;
        color: #fff;
        font-size: 1.25em;
    }
    .program_types {
        margin-top: 0;
        font-weight: 400;
        color: #9ccb3b;
        font-size: 0.75em;
    }
    .program_type { display: inline; }
    .program_type + .program_type { margin-left: 1em; }

	.filter--school, .filter--program {
		padding: 0.5em;
		text-transform: uppercase;
		color: #006747;
		background-color: #EEE;
		border: 1px solid #004832;
		cursor: pointer;
	}
	.filter--program:hover,
	.filter--program:active,
	.filter--program:focus{
	  text-decoration: underline;
	  background-color: #DDD;
	}

    button.filter--clear, 
	button.filter--clear:visited {
		color: #333;
		background-color: #EEE;
		border: 1px solid #222;
		padding: .5em;
		cursor: pointer;
	}
    button.filter--clear:hover, 
    button.filter--clear:active, 
    button.filter--clear:focus {
		background-color: #DDD;
		text-decoration: underline;
    }
    a.activeFilter {
        background-color: #10805e;
        color: #fff;
        text-decoration: none;
    }

	button.activeFilter {
        background-color: #006747;
        color: #fff;
        text-decoration: none;
    }
	button.activeFilter:hover, button.activeFilter:focus, button.activeFilter:active {
		text-decoration: underline;
		background-color: #004832;
	}


    @media (min-width: 736px), print {
        .programs { max-width: 688px; }
    }
    @media (min-width: 1080px), print {
        .programs { max-width: 1032px; }
    }
    @media (min-width: 1424px), print {
        .programs { max-width: 1376px; }
    }

/*  ==========================================================================
    Info Blocks Module
    ==========================================================================  */
    .infoBlocks {
        border-top: 1px solid #dcddde;
        padding-top: 1.5em;
    }
	
	.infoBlocks:last-child .infoBlock + .infoBlock { padding-bottom: 4.5em; }
/*     .infoBlocks + .infoBlocks .infoBlock + .infoBlock { padding-bottom: 4.5em; } */

    .infoBlock_heading .heading--section:after { width: 80px; }

    .infoBlock_link { display: block; }
    
    .infoBlock_link:hover, 
    .infoBlock_link:active, 
    .infoBlock_link:focus {
        text-decoration: none;
    }
    
    .infoBlock_date {
        text-transform: uppercase;
        font-size: 0.813em;
        color: #555;
        position: relative;
        padding-bottom: 2px;
    }
    .infoBlock_date:after {
        border-bottom: 1px solid #9ccb3b;
        bottom: 0;
        content: "";
        left: 0;
        position: absolute; 
        width: 0px; 

        -webkit-transition: width 0.5s ease;
        -moz-transition: width 0.5s ease;
        -o-transition: width 0.5s ease;
        transition: width 0.5s ease;
    }
    .infoBlock_link:hover .infoBlock_date:after, 
    .infoBlock_link:active .infoBlock_date:after, 
    .infoBlock_link:focus .infoBlock_date:after {
       width: 100%;
    }
    .infoBlock_headline {
        margin-top: 0;
        font-weight: 400;
        color: #333;
    }
    .infoBlock_imageLink {
        display: block;
        overflow: hidden;
    }
    .infoBlock_image {
        -webkit-transition: transform 1s ease;
        -moz-transition: transform 1s ease;
        -o-transition: transform 1s ease;
        transition: transform 1s ease;
    }
    .infoBlock_imageLink:hover .infoBlock_image,
    .infoBlock_imageLink:active .infoBlock_image,
    .infoBlock_imageLink:focus .infoBlock_image {
        transform: scale(1.15);
    }

    .infoBlock_cal {
        list-style: none;
        margin-left: 0;
    }
    a.infoBlock_calLink { 
        font-weight: 400;
        color: #333;
    }
    .infoBlock_calDate {
        background-color: #2c2e32;
        color: #fff;
        width: 70px;
        height: 70px;
        border-radius: 70px; 
        text-align: center;
        text-transform: uppercase;
        float: left;

        -webkit-transition: color 0.3s ease;
        -moz-transition: color 0.3s ease;
        -o-transition: color 0.3s ease;
        transition: color 0.3s ease;

        position: relative;
        transform: perspective(1px) translateZ(0);
    }
    .infoBlock_calDate:before {
        content: "";
        position: absolute;
        z-index: -1;
        top: -1px;
        left: -1px;
        background-color: #9ccb3b;
        width: 72px;
        height: 72px;
        border-radius: 72px; 
        transform: scaleX(0);
        transform-origin: 50%;

        -webkit-transition: transform 0.3s ease-out;
        -moz-transition: transform 0.3s ease-out;
        -o-transition: transform 0.3s ease-out;
        transition: transform 0.3s ease-out;
    }
    .infoBlock_calLink:hover .infoBlock_calDate,
    .infoBlock_calLink:active .infoBlock_calDate,
    .infoBlock_calLink:focus .infoBlock_calDate {
        color: #333;
    }
    .infoBlock_calLink:hover .infoBlock_calDate:before,
    .infoBlock_calLink:active .infoBlock_calDate:before,
    .infoBlock_calLink:focus .infoBlock_calDate:before {
        transform: scaleX(1);
    }
    .infoBlock_calInfo { margin: 0 0 0 100px; }

    .infoBlock_calMonth, 
    .infoBlock_calDay, 
    .infoBlock_calMessage {
        width: 70px;
        float: left;
        margin-top: 0;
        line-height: 1.15em;
    }
    .infoBlock_calMonth {
        font-size: 0.75em;
        padding-top: 15px;
    }
    .infoBlock_calDay { font-size: 1.375em; }

    .infoBlock_calTime {
        margin-top: 0;
        font-weight: 700;
    }

    .infoBlock_calMessage { font-size: 0.75em; }
    .infoBlock_calMessage:first-child { padding-top: 20px; }

    .infoBlock_buttons {
        list-style: none;
        margin-left: 0;
        margin-top: 3em;
    }

    @media (min-width: 500px), print {
        .infoBlock_calEvent, .infoBlock_calTime { width: 70%; }

        .infoBlock_button + .infoBlock_button { margin-left: 0.5em; }
    }


    @media (min-width: 700px), print {
        .infoBlocks { padding: 0 1.5em; }
        .infoBlocks + .infoBlocks { margin-top: 0; }
        .infoBlock { padding: 2.5em 3em 2.5em 0; }
		
        .infoBlock + .infoBlock {
            margin-top: 0;
            border-left: 1px solid #dcddde;
            padding: 2.5em 0 2.5em 3em;
        }
		
        .infoBlocks:last-child .infoBlock + .infoBlock { padding-bottom: 9em; }
/*         .infoBlocks + .infoBlocks .infoBlock { padding-bottom: 9em; } */
    }

    @media (min-width: 850px), print {
        .infoBlock_calEvent, .infoBlock_calTime { width: 80%; }
    }

/*  ==========================================================================
Component - Stylized Header
==========================================================================  */

/* BASIC STYLIZED HEADER */

[class^=stylized-header-container] {
	position: relative;
	overflow: hidden;
}

[class^=stylized-header-container] .stylized-header {
	color: #006747;
	font-family:"Barlow Condensed", sans-serif;
	letter-spacing: 1px;
	padding: 0.25em 1em 0.25em 0;
	text-transform: uppercase;
	display: inline-block;
	border-right: 1px solid #9ccb3b;
	-ms-transform: skewX(-30.25deg);
	-moz-transform: skewX(-30.25deg);
	-webkit-transform: skewX(-30.25deg);
	transform: skewX(-30.25deg);
}

[class^=stylized-header-container] .stylized-header span {
	display: inline-block;
	-ms-transform: skewX(30.25deg);
	-moz-transform: skewX(30.25deg);
	-webkit-transform: skewX(30.25deg);
	transform: skewX(30.25deg);
}

[class^=stylized-header-container] .stylized-header:after {
	border-top: 1px solid #9ccb3b;
	content: "";
	position: absolute;
	top: 50%;
	left: calc(100%);
	height: 1px;
	width: 100vw;
}

/* CENTERED STYLIZED HEADER */

.stylized-header-container--centered{
	text-align: center;
}

.stylized-header-container--centered .stylized-header{
	border-left: 1px solid #9ccb3b;
	padding: 0.25em 1em;
}	

.stylized-header-container--centered .stylized-header:before{
	border-top: 1px solid #9ccb3b;
	content: "";
	position: absolute;
	top: 50%;
	right: calc(100%);
	height: 1px;
	width: 100vw;
}

/* HEADER LEVEL STYLING */

div[class^=stylized-header-container] h2{
	font-size: 1.75em;
}

div[class^=stylized-header-container] h3{
	font-size: 1.5em;
}

/*  ==========================================================================
Component - Callout Text
==========================================================================  */
.c-calloutText {
	background-color: #efeff0;
	border: 1px solid #b2b2b2;
	padding: 1.5em;
}	
.c-calloutText--green {
	background-color: #d9e8e4;
	border-color: #006747;
}
.c-calloutText--red {
	background-color: #f4d9da;
	border-color: #65040d;
}

.fullContent .c-calloutText h2 {
	color: #006747;
    font-size: 1.75em;
    font-weight: 600;
    line-height: 1.25em;
}

.fullContent .c-calloutText--red h2,
.c-calloutText--red h3,
.c-calloutText--red a, 
.c-calloutText--red a:visited { color: #65040d; }

.c-calloutText--red h4 { color: #5e3f43; }

.c-calloutText--red a.snippetButton, 
.c-calloutText--red a.snippetButton:visited,
.c-calloutText--red a.c-button-single,
.c-calloutText--red a.c-button-single:visited {
	background-color: #65040d;
	color: #fff;
}
.c-calloutText--red a.snippetButton:hover, 
.c-calloutText--red a.snippetButton:active, 
.c-calloutText--red a.snippetButton:focus,
.c-calloutText--red a.c-button-single:hover, 
.c-calloutText--red a.c-button-single:active, 
.c-calloutText--red a.c-button-single:focus{
	background-color: #5e3f43;
}