:root {
  --palegrey: #f2f2f2;
  --midgrey: #cccccc;
  --darkgrey: #8c8c8c;
  --fonts: 'Epilogue-Regular', Tahoma, Geneva, Verdana, sans-serif;
  --italic-fonts: 'Epilogue-Italic', 'Epilogue-Regular', Tahoma, Geneva, Verdana, sans-serif;
  --med-fonts: 'Epilogue-Medium', 'Epilogue-Regular', Tahoma, Geneva, Verdana, sans-serif;
  --med-italic-fonts: 'Epilogue-MediumItalic', 'Epilogue-Regular', Tahoma, Geneva, Verdana, sans-serif;
  --bold-fonts: 'Epilogue-Bold', 'Epilogue-Regular', Tahoma, Geneva, Verdana, sans-serif;
  --bold-italic-fonts: 'Epilogue-BoldItalic', 'Epilogue-Regular', Tahoma, Geneva, Verdana, sans-serif;
  --margin: 1.5rem;
  --page-width: 1440px;
}

@media (min-width: 768px) {
  :root {
    --margin: 2.5rem;
  }
}


@media (min-width: 1024px) {
  :root {
    --margin: 3.5rem;
  }
}

@media (min-width: var(--page-width)) {
  :root {
    --margin: 6.5rem;
  }
}

html {
  background-color: var(--midgrey);
}

body {
  max-width: var(--page-width);
  margin-left: auto;
  margin-right: auto;
  font-family: var(--fonts);
  line-height: 1.6;
  color: black;
}

body em, 
body i {
  font-family: var(--italic-fonts);
}

body strong, 
body b {
  font-family: var(--bold-fonts);
}

body strong > em,
body strong > i, 
body b > em,
body b > i,
body em > strong,
body em > b,
body i > strong,
body i > b {
  font-family: var(--bold-italic-fonts);
}

a {
  color: inherit;
  transition: all 0.4s ease;
}

a:link,
a:visited {
  text-decoration: underline;
}

a:hover {
  color: #6a6a6a;
  text-decoration-color: transparent;
}

.sodahorizontalmenu {
  margin: 8px 0 8px 0;
}

.intro a.button {
  padding: 0.5rem 0.7rem 0.3rem;
  font-family: var(--bold-fonts);
  font-size: 0.8rem;
  text-decoration: none;
  box-shadow: 0 3px 2px -2px var(--midgrey);
}

#know-intro a.button {
  color: black;
  background-color: white;
}

#know-intro a.button:hover {
  background-color: var(--palegrey);
}

#vdl-intro a.button {
  color: white;
  background-color: black;
}

#vdl-intro a.button:hover {
  background-color: var(--darkgrey);
}

p.contact {
  margin-top: 2em;
  margin-bottom: 2.3em;
}

header a, header button, header .sodamovehandle {
  color: black;
}

.navbar {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  background-color: white;
  color: black;
  border-color: var(--midgrey);
  border-style: solid;
  border-width: 0 0 1px 0;
}

.logo {
  height: 1.75rem;
  padding: 1rem;
}

.navbar nav.site {
  grid-row: 2;
  grid-column: 1/3;
}

.navbar nav.editors {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
}

.navpad {
  width: 8px;
}

/* here */
.sodamenuflex {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* overwrite custom styles to prevent overflow */
#sodabuttons {
  flex-wrap: wrap;
  width: auto;
}

.editors svg {
  color: black;
}

.sodablock svg {
  color: black;
}

.sodablockedittools .sodaaddmenu li button {
  color: black;
}

.navtip .tiptext {
  padding: 0;
}

.sodacurrentpagemenuitemdiv, 
.sodanoncurrentpagemenuitemdiv {
  width: fit-content;
  margin: 2px 1em 2px 1em;
}

h1, h2, h3, h4,
.get-access p:first-child,
.get-in-touch p:first-child {
  font-weight: 700;
  color: black;
  font-family: var(--bold-fonts);
}

h2, 
.get-access p:first-child {
  font-size: 2rem;
  line-height: 1.4;
}

h3, 
.get-in-touch p:first-child {
  font-size: 1.75rem;
  line-height: 1.4;
}
.sodamenuflex > div {
  padding: 0;
}

.sodanoncurrentpagemenuitemdiv {
  padding: 0;
}

.sodahorizontalmenu a {
  font-weight: 400;  /* or 600? */
  text-decoration: none;
}

.sodahorizontalmenu a:hover {
  text-decoration: underline;
}

#know-intro {
  background-image: url("/know/web/assets/lac-background.png");
  aspect-ratio: 3989 / 2799;
  background-size: contain;
}

#know-intro-inner {
  width: 100%;
  height: 85%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: white;
}

.intro h1 {
  margin-top: 1em;
  margin-left: var(--margin);
  margin-right: var(--margin);
  line-height: 1.4;
  text-align: center;
}

.intro p {
  width: fit-content;
  max-width: 40ch;
  margin-left: auto;
  margin-right: auto;
}

main p {
  margin-bottom: 1rem;
}

#know-intro h1 {
  color: white;
}

h3 {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.4;
}

footer {
  margin: 0;
  color: black;
  background-color: #fafafa;
}

@media (min-width: 768px) {
  .navbar {
    display: flex;
    justify-content: space-between;
    /* grid-template-columns: auto 1fr auto;
    grid-template-rows: auto; */
    align-items: center;
    height: 6.25rem;
  }

  .logo {
    height: 2rem;
  }

  .navbar nav.site {
    grid-row: 1;
    grid-column: 2;
  }

  /* and here */
  .sodamenuflex {
    display: flex;
  }

  .intro h1 {
    max-width: calc(var(--page-width) * 0.5);
    margin-right: auto;
    margin-left: auto;
    font-size: 2.7rem;
  }

  .sodahorizontalmenu a {
    /* add padding to link rather than containing div to present bigger click target */
    padding: 1rem;
  }

  .intro a.button {
    padding: 0.7rem 1rem 0.5rem;
    font-size: 1rem;
    box-shadow: 0 2px 1px -1px var(--midgrey);
  }
}

@media (min-width: 1024px) {
  .intro h1 {
    font-size: 3.5rem;
  }

  .intro p {
    font-size: 1.5rem;
    line-height: 1.5;
  }

  .main {
    margin: 0 var(--margin);
  }

  h3 {
    font-size: 2rem;
    line-height: 1.4;
  }

  .intro a.button {
    padding: 1rem 1.4rem 0.7rem;
    font-size: 1.3rem;
    box-shadow: 0 5px 2px -2px var(--midgrey);
  }

  .footnav {
    width: 100%;
    border-color: var(--midgrey);
    border-style: solid;
    border-width: 1px 0 0 0;
  }
}