@charset "UTF-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ */
}
/* Mobile Layout: 480px and below. */ /*********************************************************************/
@media screen and (min-width:320px) {}

/* Mobile + Tablet PORTRAIT */ /*********************************************************************/
@media only screen and (orientation:portrait) and (min-width: 319px) and (max-width: 768px) {
/* SIDE CATEGORIES */
.section h15 { /* Project Category on Left Side */
	position: absolute;
	display: block;
	font-size: 10px;
	font-weight: 400;
	font-family: sans-serif;
	color: #FFF;
	-webkit-filter: invert(50%);
	text-align: center;
	top: 49.5%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);;
	left: -70px;
	width: 200px;
	height: 10px;
	line-height: 0px;
	letter-spacing: 1px;
	z-index: 4000000;
	/* Safari */-webkit-transform: rotate(-90deg);
	/* Firefox */-moz-transform: rotate(-90deg);
	/* IE */-ms-transform: rotate(-90deg);
	/* Opera */-o-transform: rotate(-90deg);
	/* Internet Explorer */filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

/* RELATED TO THE TEXT */ /*********************************************************************/
.description {
	position: static;
	height: 100%;
	width: 70%;
	padding-left: 0%;
	padding-right: 0%;
	margin: 0 15% 0 15%;
	background-color: #;
	display: table;}

.description p, .description h8 {
	display: table-cell;
	vertical-align: middle;
	line-height: 20pt;
	font-size: 10pt;}

.description a {
	font-size: 14pt;}

.description h7 {
	font-size: 10px;
	font-family: sans-serif;}

#explorations a {
	font-size: 20pt;
	font-weight: 400;
	text-decoration: underline;
}

#explorations {
	width: 70%;
	background-color: #;
	margin: 0 15% 0 15%;
	text-align: center;
}

#explorations p{
	font-size: 14pt;
	line-height: 20pt;
	font-family: sans-serif;
}


.section {
	text-align:left;}

/* RELATED TO THE IMAGES */
.dropshadow {
	 box-shadow: 3px 3px 3px rgba(0,0,0,0.20);}

.maxh img {	
	height: 50%;	
	width: auto;
	margin: 0 50% 0 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);}
.max img {	width: 80%;	margin: 0 10% 0 10%; }
.med img {	width: 70%; margin: 0 15% 0 15%; }
.min img {	width: 60%;	margin: 0 20% 0 20%; }

.section video {
	margin: 0 15% 0 15%;}

}
/* Mobile + Tablet LANDSCAPE */ /*********************************************************************/
@media only screen and (min-width: 480px) and (orientation:landscape) {
.section h15 { /* Project Category on Left Side */
	position: absolute;
	display: block;
	font-size: 10px;
	font-weight: 600;
	font-family: sans-serif;
	color: #FFF;
	-webkit-filter: invert(50%);
	text-align: center;
	top: 49.5%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);;
	left: -70px;
	width: 200px;
	height: 10px;
	line-height: 0px;
	letter-spacing: 1px;
	z-index: 4000000;
	/* Safari */-webkit-transform: rotate(-90deg);
	/* Firefox */-moz-transform: rotate(-90deg);
	/* IE */-ms-transform: rotate(-90deg);
	/* Opera */-o-transform: rotate(-90deg);
	/* Internet Explorer */filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

/* RELATED TO THE TEXT */ /*********************************************************************/
.description {
	position: static;
	height: 100%;
	width: 80%;
	padding-left: 0%;
	padding-right: 0%;
	margin: 0 10% 0 10%;
	background-color: #;
	display: table;}

.description p, .description h8 {
	display: table-cell;
	vertical-align: middle;
	line-height: 14pt;
	font-size: 10pt;}

.description a {
	font-size: 10pt;}

.description h7 {
	font-size: 10px;
	font-family: sans-serif;}

.section {
	text-align:left;}

#explorations a {
	font-size: 20pt;
	font-weight: 400;
	text-decoration: underline;
}

#explorations {
	width: 80%;
	background-color: #;
	margin: 0 10% 0 10%;
	text-align: center;
}

#explorations p{
	font-size: 12pt;
	font-family: sans-serif;
}


/* RELATED TO THE IMAGES */
.dropshadow {
	 box-shadow: 3px 3px 3px rgba(0,0,0,0.20);}

.maxh img {	
	height: 80%;	
	width: auto;
	margin: 0 50% 0 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);}
.max img {	width: 60%;	margin: 0 20% 0 20%; }
.med img {	width: 50%; margin: 0 25% 0 25%; }
.min img {	width: 30%;	margin: 0 35% 0 35%; }
.section video {
	margin: 0 15% 0 15%;}
}
/* Desktop Layout: 1024px to a max of 1279px *//*********************************************************************/
@media screen and (min-width:769px) and (max-width: 1279px) {
.section h15 { /* Project Category on Left Side */
	position: absolute;
	display: block;
	font-size: 10px;
	font-weight: 400;
	font-family: sans-serif;
	color: #FFF;
	-webkit-filter: invert(50%);
	text-align: center;
	top: 49.5%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);;
	left: -70px;
	width: 200px;
	height: 10px;
	line-height: 0px;
	letter-spacing: 1px;
	z-index: 4000000;
	/* Safari */-webkit-transform: rotate(-90deg);
	/* Firefox */-moz-transform: rotate(-90deg);
	/* IE */-ms-transform: rotate(-90deg);
	/* Opera */-o-transform: rotate(-90deg);
	/* Internet Explorer */filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

/* RELATED TO THE TEXT */ /*********************************************************************/
.description {
	position: static;
	height: 100%;
	width: 60%;
	padding-left: 0%;
	padding-right: 0%;
	margin: 0 20% 0 20%;
	background-color: #;
	display: table;}

.description p, .description h8 {
	display: table-cell;
	vertical-align: middle;
	line-height: 28pt;
	font-size: 18pt;}

.description a {
	font-size: 18pt;}

.description h7 {
	font-size: 14px;
	font-family: sans-serif;}

#explorations a {
	font-size: 45pt;
	font-weight: 400;
	text-decoration: underline;
}

