*
{
	margin: 0;
	padding: 0;
}

body
{
	text-align: center;
	background-color: #2D112B;
	background-image: url(/static/gallery/images/bg2.png);
	background-size: 100%;
	background-repeat: repeat-y;
	background-position: center center;
	padding-top: 4vh;

	color: #c9293e;
	font-family: 'Verlag A', 'Verlag B', sans-serif;
	font-weight: 400;
	font-style: normal;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;

	overflow-x: hidden;
}

a
{
	color: inherit;
	text-decoration: none;
}

h1
{
	text-align: left;
	font-size: 0;
	height: 145px;
	color: transparent;
	background-image: url(/static/gallery/images/logo2.png);
	background-size: 395px 145px;
	background-repeat: no-repeat;
	background-position: top center;
	max-width: 395px;
	margin: 20px auto;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

body.spoilerAlert
{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
}

body.spoilerAlert div#container
{
	-webkit-filter: blur(25px);
	-moz-filter: blur(25px);
	-ms-filter: blur(25px);
	-o-filter: blur(25px);
	filter: blur(25px);
}

body.spoilerAlert:before
{
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	width: 100%;
	height: 100%;
	overflow: hidden;
	content: "";
	background-color: rgba(0,0,0,0.5);
}

div#spoilerAlert
{
	position: absolute;
	z-index: 110;
	top: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	-moz-transform: translateX(-50%) translateY(-50%);
	-ms-transform: translateX(-50%) translateY(-50%);
	-o-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	left: 50%;
	width: 670px;
	height: 268px;
	background-image: url("/static/gallery/images/rectangle.png");
	background-position: 50% 0%;
	background-repeat: no-repeat;
	background-size: 670px 268px;
	cursor: pointer;
	display: none;
	color: #1d1d1b;
}
			
div#spoilerAlert h2,
div#spoilerAlert p
{
	text-align: center;
	position: relative;
}

div#spoilerAlert h2:before
{
	background-image: url("/static/gallery/images/ranger.png");
	height: 164px;
	width: 100%;
	display: block;
	content: "";
	background-position: 50% 0%;
	background-repeat: no-repeat;
	background-size: 180px 164px;
	margin-top: -82px;
}

body[data-message="success"] div#spoilerAlert h2:before,
body[data-message="error"] div#spoilerAlert h2:before
{
	background-image: none;
	margin-top: -112px;
}

div#spoilerAlert h2
{
	font-family: "Verlag Comp A", "Verlag Comp B";
	font-style: normal;
	font-weight: 900;
	font-size: 72px;
	letter-spacing: 6px;
}

div#spoilerAlert p
{
	font-family: "Verlag A", "Verlag B";
	font-style: normal;
	font-weight: 400;
	font-size: 24px;
}

div#spoilerAlert p strong
{
	font-family: "Verlag A", "Verlag B";
	font-style: normal;
	font-weight: 700;
}

body.spoilerAlert div#spoilerAlert
{
	display: block;
}

body[data-message="success"] div#spoilerAlert 
{
	background-image: url("/static/gallery/images/rectangle-green.png");
	color: #093735;
}

body[data-message="error"] div#spoilerAlert 
{
	background-image: url("/static/gallery/images/rectangle-red.png");
	color: #ff9c73;
}

.description
{
	width: 80%;
	max-width: 1000px;
	margin: 50px auto 0px auto;
}

.description h2
{
	font-size: 2em;
	line-height: 1em;
	font-weight: normal;
	color: #f66b47;
	margin-bottom: .5em;
}
.description p
{
	font-size: 2em;
	font-weight: normal;
}

.description a
{
	text-decoration: underline;
	color: #FFAC01;
	cursor: pointer;
}
.description a:hover
{
	color: #fdc36c;
}

/* Filmstrip */

#filmstrip
{
	position: relative;
	margin: 60px auto 20px auto;
	width: 100%;
/* 	max-width: 1100px; */
	clear: left;
}

.strip
{
	display: inline-block;
	width: 100%;
	position: relative;
	margin-right: -4px;
}

#filmstrip .photoThumb
{
	margin-right: -5px;
}

#filmstrip .photoThumb img
{
	width: 12vw;
	max-width: 200px;
	border-style: solid;
	border-width: 10px 6px;
	-moz-border-image: url(/static/gallery/images/filmstrip.png) 10 6 repeat;
	-webkit-border-image: url(/static/gallery/images/filmstrip.png) 10 6 repeat;
	-o-border-image: url(/static/gallery/images/filmstrip.png) 10 6 repeat;
	border-image: url(/static/gallery/images/filmstrip.png) 10 6 fill repeat;
	margin: 0px;
	box-shadow: 2px 2px 2px #1c0b1b;
}
#filmstrip .photoThumb:first-child img
{
	border-left-width: 6px;
}
#filmstrip .photoThumb:last-child img
{
	border-right-width: 6px;
}

.strip:nth-child(1)
{
	transform: rotate(1.3deg);
}
.strip:nth-child(2)
{
	margin-left: 10px;
	transform: rotate(-1.1deg) translate(0px, -8px);
}
.strip:nth-child(3)
{
	margin-left: -12px;
	transform: rotate(.6deg) translate(0px, -22px);
}

#buyLink
{
	width: 200px;
	margin: 40px auto 80px auto;
/* 	background: red; */
}

#buy
{
	float: left;
	position: relative;
	width: 100%;
	margin: 20px auto 80px auto;
	padding: 30px 0;
	background: rgba(0,0,0,.3);
	color: white;
	z-index: 500;
}

h3
{
	color: #FFAC01;
	/* text-transform: uppercase; */
	font-size: 2.6em;
	font-weight: 700;
	font-family: "Verlag Comp A", "Verlag Comp B";
	text-transform: uppercase;
	margin-bottom: 20px;
	letter-spacing: 2px;
}

.centered
{
	max-width: 800px;
	margin: 0px auto;
}

#beta-text {
	margin: 12px 0 12px 0;
	float: left;
	width: 100%;
}

