@import url('/assets/css/nav.css');
@import url('/assets/css/cookie.css');
@import url('/assets/css/form.css');
@import url('/assets/css/slick.css');
@import url('/assets/css/slick-theme.css');
@import url('/assets/css/lightcase.css');

@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-serif.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Maven Pro';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/assets/fonts/maven-pro.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*													{ margin: 0; padding: 0; box-sizing: border-box!important; outline: none; }

html											{ background: url('/data/site/metzi.jpg') no-repeat top center fixed; background-size: cover; color: #333333; font-family: 'Maven Pro', sans-serif; font-size: 16px; font-weight: 400; line-height: 1.5; }

h1												{ color: #840000; font-family: 'Noto Serif', serif; font-size: 1.75rem; margin: 0 0 1rem; }
h2												{ color: #840000; font-size: 1.5rem; font-weight: 500; margin: 0 0 1.5rem; text-transform: uppercase; }
h3												{ color: #333333; font-size: 1.375rem; font-weight: 500; margin: 0 0 0.75rem; }
h4												{ color: #333333; font-size: 1.25rem; font-weight: 800; margin: 0 0 1rem; }

a													{ text-decoration: none; }
b, strong									{ color: #777777; font-weight: 800; }
hr												{ border: none; border-top: 0.0625rem solid #840000; margin: 1rem 0; }
img												{ display: block; max-width: 100%; }
p													{ font-size: 1.125rem; margin: 0 0 1rem; }
table											{ font-size: 1.125rem; margin: 0 0 1rem; }
table tr td								{ vertical-align: top; }
ul												{ list-style: none; }
video											{ display: block; max-width: 100%; }

header										{ color: #ffffff; padding: 4rem 0; }
header .title							{ display: block; font-family: 'Noto Serif', serif; font-size: 3.5rem; line-height: 1; text-transform: uppercase; }
header .subline						{ font-size: 1.5rem; line-height: 1; text-transform: uppercase; }

main											{ padding: 1rem 0 2rem; }

footer										{ background: url('/data/site/slate.webp') no-repeat center center; background-size: cover; border-top: 0.0625rem solid #840000; color: #ffffff; padding: 2rem 0; width: 100%; }
footer.index							{ bottom: 0; position: fixed; margin: -13rem 0 0; }
footer img								{ max-height: 7rem; float: right; }
footer .title							{ font-family: 'Noto Serif', serif; font-size: 1.75rem; line-height: 1.35; text-transform: uppercase; }
footer .subline						{ font-size: 1.25rem; line-height: 1; text-transform: uppercase; }

.wrapper									{ margin: 0 auto; max-width: 1280px; width: 96%; }
.flex											{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: start; width: 100%; }
.flx-start								{ align-items: flex-start; }
.flx-end									{ justify-content: end; }
.flx-strech								{ align-items: stretch; }
.flx-center								{ justify-content: center; }
.flx-between							{ justify-content: space-between; }
.flx-a-between						{ align-content: space-between; }
.flx-evenly								{ justify-content: space-evenly; }
.flx-reverse							{ flex-direction: row-reverse; }

.full											{ width: 100%; }
.half											{ width: 50%; }
.threequarter							{ width: 75%; }
.twothird									{ width: 66.666%; }
.third										{ width: 33.333%; }
.quarter									{ width: 25%; }
.fifth										{ width: 20%; }
.sixth										{ width: 16.666%; }
.tenth										{ width: 10%; }

.space										{ padding: 0.75rem; }
.centered									{ text-align: center; }

.opaque										{ background: url('/data/site/rockywall.jpg'); padding: 1.25rem; }
.transparent							{ background: rgba(255, 255, 255, 0.5); }
.red											{ background: #840000; color: #ffffff!important; }
.red h1										{ color: #ffffff; }

.button										{ background: #840000; color: #ffffff; font-size: 1.25rem; font-weight: 500; padding: 1rem 2rem; text-transform: uppercase; }
.small										{ font-size: 0.875rem; }

.content ul								{ font-size: 1.125rem; list-style: none; margin: 0 0 1.5rem; }
.content ul li						{ margin: 0 0 0 1rem; }
.content ul li:before			{ content: "▪"; color: #840000; display: inline-block; margin: 0 0.5rem 0 -1rem; width: 0.5rem; }

.content a								{ display: inline-block; color: #840000; font-weight: 500; }

.sidebar a								{ color: #840000; font-weight: 500; }
.sidebar img							{ display: inline-block; margin: 0 0.25rem 0; }
.sidebar p								{ font-size: 1rem; }
.sidebar p strong					{ font-size: 1.125rem; }
.sidebar table						{ font-size: 1rem; }



/* IMPRESSION */

.galleries .item									{ border: solid #ececec 0.5rem; position: relative; text-align: center; }
.galleries .item a								{ display: block; }
.galleries .item .details					{ background: rgba(255, 255, 255, 0.85); bottom: 0; left: 0; opacity: 0; padding: 5rem 1rem 1rem; position: absolute; right: 0; top: 0; transition: all ease 0.5s; }
.galleries .item .details:hover		{ opacity: 1; }
.galleries .item .headline				{ color: #840000; display: block; font-family: 'Noto Serif', serif; font-size: 1.125rem; font-weight: 600; margin: 0 0 1rem; text-transform: uppercase; }
.galleries .item .subline					{ color: #333333; }

.pic															{ border: solid #ececec 0.5rem; margin: 0 0 0.75rem; }

.slides img												{ border: 0.0625rem solid #840000; }




@media screen and (max-width: 1024px) {


	.threequarter								{ width: 100%; }
	.twothird										{ width: 70%; }
	.third											{ width: 30%; }
	.quarter										{ width: 100%; }
	.fifth											{ width: 25%; }

}


@media screen and (max-width: 960px) {

	.half												{ width: 100%; }
	.threequarter								{ width: 100%; }
	.twothird										{ width: 100%; }
	.third											{ width: 100%; }
	.quarter										{ width: 100%; }
	
		
	
}

@media screen and (max-width: 720px) {


	.fifth											{ width: 33.333%; }
	.sixth											{ width: 33.333%; }


}

@media screen and (max-width: 520px) {

	.threequarter								{ width: 100%; }
	.twothird										{ width: 100%; }
	.third											{ width: 100%; }
	.quarter										{ width: 100%; }
	.fifth											{ width: 50%; }
	.sixth											{ width: 50%; }

	}