html {
  scroll-behavior: smooth;
}

.header .title {
  display: block;
  padding: 0;
  margin: auto;
  z-index: 999;
  width: 33vw;
  text-align: center;
  transition: 0.5s;
  text-transform: capitalize;
}

.header .tags {
  font-size: 1rem;
  text-transform: lowercase;
  letter-spacing: 0;
  z-index: 1;
  width: 33vw;
  position: absolute;
  right: 1.15rem;
}

.header .tags p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: right;
}

.intro {
  padding: 5vh 0;
  text-align: center;
}

.intro h1 {
  position: relative;
  margin-bottom: 1rem;
  font-weight: 900;
  font-size: calc(1vw + 2rem);
  z-index: 1;
}


.year {
  letter-spacing: 0.075em;
  font-size: .65rem;
  font-weight: normal;
  color: #b0b0b0;
}
.tags {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.075em;
  font-size: .65rem;
  font-weight: normal;
  color: #b0b0b0;
}
.tags ul{
  display: block;
  float: right;
}
.tags li{
  display: inline;
  margin-left: .15rem;
  color: #bababa;
  border-bottom: solid 1px #f2f2f2;
}
.tags li:not(:last-child):after {
  content: ",";
}


/* Cover Image */
.header {
margin-bottom: .25rem;
position: absolute;
mix-blend-mode: difference;
}


.album-cover {
  line-height: 0;
  width: 100%;
  margin: auto;
}
.album-cover figure {
  padding-top: .5rem;
  line-height: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  margin: auto;
  
}
.album-cover img {
  max-height: 85.5vh;
  max-width: 100%;
  margin: auto;
  display: block;
  background-color: #f5f5f5;
}

header .col-50 {
  height:100vh !important;
  max-width: 100%;
  margin: auto;
  display: block;
}

header .fullscreen {
  width: 100% !important;
  position: relative;
  height: 100vh;
  float: none;
margin: 0;  
display: block;

}
header .fullscreen img {
  min-height: 100%;
  width: 100%;
  object-fit: cover;
  background-color: #f5f5f5;
}
.album-text {
  clear: both;
  margin: 3rem auto 3rem;
  padding: 0 1rem 0 1rem;
  max-width: 40rem;  
  text-align: center;
}
.album-text h2 {
  margin-bottom: .75rem;
}
.album-gallery {
  margin: 0 auto;
  list-style: none;
  text-align: center;
  display: block;
  float: left;
  width: 100%;
}


.album-gallery li {
  width: 100%;
  width: -moz-available;
  width: -webkit-fill-available;
  width: stretch;
  position: relative;
  display: flex;
  float: left;
  text-align: center;
  height: auto;
  margin-top:calc((100 * 100vw) / 1920) !important;
  margin-bottom:calc((100 * 100vw) / 1920) !important;
}


.lazyload, 
.lazyloading {
  opacity: 0;
  transform: scale(0.8);
}

.lazyloaded {
  opacity: 1;
  transform: scale(1);
  transition: all 700ms;
    -webkit-transition: opacity .65s ease-in;
transition: opacity .65s ease-in;
}

.album-gallery li figure {
  position: relative;
  height: 100%;
  width: 100%;
  display: block;
  margin: auto;
  line-height: 0;
}

.video-container {
width: 100%;
display: block;
margin: auto;
}

.video-container video {
margin: auto;
line-height: 0;
max-height: 87.5vh;
max-width: 87.5vw;
}

.small .video-container {
margin: auto;
line-height: 0;
}

.right figure {
  display: block;
  margin-left: auto !important;
  margin-right: 0 !important;
  width: fit-content;
  width: -moz-fit-content;
}

.left figure {
  display: block;
  margin-right: auto !important;
  margin-left: 0 !important;
  width: 100%;
}

.album-gallery img {
  max-height: 87.5vh;
  max-width: 87.5vw;
}

.album-gallery video {
  margin-left: auto;
  margin-right: auto;
  
}

figcaption {
position: absolute !important;
bottom: -2rem;
height: 1rem;
min-width: 33vw;
width: 100%;
color: #999;
font-size: 0.75rem;
margin: .5rem 0;
letter-spacing: 0.01rem;
text-align: center;
line-height: 1.25;
}