p.beta {
	position: relative;
	top: 12px;

	color: #FFAC01;
	font-size: 1.5em;
  font-family: 'Verlag A', 'Verlag B', sans-serif;
}

#buy .leftColumn,
#buy .rightColumn
{
	display: block;
	clear: none;
	float: left;
	width: 50%;
	text-align: left;
}
#buy ul
{
	list-style-type: disc;
/* 	list-style-position: inside; */
}
#buy li
{
	text-align: left;
	font-size: 1.2em;
}

.leftColumn img
{
	position: relative;
	top: 15px;
}

@media screen and (max-width: 840px)
{
	#buy .leftColumn,
	#buy .rightColumn
	{
		clear: both;
		width: 100%;
		text-align: center;
	}
	.centered
	{
		width: 80%;
	}
	.leftColumn img
	{
		display: none;
	}
}

a#buyButton
{
	position: relative;
	display: inline-block;
	text-align: center;
	width: 210px;
	height: 30px;
	padding: 17px 15px;
	margin: 40px 0 0 0;
	background: url(/static/gallery/images/jakeshape1.svg) no-repeat;
	background-size: 240px 60px;
	color: #000d34;
	cursor: pointer;
	font-size: 1.8em;
	line-height: 30px;
	font-family: "Verlag A", "Verlag B";
	font-weight: 700;
	text-transform: uppercase;
}

a#buyButton:hover
{
	color: #c9293e;
}

section.photographs
{
	margin: 0 auto;
	text-align: left;
	width: 90%;
	max-width: 950px;
}

#whatIsFirewatch:before
{
	position: absolute;
	top: -37px;
	left: 0px;
	display: block;
	content: '';
	width: 100%;
	height: 67px;
	background: url(/static/gallery/images/firewatch-logo@2x.png) no-repeat center top;
	background-size: 67px 67px;
}

#whatIsFirewatch
{
	position: relative;
	margin-bottom: 80px;
	padding: 40px 20px 30px 20px;
	border: 4px solid #7b0832;
}

#whatIsFirewatch h3
{
/* 	text-transform: none; */
}


figure.photograph
{
	display: block;
	width: 100%;
	margin-bottom: 0px;
	padding-top: 50px;
	z-index: 1;
	-webkit-transition: -webkit-transform 0.2s ease-out;
	-moz-transition: -moz-transform 0.2s ease-out;
	-ms-transition: -ms-transform 0.2s ease-out;
	-o-transition: -o-transform 0.2s ease-out;
	transition: transform 0.2s ease-out;
	text-align: left;
}

figure.photograph a.photo
{
/* 	position: absolute; */
	display: block;
/* 	width: 100%; */
/* 	height: 211px; */
}

figure.photograph img
{
	-webkit-box-shadow: 0px 2px 4px #000;
	-moz-box-shadow: 0px 2px 4px #000;
	-ms-box-shadow: 0px 2px 4px #000;
	-o-box-shadow: 0px 2px 4px #000;
	box-shadow: 0px 2px 4px #000;
}

