/* resets */

   *, *::before, *::after { box-sizing: border-box; }
	* { margin: 0; }
	*:focus { outline: none; } 
   html, body { height: 100%; }
   body { line-height: 1.5; }   
	body > footer { position: sticky; top: 100vh; }
   table { border-collapse: collapse; }
	img, picture, video, canvas, svg { display: block; max-width: 100%; }
   sup, sub { vertical-align: baseline; position: relative; top: -0.4em; }
   sub { top: 0.4em; }
	p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
   input, button, textarea, select { font: inherit; }
	textarea { white-space: revert; }

	/* fonts */

	@font-face { font-display: swap; font-family: 'Jost'; font-style: normal; font-weight: 300; src: url('fonts/j300.woff2') format('woff2'); }
	@font-face { font-display: swap; font-family: 'Jost'; font-style: italic; font-weight: 300; src: url('fonts/j300i.woff2') format('woff2'); }
	@font-face { font-display: swap; font-family: 'Jost'; font-style: normal; font-weight: 400; src: url('fonts/j400.woff2') format('woff2'); }
	@font-face { font-display: swap; font-family: 'Jost'; font-style: italic; font-weight: 400; src: url('fonts/j400i.woff2') format('woff2'); }
	@font-face { font-display: swap; font-family: 'Jost'; font-style: normal; font-weight: 600; src: url('fonts/j600.woff2') format('woff2'); }
	@font-face { font-display: swap; font-family: 'Jost'; font-style: italic; font-weight: 600; src: url('fonts/j600i.woff2') format('woff2'); }
		
	/* structure */
	
	body
	{
		margin: 0; padding: 0; color: #FFFFFF;
		background: #000000 url('images/bg/static.jpg') center center no-repeat; background-size: cover;
		background-repeat: no-repeat; background-attachment: fixed;
	}
	.frame { padding: 100px; }
	
	/* type */
	
	body { font: 400 26px/1.4 "Jost", sans-serif; }
	a { color: #FFCC00; text-decoration: none; }
	a:hover { color: #FFFFFF; }
	b { font-weight: 600; }
	h2 { font-size: 42px; font-weight: 600; text-transform: uppercase; letter-spacing: 3px; line-height: 1.2; }
	h4 { font-size: 25px; font-weight: 400; text-transform: uppercase; letter-spacing: 2px; }
	p, h2, h4 { margin-bottom: 25px; }
	p.credits { font-size: 75%; color: #999999; }
	p.credits a { opacity: 0.75; }
	p.credits a:hover { opacity: 1; }
	.dot { opacity: 0.5; }
	
	/* links and controls */
	
	a.ghostbtn
	{
		display: inline-block; white-space: nowrap;
		color: #FFFFFF; padding: 4px 10px; border: 1px solid #FFFFFF; background-color: rgba(0,0,0,0.1);
	}
	a.ghostbtn:hover { color: #FFFFFF; background-color: #000000; }
	a.action { padding-left: 30px; background-image: url('images/icon-arrow-right.svg'); background-position: 6px center;
		background-size: 22px auto; background-repeat: no-repeat; }
		
	a.icon 
	{ 
		width: 40px; height: 40px; display: inline-block; border-radius: 50%; background-position: center center;
		background-size: 50% auto; background-repeat: no-repeat; margin: 0 10px 0 0; 
	}
	.icon.icon-bluesky { background-image: url('images/icons/bluesky.svg'); background-color: #1185FE; }
	.icon.icon-instagram { background-image: url('images/icons/instagram.svg'); background-color: #EB13FE; background-size: 65% auto; }
	a.icon:hover { background-color: #BB8800; }
	
	/* menu */
	
	#menu 
	{ 
		position: fixed; top: 0; left: 0; right: 0; padding: 20px 100px; background-color: rgba(0,0,0,0.8); z-index: 300; 
		display: flex; align-items: center; justify-content: space-between; gap: 30px; 
	}
	#menu img { width: 100%; height: 30px; width: auto; }
	#menu .tabs { text-align: right; }
	#menu a 
	{ 
		text-transform: uppercase; letter-spacing: 3px; 
		color: #FFFFFF; font-size: 16px; line-height: 1;
	}
	#menu a:hover { color: #FFCC00; }
	#svs { display: block; }

	/* hero */
	
	#hero 
	{ 
		width: 100%; height: 100vh; position: relative; overflow: hidden; 
		background-position: center center; background-size: cover;	background-repeat: no-repeat; 
	}
	.slider { z-index: 100; }
   .slide { width: 100%; height: 100vh; background-color: #000000; background-position: center; background-repeat: none; background-size: cover; }
   .lSSlideOuter .lSPager.lSpg { display: none; }

	/* about */
	
	#about
	{ 
		width: 100%; height: 100vh; background: #000000 url('images/bg/fault-line.jpg') center bottom no-repeat; 
		background-size: cover; position: relative; 
	}
	#about .frame { position: absolute; bottom: 0; left: 0; right: 0; }
	#about .frame p { color: #ABABAB; }
	
	/* artists */
	
	#artists { width: 100%; min-height: 100vh; background-color: #b1aba5; }
	#artists h2 { color: #000000; }
	
	/* contact */
	
	#contact { width: 100%; height: 100vh; position: relative; }
	#contact .frame { position: absolute; bottom: 0; left: 0; right: 0; }
	
	/* cells */
	
	.cells { display: flex; flex-wrap: wrap; gap: 50px; }
	.cell { width: calc(33.333% - 33.333px); }
	.cell p { font-size: 18px; color: #000000; }

	/* images */
	
	#sa 
	{ 
		position: absolute; bottom: -1px; left: 0; right: 0px; padding-top: 300px; z-index: 200;
		background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.6));
	}
	#sa img { width: 75%; max-width: calc(100vw - 300px); height: auto; }
	.thumb 
	{ 
		display: block; width: 100%; height: 0; padding-top: 66.667%; margin: 0 0 27px 0; 
		background-color: rgba(0,0,0,0.3); background-position: center center; 
		background-size: cover; background-repeat: no-repeat;
	}
	.flag
	{ 
		display: inline-block; height: 19px; width: 30px; background-position: left center; background-size: contain;
		background-repeat: no-repeat;
	}
	.flag.flag-de { background-image: url('images/flags/de.svg'); }
	.flag.flag-us { background-image: url('images/flags/us.svg'); }
	.flag.flag-za { background-image: url('images/flags/za.svg'); }
	h4 .flag { margin-left: 5px; position: relative; top: 1px; }
	  
   /* responsive */
   
   @media screen and (max-width: 1200px)
   {
		.frame { padding: 50px; }
		.cell { width: calc(50% - 25px); }
		
		#menu { padding: 12px 50px; }
		#menu img { height: 26px; }
   }  
	
   @media screen and (max-width: 900px)
   {
		body { font-size: 22px; }
		.cell { width: 100%; }
		#sa { transform-origin: 0% 0%; padding-top: 0; rotate: -90deg; background: transparent; bottom: -6vh; }
		#sa img { width: 80vh; max-width: 80vh; }
		#menu img { height: 22px; }
		#menu a { letter-spacing: 1px; }
		#hero:before
		{ 
			display: block; z-index: 150; content: ""; position: absolute;
			top: 0; left: 0; bottom: 0px; width: 20vw; 
			background: linear-gradient(to right, rgba(0,0,0,0.4), rgba(0,0,0,0));
		}
	}
	
   @media screen and (max-width: 500px)
	{
		.frame { padding: 25px; }
		h2 { font-size: 32px; }
		#menu { padding-left: 25px; }
		#menu .tabs { display: none; }
		#sa { bottom: 0; }
		#contact { height: auto; }
		#contact .frame { position: relative; padding-top: 50px; }
	}
	
   /* print */

   @media print
   {

   }