/*
 Bootstrap Breakpoint Overview
 -----------------------------
 xs:    0px - 575px   most phones in portrait mode
 sm:  576px - 767px   most phones in landscape mode
 md:  768px - 991px   iPads (portrait mode)
 lg:  992px - 1199px  iPad (landscape mode), iPad Pro (portrait mode)
 xl: 1200px - ...     desktops, iPad Pros (landscape mode)
 
 iPads (Portrait Mode: w x h)
 ----------------------------
  9.7":    768px x 1024px  (6th generation and down, Air, Mini)
 10.2":    810px x 1080px  (7th generation and up)
 10.0":    820px x 1180px  (iPad Air 4th generation)
 11" Pro:  834px x 1194px  (2nd generation)
 12" Pro: 1024px x 1366px  (4th generation)
*/

/* document settings */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,300,400,700);

:root {
  --c-button-colour: #007BFF;
  --c-button-active-colour: #1E4B92;
  --c-button-icon-colour: white;
}

* {
  box-sizing: border-box;
}

html {
  /* font-family: Arial, Helvetica, sans-serif; */
  font-family: 'Open Sans', sans-serif;
}

main {
  width: 100%;
}

.smooth-scroll {
  scroll-behavior: smooth;
  /* Specify in custom property so polyfill can parse it */
  --scroll-behavior: smooth;
  /* Additionally specified in custom font-family for IE and other old browsers */
  font-family: 'scroll-behavior:smooth';
}

/* negative margins only available in bootstrap 4.2 */
@media (min-width: 768px) {
  .c-mt-md-n3 {
    margin-top: -1rem;
  }
  .c-ml-md-n4 {
    margin-left: -1.5rem;
  }
  .c-ml-md-n5 {
    margin-left: -3rem;
  }
}
@media (min-width: 992px) {
  .c-mt-lg-n3 {
    margin-top: -1rem !important;
  }
  .c-mt-lg-n4 {
    margin-top: -1.5rem !important;
  }
  .c-mt-lg-n5 {
    margin-top: -3rem !important;
  }
}
@media (min-width: 1200px) {
  .c-mt-xl-n4 { 
    margin-top: -1.5rem !important;
  }
  .c-mt-xl-n5 { 
    margin-top: -3rem !important;
  }
  .c-mt-xl-n6 { 
    margin-top: -4.5rem !important;
  }
}

/* override bootstrap defaults */

.container {
  padding: 0;
  margin: 0;
  max-width: 100%;
  min-width: 320px;
}

.row {
  padding: 0;
  margin: 0;
}

/* images */

.c-image {
  height: auto;
  width: 100%;
}

.c-logo {
  width: 100%;
}

.c-image--reduced {
  height: auto;
  max-width: 80%;
  object-fit: contain;
}

/* lists */

.c-no-bullets {
  list-style-type: none;
  padding-left: 0px;
}

/* typograhphy settings */
/* font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); */

body {
  background-color: var(--c-background-colour);
  font-size: calc(16px + (24 - 16) * ((100vw - 300px) / (1600 - 300)));
  line-height: 1.4;
}
h1 {
  color: var(--c-primary-heading-colour);
  font-size: calc(28px + (32 - 28) * ((100vw - 300px) / (1600 - 300)));
  font-weight: 600;
  text-align: center;
}
h2 {
  color: var(--c-secondary-heading-colour);
  font-size: calc(20px + (24 - 20) * ((100vw - 300px) / (1600 - 300)));
  font-weight: 600;
  text-align: center;
  margin-bottom: 0rem;
}
.c-text--primary {
  color: var(--c-text--primary-colour);
  margin-top: 0rem;
  margin-bottom: 0rem;
}
.c-text--primary-dark {
  color: var(--c-text--primary-dark-colour);
}
.c-text--secondary {
  color: var(--c-text--secondary-colour);
}
.c-text--small {
  font-size: 8px;
}

/* charts */
.c-chart {
  /* max-height: calc(9/16 * 100vw); */
}

.c-chart-title {
  color: #7DB53F;
  font-variant: small-caps;
  text-align: center;
  width: 100%;
}

/* address bar on mobile */
@media (max-device-width: 767) {
  .c-logo {
    max-width: 100%;
  }
}

/* ------------- iPad ------------- */
@media only screen
  and (device-width: 768px) 
  and (orientation: portrait) {
    .container {
      width: 768px;
      height: calc(1024px - min(var(--c-chrome-height), 70px));
      max-width: 768px;
      max-height: calc(1024px - min(var(--c-chrome-height), 70px));
      min-width: 768px;
      min-height: calc(1024px - min(var(--c-chrome-height), 70px));
      overflow: hidden;
    }
    .container.c-full {
      width: 768px;
      height: 1024px;
      max-width: 768px;
      max-height: 1024px;
      min-width: 768px;
      min-height: 1024px;
      overflow: hidden;
    }
}

