/*

Update: 03. 05. 2025

[Style Stylesheet]

––>	Creator: Joshua Bankes
    Studio: Bankes Design
    Copyright 2022+

*/


/* ************** [ Basic HTML ] ************** */
 :root {
    /* ---  Variables: Colors  --- */
 --wht: white;
 --blk: black;
 --dark-gray-bg: rgb(30, 26, 27);
 --darkest-gray: rgb(60, 56, 57);
 --darker-gray: rgb(85, 81, 82);
 --dark-gray: rgb(115, 111, 112);
 --med-gray: rgb(145, 141, 142);
 --light-gray: rgb(185, 181, 182);
}


    /* ---  Variables: Global  --- */
#dark,
.dark {
  background-color: var(--blk);
  border-color: var(--dark-gray);
}

#light,
.light {
  border-color: var(--light-gray);
}

#black,
.black {
  background-color: var(--blk);
}

/* .white {
  background-color: var(--wht);
} */


  /* ---  Basic HTML  --- */
#wrapper,
#wrapper-blk,
#wrapper-dark,
#wrapper-light {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 90rem; /* 1440px / 16px = 90 */
  margin: 0 auto;
}

#wrapper {
  /* background-color: var(--wht); */
}

#wrapper-dark {
  background-color: var(--blk);
}

#wrapper-light {
  background-color: var(--light-gray);
}

body {
  /* background-color: var(--blk); */
  
  /* background-color: rgba(0 0 0 / 100%); */
}

header {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  height: 3.75rem; /* 60px / 16px = 3.75 */
  position: -webkit-sticky; /* Safari */
  position: sticky;
  margin: 0;
  padding: 0 20px;
  top: 0;
  z-index: 1;
  background-color: rgba(255 255 255 / 100%);
}

aside {
  /* background-color: orange; */
  margin: 0 20px;
}

main {
  margin: 0 20px;
  padding-bottom: 1rem;
}

footer {
  border-top: 1px solid;
  border-color: var(--blk);
  /* background-color: rgba(255 255 255 / 100%); /* var(--wht); */
}

img {
  max-width: 100%;
}

img.hover-tint {
  transition: 0.3s;
}
  
.hover-tint:hover {
  opacity: 0.6;
}



/* ••••••••• [ Navigation ] •••••••• */

#container-logo {
  grid-column: 1 / span 1;
  height: 1.875rem; /* 30px / 16px = 1.875 */
  margin: 0.875rem 0; /* 12px / 16px = 0.75 */
}

img.menu-logo {
  height: 100%; /* 30px / 16px = 1.875 */
  margin-left: -2vmin;
}

/* logo for curtain navigation */
.overlay-nav-logo {
  padding-top: calc(0.3125rem + 5px + 1px);
}

#container-openIcon,
#dt-container-openIcon {
  width: 1.875rem; /*30px / 16px = 1.875 */
  height: 2.75rem; /* 20px / 16px = 1.25 */
  overflow: hidden;
}

/* Mobile Container - Open Icon */
#container-openIcon {
  grid-column: 8 / span 1;
  /* float: right; */
  margin: auto 0;
  padding: 0.9375rem 0 0 0; /* 15px - 2px / 16px = 0.8125 | 55px / 16px = 3.4375 */
}

/* Desktop Container - Open Icon */
#dt-container-openIcon {
  display: none;
}

/* Open Icon */
.openIcon,
.openIcon-white,
.openIcon-dark {
  max-width: 1.875em; /*30px / 16px = 1.875 */
  height: 3px;
  margin: 4px 0;
}

.openIcon {
  background-color: var(--blk);
}

.openIcon-white {
  background-color: var(--wht);
}

.openIcon-dark {
  background-color: var(--dark-gray);
}



/* **** CURTAIN OVERLAY **** */
/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */    
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 1);
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.0s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 16%; 
  margin: 0 1.25rem;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

.curtain-col-one,
ul.curtain-col-one {
  grid-column: 1 / span 1;
}

.curtain-col-two,
ul.curtain-col-two {
  grid-column: 3 / span 3;
}

.curtain-col-three,
ul.curtain-col-three {
  grid-column: 6 / span 5;
}

.overlay-info {
  text-align: left; 
  margin-top: 40%;
  /* border-top: 3px solid rgb(180, 180, 180); */
}

