body {
    font-size: 100%;
    font-style: normal;
    font-family: "canada-type-gibson", sans-serif;
}

.overlay,
.overlay-video {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background-color: rgb(0,0,0); 
	background-color: rgba(0,0,0,0.9);
	text-align: center;
	z-index: 100;
}

.modal,
.modal-video {
	position: fixed;
	top: 50%;
	left: 50%;
	padding: 0;
	margin-right: -50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
}



.loader,
.loader-video {
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #359C39; /* Green */
    border-radius: 50%;
    width: 100px;
    height: 100px;
	position: fixed;
	top: 50%;
	left: 50%;
	margin: -50px 0 0 -50px;
	z-index: 20;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

a.lb-close,
a.lb-close-video {
	position: absolute;
	top: 1em;
	right: 1em;
	display: block;
	margin: 0 0 0 0;
	z-index: 110;
}

/*.lb-close a::before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
}*/

.prev, .next {
	position: absolute;
	top: 50%;
	background-color: #f1f1f1;
	z-index: 12;
}

.prev a, .next a {
	display: block;	
	padding: 1em;
}

.prev { left: 0; }
.next { right: 0; }

.lb-close .icon-close,
.lb-close-video .icon-close,
.prev .icon-bracket-left,
.next .icon-bracket-right { font-size: 60px; }

.overlay figure {
	position: relative;
}

.overlay figure img {
    max-width: 320px;
	max-height: 460px;
    margin: 0 auto;
}

.overlay figcaption {
	margin-top: 1em;
	color: #fff;
    font-weight: 200;
	font-size: 0.75em;
}



a { text-decoration: none; }
a:link {    color: #999;}
a:visited { color: #999;}
a:hover {   color: #222;}
a:active {  color: #000;}


@media screen and (min-width: 480px) {
	.overlay figure img {
		max-width: 480px;
        max-height: 560px;
	}
    .overlay-video video {
        max-height: 720px;
    }
}

@media screen and (min-width: 1024px) {
	.overlay figure img {
		max-width: 960px;
        max-height: 740px;
	}
}

@media screen and (max-width: 480px) {
	.overlay-video video {
        max-height: 640px;
    }
}