* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

:root {
  --color-primary: #5b7b7e;
  --color-secondary: #404e4d;
  --color-bg: #f4f4f6;
  --color-bg-footer: #e5e5e5;
  --color-text: #000000;
  --color-headline: #436265;
  --color-wordmark: #000000;
  --color-grey: #9e9e9e;
  --color-green: #7ae7c7;
  --color-nav: #030303;
  --color-border: #eceeef;
  --color-zip: #f0803c;
  --color-white: #ffffff;
  --color-alt: #c4e7ea;
}

body {
  padding: 0;
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: var(--color-text);
  background: var(--color-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 2rem 0 1rem;
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  color: var(--color-headline);
  letter-spacing: 0px;
  line-height: 1.4;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2.25rem;
}

h3, h4 {
  font-size: 2rem;
  margin: 1rem 0;
}

h4 {
  font-size: 1.75rem;
}

p {
  margin-top: 1rem;
  line-height: 1.6;
  font-size: 1.125rem;
}

a:link, a:visited {
  color: #212121;
  font-weight: 700;
}

a:hover {
  text-decoration: none;
}

figcaption {
  text-align: center;
}

/* -------------------------------------------- MARGINS & PADDING ------------------------------------------------------ */

.text-white {
  color: #ffffff !important;
}

.text-small > p {
  font-size: 1rem;
  padding: 0 2rem;
}
.white-link a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  line-height: 1.5;
}
.white-link a:hover {
  color: #f68623;
}

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

.bordbot {
  padding: 0 0 2.5rem 0;
  border-bottom: solid 8px #000000;
}

.logo {
  margin-left: 1rem;
}

nav {
  position: fixed;
  background-color: #ffffff;
  z-index: 100;
}

.nav-item > a {
  font-family: 'Figtree', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  text-decoration: none;
  padding: 0.5rem;
}

.nav-item > a:link, a:visited {
  color: #212121;
}

.nav-item > a:hover {
  color: #f0803c;
}

a.dropdown-item {
  font-family: 'Figtree', sans-serif;
  font-weight: 400;
  font-size: 1rem;
}

.head-link a {
  font-family: 'Optiker', sans-serif;
  font-size: 1.125rem;
  text-decoration: none;
}

#leftThing {
  width: 20%;
}

#contact {
  width: 60%;
  padding-top: 0;
  font-size: 1.250rem;
}

#rightThing {
  width: 20%;
}

[aria-current] {
  background-color: #fafafa;
}

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
}

.jumbotron {
  background-image: url('/assets/images/outside2.webp');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: left;
  background-size: cover;
  height: 75vh;
  color: #ffffff;
  padding: 4rem 0;
}

.btn-nopt {
  --bs-btn-color: #fff;
  --bs-btn-bg: #cc857e;
  --bs-btn-border-color: #cc857e;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #af6b75;
  --bs-btn-hover-border-color: #af6b75;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #af6b75;
  --bs-btn-active-border-color: #af6b75;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #888888;
  --bs-btn-disabled-border-color: none;
}

.history-bg {
  background-image: url('/assets/images/history-bldg.png');
  background-repeat: no-repeat;
  background-size: auto 640px;
  background-position: left bottom;
  height: 640px;
}

.grayscale img {
  transition: all 0.2s;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
}

.grayscale img {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
}

.grayscale img:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
}

.zip {
  color: var(--color-zip);
}

.cool {
  color: var(--color-cool);
}

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

.display-1 {
  font-size: 2.5rem;
  font-weight: 400;
  color: #212121;
}

.clients {
  display: flex;
	flex-wrap: wrap;
  margin: auto;
  max-width: 1240px;
  height: 300px;
  justify-content: center;
  align-items: center;
}
.clients a {
  flex-grow: 1;
  margin: 2px;
  overflow: hidden;
}
.clients img {
  transition: transform .3s;
}
.clients a:hover img {
  transform: scale(1.05);
}

.privacy > p {
  font-size: 1rem;
  margin-top: 1.75rem;
  font-weight: 400;
  color:#424242
}