#explorations {
	width: 60%;
	background-color: #;
	margin: 0 20% 0 20%;
}

#explorations p{
	font-size: 20pt;
	font-family: sans-serif;
}


.section {
	text-align:left;}

/* RELATED TO THE IMAGES */
.dropshadow {
	 box-shadow: 3px 3px 3px rgba(0,0,0,0.20);}

.maxh img {	
	height: 70%;	
	width: auto;
	margin: 0 50% 0 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);}
.max img {	width: 80%;	margin: 0 10% 0 10%; }
.med img {	width: 50%; margin: 0 25% 0 25%; }
.min img {	width: 35%;	margin: 0 32.5% 0 32.5%; }

.section video {
	margin: 0 15% 0 15%;}

}

/* Desktop Layout: 1024px to a max of 1279px *//*********************************************************************/
@media screen and (min-width:1024px) and (max-width: 1279px) and (orientation:landscape) {
.section h15 { /* Project Category on Left Side */
	position: absolute;
	display: block;
	font-size: 10px;
	font-weight: 400;
	font-family: sans-serif;
	color: #FFF;
	-webkit-filter: invert(50%);
	text-align: center;
	top: 49.5%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);;
	left: -70px;
	width: 200px;
	height: 10px;
	line-height: 0px;
	letter-spacing: 1px;
	z-index: 4000000;
	/* Safari */-webkit-transform: rotate(-90deg);
	/* Firefox */-moz-transform: rotate(-90deg);
	/* IE */-ms-transform: rotate(-90deg);
	/* Opera */-o-transform: rotate(-90deg);
	/* Internet Explorer */filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

/* RELATED TO THE TEXT */ /*********************************************************************/
.description {
	position: static;
	height: 100%;
	width: 60%;
	padding-left: 0%;
	padding-right: 0%;
	margin: 0 20% 0 20%;
	background-color: #;
	display: table;}

.description p, .description h8 {
	display: table-cell;
	vertical-align: middle;
	line-height: 28pt;
	font-size: 18pt;}

.description a {
	font-size: 18pt;}

.description h7 {
	font-size: 14px;
	font-family: sans-serif;}


#explorations a {
	font-size: 35pt;
	font-weight: 400;
	text-decoration: underline;
}

#explorations {
	width: 60%;
	background-color: #;
	margin: 0 20% 0 20%;
}

#explorations p{
	font-size: 20pt;
	font-family: sans-serif;
}



.section {
	text-align:left;}

/* RELATED TO THE IMAGES */
.dropshadow {
	 box-shadow: 3px 3px 3px rgba(0,0,0,0.20);}

.maxh img {	
	height: 70%;	
	width: auto;
	margin: 0 50% 0 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);}
.max img {	width: 80%;	margin: 0 10% 0 10%; }
.med img {	width: 50%; margin: 0 25% 0 25%; }
.min img {	width: 35%;	margin: 0 32.5% 0 32.5%; }

.section video {
	margin: 0 15% 0 15%;}

}

/* Desktop Layout: 1280px and above */ /*********************************************************************/
@media screen and (min-width:1280px) and (orientation:landscape) {
.section h15 { /* Project Category on Left Side */
	position: absolute;
	display: block;
	font-size: 12px;
	font-weight: 400;
	font-family: sans-serif;
	color: #FFF;
	-webkit-filter: invert(50%);
	text-align: center;
	top: 49.5%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);;
	left: -60px;
	width: 200px;
	height: 10px;
	line-height: 0px;
	letter-spacing: 1px;
	z-index: 4000000;
	/* Safari */-webkit-transform: rotate(-90deg);
	/* Firefox */-moz-transform: rotate(-90deg);
	/* IE */-ms-transform: rotate(-90deg);
	/* Opera */-o-transform: rotate(-90deg);
	/* Internet Explorer */filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

/* RELATED TO THE TEXT */ /*********************************************************************/
.description {
	position: static;
	height: 100%;
	width: 60%;
	padding-left: 0%;
	padding-right: 0%;
	margin: 0 20% 0 20%;
	background-color: #;
	display: table;}

.description p, .description h8 {
	display: table-cell;
	vertical-align: middle;
	line-height: 28pt;
	font-size: 18pt;}

.description a {
	font-size: 18pt;}

.description h7 {
	font-size: 14px;
	font-family: sans-serif;}

.section {
	text-align:left;}

#explorations a {
	font-size: 45pt;
	font-weight: 400;
	text-decoration: underline;
}

#explorations {
	width: 60%;
	background-color: #;
	margin: 0 20% 0 20%;
}

#explorations p{
	font-size: 20pt;
	font-family: sans-serif;
}


/* RELATED TO THE IMAGES */
.dropshadow {
	 box-shadow: 3px 3px 3px rgba(0,0,0,0.20);}

.maxh img {	
	height: 80%;	
	width: auto;
	margin: 0 50% 0 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);}
.max img {width: 60%; height: auto; margin: 0 20% 0 20%;}
.med img {	width: 40%; height: auto; margin: 0 30% 0 30%; }
.min img {	width: 25%;	height: auto; margin: 0 37.5% 0 37.5%; }

.section video {
	margin: 0 15% 0 15%;}

}