/****************************************
* CSS Mini Reset
****************************************/

html, body, div, form, fieldset, legend, label { margin: 0; padding: 0; }
img { border: 0; }
/*figcaption { font-weight: normal;}*/


/****************************************
* Typography
****************************************/

body {
	background: #313131;
	color: #e5e5e5;
	font: 10px/1.5 'Roboto', sans-serif;
	padding-bottom: 120px;
}

h1 {
	font-weight: 400;
	font-size: 1.6em;
	letter-spacing: .5px;
	text-transform: uppercase;
	line-height: 64px;
	-webkit-font-smoothing: subpixel-antialiased;
}

h1 .blue {
  color: #83CFCA;
}

h1 .white {
  color: #fafafa;
}

h2 {
	color: #fafafa;
	font-weight: 300;
	font-size: 3.2em;
	letter-spacing: .5px;

}

h2.title {
	padding: 16px 20px 32px 20px;
}

h3 {
	color: #999;
	font-size: 1.8em;
	font-style: italic;
	font-weight: 200;
	padding-top: 32px;
	text-align: center;
}

figcaption {
	font-weight: 300;
	font-size: 1.6em;
	letter-spacing: .5px;
	-webkit-font-smoothing: subpixel-antialiased;
}

p {
	font-weight: 100;
	font-size: 1.8em;
	letter-spacing: .5px;
	padding: 0 20px 32px 20px;
	-webkit-font-smoothing: subpixel-antialiased;
}

li {
	font-weight: 100;
	font-size: 1.8em;
	letter-spacing: .5px;
	padding: 8px 8px;
	-webkit-font-smoothing: subpixel-antialiased;
}

a {
	font-weight: 400;
	color: #83CFCA;
	text-decoration: none;
}




/****************************************
* Layout
****************************************/

.content {
	box-sizing: border-box;
	max-width: 1052px;
	margin: 0 auto;
	padding: 0 16px;
}

.bullets {
	box-sizing: border-box;
	max-width: 840px;
	margin: 0 auto;
	padding: 0 20px;
  
}


header {
	height: 64px;
	margin: 4px 0 0 4px; 
}


#container {
	display: flex; 
	padding: 0 12px; /* (content padding - item padding) */
	flex-direction: row;
	flex-wrap: wrap;
}

.item {
	flex-shrink: .5;
	box-sizing: border-box;
	width: 33%;
	max-width: 342px; /* to prevent max-width rounding up*/
	padding: 7px;
	max-height: 250px;
	display: inline-block;
	overflow: hidden;
}

.item a {
	position: relative;/* Needed for caption title */
	overflow: hidden;
	display: block;
}

.item img {
	width: auto;
	max-width: 100%;
	max-height: auto;
	display: block;
}

.contentimage {
	max-width: 100%;
	box-sizing: border-box;
	margin: auto;
}

.responsive-iframe {
  position: relative;
  width: 90%;
  max-width: 840px;
  aspect-ratio: 16 / 9;
  border-width: 0;
}

/* Create two equal columns that sits next to each other */

.imagecontainer {
	text-align: center;
}

.imagecontainer img {
	padding: 20px 40px 60px 40px;
}

.row {
  height:auto;
  display: flex;
  flex-flow: row column;
}

.column {
  width: 100%;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  padding: 20px 20px 60px 20px;
  max-width: 400px;
}

.col:nth-child(1) {
    border-left:none;
}

.back {
	text-align: left;
	padding: 40px 40px 30px 0;
}

.back img{
	float: left;
   	width: 24px;
    height: 24px;
    padding: 19px 8px 0 0;
}


.info img{
	float: right;
   	width: 24px;
    height: 24px;
    padding: 19px 16px 0 0;
}

.schools {
	text-align: center;
	padding: 20px 0px 40px 0px;   
}

.schools img{
	height: 140px;
	padding: 0 60px; 
}

.brands {
	text-align: center;
	padding: 20px 0 40px 0;   
}

.brands img{
	width: 25%;
	padding:0 20px; 
    
}

/****************************************
* Styles
****************************************/

figcaption {
	background-color: #EE2D74;
	bottom: 0;
	color: #fafafa;
	line-height: 48px;
	position: absolute;
	text-indent: 16px;
	width: 100%;
	height: 48px;
	 -webkit-transform: translateY(100%);
}

.item:hover figcaption { -webkit-transform: translateY(0);}
.item:hover img { -webkit-transform: translateY(-24px);}
.item figcaption, .item img { -webkit-transition: -webkit-transform .25s cubic-bezier(0.26, 0.86, 0.44, 0.985);
}



/****************************************
* Media Queries
****************************************/

/*Mobile Device Settings*/
@media only screen and (max-width: 710px) {
	.item {
		width: 49%;
		padding: 4px;
	}

	h2 {
		font-size: 3.2em;
	}

	h2.title {
		padding: 0px 20px 14px 6px;
	}

	h3 {
		font-size: 1.6em;
	}

	p {
		font-size: 1.6em;
		padding: 0 20px 10px 6px;
	}

	
	figcaption {
		height: 20px;
		font-size: 1.2em;
		text-indent: 10px;
		padding: 0px 0px 24px 0px;
	}

	.imagecontainer img {
		padding: 0px 20px 20px 20px;
	}
	
	.column img {
	  	margin-top: 8px;
	  	vertical-align: middle;
	  /*	padding: 20px 20px 60px 20px;*/
	  	max-width: 100%;
	}
	
	.item:hover figcaption { -webkit-transform: translateY(0);}
	.item:hover img { -webkit-transform: translateY(-16px);}

	.item figcaption, .item img { -webkit-transition: -webkit-transform .25s cubic-bezier(0.26, 0.86, 0.44, 0.985);}


	.back {
	max-width: 1052px;
	text-align: left;
	padding: 20px 15px 20px 15px;
	}

	.schools {
	padding: 0 0 20px 0;   
	}
   	
  .schools img{
  width: 35%;	
	padding: 0 10px 0 10px;  
	}
	
	.brands {
	text-align: center;
	padding: 0 0 20px 0;   
	}	

	.brands img{
	width: 45%; 
	}
} 


@media only screen and (min-width: 711px) {
	p, h2.title {
		max-width: 836px;
		margin: 0px auto;
	}

	
}

/*@media only screen and (max-width: 710px) {
    
		
	}*/


}