/**
 * Global properties. Individual pages are below.
 * 
 */
 
/* Container that holds columns/items. */
.flex-container {
    display: -ms-flexbox; /* IE support */
    display: -webkit-flex; /* Safari/iOS support */
    display: flex; /* Standard */
}

/* Column/item inside .flex-container */
.flex-item {
	-webkit-box-sizing: border-box; /* Safari/iOS support */
	-moz-box-sizing: border-box; /* Mozilla support */
	box-sizing: border-box; /* Standard */
}

/* Columns/items in .flex-container stack */
.flex-direction-column {
	-webkit-flex-direction: column; /* Safari/iOS support */
	-ms-flex-direction: column; /* IE support */
	flex-direction: column; /* Standard */
}
 
/* Goes on .flex-container when we want columns/items to wrap. */
.flex-wrap {
    -webkit-flex-wrap: wrap; /* Safari/iOS support */
    -ms-flex-wrap: wrap; /* IE support */
    flex-wrap: wrap; /* Standard */
}

/* Goes on .flex-container when we don't want columns/items to wrap. */
.flex-nowrap {
    -webkit-flex-wrap: nowrap; /* Safari/iOS support */
    -ms-flex-wrap: nowrap; /* IE support */
    flex-wrap: nowrap; /* Standard */
}

/* Goes on .flex-container to align columns/items to the start of .flex-container. */
.align-items-start {
	-webkit-align-items: flex-start; /* Safari/iOS support */
	-ms-flex-align: start; /* IE support */
	align-items: flex-start; /* Standard */
}

/* Goes on .flex-container to vertically center columns/items. */
.align-items-center {
	-webkit-align-items: center; /* Safari/iOS support */
	-ms-flex-align: center; /* IE support */
	align-items: center; /* Standard */
}

/* Goes on .flex-container to align columns/items to the end of .flex-container. */
.align-items-end {
	-webkit-align-items: flex-end; /* Safari/iOS support */
	-ms-flex-align: end; /* IE support */
	align-items: flex-end; /* Standard */
}

/* Goes on .flex-container to horizontally center columns/items. */
.justify-content-center {
	-webkit-justify-content: center; /* Safari/iOS support */
	-ms-flex-pack: center; /* IE support */
	justify-content: center; /* Standard */
}

/* Goes on .flex-container to align columns/items to the start of the container. */
.justify-content-start {
	-webkit-justify-content: flex-start; /* Safari/iOS support */
	-ms-flex-pack: start; /* IE support */
	justify-content: flex-start; /* Standard */
}

/* Goes on .flex-container to align columns/items to the end of the container. */
.justify-content-end {
	-webkit-justify-content: flex-end; /* Safari/iOS support */
	-ms-flex-pack: end; /* IE support */
	justify-content: flex-end; /* Standard */
}

/* Goes on .flex-container so that space between columns/items is distrubuted evenly. */
.justify-content-space-around {
	-webkit-justify-content: space-around; /* Safari/iOS support */
	-ms-flex-pack: distribute; /* IE support */
	justify-content: space-around; /* Standard */
}

/* Goes on .flex-container so that space between columns/items is distrubuted evenly from left edge to right edge. */
.justify-content-space-between {
	-webkit-justify-content: space-between; /* Safari/iOS support */
	-ms-flex-pack: justify; /* IE support */
	justify-content: space-between; /* Standard */
}

/* Goes on .flex-container column that needs to grow and fill remaining space. */
.grow-column {
	-webkit-flex: 1 1 auto; /* Safari/iOS support */
	-ms-flex: 1 1 auto; /* IE support */
	flex: 1 1 auto; /* Standard */
}

/* Goes on .flex-container column that needs to shrink take take up minimum space. */
.shrink-column {
	-webkit-flex: 0 1 auto; /* Safari/iOS support */
	-ms-flex: 0 1 auto; /* IE support */
	flex: 0 1 auto; /* Standard */
}

/* Goes on .flex-container column that needs to assume default width. */
.no-flex-column {
	-webkit-flex: none; /* Safari/iOS support */
	-ms-flex: none; /* IE support */
	flex: none; /* Standard */
}

/* Goes on .flex-container when using 50/50 layout. After pseudo is used to keep distributed columns left aligned. */
.fifty-fifty:after {
	content: "";
    display: block;
    width: 43%;
}

