@charset "UTF-8";

*, *:before, *:after { -ms-box-sizing: border-box; box-sizing: border-box; }
/*:root { font-size: calc(12px + (24 - 12) * ((100vw - 400px) / (1140 - 400))); }*/

:root {
	--link: #00bfff;
	--link-alt2: #563918;
	--link-alt1: #b3a44a;
	--accent1: #9b7e12;
	--accent2: #b3a44a;
	--accent3: #563918;
	--btn-bg: #5D4C42;
	--link-hover: #003466;
	--light-slate: #2c3e50;
	--shadow: #CCC;
	--padding: 5vw;
  --max-width: 180ch;
  --txt: #11112A;
  --color: #F3F4F5;
  --bg: #242424;
  --white: #FFF;
  --purple: #8d44ad;
  --blue: #2a7fb8;
  --indigo: #003466;
  --green: #8fb021;
  --orange: #d25400;
  --pink: #d45b9e;
  --red: #bb3c2d;
  --teal: #179f87;
  --slate: #263238;
  --cyan: #27ae61;
  --light-gray: #444;
  --light-purple: #ffbfe0;
  --light-blue: #0063da;
  --light-indigo: #003466;
  --light-green: #3baf04;
  --light-orange: #ffa800;
  --light-pink: #ff0084;
  --light-red: #fc0000;
  --light-teal: #04acad;
  --light-slate: #263238;

	--border-color: #444;

	--checkerboard-light: #FFF;
	--checkerboard-dark: #DDD;

  --fluid-type-min: 1.5rem;
  --fluid-type-max: 2.5rem;
  --fluid-type-target: 20vw;


  /* Perfect Fourth */
  --type-ratio: 1.33;

  /*  Body font size  */
  --body-font-size: 1rem;

  /* Compounded headlines sizes */
  --font-size-5: calc(var(--body-font-size) * var(--type-ratio));
  --font-size-4: calc(var(--font-size-5) * var(--type-ratio));
  --font-size-3: calc(var(--font-size-4) * var(--type-ratio));
  --font-size-2: calc(var(--font-size-3) * var(--type-ratio));
  --font-size-1: calc(var(--font-size-2) * var(--type-ratio));

  --padding: 5vw;
  --max-width: 180ch;

  --default-font: clamp(2rem, 14vw + 1rem, 15rem);
}

/* --- Custom mini reset ---------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }

ol , ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/* -------------------------------------------------------------------- */

html, body { width: 100%; min-height: 100%; }

@font-face {
  font-family: 'quinoa';
  src: url('/fonts/quinoa-text-sc-semibold.otf') format('otf');
  font-weight: normal;
  font-style: normal;
}

