/* Common style */

.grid {
	overflow: hidden;
}
.grid a {
	float: left;
	/*max-width: 250px;*/
	width: 25%;
	color: #333;

    
}

/* -- killed bc js breaks this
.grid a:nth-child(odd) {
	margin: 30px 0 -30px 0;
}*/

.grid figure {
	position: relative;
	overflow: hidden;
	margin: 5px;
	background: rgba(18,5,80,1);
	box-shadow: -1px 1px 6px rgba(0,0,0,0.2);
	border-radius: 10px;
    
    /* this fixes the overflow:hidden in Chrome */
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);

	 /* border: 1px solid #b0aacc; */
	    border: 1px solid #dad8e0;
}

.grid .teacher figure {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#120550+0,120550+100&1+38,0+100 */
background: -moz-linear-gradient(top, rgba(18,5,80,1) 0%, rgba(18,5,80,1) 38%, rgba(18,5,80,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(18,5,80,1) 0%,rgba(18,5,80,1) 38%,rgba(18,5,80,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(18,5,80,1) 0%,rgba(18,5,80,1) 38%,rgba(18,5,80,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#120550', endColorstr='#00120550',GradientType=0 ); /* IE6-9 */
}
.grid a figure .shadow{
	position:absolute;
	top:-1em;
	left:0;
	width:100%;
	height:7em;
	z-index:100;
	opacity:0;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;

}
.grid a.dark figure .shadow{
	-webkit-box-shadow: inset 0px 100px 90px -60px rgba(0,0,0,0.6);
	-moz-box-shadow: inset 0px 100px 90px -60px rgba(0,0,0,0.6);
	box-shadow: inset 0px 100px 90px -60px rgba(0,0,0,0.6);
}
.grid a.light figure .shadow{
	-webkit-box-shadow: inset 0px 100px 90px -60px rgba(0,0,0,0.25);
	-moz-box-shadow: inset 0px 100px 90px -60px rgba(0,0,0,0.25);
	box-shadow: inset 0px 100px 90px -60px rgba(0,0,0,0.25);
}

	.no-touchevents .grid a:hover figure .shadow, 
	.touchevents .grid a.touched figure .shadow{
		opacity:1;
		}
	.no-touchevents .grid a.darktext:hover figure h2, 
	.touchevents .grid a.darktext.touched figure h2{
		color:rgba(18,5,80,1);
		}
@media screen and (min-width: 36.0001em) {
	.grid figure img {
		-webkit-transform: translateY(28%);
		transform: translateY(28%);
	 }
	
	 .grid a.description figure img {
		-webkit-transform: translateY(0%);
		transform: translateY(0%);
	 }
 }
.grid figure img {
	position: relative;
	display: block;
	width: 100%;
	opacity: 0.7;
	/*-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;*/
	padding-top:3em;
	padding-bottom: 3em;
	
}

@media screen and (min-width: 36.0001em) {
	.grid figure img {
		-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
		transition: opacity 0.3s, transform 0.3s;
	}
	.grid figure img {
		padding-top:0em;
		padding-bottom: 2em;
	}
}
  .grid a.description figure img {
 		opacity: 1;
 }

.grid figcaption {
	position: absolute;
	top: 0;
	z-index: 11;
	padding: 10px;
	width: 100%;
	height: 100%;
	text-align: center;
	z-index:200;
}

.grid figcaption h2 {
	margin: 0;
	color: #fff;
	/*text-transform: uppercase;
	letter-spacing: 1px;*/
	font-weight: 300;
	font-size: 130%;
	-webkit-transition: -webkit-transform 0.3s, color 0.3s;
	transition: transform 0.3s, color 0.3s;
	 
}
.grid a.dark figcaption h2 {
	text-shadow: 0 0 6px rgba(0,0,0,0.35);
}
.grid a.dark figcaption h2 {
	text-shadow: 0 0 16px rgba(0,0,0,0.15);
}
.grid figcaption > p {
	margin-top: 0.5rem;
	padding: 0 20px;
	color: #aaa;
	font-weight: 300;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.grid figcaption h2,
.grid figcaption > p {
	-webkit-transform: translateY(30px);
	transform: translateY(30px);
	letter-spacing:0;
}

.grid figure .button {
	position: absolute;
	padding: 9px 5px;
	border: none;
	letter-spacing:0;
	line-height:0.9rem;
	/*-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;    MOVED TO HOVER AND MEDIA QUERY
	transition: opacity 0.3s, transform 0.3s;*/
	margin:0;
	bottom: 0;
	left: 50%;
	/*background:rgba(255,255,255,0.825);*/
	color:rgba(18,5,80,1);
	opacity: 0;
	width:100%;
	font-size:70%;
	border-radius:0;
	-webkit-transform: translateY(30%) translateX(-50%) scale(0.25);
	transform: translateY(30%) translateX(-50%) scale(0.25);
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.8+29,1+82 */

background: -moz-linear-gradient(top,  rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.8) 29%, rgba(255,255,255,1) 82%, rgba(255,255,255,1) 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top,  rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.8) 29%,rgba(255,255,255,1) 82%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom,  rgba(255,255,255,0.8) 0%,rgba(255,255,255,0.8) 29%,rgba(255,255,255,1) 82%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */

	overflow-y: scroll;
	max-height: 20em;
}
.grid figure .button br {
    line-height: 1.2rem;
}
@media screen and (min-width: 36.0001em) {
	.grid figure .button {
		-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
		transition: opacity 0.3s, transform 0.3s;
	}
}
.grid a.description figure .button {
	padding: 0 18px !important;
	top:51%;
	background:rgba(255,255,255,0) !important;
	padding: 0 15px;

}
@media screen and (min-width: 36.0001em) {
	.grid a.description figure .button {
		-webkit-transform: translateY(-80%) translateX(-50%) scale(0.25);
		transform: translateY(-80%) translateX(-50%) scale(0.25);
	}
}
.grid figcaption,
.grid figcaption h2,
.grid figcaption > p,
.grid figure .button {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

/* Style for SVG */
.grid svg {
	position: absolute;
	top: 2em; /* fixes rendering issue in FF */
	z-index: 10;
	width: 100%;
	height: 90%;
	-webkit-transform: translateY(-50px);
	transform: translateY(-50px);
}

@media screen and (min-width: 36.0001em) {
	.grid svg {
		-webkit-transform: translateY(-90px);
		transform: translateY(-90px);
	}
}
.grid svg path {
	fill: rgba(18,5,80,0.6667);
	
}
.grid a.description svg path {
	fill: rgba(255,255,255,1);
	/*stroke: rgba(18,5,80,1);
	stroke-width:5px;*/
}
.grid a.description figure {
	/*border-top: rgba(18,5,80,1);
	border-top-width:4px;
	border-top-style:solid;*/
	}
.grid a.description figure img {
    /*margin-top: -4px;*/
	opacity:100% !important;
}
.grid a.description svg {
	-webkit-transform: translateY(-20%);
	transform: translateY(-20%);
}
.grid a.description h2,
.grid a.description p {
	color: rgba(18,5,80,1);
	/*margin-top: -4px;*/
}

/* Hover effects */
.no-touchevents .grid a:hover figure img,
.touchevents  .grid a.touched figure img{
	opacity: 1;
}

.no-touchevents .grid a.description:hover figure img,
.touchevents  .grid a.description.touched figure img{
	opacity: 1;
}
@media screen and (min-width: 36.0001em) {
	.no-touchevents .grid a:hover figure img,
	.touchevents  .grid a.touched figure img{
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	
	.no-touchevents .grid a.description:hover figure img,
	.touchevents  .grid a.description.touched figure img{
		-webkit-transform: translateY(20%) !important;
		transform: translateY(20%) !important;
	}
}

.no-touchevents .grid a:hover figcaption h2,
.touchevents  	.grid a.touched figcaption h2, 
.no-touchevents .grid a:hover figcaption > p,
.touchevents  	.grid a.touched figcaption > p{
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.no-touchevents .grid a.description:hover figcaption h2,
.touchevents  	.grid a.description.touched figcaption h2, 
.no-touchevents .grid a.description:hover figcaption > p,
.touchevents  	.grid a.description.touched figcaption > p{
	/*-webkit-transform: translateY(0);
	transform: translateY(0);*/
	color: rgba(255,255,255,1);
}


.no-touchevents .grid a:hover figcaption > p ,
.touchevents  .grid a.touched figcaption > p {
	opacity: 0;
}

.no-touchevents .grid a:hover figure .button,
.touchevents  .grid a.touched figure .button {
	opacity: 1;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
	
	-webkit-transform: translateY(0) translateX(-50%) scale(1);
	transform: translateY(0) translateX(-50%) scale(1);
}
.no-touchevents .grid a.description:hover figure .button,
.touchevents  .grid a.description.touched figure .button {
	-webkit-transform: translateY(-60%) translateX(-50%) scale(1);
	transform: translateY(-60%) translateX(-50%) scale(1);
}

.grid a.description figure .button {
	background-color:rgba(255,255,255,0);
	color:#fff;
}
.grid a figure {
	padding-bottom:0;
	transition: padding-bottom 0.3s;
}



/* Media Queries */
/* Let's redefine the width of each anchor and the margins */

 .controls.showMobile{
	 display:none;
	} 
 .controls.showDesktop{
	 display:flex;
	} 
@media screen and (max-width: 80em) {
	.grid a {
		width: 33.333%;
	}
	
	/* -- killed bc js breaks this
	.grid a:nth-child(odd) {
		margin: 0;
	}

	.grid a:nth-child(3n-1) {
		margin: 30px 0 -30px 0;
	}
	*/
}

@media screen and (max-width: 58em) {
	/*.grid {
		max-width: 500px;
	}*/

	.grid a {
		width: 50%;
		/*-webkit-transition: width 0.3s;
		transition: width 0.3s;*/
	}

	/*-- killed bc js breaks this
	.grid a:nth-child(3n-1) {
		margin: 0;
	}

	 
	.grid a:nth-child(even) {
		margin: 30px 0 -30px 0;
	}*/


	.grid figcaption h2 {
		margin-bottom: 0px;
		-webkit-transform: translateY(30px);
		transform: translateY(30px);
	}

	.grid figcaption > p {
		margin: 0;
		padding: 0 10px;
	}
	 .controls.showMobile{
	 display:flex;
	} 
 .controls.showDesktop{
	 display:none;
	}

}



@media screen and (max-width: 36em) {
	
span.hc_header_time {
    /* font-weight: 200; */
    color: rgb(18,5,80);
    display: block;
    font-size: 167% !important;
    padding: 6px 0;
}


/*@media screen and (max-width: 27em) {
	.grid {
		max-width: 250px;
	}*/
	.grid figure {
   		 margin: 8px;
	}
	.no-touchevents .grid a:hover ,
	.touchevents  .grid a.touched {
		width: 100%;
		/*transition: width 0.3s;*/
    	justify-content: center;
	}
	.no-touchevents .grid a:hover figure ,
	.touchevents  .grid a.touched figure {
		padding-bottom:4em
	}
	
	.grid figcaption h2 {
	    margin-bottom: -4px;
		-webkit-transform: translateY(-7px);
		transform: translateY(-7px);
		font-size:4.25vw;
		/*animation: h2AnimateTo 0.3s;*/
	-webkit-transition: font-size 0.3s;
    transition: font-size 0.3s;
	}
	/*-webkit-transform 0.3s,*/ /*transform 0.3s,*/ 
	/*@keyframes h2AnimateTo {
	  from {font-size: 6vw;}
	  to {font-size: 4.25vw;}
	}
	@keyframes h2AnimateFrom {
	  from {font-size: 4.25vw;}
	  to {font-size: 6vw;}
	}*/
	.no-touchevents .grid a:hover h2 ,
	.touchevents  .grid a.touched h2 {
		font-size:6vw;
		/*animation: h2AnimateFrom 0.3s;*/
	}
	

	.grid figcaption > p {
	  /* color:#ddd;
	   text-shadow:1px 1px 6px #25212D;
		font-size:3.75vw*/
		display:none;
	}
.grid figure .button {
	font-size:85%;
	padding-left:8px;
	padding-right:8px;
	line-height: 125%;
}
	
.grid a svg {
	
		-webkit-transform: translateY(-85px);
		transform: translateY(-85px);
		
	}
.grid a.description svg {
		top:0;
}
.no-touchevents .grid a:hover svg, 
	.touchevents .grid a.touched svg {
	
	}
	.no-touchevents .grid a.description.generic:hover svg, 
	.touchevents .grid a.description.generic.touched svg {
		
		-webkit-transform: translateY(-0.5em);
		transform: translateY(-0.5em);
	}
	.no-touchevents .grid a.description:hover svg, 
	.touchevents .grid a.description.touched svg {
		-webkit-transform: translateY(-3.5em);
		transform: translateY(-3.5em);
	}
/*.grid a svg {
		-webkit-transition: -webkit-transform 0.3s;
		transition: transform 0.3s;
		
		
	}*/

	/*.no-touchevents .grid a:hover svg ,
	.touchevents  .grid a.touched svg {
		-webkit-transform: translateY(-35px);
		transform: translateY(-35px);
	}	*/
	
	.grid a figure img {
		margin-bottom: -0.25em;
    	margin-top: -5.5em;
		-webkit-transform: translateY(2.5em);
		transform: translateY(2.5em);
		 padding-bottom: 0;
	
	}
	.grid a.description figure img {
		-webkit-transform: translateY(0.25em);
		transform: translateY(0.25em);
	}
	.no-touchevents .grid a:hover figure img ,
	.touchevents  .grid a.touched figure img {
		margin-bottom: 5em;
		-webkit-transform: translateY(2.5em);
		transform: translateY(2.5em);
		
	}
	
	.no-touchevents .grid a.description:hover figcaption h2, 
	.touchevents  .grid a.description.touched figcaption h2{
		color:rgba(18,5,80,1);
		margin-top:-5px;
		margin-bottom: 0px;
	}
	.no-touchevents .grid a.description:hover figure img,
	.touchevents  .grid a.description.touched figure img{
		opacity: 1;
		-webkit-transform: translateY(40%) !important;
		transform: translateY(40%) !important;
	}
	grid a figure img {
		-webkit-transition: margin-bottom 0.3s, -webkit-transform 0.3s;
		transition: margin-bottom 0.3s, transform 0.3s;	
	}
	.grid a figure .button{
		left:0;
		-webkit-transform: translateY(50%) scale(1);
		transform: translateY(50%)  scale(1);
		transition-duration:0;
	}
	.grid a.description figure .button{
		left:50%;
		-webkit-transform: translateY(0%) translateX(-50%) scale(0.25);
		transform: translateY(0%) translateX(-50%) scale(0.25);
		transition-duration:0;
	}

	.no-touchevents .grid a:hover figure .button, 
	.touchevents .grid a.touched figure .button {
		
		-webkit-transform: translateY(0%)  scale(1);
		transform: translateY(0%)  scale(1);
		transition-delay:0.15s;
		transition-duration:0.4s;
	}
	.no-touchevents .grid a.description:hover figure .button, 
	.touchevents .grid a.description.touched figure .button {
		
		-webkit-transform: translateY(-60%) translateX(-50%) scale(1);
		transform: translateY(-60%) translateX(-50%) scale(1);
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	/* -- killed bc js breaks this
	.grid a:nth-child(even) {
		margin: 0;
	}*/
	
	
	
	.whoWeAre .controls button.filter {
		/*padding-top: 0;
		padding-bottom: 0;*/
		line-height: 1.4em;
		font-size:3.5vw;
		font-weight: 400;
	}
		
	

}














	  
.controls{
  display:flex;
}



.whoWeAre button{
	flex-direction:row;
	flex:auto;
	 margin: 0.25em;
  padding: .4em .8em;
  /*background: rgba(18, 5, 80, 1);*/
  color: #eee; 
  border: 0;
  font-size: 16px;
  font-weight: 300;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing:0;
}
@media screen and (max-width: 40em) {
	.whoWeAre button {
  		padding: .2em;
	}
}

.whoWeAre button.segmentfilters{
	border: rgba(18, 5, 80, 1) 2px solid;
  	background-color: rgba(18, 5, 80, 1);
  
}
.whoWeAre button.crossfilters {
    border: rgba(18, 5, 80, 1) 2px solid;
    color: rgba(18, 5, 80, 1);
    background-color: #fff;
}
/*.whoWeAre button.segmentfilters.active,
.whoWeAre button.segmentfilters:hover,
.whoWeAre button.segmentfilters:active,
.whoWeAre button.segmentfilters:focus {
  background-color: rgba(18, 5, 80, 0.9);
  color: rgba(255, 255, 255, 0.9);
}
.whoWeAre button.crossfilters.active,
.whoWeAre button.crossfilters:hover,
.whoWeAre button.crossfilters:active,
.whoWeAre button.crossfilters:focus {
  background-color: rgba(18, 5, 80, 0.1);
  color: rgba(18, 5, 80, 0.9);
}*/

.whoWeAre button.pressed{
  background-color: rgba(18, 5, 80, 0.125);
  color: rgba(18, 5, 80, 1);
  	text-shadow:0 0 3px #fff;

}

.whoWeAre button:focus{
  outline: 0 none;
}

.whoWeAre button + label{
  margin-left: 1em;
}


.inHeader{
overflow:hidden;
}
.inHeader.fixControls{
    display: block;
    position: fixed;
    z-index: 5;
    background-color: transparent;
	width:100%;
	padding-bottom:4px;
	margin-top: -1vw;
	
}
.bottom{
	position:absolute;
	bottom:0;
	left:0;
	height:0;
	width:0;
}











button.filter.segmentfilters.all {
	background: transparent;
    border: 0;
    max-width: 4.5vw;
    font-size: 2em;
    line-height: 0;
    color: rgba(18,5,80,1);
    padding: 0.1em 0 0 0.6vw;
}
button.filter.segmentfilters.all:active,
button.filter.segmentfilters.all:hover {
    color: rgba(18,5,80,0.7);
}

@media screen and (max-width: 36em) {
	
	button.filter.segmentfilters.all {
	  max-width: 7vw;
    font-size: 1.55em;
    padding: 0.055em 0 0 0.8vw;
    min-width: 7vw;
	}
	
}
button.filter.segmentfilters.all:after {
	font-family:'FontAwesome';
 	content:"\f079";
}







@media screen and (max-width: 36em) {
	
	.grid {
		display: flex; 
		flex-wrap: wrap; 
		justify-content: center;
	}
	.description figcaption h2 img {
		padding-top: 5%;
	}
	.touchevents .grid a.description.forrest.touched figure h2 img {
		margin-top:-10%
	}
	.touchevents .grid a.description.forrest.touched figure h2 img {
		/*padding-top: 0;*/
		-webkit-transform: translateY(15%) !important;
		transform: translateY(15%) !important;
	}
	
}
@media screen and (max-width: 23em) {
	.whoWeAre .max-fit {
		width: 95% !important;
	}
}

.mixItUp:after{
  content: '';
  display: inline-block;
  width: 100%;
}




button.filter.tm:after {
   font-family: FontAwesome;
   content: "\f25c";
   vertical-align:0.3rem;
   font-size:0.45rem;
}
button.filter.tm {
   
}

.grid figure .button p {
    margin-top: 0.3rem;
    margin-bottom: 0.2rem;
	font-weight: 400;
}

/*.grid .description figure .button span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}*/
.grid .description figure .button {
  display: table;
}
.grid .description figure .button span  {
  display: table-cell;
  margin: 0;
  padding: 0;
  vertical-align: middle;
  font-weight:300;
}
.grid .description figure .button span span.link {
  display: inline-block;
  text-decoration:underline;
}
.grid .description figure h2 img  {
  width:60%;
  margin:-10px 20% 0 20%;
  padding-bottom:0;
}

#wufoo-m10svd81v510mz > iframe{
    width: 148% !important;
}