/* The navigation links inside the overlay */
.overlay a {
  text-decoration: none;
  color: white;
  display: block; /* Display block instead of inline */
  transition: 0.0s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover,
.overlay a:focus {
  opacity: 0.85;
  text-decoration: none;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 0.05em; /* 5px / 19px = 0.3125 */
  right: 5vw; /* 58px / 16px = 3.625 */
  font-size: 2.625em; /* 42px / 16px = 2.625 */
  color: white;
}

.closebtn  a:hover, 
.closebtn a:focus {
    color: white;
}




/* ************** [ Home ] ************** */
.m-blk-bg {
  background-color: rgba(0 0 0 / 100%);
  margin: 5.33vmin -1.25rem 0 -1.25rem;
}




/* ************** [ Main Content ] ************** */

#container-home-projects {
  background-color: white;
  border-top: 1px solid;
  margin: 0; /* 20px / 16px = 1.25 */
}

.button-project-container {
  position: relative;
  width: 100%;
}

img.button-project {
  display: block;
  width: 100%;
  height: auto;
  /* opacity: 0.83; */
}

.button-project-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(0 0 0 / 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.button-project-container:hover .button-project-overlay {
  opacity: 1;
}

.see-more {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 29vmin;
  /* border: 1px solid white; */
  opacity: 1;
  transition: 0.3s;
  background-color: black;
}

.see-more:hover {
  opacity: 0.6;
}


  /* ****** [ Main - Layouts ] ****** */
#layout-A,
#layout-B,
#layout-C,
#layout-D,
#layout-E,
#layout-F,
#m-layout-D,
#m-layout-E,
#m-layout-F {
  margin-top: 1.5rem;
}

#layout-D,
#layout-E,
#layout-F {
  display: none;
}

#layout-A,
#layout-B,
#layout-C,
#m-layout-D,
#m-layout-E,
#m-layout-F,
.section-break-rule {
  border-bottom: 8px solid;
}


/* ••••••••• [ Home ] •••••••• */



/* ************** [ PROJECTS ] ************** */

/* ••••••••• [ Project + Publications Desktop Credits ] •••••••• */
#container-dt-poster-credits,
#container-pub {
  height: 0;
  visibility: hidden;
}

  /* ****** [ Projects ] ****** */
#container-projects {
  margin: 0; /* 20px / 16px = 1.25 */
}
  
img,
img.poster {
  display: block;
  width: 100%;
  height: auto;
}

.poster-container {
  position: relative;
  width: 100%;
}

.m-poster-credits-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: rgba(0,0,0,0.6);
}

.poster-container:hover .m-poster-credits-overlay {
  opacity: 1;
}


  /* [ Project Containers ] */

/* [ General Project Containers ] */
#container-projects,
#container-projects-A,
#container-projects-B,
#container-projects-C,
#container-projects-D,
#container-projects-E,
#container-projects-F {
  margin: 0;
  padding: 0;
}


/* --- [ Unit Containers ] --- */
.container-project-A-unit,
.container-project-B-unit,
.container-project-C-unit,
.container-project-D-unit,
.container-project-E-unit,
.container-project-F-unit {
  grid-column: 1 / span 1;
  margin: 0;
  padding: 0;
}

.top-rule-C {
  display: block;
  height: 0.375vmin;
  width: 42%;
  margin: 0 28.5715% 0 28.5715%;
  background-color: white;
}

/* --- [ Aside Containers ] --- */
.container-aside-A,
.container-aside-B,
.container-aside-E,
.container-aside-F {
  display: none;
}

.container-aside-C,
.container-aside-D {
  margin: 14vmin 0 2.5vmin 0;
  padding: 0 20px;
}

/* --- [ Mobile - Aside Containers ] --- */
.m-container-aside-B,
.m-container-aside-E,
.m-container-aside-F {
  margin: 14vmin 0 2.5vmin 0;
  padding: 0 20px;
}

.m-container-aside-B-special {
  margin: 4vmin 1.25rem 2.5vmin 1.25rem; /* 20px / 16px = 1.25 */
  padding: 0 2px;
}



/* --- [ Publications ] --- */
#m-container-pub,
#m-container-services,
#container-services {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: 0 0 3rem 0;
  /* border-top: 1px solid black; */
  /* background-color: steelblue; */
}

.m-container-unit-publications-head,
.m-container-services-head,
.container-services-head {
  grid-column: 4 / span 2;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid black;
}

.m-container-unit-publications,
.m-container-unit-services,
.container-unit-services {
  grid-column: 3 / span 3;
}

.m-container-services-top-rule {
  border-bottom: 5px solid;
}

.m-container-services-head-sb {
  padding-top: 5vmin;
}




