:root {
  --text-tiny: 0.625rem;
  --text-tiny--line-height: 1.5rem;

  --text-2xs: 0.5rem; /* (8px) */
  --text-2xs--line-height: 1.4;

  --text-xs: 0.75rem; /* (12px) */
  --text-xs--line-height: calc(1 / 0.75);

  --text-sm: 0.875rem; /* (14px) */
  --text-sm--line-height: calc(1.25 / 0.875);

  --text-base: 1rem; /* (16px) */
  --text-base--line-height: calc(1.5 / 1);

  --text-lg: 1.125rem; /* (18px) */
  --text-lg--line-height: calc(1.75 / 1.125);

  --text-xl: 1.25rem; /* (20px) */
  --text-xl--line-height: calc(1.75 / 1.25);

  --text-2xl: 1.5rem; /* (24px) */
  --text-2xl--line-height: calc(2 / 1.5);

  --text-3xl: 1.875rem; /* (30px) */
  --text-3xl--line-height: calc(2.25 / 1.875);

  --text-4xl: 2.25rem; /* (36px) */
  --text-4xl--line-height: calc(2.5 / 2.25);

  --text-5xl: 3rem; /* (48px) */
  --text-5xl--line-height: 1;

  --text-6xl: 3.75rem; /* (60px) */
  --text-6xl--line-height: 1;

  --text-7xl: 4.5rem; /* (72px) */
  --text-7xl--line-height: 1;

  --text-8xl: 6rem; /* (96px) */
  --text-8xl--line-height: 1;

  --text-9xl: 8rem; /* (128px) */
  --text-9xl--line-height: 1;

  --text-10xl: 12rem; /* (192px) */
  --text-10xl--line-height: 1;

  --text-11xl: 16rem; /* (256px) */
  --text-11xl--line-height: 1;

  --text-12xl: 24rem; /* (384px) */
  --text-12xl--line-height: 1;

  --text-13xl: 32rem; /* (512px) */
  --text-13xl--line-height: 1;

  --text-14xl: 40rem; /* (640px) */
  --text-14xl--line-height: 1;

  --text-15xl: 48rem; /* (768px) */
  --text-15xl--line-height: 1;

  --text-16xl: 64rem; /* (1024px) */
  --text-16xl--line-height: 1;

  --text-17xl: 80rem; /* (1280px) */
  --text-17xl--line-height: 1;

  /*--s-3: 4px;
--s-2: 8px;
--s-1: 12px;
--s0: 16px;
--s1: 24px;
--s2: 32px;
--s3: 48px;
--s4: 64px;
--s5: 96px;
--s6: 128px;
--s7: 192px;
--s8: 256px;
--s9: 384px;
--s10: 512px;
--s11: 640px;
--s12: 768px;*/

  --s-3: var(--text-tiny);
  --s-2: var(--text-2xs);
  --s-1: var(--text-xs);
  --s0: var(--text-base);
  --s1: var(--text-2xl);
  --s2: var(--text-3xl);
  --s3: var(--text-5xl);
  --s4: var(--text-6xl);
  --s5: var(--text-8xl);
  --s6: var(--text-9xl);
  --s7: var(--text-10xl);
  --s8: var(--text-11xl);
  --s9: var(--text-12xl);
  --s10: var(--text-13xl);
  --s11: var(--text-14xl);
  --s12: var(--text-15xl);
  --s13: var(--text-16xl);
  --s14: var(--text-17xl);

  --gapSizeBetweenMobileImages: var(--s-2);
  --gapSizeBetweenDesktopImages: var(--s0);
  --splitGapSizeBetweenColumns: calc(var(--gapSizeBetweenDesktopImages) / 2);

  --headerTop: var(--text-xl);
  --headerTopMobile: 0;
  --headerHeight: var(--s6);
  --headerHeightMobile: var(--s4);
  --indentUItems: var(--s-1);
  --burgerIconTop: var(--s0);

  --imagesTopMargin: calc(var(--headerHeight) + var(--s2));
  --imagesTopMarginMobile: calc(var(--headerHeightMobile) + var(--s-3));

  --navbarTop: var(--s3);
  --gapBetweenNavbarItems: var(--s2);
  --navbarVerticalPadding: var(--s-2);
  --navbarDropdownContentWidth: var(--s6);
  --navbarFontSize: var(--text-sm);
  --navbarLetterSpacing: calc((var(--text-base) / 16) * 1);

  /* colours */

  --colorBackground: #ffffff;
  --colorText: #404040;
  --colorTextLight: #969e94;
  --colorHighlight: #de792c;
  --colorHighlightHover: #de982d;
  --colorBlue: #3b8ea5;
  --colorGreen: #317487;
}

html {
  scrollbar-gutter: stable;
}

