/* CSS Document */
html, body {
  padding: 0px;
  margin: 0px;
  font-family: 'Poppins', sans-serif;
  background: #fff;
  color: #607181;
  font-weight: 200;
  min-height: 100%;
}
h1, h2, h3 {
  font-weight: 400;
  font-size: 15px;
  color: #0a253e;
  margin-bottom: 25px;
  margin-top: 0px;
  line-height: 100%;
}
.blue {
  color: #0a253e;
  font-weight: 400;
}
a {
  color: #607181;
  font-weight: 200;
  text-decoration: none;
}
#container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#header {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 300;
  height: 133px;
  background: #0a253e;
}
#header::before {
  content: "";
  height: 25px;
  width: 100%;
  background-size: 2500px 25px;
  background-repeat: repeat-x;
  background-image: url("/images/notch.png");
  background-position: 234px bottom;
  position: absolute;
  top: -25px;
  transition: background-position 1s ease-in-out;
}
.about #header::before {
  background-position: 459px bottom;
}
.projects #header::before {
  background-position: 562px bottom;
}
.contact #header::before {
  background-position: 677px bottom;
}
#mobile-bars {
  display: none;
}
#navs {
  position: absolute;
  top: 0px;
  left: 415px;
  transition: left 0.3s;
}
#navs a {
  padding: 13px 15px;
  color: #fff;
  display: inline-block;
  line-height: 100%;
  text-decoration: none;
  letter-spacing: 1px;
}
.contact .nav-contact {
  font-weight: 400;
}
.projects .nav-projects {
  font-weight: 400;
}
.about .nav-about {
  font-weight: 400;
}
#logo {
  position: absolute;
  top: 13px;
  left: 90px;
  width: 264px;
  height: auto;
  transition: left 0.3s;
}
.logo-tall {
  display: none;
}
/* CONTENT */
#homeSlideshow {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: calc(100vh - 152px);
  border: 9px solid #fff;
  box-sizing: border-box;
}
.cycle-slideshow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.panel {}
.about #content-about, .contact #content-contact {
  top: calc(100% - 133px - 438px);
  z-index: 102;
  transition-delay: .8s;
}
.projects #content-projects {
  top: 0;
  z-index: 102;
  transition-delay: .8s;
}
#content-about, #content-projects, #content-contact, .thumbs-and-preview {
  height: 438px;
  width: 100%;
  overflow: auto;
  position: absolute;
  top: calc(100vh - 130px);
  transition: top .8s ease-in-out;
  z-index: 101;
  text-align: left;
  line-height: 170%;
  background: #fff;
  padding: 57px 90px 70px 90px;
  box-sizing: border-box;
  display: flex;
  font-size: 14px;
  box-shadow: 0 0 10px 0 #00000099;
}
#content-projects {
  height: calc(100vh - 133px);
}
.thumbs-and-preview {
  height: calc(100vh - 169px);
  z-index: 103;
  display: none;
}
.home .thumbs-and-preview.active, .contact .thumbs-and-preview.active, .about .thumbs-and-preview.active {
  top: calc(100vh - 130px);
}
.thumbs-and-preview.active {
  top: 36px;
  display: flex;
}
#content-about div:first-child {
  max-width: 56.9%;
}
#content-about div:last-child {
  width: 38.9%;
  max-width: 467px;
}
#content-about img {
  max-width: 467px;
  width: 100%;
}
#content-about div:first-child, #content-contact div:first-child {
  margin-right: 50px;
}
#content-contact div:first-child {
  max-width: 649.5px;
  width: 70%;
}
#content-contact div img:first-child {
  margin-right: 3.079%;
  width: 30.023%;
}
#content-contact div img:last-child {
  width: 66.898%;
}
.email, .phone, .directions {
  display: block;
}
.directions {
  margin-top: 7px;
}
#content-contact .directions img {
  width: 12px !important;
  height: 12px !important;
  margin-right: 7px !important;
  ;
  margin-top: -2px !important;
  vertical-align: middle;
}
/* PROJECTS */
#galleries {
  max-width: 1180px;
  width: 100%;
  margin: 0px auto;
  text-align: left;
  font-size: 0px; /* prevents extra padding/margin from white space */
  line-height: 0px; /* prevents extra padding/margin from white space */
}
#galleries:after {
  content: "";
  display: table;
  clear: both;
}
.gallery {
  margin-right: 40px; /* column gap width; this number is the pixel amount that goes in the formulas below */
  width: calc((100% / 4) - (40px * (3 / 4))); /* set the width to be the number of columns MINUS the gap size. The denominator is how many columns, the numerator on the right should be one less than the number of columns */
  padding-bottom: calc((100% / 4) - (40px * (3 / 4))); /* to make PERFECT SQUARES, use the trick of bottom padding that is equal to the width */
  position: relative;
  display: inline-block; /* you may use BLOCK if you use float left, but this can cause height issues for the parent div; add font-size and line height of 0px to fix added white space */
  margin-bottom: 80px;
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
}
.gallery:nth-child(4n-4) { /* remove right margin from the last "column" of items */
  margin-right: 0px;
}
.gallery .blue-border {
  border: none;
  transition: border .2s;
  position: absolute;
}
.gallery:hover .blue-border, .gallery.active .blue-border {
  width: 100%;
  height: 100%;
  position: absolute;
  border: 4px solid #0a253e;
  box-sizing: border-box;
}
.gallery img {
  opacity: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  transition: opacity 0.3s;
}
.gallery img.lazyLoaded {
  opacity: 1;
}
.gallery.active img {
  opacity: 0.5 !important;
}
.gallery img.lazy {
  opacity: 0 !important;
}
.gallery .plus {
  position: absolute;
  color: #fff;
  z-index: 100;
  top: 18px;
  left: 18px;
  opacity: 0;
  transition: opacity 0.3s;
  width: 34px;
  height: 34px;
}
.caption {
  position: absolute;
  top: 100%;
  left: 0%;
  text-align: center;
  transition: opacity 0.3s;
  line-height: 110%;
  width: 100%;
  padding-top: 10px;
}
.caption-top {
  font-size: 16px;
  font-weight: 400;
  margin-top: 7px;
}
.caption-bottom {
  font-size: 14px;
  font-style: italic;
  font-weight: 200;
  margin-top: 6px;
  line-height: 130%;
}
.gallery:hover img {
  opacity: 0.75;
}
.gallery:hover > .plus, .gallery:hover > .plus img, .gallery:hover > .caption {
  opacity: 1;
}
.preview-row {
  display: flex;
  max-height: 100%;
  height: 100%;
  max-width: 1080px;
  width: 100%;
  margin: auto;
  justify-content: space-between;
}
.thumbs-and-preview {
  display: block;
  text-align: left;
}
.thumbs {
  text-align: right;
  position: relative;
  width: calc(35% - 25px);
  font-size: 0px;
  line-height: 0px;
  margin-right: 25px;
}
.thumbs .thumbnail {
  position: relative;
  width: calc(25% - (12px * .75));
  padding-bottom: calc(25% - (12px * .75));
  display: inline-block;
  cursor: pointer;
  line-height: 0px;
  box-sizing: border-box;
  margin-left: 12px;
  margin-bottom: 12px;
}
.thumbnail:nth-child(4n+1) {
  margin-left: 0px;
}
.thumbnail img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  transition: opacity 0.3s;
  left: 0px;
  top: 0px;
}
.thumbnail.active img {
  opacity: 0.5 !important;
}
.thumb-border {
  border: none;
  transition: border .2s;
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.thumbnail:hover .thumb-border, .thumbnail.active .thumb-border {
  width: 100%;
  position: absolute;
  border: 4px solid #0a253e;
  box-sizing: border-box;
}
.thumbnail:hover img {
  opacity: 0.75;
}
.preview {
  max-height: 100%;
  height: 100%;
  position: relative;
  width: 65%;
  border-left: 1px solid #60718155;
}
.preview-img {
  height: calc(100% - 47px);
  padding: 0px 0px 15px 25px;
  border-bottom: #60718155 1px solid;
}
.preview-img img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  object-position: top left;
}
.preview-gallery-title {
  position: absolute;
  bottom: 0px;
  left: 25px;
  font-size: 16px;
  font-weight: 400;
}
.enlarge {
  position: absolute;
  bottom: 0px;
  right: 100px;
  font-size: 24px;
  cursor: pointer;
}
.pointers {
  position: absolute;
  bottom: 0px;
  right: 50px;
  font-size: 24px;
}
.pointers img {
  cursor: pointer;
}
#enlargements .pointers {
  position: absolute;
  bottom: auto;
  right: auto;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  z-index: 10000;
}
#enlargements .pointers img {
  position: absolute;
  width: 30px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 50%;
}
#enlargements .left-pointer {
  left: 30px;
}
#enlargements .right-pointer {
  right: 30px;
}
.counter {
  font-size: 16px;
  position: absolute;
  bottom: 0px;
  right: 0px;
  text-align: right;
  font-weight: 900;
}
.right-pointer {
  transform: scaleX(-1);
  margin-left: 15px;
}
.close-preview {
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  top: 0px;
  left: 0px;
}
.close-preview img {
  position: absolute;
  top: 30px;
  right: 60px;
  filter: brightness(0.7);
  cursor: pointer;
}
/* b */
#footer {
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 301;
  height: 133px;
  box-sizing: border-box;
  padding: 13px 90px 30px 90px;
  text-align: right;
  font-size: 12px;
  color: #ffffff7c;
}
#footer a {
  text-decoration: none;
  color: #ffffff7c;
  transition: color 0.3s;
}
#footer a:hover {
  color: #ffffff99;
}
#h {
  width: 45px;
}
/* ENLARGEMENTS */
.enlargements {
  position: fixed;
  height: 100vh;
  height: 100svh;
  width: 100vw;
  background-color: #000000d9;
  z-index: 1000;
  top: -100vh;
  left: 0px;
  transition: top 0.5s ease;
}
.enlargements.open {
  top: 0px;
}
.close {
  position: absolute;
  height: fit-content;
  cursor: pointer;
  right: 60px;
  top: 30px;
  filter: brightness(1);
}
.enlargements .close {
  position: absolute;
  right: 30px;
  cursor: pointer;
  top: 30px;
  height: auto !important;
  z-index: 10000;
}
.bigger {
  opacity: .2;
  transition: opacity 0.5s ease;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  object-fit: contain;
  max-height: 100vh;
  max-width: 100vw;
}
.big-caption {
  position: absolute;
  transform: translate(-50%, 0%);
  left: 50%;
  width: 80vw;
  bottom: 30px;
}
.bigger.loaded {
  opacity: 1;
}
.big-caption .counter {
  font-size: 16px;
  position: absolute;
  bottom: 0px;
  text-align: right;
  font-weight: 900;
  line-height: 34px;
  color: white !important;
}
.big-caption .pointers {
  position: absolute;
  bottom: 0px;
  font-size: 24px;
  cursor: pointer;
}
.big-caption .caption {
  position: absolute;
  bottom: 0;
  text-align: left;
  transition: opacity 0.3s;
  line-height: unset;
  color: white !important;
  width: fit-content;
  top: unset;
  font-weight: 800;
  padding: 0;
  margin: 0;
  height: fit-content;
}
/* MEDIUM BREAK POINT */
@media screen and (max-width:1200px) {
  #footer {
    height: auto;
    padding: 20px 60px;
  }
  #footer img {
    display: none;
    height: auto;
    right: auto;
    left: 0px;
  }
  #copyright, #credit {
    display: inline-block;
  }
  #credit {
    margin-left: 3px;
    border-left: 1px solid #ffffff44;
    padding-left: 7px;
  }
}
@media screen and (max-width:1100px) {
  .gallery {
    width: calc((100% / 3) - (40px * (2 / 3))); /* set the width to be the number of columns MINUS the gap size. The denominator is how many columns, the numerator on the right should be one less than the number of columns */
    padding-bottom: calc((100% / 3) - (40px * (2 / 3))); /* to make PERFECT SQUARES, use the trick of bottom padding that is equal to the width */
  }
  .gallery:nth-child(4n-4) { /* reset the previous right margin interval */
    margin-right: 40px;
  }
  .gallery:nth-child(3n-3) { /* remove right margin from the last "column" of items */
    margin-right: 0px;
  }
}
@media screen and (max-width:790px), screen and (max-height:610px) {
  .gallery {
    margin-right: 30px; /* column gap width; this number is the pixel amount that goes in the formulas below */
    width: calc((100% / 2) - (30px * (1 / 2))); /* set the width to be the number of columns MINUS the gap size. The denominator is how many columns, the numerator on the right should be one less than the number of columns */
    padding-bottom: calc((100% / 2) - (30px * (1 / 2))); /* to make PERFECT SQUARES, use the trick of bottom padding that is equal to the width */
    margin-bottom: 60px;
  }
  .gallery:nth-child(3n-3) { /* reset the previous right margin interval */
    margin-right: 30px;
  }
  .gallery:nth-child(2n-2) { /* remove right margin from the last "column" of items */
    margin-right: 0px;
  }
  #header::before {
    background-position: 69px bottom;
    background-color: #fff;
  }
  .about #header::before {
    background-position: 272px bottom;
  }
  .projects #header::before {
    background-position: 375px bottom;
  }
  .contact #header::before {
    background-position: 490px bottom;
  }
  #navs {
    left: 229px;
  }
  .logo-wide {
    display: none;
  }
  .logo-tall {
    display: block;
    width: 130px;
  }
  #header {
    height: 170px;
  }
  #logo {
    left: 60px;
  }
  #footer {
    width: 100%;
    text-align: left;
  }
  #content-about, #content-projects, #content-contact {
    padding: 45px 60px 60px 60px;
    height: calc(100vh - 162px);
    display: block;
  }
  .thumbs-and-preview {
    padding: 60px;
  }
  .about #content-about, .contact #content-contact {
    top: 30px;
  }
  #content-projects {
    padding: 45px 60px 60px 60px;
    height: calc(100vh - 130px);
    display: block;
  }
  .thumbs-and-preview {
    padding: 60px;
  }
  #content-about div:first-child {
    max-width: 100%;
  }
  #content-about div:last-child {
    width: 100%;
    max-width: 100%;
  }
  #content-about img {
    max-width: 100%;
    width: 100%;
  }
  #content-about div:first-child, #content-contact div:first-child {
    margin-right: 0px;
  }
  #content-contact div:first-child {
    max-width: 100%;
    width: 100%;
    padding-bottom: 20px;
  }
  #content-contact div img:first-child {
    margin-right: 4%;
    width: 30%;
    max-width: 30%;
  }
  #content-contact div img:last-child {
    width: 66%;
    max-width: 66%;
  }
  .close-preview img {
    position: absolute;
    top: 30px;
    right: 30px;
    filter: brightness(0.7);
    cursor: pointer;
  }
}
@media screen and (max-width:590px), screen and (max-height:610px) {
   
.big-caption .caption {
   bottom: auto;
  top: 30px;
  line-height: 1;
  width: calc(50% - 15px);
}
  .big-caption {
    bottom: unset;
    top: 0;
    transform: translateX(-50%);
    left: 50%;
    height: 100px;
    width: 90%;
    box-sizing: border-box;
    padding: 10px;
    position: absolute;
  }
   .big-caption .counter {
    font-size: 16px;
    position: absolute;
    top: 30px;
    text-align: right;
    font-weight: 900;
    line-height: 1;
    color: white !important;
    right: 0;
}
  .enlargements .close {
    right: 50%;
    transform: translateX(50%);
  }
  #homeSlideshow {
    height: calc(100vh - 189px);
  }
  .thumbs-and-preview, .thumbs-and-preview.active {
    display: none !important;
  }
  #container {
    height: calc(100vh - 180px);
    overflow-y: auto;
  }
  #content-about, #content-projects, #content-contact, .thumbs-and-preview {
    box-shadow: none;
  }
  .about #homeSlideshow, .projects #homeSlideshow, .contact #homeSlideshow {
    display: none;
  }
  .about #content-about, .projects #content-projects, .contact #content-contact, #content-about, #content-projects, #content-contact {
    top: auto;
    position: relative;
    height: auto;
    display: block;
    padding: 30px;
    transition: opacity 1s ease-in-out;
    opacity: 1;
  }
  #content-about, #content-projects, #content-contact {
    height: 0px;
    opacity: 0;
    padding: 0px;
    transition: opacity 1s ease-in-out;
  }
  #content-about div, #content-contact div {
    max-width: 100% !important;
    width: 100% !important
  }
  #content-about div img {
    width: 100%;
    max-width: 100%;
  }
  #content-contact div:first-child {
    margin-bottom: 20px;
  }
  #navs {
    padding-top: 10px;
    left: 192px;
  }
  #navs a {
    padding: 3px 20px;
    display: block;
  }
  #logo {
    left: 40px;
  }
  #footer {
    padding: 20px 40px;
  }
  #header::before {
    background-position: 48px bottom !important;
  }
}
@media screen and (max-width:482px) {
  .gallery {
    margin-right: 0px; /* column gap width; this number is the pixel amount that goes in the formulas below */
    width: 100%; /* set the width to be the number of columns MINUS the gap size. The denominator is how many columns, the numerator on the right should be one less than the number of columns */
    padding-bottom: 100%; /* to make PERFECT SQUARES, use the trick of bottom padding that is equal to the width */
  }
}
@media screen and (max-width:450px) {
  #credit, #copyright {
    display: block;
    border-left: none;
    padding-left: 0px;
  }
}
@media screen and (max-width:330px) {
  #navs {
    left: 182px;
  }
}