/* ************** [ FOOTER ] ************** */
#container-footer {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  padding: 1rem 0 1rem 0;
}

.footer-white {
  background-color: var(--wht);
}

/*
#container-footer-dark {
  background-color: var(--dark-gray);
}
*/

#container-contact-address,
#container-contact-mail {
  grid-column: 1 / span 6;
  padding-left: 1.25rem;
  /* background-color: aqua; */
}

#container-sm {
  grid-column: 9 / span 2;
  margin: 0;
  /* background-color: darkcyan; */
}

#container-copyright {
  grid-column: 1 / span 10;
  padding-top: 2rem;
  padding-left: 1.25rem;
  /* background-color: slateblue; */
}

footer.dark {
  /* color: magenta; */
  /* background-color: orange; */
  border-color: var(--dark-gray);
}

img.footer-logo {
  grid-column: 1 / span 1;
  max-height: 7.8125vmin;
}

.sm-icon-A,
.sm-icon-B {
  max-width: 7vmin; /* 34px */
  display: inline-block;
}

.sm-icon-A {
  padding-right: 1.5vmin;
}

.copyright-A,
.copyright-B,
.copyright-C,
.copyright-D,
.copyright-E, {
  /* grid-column: 1 / span 10; */
  padding-top: 1rem;
  padding-left: 0;
  margin-left: 0;
}



/* ************** [ Halftone / Dots ] ************** */

/* Used for Background */
.halftone-A { /* gridded dots */
--dot-size: 38.11vmin; /* 8.93125rem | 142.9px */
--dot-container-size: 70.4vmin; /* 16.5rem | 264px */
--dot-container-position: calc(var(--dot-container-size) / 2);

background-image: radial-gradient(circle at center, rgba(255 255 255 / 100%) var(--dot-size), transparent 0);
background-size: var(--dot-container-size) var(--dot-container-size);
background-position: 0 0,
  var(--dot-container-position) var(--dot-container-position);
}

/* Used for Background */
.halftone-B { /* gridded dots */
  --dot-size: 0.1875vmin; /* 0.05125rem | 0.82px */
  --dot-container-size: 1.3vmin; /* 0.5rem | 8px */
  --dot-container-position: calc(var(--dot-container-size) / 2); /* --bgPosition: calc(var(--bgSize) / 2); */
  
  background-image: radial-gradient(circle at center, rgba(0 0 0 / 100%) var(--dot-size), transparent 0);
  background-size: var(--dot-container-size) var(--dot-container-size);
  background-position: 0 0,
    var(--dot-container-position) var(--dot-container-position);
}

/* Used for Wrapper */
.halftone-C { /* gridded dots */
  --dot-size: 15.33vmin; /* 3.593125rem | 57.49px */
  --dot-container-size: 34.13vmin; /* 8rem | 128px */
  --dot-container-position: calc(var(--dot-container-size) / 2);

  background-image: radial-gradient(circle at center, rgba(255 255 255 / 34%) var(--dot-size), transparent 0);
  background-size: var(--dot-container-size) var(--dot-container-size);
  background-position: 0 0,
    var(--dot-container-position) var(--dot-container-position);
}

/* Used for Aside */
.halftone-D { /* gridded dots */
  --dot-size: 165px; /* 9.83125rem | 157.3px  |  41.95vmin */
  --dot-container-size: 243px; /* 15rem | 240px  | 64vmin */
  --dot-container-position: calc(var(--dot-container-size) / 2);

  background-image: radial-gradient(circle at center, rgba(0 0 0 / 100%) var(--dot-size), transparent 0);
  background-size: var(--dot-container-size) var(--dot-container-size);
  background-position: 0 0,
    var(--dot-container-position) var(--dot-container-position);
}

/* Used for Image Hover */
.halftone-E { /* gridded dots */
  --dot-size: 0.18vmin; /* 0.043125rem | 0.69px */
  --dot-container-size: 1.6vmin; /* 0.375rem | 6px */
  --dot-container-position: calc(var(--dot-container-size) / 2);

  background-image: radial-gradient(circle at center, rgba(255 255 255 / 55%) var(--dot-size), transparent 0);
  background-size: var(--dot-container-size) var(--dot-container-size);
  background-position: 0 0,
    var(--dot-container-position) var(--dot-container-position);
}







/* ******************************************
************** [ Media Queries ] ************** 
****************************************** */

/*  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
When the width of the screen is more than 740 pixels, change to TABLET layout 
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *  */
@media (min-width: 46.25rem) { /* 740 / 16 = 46.25 */

#wrapper,
#wrapper-dark {
  grid-template-columns: repeat(18, 1fr);
  /* background-color: lightblue; */
}

