/* ===== TOP ===== */

@font-face {
	font-family: 'Permanent Marker';
	src: url("PermanentMarker-Regular.ttf") format("ttf");
}

			
body {
	margin: 0px;
	background-color: #eeeeee;
	max-width: 100%;
	overflow: hidden;
}

html {
	max-width: 100%;
	overflow: hidden;
}

a {
	text-decoration: none;	
}

a:visited, a:link {
	color: #000000;	
}

a:hover {
	color: #444444;	
	text-decoration: underline;
}


/* ===== .CLASS ===== */

.frame .film {			
	border-style: inset;
	border-width: 2px;
	border-color: #DDDDDD;				
	background-color: #a5deff;
}


.thumb.film.polaroid {
	width: calc(60/62*248px);
	height: 248px;
	margin-top: calc(4/60*248px);
}			

.thumb.film.instax {
	width: calc(367/496*248px);
	height: 248px;
	margin-top: calc(5/54*248px);
}



/* ===== ELEM.CLASS ===== */

div.frame {
	margin: auto;
	border-style: outset;
	border-width: 2px;
	border-color: #DDDDDD;			
	box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3); 
	font-size: 3vmin;

	/* FLIP STUFF */
	perspective: 1000px; /* Remove this if you don't want the 3D effect */

}
div.frame.polaroid {				
	width: calc(88/79*60vmin);
	height: calc(107/79*60vmin);
}

div.frame.instax {
	height: calc(34/24*60vmin);
	width: calc(21/24*60vmin);
}

div.film.polaroid {
	width: calc(60/62*60vmin);
	height: 60vmin;
	margin-top: 4vmin;
}

div.film.instax {
	width: calc(367/496*60vmin);
	height: 60vmin;
	margin-top: calc(5/54.4*60vmin);
}

div.thumb.frame {
	margin: 12px;
	background: #ffffff;
/* 	background-image: url('images/frame_7.png');			 */
}

div.thumb.frame.polaroid {				
	width: calc(88/79*248px);
	height: calc(107/79*248px);
}

div.thumb.frame.instax {
	height: calc(34/24*248px);
	width: calc(21/24*248px);
}

div.bl {
	bottom: 3vmin;
	left: 3vmin;
}

div.br {
	bottom: 3vmin;
	right: 3vmin;
}

div.tl {
	top: 1vmin;
	left: 3vmin;
	font-size: 4vmin;
	line-height: 3.5vmin;
}

div.navButton {
	position: absolute;
	top: 50%;

	height: 60px;
	width: 45px;
	border-style: outset;
	border-width: 2px;
	border-color: #DDDDDD;			
	background-color: white;
	padding: 10px;
	box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3); 
	
	font-size: 45px;
	line-height: 60px;
	cursor: pointer;
	z-index: 1010;
}

div.navButton:hover {
	background-color: #DDDDDD;
}

div.pile {
	z-index: 30;
}

div.tags a {
	cursor: pointer;
}

div.tags a:hover {
	color: #444444;	
	text-decoration: underline;
}

span.colorgram {
	width: 15px;
	height: 15px;
	display: inline-block;
	border: solid 1px black;
	border-radius: 2px;
	margin-right: 3px;
	vertical-align: middle;
	cursor: pointer;
}


/* ===== ELEM#ID ===== */


div#backFlip {
	right: 5vmin;
	top: 10vmin;
}

div#btnLoad {
	margin-top: 100px;
}

div#caption {
	position: relative;
	height: 18vmin;
	font-family: 'Permanent Marker', cursive;
}


div#caption div {
	position: absolute;
}

div#closeModal {
	top: 10vmin;
	left: 5vmin;
}


div#filters {
	position: fixed;
	right: 20px;
	top: 60px;
	display: none;
}

div#grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	
	position: relative;
	top: 80px;
	margin-bottom: 100px;
}


div#grid div.thumb.frame.polaroid {				
	width: calc(88/79*124px);
	height: calc(107/79*124px);
}

div#grid div.thumb.frame.instax {
	height: calc(34/24*124px);
	width: calc(21/24*124px);
}

	
div#grid div.thumb.film.polaroid {
	width: calc(60/62*124px);
	height: 124px;
	margin-top: calc(4/60*124px);
}			

div#grid div.thumb.film.instax {
	width: calc(367/496*124px);
	height: 124px;
	margin-top: calc(5/54*124px);
}

div#gridMain {
	display: none;
}

div#hitbox:hover {
	opacity: 0.7;
}

div#hitbox p {
	position: relative;
	right: 25px; 
	top: 50px;
	font-size: 30px;
	font-weight: bold;
}



div#navbar {
	position: fixed;
	top: 0;
	width: 100%;
	height: 80px;

	z-index: 100;
	display: none;

}

div#navbar a {
	cursor: pointer;
}

div#navbar p, div#navbar ul, div#navbar div#filters {
	border: outset 2px #dddddd;		
	border-top: none;
	box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.3); 
	background-image: url('images/frame_13.png');

	position: absolute;
	padding: 15px;			
	margin: 0;

	font-family: 'Permanent Marker';
}

div#navbar p.title {
	left: 20px;

	font-size: 40px;
	line-height: 40px;
	text-align: left;
	display: block;
}

div#navbar p.nav {
/* 	left: 50vw; */
/* 	transform: translate(-50%,0); */
	right: 20px;

	font-size: 20px;
	line-height: 20px;
	height: 20px;
	text-align: right;
	display: block;
}

div#navbar span {
	opacity: 0;
}

div#navbar ul {
	right: 20px;

	font-size: 20px;
	line-height: 20px;
	height: 20px;
	text-align: right;

	display: block;
}

