@use "sass:color";
.grid {
  box-sizing: border-box;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;
  max-width: 1400px;
  width: 88.57143%; }
  @media screen and (max-width: 1025px) {
    .grid {
      width: 88.29268%; } }
  @media screen and (max-width: 620px) {
    .grid {
      width: 89.67742%; } }
  .grid-0 {
    box-sizing: border-box;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap;
    max-width: 1400px;
    width: 100%; }

.col-desk-0 {
  box-sizing: border-box;
  width: 0%;
  padding-left: 1.08871%;
  padding-right: 1.08871%; }

.col-desk-shift-0 {
  margin-left: 0%; }

.col-desk-1 {
  box-sizing: border-box;
  width: 8.33333%;
  padding-left: 1.08871%;
  padding-right: 1.08871%; }

.col-desk-shift-1 {
  margin-left: 8.33333%; }

.col-desk-2 {
  box-sizing: border-box;
  width: 16.66667%;
  padding-left: 1.08871%;
  padding-right: 1.08871%; }

.col-desk-shift-2 {
  margin-left: 16.66667%; }

.col-desk-3 {
  box-sizing: border-box;
  width: 25%;
  padding-left: 1.08871%;
  padding-right: 1.08871%; }

.col-desk-shift-3 {
  margin-left: 25%; }

.col-desk-4 {
  box-sizing: border-box;
  width: 33.33333%;
  padding-left: 1.08871%;
  padding-right: 1.08871%; }

.col-desk-shift-4 {
  margin-left: 33.33333%; }

.col-desk-5 {
  box-sizing: border-box;
  width: 41.66667%;
  padding-left: 1.08871%;
  padding-right: 1.08871%; }

.col-desk-shift-5 {
  margin-left: 41.66667%; }

.col-desk-6 {
  box-sizing: border-box;
  width: 50%;
  padding-left: 1.08871%;
  padding-right: 1.08871%; }

.col-desk-shift-6 {
  margin-left: 50%; }

.col-desk-7 {
  box-sizing: border-box;
  width: 58.33333%;
  padding-left: 1.08871%;
  padding-right: 1.08871%; }

.col-desk-shift-7 {
  margin-left: 58.33333%; }

.col-desk-8 {
  box-sizing: border-box;
  width: 66.66667%;
  padding-left: 1.08871%;
  padding-right: 1.08871%; }

.col-desk-shift-8 {
  margin-left: 66.66667%; }

.col-desk-9 {
  box-sizing: border-box;
  width: 75%;
  padding-left: 1.08871%;
  padding-right: 1.08871%; }

.col-desk-shift-9 {
  margin-left: 75%; }

.col-desk-10 {
  box-sizing: border-box;
  width: 83.33333%;
  padding-left: 1.08871%;
  padding-right: 1.08871%; }

.col-desk-shift-10 {
  margin-left: 83.33333%; }

.col-desk-11 {
  box-sizing: border-box;
  width: 91.66667%;
  padding-left: 1.08871%;
  padding-right: 1.08871%; }

.col-desk-shift-11 {
  margin-left: 91.66667%; }

.col-desk-12 {
  box-sizing: border-box;
  width: 100%;
  padding-left: 1.08871%;
  padding-right: 1.08871%; }

.col-desk-shift-12 {
  margin-left: 100%; }