/* ---- iPad 10.2" (Generation 7) ---- */
@media only screen 
  and (device-width: 810px) 
  and (orientation: portrait) {
    .container {
      width: 810px;
      height: calc(1080px - min(var(--c-chrome-height), 70px));
      max-width: 810px;
      max-height: calc(1080px - min(var(--c-chrome-height), 70px));
      min-width: 810px;
      min-height: calc(1080px - min(var(--c-chrome-height), 70px));
      overflow: hidden;
    }
}

/* -- iPad Air 10.9" (Generation 4) -- */
@media only screen 
  and (device-width: 820px) 
  and (orientation: portrait) {
    .container {
      width: 820px;
      height: calc(1180px - min(var(--c-chrome-height), 74px));
      max-width: 820px;
      max-height: calc(1180px - min(var(--c-chrome-height), 74px));
      min-width: 820px;
      min-height: calc(1180px - min(var(--c-chrome-height), 74px));
      overflow: hidden;
    }
}

/* ----------- iPad Pro 11" -------- */
@media only screen 
  and (device-width: 834px) 
  and (orientation: portrait) {
    .container {
      width: 834px;
      height: calc(1194px - min(var(--c-chrome-height), 74px));
      max-width: 834px;
      max-height: calc(1194px - min(var(--c-chrome-height), 74px));
      min-width: 834px;
      min-height: calc(1194px - min(var(--c-chrome-height), 74px));
      overflow: hidden;
    }
    body {
      line-height: 1.2;
    }
    h1 {
      font-size: 2rem;
    }
    h2 {
      font-size: 1.75rem;
    }
    .c-text--primary {
      font-size: 1.5rem;
    }
    .c-text--secondary {
      font-size: 1rem;
    }
    .c-text--small {
      font-size: 1rem;
    }
}

/* ----------- iPad Pro 12" -------- */
@media only screen 
  and (device-width: 1024px) 
  and (orientation: portrait) {
    .container {
      width: 1024px;
      height: calc(1366px - min(var(--c-chrome-height), 74px));
      max-width: 1024px;
      max-height: calc(1366px - min(var(--c-chrome-height), 74px));
      min-width: 1024px;
      min-height: calc(1366px - min(var(--c-chrome-height), 74px));
      overflow: hidden;
    }
    body {
      line-height: 1.2;
    }
    h1 {
      font-size: 2.5rem;
    }
    h2 {
      font-size: 2rem;
    }
    .c-text--primary {
      font-size: 1.5rem;
    }
    .c-text--secondary {
      font-size: 1rem;
    }
    .c-text--small {
      font-size: 1rem;
    }
}

/* ----------- Desktop ----------- */
@media (min-width: 1200px) {
  .container {
    margin: 0 auto;
    max-width: 1200px;
  }
}
.container.c-wide {
  max-width: 100%;
}
@media (min-width: 1200px) {
  /* typography */
  body {
    line-height: 1.2;
  }
  h1 {
    font-size: 3rem;
  }
  h2 {
    font-size: 2.25rem;
  }
  .c-text--primary {
    font-size: 2rem;
  }
  .c-text--secondary {
    font-size: 1.75rem;
  }
  .c-text--small {
    font-size: 1.25rem;
  }
}

/* top bar */

.c-topbar {
  background-color: black;
}
.c-topbar-taparea {
  position: fixed;
  top: 0;
  height: 32px;
  width: 100%;
  opacity: 0;
  z-index: 99;
}
@media (max-width: 767px) {
  .c-topbar-taparea {
    height: 24px;
    max-width: 100vw;
  }
}
@media (max-width: 992px) and
  (orientation: landscape) {
  .c-topbar-taparea {
    height: 24px;
  }
}
.c-topbar-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background-color: black;
  width: 100%;
  opacity: 0;
  height: 0px;
  transition: opacity 0.2s, height 0s 0.2s;
}
@media (max-width: 767px) {
  .c-topbar-menu {
    justify-content: space-around;
  }
}
.c-topbar-menu.c-show {
  height: 64px;
  opacity: 1;
  transition: opacity 0.2s, height 0s;
}
.c-topbar-menu a {
  display: flex;
  color: white;
  text-align: center;
  padding: 4px 8px;
  margin-right: 24px;
  text-decoration: none;
  align-items: center;
  justify-content: space-between;
  background-color: var(--c-button-colour); 
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.c-topbar-menu a:hover {
  background-color: var(--c-button-active-colour);
}
.c-topbar-menu a span {
  color: var(--c-button-icon-colour);
  font-size: 1.25rem;
  font-weight: 500;
  padding-right: 8px;
  text-decoration: none;
}
.c-topbar-menu a .c-icon {
  fill: var(--c-button-icon-colour);
  width: 2rem;
}
@media (max-width: 767px) {
  .c-topbar-menu a {
    margin-right: 0;
  }
  .c-topbar-menu a span {
    font-size: 1rem;
  }
  .c-topbar-menu a .c-icon {
    width: 1.5rem;
  }
}