.privacy ul li,
.privacy ol li {
  font-size: 1rem;
  font-weight: 400;
  color: #424242;
  margin-left: 3rem;
  line-height: 1.6;
}

.privacy ul li p {
  font-size: 1.125rem;
}

.privacy h1 {
  font-size: 2rem;
  margin-top: 3rem;
}

.privacy h2 {
  font-family: 'Optiker', sans-serif;
  font-weight: 400;
  font-size: 1.75rem;
  margin-top: 3rem;
}

.privacy h3 {
  font-family: 'Optiker', sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  margin-top: 2.5rem;
}

a.new-patients {
  font-size: 2.75rem;
  color: #212121;
  text-decoration: none;
}

a:hover.new-patients {
  color: #757575;
}

.info {
  background-color: var(--color-primary);
}
.info > div {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #ffffff;
  padding: 0.75rem;
  line-height: 1.5;
  font-weight: 700;
}

.info > div > a {
  font-size: 1rem;
  color: #ffffff;
}

.f > div {
  margin-top: 4rem;
  font-size: 1.125rem;
  font-family: 'Inter', sans-serif;
  color: #ffffff;
}
.f > div > a {
  color: #ffffff;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
}
.box5 {
  background-image: url('/assets/images/p006.png');
  background-size: cover;
}

.accordion {
  margin-top: 2px;
  background-color: #f8f8f8;
  cursor: pointer;
  padding: 1.5rem;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1.25rem;
  font-weight: 700;
  transition: 0.4s;
}
/* ------------------------------------------------------------------------------ ACCORDION ----------------------------------------------------------- */
.active, .accordion:hover {
  background-color: var(--color-alt);
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: 700;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0.375rem 2rem;
  background-color: #ffffff;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.panel > p {
  font-size: 1.125rem;
}

.amd {
  margin-top: 2rem;
  padding: 1rem;
  background-color: var(--color-alt);
}

/* ---------------------------------------------------- The Grid - A digital frontier - Mobile 1st layout */

.s,
.c,
.f {
  padding: 1rem;
}

.h {
  grid-area: h;
  padding: 1rem 1rem 2rem;
}

.a {
  grid-area: a;
  padding: 2rem;
}

.s {
  grid-area: s;
  text-align: center;
  padding: 3rem 2rem;
  background: #000000;
}

.f {
  padding-top: rem;
  height: 16rem;
}

.box1 {
  padding: 3rem 0 1.5rem 1rem;
}

.box3 > a {
  color: #ffffff;
  font-size: 1.125rem;
}
.phoropter {
  background-image: url('/assets/images/phoropter.jpg');
  background-size: cover;
  height: 500px;
}

.head {
  display: flex;
  padding: 0;
  position: fixed;
}

.wrapper {
  display: grid;
  grid-template-areas:
    "c"
    "s";
  padding: 1rem;
}

.bg-wrap {
  background-color: var(--color-alt);
}

.wrapper-footer {
  display: grid;
  background-color: var(--color-primary);
}

.page-title {
  font-family: 'Optiker', sans-serif;
  font-size: 2rem;
  font-weight: normal;
  margin-top: 6rem;
  padding: 2rem 0 1rem;
  letter-spacing: 1px;
  color: #424242;
  line-height: 1;
}

.opti {
  font-family: 'Optiker', sans-serif;
}

.priv {
  display: grid;
  grid-template-columns: 2.5rem auto;
  grid-template-rows: auto;
  margin: 3rem 0 3rem;
  font-size: 1.125rem;
  line-height: 1.6;
}

.fa-ds {
  color: var(--color-alt);
  background-color: #f4f4f4;
  font-size: 2.25rem;
  margin-left: -1rem;
  padding-left: 0.5rem;
}

.footer-text, .footer-text > a {
  font-size: 1rem !important;
}