header {
  grid-column: 1 / span 2;
  display: inline-grid;
  grid-template-columns: repeat(6, 1fr);
  border-bottom: 0;
  height: 40.1875vmin;
  padding: 0;
  margin: 0;
  background-color: transparent;
  /* border: 1px solid orange; */
}

main {
  grid-column: 3 / span 8;
  margin: 0;
  padding-bottom: 0;
  /* background-color: lightgreen; */
}

main.home {
  grid-column: 4 / span 11;
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  margin: 0;
  /* background-color: lightgreen; */
}

aside {
  grid-column: 11 / span 3;
  margin: 0;
  /* background-color: lightgoldenrodyellow; */
}

#container-home-projects {
  grid-column: 14 / span 5;
  margin: 0;
  margin-top: -43vmin;
  /* background-color: lightgrey; */
}

footer {
  grid-column: 1 / span 18;
}


/* ••••••••• [ Navigation ] •••••••• */

/* **** CURTAIN OVERLAY **** */
/* Position the content inside the overlay */
.overlay-content {
  top: 8%;
  grid-template-columns: repeat(18, 1fr);
  margin: 0; /* clear */
}

.curtain-col-one,
ul.curtain-col-one {
  grid-column: 1 / span 1;
}

ul.curtain-col-two {
  grid-column: 3 / span 3;
}

ul.curtain-col-three {
  grid-column: 6 / span 5;
}

/* logo for curtain navigation */
.overlay-nav-logo {
  /* grid-column: 1 / span 1; */
  width: 77%;
  padding-left: 60%;
}

/* Top Navigation */
#container-logo {
  grid-column: 2 / span 3;
  height: 5.75vmin; /* 30px / 16px = 1.875 */
  margin-top: 16.25vmin;
  display: inline-grid;
  position: relative;
}

img.menu-logo {
  margin-left: 0;
  /* position: absolute; */
  /* top: 50%; */
  /* left: 50%; */
  /* transform: translate(-50%, -50%); */
}

/* Mobile Container - Open Icon */
#container-openIcon {
  display: none;
}

/* Desktop Container - Open Icon */
#dt-container-openIcon {
  display: inline-block;
  grid-column: 1 / span  1;
  width: 1.875em; /*30px / 16px = 1.875 */
  height: 2.25em; /* 20px / 16px = 1.25 */
  overflow: hidden;
  float: left;
  padding: 1.5vmin 0 0 0.75vmin;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Button – See More */
.see-more {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 9vmin;
  /* border: 0.75px solid white; */
  opacity: 1;
  transition: 0.3s;
  background-color: black;
}


/* ************** [ Home ] ************** */
.description-home-sans-serif {
  grid-column: 3 / span 5;
}

.m-blk-bg {
  background-color: transparent;
  margin: 0; /* clear */
}




/* ************ [ Main - Layouts ] ************ */
#layout-A,
#layout-B,
#layout-C {
  border-bottom: 0px solid black; /* clear rule */
}
 
#layout-A,
#layout-B,
#layout-C,
#layout-D,
#layout-E,
#layout-F {
  margin-top: 16.5vmin;
}

#layout-A {
  grid-column: 6 / span 8;
}

#layout-E {
  grid-column: 8 / span 8;
}

#layout-D,
#layout-F {
  grid-column: 11 / span 8;
}

#layout-D,
#layout-E,
#layout-F {
  padding-left: 2px;
}

#layout-D,
#layout-E,
#layout-F {
  display: inline-block;
}

#m-layout-D,
#m-layout-E,
#m-layout-F {
  display: none;
}


/* ••••••••• [ Home ] •••••••• */

.container-tagline {
  grid-column: 1 / span 7;
  /* background-color: orange; */
}

.container-description-home {
  grid-column: 6 / span 5;
  /* background-color: grey; */
}

aside.container-aside-home {
  grid-column: 3 / span 3;
  border-top: 1px solid;
  /* background-color: pink; */
}


  /* ************ [ Projects ] ************ */

/* [ Project Containers ] */
#container-projects,
#container-projects-A,
#container-projects-B,
#container-projects-C,
#container-projects-D,
#container-projects-E,
#container-projects-F {
  margin: 0;
  padding: 0;
  border-top: 0px solid black; /* clear mobile rule */
}

#container-projects-A {
  grid-column: 14 / span 5;
}

#container-projects-B,
#container-projects-C {
  grid-column: 11 / span 8;
}