.col-50 figcaption,
.grey figcaption,
.black figcaption {
  position: relative;
  width: 100%;
    }

  
.photographer:before {
  content: "©";
  padding-right: 3px;
}

.proj_info {
min-height: 25vh;
float: left;
width: calc(100vw - 2rem);
margin: .5rem 1rem;
padding-top: .75rem;
border-top: solid 1px #e5e5e5;
margin-top: 1rem;
}

.text_info {
  display: block;
  float: left;
  width: 50%;
  float: left;
  clear: left;
  margin-bottom: 1.25rem;
}
.tex_info p {
    padding-bottom: 1rem;
}

.bottom {
  color: #b0b0b0;
  float: left;
  padding: 1rem;
  min-height: 9rem;
  width: 100%;
  min-height: 25vh;
  display: flex;
  align-items: flex-end;
}

.tec_info {
  display: block;
  width: 50%;
  float: left;
}

.tec_info p{
  font-size: .85rem;
line-height: 1.2rem;
padding: 0px;
padding-right: 1rem;
max-width: 40rem;

}
.related {
  width: 25%;
  padding-top: 1rem;
  float: left;
  position: relative;
  bottom: 0;

}
.related ul {
  display: inline;
}
.related li{
  list-style: none;
  float: left;
  padding-right: .15rem;
}
.related li:not(:last-child):after {
  margin-left: -.25rem;
  content: ',';
}

.page_nav {
  float: left;
  text-align: right;
  padding-top: 1rem;
  width: 25%
}

.bottom a {
color: #b0b0b0;
position: relative;
-webkit-transition: none false false;
-moz-transition: none false false false;
-o-transition: none false false false;
transition: none;
}

.bottom a::after {
content: "";
position: absolute;
bottom: -1px;
left: 0px;
right: 0px;
margin: 0px auto;
width: 0px;
border-bottom: 1px solid #b0b0b0;
}

.bottom a:hover {
border-color: transparent;
transition: 0.5s;
}

.bottom a:hover:after {
 width:100%;
 -webkit-transition:width 350ms ease-out;
 -moz-transition:width 350ms ease-out false;
 -o-transition:width 350ms ease-out false;
 transition:width 350ms ease-out;
 -webkit-transition-delay:50ms;
 -moz-transition-delay:50ms;
 -o-transition-delay:50ms;
 transition-delay:50ms
}

#nav-info {
position: -webkit-sticky;
position: sticky;
display: flex;
z-index: 2;
bottom: 1rem;
transition: bottom 0.3s;
z-index: 5;
mix-blend-mode: difference;
padding: 0 1rem;
line-height: 1;
-webkit-transition: bottom 0.3s;
transition: bottom 0.3s ;
}

#nav-info a:hover {
mix-blend-mode: normal;
}

.top {
width: 100%;
width: 50%;
text-align: right;
float: right;

}
.top :hover{
color: #000;
transition: 0.2s;
}

.txt {
width: 100%;
width: 50%;
text-align: left;
color: #b0b0b0;
}
.txt :hover{
color: #000;
transition: 0.2s;
}


/* Layout - Size */

.col-50 {
  width: 50% !important;
  height: auto !important;
  float: left;
  display: flex !important;
}

.col-50 figure {
  vertical-align: middle;
  position: relative;
display: flex !important;
  justify-content: center;
  align-items: center;
  
}
.col-50 video {
  max-width: 100% !important;
  margin: auto;
}
.col-50 figure img {
  max-width: 100% !important; 
}

    
.col-33 {
  width: 33.33% !important;
  height: auto !important;
  float: left;
  margin-bottom: 3rem;
  margin: 0 !important;
  list-style: none;
  padding-left: 1rem;
  padding-right: 1rem;
}

.col-33 figure img {
width: auto !important;
max-width: 100% !important;
}


.small video {
  width: 50vw;
  }
  

/* Layout - Position */

.right {
  text-align: right !important;
  float: right;
}

.left {
  text-align: left !important;
  float: left;
}

.center {
display: inline !important;
padding-left: 0.5rem;
padding-right: 0.5rem;
width: auto !important;

}
.center img {
  max-width: calc(50vw - 3rem);
}


