/*************************************
*************** Variables ************
**************************************/

:root {
	--white: #fff;
	--black: #000;
	--orange: #fdbd9c;
	--blue: #00b8b1;


	--first-font-family: "ITCSymbolStd-Book";

	--regular: 1.3rem;
	--medium: 1.2rem;
	--large: 6rem;
	--second-font-size: 1.2rem;


}



@media screen and (max-width: 768px) {
		:root {
			--regular: 1.2rem;
			--large: 3rem;
	}
}

/*************************************
*************** Basics ***************
**************************************/


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%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q, blockquote p {
	font-family: var(--first-font-family);
	quotes: none;
}

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

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


/*
        This font software is the property of Commercial Type.

        You may not modify the font software, use it on another website, or install it on a computer.

        License information is available at http://commercialtype.com/eula
        For more information please visit Commercial Type at http://commercialtype.com or email us at info[at]commercialtype.com

        Copyright (C) 2024 Schwartzco Inc.
        License 2409-DOIFKR
*/

@font-face {
	font-family: 'Druk Web';
	src: url('../fonts/Druk-Medium-Web.woff2') format('woff2'),
		 url('../fonts/Druk-Medium-Web.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	}

@font-face {
	font-family: 'founders-grotesk-regular';
	src: url('../fonts/founders-grotesk-regular.woff2') format('woff2');
}

body, html 	{
	width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	font-size: var(--regular);
}

body {
	background-color: var(--black);
	color: var(--orange);

	font-family: 'founders-grotesk-regular', sans-serif;
}

section {
		min-width: 100vw;
		min-height: 100vh;
		margin-bottom: 3rem;
}

#logo {
		width: 50vw;
		margin: 0 auto;
}

#logo img {
	max-height: 60vh;
}

@media screen and (max-width: 1024px) {

	#logo {
		width: 80vw;
	}

	#logo img {
		max-height: 80vh;
	}
}

.container-fluid {
		min-height: 100vh;
		max-width: 95vw;
}

@media screen and (max-width: 1024px) {

		.container-fluid {
			max-width: 95vw;
			padding: 0 1.5em;
		}

}

a 	{
		text-decoration: underline;
		color: var(--blue);
		text-underline-offset: .2em;
}

a:hover {
		color: var(--orange);
}

p 	{
		letter-spacing: 0.015em;
	word-spacing: 0.001em;
	-webkit-font-smoothing: antialiased; /* Chrome, Safari */
	-moz-osx-font-smoothing: grayscale; /* Firefox */
	text-rendering: optimizeLegibility;
	max-width: 800px;
	margin: 0 auto;
	margin-bottom: 1rem;
}

ul 	{
		margin: 0 auto;
		max-width: 800px
		}

ul li {
		list-style-type: disc;
		list-style-position: inside;
		margin-bottom: .75em;

}

li::marker {
  color: var(--blue);
}

		@media screen and (max-width: 520px) {
				p  {
			}
		}

h1, h2 {
		color: var(--blue);
		font-family: 'Druk Web', sans-serif;
		font-weight: 500;
		text-transform: uppercase;
		font-size: var(--large);
		display: block;
		padding-bottom: 2rem;
		line-height: 0.9;
}

h3 	{
		text-transform: uppercase;
		color: var(--blue);
		margin: 0 auto;
		margin-bottom: 1.5rem;
		margin-top: 2rem;
		letter-spacing: .05em;
		font-weight: normal;
		display:block;
		max-width: 50vw;
		}

		@media screen and (max-width: 520px) {
				h3  {
					max-width: 100vw;

			}
		}

h4 	{
}

@media screen and (max-width: 520px) {
		h4  {
	}
}

header {
	position: fixed;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	top: 20px;
	width: 98vw;
	height: 1px;
	border-top: 1px solid var(--blue);
}

footer {
	position: fixed;
	left: 0;
	right: 0;
	margin-left: auto;
	margin-right: auto;
	bottom: 20px;
	width: 98vw;
	height: 40px;
	border-bottom: 1px solid var(--blue);
}

footer img {
	width: 100%;
}

@media screen and (max-width: 1024px) {

		footer img {
display: none;
		}

}

.btn {

	background-color: var(--blue);
	color: var(--black);
	border-radius: 30px;
	margin: 1em;
	padding: .5em 1.5em;

}

.btn:hover {
	outline: 1px solid var(--orange);
}