html, body {
	height: 100%;
	margin: 0;
}
body {
        font-family: 'Jost';
        font-size: 26px;
        color: #43414b;
}
a {
	text-decoration: none;
}
.home {
        background-image: url('../img/bg.svg');
        background-attachment: fixed;
        background-position: center bottom;
        background-repeat: no-repeat;
        -webkit-background-size: 100%;
        -moz-background-size: 100%;
        -o-background-size: 100%;
        background-size: 100%;
	position: fixed;
}
.about {
	background: url("../img/about.svg");
        background-attachment: fixed;
        background-position: left top;
        background-repeat: no-repeat;
	background-size: auto 100%;
	position: fixed;
	min-height: 100vh;
	width: 20vw;
	z-index: -1;
}
.contact {
	background: url("../img/contact.svg") no-repeat left top;
	background-attachment: fixed;
	background-size: auto 100%;
	position: fixed;
	margin: 0;
	padding: 0;
	min-height: 100vh;
	width: 20vw;
	z-index: -1;
}
.careers {
        background: url("../img/contact.svg") no-repeat left top;
        background-attachment: fixed;
        background-size: auto 100%;
        margin: 0;
        padding: 0;
        min-height: 100vh;
        width: 20vw;
        z-index: -1;
}
.job-heading {
	font-weight: 400;
        zfont-family: 'Quicksand' !important;
        zfont-size: 22px;
	cursor: pointer !important;
}
.job-content {
	flex: 1;
	background: transparent;
	margin-top: var(--header-height);
	margin-left: 25vw;
	margin-right: 1vw;
	zright:0;	
	width: 70vw;
	font-size: 20px;
	padding: 2rem;
}

h1, h2 {
        font-family: 'Quicksand';
        text-align: center;
        vertical-align: top;
}
#logo {
        position: absolute;
        left:0;
        top:0;
}
#header {
        font-size: 52px;
        margin-top: 0;
        margin-left: 0px;
        font-weight: 200;
        font-optical-sizing: auto;
}
#sub-header {
        font-size: 20px;
        margin-top: -35px;
        margin-left: 0px;
        letter-spacing: 0.4em;
        font-weight: 500;
        font-optical-sizing: auto;
}
.centered-container {
  position: fixed;       /* take it out of normal flow */
  left: 0;
  width: 100vw;          /* span the entire viewport width */
  text-align: center;    /* center text horizontally */
}
.centered-text {
      font-size: 20px;
}
.left-container {
        display: flex;
        justify-content: left;
        align-items: left;
        width: 70vw;
}
#text-big {
        font-family: 'Jost';
        font-size: 32px;
        font-weight: 500;
        font-optical-sizing: auto;
        text-align: right;
        line-height: 0.85em;
        margin-bottom: 1em;
        text-transform: capitalize;
        position: fixed;
        bottom: 0;
        left: 66%;
        width: 32%;
        float: right;
}
.footer {
        font-size: 13px;
}

.footer .center a,
.footer .center a:link,
.footer .center a:visited,
.footer .center a:hover,
.footer .center a:active {
        text-decoration: none !important;
        color: #43414b !important;
}
.left {
        position: fixed;
        bottom: 0;
        left: 1%;
        width: 33%;
        text-align: left;
        float: left;
}
.right {
        position: fixed;
        bottom: 0;
        left: 50%;
        width: 49%;
        float: right;
        text-align: right;
}
.center {
        position: fixed;
        bottom: 0;
        left: 33%;
        width: 33%;
        text-align: center;
}
.page-center {
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        height: 200px;
        margin: 50px;
}
img.small-logo {
        border: 0;
        width: 50px;
        height: 50px;
}

.main-content {
  flex: 1;
  zdisplay:flex;
  background: transparent;
  margin-top: 25vw;
  margin-left: 25vw;
  width: 75vw;
  padding: 2rem;
  zmin-height: 100vh;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: -3px;
  margin-left: -4px;
  padding: 0;
  position: fixed;
  width: 100%;
  background: white;
  z-index: 1000;
}

.header-box {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center; 
}

.nav-left, .nav-right {
  letter-spacing: 0.15em;
}

