/* Additions for the Eleventy rebuild: styles for behaviour that used to come from jQuery plugins (see js/site.js). */

.nav-button {
	border: 0;
	padding: 0;
	background: none;
	color: inherit;
}

.to-top {
	border: 0;
	padding: 0;
}

/* Inline SVG icons (replace Font Awesome; sizes match its fa-lg / fa-2x) */
.icon {
	display: inline-block;
	fill: currentColor;
	vertical-align: -0.125em;
}
.icon-lg {
	font-size: 1.3333em;
	vertical-align: -15%;
}
.icon-2x { font-size: 2em; }
.icon-flip { transform: scaleX(-1); }
.footer-contacts li a .icon { margin-right: 10px; vertical-align: middle; color: #fed852; }
.footer-social li a .icon { vertical-align: middle; }
.to-top .icon, .footer-social li a .icon { transition: opacity 300ms linear; }
.to-top:hover .icon, .footer-social li a:hover .icon { opacity: 0.5; }

/* Gallery filter buttons: block-level boxes so they don't overlap when they wrap on small screens */
.vis-filter li a {
	display: inline-block;
	margin-bottom: 4px;
}

/* The about photo is served at 2x for sharp screens; keep its original 350px size */
.about-image img {
	width: 100%;
	max-width: 350px;
	height: auto;
}

/* Fade-ins on page load */
#main { transition: opacity 500ms; }
.wrapper-inner, .fixed-column, footer, .hero-wrapper { transition: opacity 900ms; }
.grid-item-holder { transition: opacity 500ms; }
.is-visible { opacity: 1 !important; }

/* Masonry gallery (was Isotope). Floats are the fallback until site.js lays it out. */
.gallery-item { float: left; }
.gallery-items.is-laid-out .gallery-item {
	position: absolute;
	top: 0;
	left: 0;
	float: none;
}
.gallery-items.is-animated .gallery-item { transition: transform 400ms ease; }
.gallery-item[hidden] { display: none; }

/* Section nav sticks to the top on wide screens (was jQuery ScrollToFixed) */
@media only screen and (min-width: 1037px) {
	.scroll-nav-holder {
		position: sticky;
		top: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; }
}