@font-face {
	font-family: 'fontawesome';
	src:url('../fonts/fontawesome/fontawesome.eot?-e43dk9');
	src:url('../fonts/fontawesome/fontawesome.eot?#iefix-e43dk9') format('embedded-opentype'),
		url('../fonts/fontawesome/fontawesome.woff?-e43dk9') format('woff'),
		url('../fonts/fontawesome/fontawesome.ttf?-e43dk9') format('truetype'),
		url('../fonts/fontawesome/fontawesome.svg?-e43dk9#fontawesome') format('svg');
	font-weight: normal;
	font-style: normal;
} /* Made with http://icomoon.io/app */

/* General Blueprint Style */
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face {
	font-family: 'bpicons';
	src:url('../fonts/bpicons/bpicons.eot');
	src:url('../fonts/bpicons/bpicons.eot?#iefix') format('embedded-opentype'),
		url('../fonts/bpicons/bpicons.woff') format('woff'),
		url('../fonts/bpicons/bpicons.ttf') format('truetype'),
		url('../fonts/bpicons/bpicons.svg#bpicons') format('svg');
	font-weight: normal;
	font-style: normal;
} /* Made with http://icomoon.io/ */

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { font-size: 100%; padding: 0; margin: 0;}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }

body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    color: #777;
    background-color: #333;
    margin-top: 1em;
}

a {
	color: #f0f0f0;
	text-decoration: none;
	outline: none;
}

a:hover {
	color: #000;
}

.ggcontainer > header {
	width: 100%;
 	margin: 0 auto;
	padding: 0em 1.875em 1.875em;
}

.ggcontainer > header h1 {
	font-size: 1.9em;
	margin: 0;
	float: right;
	font-weight: 300;
}

.ggcontainer > header > span {
	display: inline-block;
 	z-index: 200;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 0;
    
}

.ggcontainer > header > span > img {
    position: relative; 
    top: 0px;
    margin-right: 1em;
}

.ggcontainer > header > span span:after {
	width: 30px;
	height: 30px;
	left: -12px;
	font-size: 50%;
	top: -8px;
	font-size: 75%;
	position: relative;
}

.ggcontainer > header > span span:hover:before {
	content: attr(data-content);
	text-transform: none;
	text-indent: 0;
	letter-spacing: 0;
	font-weight: 300;
	font-size: 110%;
	padding: 0.8em 1em;
	line-height: 1.2;
	text-align: left;
	left: auto;
	margin-left: 4px;
	position: absolute;
	color: #fff;
	background: #47a3da;
}

.ggcontainer > header nav {
	float: right;
	text-align: center;
}

.ggcontainer > header nav a {
	display: inline-block;
	position: relative;
	text-align: left;
	width: 2.5em;
	height: 2.5em;
	background: #fff;
	border-radius: 50%;
	margin: 0 0.1em;
	border: 4px solid #47a3da;
}

.ggcontainer > header nav a > span {
	display: none;
}

.ggcontainer > header nav a:hover:before {
	content: attr(data-info);
	color: #47a3da;
	position: absolute;
	width: 600%;
	top: 120%;
	text-align: right;
	right: 0;
	pointer-events: none;
}

.ggcontainer > header nav a:hover {
	background: #47a3da;
}

.bp-icon:after {
	font-family: 'bpicons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	text-align: center;
	color: #47a3da;
	-webkit-font-smoothing: antialiased;
}

.ggcontainer > header nav .bp-icon:after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	line-height: 2;
	text-indent: 0;
}

.ggcontainer > header nav a:hover:after {
	color: #fff;
}

.bp-icon-next:after {
	content: "\e000";
}
.bp-icon-drop:after {
	content: "\e001";
}
.bp-icon-archive:after {
	content: "\e002";
}
.bp-icon-about:after {
	content: "\e003";
}
.bp-icon-prev:after {
	content: "\e004";
}

@media screen and (max-width: 55em) and (orientation : portrait) {

	.ggcontainer > header h1,
	.ggcontainer > header nav {
		float: none;
	}

	.ggcontainer > header > span,
	.ggcontainer > header h1 {
		text-align: center;
	}

	.ggcontainer > header nav {
		margin: 0 auto;
	}

	.ggcontainer > header > span {
	display: inline-block;
	margin: 0px auto;
	}
}






/* General style */
.grid-gallery ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.grid-gallery figure {
	margin: 0;
}

.grid-gallery figure img {
	display: block;
	width: 100%;
}

.grid-gallery figcaption h3 {
    font-size: .9em;
	margin: 0;
	padding: 0 0 0.5em;
    font-weight: 400;
  
}

.grid-gallery figcaption p {
	margin: 0;
    font-size: .8em;
 }

