/* ================================== */
/* === Column Setup */
/* ================================== */

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}


.container {
  margin: 0 auto;
  width: 930px;	
}

.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12 {
	float: left;
	padding-left: 5px;
	padding-right: 5px;	
}

.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }


/* ==================================================================== */
/* === GLOBAL */
/* ==================================================================== */

body {
	font-family:"Wigrum Regular", Arial, Helvetica, sans-serif;
	font-weight:500;
	font-style:normal;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;	
	color: #464646;
	background: white;
	
}

hr {
	border: solid #ffb600 0px;
	border-top-width: 1px;
	text-align: left;
	margin-left:0;
	line-height: 0;
	margin: 0;
}

.halfRule {
	width: 50%;
}

.oneThirdRule {
	width: 33%
}

.oneSeventhRule {
	width: 14%;
}


.fillColumn {
	width: 100%;
}

.notationGraphic {
	padding-top: 35px;
	position:absolute;
}

h1 {
	letter-spacing: -3px;
	font-size: 5em;
	color: #ffb600;
}

h2 {
	font-size: 1.6em;
	color: #ffb600;
	line-height: 1.15em;
}

h4 {
	font-size: 1.3em;
	color: #ffb600;
	line-height: 1.15em;
}

p {
	font-size: 1rem;
	line-height: 1.35rem;
	padding-bottom: 15px;
}

small {
	font-size: .85em;
}

.pullquote {
	font-size: 1.6em;
	line-height: 1.25em;
	color: #ffb600;
	padding-bottom: 15px;
}

/* ================================== */
/* === Animations */
/* ================================== */


/*
.fade {
        opacity:0;
        -webkit-animation:fadeIn ease-in 1;
        -moz-animation:fadeIn ease-in 1;
        -o-animation:fadeIn ease-in 1;
        animation:fadeIn ease-in 1;
        -webkit-animation-fill-mode:forwards;
        -moz-animation-fill-mode:forwards;
        -o-animation-fill-mode:forwards;
        animation-fill-mode:forwards;
        -webkit-animation-duration:1s;
        -moz-animation-duration:1s;
        -o-animation-duration:1s;
		animation-duration: 1s;
}

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

*/

.fade {opacity: 0;}

/* ================================== */
/* === Links */
/* ================================== */

a {
	color: #ffb600;
	text-decoration: none;
}

a:visted {
	color: #ffb600;
}

a:hover {
	color: #464646;
}

.active {
	color: #464646 !important;
	border-bottom: solid #666 1px;
	padding-bottom: 6px;
}

/* ================================== */
/* === Font Awesome */
/* ================================== */

i {
	-webkit-font-smoothing: antialiased;	
}

#downArrow i , footer i  {
	color: white;
}


/* ================================== */
/* === Border */
/* ================================== */

.borderWrapper {
	position: relative;
	display: table;
	width: 100%;
	border: solid #ffb600 1.15em;
}

.footerPadding {
	padding-bottom: 100px;
}


/* ================================== */
/* === Nav Bar */
/* ================================== */

nav {
	width: 100%;
	position: fixed;
	padding-top: 45px;
	padding-bottom: 20px;
	top:0px;
	overflow: hidden;
}

#mainNavBackground {
	position: absolute;
	background: #ffb600;
	top: 0px;
	width: 100%;
	overflow: hidden;
	height: 0px;
}

#mainNavBackground .container {
	padding-top: 45px;
}

.navSections, .navContacts {
	color: #ffb600;
}

.navSections a, .navContacts a {
	color: white;
}

.navSections a:hover, .navContacts a:hover {
	color: #464646;
}

.navSections li {
	float: left;
	margin-right: 12px;
}

.navContacts li {
	float:right;
	padding-left: 12px;
}

.navHidden {
	visibility: hidden;
}

.interiorPage .navSections, .interiorPage .navContacts {
	color: #ffb600;
}

.navHomeLink {
	color: #464646;
}

.navHomeLink:hover {
	color: white;
}


/* ================================== */
/* === Footer */
/* ================================== */

footer {
	background: #ffb600;
	padding-top: 15px;
	padding-bottom: 60px;
}

footer a {
	color: white;
}

footer h3 {
	margin-bottom: 5px;
}

/* ================================== */
/* === Newsletter Styling */
/* ================================== */

.field {
	font-family:"Wigrum Regular", Arial, Helvetica, sans-serif;
	font-weight:500;
	font-style:normal;
	font-size: 1em;	
	-webkit-font-smoothing: antialiased;	
	color: white;	
	background: none;
	border-top: none;
	border-left: none;
	border-right: none;	
	border-bottom: solid white 1px;
	border-radius: 0;
	padding-bottom: 2px;
	margin: 0;
	margin-bottom: 8px;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}

.field:focus {
	outline: 0;
}

.button {
	font-family:"Wigrum Regular", Arial, Helvetica, sans-serif;
	font-weight:500;
	font-style:normal;
	font-size: 1em;	
	-webkit-font-smoothing: antialiased;	
	color: white;	
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	padding-top: 5px;
}

.button:hover {
	color: #464646;
	cursor: pointer;
}

/* ==================================================================== */
/* === HOMEPAGE */
/* ==================================================================== */


/* ================================== */
/* === Homepage Logo */
/* ================================== */

#logoLockup {
	padding-top: 30px;
}

.logoRow div {
	display: inline-block;
	float: none;
	color: white;
}

.logoText {
	font-size: 5.5em;
	letter-spacing: -3px;
	line-height: .9em;
}

.logoUnderline {
	border-bottom: solid white 2px;
}

#downArrow {
	text-align: center;
	position: absolute;
	width: 100%;
	bottom: 45px;
}