/* 992 ---------------------------------------------------------------------------------- 992 */
@media (min-width: 992px) {

  h1 {
    font-size: 4rem;
  }

  h2 {
    font-size: 3.25rem;
  }

  h3 {
    font-size: 3rem;
    padding-top: 4rem;
  }

  p {
    font-size: 1.313em;
  }

  .logo {
    margin-left: 2rem;
  }

  .nav-item > a {
    font-family: 'Figtree', sans-serif;
    font-size: 1.125rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0 0.750rem;
  }

  .page-title {
    font-size: 4rem;
  }
  .display-1 {
    font-size: 4rem;
    line-height: 1;
  }

  .h {
    grid-column: 1 / 3;
    padding: 1rem;
  }

  .wrapper {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }

  .wrapper2 {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    padding-bottom: 2.5rem;
  }

  .gap8 {
    column-gap: 10px;
    row-gap: 10px;
  }

  .head1 {
    grid-area: 1 / 2 / 2 / 4;
  }

  .head2 {
    grid-area: 1 / 9 / 2 / 12;
    padding-top: 1rem;
  }

  .box1 {
    grid-area: 1 / 4 / 2 / 10;
    padding: 3rem 0 2rem 0;
  }

  .box2 {
    grid-area: 2 / 3 / 3 / 8;
    background-image: url('/assets/images/p003.jpg');
    background-size: cover;
  }

  .box3 {
    grid-area: 2 / 8 / 3 / 11;
    padding: 2rem 2rem 10rem;
    background: var(--color-primary);
  }

  .box3 p, a {
    color: #ffffff;
    font-weight: 700;
  }

  .box4 {
    grid-area: 1 / 5 / 2 / 10;
  }

  .box6 {
    grid-area: 1 / 7 / 2 / 10;
    background-image: url('/assets/images/p002.jpg');
    background-size: cover;
  }

  .box7 {
    grid-area: 2 / 4 / 3 / 7;
    background-image: url('/assets/images/p007.jpg');
    background-size: cover;
  }

  .box8 {
    grid-area: 2 / 7 / 3 / 10;
    background-image: url('/assets/images/p004.jpg');
    background-size: cover;
  }

  .team1 {
    grid-area: 1 / 5 / 2 / 11;
  }

  .team2 {
    grid-area: 1 / 11 / 2 / 17;
  }

  .team3 {
    grid-area: 2 / 5 / 3 / 9;
  }

  .team4 {
    grid-area: 2 / 9 / 3 / 13;
  }

  .team5 {
    grid-area: 2 / 13 / 3 / 17;
  }

  .team6 {
    grid-area: 3 / 5 / 4 / 9;
  }

  .team7 {
    grid-area: 3 / 9 / 4 / 13;
  }

  .team8 {
    grid-area: 3 / 13 / 4 / 17;
  }
  
  .team9 {
    grid-area: 4 / 9 / 5 / 13;
  }

  .team > h3 {
    margin-left: 2rem;
  }

  .team > h4 {
    font-size: 1.25rem;
    font-weight: 400;
    color: #424242;
    margin: 0 0 2rem 2rem;
  }

  .history1, .privacy {
    grid-area: 1 / 4 / 2 / 9;
    padding: 2rem;
  }

  .history1 > h3 {
    font-weight: 300;
    line-height: 1.3;
  }

  .history1 > p {
    font-family: 'Lora', serif;
    margin-top: 3rem;
    font-size: 1.25rem;
  }

  .contact {
    margin-top: 2rem;
    padding-left: 1rem;
    border-left: solid 2px var(--color-alt);
  }

  .wrapper-footer {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    color: #ffffff;
  }

  .f {
    grid-column: 2 / 5;
  }

  a.navlink,
  a:visited.navlink {
    font-size: 10rem;
  }
}

/* @media (min-width: 1440px) {
.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto auto 200px;
  }
  .h { grid-area: 1 / 2 / 2 / 3; }
  .n { grid-area: 1 / 4 / 2 / 5; }
  .c { grid-area: 2 / 2 / 2 / 4; }
}
footer {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
  .f { grid-column-start: 2 } */