.grid-gallery figcaption p, .grid-gallery figcaption h3 { color: #eee; }
.grid-gallery .slideshow figcaption p, .grid-gallery .slideshow figcaption h3 { color: #333;}
.grid-gallery .slideshow figcaption h3 {margin-top: 2em;}

/* Grid style */
.grid-wrap {
	max-width: 74em;
	margin: 0 auto;
	padding: 0 1em 1.875em;
}

.grid {
	margin: 0 auto;
}

.grid li {
	width: 25%;
	float: left;
	cursor: pointer;
}

.grid figure {
	padding: 15px;
	-webkit-transition: opacity 0.2s;
	transition: opacity 0.2s;
}

.grid li:hover figure {
	opacity: 0.7;
}

.grid figcaption {
	background: #555;
	padding: 12px 15px;
}

/* Slideshow style */
.slideshow {
	position: fixed;
	background: rgba(0,0,0,0.6);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 500;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	-webkit-perspective: 1000px;
	perspective: 1000px;
	-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
	transition: opacity 0.5s, visibility 0s 0.5s;
}

.slideshow-open .slideshow {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.5s;
	transition: opacity 0.5s;
}

.slideshow ul {
	width: 100%;
	height: 100%;
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transform: translate3d(0,0,150px);
	transform: translate3d(0,0,150px);
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}

.slideshow ul.animatable li {
	-webkit-transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
}

.slideshow-open .slideshow ul {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.slideshow li {
	/*width: 660px;*/
	width: 75%;
	/*height: 560px;*/
	height: 100%;
	position: absolute;
	top: 0%;
	left: 12.5%;
	margin: 0 0 0 0px;
	visibility: hidden;
}

.slideshow li.show {
	visibility: visible;
}

.slideshow li:after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(255,255,255,0.8);
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.slideshow li.current:after {
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity 0.3s, visibility 0s 0.3s;
	transition: opacity 0.3s, visibility 0s 0.3s;
}

.slideshow figure {
	width: 100%;
	height: 100%;
	background: #fff;
	border: 50px solid #fff;
	overflow: hidden;
}

.slideshow figcaption {
	padding-bottom: 20px;
}

.slideshow figcaption h3 {
	font-weight: 400;
	font-size: 140%;
}
.slideshow figcaption p {
    font-weight: 400;
    font-size: 100%;
}

.slideshow figure img {
width: auto; max-width: 100%; margin: 0px auto;
}

/* Navigation */
.slideshow nav span {
	position: fixed;
	z-index: 1000;
	color: #59656c;
	text-align: center;
	padding: 3%;
	cursor: pointer;
	font-size: 2.2em;
}

.slideshow nav span.nav-prev,
.slideshow nav span.nav-next {
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.slideshow nav span.nav-next {
	right: 0;
}

.slideshow nav span.nav-close {
	top: 4px;
	right: 4px;
	padding: .15em .45em;
	color: #333;
	border: 2px solid #333;
	background: #ccc;
	border-radius: 1em;
	
	}

.icon:before,
.icon:after {
	font-family: 'fontawesome';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

span.nav-prev:before {
	content: "\e601";
}

span.nav-next:before  {
	content: "\e600";
}

span.nav-close:before {
	content: "\e602";
}

/* Info on arrow key navigation */
.info-keys {
    display: none;
	position: fixed;
	top: 10px;
	left: 10px;
	width: 60px;
	font-size: 8px;
	padding-top: 20px;
	text-transform: uppercase;
	color: #fff;
	letter-spacing: 1px;
	text-align: center;
}

.info-keys:before,
.info-keys:after {
	position: absolute;
	top: 0;
	width: 16px;
	height: 16px;
	border: 1px solid #fff;
	text-align: center;
	line-height: 14px;
	font-size: 12px;
}

.info-keys:before {
	left: 10px;
	content: "\e603";
}

.info-keys:after {
	right: 10px;
	content: "\e604";
}


figure.vid:before{
	font-family: 'fontawesome';

 color: #000;
content:"\e604";
opacity: 0.7;
position: absolute;
text-shadow: 0 3px black;
z-index: 100;
    font-size:4em;
     left:48%;
    top:20%;
    
    }


footer { padding: 10px;  text-align: center; font-size: 9pt;}

footer a {color: #888;}

footer a:hover {text-decoration: none; color: #eee;}




/* media queries (reduce number of columns and change slideshow layout) */

@media screen and (max-width: 60em) {
	/* responsive columns; see "Element sizing" on http://masonry.desandro.com/options.html */
	.grid li {
		width: 33.3%;
	}

	.slideshow li {
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		margin: 0;
	}

	.slideshow li figure img {
		width: auto;
		margin: 0 auto;
		max-width: 100%;
	}

	.slideshow nav span,
	.slideshow nav span.nav-close {
		font-size: 1.8em;
		padding: 0.3em;
	}

	.info-keys {
		display: none;
	}
	
	figure.vid:before{
	font-family: 'fontawesome';

 color: #000;
content:"\e604";
opacity: 0.7;
position: absolute;
text-shadow: 0 3px black;
z-index: 100;
    font-size:4em;
     left:45%;
    top:10%;
    
    }

}

@media screen and (max-width: 35em) {
	.grid li {
		width: 50%;
	}
}

@media screen and (max-width: 24em) {
	.grid li {
		width: 100%;
	}
}






/* iphone6 landscape */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) { 
	
    .slideshow li figure img {
		margin: 0 auto;
		max-width: 60%;
        
        float: left;
        margin-right: 1em;
	}
    
    .slideshow figcaption h3 {
	font-weight: 400;
	font-size: 110%;
    }
    
    .slideshow figure figcaption p {
    font-weight: 400;
    font-size: 65%;
}
    
}

.carousel-control {width: 5%;}
.carousel-control.left, .carousel-control.right {background-image: none;}
a.left.carousel-control, a.right.carousel-control { color: #333; }