body{
  background-color: #000;
  color: #FFF;
}



h1 {
  letter-spacing: -0.1px;
  color: #FFF;  /* White for project page intro. */
}
h1 strong {
  letter-spacing: 0px;
}
h1 .soft {
  color: #888;
  letter-spacing: -0.5px;
}
h2 {
  font-family: Graphik-Semibold;
  font-size: 24px;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  padding-top: 0px;
  margin-bottom: 16px;
}
h3 {
  font-family: Graphik-Semibold;
  font-size: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding-top: 6px;
  margin-bottom: 16px;
}
.large-txt {
  font-family: Graphik-Regular;
  font-size: 21px;
  letter-spacing: -0.25px;
  line-height: 30px;
  color: #BBB;
}


.projectbrowser {
  position: fixed;
  width: 320px;
  height: 50px;
  border-radius: 25px;
  top: 25px;
  left: calc(50vw - 160px);
  overflow: hidden;
  background-color: rgba(48,48,48,0.8);  /* #303030 at 80% alpha = #262626 over #000 background */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
  transition: top 0.5s;
}
.pb-hide {
  top: -50px;
}
.projectbrowser p {
  font-family: Graphik-Semibold;
  font-size: 20px;
  letter-spacing: 0.25px;
  padding-top: 1.5px;
}
#project-title {
  color: rgba(255,255,255,0.5);
}
#prev-arrow {
  margin-left: 14px;
  fill: rgba(255,255,255,0.5);
  transition: fill 0.5s;
}
#next-arrow {
  margin-right: 14px;
  margin-bottom: 3px;
  fill: rgba(255,255,255,0.5);
  transition: fill 0.5s;
}
#prev-arrow:hover, #next-arrow:hover {
  fill: #FFF;
  cursor: pointer;
}



.closebutton {
  position: fixed;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  top: 25px;
  right: calc(((100vw - 1680px)/2) + 53px);
  overflow: hidden;
  background-color: rgba(48,48,48,0.8);  /* #303030 at 80% alpha = #262626 over #000 background */
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  transition: top 0.5s;
}
.cb-hide {
  top: -50px;
}
.closebutton {

}
#close-icon {
  margin-right: 0px;
  fill: rgba(255,255,255,0.5);
  transition: fill 0.5s;
}
#close-icon:hover {
  fill: #FFF;
  cursor: pointer;
}



.entry {
  margin-bottom: 60px;
}
.entry-spacer-big {
  height: 30px;
}
.entry-spacer-small {
  height: 15px;
}



.img-lg { display: block; }
.img-sm { display: none; }



.two-column-img, .three-column-img {
  display: flex;
  width: 100%;
}
.two-column-img img {
  max-width: calc(50% - 14px);
  max-height: 100%;
}
.two-column-img img:first-child {
  margin-left: 0px;
  margin-right: 14px;
}
.two-column-img img:last-child {
  margin-left: 14px;
  margin-right: 0px;
}
.three-column-img img {
  max-width: calc(33% - 14px);
  max-height: 100%;
}
.three-column-img img:first-child {
  margin-left: 0px;
  margin-right: 28px;
}
.three-column-img img:last-child {
  margin-left: 28px;
  margin-right: 0px;
}


.caption {
  margin-left: auto;
  margin-right: auto;
}
.caption p {
  margin-top:24px;
}
.caption strong {
  font-family: Graphik-Medium;
  letter-spacing: 0.18px;
  color: #fff;
  margin-right: 8px;
}

.callout {
  font-family: Graphik-Regular;
  font-size: 48px;
  line-height: 53px;
  letter-spacing: -1px;
  word-spacing: -0.75px;
  color: #FFF;
  margin-top: -4px;
  margin-bottom: 15px;
}

.two-column-txt { column-count: 2; }
.three-column-txt { column-count: 3; }
.two-column-txt, .three-column-txt {
  column-gap: 28px;
  text-align: justify;
}




/* Responsive layout adjustments */

@media (max-width:1680px) {
  .closebutton {
    right: 53px;
  }
}
@media (max-width:1000px) {
  .img-lg { display: none; }
  .img-sm { display: block; }

  .two-column-img, .three-column-img {
    flex-direction: column;
    flex-wrap: nowrap;
  }
  .two-column-img img, .three-column-img img {
    max-width: 100%;
  }
  .two-column-img img:first-child {
    margin-right: 0px;
    margin-bottom: 28px;
  }
  .two-column-img img:last-child {
    margin-left: 0px;
  }
  .three-column-img img:first-child {
    margin-right: 0px;
    margin-bottom: 28px;
  }
  .three-column-img img:last-child {
    margin-top: 28px;    
    margin-left: 0px;
  }
  .two-column-txt, .three-column-txt { column-count: 1; text-align: left;}
}
@media (max-width:600px) {
    .projectbrowser {
    width: 280px;
    left: calc(50vw - 140px);
  }
  .closebutton {
    right: 23px;
  }
  .caption, .large-txt, h2, .callout, .two-column-txt, .three-column-txt, h3, .one-column-txt {
    margin-left: 27px;
    margin-right: 27px;
  }
}
@media (max-width:480px) {
  .projectbrowser {
    width: 220px;
    left: calc(50vw - 110px);
  }
  .closebutton {
    right: 23px;
  }
}
@media (max-width:410px) {
  .projectbrowser {
    left: 23px;
  }
}
@media (max-width:320px) {
  .projectbrowser { display: none; }
}