:root {
	--brand-color: #FF1900;
	--element-background-color: white;
	--main-background-color: #ededed;
	--text-color: #2d2d2d;
	--border-color: Gainsboro;

	--distance: 10px;
	--nav-height: 44px;
	--safe-distance-top:    max(var(--distance),env(safe-area-inset-top));
	--safe-distance-bottom: max(var(--distance),env(safe-area-inset-bottom));
	--safe-distance-left:   max(var(--distance),env(safe-area-inset-left));
	--safe-distance-right:  max(var(--distance),env(safe-area-inset-right));
	--hover-animation-duration: 200ms;
	
	font-size: 14px;
}

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
}

html {
	line-height: 1.6;
    background-color: var(--main-background-color);
	color: var(--text-color);
}
body {
	font-family: 'Montserrat', sans-serif;
	width: 100vw;
	overflow-x: hidden;
}
.statusbar {
	height: env(safe-area-inset-top);
	background: rgba(0,0,0,.8);
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 10;
	pointer-events: none;
	-webkit-backdrop-filter: blur(5px);
			backdrop-filter: blur(5px);
	font-family: monospace;
	font-size: 0.7rem;
	color: silver;
}
aside,main {
	width: 100vw;
}
aside {
	height: 60vh;
	min-height: 300px;
	position: relative;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: space-evenly;
	padding: var(--safe-distance-top) var(--distance) var(--nav-height) var(--safe-distance-left);
}
aside header,
.social-links {
	margin-bottom: calc(2 * var(--distance));
}

.nav-anchor,
nav {
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
}

nav {
	z-index: 9;
	padding-right: var(--distance);
	padding-left: var(--distance);
	display: flex;
	align-content: stretch;
	align-items: stretch;
	justify-content: space-between;
	flex-direction: row;
	border-bottom: 1px solid var(--border-color);
	overflow-x: scroll;
	white-space: nowrap;
}
.nav-anchor {
	height: var(--nav-height);
}
nav.sticky {
	position: fixed;
	top: env(safe-area-inset-top);
	bottom: unset;
	background: rgba(237, 237, 237,.7);
	-webkit-backdrop-filter: blur(5px);
			backdrop-filter: blur(5px);
	border: none;
}

nav a {
	flex-grow: 1;
	display: block;
	position: relative;
	margin-right: var(--distance);
	padding: var(--distance) 0;
	text-decoration: none;
	color: grey;
	transition: color var(--hover-animation-duration);
}
nav a:hover {
	color: var(--text-color);
}
nav a.active {
	font-weight: bold;
	color: var(--text-color);
}
nav a:before {
	content: "";
	position: absolute;
	height: 4px;
	left: 0;
	right: 0;
	bottom: 0;
	background: none;
	transition: background var(--hover-animation-duration);
}
nav a:hover:before {
	background: silver;
}
nav a.active:before {
	background: var(--brand-color);
}

nav .language-switch {
	position: relative;
	flex-grow: 0;
	height: var(--nav-height);
	display: flex;
	justify-content: center;
	align-items: center;
	margin: auto;
}

nav .language-switch select {
	background: none;
	border: none;
	padding: 0;
	-webkit-appearance: none;
	   -moz-appearance: none;
	   		appearance: none;
	outline: none;
	display: block;
	overflow: hidden;
	width: var(--nav-height);
	height: 100%;
	opacity: 0;
	font-size: 18px;
}
nav .language-switch label {
	position: absolute;
	pointer-events: none;
}
nav .language-switch label img {
	width: 1em;
	border: .2px solid silver;
	border-radius: 20px;
}
main {
	padding: var(--distance);
}

.grid {
	width: 100%;
}
/* Size of the Masonry gutter */
.gutter-sizer {
	width: var(--distance);
}
/* Size of the Masonry columns and cells */
.grid-sizer,
.grid-item {
	width: 100%;
} 

.grid figure {
	margin: 0 0 var(--distance);
}

.grid img {
	position: absolute;
	width: 100%;
	height: auto;
	z-index: 1;
	pointer-events: none;
}

