@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,700");


body
{
	color: #585858;
	font-family: "Source Sans Pro", Helvetica, sans-serif;
	font-size: 100%;
	font-weight: 300;
}

* { box-sizing: border-box; }

h1 { font-size: 2.000em; }
h2 { font-size: 1.500em; }
h3 { font-size: 1.170em; }
h4 { font-size: 1.120em; }
h5 { font-size: 0.830em; }
h6 { font-size: 0.750em; }
p {	font-size: 0.875em; }

h1.responsive { font-size: 2.500vw; }
h2.responsive { font-size: 1.875vw; }
h3.responsive { font-size: 1.410vw; }
h4.responsive { font-size: 1.055vw; }
h5.responsive { font-size: 0.791vw; }
h6.responsive { font-size: 0.593vw; }
p.responsive { font-size: 0.800vw; }

h1.inline {
	display: inline;
}

iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 1%;
	border: 0;
}

.iframeContainer {
	position: relative;
	overflow: hidden;
	padding-top: 56.25%;
}

.textSmall
{
	font-size:	16px;
	line-height: 1.0;
}

.textMedium
{
	font-size:	24px;
	line-height: 1.0;
}

.textLarge
{
	font-size:	32px;
	line-height: 1.0;
}

.viewGallery
{
	max-width: 100%;
	font-size:	24px;
	margin: 0 auto;
	padding-left: 71vw;
}

.viewFullscreen
{
	max-width: 100%;
	font-size:	24px;
	padding-top: 2em;
	margin: 0 auto;
}

/* LINK OVERRIDES */
a:link {
	color: #585858;
}

a:visited {
	color: #585858;
}

a:hover {
	color: #B7C5B8;
}

a:active {
	color: #585858;
}

a.hidden:link {
	color: #585858;
	text-decoration: none;
}

a.hidden:visited {
	color: #585858;
	text-decoration: none;
}

a.hidden:hover {
	color: #B7C5B8;
	text-decoration: none;
}

a.hidden:active {
	color: #585858;
	text-decoration: none;
}
/* END LINK OVERRIDES */

img {
	width: 100%;
	height: auto;
	/*border: solid;*/
}

/* RESPONSIVE IMAGE GALLERY */
/* Center website */
.grid {
	position: relative
	max-width: 100%;
	margin: auto;
	/*border: solid;*/
}

.row {
	margin: 0px 0px;
}

/* Create four equal columns that floats next to each other */
.columnGrid {
	float: left;
	width: 25%;
	/*border: solid;*/
}

/* Add padding BETWEEN each column */
.row,
.row > .columnGrid {
	padding: 5px;
}

/* Clear floats after rows */ 
.row:after {
	content: "";
	display: table;
	clear: both;
	/*border: solid;*/
}

/* Content */
.content {
	background-color: white;
	padding: 0px;
	background-color: #DDDDDD;
	/*border: solid;*/
	/*color: #FFFFFF;*/
}

.contentText {
	padding: 0 5px;
	height:	6em;
	/*border: solid;*/
	/*color: #FFFFFF;*/
}

.content:hover {
	/*border: solid;*/
	/*color: #585858;*/
}

/* Responsive layout - makes a three column-layout instead of four columns */
@media screen and (max-width: 1440px) {
	.columnGrid {
		width: 33%;
	}
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 960px) {
	.columnGrid {
		width: 50%;
	}
}

/* Responsive layout - makes the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 480px) {
	.columnGrid {
		width: 100%;
	}
}

.rowGallery {
	margin: 0px 0px;
	/*border: solid;*/
}

.columnGallery {
	float: left;
	width: 13vw;
	height: calc(13vw / 1.6);
	/*border: solid;*/
	/*color: #000000;*/
}

/* Add padding BETWEEN each column */
.rowGallery,
.rowGallery > .columnGallery {
	padding: 0px;
}

/* Clear floats after rows */ 
.rowGallery:after {
	content: "";
	display: table;
	clear: both;
	/*border: solid;*/
}

img.gallery {
	position: relative;
	width: 100%;
	height: auto;
	/*border: solid;*/
	/*color: #FFFFFF;*/
	margin: auto;
}

img.gallery:hover {
 	outline-style: solid;
 	outline-color: #B7C5B8;
 	z-index: 1;
}

/* END RESPONSIVE IMAGE GALLERY */