/* ================================== */
/* === Homepage Video */
/* ================================== */

.tableCell {
	display: table-cell;
	vertical-align: middle;
}

#videoWrapper {
	position: absolute;
	top:0; left: 0;
	overflow: hidden;
	background-image: url('../images/videoBackgroundPoster.jpg');
	background-position:center center;
	background-size: cover;
	background-repeat: no-repeat;
}

#videoBackground {
	position: absolute;
}


/* ================================== */
/* === Event Callout */
/* ================================== */

#eventCalloutWrapper {
	width: 100%;
	position: absolute;
}

#eventCallout {
	width: 235px;
	background: #ffb600;
	color: white;
	float: right;
	padding: 25px 15px 18px 15px;
}

#eventCallout h2 {
	color: white;
}

#eventCallout a {
	color: #464646;
}

#eventCallout a:hover {
	color: white;
}

#eventCallout p {
	padding-top: 7px;
	padding-bottom: 7px;
}

#eventCallout div {
	padding-top: 2px;
	padding-bottom: 2px;
}


/* ==================================================================== */
/* === BIOGRAPHY */
/* ==================================================================== */

.sectionTitle {
	padding-top: 130px;
	padding-bottom: 60px;
}

.groupBio {
	padding-top: 30px;
	padding-bottom: 30px;
}

.groupPhoto {
	padding-top: 15px;
	padding-bottom: 30px;
}

.individualBio {
	padding-top: 30px;
	padding-bottom: 30px;	
}

.individualName {
	padding-top: 9px;
	padding-bottom: 30px;
}


/* ==================================================================== */
/* === EVENTS */
/* ==================================================================== */

.event {
	width: 20%;
	float: left;
	padding: 0 5px 20px 5px;
	overflow: hidden;
	min-height: 250px;
}

.event a {
	color: #464646;
}

.event a:hover {
	color: #ffb600;
}

.event:nth-child(5n+1) {
	padding-left: 0;
}

.event:nth-child(5n+0) {
	padding-right: 0;
}

.event hr {
	border-color: #666;
	width: 50%;
	margin-bottom: 5px;
}

.eventList {
	padding-bottom: 15px;
}

.eventDate {
	padding-top: 8px;
	font-size: 3.25em;
	line-height: 3.5rem;	
}


.eventVenue {
	font-size: .95rem;
	line-height: 1.35rem;
}

.eventTitle {
	font-size: .95rem;
	line-height: 1.35rem;
}

.eventLocation {
	font-size: .95rem;
	line-height: 1.35rem;
}

.eventProgram {
	color: #ffb600;
}

.monthSection>:first-child hr {
padding-bottom: 13px;
}


/* ==================================================================== */
/* === PROJECTS */
/* ==================================================================== */

.projectTitle {
	margin-top: 8px;
}

.projectDescriptionRule {
	border-color: #666;
	width: 12.5%;
	margin-bottom: 13px;
}

.projectDescription .col-3 {
	padding-right: 40px;
}


.projectImageWrapper {
	width: 100%;
	padding: 60px 0 60px 0;
}

.projectImage img{
	width: 100%;
	height: auto;
}

.projectMenuItem {
	width: 50%;
	height: 118px;
	float: left;
	margin-top: 10px;
	margin-bottom: 10px;	
}

a:hover .projectMenuItem h4 {
	color: #464646;
}
.projectMenuItem hr{
	margin-bottom: 10px;
}

.projectMenuItem:nth-child(2n+1) {
	padding-right: 10px;
}

.projectMenuItem:nth-child(2n+0) {
	padding-left: 10px;
}

.projectItemThumb {
	width: 40%;
	height: 100%;
	background-size: cover;
	overflow: hidden;
	float: left;
	margin-right: 15px;
}

.projectItemThumb img {
	width: 100%;
	height: auto;
}

.projectDivider {
	color: #ffb600;
	margin: 5px 0 10px 0;
}

.projectProgram {
	color: #ffb600;
	font-size: .85em;
	line-height: 1.35;
}

.projectVideoBlock {
	color: white;
	font-size: 1.5em;
	position: absolute;
	right: 0;
	height: 150px;
	width: 150px;
	background: #ffb600;
	padding: 15px 15px 0 15px;
	margin-top: 120px;
}

a:hover .projectVideoBlock {
	color: #464646;
}

.projectVideoBlock i {
	position: absolute;
	left:15px;
	bottom: 10px;
}
 

/* ==================================================================== */
/* === PRESS */
/* ==================================================================== */

.pressQuotes hr {
	margin-bottom: 20px;
}

.pressQuotes img {
	position: absolute;
}

.pressQuotes .row {
	margin-bottom: 45px;
}

.pressQuotes h3 {
	line-height: 1.4em;
}

a:hover .pressKitBlock {
	color: #464646;
}

.pressKitBlock {
	color: white;
	font-size: 1.5em;
	position: absolute;
	right: 0;
	height: 150px;
	width: 150px;
	background: #ffb600;
	padding: 15px 15px 0 15px;
}

.pressKitBlock i {
	position: absolute;
	left:15px;
	bottom: 10px;
}
.pressArticles {
	margin-top: 90px;
}

.pressArticles hr {
	border-color: #666;
	margin-bottom: 20px;
}

.pressArticles h4 {
	padding-top: 5px;
	color: #464646;
	line-height: 1.3em;
	padding-bottom: 5px;
}

.pressArticles small {
	margin-bottom: 10px;
}

/* ==================================================================== */
/* === MEDIA QUERIES */
/* ==================================================================== */

@media screen and (min-width: 1200px) and (min-height: 750px) {

	.container {
		width: 1100px;
	}

}