/* Reset 

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
	display:block;
}
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
html,
body {
	height: 100%;
}
body{
  margin: 0;
  font: 1.2em/1.3em 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Roboto-Light', 'Roboto Light', 'Roboto', 'Segoe UI Web Light', 'Segoe UI Light', 'Segoe UI Web Regular', 'Segoe UI', Helvetica, Arial, sans-serif;
  background: #443c34;
  color: #fff;
  padding: 0;
}
img {
	border: 0;
}
a {
	color: #72b809;
}

/* Base Styles 

* {
	-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

header {
	margin: 1em 1em 2em;
	text-shadow: -1px -2px 0 #000;
	text-align: center;
}
header h1 {
	font-family: 'Life Savers';
	font-weight: normal;
	font-size: 36px;
}
footer {
    padding: 3em 1em 1em;
    font-size: 0.75em;
    text-align: right;
}
*/
*[hidden] {
	display: none;
}

/* Photo */

#photoFrame {
	position: relative;
	text-align:center;
}
#photo {
/* 	width: 500px;
	height: 500px;
	object-fit: cover; */
}
figure {
	margin: 0;
	text-align: center;
	box-shadow: 2px 2px 8px rgba(0,0,0,0.6), inset 0 0 30px rgba(0,0,0,0.2);
	display:grid;
	place-items:center;
}
@media (min-width: 700px) {
	#photoFrame {
		padding-left: 90px;
	}
	header h1 {
		font-size: 48px;
	}
	#originalPhoto, #filteredPhoto {
		width: auto;
		background: #111;
		width: 500px;
	}
	figure {
		text-align: center;
		margin: 1em auto;
		position: relative;
		background-color: #fff;
/* 		width: 540px; */
		padding: 20px;
/* 		height: 610px; */
		vertical-align: bottom;
		box-shadow: 2px 2px 8px rgba(0,0,0,0.6), inset 0 0 30px rgba(0,0,0,0.2);
	}
	figure::before,
	figure::after {
		content: "";
		position: absolute;
		background-color: #fff;
		width: 540px;
		height: 610px;
		box-shadow: 2px 2px 8px rgba(0,0,0,0.6), inset 0 0 30px rgba(0,0,0,0.2);
		-webkit-transform-origin: bottom left;
		-moz-transform-origin: bottom left;
		-ms-transform-origin: bottom left;
		-o-transform-origin: bottom left;
		transform-origin: bottom left;
	}
	figure::before {
		top: 5px;
		left: 5px;
		z-index: -1;
		-webkit-transform: rotate(2deg);
		-moz-transform: rotate(2deg);
		-ms-transform: rotate(2deg);
		-o-transform: rotate(2deg);
		transform: rotate(2deg);
	}
	figure::after {
		top: 10px;
		z-index: -2;
		-webkit-transform: rotate(3deg);
		-moz-transform: rotate(3deg);
		-ms-transform: rotate(3deg);
		-o-transform: rotate(3deg);
		transform: rotate(3deg);
	}
	figcaption {
		color: #333;
		font-size: 1.8em;
		line-height: 2;
		padding: 10px;
		text-align: center;
		font-family: 'Homemade Apple', serif;
		font-weight: 400;
	}
}

/* Loader */

#loader {
  width: 200px;
  height: 200px;
  line-height: 200px;
  background: rgba(0,0,0,0.5);
  text-align: center;
  color: #fff;
  border-radius: 12px;
  position: fixed;
  left: 50%;
  margin-left: -100px;
  top: 50%;
  margin-top: -100px;
  z-index: 10;
}

/* Filter Effects */
/*
nav {
  position: fixed;
  bottom: 0;
  text-align: center;
  width: 100%;
  padding: .75em 0 .5em;
  background: rgba(0, 0, 0, 0.25);
}
*/

#filterButtons { 
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden; 
}
.filter {
  display: inline-block;
  margin: 3px 8px;
  border-radius: 8px;
  box-shadow: inset 0 0 10px #000;
  height: 72px;
  width: 72px;
  cursor: pointer;
  background: url("/wp-content/uploads/2022/11/Normal.png") no-repeat 0 0;
  background-size: cover;
}
.filter:hover {
	box-shadow: 0 0 12px #72b809;
}
.filter.clarendon {
  background-image: url("/wp-content/uploads/2022/11/Clarendon.png");
}
.filter.juno {
  background-image: url("/wp-content/uploads/2022/11/Juno.png");
}
.filter.lark {
  background-image: url("/wp-content/uploads/2022/11/Lark.png");
}
.filter.ludwig {
  background-image: url("/wp-content/uploads/2022/11/Ludwig.png");
}
.filter.gingham {
  background-image: url("/wp-content/uploads/2022/11/Gingham.png");
}
.filter.valencia {
  background-image: url("/wp-content/uploads/2022/11/Valencia.png");
}
.filter.xpro2 {
  background-image: url("/wp-content/uploads/2022/11/X-Pro-II.png");
}
.filter.lofi {
  background-image: url("/wp-content/uploads/2022/11/Lo-Fi.png");
}
.filter.amaro {
  background-image: url("/wp-content/uploads/2022/11/Amaro.png");
}
.filter.brooklyn {
	background-image: url('/wp-content/uploads/2022/11/Brooklyn.png')
}
.filter.willow {
  background-image: url("/wp-content/uploads/2022/11/Willow.png");
}

.filter-tag {
  color: #00000;
  font-size: .8em; 
  text-align: center;
  padding-top: 70px;
}

/* More Photos */
#more {
	position: relative;
	margin: 6em 1em 120px;
}
#more p {
	margin: 0.5em 0 0.2em;
	color: #fff;
	opacity: 0.8;
}
#more p.error {
	color: #ff4fff;
	font-size: 0.85em;
	font-weight: bold;
}
#more ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#more small {
	display: inline;
}
#more input[type=text] {
	font-size: 0.85em;
	border: 0;
  border-radius: 4px;
  padding: 2px 5px;
}
#more input[type=file] {
	border: 0;
  border-radius: 4px;
  padding: 2px 5px;
  color: #fff;
}

@media (min-width: 960px) {
	#more {
		display: block;
		position: absolute;
		top: 0;
		left: 1em;
	}
	#more small {
		display: block;
	}
}

@media (max-width:768px){
	#filterButtons{
		text-align:left;
		padding:0;
	}
}