#container-projects-E {
  grid-column: 3 / span 5;
}

#container-projects-D,
#container-projects-F {
  grid-column: 3 / span 8;
}


/* --- [ Description Title Containers ] --- */
#container-description-title {
  display: grid;
  grid-template-columns: repeat(8, 1fr);}
  
div.container-description-serif {
		grid-column: 1 / span 8;
	}

div.container-description-sans-serif {
		display: grid;
		grid-template-columns: repeat(8, 1fr);
	}

h2.description-title {
  grid-column: 5 / span 4;
}

h2.description-title-left {
  grid-column: 1 / span 5;
}

p.description-sans-serif {
  grid-column: 3 / span 6;
}


/* --- [ Unit Containers ] --- */
.container-project-A-unit {
  
}

/* space before of first projects */
.container-project-A-unit:first-of-type,
.container-project-B-unit:first-of-type,
.container-project-D-unit:first-of-type,
.container-project-E-unit:first-of-type {
  margin-top: 4.25vmin; /* 68px / 16px = 4.25 */
}

.container-project-B-unit {
  grid-column: 1 / span 8;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.container-project-C-unit,
.container-project-D-unit,
.container-project-F-unit {
  grid-column: 1 / span 8;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.container-project-E-unit {
  grid-column: 1 / span 7;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}

.container-project-D-image {
  grid-column: 4/ span 7;
}

.container-project-E-image {
  grid-column: 1 / span 1;
}

.container-project-F-image {
  grid-column: 1 / span 5;
}



/* --- [ Mobile - Aside Containers ] --- */
.m-container-aside-B,
.m-container-aside-B-special,
.m-container-aside-E,
.m-container-aside-F {
  display: none;
}


/* --- [ Aside Containers ] --- */
.container-aside-A {
  display: grid;
  grid-column: 3 / span 3;
}

.container-aside-B {
  grid-column: 6 / span 3;
}

.container-aside-C,
.container-aside-D {
  grid-column: 1 / span 3;
}

.container-aside-C,
.container-aside-D {
  margin: 0;
  padding: 0;
}

.container-aside-E {
  grid-column: 16 / span 3;
}

.container-aside-E:first-of-type {
  margin-top: 4.25vmin;
}

.container-aside-F {
  grid-column: 8 / span 3;
}

.container-aside-B,
.container-aside-E,
.container-aside-F {
  display: inline-block;
}

.bp-first {
  margin-top: 5.25rem;
}




/* --- [ Aside Unit Containers ] --- */
.container-aside-A-unit {
  max-height: calc(100vh / 16); /* 16 posters | 449px */
  border-top: 1px solid;
}

/* space before, for top of page */
.container-aside-A-unit:first-of-type {
  margin-top: 4.25vmin; /* 68px / 16px = 4.25 */
}

.container-aside-E-unit {
  max-height: calc(100% / 22); /* 22 images | 100 / 22 = 4.5454545 */
}

.container-aside-E-unitx2 {
  height: calc(calc(100% / 22) * 2); /* 22 images | 100 / 22 = 4.5454545 */
}

.container-aside-E-unitx3 {
  height: calc(calc(100% / 22) * 3); /* 22 images | 100 / 22 = 4.5454545 */
}

.container-aside-E-unitx4 {
 height: calc(calc(100% / 22) * 4); /* 22 images | 100 / 22 = 4.5454545 */
}

.container-aside-E-unitx5 {
 height: calc(calc(100% / 22) * 5); /* 22 images | 100 / 22 = 4.5454545 */
}


/* .container-aside-E-unit,
.container-aside-E-unitx2,
.container-aside-E-unitx3,
.container-aside-E-unitx4,
.container-aside-E-unitx5, */
.container-aside-A-unit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}



/* --- [ Publications ] --- */
#container-pub,
#container-services {
  visibility: visible;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border-top: 2px solid; 
}

.container-unit-publications-head {
  grid-column: 6 / span 3;
  margin-bottom: 1vmin;
  padding-bottom: 0.5vmin;
  border-bottom: 1px solid black;
}

.container-services-head {
  grid-column: 6 / span 3;
  margin-bottom: 1vmin;
  padding-bottom: 0.5vmin;
}

.container-unit-publications,
.container-unit-services {
  grid-column: 5 / span 4;
}

.m-container-services-head-sb {
  padding-top: 0vmin; /* clear */
}

#m-container-pub {
  display: none;
}


  /* ************  [ Images ] ************  */