/* Remove mobile touch highlighting */

.noSelect {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.noSelect:focus {
  outline: none !important;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background-color: var(--colorBackground);
  color: var(--colorText);
}

a {
  text-decoration: none;
  color: var(--colorText);
}

/* a:hover {
  text-decoration: none;
} */

.selected {
  /* color: var(--colorHighlightHover); */
  color: var(--colorHighlight);
  border-bottom: 2px solid var(--colorHighlight);
}

.dropdown-content .selected {
  border-bottom: none;
}

/* Header */

header h1 {
  position: fixed;
  top: var(--headerTop);
  left: calc(var(--indentUItems) + var(--gapSizeBetweenDesktopImages));
}

header div {
  width: 100%;
  height: var(--headerHeight);
  background-color: var(--colorBackground);
  position: fixed;
  top: 0;
  opacity: 80%;
}

header img {
  position: fixed;
  top: calc(var(--headerHeight) / 2);
  left: calc(var(--indentUItems) + var(--gapSizeBetweenDesktopImages));
  transform: translateY(-50%);
  opacity: 85%;
}

/* End header */

/* Desktop Drop Down Menu */

.navbar {
  margin: 0 0 0;
  padding: 0;
  position: fixed;
  top: var(--navbarTop);
  right: calc(var(--indentUItems) + var(--gapSizeBetweenDesktopImages));
  list-style-type: none;
  /* overflow: hidden; */
  font-size: 0;
  letter-spacing: var(--navbarLetterSpacing);
}

.navbar a {
  margin-left: var(--gapBetweenNavbarItems);
  padding: var(--navbarVerticalPadding) 0;
  float: left;
  font-size: var(--navbarFontSize);
  text-align: center;
  text-decoration: none;
}

.dropdown {
  margin-left: var(--gapBetweenNavbarItems);
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  padding: var(--navbarVerticalPadding) 0;
}

.dropdown .dropbtn {
  font-size: var(--navbarFontSize);
  outline: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0);
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown .dropbtn.selected {
  color: var(--colorText);
  border-bottom: 2px solid var(--colorHighlight);
}

.navbar a:hover,
.dropdown:hover .dropbtn {
  color: var(--colorHighlightHover);
}

.dropdown-content {
  margin-left: calc(var(--navbarFontSize) * -1);
  display: none;
  position: absolute;
  background-color: var(--colorBackground);
  min-width: var(--navbarDropdownContentWidth);
  box-shadow: 0px var(--text-2xs) var(--text-base) 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  margin: 0;
  float: none;
  padding: var(--text-xs) var(--text-base);
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f7f7f7;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* End Desktop Drop Down Menu */

/* Burger icon For Mobile */

.burgerIcon {
  display: none;
  cursor: pointer;
  position: fixed;
  top: var(--burgerIconTop);
  right: var(--indentUItems);
  z-index: 2;
}

.bar1,
.bar2,
.bar3 {
  width: calc((var(--text-base) / 16) * 35);
  /* height: 5px; */
  height: calc((var(--text-base) / 16) * 3);
  background-color: #404040;
  margin: calc((var(--text-base) / 16) * 6) 0;
  transition: 0.4s;
}

.change .bar1 {
  transform: translate(0, calc((var(--text-base) / 16) * 9)) rotate(-45deg);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  transform: translate(0, calc((var(--text-base) / 16) * -9)) rotate(45deg);
}

/* End burger icon For Mobile */

/* Mobile menu overlay */

.menuOverlay {
  visibility: hidden;
  overflow: scroll;
  position: fixed;
  top: calc(-1 * var(--text-lg));
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 1);
  z-index: 1;
  opacity: 0;
  transition: all 250ms ease-in, visibility 0ms ease-in 250ms;
}

.menuOverlay.visible {
  visibility: visible;
  top: 0;
  transition-duration: 3s;
  opacity: 1;
  transition: all 250ms ease-in, visibility 0ms ease-in 0ms;
}

.menuOverlay > ul {
  list-style-type: none;
  padding: 0;
  margin: var(--text-8xl) 0 0 var(--text-7xl);
}

.menuOverlay > ul > ul {
  list-style-type: none;
  padding: 0;
  margin: 0 0 0 var(--text-4xl);
}

.menuOverlay a {
  display: inline-block;
  font-size: var(--text-2xl);
  line-height: 1.5;
  margin-bottom: var(--text-sm);
}

.menuOverlay a:hover {
  display: inline-block;
  text-decoration: none;
  color: var(--colorHighlightHover);
}

.menuHeading {
  color: var(--colorTextLight);
  margin-top: var(--text-xs);
}

.menuHeading.selected {
  color: var(--colorTextLight);
  border-bottom: 2px solid var(--colorHighlight);
}

.menuOverlay a.menuHeading:hover {
  color: var(--colorTextLight);
}

/* End mobile menu overlay */

/* Layout for images */

.pageWrapperOneColumn,
.pageWrapperTwoColumn {
  margin: 0 auto;
  margin-top: var(--imagesTopMargin);
  max-width: 80rem;
  display: none;
  font-size: 0;
}

.pageWrapperOneColumn {
  margin-top: var(--imagesTopMarginMobile);
}

.pageWrapperOneColumn > img {
  width: calc(100%);
  height: auto;
  margin: 0 0 var(--gapSizeBetweenMobileImages) 0;
  /* float: left; */
  font-size: var(--text-base);
}

.pageWrapperTwoColumn > div {
  width: calc(
    50% -
      calc(
        var(--splitGapSizeBetweenColumns) + var(--gapSizeBetweenDesktopImages)
      )
  );
  height: auto;
  float: left;
}

.pageWrapperTwoColumn > div img {
  width: 100%;
  height: auto;
  margin-bottom: var(--gapSizeBetweenDesktopImages);
  font-size: var(--text-base);
}

.column1 {
  margin-left: var(--gapSizeBetweenDesktopImages);
  margin-right: var(--splitGapSizeBetweenColumns);
}

.column2 {
  margin-left: var(--splitGapSizeBetweenColumns);
  margin-right: var(--gapSizeBetweenDesktopImages);
}

/* End layout for images */

/* About Page */

.aboutText {
  font-size: var(--text-xl);
  line-height: calc(1.75 / 1.25);
  max-width: var(--text-13xl);
  margin: var(--s3) auto;
  padding: 0 var(--s2);
  text-align: left;
}

.aboutText.firstText {
  margin-top: var(--s1);
}

#aboutImage {
  width: 90%;
  margin-top: var(--s4);
  margin-left: 5%;
  margin-right: 5%;
  height: auto;
  box-shadow: 0 4px var(--text-2xs) 0 rgba(0, 0, 0, 0.2),
    0 6px var(--text-xl) 0 rgba(0, 0, 0, 0.19);
}

