/* GLOBAL */
:root {
  --zg-blue: #448296;
  --zg-white: #ffffff;
  --zg-black: #000000;
  --zg-grey: #666666;
  --zg-dark-grey: #333333;
  --ks-green: #05ce78;
}

/* GLOBAL ELEMENTS */
body {
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 400;
}

a {
  text-decoration: none;
}

/* OVERRIDES */
.container {
  max-width: 960px;
}

/* HELPER CLASSES */
.zg-blue-grad {
  background: rgb(78,135,155);
  background: linear-gradient(180deg, rgba(78,135,155,1) 0%, rgba(107,150,168,1) 100%);
}

.zg-black-grad {
  background: rgb(0,0,0);
  background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(34,49,56,1) 100%);
}

.zg-divider-h {
  height: 15px !important;
}

.text-zg-blue {
  color: var(--zg-blue);
}

.text-zg-black {
  color: var(--zg-black);
}

.text-zg-grey {
  color: var(--zg-grey);
}

.text-zg-dark-grey {
  color: var(--zg-dark-grey);
}

.text-ks-green {
  color: var(--ks-green);
}

.zg-font-weight-black {
  font-weight: 900;
}

.background-zg-blue {
  background-color: var(--zg-blue);
}

/* BUTTON CUSTOMIZATION */
.btn-cta {
  font-size: 2.25rem;
  background-color: #448296;
  border-color: #448296;
  box-shadow: 0px 13px 15px -3px rgba(0,0,0,0.33);
}

.btn-cta:hover {
  background-color: #336170;
  border-color: #336170;
}

.btn-cta:active {
  border-color: #448296;
}

/* GLOBAL CLASSES */
.yt-embed {
  aspect-ratio: 15.8 / 9;
  width: 100%;
}

.page-logo {
  max-width: 300px;
}

.feat-image {
  box-shadow: 9px 13px 15px -3px rgba(0,0,0,0.33);
}

/* HEADER */
#navbar-collapse {
  justify-content: space-between;
}

#header-logo img {
  max-width: 50px;
}

.link-header {
  color: var(--zg-white) !important;
  font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 900;
  font-size: 1.4em;
}
.link-header:focus,
.link-header:hover {
  color: var(--zg-blue) !important;;
}

.social-button {
  color: var(--zg-black);
}
.social-button:focus,
.social-button:hover {
  color: var(--zg-blue);
}

#kickstarter-nav {
  color: var(--ks-green) !important;;
}

#kickstarter-nav:hover {
  color: var(--zg-blue) !important;;
}

/* FOOTER */
.zg-footer-logo {
  max-width: 60px;
}

/* ABOUT */
.fitimage {
  max-width: 100%;
  max-height: 900px;
}

.zg-hero {
  box-shadow: 0px 20px 7px -7px rgba(102,102,102,0.25);
}

.zg-hero img {
  display: block;
  max-width:960px;
  width: 100%;
  margin: 0 auto;
}

#hero-slogan {
  font-size: 2.0em;
  font-weight: 700;
}

#hero-sub-slogan {
  font-size: 1.65em;
  font-weight: 400;
}

.zg-subhero {
  font-size: 1.5em;
}

.zg-subhero img {
  width: 100%;
  margin-bottom: 1.3em;
}

.product-shot {
  text-align: center;
}

.product-shot img {
  max-width: 120px;
  width: 100%;
  text-align: center;
}

.kickstarter-button {
  text-align: center;
  border: 6px solid var(--ks-green);
  border-radius: 32px;
  max-width: 80%;
  margin: 0 auto;
  font-size: 2.5em;
  color: var(--zg-grey);
  padding: 0.5em 1em 1em 1em;
  margin-bottom: 1em;
  box-shadow: 0px 5px 9px 0px #cccccc;
}

.kickstarter-button:hover {
  color: var(--ks-green);
  background-color: var(--zg-blue);
  cursor: pointer;
}

.kickstarter-button img {
  width: 80%
}

/* OUR STORY */
.about-body {
  font-size: 22px;
}

.about-head {
  float: left;
}

.about-head img {
  border-style: solid;
  border-radius: 50%;
  border-width: 5px;
  border-color: var(--zg-blue);
  max-width: 250px;
  margin-top: 15px;
  margin-right: 25px;
}

.zg-blockquote {
  font-size: 3em;
  font-weight: bold;
  color: var(--zg-blue);
}

@media (max-width: 450px) {
  /* BUTTON CUSTOMIZATION */
  .btn-cta {
    font-size: 1.25rem;
  }

  /* ABOUT */
  #hero-slogan {
    font-size: 1.30em;
    font-weight: 700;
  }
  
  #hero-sub-slogan {
    font-size: 1.1em;
    font-weight: 400;
  }

  .zg-subhero {
    font-size: 0.9em;
  }

  .kickstarter-button {
    font-size: 1.6em;
  }

  /* OUR STORY */
  .about-body {
    font-size: 16px;
  }

  .about-head img {
    border-width: 3px;
    max-width: 150px;
    margin-top: 15px;
    margin-right: 25px;
  }
}


@media (max-width: 991px) {
  /* BUTTON CUSTOMIZATION */
  .btn-cta {
    font-size: 1.55rem;
  }

  /* HEADER */
  #nav-social-buttons {
    margin-left: 15px;
    margin-top: 15px;
  }

  #nav-social-buttons a {
    padding-right: 15px;
  }

  /* FOOTER */
  .footer {
    font-size: 0.8em;
  }

  .footer h5 {
    font-size: 1.2em;
  }
}