.image-B {
  grid-column: 1 / span 5;
  margin-bottom:0;
}

.image-C {
  grid-column: 4 / span 6;
}

.top-rule-C {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-column: 2 / span 7;
  height: 0.5px;
  margin: -0.5px 0 0 0;
  padding: 0;
  background-color: black;
}


/* ************** [ FOOTER ] ************** */
#container-footer {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  padding: 1rem 0;
}

#container-contact-address {
  grid-column: 3 / span 4;
  padding-left: 0;
}

#container-contact-mail {
  grid-column: 8 / span 5;
  padding-left: 0;
}

#container-sm {
  grid-column: 16 / span 2;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

#container-copyright {
  grid-column: 1 / span 18;
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  padding-left: 0; /* clear */e;
}

.sm-icon-A,
.sm-icon-B {
  max-width: 2.75vmin; /* 34px */
  display: inline-block;
}

.sm-icon-A {
  grid-column: 1 / span 1;
}

.sm-icon-B {
  grid-column: 2 / span 1;
}

.copyright-A,
.copyright-B,
.copyright-C,
.copyright-D,
.copyright-E,
.copyright-E-dark {
  padding-top: 1vmin;
  padding-left: 0;
  margin-left: 0;
}

.copyright-A {
  grid-column: 3 / span 8;
}

/* holiday cards */
.copyright-B {
  grid-column: 3 / span 8;
}

/* bankes photography + announcements */
.copyright-C {
  grid-column: 6 / span 8;
}

/* lcw + slick */
.copyright-D {
  grid-column: 11 / span 8;
}

/* pyo */
.copyright-E,
.copyright-E-dark {
  grid-column: 14 / span 5;
}



/* ************** [ Halftone / Dots ] ************** */

/* Used for Background */
.halftone-A { /* gridded dots */
--dot-size: 26.49vmin; /* 12.25rem | 196px */
--dot-container-size: 47.57vmin; /* 22rem | 352px */
}

/* Used for Background */
.halftone-B { /* gridded dots */
  --dot-size: 0.065vmin; /* 0.049375rem | 0.79px */
  --dot-container-size: 0.3125vmin; /* 0.56315rem | 9px */
}

/* Used for Wrapper */
.halftone-C { /* gridded dots */
  --dot-size: 9.58vmin; /* 4.43125rem | 70.9px */
  --dot-container-size: 21.08vmin; /* 9.75rem | 156px */
}

/* Used for Aside */
.halftone-D { /* gridded dots */
  --dot-size: 7.16vmin; /* 53px */
  --dot-container-size: 10.68vmin; /* 4.8125rem | 79px */
}

/* Used for Image Hover */
.halftone-E { /* gridded dots */
  --dot-size: 0.065vmin; /* 0.04125rem | 0.66px */
  --dot-container-size: 0.5vmin; /* 0.3125rem | 5px */
}






/*  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
When the width of the screen is more than 1200 pixels, change to DESKTOP layout 
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *  */
@media (min-width: 75rem) { /* 1200 / 16 = 75 */

#wrapper,
#wrapper-dark {
  grid-template-columns: repeat(29, 1fr);
}

header {
  grid-column: 1 / span 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 24.3125rem;
  /* background-color: lightcyan; */
}

main.home {
  grid-column: 4 / span 18;
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  margin: 0;
  /* background-color: lightgreen; */
}

main {
  grid-column: 4 / span 13;
  margin: 0;
  /* background-color: lightgreen; */
}

aside {
  grid-column: 17 / span 5;
  margin: 0;
  /* background-color: lightgoldenrodyellow; */
}

.description-home-sans-serif {
  grid-column: 5 / span 9;
  padding: 0 0 26rem 0;
}

#container-home-projects {
  grid-column: 22/ span 8;
  margin: 0;
  margin-top: -44rem;
  /* background-color: lightgrey; */
}

footer {
  grid-column: 1 / span 30;
  /* background-color: lightseagreen; */
}

  /* ****** [ Main - Layouts ] ****** */
#layout-A,
#layout-B,
#layout-C,
#layout-D,
#layout-E,
#layout-F {
  margin-top: 16.079125rem;
}

#layout-A {
  grid-column: 9 / span 13;
}

#layout-E {
  grid-column: 12 / span 13;
}

#layout-D,
#layout-F {
  grid-column: 17 / span 14;
}

#layout-D,
#layout-E,
#layout-F {
  display: inline-block;
  padding-left: 2px;
}

#m-layout-D,
#m-layout-E,
#m-layout-F {
  display: none;
}