#aboutImageShadow {
  box-shadow: 0 4px var(--text-2xs) 0 rgba(0, 0, 0, 0.2),
    0 6px var(--text-xl) 0 rgba(0, 0, 0, 0.19);
  cursor: auto;
}

#phoneNumberOneCol {
  font-size: var(--text-3xl);
  line-height: calc(2.25 / 1.875);
  max-width: var(--text-13xl);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--s4);
  padding: 0 var(--s2);
  text-align: left;
  color: var(--colorBlue);
  position: relative;
}

/* .pageWrapperOneColumn .phoneNumber {
  margin-left: var(--s7);
} */

#emailOneCol {
  font-size: var(--text-xl);
  line-height: calc(2 / 1.5);
  max-width: var(--text-13xl);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--s4);
  padding: 0 var(--s2);
  text-align: left;
  position: relative;
}

/* .pageWrapperOneColumn .email {
  margin-left: var(--s7);
} */

#emailOneCol a {
  color: var(--colorHighlight);
}

#emailOneCol a:hover {
  color: var(--colorHighlightHover);
  text-decoration: underline;
}

.contactIcon {
  width: var(--text-4xl);
  position: relative;
  top: calc(var(--text-base) / 2);
  margin-right: var(--text-tiny);
  cursor: auto;
}

/* Two Col*/

.phoneNumber {
  font-size: var(--text-3xl);
  line-height: calc(2.25 / 1.875);
  max-width: var(--text-13xl);
  margin: var(--s-1) auto var(--s4) var(--s3);
  padding: 0 var(--s2);
  text-align: left;
  color: var(--colorBlue);
  position: relative;
}

.email {
  font-size: var(--text-xl);
  line-height: calc(2 / 1.5);
  max-width: var(--text-13xl);
  margin: var(--s-1) auto var(--s6) var(--s3);
  padding: 0 var(--s2);
  text-align: left;
  position: relative;
}

.email a {
  color: var(--colorHighlight);
}

.email a:hover {
  color: var(--colorHighlightHover);
  text-decoration: underline;
}

#phoneIcon,
#emailIcon {
  width: var(--text-4xl);
  position: absolute;
  top: calc(var(--text-base) / 5);
  left: calc(var(--text-base) * -1);
  margin-right: var(--text-2xs);
  cursor: auto;
}

/* End About Page */

/* Image Viewer */

.pageWrapperOneColumn img,
.pageWrapperTwoColumn img {
  cursor: pointer;
}

.imageViewerOverlay {
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--colorBackground);
  z-index: 3;
  opacity: 0;
  /* transition: opacity 5s ease-in, visibility 0ms ease-in 250ms; */
}