.header-box a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  font-size: 1.1rem;
}

.logo-box {
  flex: 1;
  display: flex;
  flex-direction: column; 
  justify-content: center;
  align-items: center;    
}

.site-title {
  text-align: center;
}

.site-title h1 {
  margin: 0;
  white-space: nowrap;
}

.site-title h2 {
  margin: 0;
  white-space: nowrap;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: white;
  border-bottom: 0px solid #eee;

  display: grid;
  grid-template-columns: 1fr auto 1fr;         
  grid-template-areas: "left center right";
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 1rem;
}


.header-box a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  font-size: 1.1rem;
}

.logo-box .site-title { text-align: center; }
.logo-box .site-title h1 { margin: 0; white-space: nowrap; }
.logo-box .site-title h2 { margin: 0; white-space: nowrap; font-weight: 400; color:#555; }

/*
@media all and (min-width: 645px) and (max-width: 1290px) {
        #header {
                font-size: 104px;
                margin-top: 0;
                margin-left: 0px;
                font-weight: 200;
                font-optical-sizing: auto;
        }
        #sub-header {
                font-size: 30px;
                margin-top: -35px;
                margin-left: 0px;
                letter-spacing: 0.4em;
                font-weight: 500;
                font-optical-sizing: auto;
        }
        #text-big {
                font-family: 'Jost';
                font-size: 64px;
                font-weight: 500;
                font-optical-sizing: auto;
                text-align: right;
                line-height: 0.85em;
                margin-bottom: 1em;
                text-transform: capitalize;
                position: fixed;
                bottom: 0;
                left: 33%;
                width: 65%;
                float: right;
        }
}
*/


@media all and (min-width: 0px) and (max-width: 645px) {
body {
        font-family: 'Jost';
        font-size: 1.5em;
        color: #43414b;
}

.about, .contact, .careers {
	background: no-repeat left top;
	height: 0;
	width: 0;
	z-index: -1;
}

.main-content {
	flex: 1;
	zdisplay:flex;
	background: transparent; 
	margin-top: var(--header-height); 
	margin-left: 0;      
	margin-right: 0;     
	zwidth: 80vw;
	padding-left: 2vw;
	padding-right: 2vw;
}

.job-content {
        flex: 1;
        background: transparent;
        margin-top: var(--header-height);
        margin-left: 0;
        margin-right: 0;
	padding-left: 2vw;
	padding-right: 2vw;
	width: 85vw;
        font-size: 20px;
	padding: 2rem;
}

.left-container, .centered-container {
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        width: 96vw;
}

.header-box.nav-left  { grid-area: left;  justify-self: start;  display: flex; align-items: center; }
.header-box.logo-box { grid-area: center; justify-self: center; display: flex; align-items: center; flex-direction: column; text-align: center; }
.header-box.nav-right { grid-area: right; justify-self: end;    display: flex; align-items: center; }
		
		
		#header {
                font-size: 52px;
                margin-top: 0;
                margin-left: 0px;
                font-weight: 200;
                font-optical-sizing: auto;
        }
        #sub-header {
                font-size: 30px;
                margin-top: -35px;
                margin-left: 0px;
                letter-spacing: 0.4em;
                font-weight: 500;
                font-optical-sizing: auto;
        }
        #text-big {
                font-family: 'Jost';
                font-size: 32px;
                font-weight: 500;
                font-optical-sizing: auto;
                text-align: right;
                line-height: 0.85em;
                margin-bottom: 1em;
                text-transform: capitalize;
                position: fixed;
                bottom: 0;
                left: 33%;
                width: 65%;
                float: right;
        }

.site-header {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "center center"
      "left right";
    align-items: center;
    padding: 0.5rem 0.75rem;
    height: auto;
	border-bottom: 1px solid #eee;
  }

  .header-box.logo-box {
    justify-self: center;
    width: 100%;
    margin-bottom: 0.35rem;
  }

  .header-box.nav-left  { justify-self: center; order: unset; width: 100%; }
  .header-box.nav-right { justify-self: center; order: unset; width: 100%; }

  .nav-left a, .nav-right a {
    display: inline-block;
    width: 100%;
    text-align: center;
  }

}