.grid figure .painting-link {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	line-height: 0;
	background: none;
	transition: var(--hover-animation-duration) transform;
	/* background: var(--element-background-color); */
}
.grid figure .painting-link:hover {
	transform-origin: center;
	transform: scale(1.04) rotate(0.6deg);
	z-index: 3;
}

.grid figure .painting-link:hover img {
	-webkit-filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.5));
	/* box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.5); */
}
.grid figure:nth-of-type(2n) .painting-link:hover {
	transform: scale(1.04) rotate(-0.6deg);
	
}

#torreadore-2016 a {
	padding-bottom: 48% !important;
	z-index: 2;
}

/* Add discount label to the overview */
.grid figure a[discount]:before {
	content: attr(discount);
	display: inline-block;
	background: black;
	color: white;
	position: absolute;
	top: 0;
	right: 0;
	font-size: 0.8rem;
	padding: 5px 10px;
	z-index: 2;
	line-height: 1;
	transition: var(--hover-animation-duration) opacity;
}
.grid figure a[discount]:hover:before {
	opacity: .15;
}

/* Hide caption in the overview */
.grid figcaption {
	display: none;
}

s {
	opacity: .5;
}

@media screen and (min-width: 300px) {
	/* Grid with 2 columns */
	.grid-sizer,
	.grid-item {
		width: calc(50% - (var(--distance) / 2) );
	}
}
@media screen and (min-width: 450px) {
	:root {
		font-size: 16px;
	}

	/* Grid with 3 columns */
	.grid-sizer,
	.grid-item {
		width: calc((100%/3) - (var(--distance) / 3 *2) );
	}
}
@media screen and (min-width: 600px) {
	aside {
		height: 100vh;
		width: 50vw;
		position: fixed;
		overflow: scroll;
		padding-top: 120px;
		padding-bottom: var(--safe-distance-bottom);
		z-index: 1;
	}
	nav {
		position: relative;
		flex-direction: column;
		bottom: env(safe-area-inset-bottom);
		border: none;
		overflow-x: auto;
	}
	nav a,
	nav .language-switch {
		margin: calc( var(--distance) / 2) auto ;
	}
	nav a {
    	padding: var(--distance);
	}
	nav .language-switch label img {
		width: 20px;
	}
	main {
		position: relative;
		padding-top: calc(env(safe-area-inset-top) + var(--distance));;
		padding-left: 50vw;
		min-height: 100vh;
	}
	/* Grid with 2 columns */
	.grid-sizer,
	.grid-item {
		width: calc(50% - (var(--distance) / 2) );
	}
}
@media screen and (min-width: 900px) {
	aside {
		width: 35vw;
	}
	main {
		padding-left: 35vw;
	}
	/* Grid with 3 columns */
	.grid-sizer,
	.grid-item {
		width: calc((100%/3) - (var(--distance) / 3 * 2) );
	}
}
@media screen and (min-width: 1300px) {
	/* Grid with 4 columns */
	.grid-sizer,
	.grid-item {
		width: calc(25% - (var(--distance) / 4 * 3) );
	} 
}
@media screen and (min-width: 1500px) {
	aside {
		width: 25vw;
	}
	main {
		padding-left: 25vw;
	}
	/* Grid with 5 columns */
	.grid-sizer,
	.grid-item {
		width: calc(20% - (var(--distance) / 5 * 4) );
	} 
}

svg.logo {
	margin: 0 auto;
	fill: #FF1900;
	max-width: 140px;
}
p {
	font-size: 1rem;
}
p.tagline {
	text-transform: uppercase;
	color: grey;
	font-weight: 500;
	letter-spacing: 2px;
	margin: 20px auto 0 auto;
}
p.social-intro {
	margin: 0 0 var(--distance);
}

main a:link,
main a:visited {
	background:
		linear-gradient(
			to bottom, var(--brand-color) 0%,
			var(--brand-color) 100%
	);
	background-position: 0 100%;
	background-repeat: repeat-x;
	color: inherit;
	text-decoration: none;
	transition: background-size var(--hover-animation-duration), color var(--hover-animation-duration);
}

