@font-face {
	font-family: icons;
	src: url(../fonts/icons/icons.eot?#iefix) format("embedded-opentype"), url(../fonts/icons/icons.woff) format("woff"), url(../fonts/icons/icons.ttf) format("truetype"), url(../fonts/icons/icons.svg#icons) format("svg");
	font-weight: normal;
	font-style: normal;
}
.columns p {
	-webkit-column-break-inside: avoid; -moz-column-break-inside: avoid; column-break-inside: avoid;
}
svg.polaroid {
	margin: 0px auto; display: block; max-width: 100%;
}
.description svg.polaroid {
	padding: 5px 0px 30px;
}
svg.polaroid rect {
	fill: #fff; stroke: #beb4b7; stroke-width: 6;
}
.related {
	padding: 6em 2em; text-align: center; overflow: hidden; font-size: 1.35em; background-color: rgb(68, 68, 68);
}
.related > a {
	margin: 20px 10px; padding: 25px; border: 3px solid rgb(60, 60, 60); transition:color 0.3s, border-color 0.3s; border-image: none; text-align: center; color: rgb(60, 60, 60); display: inline-block; -webkit-transition: color 0.3s, border-color 0.3s;
}
.related a:hover {
	border-color: rgb(190, 180, 183); color: rgb(190, 180, 183);
}
.related a img {
	transition:opacity 0.3s; max-width: 100%; opacity: 0.8; -webkit-transition: opacity 0.3s;
}
.related a:hover img {
	opacity: 1;
}
.related a:active img {
	opacity: 1;
}
.related a h3 {
	margin: 0px; padding: 0.5em 0px 0.3em; text-align: left; max-width: 300px;
}
@media screen and (min-width:60em)
{
.columns {
	column-count: 2; column-gap: 1em; -moz-column-count: 2; -moz-column-gap: 1em; -webkit-column-count: 2; -webkit-column-gap: 1em;
}
.codrops-header .columns {
	padding: 3em 0px 0px; column-gap: 2em; -moz-column-gap: 2em; -webkit-column-gap: 2em;
}
}
@media screen and (max-width:45em)
{
.codrops-header {
	font-size: 80%;
}
.description {
	font-size: 80%;
}
.description {
	padding: 4em 1.5em;
}
.codrops-header svg.polaroid {
	height: 200px;
}
}
@media screen and (max-width:25em)
{
.codrops-icon span {
	display: none;
}
.codrops-icon::before {
	line-height: 2; font-size: 160%;
}
}
.photostack {
	transition:opacity 0.3s; text-align: center; overflow: hidden; position: relative; opacity: 0; -webkit-transition: opacity 0.3s;
}
.show {
	transition:opacity 0.3s; opacity: 100; -webkit-transition: opacity 0.3s;
}
.hide {
	transition:opacity 0.3s; opacity: 0; -webkit-transition: opacity 0.3s;
}
.js .photostack {
	height: 100%;
}
.photostack-start {
	cursor: pointer;
}
.photostack > div {
	margin: 0px auto; width: 100%; height: 100%;
}
.photostack figure {
	background: rgb(255, 255, 255); margin: 5px; padding: 40px; width: 320px; height: 360px; text-align: center; display: inline-block; position: relative;
}
.js .photostack figure {
	margin: 0px; display: block; position: absolute;
}
.photostack figcaption h2 {
	margin: 20px 0px 0px; color: rgb(167, 160, 162); font-size: 16px;
}
.photostack-img {
	background: rgb(249, 249, 249); width: 240px; height: 240px; display: block;
}
.photostack-back {
	background: rgb(255, 255, 255); padding: 50px 40px; left: 0px; top: 0px; width: 100%; height: 100%; text-align: left; color: rgb(167, 160, 162); line-height: 1.25; font-family: "Give You Glory", cursive; font-size: 22px; display: none; position: absolute;
}
.photostack-back p {
	margin: 0px;
}
.photostack-back p span {
	text-decoration: line-through;
}
.photostack nav {
	transition:opacity 0.3s; left: 0px; width: 100%; text-align: center; bottom: 100px; position: absolute; z-index: 90; -webkit-transition: opacity 0.3s;
}
.photostack-start nav {
	opacity: 0;
}
.photostack nav span {
	background: rgb(170, 170, 170); margin: 0px 5px; border-radius: 50%; transition:transform 0.6s ease-in-out, background 0.3s; width: 30px; height: 30px; text-align: center; display: inline-block; position: relative; cursor: pointer; transform: scale(0.48); -webkit-transform: scale(0.48); -webkit-transition: -webkit-transform 0.6s ease-in-out, background 0.3s;
}
.photostack nav span:last-child {
	margin-right: 0px;
}
.photostack nav span::after {
	font: 80%/30px "icons"; transition:opacity 0.3s; color: rgb(255, 255, 255); text-transform: none; vertical-align: top; display: inline-block; content: "\e600"; opacity: 0; backface-visibility: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-transition: opacity 0.3s; -webkit-backface-visibility: hidden; speak: none;
}
.photostack nav span.current {
	background: rgb(136, 136, 136); transform: scale(1); -webkit-transform: scale(1);
}
.photostack nav span.flip.current {
	background: rgb(85, 85, 85); transform: scale(1) rotateY(-180deg) translateZ(-1px); -webkit-transform: scale(1) rotateY(-180deg) translateZ(-1px);
}
.photostack nav span.flippable::after {
	opacity: 1; transition-delay: 0.4s; -webkit-transition-delay: 0.4s;
}
.js .photostack::before {
	background: rgba(0, 0, 0, 0.5); transition:opacity 0.3s, visibility 0s 0.3s; left: 0px; top: 0px; width: 100%; height: 100%; position: absolute; z-index: 100; content: ""; -webkit-transition: opacity 0.3s, visibility 0s 0.3s;
}
.js .photostack-start::before {
	transition:opacity 0.3s; -webkit-transition: opacity 0.3s;
}
.js .photostack::after {
	padding: 10px 20px; border: 3px solid rgb(255, 255, 255); border-image: none; left: 50%; top: 50%; text-align: center; color: rgb(255, 255, 255); text-transform: uppercase; letter-spacing: 1px; font-weight: 400; white-space: nowrap; position: absolute; z-index: 101; cursor: pointer; content: "View Gallery"; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%);
}
.js .photostack::before {
	visibility: hidden; opacity: 0;
}
.js .photostack::after {
	visibility: hidden; opacity: 0;
}
.js .photostack-start::before {
	visibility: visible; opacity: 1;
}
.js .photostack-start:hover::after {
	visibility: visible; opacity: 1;
}
.touch .photostack-start::after {
	visibility: visible; opacity: 1;
}
.photostack figure::after {
	background: rgba(0, 0, 0, 0.05); transition:opacity 0.6s; left: 0px; top: 0px; width: 100%; height: 100%; visibility: visible; position: absolute; content: ""; opacity: 1; -webkit-transition: opacity 0.6s;
}
figure.photostack-current::after {
	transition:opacity 0.6s, visibility 0s 0.6s; visibility: hidden; opacity: 0; -webkit-transition: opacity 0.6s, visibility 0s 0.6s;
}
.photostack-transition figure {
	transition:transform 0.6s ease-in-out; -webkit-transition: -webkit-transform 0.6s ease-in-out;
}
.photostack-perspective {
	perspective: 1800px; -webkit-perspective: 1800px;
}
.photostack-perspective > div {
	-webkit-transform-style: preserve-3d;
}
.photostack-perspective figure {
	-webkit-transform-style: preserve-3d;
}
.photostack-perspective figure {
	backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.photostack-perspective figure div {
	backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.photostack-perspective figure.photostack-flip {
	transform-origin: 0% 50%; -webkit-transform-origin: 0% 50%;
}
.csstransformspreserve3d figure.photostack-flip .photostack-back {
	display: block; transform: rotateY(180deg); -webkit-transform: rotateY(180deg);
}
.no-csstransformspreserve3d figure.photostack-showback .photostack-back {
	display: block;
}
.no-js .photostack figure {
	box-shadow: -2px 2px 0px rgba(0,0,0,0.05);
}
.no-js .photostack figure::after {
	display: none;
}
.no-js .photostack figure:nth-child(3n) {
	transform: translateX(-10%) rotate(5deg); -webkit-transform: translateX(-10%) rotate(5deg);
}
.no-js .photostack figure:nth-child(3n-2) {
	transform: translateY(10%) rotate(-3deg); -webkit-transform: translateY(10%) rotate(-3deg);
}
#photostack-1 nav span.current {
	background: rgb(136, 136, 136); transform: scale(0.61); -webkit-transform: scale(0.61);
}