/* IMAGE VIEW ON HOVER */
span.hoverImage span 
{
	visibility:hidden;
	opacity:0;
/*	visibility:visible;
	opacity:1;*/
	transition:visibility 0s linear 1.0s,opacity 1.0s linear;
}

span.hoverImage:hover span
{
	visibility:visible;
	opacity:1;
	transition-delay:0s;
	z-index:6;
} 

/* Responsive layout - makes the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1152px ) {
	.columnGallery {
		width: 26vw;
		height: calc(26vw / 1.6);
	}
}

/* END IMAGE VIEW ON HOVER */

/* IMAGE TEXT */
.imageViewContainer {
	position: fixed;
	width: 70vw;
	height: auto;
	top: 55px;
	left: 0.5%;
	/*padding: 3px 3px 3px 3px;*/
	/*border-style:solid;*/
	/*border-color:black;*/
	/*border-width:1px;*/
	/*background: #FFFFFF;	*/
}

.imageViewContainerText {
	color: #FFFFFF;
	position: absolute;
	left: 0%;
	bottom: 0%;
	text-align: left;
	padding: 2%;
}

.imageViewContainerText p.title{
	text-transform: uppercase;
	font-weight: bold;
	font-size: 32px;
}

.imageViewContainerText p.detail{
	font-size: 20px;
}
/* END IMAGE TEXT */

/* ZOOM IMAGE TILE */

.hoverImageContainer {
	position: relative;
	width: 100%;
	height: auto;
	opacity: 0.75;
	transition: transform 0.5s;
	/*border: solid;*/
	/*color: #000000;*/
	margin: auto;
}

img.hoverTile {
	border-radius: 4px;
}

.hoverImageContainer:hover {
	opacity: 1.0;
	transform: scale(1.1);
	transition: transform 0.5s;
}

.hoverTileTitle {
	color: #FFFFFF;
	width: 100%;
	font-weight: bold;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-size: 32px;
	transition: 0.5s;
}

.hoverTileDetail {
	color: #FFFFFF;
	width: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	font-size: 24px;
	transition: 0.5s;
	opacity: 0;
}

.hoverImageContainer:hover .hoverTileTitle{
	transform: translate(-50%, -80%);
	transition: 0.5s;
}

.hoverImageContainer:hover .hoverTileDetail{
	opacity: 1;
	transition: 0.5s;
}
/* END ZOOM IMAGE TILE */

/* INDEX PAGE TILE GRID */
.tileGridContainer {
	display: grid;
	grid-template-columns: auto auto auto auto auto;
	padding: 2%;
	grid-gap: 2%;
	margin: auto;
	/*border: solid;*/
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 1280px) {
	.tileGridContainer {
		grid-template-columns: auto auto auto;
		padding: 5%;
		grid-gap: 5%;
	}
}

/* Responsive layout - makes dual column-layout instead of four columns */
@media screen and (max-width: 800px) {
	.tileGridContainer {
		grid-template-columns: auto auto;
		padding: 5% 5% 25% 5%;
		grid-gap: 2%;
	}
}

/* Responsive layout - makes single column-layout instead of four columns */
@media screen and (max-width: 400px) {
	.tileGridContainer {
		grid-template-columns: auto;
		padding: 5% 5% 25% 5%;
		grid-gap: 2%;
	}
}

/* END INDEX PAGE TILE GRID */

.videoGridContainer {
	display: grid;
	grid-template-columns: auto auto ;
	padding: 2%;
	grid-gap: 2%;
	margin: auto;
	/*border: solid;*/
}

/* NAVIGATION BAR */
.topnav {
  	position: fixed;
	top: 0;
	width: 100%;
	overflow: hidden;
	background-color: #585858;
	z-index: 100;
}

.topnav a {
	float: left;
	display: block;
	color: #FFFFFF;
	text-align: center;
	padding: 10px 10px;
	text-decoration: none;
}

.topnav a:hover {
	background-color: #B7C5B8;
	color: #FFFFFF;
}

.active {
	background-color: #B7C5B8;
	color: white;
}

.topnav .icon {
	display: none;
	padding-right: 20px;
}

@media screen and (max-width: 1024px) {
	.topnav a:not(:first-child) {display: none;}
	.topnav a.icon {
		float: right;
		display: block;
	}
}

@media screen and (max-width: 1024px) {
	/*.topnav.responsive {position: fixed;}*/
	.topnav.responsive .icon {
		position: absolute;
		right: 0;
		top: 0;
	}

	.topnav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
}

/* END NAVIGATION BAR */