body { background-image: url('/images/grain2.png'); background-color: #202020; font-family: 'quinoa'; }

path { fill: none; /*stroke: none;*/ filter: drop-shadow(1px 1px 0px #333); }

#vara-container { position: absolute; bottom: 25%; left: 50%; transform: translateX(-50%); width: 100%; padding: 0; z-index: 100; }

/*g { margin: 1rem auto; }*/

nav { display: block; width: 100%; background: rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0, 0, 0, 0.78); color: #EFEFFA; text-align: center; font-size: 1.33rem; padding: 1rem 0 0.75rem 0; }

footer { display: block; border-top: 1px solid #444; padding: 2rem 0; background: rgba(0, 0, 0, 0.5); }
footer p { color: #EFEFFA; display: block; margin: 0; text-align: center; }

.thumbnails { display: flex; flex-flow: row wrap; align-items: stretch; width: 100%; height: 100vh; }
.thumbnails a { border: 0; flex: 0 0 25%; width: 33%; height: 33%; }
.thumbnails a img { mix-blend-mode: luminosity; opacity: 0.5; }

.respond { display: block; width: 100%; height: 100%; object-fit: cover; }

h1, h2, h3, h4, h5, h6 { font-family: 'quinoa'; color: #EAEAFF; }
h1 { font-size: 2rem; font-weight: 400; }
h2 { font-size: 2rem; text-align: center; margin: 0 auto; font-weight: 400; }
h3 { font-size: 2rem; margin: 1rem auto 2rem auto; font-weight: 400; position: relative; padding-left: 10rem; }
h3:before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 9.5rem; height: 2px; background: #EAEAFF; }

section { margin-bottom: 2rem; }
/* No Media Query Grid ----------------------------------------------------- */
.grid:before, .grid:after { content: ''; display: table; }
.grid:after { clear: both; }
.grid { display: flex; flex-flow: row wrap; align-items: stretch; }
[class*="column--"] { flex-grow: 0; flex-shrink: 1; position: relative; padding: 0  0.5rem 0.5rem 0.5rem; }
.column--full { min-width: 100%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--half { min-width: 50%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--one-fifth, .column--fifth { min-width: 20%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--two-fifth { min-width: 40%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--three-fifth { min-width: 60%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--four-fifth { min-width: 80%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--quarter { min-width: 25%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--third { min-width: 33.3333%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--three-quarter { min-width: 75%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
.column--two-third { min-width: 66.6666%; max-width: 100%; flex-basis: calc((700px - 100%) * 700); }
/* ------------------------------------------------------------------------- */

.fit { display: block; margin: 0 auto; width: 100%; height: 100%; object-fit: contain; }
.respond-fit { display: block; margin: 0 auto; width: 80%; height: 80%; object-fit: contain; }
.respond-fill { display: block; width: 100%; height: 100%; object-fit: cover; }
.limit { width: 90%!important; max-width: 960px!important; margin-left: auto; margin-right: auto; }
.uc { text-transform: uppercase; }
.txt-center { text-align: center; }
.txt-right { text-align: right; }
.txt-left { text-align: left; }
.flex-centered { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.flex-centered-left { display: flex; align-items: flex-start; justify-content: flex-start; width: 100%; height: 100%; }
.flex-centered-right { display: flex; align-items: right; justify-content: right; width: 100%; height: 100%; }
.flex-centered-to-bottom { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; }

header { display: block; position: relative; width: 100vw; height: 100vh; padding: 1rem 0; overflow: hidden; margin-bottom: 1rem; border-top: 1px solid #444; }
header > video { opacity: 0.8; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; mix-blend-mode: lighten; }

ul.grid--gallery { 
  --numcolumns: 4;
  --gap: 2rem;
  --size: calc(100vw / var(--numcolumns));
  display: grid; grid-template-columns: repeat(var(--numcolumns), 1fr); grid-auto-rows: 8rem; /*grid-template-rows: auto;*/ gap: var(--gap); align-items: stretch; list-style: none; width: 90%; max-width: 960px; }
ul.grid--gallery > li { padding: 0; display: block; height: calc(var(--size) - var(--gap)); position: relative; height: auto; }
ul.grid--gallery > li.tile { grid-column: span 1; grid-row: span 1; height: auto; }
ul.grid--gallery > li.wide { grid-column: span 2; }
ul.grid--gallery > li.wider { grid-column: span 3; }
ul.grid--gallery > li.high { grid-row: span 2; height: auto; /* to undo the height */ }
ul.grid--gallery > li.higher { grid-row: span 3; height: auto; /* to undo the height */ }
ul.grid--gallery > li.big-box { grid-column: span 3; grid-row: span 3; height: auto; }
ul.grid--gallery > li.box { grid-column: span 2; grid-row: span 2; height: auto; }
ul.grid--gallery > li.hero { grid-column: span 4; grid-row: span 2; height: auto; }
ul.grid--gallery > li.full { grid-column: span 4; height: auto; }
ul.grid--gallery > li > a.zoomout { display: none; }
ul.grid--gallery > li > a,
ul.grid--gallery > li > a > img { display: block; width: 100%; height: 100%; object-fit: cover; }
ul.grid--gallery > li > a.zoomin:hover::after,
ul.grid--gallery > li > a.zoomin:focus::after { content: ''; display: block; background: rgba(255, 255, 255, 0.2) url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgZmlsbD0ibm9uZSIgaGVpZ2h0PSIyNCIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIyIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSIxMSIgY3k9IjExIiByPSI4Ii8+PGxpbmUgeDE9IjIxIiB4Mj0iMTYuNjUiIHkxPSIyMSIgeTI9IjE2LjY1Ii8+PGxpbmUgeDE9IjExIiB4Mj0iMTEiIHkxPSI4IiB5Mj0iMTQiLz48bGluZSB4MT0iOCIgeDI9IjE0IiB5MT0iMTEiIHkyPSIxMSIvPjwvc3ZnPg==) no-repeat 50% 50%; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; }
ul.grid--gallery > li:focus-within,
ul.grid--gallery > li:target { overflow: visible; z-index: 1; }
ul.grid--gallery > li:target { z-index: 2; }
ul.grid--gallery > li:target > a.zoomin { display: none; }
ul.grid--gallery > li:target > a.zoomout { display: block; top: 0; right: 0; bottom: 0; left: 0; position: fixed; z-index: 12; }
ul.grid--gallery > li > a.zoomout > img { object-fit: contain; padding: 1vw; top: 0; right: 0; bottom: 0;   left: 0; position: fixed; z-index: 11; background: rgba(0, 0, 0, 0.8); }
ul.grid--gallery > li:target > a.zoomout::after { content: 'Click or hit ESC to close'; position: fixed; right: 1vw; bottom: 1vw; font-size: 1rem; color: #fff; z-index: 12; }

.gallery { width: 100%; display: grid; /*grid-auto-flow: dense;*/ grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-rows: 12rem; grid-gap: 2rem; position: relative; }
/*.gallery > * { border: 0; outline: 0; border: none; outline: none; grid-area: span 1/span 1; position: relative; overflow: hidden; }*/
/*.gallery > *:before { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: linear-gradient(15deg, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.33)); }*/
.gallery .wide { grid-area: span 1/span 2; }
.gallery .tall { grid-area: span 2/span 1; }
.gallery .wider { grid-area: span 1/span 3; }
.gallery .widest, .gallery .full { grid-area: span 1/span 4; }
.gallery .tallest { grid-area: span 4/span 1; }
.gallery .taller { grid-area: span 3/span 1; }
.gallery .box { grid-area: span 2/span 2; }
.gallery .item { grid-area: span 1/span 1; }
.gallery .hero { grid-area: span 2/span 4; }

small { display: block; color: #EFEFFA; margin: 0 0 2rem 0; padding: 0.5rem 0 1rem 0; }
#ai { display: block; position: relative; border-radius: 100%; width: 18rem; height: 18rem; margin: 1rem auto 0 auto; overflow: hidden; box-shadow: 0px 0px 0px 6px rgba(255, 255, 255, 0.25); }
#ai:before { content: ''; position: absolute; top: 50%; left: 50%; width: 90%; height: 90%;  border-radius: 100%; border: 1px solid #FFF; transform: translate(-50%, -50%); z-index: 10; }

.arrow-wrap { position:absolute; z-index: 1000; left: 50%; bottom: 1rem; transform: translateX(-50%); background:#111; width:10em; height:10em; padding:4em 2em; border-radius:50%; font-size:0.5em; display:block; box-shadow:0px 0px 5px 0px #333; }
.arrow { float:left; position:relative; width: 0px; height: 0px; border-style: solid; border-width: 3em 3em 0 3em; border-color: #ffffff transparent transparent transparent; -webkit-transform:rotate(360deg); }
.arrow:after { content:''; position:absolute; top:-3.2em; left:-3em; width: 0px; height: 0px; border-style: solid; border-width: 3em 3em 0 3em; border-color: #111 transparent transparent transparent; -webkit-transform:rotate(360deg); }
.hint { position:absolute; top:0.6em; width:100%; left:0; font-size:2em; font-style:italic; text-align:center; color:#fff; opacity:0; }
.arrow-wrap:hover .hint { opacity:1; }
@-webkit-keyframes arrows {
    0% { top:0; }
    10% { top:12%; }
    20% { top:0; }
    30% { top:12%; }
    40% { top:-12%; }
    50% { top:12%; }
    60% { top:0; }
    70% { top:12%; }
    80% { top:-12%; }
    90% { top:12%; }
    100% { top:0; }
  }
.arrow-wrap .arrow { -webkit-animation: arrows 2.8s 0.4s; -webkit-animation-delay: 3s; }

.txt-fill { display: flex; flex-flow: row nowrap; justify-content: space-around; align-items: center; }
.txt-fill span { flex: 1 1 auto; text-align: center; display: inline-block; }

.loader { position: absolute; top: calc(50% - 25px); left: calc(50% - 25px); transform: translate(-50%, -50%); border: 3px solid rgba(255, 255, 255, 0.25); border-top: 3px solid #FFF; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; z-index: 100; }
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

[data-lazy] { opacity: 0; visibility: hidden; transition: all 0.5s; }

#photos a { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; }
#photos a:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(15deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.33) 80%, rgba(255, 255, 255, 0.75) 100%); box-shadow: inset 0px 0px 0px 6px rgba(255, 255, 255, 0.75); mix-blend-mode: soft-light; z-index: 100; }

/* Small Screen */
@media screen and (max-width: 29rem) {
  /*body { background-color: #808; }*/
  .gallery { grid-auto-rows: max-content; }
  .gallery .wide { grid-column: span 2; grid-row: span 1; }
  .gallery .item { grid-column: span 2; grid-row: span 1; }
  .gallery .tall { grid-column: span 4; grid-row: span 1; }
  .gallery .widest, .gallery .full { grid-column: span 4; grid-row: span 1; }
  .gallery .tallest { grid-column: span 4; grid-row: span 1; }
  .gallery .taller { grid-column: span 4; grid-row: span 1; }
  .gallery .box { grid-column: span 4; grid-row: span 1; }
}
/* Medium Screen */
@media (min-width: 30rem) and (max-width: 60rem) {
  /*body { background-color: #880; }*/
}
@media (min-width: 61rem) and (max-width: 80rem) {
  /*body { background-color: #080; }*/
}

/*@media (max-width: 480px) {
}
@media (min-width: 481px) {
}
@media (min-width: 768px) {
}
@media (min-width: 1025px) {
}
@media (min-width: 1201px) {
}*/