@font-face {
    font-family: 'Kesane';
    src: url('fonts/Kesane-Regular.woff2') format('woff2'),
         url('fonts/Kesane-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Our Hand';
    src: url('fonts/OurHand-ExtraBold.woff2') format('woff2'),
        url('fonts/OurHand-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}



h1 {
	font-size: 4rem;
	font-weight: 800;
	letter-spacing: -0.2rem;
}
h3 {
	margin-top: 2rem;
}
h4 {
	text-transform: none;
}
h5 {
	margin-top: 0.5rem;
}
hr {
	margin-top: 4rem;
	margin-bottom: 4rem;
}
p {
	margin-bottom: 1rem;
}
quote {
	display: block;
	border-left: 4px solid var(--grey2);
	padding-left: 0.25rem;
	color: var(--grey3);
	font-family: 'Roboto Condensed', 'Public Sans', sans-serif;
	font-size: smaller;
}


#backtotop a {
	color: var(--grey4);
	text-decoration: none;
}
#backtotop a:hover {
	color: black;
	font-weight: 700;
}
#contents {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 997;
	width: 100%;
	height: 100vh;
	height: 100svh;
	background-color: rgba(229,146,20,0.8);
	backdrop-filter: blur(5px);
}
#contents h2 {
	font-size: 1.75rem;
	margin-top: 2rem;
}
#contents h3 {
	font-size: 1.2rem;
}
#contents h4 {
	font-size: 1rem;
	margin-left: 0.5rem;
	margin-top: 0.25rem;
}
#contents a {
	text-decoration: none;
}
#contents a:hover {
	background-color: var(--grey0);
	color: black;
}
#cover {
					  			width: 100%;
				  			 height: 100vh;
	     background-color: var(--tangerine);
	     background-image: url("/images/hero.jpg");
        background-size: cover;
      background-repeat: no-repeat;
    background-position: 50% 50%;
	              display: flex;
        justify-content: flex-end;
            align-items: flex-end;
}
#cover h1, #cover p {
	color: var(--grey4);
}

#footer {
	font-size: smaller;
	font-family: 'Roboto Condensed', 'Public Sans', sans-serif;
	text-transform: uppercase;
}

#hero {
	padding: 4rem;
	padding-bottom: 2rem;
}
#hero img {		
	width: 3rem;
}
#hero .label {
	color: white;
}

#mobile-menu {
	width: 100%;
	z-index: 998;
	position: fixed;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
}
#menu-btn {
	margin: 1rem;
	padding: 1rem;
	background-color: rgba(229,146,20,0.25);
	border: 0 solid var(--tangerine);
	border-radius: 0.25rem;
	backdrop-filter: blur(5px);
	cursor: pointer;
}

#overview {
	text-wrap: balance;
}
#overview-mission h5,
#overview-vision h5,
#overview-values h5 {
	font-size: 1.5rem;
	line-height: 1.15;
}

#print-btn {
	display: none;
	font-size: 1rem;
	color: var(--grey4);
	background-color: transparent;
	border: 0;
	margin-top: 1rem;
	cursor: pointer;
	border: 2px dotted var(--grey3);
}
#print-btn:hover {
	background-color: var(--mist);
	color: black;
}
#print-cover,
#print-values,
#print-culture {
	display: none;
}

#resources {
	background-color: var(--grey0);
	border-radius: 0.25rem;
	padding: 1rem;
	margin-top: 2rem;
}

#culture-hero {
	background-image: url("/images/culture.jpg");
}
#values-hero {
	background-image: url("/images/values.jpg");
}

.colorCranberry {
	color: #ad1557;
}
.colorBloodorange {
	color: #d84316;
}
.colorOrange {
	color: #ef6c01;
}
.colorTangerine {
	color: #e59214;
}

.headline {
	margin-top:0;
	padding-top: 0;
	font-size: 4rem;
	font-weight: 100;
	letter-spacing: -0.1;
	color: var(--grey2);
}
.our-text {
	display: inline-block;
	font-family: 'Our Hand';
	transform: rotate(-7deg);
}
#hero .our-text {
	letter-spacing: .5rem;
	margin-right: -2rem;
	color: white;
}

.nextLink {
	color: var(--grey3);
	text-decoration: none;
	text-transform: uppercase;
	font-size: 1rem;
}

.photo {
	border: 12px solid white;
	box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
	transform: rotate(-2deg);
}

.questions {
	background-color: var(--mist);
	border-radius: 0.25rem;
	padding: 1rem;
}
.questions p {
	font-family: 'Roboto Condensed', 'Public Sans', sans-serif;
	font-size: 1rem;
}

section a:hover {
	background-color: var(--grey0);
}
.sectionHero {
						  		width: 100%;
								 aspect-ratio: 4 / 3;
	     background-color: var(--grey0);
        background-size: cover;
      background-repeat: no-repeat;
    background-position: 50% 50%;
	              display: flex;
        justify-content: flex-start;
            align-items: flex-end;
	              padding: 2em;
	       padding-bottom: 0;
	        margin-bottom: 4rem;
}
.sectionHero h2 {
	font-size: 4rem;
	color: white;
	margin-bottom: -1.1rem;
}

.sectionTop {
	margin-top: 25vh;
}

.valuesHeader {
	font-size: 3rem;
	font-weight: 900;
	letter-spacing: -0.1rem;
}

.wordCloud {
	width: 100%;
}



@media (min-width: 600px) {
	h1 {
		font-size: 5rem;
	}
	.headline {
		font-size: 6rem;
	}
}

@media (min-width: 900px) {
	#backtotop {
		position: sticky;
		top: 2rem;
	}
	#contents {
		display: block;
		position: sticky;
		top: 2rem;
		background-color: transparent;
		width: auto;
		height: auto;
	}
	#contents h2,
	#contents h3,
	#contents h4 {
		margin-top: 0;
	}
	#mobile-menu {
		display: none;
	}
	#overview-mission h5,
	#overview-vision h5,
	#overview-values h5 {
		font-size: 1.75rem;
	}
	#print-btn {
		display: inline-block;
	}
}