.sticky-A {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: -40rem;
}

.sticky-B,
.sticky-D,
.sticky-E {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 3rem;
}

/* ••••••••• [ Navigation ] •••••••• */

/* **** CURTAIN OVERLAY **** */
/* Position the content inside the overlay */
.overlay-content {
  top: 8%;
  max-width: 90em; /* 1440px / 16px = 90 */
  grid-template-columns: repeat(29, 1fr);
  margin: 0 auto; /* clear */
}

.curtain-col-one,
ul.curtain-col-one {
  grid-column: 2 / span 1;
}

ul.curtain-col-two {
  grid-column: 4 / span 2;
}

ul.curtain-col-thee {
  grid-column: 10 / span 5;
}

/* logo for curtain navigation */
.overlay-nav-logo {
  grid-column: 1 / span 1;
  width: 64%;
  padding-left: 1.25rem;
}


/* top Navigation */
#container-logo {
  grid-column: 2 / span 1;
  margin-top: 14.25rem;
}

img.menu-logo {
  right: 50%;
  height: 4.625rem; /* 96px / 16px = 6 */
}

/* Desktop Container - Open Icon */
#dt-container-openIcon {
  padding: 7% 0 0 0;
  padding-top: 1.25rem;
}

.see-more {
  width: 6.875rem; /* 110px / 16px = 6.875 */
}


/* ••••••••• [ Home ] •••••••• */

.container-tagline {
  grid-column: 1 / span 10;
  /* background-color: orange; */
}

.container-description-home {
  grid-column: 11 / span 8;
  /* background-color: grey; */
}

aside.container-aside-home {
  grid-column: 6 / span 3;
  border-top: 1px solid;
  /* background-color: pink; */
}


/* ************** [ PROJECTS ] ************** */

/* --- [ Descriptions ] --- */
/* DEPRECATED :: now = id/layout_A */
main.description-dt-poster {
  grid-column: 6 / span 5;
  margin: 0;
  /* background-color: pink; */
}



  /* ****** [ Projects ] ****** */

/* [ Project Containers ] */
#container-projects,
#container-projects-A,
#container-projects-B,
#container-projects-C,
#container-projects-D,
#container-projects-E,
#container-projects-F {
  margin: 0;
  padding: 0;
}


#container-projects,
#container-projects-A {
  grid-column: 22 / span 8;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}

#container-projects-B,
#container-projects-C {
  grid-column: 17 / span 14;
}

#container-projects-E {
  grid-column: 4 / span 8;
}

#container-projects-D,
#container-projects-F {
  grid-column: 4 / span 13;
}



/* --- [ Aside Unit Containers ] --- */
.container-aside-A-unit {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

/* space before, for top of page */
.container-aside-A-unit:first-of-type {
  margin-top: 4.25rem; /* 68px / 16px = 4.25 */
}



/* --- [ Description Title Containers ] --- */
#container-description-title {
  grid-column: 1 / span 13;
  display: grid;
  grid-template-columns: repeat(13, 1fr);
}

div.container-description-serif {
  grid-column: 1 / span 13;
}

div.container-description-sans-serif {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
}

h2.description-title {
  grid-column: 8 / span 6;
}

h2.description-title-left {
  grid-column: 1 / span 3;
}

p.description-sans-serif {
  grid-column: 5 / span 9;
}



/* --- [ Unit Containers ] --- */
.container-project-A-unit {
  grid-column: 1 / span 1;
}

/* space before of first projects */
.container-project-A-unit:first-of-type,
.container-project-B-unit:first-of-type,
.container-project-D-unit:first-of-type,
.container-project-E-unit:first-of-type {
  margin-top: 4.25rem; /* 68px / 16px = 4.25 */
}

.container-project-B-unit,
.container-project-C-unit,
.container-project-D-unit,
.container-project-F-unit {
  grid-column: 1 / span 13;
  display: grid;
  grid-template-columns: repeat(13, 1fr);
}

.container-project-E-unit {
  grid-column: 1 / span 7;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}

.container-project-D-image {
  grid-column: 6 / span 8;
}

.container-project-E-image {
  grid-column: 1 / span 1;
}

.container-project-F-image {
  grid-column: 1 / span 8;
}



/* --- [ Mobile - Aside Containers ] --- */
.m-container-aside-B,
.m-container-aside-E,
.m-container-aside-F {
  display: none;
}


/* --- [ Aside Containers ] --- */
.container-aside-A {
  visibility: visible;
  grid-column: 4 / span 5;
}