figure.photograph,
figure.photograph img
{
	width: 100%;
/* 	width: 375px; */
/* 	height: 211px; */
	z-index: 1;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

figure.photograph figcaption
{
	display: inline-block;
}

/* Random rotation */

figure.photograph:nth-of-type(1),
figure.photograph:nth-of-type(9),
figure.photograph:nth-of-type(17)
{
	-webkit-transform: rotate(0.9deg);
	-moz-transform: rotate(0.9deg);
	-ms-transform: rotate(0.9deg);
	-o-transform: rotate(0.9deg);
	transform: rotate(0.9deg);
}

figure.photograph:nth-of-type(2),
figure.photograph:nth-of-type(10),
figure.photograph:nth-of-type(18)
{
	-webkit-transform: rotate(-1.1deg);
	-moz-transform: rotate(-1.1deg);
	-ms-transform: rotate(-1.1deg);
	-o-transform: rotate(-1.1deg);
	transform: rotate(-1.1deg);
}

figure.photograph:nth-of-type(3),
figure.photograph:nth-of-type(11),
figure.photograph:nth-of-type(19)
{
	-webkit-transform: rotate(0.8deg);
	-moz-transform: rotate(0.8deg);
	-ms-transform: rotate(0.8deg);
	-o-transform: rotate(0.8deg);
	transform: rotate(0.8deg);
}

figure.photograph:nth-of-type(4),
figure.photograph:nth-of-type(12),
figure.photograph:nth-of-type(20)
{
	-webkit-transform: rotate(1deg);
	-moz-transform: rotate(1deg);
	-ms-transform: rotate(1deg);
	-o-transform: rotate(1deg);
	transform: rotate(1deg);
}

figure.photograph:nth-of-type(5),
figure.photograph:nth-of-type(13),
figure.photograph:nth-of-type(21)

{
	-webkit-transform: rotate(-0.7deg);
	-moz-transform: rotate(-0.7deg);
	-ms-transform: rotate(-0.7deg);
	-o-transform: rotate(-0.7deg);
	transform: rotate(-0.7deg);
}

figure.photograph:nth-of-type(6),
figure.photograph:nth-of-type(14),
figure.photograph:nth-of-type(22)
{
	-webkit-transform: rotate(-1deg);
	-moz-transform: rotate(-1deg);
	-ms-transform: rotate(-1deg);
	-o-transform: rotate(-1deg);
	transform: rotate(-1deg);
}

figure.photograph:nth-of-type(7),
figure.photograph:nth-of-type(15),
figure.photograph:nth-of-type(23)

{
	-webkit-transform: rotate(0.4deg);
	-moz-transform: rotate(0.4deg);
	-ms-transform: rotate(0.4deg);
	-o-transform: rotate(0.4deg);
	transform: rotate(0.4deg);
}

figure.photograph:nth-of-type(8),
figure.photograph:nth-of-type(16),
figure.photograph:nth-of-type(24)

{
	-webkit-transform: rotate(1deg);
	-moz-transform: rotate(1deg);
	-ms-transform: rotate(1deg);
	-o-transform: rotate(1deg);
	transform: rotate(1deg);
}

/*
figure.photograph:hover
{
	-webkit-transform: scale(1.08);
	-moz-transform: scale(1.08);
	-ms-transform: scale(1.08);
	-o-transform: scale(1.08);
	transform: scale(1.08);
}
*/

figure.photograph a.twitter,
figure.photograph a.facebook,
figure.photograph a.download,
figure.photograph a.print
{
	color: transparent;
	position: relative;
	display: inline-block;
	top: -75px;
	left: 10px;
/* 	top: 221px; */
	font-size: 0px;
	bottom: 0;
	border: 6px solid #2b132a;
	border-radius: 6px;
	background-color: #2b132a;
	background-position: left center;
	background-repeat: no-repeat;
	background-size: contain;
	-webkit-box-shadow: 0;
	-moz-box-shadow: 0;
	-ms-box-shadow: 0;
	-o-box-shadow: 0;
	box-shadow: 0;
	width: 36px;
	height: 36px;
	margin: 0 10px;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
	-webkit-transition-property: -webkit-transform, opacity;
	-webkit-transition-duration: 0.08s, 0.15s;
	-webkit-transition-timing-function: ease-out, ease-out;

	-moz-transition-property: -moz-transform, opacity;
	-moz-transition-duration: 0.08s, 0.15s;
	-moz-transition-timing-function: ease-out, ease-out;

	transition-property: transform, opacity;
	transition-duration: 0.08s, 0.15s;
	transition-timing-function: ease-out, ease-out;

}
figure.photograph a.print
{
	width: 160px;
}

figure.photograph a.twitter:active,
figure.photograph a.facebook:active,
figure.photograph a.download:active,
figure.photograph a.print:active
{
	-webkit-filter: blur(1px);
	-moz-filter: blur(1px);
	-ms-filter: blur(1px);
	-o-filter: blur(1px);
	filter: blur(1px);
}

figure.photograph.stock
{
}

/*
figure.photograph.stock a img

{
	-webkit-filter: saturate(0);
	-moz-filter: saturate(0);
	-ms-filter: saturate(0);
	-o-webkit-filter: saturate(0);
	filter: saturate(0);
}

figure.photograph.stock:hover a img
{
	-webkit-filter: saturate(1);
	-moz-filter: saturate(1);
	-ms-filter: saturate(1);
	-o-webkit-filter: saturate(1);
	filter: saturate(1);
}
*/

section.photographs.stock:before
{
	content: "";
	margin: 0 auto 80px auto;
	display: block;
	width: 70%;
	border-top: 3px solid #7d0031;
}

a.twitter
{
	background-image: url(/static/gallery/images/badge-twitter@2x.png);
}

a.facebook
{
	background-image: url(/static/gallery/images/badge-facebook@2x.png);
}

a.download
{
	background-image: url(/static/gallery/images/badge-download@2x.png);
}
a.print
{
	background-image: url(/static/gallery/images/badge-print@2x.png);
}

figure.photograph a.twitter:hover,
figure.photograph a.facebook:hover,
figure.photograph a.download:hover,
figure.photograph a.print:hover
{
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}

figure.photograph:hover a
{
	opacity: 1;
}

a#batchDownloader
{
	color: #fb6e47;
	text-decoration: underline;
	font-size: 18px;
	display: inline-block;
	margin: 30px auto 80px auto;
	background-image: url(/static/gallery/images/badge-download@2x.png);
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 1em;
	padding-left: 1.35em;
}

@media screen and (max-width: 415px)
{
	h1
	{
		background-size: 80vw;
		margin-bottom: -60px;
	}
	
	figure.photograph
	{
		margin-top: -40px;
	}
	
	a#batchDownloader
	{
		width: 60vw;
/* 		font-size: 14px; */
		background-position: center bottom;
		padding-bottom: 25px;
		padding-left: 0px;
	}
	
	div#spoilerAlert
	{
	-webkit-transform: translateX(-50%) translateY(-50%) scale(0.4);
	-moz-transform: translateX(-50%) translateY(-50%) scale(0.4);
	-ms-transform: translateX(-50%) translateY(-50%) scale(0.4);
	-o-transform: translateX(-50%) translateY(-50%) scale(0.4);
	transform: translateX(-50%) translateY(-50%) scale(0.4);
	}
}

footer
{
	text-align: center;
	text-transform: uppercase;
	padding-bottom: 3em;
	padding-left: .5em;
	padding-right: .5em;
	color: #7d0031;
}

footer p
{
	font-size: 15px;
}

.logo
{
	display: inline-block;
	background-repeat: no-repeat;
	margin: 0px 25px 2em 35px;
	color: transparent;
	text-indent: -9999px;
}

#logoCampoSanto
{
	width: 101px;
	height: 55px;
	background-size: 101px 55px;
	background-image: url("/static/gallery/images/logo-camposanto@2x.png");
	vertical-align: middle;
}

#logoPanic
{
	width: 44px;
	height: 55px;
	background-size: 44px 46px;
	background-image: url("/static/gallery/images/logo-panic@2x.png");
	background-position: center 0px;
	vertical-align: middle;
}

body[data-touch="true"] figure.photograph a
{
	opacity: 1;
}

body[data-touch="true"] div#spoilerAlert p strong
{
	opacity: 1;
	font-size: 0;
}

body[data-touch="true"] div#spoilerAlert p strong:before
{
	content: "just tap anywhere";
	font-size: 24px;
}

section.photographs
{
	text-align: center;
}

a.back-to-roll:before
{
	width: 27px;
	height: 27px;
	content: "";
	position: relative;
	left: -7px;
	display: inline-block;
	background: url("/static/gallery/images/back-to-roll.png");
	background-size: 27px 27px;
	background-repeat: no-repeat;
	background-position: 0 50%;
}

a.back-to-roll
{
	color: #321831;
	background: transparent url("/static/gallery/images/back-to-roll-bg.png") top center no-repeat;
	background-size: 433px 72px;
	font-weight: 800;
	font-family: "Verlag Comp A", "Verlag Comp B";
	font-size: 36px;
	line-height: 72px;
	min-width: 433px;
	padding-left: 5px;
	display: block;
	margin: 20px auto 80px auto;
	height: 72px;
	text-transform: uppercase;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

#photosFront
{
	display: block;
	width: 80%;
	max-width: 550px;
	margin: 40px auto;
}


@media screen and (max-width: 530px)
{
	a.back-to-roll:before
	{
		background-size: 13px 13px;
		height: 13px;
		width: 13px;
	}
	a.back-to-roll
	{
		font-size: 18px;
		line-height: 36px;
		height: 36px;
		background-size: 217px 36px;
		min-width: 217px;
	}
}