/****************************************************************************************
*	CSS Polaroids
*	(c) 2018 Sven Göttner <post(at)sven-goettner(dot)de>
****************************************************************************************/
@charset "UTF-8";

@font-face {
	font-family: "Reenie Beanie";
	src: url("../fonts/ReenieBeanie.ttf");
}

.polaroids {
	text-align: center;
	display: table-cell; /* alignes the polaroids at the bottom and makes them float */
}

figure.polaroid {
	background: white;
	text-align: center;
	border: 1px solid grey;
	box-shadow: 0 3px 6px rgba(0,0,0,0.25);
	display: inline-block;
	vertical-align: bottom;
}

figure.polaroid  img {
	width: 98%;
	height: auto;
	padding: 2.5% 2.5% 0 2.5%;
}

figure.polaroid  figcaption {
	width: 79%;
	font-family: "Reenie Beanie";
	color: var(--brown);
	font-size: calc(150%);
	text-align: center;
	margin: 3% auto;
}


/* hide all picture links but the first one - so that the first ist displayed but all others can be caught by LightBox2,
*	without having the first image twice in the lightbox... 
*/
figure.polaroid a:not(:first-of-type) {
	display: none;
}




/*
*	Rotation and Positioning
*	Idea taken from https://zurb.com/playground/css3-polaroids
**/

/* By default, we tilt all images by -1 degrees */
figure.polaroid { transform: rotate(-1deg); }

/* rotate all even images by 2 degrees */
figure.polaroid:nth-child(even) { transform: rotate(2deg); }

/* don't rotate every 3rd image, but offset its position by 5px */
figure.polaroid:nth-child(3n) { position: relative; top: -5px; }

/* Rotate every fifth image by 5 degrees and offset it */
figure.polaroid:nth-child(5n) { transform: rotate(5deg); position: relative; right: 5px; }

/* Keep default rotation for every eighth, but offset it */
figure.polaroid:nth-child(8n) { position: relative; top: 8px; right: 5px; }

/* Keep default rotation for every eleventh, but offset it */
figure.polaroid:nth-child(11n) { position: relative; top: 3px; left: -5px; }



/*	Enlarge smoothly and darken the shadow a bit on hoovering */
figure.polaroid:hover {
	transform: scale(1.25);
	position: relative;
	z-index: 5;
	transition: 0.15s linear;
	box-shadow: 0 3px 6px rgba(0,0,0,0.5);
}

/* Sometimes, one might use the images as links, e.g. to the highres version or for use with lightbox etc.
*	We don't want any of the classic link styles here!
*/
figure.polaroid a {
	text-decoration: none;
	border: none;
	outline: none;
}


/* media queries */


/* iPad Pro (portrait), 17" desktop and bigger (screens > 1024px) */
@media only screen and (min-width: 1024px) {
	
	/* two polaroids next to each other */
	figure.polaroid {
		max-width: 49%;
	}
}

/* Apple Cinema, 30" displays and bigger (screens > 2560px) */
@media only screen and (min-width: 2560px) {

	/* three polaroids next to each other */
	figure.polaroid {
		max-width: 32%;
	}
}