/* RESET */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, button, 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%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, main, section {
	display: block;
}

html {
  scroll-behavior: smooth;
}
/* section {
	scroll-margin-top: 70px;
} */

body {
	min-height: -webkit-fill-available;
}

h1, h2, h3, h4, h5, h6, pre, code, address, caption, cite, code, em, strong, th {
  font-size: 1em;
  font-weight: normal;
  font-style: normal;
}

ul, ul li {
  list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

fieldset, img {
  border: none;
}

caption, th {
  text-align: left; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

ul {
  padding: 0px;
  margin: 0px; }

ul li {
  display: inline;
  margin: 0px;
  padding: 0px;
  float: left; }

.clear {
  clear: both; }

/* Font Files */
@font-face {
  font-family: "Typewriter1950TechMonoRegSTD";
  src: url('../fonts/Typewriter1950TechMonoRegSTD-2/font.woff') format('woff2'), url('../fonts/Typewriter1950TechMonoRegSTD-2/font.woff') format('woff');
}

/* Variables */
:root {
    --light:  #FFF4E1;
    --dark:   #0F0D2B;
    --color1: #DBCFC0;
    --color2: #201010;
    --color-fade: rgba(219, 207, 192, 0.70);
    --x-screen-12-24: 12px;
    --x-screen-16-36: 16px;
    --x-screen-16-48: 16px;
    --y-screen-16-24: 16px;
    --y-screen-24-36: 24px;
    --y-screen-24-48: 24px;
    --y-screen-36-48: 36px;
    --y-screen-36-64: 36px;
    --space: 16px;

    /* Fonts */
    --font1: 'Typewriter1950TechMonoRegSTD', monospace;
    --font2: sans-serif;

    @media all and ( min-width: 768px ) {
        --x-screen-12-24: 24px;
        --x-screen-16-36: 36px;
        --x-screen-16-48: 48px;
        --y-screen-16-24: 24px;
        --y-screen-24-36: 36px;
        --y-screen-24-48: 48px;
        --y-screen-36-48: 48px;
        --y-screen-36-64: 64px;
    }
}
.f-light { color: var(--light); }
.f-dark { color: var(--dark); }
.b-dark { background-color: var(--dark); }
.b-light { background-color: var(--light); }
.f-color1 { color: var(--color1); }
.f-color2 { color: var(--color2); }
.b-color1 { background-color: var(--color1); }
.b-color2 { background-color: var(--color2); }

/* Global */
html, body { 
  background: var(--dark);
  font-family: var(--font1);
  color: var(--light);
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  text-align: left;
	line-height: 1.25;
  overflow-x: hidden;
  width: 100dvw;
}

/* Text and Sizing */
b, strong,.bold { font-family: var(--font1);font-weight: 700; }
i, em { font-family: var(--font1);font-style: italic; }
b i, strong i, b em, strong em { font-family: var(--font1);font-weight: 700;font-style: italic; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { 
  font-family: var(--font-2);
  font-weight: 700;
  line-height: .93;
  letter-spacing: -.58px;
	color: var(--light);
	/* text-transform: uppercase; */
  text-align: center;
}
h1, .h1 { font-size: 2.7rem; }
h2, .h2 { font-size: 32px; }
h3, .h3 { font-size: 29px; }
h4, .h4 { font-size: 27px; }
h5, .h5 { font-size: 24px; }
h6, .h6 { font-size: 20px; }

a { color: var(--light);text-decoration: underline; }
button { cursor: pointer; }
a:hover { color: var(--color1);text-decoration: underline; }

.button {
  padding: 16px;
  background-color: var(--light);
  color: var(--dark);
  text-decoration: none;
  font-weight: 700;
  width: min(100%, 330px);
  border: 2px solid var(--light);
}
.inv-button {
  background-color: unset;
  color: var(--light);
}

.hover {
  transition: opacity 0.2s ease-in-out;
}
.hover:hover {
  opacity: 0.65;
}

p { 
  margin: 0;
  line-height: 125%;
  text-wrap: pretty;
}
input[type="text"] {
  font-size: 16px;
}
sup {
    vertical-align: 2px;
    font-size: smaller;
}
small, .text-small { font-size: 14px; }

.upper {
  text-transform: uppercase;
}
.text-left {
	text-align: left !important;
}
.text-center {
	text-align: center !important;
}
.nowrap { white-space: nowrap;}


/* Display Sizes */
.tablet {
	display: none;
}
.mobile {
	display: inline-block;
}


/* Structure */
.flex {
	display: flex;
  flex-wrap: nowrap;
  text-align: center;
  justify-content: space-evenly;
  align-items: center;
}
.column { flex-direction: column; }
.col-row { flex-direction: column; }
.wrap { flex-wrap: wrap; }
.flex-break { flex-basis: 100% !important; }
.w-100 {
  max-width: 100% !important;
  width: 100% !important;
}


@media (min-width: 768px) {
  html, body { line-height: 160%; }
  p { font-size: 19px; line-height: 160%; }
  small, .text-small { font-size: 16px; }
  h3, .h3 { font-size: 35px; }
  h4, .h4 { font-size: 27px; }
  h5, .h5 { font-size: 24px; }
  
	.mobile { display: none !important; }
	.tablet { display: inline-block !important; }
	.flex { justify-content: center; }
  .flex-break-768 { flex-basis: 100% !important; }
  .col-row { flex-direction: row; }
  .order-1 { order: 1; }
  .order-2 { order: 2; }
  .order-3 { order: 3; }
  .order-4 { order: 4; }
}
@media (max-width: 1023px) {
  .desktop { display: none; }
}
@media (min-width: 1024px) {
  .button { width: min(25vw, 320px); }
  .tablet { display: none !important; }
}
@media (min-aspect-ratio: 1/1) {
  .portrait {
    display: none;
  }
}


/*----------------------------
GENERAL CONTENT STYLES
-----------------------------*/
.icon {
    height: 1em;
    width: 1em;
    display: inline-block;
    flex-shrink: 0;
    background-color: var(--light);
    -webkit-mask-size: cover;
    mask-size: cover;
}
.icon.b-dark { background-color: var(--dark); }
.logo {
    height: 1em;
    width: auto;
    flex-shrink: 0;
    background-color: var(--light);
    -webkit-mask-size: cover;
    mask-size: cover;
    display: inline-block;
    vertical-align: middle;
}
img {
  max-width: 100%;
  object-fit: cover;
  height: auto;
  width: auto;
  display: block;
}
.img-heading { /* use when images are used for headings */
  display: block;
  overflow: hidden;
  position: relative;
}
.img-heading span {
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}
svg {
  height: .65em;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.shubert {
  -webkit-mask: url("../images/_icons/Shubert.svg") no-repeat 50% 50%;
  mask: url("../images/_icons/Shubert.svg") no-repeat 50% 50%;
  width: 1.2em;
  height: 1.2em;
  display: inline-block;
  -webkit-mask-size: cover;
  background-color: var(--light);
  mask-size: cover;
  vertical-align: middle;
  margin-bottom: 0.1em;
  margin-right: 0.3em;
  margin-left: -1.5em;
}