@media screen and (max-width: 1025px) {
  .col-tab-0 {
    box-sizing: border-box;
    width: 0%;
    padding-left: 1.49171%;
    padding-right: 1.49171%; }
  .col-tab-shift-0 {
    margin-left: 0%; }
  .col-tab-1 {
    box-sizing: border-box;
    width: 8.33333%;
    padding-left: 1.49171%;
    padding-right: 1.49171%; }
  .col-tab-shift-1 {
    margin-left: 8.33333%; }
  .col-tab-2 {
    box-sizing: border-box;
    width: 16.66667%;
    padding-left: 1.49171%;
    padding-right: 1.49171%; }
  .col-tab-shift-2 {
    margin-left: 16.66667%; }
  .col-tab-3 {
    box-sizing: border-box;
    width: 25%;
    padding-left: 1.49171%;
    padding-right: 1.49171%; }
  .col-tab-shift-3 {
    margin-left: 25%; }
  .col-tab-4 {
    box-sizing: border-box;
    width: 33.33333%;
    padding-left: 1.49171%;
    padding-right: 1.49171%; }
  .col-tab-shift-4 {
    margin-left: 33.33333%; }
  .col-tab-5 {
    box-sizing: border-box;
    width: 41.66667%;
    padding-left: 1.49171%;
    padding-right: 1.49171%; }
  .col-tab-shift-5 {
    margin-left: 41.66667%; }
  .col-tab-6 {
    box-sizing: border-box;
    width: 50%;
    padding-left: 1.49171%;
    padding-right: 1.49171%; }
  .col-tab-shift-6 {
    margin-left: 50%; }
  .col-tab-7 {
    box-sizing: border-box;
    width: 58.33333%;
    padding-left: 1.49171%;
    padding-right: 1.49171%; }
  .col-tab-shift-7 {
    margin-left: 58.33333%; }
  .col-tab-8 {
    box-sizing: border-box;
    width: 66.66667%;
    padding-left: 1.49171%;
    padding-right: 1.49171%; }
  .col-tab-shift-8 {
    margin-left: 66.66667%; }
  .col-tab-9 {
    box-sizing: border-box;
    width: 75%;
    padding-left: 1.49171%;
    padding-right: 1.49171%; }
  .col-tab-shift-9 {
    margin-left: 75%; }
  .col-tab-10 {
    box-sizing: border-box;
    width: 83.33333%;
    padding-left: 1.49171%;
    padding-right: 1.49171%; }
  .col-tab-shift-10 {
    margin-left: 83.33333%; }
  .col-tab-11 {
    box-sizing: border-box;
    width: 91.66667%;
    padding-left: 1.49171%;
    padding-right: 1.49171%; }
  .col-tab-shift-11 {
    margin-left: 91.66667%; }
  .col-tab-12 {
    box-sizing: border-box;
    width: 100%;
    padding-left: 1.49171%;
    padding-right: 1.49171%; }
  .col-tab-shift-12 {
    margin-left: 100%; } }

@media screen and (max-width: 620px) {
  .col-mob-0 {
    box-sizing: border-box;
    width: 0%;
    padding-left: 2.42806%;
    padding-right: 2.42806%; }
  .col-mob-shift-0 {
    margin-left: 0%; }
  .col-mob-1 {
    box-sizing: border-box;
    width: 8.33333%;
    padding-left: 2.42806%;
    padding-right: 2.42806%; }
  .col-mob-shift-1 {
    margin-left: 8.33333%; }
  .col-mob-2 {
    box-sizing: border-box;
    width: 16.66667%;
    padding-left: 2.42806%;
    padding-right: 2.42806%; }
  .col-mob-shift-2 {
    margin-left: 16.66667%; }
  .col-mob-3 {
    box-sizing: border-box;
    width: 25%;
    padding-left: 2.42806%;
    padding-right: 2.42806%; }
  .col-mob-shift-3 {
    margin-left: 25%; }
  .col-mob-4 {
    box-sizing: border-box;
    width: 33.33333%;
    padding-left: 2.42806%;
    padding-right: 2.42806%; }
  .col-mob-shift-4 {
    margin-left: 33.33333%; }
  .col-mob-5 {
    box-sizing: border-box;
    width: 41.66667%;
    padding-left: 2.42806%;
    padding-right: 2.42806%; }
  .col-mob-shift-5 {
    margin-left: 41.66667%; }
  .col-mob-6 {
    box-sizing: border-box;
    width: 50%;
    padding-left: 2.42806%;
    padding-right: 2.42806%; }
  .col-mob-shift-6 {
    margin-left: 50%; }
  .col-mob-7 {
    box-sizing: border-box;
    width: 58.33333%;
    padding-left: 2.42806%;
    padding-right: 2.42806%; }
  .col-mob-shift-7 {
    margin-left: 58.33333%; }
  .col-mob-8 {
    box-sizing: border-box;
    width: 66.66667%;
    padding-left: 2.42806%;
    padding-right: 2.42806%; }
  .col-mob-shift-8 {
    margin-left: 66.66667%; }
  .col-mob-9 {
    box-sizing: border-box;
    width: 75%;
    padding-left: 2.42806%;
    padding-right: 2.42806%; }
  .col-mob-shift-9 {
    margin-left: 75%; }
  .col-mob-10 {
    box-sizing: border-box;
    width: 83.33333%;
    padding-left: 2.42806%;
    padding-right: 2.42806%; }
  .col-mob-shift-10 {
    margin-left: 83.33333%; }
  .col-mob-11 {
    box-sizing: border-box;
    width: 91.66667%;
    padding-left: 2.42806%;
    padding-right: 2.42806%; }
  .col-mob-shift-11 {
    margin-left: 91.66667%; }
  .col-mob-12 {
    box-sizing: border-box;
    width: 100%;
    padding-left: 2.42806%;
    padding-right: 2.42806%; }
  .col-mob-shift-12 {
    margin-left: 100%; } }