main a:link,
main a:visited {
    background-size: 1px 1px;
}
main a.no-underline:link,
main a.no-underline:visited {
	background-size: 1px 0px;
}

main a.no-underline:hover,
main a:hover {
	background-size: 1px 1.5em;
}
main a.no-underline:active,
main a:active {
    color: var(--text-color);
	background: var(--element-background-color);
}

@media screen and (min-height: 1000px) {
	svg.logo {
		max-width: 200px;
		margin-top: -30px;
	}
	p.tagline {
		margin: 30px auto 0 auto;
	}
}
.social-links ul {
	list-style: none;
	display: flex;
	justify-content: center;
	flex-flow: row wrap;
	padding: 0;
	margin: 0 auto;
}
.social-links ul li:not(:last-child) {
	margin: 0 var(--distance) 0 0;
}

.social-links ul a {
	display: block;
	width: var(--nav-height);
	height: var(--nav-height);
	border-radius: var(--nav-height);
	display: flex;
	align-content: center;
	justify-content: center;
	transition: var(--hover-animation-duration) background;
}
.social-links ul a svg {
	width: 24px;
	display: block;
	transition: var(--hover-animation-duration) transform;
}
.social-links ul a.twitter   svg * { fill: #1da1f2; }
.social-links ul a.instagram svg * { fill: url(#rg);}
.social-links ul a.facebook  svg * { fill: #3c5a99; }
.social-links ul a.youtube   svg .foreground,
.social-links ul a.linkedin  svg .background { fill: rgba(255,255,255,.8); }
.social-links ul a.facebook  svg .foreground { fill: rgba(255,255,255, 1); }
.social-links ul a.youtube   svg * { fill: #FF0000; }
.social-links ul a.linkedin  svg * { fill: #2867B2; }

.social-links ul a:hover {
	background: var(--element-background-color);
}
.social-links ul a:hover svg {
	transform: scale(1.15);
}

.pswp__caption__center {
	padding-bottom: var(--safe-distance-bottom);
	padding-left: var(--safe-distance-left);
	padding-right: var(--safe-distance-right);
	font-size: initial;
	line-height: inherit;
	max-width: 600px;
}
.pswp__caption__center span.original {
	float: right;
	opacity: .7;
}

.pswp__top-bar {
	padding-left:  env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
	padding-top:   env(safe-area-inset-top);
	height: calc(44px + env(safe-area-inset-top));
}
.pswp__button--arrow--left:before {
	left: var(--safe-distance-left);
}
.pswp__button--arrow--right:before {
	right: var(--safe-distance-right);
}

.pswp__ui--fit .pswp__top-bar, 
.pswp__ui--fit .pswp__caption {
	background-color: rgba(0, 0, 0, 0.5);
}

.pswp__top-bar,
.pswp__caption {
	-webkit-backdrop-filter: blur(5px);
			backdrop-filter: blur(5px);
}

.articles {
	max-width: 650px;
	margin: auto;
	padding-left: 0.5em;
	padding-right: max(0.5em,env(safe-area-inset-right));
}

.image-grid {
	display: flex;
	flex-flow: row wrap;
	margin-top: 1em;
	margin-bottom: 1em;
}

/* Grid is of 2 columns */
.image-grid img {
	width: calc(50% - ( var(--distance) / 2) );
	padding-bottom: calc(50% - ( var(--distance) / 2) );
	-webkit-background-size: cover;
       -moz-background-size: cover;
  	 	 -o-background-size: cover;
  		  	background-size: cover;
	margin-right: var(--distance);
	margin-bottom: var(--distance);
}
.image-grid img:last-child,
.image-grid img:nth-last-child(2) {
	margin-bottom: 0;
}
.image-grid img:nth-child(2n) {
	margin-right: 0;
}

@media screen and (min-width: 400px) {
	/* Grid is of 4 columns */
	.image-grid img {
		width: calc(25% - ( var(--distance) / 4 * 3) );
		padding-bottom: calc(25% - ( var(--distance) / 4 * 3) );
	}
	.image-grid img:last-child,
	.image-grid img:nth-last-child(2),
	.image-grid img:nth-last-child(3),
	.image-grid img:nth-last-child(4) {
		margin-bottom: 0;
	}
	.image-grid img:nth-child(2n) {
		margin-right: var(--distance);
	}
	.image-grid img:nth-child(4n) {
		margin-right: 0;
	}
}
@media screen and (min-width: 600px) {
	/* Grid is of 2 columns */
	.image-grid img {
		width: calc(50% - ( var(--distance) / 2) );
		padding-bottom: calc(50% - ( var(--distance) / 2) );
		-webkit-background-size: cover;
		   -moz-background-size: cover;
				-o-background-size: cover;
					background-size: cover;
		margin-right: var(--distance);
	}

	.image-grid img:nth-last-child(3),
	.image-grid img:nth-last-child(4) {
		margin-bottom: var(--distance);		
	}

	.image-grid img:last-child,
	.image-grid img:nth-last-child(2) {
		margin-bottom: 0;
	}
	.image-grid img:nth-child(2n) {
		margin-right: 0;
	}
}
@media screen and (min-width: 800px) {
	/* Grid is of 4 columns */
	.image-grid img {
		width: calc(25% - ( var(--distance) / 4 * 3) );
		padding-bottom: calc(25% - ( var(--distance) / 4 * 3) );
	}

	.image-grid img:last-child,
	.image-grid img:nth-last-child(2),
	.image-grid img:nth-last-child(3),
	.image-grid img:nth-last-child(4) {
		margin-bottom: var(--distance);
	}

	.image-grid img:nth-child(2n) {
		margin-right: var(--distance);
	}
	.image-grid img:nth-child(4n) {
		margin-right: 0;
	}
}

article header h2 {
	font-weight: bold;
}
article header time {
	font-size: 1.3rem;
	display: block;
	margin-top: -0.8em;
}

article header {
	border-bottom: 2px solid var(--brand-color);
	padding-bottom: 1em;
	position: relative;
}

article hr {
	display: block;
	width: 100%;
	height: 1px;
	border: none;
	background: var(--border-color);
	margin: 1em 0;
}

article header[exhibit-status]:before {
	content: attr(exhibit-status);;
	text-transform: uppercase;
	background: var(--brand-color);
	position: absolute;
	font-weight: 500;
	color: white;
	font-size: 0.9rem;
	bottom: -2px;
	right: 0;
	z-index: 2;
	padding: 0 var(--distance);
}


.practical-info {
	width: 100%;
}
.practical-info td {
	padding: 0;
}
.practical-info td.key {
	vertical-align: top;
	width: 110px;
	opacity: .7;
}

.spacer {
	font-size: 2rem;
	display: block;
	margin: 50px auto;
	text-align: center;
	color: var(--brand-color);
}

.video-container {
	width: 100%;
	padding-bottom: calc(100%/16*9);
	position: relative;
	margin: var(--distance) 0;
}
.video-container iframe {
	position: absolute;
	top:0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

header a.back {
	margin-top: 50px;
	display: none;
}

@media screen and (min-width: 600px) {
	.image-grid:first-child,
	h1:first-child {
		margin-top: 50px;
	}
	.articles {
		display: flex;
		flex-flow: column;
		justify-content: center;
		min-height: calc(100vh - 2 * var(--distance));
		padding-left: 1em;
		padding-right: max( 1em, env(safe-area-inset-right));
	}

	header a.back {
		display: inline-block;
	}

}

@media (prefers-color-scheme: dark) {
	:root {
		--text-color: #c9c9c9;
		--main-background-color: #222222;
		--element-background-color: #393939;
		--border-color: #474747;
	}
	.statusbar,
	nav.sticky {
		background: rgba(34, 34, 34,.8);
		-webkit-backdrop-filter: blur(5px);
				backdrop-filter: blur(5px);

	}

	@media screen and (min-width: 600px) {
		.statusbar {
			opacity: 0;
		}
	}
}

/* For debugging */
pre {
	overflow-x: scroll;
	padding: var(--distance);
	background: pink;
}