/* Reset */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, img, ins, kbd, q, samp,
small, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, 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, section {
  display: block;
}

body { font: 400 48px/130% 'Diagramm-Regular', Georgia, Serif, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI"; *font-size:small; color: #222; }
a, a:hover, a:active { outline: none; }
a:link { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; margin: 0; padding: 0; }
ul { list-style: none; margin: 0; padding: 0; }
a { text-decoration: none; }

@font-face {
	font-family: 'Diagramm-Regular';
	src: url('../fonts/diagramm-regular.eot');
	src: url('../fonts/diagramm-regular.eot?#iefix') format('embedded-opentype'),
             url('../fonts/diagramm-regular.woff2') format('woff2'),
	     url('../fonts/diagramm-regular.woff') format('woff'),
	     url('../fonts/diagramm-regular.ttf') format('truetype'),
	     url('../fonts/diagramm-regular.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Diagramm-SemiBold';
	src: url('../fonts/diagramm-semibold.eot');
	src: url('../fonts/diagramm-semibold.eot?#iefix') format('embedded-opentype'),
             url('../fonts/diagramm-semibold.woff2') format('woff2'),
	     url('../fonts/diagramm-semibold.woff') format('woff'),
	     url('../fonts/diagramm-semibold.ttf') format('truetype'),
	     url('../fonts/diagramm-semibold.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

html, body {
  -webkit-font-smoothing: antialiased;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

strong {
  font-weight: normal;
  font-family: 'Diagramm-SemiBold';
}

body {
	margin: 0;
  padding: 30px 0;
  background: #fff url(../img/tiny_grid.png);
  transition: 0.5s ease;
  -moz-transition: 0.5s ease;
  -webkit-transition: 0.5s ease;
}

body.load {
  transition: 1.5s ease;
  -moz-transition: 1.5s ease;
  -webkit-transition: 1.5s ease;
}

#container {
  margin: 0 auto;
  padding: 0 60px;
  max-width: 1320px; 
}

/* section.section {
  height: 100vh;
  scroll-snap-align: start;
} */

/* Type */

h1 {
  font-family: 'Diagramm-SemiBold';
  font-size: 96px;
  line-height: 96px;
  letter-spacing: -2px;
  max-width: 80%;
  margin: 0 0 70px;
}

h2 {
  font-family: 'Diagramm-SemiBold';
  font-size: 72px;
  line-height: 72px;
  letter-spacing: -2px;
  margin: 0 0 35px;
}

h3 {
  font-family: 'Diagramm-SemiBold';
  font-size: 48px;
  line-height: 110%;
  margin: 0 0 42px;
}

h4 {
  font-weight: 500;
  font-size: 32px;
  line-height: 32px;
  margin: 0 0 40px;
  letter-spacing: -0.06em;
}

p {
  position: relative;
  letter-spacing: -2px;
  margin: 0 0 35px;
}

span { color: #5DBE45; }

/* Lists */

ol {
  font-family: 'Diagramm-SemiBold';
  max-width: 80%;
}

ol li {
  position: relative;
  margin: 0 0 70px;
}

ol li p {
  font-family: 'Diagramm-Regular';
  font-size: 24px;
  line-height: 130%;
  letter-spacing: -.03em;
  width: 80%;
  margin: 0 0 25px;
}

ol li p:last-child { margin: 0; }

ul li {
  margin: 0 0 15px;
}

/* FAQ */

#faq {
  margin-top: 48px;
}

#faq h3 { 
  margin-bottom: 35px;
  color: #5DBE45; 
}

#faq p {
  font-family: 'Diagramm-Regular';
  font-size: 24px;
  line-height: 130%;
  letter-spacing: -.03em;
  width: 80%;
  margin: 0 0 25px;
}

#faq p + h3 { margin-top: 70px; }

/* Forms */

input {
  width: 80%;
  height: 48px;
  line-height: 48px;
  font-size: 48px;
  /* font-family: 'Diagram-SemiBold' !important; */
  color: #5DBE45;
  outline: 0;
  border: none;
  border-bottom: 1px solid #5DBE45;
  background: none;
}

/* Buttons */

.btn {
  display: inline-block;
  padding: 0 35px;
  height: 62px;
  line-height: 62px;
  font-size: 24px;
  font-family: 'Diagramm-SemiBold';
  color: #222;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
}

.btn.secondary {
  border: none;
  padding: 0 16px;
  background: none;
}

/* Sections */

section {
  max-width: 80%;
  margin: 0 0 160px;
}

header {
  font-size: 32px;
  letter-spacing: -5px;
  height: 120px;
}

footer {
  font-size: 32px;
  letter-spacing: -5px;
  margin-top: 300px;
}

footer p {
  font-size: 18px;
  line-height: 18px;
  letter-spacing: -1px;
  font-family: 'Diagramm-SemiBold';
}

footer p span {
  font-family: 'Diagramm-Regular';
  color: #222;
}


/* Decor */

#arrow {
  position: absolute;
  top: 17px;
}

#notes {
  position: absolute;
  top: 0;
  right: -541px;
  width: 541px;
  height: 410px;
  background: url(../img/note-3.svg) no-repeat bottom right;
}

#notes p {
  position: absolute;
  top: 123px;
  left: 141px;
  transform: rotate(5deg);
}

#so-sorry {
  position: relative;
  color: #222;
}

#so-sorry img {
  position: absolute;
  top: -28px;
  right: -70px;
  width: 148px;
}

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

@keyframes fade {
    from {
        opacity:0;
        top: 30px;
    }
    to {
        opacity:1;
        top: 0;
    }
}

@-moz-keyframes fade {
    from {
        opacity:0;
        top: 30px;
    }
    to {
        opacity:1;
        top: 0;
    }
}
@-webkit-keyframes fade {
    from {
        opacity:0;
        top: 30px;
    }
    to {
        opacity:1;
        top: 0;
    }
}