div#navbar li {
	list-style-type: none;
	float: right;
	margin: 0 10px 0 10px;
}

			
div#hitbox {
	border-style: dashed;
	border-width: 5px;
	border-radius: 100px;
	
	width: 200px;
	height: 200px;
	vertical-align: middle;
	line-height: 100px;
	text-align: center;
	
	position: fixed;
	top: -60px;
	right: -100px;

	
	opacity: 0.3;
	display: none;
}

div#mainContent {
	height: 100%;
	overflow-x: hidden;
}



div#modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	z-index: 1000;
}

div#modal div.frame {
	background-image: url('images/frame_13.png');
}			

div#modalBack:hover + div#modalFace {
	display: none;
}

div#modalFrameBack {
	background-color: #FFFFFF;
	background-image: none;
}

div#modalFilmBack {
	position: relative;
	background-color: #000000;
}

div#modalFilmBack div {
	font-family: 'Permanent Marker', cursive;
	padding: 10px;
	color: #ffffff;
}

div#modalFilmBack div a {
	color: #ffffff;	
	cursor: pointer;
}

div#modalFilmBack div a:hover {
	text-decoration: underline;
}


div#modalFilmBack div.notes {
	position: absolute;
	top: 0px;
	font-size: 4vmin;
	line-height: 4vmin;
}

div#modalFilmBack div.tags {
	position: absolute;
	bottom: 0px;
	z-index: 1010;
	right: 0;
	line-height: 3vmin;
}

div#modalOverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: white;
	opacity: 0.8;
	z-index: 1000;
	display: none;
}

div#next {
	right: 5vmin;
}

div#prev {
	left: 5vmin;
}

div#shoebox {
	max-width: 100%;
	max-height: 100%;
	overflow: hidden;
}


div#shoebox div.thumb.frame.polaroid {				
	width: calc(88/79*248px);
	height: calc(107/79*248px);
}

div#shoebox div.thumb.frame.instax {
	height: calc(34/24*248px);
	width: calc(21/24*248px);
}

div#shoeboxMain {
	display: none;
	overflow: hidden;
}

div#stack div.thumb.frame {
	padding: 0;
	margin: 0;
	background: #ffffff;
/* 				background-image: url('images/frame_7.png');			 */
}

div#stack div.thumb.frame.polaroid {				
	width: calc(88/79*372px);
	height: calc(107/79*372px);
}

div#stack div.thumb.frame.instax {
	height: calc(34/24*372px);
	width: calc(21/24*372px);
}

	
div#stack div.thumb.film.polaroid {
	width: calc(60/62*372px);
	height: 372px;
	margin-top: calc(4/60*372px);
}			

div#stack div.thumb.film.instax {
	width: calc(367/496*372px);
	height: 372px;
	margin-top: calc(5/54*372px);
}

div#stack {
	position: relative;
	margin: auto;
/* 	margin-top: 200px; */
/* 
	position: absolute;
	top: 150px;
	left: 50vw;
	transform: translate(-50%, 0);
 */
	width: 414px;
	height: 540px;
}

div.stackItem {
	margin: auto;
	display: none;
}
			
div#stackInfo {
/* 
	position: absolute;
	top: 640px;
	left: 50vw;
	transform: translate(-50%, 0);
 */
 	position: relative;
 	margin: auto;
	max-width: 550px;
	
	font-family: Tahoma, sans-serif;
	background-image: url('images/frame_13.png');
}

div#stackInfo div {
	padding: 4px;
	font-size: 16px;
}

div#stackInfo div.flex {
	display: flex;
	justify-content: space-between;
	
}

div#stackInfo > div {
	border-style: inset;
	border-width: 2px;
	border-color: #DDDDDD;				

	margin: 10px;
	background-color: #ffffff;
	text-align: left;
}

div#stackInfo div.photoTitle {
	max-width: 300px;
}


div#stackMain {
	padding-top: 15vh;
	height: 85vh;
	display: none;
}

div#stackNav div.navButton {
	top: 520px;
	left: 50%;
}


div#stackNav div.navButton.prev {
	transform: translate(-344px);
}

div#stackNav div.navButton.next {
	transform: translate(275px);
}

div#stackNav {
	margin: auto;
	width: 640px;
}


img#photo {
	height: 60vmin;
	backface-visibility: inherit;
	z-index: 1000;
}

span#selectedFilters {
	display: none;
}

span#selectedFilters div {
	width: 250px;
	border-style: inset;
	border-width: 2px;
	border-color: #DDDDDD;
	margin-bottom: 3px;
}

span#selectedFilters div:empty {
	display: none;
}


/* ===== FLIP STUFF ===== */

.flip-card {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(calc(-1*(44/79)*60vmin), calc(-1*(54/79)*60vmin));
	background-color: transparent;
	width: calc(88/79*60vmin);
	height: calc(107/79*60vmin);
	perspective: 1000px;
}

/* ===== This container is needed to position the front and back side ===== */
.flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
	transition: transform 0.4s;
	transform-style: preserve-3d;
}

/* ===== Do an horizontal flip when you move the mouse over the flip box container ===== */
.flip-card:hover .flip-card-inner {

}

/* ===== Position the front and back side ===== */
.flip-card-back, .flip-card-face {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden; /* =====Safari ===== */
	backface-visibility: hidden;
}

/* ===== Style the front side (fallback if image is missing) ===== */
.flip-card-face {
	color: black;
}

/* ===== Style the face side ===== */
.flip-card-back {
	transform: rotateY(180deg);
}

.flip-card img, .flip-card-face div, flip-card-back div {
	display: inherit;
	backface-visibility: inherit;
	-webkit-backface-visibility: inherit;
}

/* ===== FLIP STUFF END ===== */