/*  Layout - Format */


.album-cover .fullscreen {
  margin: 0 !important;
}
.fullscreen {
  width: 100vw !important;
  float: left;
  margin-bottom: 3rem;
  display: block;
  padding: 0 !important;
}
.fullscreen figure {
  vertical-align: middle;
    height: 100vh;
    width: 100vw;
}

.fullscreen video {
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fullscreen figure img {
  object-fit: cover;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  max-height: 100vh;
  max-width: 100vw;

}
.poster {
  width: 100vw !important;
  height: 100%!important;
  float: left;
  margin-bottom: 3rem;
  display: block;
  margin-left: -.5rem;
  padding: 0 !important;
}
.poster figure {
  vertical-align: middle;
    height: 100%;
    width: 50vw;
}

.poster figure img {
  object-fit: cover;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  max-width: 75vw;
  max-height: 100%;
}


.video-window {
width: 100%;
display: flex;
margin: auto;
margin-left: -.5rem !important;
height: 100%; 
}

.video-window video {
  max-width: 87.5vw !important;
  max-height: 87.5vh;
  width: auto;
  margin: auto;
}

.video_medium video {
max-width: 90vw !important;
max-height: 90vh !important;
transform: translateY(-15%);
}

.video_small video {
height: 55vh !important;
transform: translateY(-15%);
}

.small figure {
    max-width: 70vw;
}

.small img {
  max-width: 100%;
  max-height: 50vh !important;
  width: auto;
  display: block;
  margin: auto;
}

.phone figure {
  height: auto !important;
}
.phone figure img,
.phone video {
 max-height: 75vh;
 max-width: 55vh !important;
 border-radius: 5px;
}

.browser figure {
  height: auto !important;
 }

.browser figure img {
  border-radius: 6px;
 }

 .cover  {
  padding: 0 !important;
 }
 .cover figure {
  height: calc(100vh - 2rem) !important;
  width: 100%;
  padding: 1rem !important;
  display: block !important;
  justify-content: center;
  align-items: center;
 }

 .cover img {
  min-height: 100% !important;
  min-width: 100% !important;
  object-fit: cover;
 }

/* Images Layout - Color */
 
.black {
  background-color: #000;
  color: #f2f2ff;
  height: 100vh !important;
}

.black video {

  border: solid .5px #999;
  border-radius: 3px;
}

.grey {
  height: 100vh !important;
  background-color: #f5f5f7;
}

.multiply img {
  mix-blend-mode: multiply;
}
.invert img {
  mix-blend-mode: difference;
}


/* Media Querie - <Mobile */


@media screen and (max-width: 30rem) {
  .tec_info { width: 100%;}
  .bottom { display: block; padding: 1rem 1rem;  }
  .page_nav { width: 100%; text-align: center; padding-top: 3rem; }
  .album-gallery li { width: 100% !important; padding: 1rem;}
  .text_info { width: 100%; margin: 0; }
  .related { width: 100%; display: none; }
  .album-text { margin: 1rem auto 1rem; }
  .header .tags { display: none; }
  .header { padding-bottom: 0; }
  .header .logo { width: auto; }
  .fullscreen { width: auto !important; padding: 0rem !important; margin: 0 !important;}
  .col-50 {min-height: 65vw !important; width: 100%;}
  .fullscreen figure { height: auto; width: 100%;}
  figcaption { text-align: left; }
  .txt {visibility: hidden;}
  #back {display: none;}
  .gallery { pointer-events: none; cursor: default;}
  .poster figure {width: auto}
  .right figure {margin-right: auto !important;}
  .left figure {margin-left: auto !important;}
  .small figure {max-width: 100%;}
  .col-50 { margin:0;}
  .small img { width:100%;}
  .phone figure img, .phone video {max-width: 100% !important;}
  .small video, .fullscreen video {max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; object-fit: cover;}
  .video-window {margin:0 !important;}
  .video-container video {max-width: 100%;}

}

  @media screen and (max-width: 50rem) {
  .album-gallery li { height: auto; width: 100%;}
  .album-gallery img { max-width: 100%;}
}