/* reem-kufi-regular - latin */
@font-face {
  font-family: 'Reem Kufi';
  font-style: normal;
  font-weight: 100;
  src: url("../fonts/reem-kufi-v7-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local("Reem Kufi Regular"), local("ReemKufi-Regular"), url("../fonts/reem-kufi-v7-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/reem-kufi-v7-latin-regular.woff2") format("woff2"), url("../fonts/reem-kufi-v7-latin-regular.woff") format("woff"), url("../fonts/reem-kufi-v7-latin-regular.ttf") format("truetype"), url("../fonts/reem-kufi-v7-latin-regular.svg#ReemKufi") format("svg");
  /* Legacy iOS */ }

/* montaga-regular - latin */
@font-face {
  font-family: 'Montaga';
  font-style: normal;
  font-weight: 100;
  src: url("../fonts/montaga-v7-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local("Montaga"), local("Montaga-Regular"), url("../fonts/montaga-v7-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/montaga-v7-latin-regular.woff2") format("woff2"), url("../fonts/montaga-v7-latin-regular.woff") format("woff"), url("../fonts/montaga-v7-latin-regular.ttf") format("truetype"), url("../fonts/montaga-v7-latin-regular.svg#Montaga") format("svg");
  /* Legacy iOS */ }

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

body {
  color: #304155;
  background-color: #efefeb;
  font-family: "Reem Kufi";
  font-size: 0.75rem; }

a {
  -webkit-tap-highlight-color: transparent; }

.header {
  background-color: rgba(239, 239, 235, 0.7);
  border-bottom: 1px solid #304155;
  display: flex;
  flex-direction: row;
  height: 64px;
  justify-content: center;
  margin: 0;
  position: fixed;
  text-align: center;
  top: 0;
  left: 0;
  right: 0;
  transition: background-color 1000ms ease-out;
  width: 100%;
  z-index: 10000; }
  .header .menu-button {
    height: 32px;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 32px;
    margin: 16px;
    background-color: transparent;
    background-size: cover;
    border: none;
    background-image: url("../img/menu.svg"); }
    .header .menu-button__fake {
      background: none; }
  .header .logo {
    display: block;
    text-align: center;
    margin: 16px 0 8px;
    flex-grow: 1; }
    .header .logo svg {
      height: 34px;
      width: auto; }
  .header__scrolled {
    background-color: #efefeb; }

.contact {
  margin-top: 32px; }
  .contact .action-button {
    width: 100%; }

.nav {
  display: none; }
  .nav__visible {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #304155;
    color: #efefeb; }
    .nav__visible path {
      fill: #efefeb; }
  .nav__item {
    display: flex;
    color: #efefeb;
    font-size: 1rem;
    border-bottom: 1px solid #efefeb;
    padding-top: 12px;
    padding-bottom: 12px;
    margin-left: 16px;
    margin-right: 16px;
    text-decoration: none;
    text-transform: uppercase;
    flex-direction: column;
    justify-content: center;
    text-align: center; }
    .nav__item.touched {
      color: #304155;
      background-color: #efefeb; }
  .nav__home svg {
    width: 80%;
    margin: 24px auto 12px; }
  .nav__close {
    border-top: 1px solid #efefeb;
    bottom: 8px;
    left: 0;
    position: fixed;
    right: 0; }

main {
  width: 100%;
  margin: 0 auto; }

h1 {
  font-weight: 200; }
  h1 .highlight {
    font-family: "Montaga";
    font-weight: 100; }

.section {
  margin: 54px auto;
  max-width: 1440px; }
  .section__first {
    margin-top: 80px; }
  .section__image {
    margin-bottom: 20px; }
    .section__image img {
      width: 100%;
      height: auto; }
    .section__image.section__image--lage img {
      width: 50%;
      margin: 0 auto;
      display: block; }
    .section__image.section__image--lage h1 {
      text-align: center; }
    .section__image.section__image--lage .action-button {
      display: block;
      margin-left: auto;
      margin-right: auto;
      max-width: 256px; }
  .section__images {
    position: relative; }
    .section__images > div {
      width: auto; }
    .section__images img {
      width: 23.5%; }
  .section__icon img {
    position: sticky;
    top: 76px; }
  .section__text {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center; }
    .section__text p {
      margin-bottom: 30px; }
    .section__text ul {
      margin-top: 0;
      margin-bottom: 0; }
    .section__text li {
      margin-left: 32px; }
    .section__text blockquote {
      font-size: 1.25rem;
      line-height: 1;
      margin-bottom: 32px;
      margin-left: 0;
      margin-right: 0;
      margin-top: 0; }
    .section__text.section__text--long {
      text-align: left;
      justify-content: left; }
      .section__text.section__text--long h1 {
        text-align: left;
        width: 100%; }
      .section__text.section__text--long p {
        margin-top: 0;
        margin-bottom: 1.4rem; }
        .section__text.section__text--long p:last-child {
          margin-bottom: 30px !important; }
      .section__text.section__text--long .action-button {
        margin-top: 50px;
        margin-bottom: 50px; }
  .section h1 {
    font-size: 0.9375rem;
    line-height: 1.26667;
    text-transform: uppercase;
    margin-bottom: 20px; }
  .section p {
    line-height: 1.2;
    width: 100%; }

.opener {
  position: relative;
  line-height: 1.1;
  text-transform: uppercase; }
  .opener__text {
    text-align: center;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
    .opener__text div {
      margin-top: 64px; }
  .opener h1 {
    font-size: 2rem; }
  .opener h1, .opener h2 {
    color: white;
    font-weight: 100; }
  .opener__image {
    position: relative;
    overflow: hidden;
    height: 345px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
    .opener__image--small {
      height: 245px; }
    .opener__image img {
      height: auto;
      width: 100%;
      min-width: 100%; }
  .opener .action-button {
    background-color: #efefeb;
    color: #304155; }

.contact {
  margin-top: 36px; }
  .contact__address {
    margin-top: 15px;
    text-align: center; }

.map iframe {
  height: 100%;
  width: 100%; }

.map__link {
  display: block;
  text-align: right;
  font-size: 0.75rem;
  text-decoration: none;
  line-height: 1; }

@media (orientation: portrait) {
  .opener__image img {
    height: 100%;
    width: auto; } }

.image-box {
  width: calc(100%/23); }

.action-button {
  background-color: #304155;
  color: #efefeb;
  display: inline-block;
  font-family: "Montaga";
  margin-bottom: 30px;
  padding: 6px 32px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase; }

.social-media {
  text-align: center; }
  .social-media__link {
    display: inline-block;
    height: 64px;
    width: auto;
    padding: 12px;
    background-color: #304155;
    border-radius: 16px; }
    .social-media__link svg {
      height: 100%;
      width: auto; }

.footer {
  position: relative;
  background-color: #304155;
  color: #efefeb;
  text-align: center;
  line-height: 1.5;
  font-size: 0.625rem;
  padding: 24px 0;
  text-transform: uppercase; }
  .footer__image {
    position: relative; }
    .footer__image svg {
      left: 0;
      position: absolute;
      top: -54px;
      width: 32px; }
  .footer__social {
    margin-top: 32px; }
    .footer__social svg {
      height: 32px;
      width: auto; }
  .footer a {
    color: #efefeb;
    padding: 8px 32px;
    text-decoration: none; }

@media (min-width: 620px) {
  body {
    font-size: 1.40625rem;
    line-height: 2.16; }
  .header {
    height: 64px; }
    .header .menu-button {
      display: none; }
    .header .logo {
      display: none; }
  .nav {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 64px;
    justify-content: center; }
    .nav__item {
      border-bottom: none;
      color: #304155;
      display: block;
      height: auto;
      margin-left: 16px;
      margin-right: 16px;
      text-decoration: none;
      width: 120px; }
    .nav__about {
      order: 1; }
    .nav__locs {
      order: 4; }
    .nav__home {
      order: 3;
      width: auto; }
      .nav__home svg {
        height: 44px;
        width: auto; }
    .nav__shop {
      order: 2; }
    .nav__contact {
      order: 5; }
    .nav__close {
      display: none; }
  .opener h1 {
    font-size: 3.75rem;
    line-height: 1.2;
    margin: 0 0 2rem; }
  .opener h2 {
    font-size: 1rem; }
  .opener__text div {
    margin-top: 96px;
    max-width: 700px; }
  .opener__image {
    height: 500px; }
    .opener__image--small {
      height: 380px; }
  .section {
    margin: 96px auto;
    font-size: 1rem;
    line-height: 1.5; }
    .section__first {
      margin-top: 96px; }
    .section__image {
      order: 2; }
    .section__icon img {
      top: 76px; }
    .section__text {
      text-align: left; }
      .section__text > * {
        width: auto; }
      .section__text p {
        margin-top: 50px;
        margin-bottom: 50px; }
      .section__text li {
        margin-left: 64px; }
      .section__text blockquote {
        font-size: 2.25rem;
        line-height: 1;
        max-width: 70%;
        margin-bottom: 100px;
        margin-top: 0; }
    .section__images img {
      width: 40.5%; }
    .section h1 {
      font-size: 1.5rem;
      line-height: 1.5; }
  .action-button {
    font-size: 1.15625rem;
    line-height: 1.40541;
    /* width: 200px; */ }
  .map iframe {
    height: 480px;
    width: 100%; }
  .map__link {
    font-size: 1rem; }
  .footer {
    font-size: 0.75rem; }
    .footer__image svg {
      top: -74px;
      width: 54px; } }

@media (min-width: 1025px) {
  .header {
    height: 113px; }
  .nav {
    height: 113px; }
    .nav__home svg {
      height: 65px;
      width: auto; }
  .logo img {
    height: 84px; }
  .section {
    margin: 130px auto;
    font-size: 1.40625rem;
    line-height: 1.51111; }
    .section__first {
      margin-top: 130px; }
    .section__icon img {
      top: 125px; }
    .section__images img {
      width: 23.5%; }
    .section h1 {
      font-size: 2.8125rem;
      line-height: 1.2; } }

@media (min-width: 1400px) {
  .opener h1 {
    font-size: 5.625rem;
    line-height: 1.2;
    margin: 0 0 3rem; }
  .opener h2 {
    font-size: 1.40625rem;
    line-height: 1.51111; }
  .opener__text div {
    margin-top: 96px;
    max-width: 1000px; }
  .opener__image {
    height: 800px; }
    .opener__image--small {
      height: 540px; } }