.imageViewerOverlay.visible {
  visibility: visible;
  opacity: 1;
  transition: opacity 250ms ease-in, visibility 0ms ease-in 0ms;
  visibility: visible;
}

.overlayImage {
  display: block;
  max-width: calc(100% - (100vw - 100%));
  max-height: calc(100% - var(--text-7xl));
  width: auto;
  height: auto;
  position: absolute;
  top: 0;
  left: calc(100vw - 100%);
  right: 0;
  bottom: 0;
  /* Center the image vertically and horizontally */
  margin: auto;
  box-shadow: 0 4px var(--text-2xs) 0 rgba(0, 0, 0, 0.2),
    0 6px var(--text-xl) 0 rgba(0, 0, 0, 0.19);
}

.imageViewerText {
  display: none;
  position: absolute;
  background: rgba(255, 255, 255, 0.8);
  color: #000;
  text-align: center;
  pointer-events: none;
  z-index: 4;
}

.imageViewerText.visible {
  display: block;
}

.imageViewerTitle {
  margin: 0;
  padding: 0;
  font-size: var(--text-2xl);
  position: absolute;
  left: 50%;
  top: var(--text-base);
  transform: translate(-50%, 0);
  color: #000;
  letter-spacing: calc((var(--text-base) / 16) * 0.5);
  text-shadow: 0px 0px 10px rgba(255, 255, 255, 0.9);
}

.imageViewerInfo {
  font-size: var(--text-sm);
  margin: 0;
  padding: 0;
  text-align: right;
  position: absolute;
  bottom: var(--text-base);
  right: var(--text-base);
  z-index: 6;
  color: #000;
  letter-spacing: calc((var(--text-base) / 16) * 2);
  line-height: var(--text-2xl--line-height);
}

#imageViewerButton {
  position: absolute;
  z-index: 5;
  /* Default: bottom right of overlayImage */
  /* These will be set by JS for precise positioning */
  width: calc((var(--text-base) / 16) * 27);
  height: calc((var(--text-base) / 16) * 27);
  cursor: pointer;
}

.closeBtn {
  position: absolute;
  z-index: 5;
  /* font-size: 27px; */
  cursor: pointer;
  /* font-weight: 200; */
  width: calc((var(--text-base) / 16) * 20);
  height: var(--text-xl);
}

/* End image viewer */

/* Responsive design */

@media (pointer: fine), (pointer: none) {
  @media screen and (max-width: 47.99rem) {
    header div {
      height: var(--headerHeightMobile);
    }
    header h1 {
      top: var(--headerTopMobile);
      left: var(--indentUItems);
    }
    header img {
      top: calc(var(--headerHeightMobile) / 2);
      left: var(--indentUItems);

      width: calc(100% - ((var(--text-base) / 16) * 150));
      max-width: calc((var(--text-base) / 16) * 250);
      opacity: 100%;
    }
    .burgerIcon {
      display: block;
    }
    .navbar {
      display: none;
    }
    .pageWrapperOneColumn {
      display: block;
    }
    .pageWrapperTwoColumn {
      display: none;
    }
  }

  @media screen and (min-width: 48rem) {
    .pageWrapperOneColumn {
      display: none;
    }
    .pageWrapperTwoColumn {
      display: block;
    }
    header img {
      width: calc(100% - ((var(--text-base) / 16) * 530));
      max-width: calc((var(--text-base) / 16) * 400);
      opacity: 85%;
    }
  }

  @media screen and (min-width: 80rem) {
    header h1 {
      left: calc(
        ((100% - 80rem) / 2) + var(--indentUItems) +
          var(--gapSizeBetweenDesktopImages)
      );
    }
    header img {
      left: calc(
        ((100% - 80rem) / 2) + var(--indentUItems) +
          var(--gapSizeBetweenDesktopImages)
      );
    }
    .navbar {
      right: calc(
        ((100% - 80rem) / 2) + var(--indentUItems) +
          var(--gapSizeBetweenDesktopImages)
      );
    }
  }
}

@media (pointer: coarse) {
  header div {
    height: var(--headerHeightMobile);
  }
  header h1 {
    top: var(--headerTopMobile);
    left: var(--indentUItems);
  }
  header img {
    top: calc(var(--headerHeightMobile) / 2);
    left: var(--indentUItems);

    width: calc(100% - ((var(--text-base) / 16) * 150));
    max-width: calc((var(--text-base) / 16) * 250);
    opacity: 100%;
  }
  .burgerIcon {
    display: block;
  }
  .navbar {
    display: none;
  }
  .pageWrapperOneColumn {
    display: block;
  }
  .pageWrapperTwoColumn {
    display: none;
  }
}