/* Goes on .flex-container when using 50/50 layout. After pseudo is used to keep distributed columns left aligned. */
.fifty-fifty-wide:after {
	content: "";
    display: block;
    width: 48%;
}

/* Goes on .flex-container when using 50/50 layout. After pseudo is used to keep distributed columns left aligned. */
.fifty-fifty-full:after {
	content: "";
    display: block;
    width: 50%;
}

/* Goes on .flex-container columns for 50/50 layout. 43% allows for even gutters. */
.fifty-fifty-column {
	width: 43%;
}

/* Goes on .flex-container columns for 50/50 layout. 48% allows for even but wider gutters. */
.fifty-fifty-column-wide {
	width: 48%;
}

/* Goes on .flex-container columns for 50/50 layout. */
.fifty-fifty-column-full {
	width: 50%;
}

/* Goes on .flex-container columns for 25/25/25/25 layout. 22% allows for even gutters. */
.quarter-column {
	width: 22%;
}

/* Goes on .flex-container columns for 25/25/25/25 layout. */
.quarter-column-full {
	width: 25%;
}

/* Goes on .flex-container columns for 20/20/20/20/20 layout. 18	% allows for even gutters. */
.one-fifth-column {
	width: 18%;
}

/* Goes on .flex-container columns for 20/20/20/20/20 layout. */
.one-fifth-column-full {
	width: 20%;
}

/* Goes on .flex-container column for one-third width. 30% allows for even gutters. */
.one-third-column {
	width: 30%;
}

/* Goes on .flex-container column for one-third width. */
.one-third-column-full {
	width: 33%;
}

/* Goes on .flex-container column for two-third width. 60% allows for even gutters. */
.two-third-column {
	width: 60%;
}

/* Goes on .flex-container column for two-third width. */
.two-third-column-full {
	width: 67%;
}

/* Goes on content container that is inset on the left and right sides. */
.inset-content {
	max-width: 85%;
    margin: 0 auto;
}

/* Goes on content container that is inset on the left and right sides. */
.double-inset-content {
	max-width: 70%;
    margin: 0 auto;
}

/* Container that holds Brightcove video iframe. */
.video-container {
	position: relative;
    margin-bottom: 10px;
}

/* Sets proportional and responsive dimensions for embedded Brightcove video iframe. */
.video-container:before {
	content: "";
    display: block;
    padding-top: 56.4%;
}

/* Embedded Brightcove video iframe.*/
.video-container iframe {
	display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

/* Colors */
.blue-color {
    color: #0375B4;
}
.blue-background {
    background: #0375B4;
}
.orange-color {
    color: #CA4D2B;
}
.orange-background {
    background: #CA4D2B;
}
.green-color {
    color: #658D1B;
}
.green-background {
    background: #658D1B;
}
.purple-color {
	color: #5F005D;
}
.purple-background {
	background: #5F005D;
}
.grey-color {
	color: #333333;
}
.grey-background {
	background: #333333;
}


/* WCM 768 Breakpoint */
@media (max-width: 1023px) {
    
}

/* WCM 640 Breakpoint */
@media (max-width: 767px) {
	/* Adjust 50/50 column width for mobile devices. */
	.fifty-fifty-column,
	.fifty-fifty-column-wide,
	.fifty-fifty-column-full {
    	width: 100%;
    }
    
    /* Adjust quarter column width for mobile devices. */
    .quarter-column {
    	width: 48%;
    }
	.quarter-column-full {
    	width: 50%;
    }
    
    /* Adjust one-third column width for mobile devices. */
    .one-third-column,
	.one-third-column-full {
        width: 100%;
    }
    
    /* Adjust two-third column width for mobile devices. */
    .two-third-column,
	.two-third-column-full {
        width: 100%;
    }
    
    /* Adjust inset content container width for mobile devices. */
    .inset-content {
        max-width: none;
        margin: 0;
    }
}

/* WCM 480 Breakpoint */
@media (max-width: 639px) {
	/* Adjust quarter column width for mobile devices. */
    .quarter-column,
	.quarter-column-full {
    	width: 100%;
    }
}

/* WCM 320 Breakpoint */
@media (max-width: 479px) {
	
}