.container-aside-B {
  grid-column: 9 / span 5;
}

.container-aside-C,
.container-aside-D {
  grid-column: 1 / span 5;
}

.container-aside-C,
.container-aside-D {
  margin: 0;
}

.container-aside-E {
  grid-column: 25 / span 5;
}

.container-aside-F {
  grid-column: 8 / span 3;
}

.container-aside-B,
.container-aside-E,
.container-aside-F {
  display: inline-block;
}

.container-aside-E:first-of-type {
  margin-top: 4.25rem; /* 68px / 16px = 4.25 */
}

.bp-first {
  margin-top: 5.25rem;
}



  /* ****** [ Images ] ****** */
.image-B {
  grid-column: 1 / span 8;
  margin-bottom:0;
}

.image-C {
  grid-column: 6 / span 8;
}

.top-rule-C {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-column: 3 / span 10;
  height: 0.5px;
  margin: -0.5px 0 0 0;
  padding: 0;
  background-color: black;
}



/* ••••••••• [ Project Desktop Credits ] •••••••• */
/* DEPRECATED :: now = container-aside-A */
#container-dt-poster-credits {
  visibility: visible;
  grid-column: 3 / span 3;
  /* background-color: seashell; */
}

/* DEPRECATED :: now = container-aside-A-unit */
.container-credits-dt-poster {
  height: 52.773437rem; /* 844.378px / 16px = 52.773437 */
  /* background-color: mediumorchid; */
}



/* --- [ Publications ] --- */
#container-pub,
#container-services {
  grid-column: 1 / span 13;
  grid-template-columns: repeat(13, 1fr);
  /*background-color: steelblue; */
}

.container-unit-publications-head {
  grid-column: 10 / span 4;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
}

.container-services-head {
  grid-column: 10 / span 4;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
}

.container-unit-publications {
  grid-column: 8 / span 6;
}

.container-unit-services {
  grid-column: 8 / span 3;
}

/* #m-container-pub {
  display: none;
} */



/* ************** [ FOOTER ] ************** */
#container-footer {
  display: grid;
  grid-template-columns: repeat(29, 1fr);
  grid-gap: 0;
  padding: 1rem 0 1.25rem 0;
}

#container-contact-address {
  grid-column: 4 / span 5;
}

#container-contact-mail {
  grid-column: 11 / span 5;
}

#container-sm {
  grid-column: 26 / span 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* background-color: dodgerblue; */
}

#container-copyright {
  grid-column: 1 / span 29;
  display: grid;
  grid-template-columns: repeat(29, 1fr);
}

img.footer-logo {
  grid-column: 1 / span 1;
  max-height: 2.53125rem;
  padding: .125rem 0 0 1rem;
}

.sm-icon-A,
.sm-icon-B {
  width: 2rem;
}

.sm-icon-A {
  grid-column: 1 / span 1;
  /* padding-right: 0.6125em; */
}

.sm-icon-B {
  grid-column: 2 / span 1;
}

.copyright {
  grid-column: 1 / span 29;
  display: grid;
  grid-template-columns: repeat(29, 1fr);
  grid-gap: 0;
}

.copyright-A,
.copyright-B,
.copyright-C,
.copyright-D,
.copyright-E  {
  padding-top: 1rem;
  padding-left: 0;
  margin-left: 0;
}

.copyright-A {
  grid-column: 1 / span 9;
}

.copyright-B {
  grid-column: 4 / span 9;
}

.copyright-C {
  grid-column: 9 / span 9;
}

.copyright-D {
  grid-column: 17 / span 9;
}

.copyright-E,
.copyright-E-dark {
  grid-column: 22 / span 7;
}



/* ************** [ Halftone / Dots ] ************** */

/* Used for Background */
.halftone-A { /* gridded dots */
--dot-size: 24rem;
--dot-container-size: 42rem;
}

/* Used for Background */
.halftone-B { /* gridded dots */
  --dot-size: 0.043125rem;
  --dot-container-size: 0.3125rem;
}

/* Used for Wrapper */
.halftone-C { /* gridded dots */
  --dot-size: 8.125rem;
  --dot-container-size: 17.5rem;
}

/* Used for Aside */
.halftone-D { /* gridded dots */
  --dot-size: 7.43125rem; /* 7.43125 * 16px = 118.9 */
  --dot-container-size: 11.09375rem; /* 11.09375 * 16px = 177.5 */
}

/* Used for Image Hover */
.halftone-E { /* gridded dots */
  --dot-size: 0.043125rem;
  --dot-container-size: 0.375rem;
}