@charset "UTF-8";

/*Magenta*/
li.archive-item.col-magenta a { color: rgb(255, 0, 255); }
.bg-magenta { background-color: rgb(255, 0, 255); }

/*Cadmium*/
li.archive-item.col-cadmium a { color: rgb(198, 161, 65); }
.bg-cadmium { background-color: rgb(198, 161, 65); }

/*Cyan*/
li.archive-item.col-cyan a { color: rgb(0, 255, 255); }
.bg-cyan { background-color: rgb(0, 255, 255); }

/*Green*/
li.archive-item.col-green a { color: rgb(128, 225, 51); }
.bg-green { background-color: rgb(128, 225, 51); }

/*Red*/
li.archive-item.col-red a { color: rgb(200, 4, 5); }
.bg-red { background-color: rgb(200, 4, 5); }




.archive li.col-magenta { border-bottom: 1px solid rgb(255, 0, 255); }
.archive li.col-cadmium { border-bottom: 1px solid rgb(198, 161, 65); }
.archive li.col-cyan { border-bottom: 1px solid rgb(0, 255, 255); }
.archive li.col-green { border-bottom: 1px solid rgb(128, 225, 51); }
.archive li.col-red { border-bottom: 1px solid rgb(200, 4, 5); }


.home #play-pause {
  font-size: 1em;

}



 .superscript.col-magenta a {
  color: magenta;
 }

.col-magenta input[type=range]::-webkit-slider-runnable-track {
 background-color: rgb(255, 0, 255);
}

.col-cadmium input[type=range]::-webkit-slider-runnable-track {
 background-color: rgb(198, 161, 65);
}

.col-cyan input[type=range]::-webkit-slider-runnable-track {
background-color: rgb(0, 255, 255);
}

.col-green input[type=range]::-webkit-slider-runnable-track {
 background-color: rgb(128, 225, 51);
}

.col-red input[type=range]::-webkit-slider-runnable-track {
 background-color: rgb(200, 4, 5);
}

input[type=range]::-webkit-slider-runnable-track {
 background-color: lightgrey;
}


.col-red::-webkit-scrollbar-thumb  { 
  background-color: rgb(200, 4, 5);
}

.col-cyan::-webkit-scrollbar-thumb  { 
  background-color: rgb(0, 255, 255);
}

.col-green::-webkit-scrollbar-thumb  { 
  background-color: rgb(128, 225, 51);
}

.col-magenta::-webkit-scrollbar-thumb  { 
  background-color: rgb(255, 0, 255);
}

.col-cadmium::-webkit-scrollbar-thumb  { 
  background-color: rgb(198, 161, 65);
}


#pjax-identifier.project ul.col-magenta .toolbar h3 { color: rgb(255, 0, 255); }
#pjax-identifier.project ul.col-cadmium .toolbar h3 { color: rgb(198, 161, 65); }
#pjax-identifier.project ul.col-cyan .toolbar h3 { color: rgb(0, 255, 255); }
#pjax-identifier.project ul.col-red .toolbar h3 { color: rgb(200, 4, 5); }
#pjax-identifier.project ul.col-green .toolbar h3 { color: rgb(128, 225, 51); }

#pjax-identifier.project ul.col-magenta .toolbar li { border-color: rgb(255, 0, 255) !important; }
#pjax-identifier.project ul.col-cadmium .toolbar li { border-color: rgb(198, 161, 65) !important; }
#pjax-identifier.project ul.col-cyan .toolbar li { border-color: rgb(0, 255, 255) !important; }
#pjax-identifier.project ul.col-red .toolbar li { border-color: rgb(200, 4, 5) !important; }
#pjax-identifier.project ul.col-green .toolbar li { border-color: rgb(128, 225, 51) !important; }


.col-magenta .bodytext p { color: rgb(255, 0, 255); }
.col-cadmium .bodytext p { color: rgb(198, 161, 65); }
.col-cyan .bodytext p { color: rgb(0, 255, 255); }
.col-green .bodytext p { color: rgb(128, 225, 51); }
.col-red .bodytext p { color: rgb(200, 4, 5); }

.constant {
  color: black;
}

.media-container a {
  color: black  ;
}

li#spacer-li {

  border-bottom: none;
  pointer-events: none;
  cursor: default;

  color: transparent !important;

}

li#header-li {
 border-bottom: none;


}

li#header-li h3 {

}

.about p a {
  color: rgb(200, 4, 5);
}

:root {
  --size-one: 29px;
  --size-two: .5em;
}

.onpage#video-controls {
 width: 100%;
 display: grid;
 grid-template-columns: 60px auto auto auto 1fr;
 grid-gap: 15px;
 display: grid;
 margin-top: 0px;
 margin-bottom: 0px;
 height: .9em;
}

.onpage#video-controls input {
  width: 100%;
}

.onpage #audio-controls {
  width: 100%;
  display: grid;
  grid-template-columns: 60px 1fr;
  grid-gap: 15px;
  color: black;
}

.onpage#play-pause {
  color: black;
  height: 1.75em;
}

.smalltext.audio {
  grid-column: 1 / span 2;
  text-align: left;
}

.onpage audio {
  display: none;
}

.onpage #play-pause {
  color: white;
  float: left; 
  background: black;
  display: block;

}



/*h3 a:hover {
  color: magenta;
  }*/

  .onpage #play-pause {
    transform: translateY(0px);
    cursor: pointer;
  }

  #seek-bar input[type=range] {
    -webkit-appearance: none;
    width: calc(100% - 17px)
    background: transparent;
    margin: 0px;
  }

  #aboutlink.inactive a {
    color: lightgrey;
    pointer-events: none;
  }

  h3 #aboutlink.inactive a {
    pointer-events: none;
  }

  ul.projects #archivelink.active a {
    pointer-events: inherit;
    color: black;
    cursor: pointer;
  }

  .onpage input[type="range" i] {
    float: left;
    transform: translateY(0px) !important; 
    height: 1em;
    margin: 0px !important;
    width: calc(100%);
    height: 25px;
  }


  html {
    font-family: 'frank';
    color: black;
    font-size: var(--size-one);
    line-height: 1.2em;
    width: 100%;
    overflow-x: hidden !important;
    padding: 0px;
    margin: 0px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

  }


  body {
    padding: 0px;
    margin: 0px;
    width: calc(100%);
    overflow-x: hidden !important;
  }

  .bodytext p {
    line-height: 1.125em;
    color: black;
    margin-block-start: 0px;
    margin-block-end: .5em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;


  }



  section.bodytext {
    float: left;
    width: calc(100% - 30px);

  }

  p {
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
  }

  .longtext p {
    margin-block-start: 0px;
    margin-block-end: 0em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    margin-top: .6em;
  }

  div#left-half.nocontent {
    background: white;
  }

  .project-video {
    width: 100%;
  }

  .main-content {
   width: 100%;
 }

 div#left-half.nocontent>.main-content {
  background: white;

}


.project-title {
  padding-bottom: 15px;
}

#left-half {
  padding-right: 0px;
  border-right: 1px solid black;
  position: relative;
}

.main-content:empty {
  background: white;
}

#right-half {
  background: black;
  color: black;
}

#right-half figure {
  width: calc(100% - 30px);
}

#left-half figure {
  margin-top: 15px;
  width: calc(50% - 22.5px);
}

#pjax-identifier.project > .embed-about {
  grid-column-start: 1;
  grid-column-end: 3;
  padding: 2.25em 15px 15px 15px;

}

#pjax-identifier.projects > .embed-about {
  display: none;
  opacity: 0;
  grid-template-columns: 2fr 2fr 1.5fr 2.5em;
  column-gap: 15px;
  transition: .4s;
  padding-top: 1.25em;
    position: relative;
}

main {
  min-height: 100vh;
  height: 0px;
}

html.home .archive {
  transition-timing-function: ease-in-out;

}

html.home .embed {
  /*display: none;*/
}


html.project {
  height: 100vh;
  overflow-y: hidden;
}

#left-half header.wrap {
  background: white;
  padding-right: 15px !important;#
  padding-top: 2.25em;
}


.scrollshowing .project.archive.grid {
      width: calc(50% - 41px - 0px);
     
}

.scrollshowing #left-half header.wrap ul.archive.grid {
   width: calc(100% - 0px - 0px);
 
}

#left-half header.wrap ul.archive.grid {
   width: calc(100% - 0px - 0px);
     
}

.project.archive.grid {
      width: calc(50% - 30px - 0px);

}

/*#project-info {
  display: none;
}

.project #project-info {
  display: block;
  }*/

  .project.archive.grid {
   border-bottom: 1px solid black;
   margin-left: 15px;
   margin-right: 15px;
   padding: 15px 0px 0px 0px !important;
   
   background: white;
   position: fixed;
   z-index: 99;
   transition-timing-function: default;
 }

 #left-half header.wrap li {
  grid-template-columns: 1fr 1fr;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: black;
}

#left-half header.wrap ul {
  padding-bottom: 1.6em;
}



.project.archive.grid #header-li {
 grid-template-columns: 2fr 2fr;
}

main>#pjax-identifier.project {
  display: grid;
  grid-template-columns: calc(50% + 0px) calc(50% + 0px);
  grid-column-gap: 0px;

  min-height: 100%;
  width: 100%;
}

.project main>div {

}

.project main>*:empty {
  display: none;
}

.ahalf {
  max-height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

::-webkit-scrollbar {
  width: 10px;
}

#colophon {
  position: absolute;
  right: 0px;
  bottom: 0px;
}


::-webkit-scrollbar-track {
  -webkit-border-radius:0px;
  border-radius:0px;
  background:rgba(1,0,0,0.05);

}

::-webkit-scrollbar-thumb {
  -webkit-border-radius:5px;
  border-radius:5px;
  background: lightgrey;

}

::-webkit-scrollbar-thumb:hover {
 background: darkgrey;
}

::-webkit-scrollbar-thumb:window-inactive {
 background: lightgrey;
}

#pjax-identifier.project #spacer-ul {
  display: none;
}


#left-half>* {
  padding: 15px 15px 15px 15px;
}

#right-half>* {
  padding: 15px 15px 0px 15px;
}

.main-content {
  float: left;
    width: calc(100% - 30px);
  padding: 15px 15px 15px 15px;
  color: white;
}

.main-content:empty {
  display: none;
}

.project main>#right-half {
  padding: 15px;
}

.project figure {
  float: left;
  padding-bottom: 15px;

}

.project figure>img {
  width: 100%;
  float: left;
}

#addresstext, #presstext {

}

#addresstext p:nth-child(1) {
  margin-top: 0px;
  padding-top: 0px;
}

#presstext p:nth-child(1) {
  margin-top: 0px;
  padding-top: 0px;
}



#abouttext {
  padding-right: 0px;

}

#abouttext p:nth-child(1) {
  margin-top: 0px;
  padding-top: 0px;
  margin-right: 5px;
}



html.home #background-holder {
  display: none;
}



.col-1 {
  width: calc(100% / 8 * 1 - 15px);
}
.col-2 {
  width: calc(100% / 8 * 2 - 15px);
}
.col-3 {
  width: calc(100% / 8 * 3 - 15px);
}
.col-4 {
  width: calc(100% / 8 * 4 - 15px);
}
.col-5 {
  width: calc(100% / 8 * 5 - 15px);
}
.col-6 {
  width: calc(100% / 8 * 6 - 15px);
}
.col-7 {
  width: calc(100% / 8 * 7 - 15px);
}
.col-8 {
  width: calc(100% / 8 * 8 - 30px);
}

.height-25 {
  height: calc(100% / 4 * 1 - 30px);
}
.height-50 {
  height: calc(100% / 4 * 2 - 30px);
}
.height-75 {
  height: calc(100% / 4 * 3 - 30px);
}
.height-100 {
  height: calc(100% / 4 * 4 - 30px);
}

.pos-topleft {
  left: 15px;
  top: 15px;
}
.pos-topright {
  right: 15px;
  top: 15px;
}
.pos-bottomright {
  right: 15px;
  bottom: 15px;
}
.pos-bottomleft {
  left: 15px;
  bottom: 15px;
}
.pos-center {

}


#background-holder {
  position: fixed;
  pointer-events: none;
  z-index:-1;
  /* left: 50%;*/

 /*   width: calc(50% - 15px);
 height: calc(100vh - 75px);*/
 background-repeat: no-repeat;

 background-position: center center; 
 background-size: cover;
}

@font-face {
  font-family: 'frank';
  src: url('frank.woff2') format('woff2'),
  url('frank.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}



#pjax-identifier.projects {
  padding: 15px;
  width: calc(100% - 30px);
}

#pjax-identifier.projects.archive.grid {
  position: fixed;
  width: calc(100% - 30px);
}

#pjax-identifier.about {
  padding: 15px;
  width: 100%;
}

#pjax-identifier.home {
  padding: 15px;
  width: 100%;
  height: calc(100vh - 30px);
  
}

#pjax-identifier {
  z-index: 3;
}




/*#pjax-identifier.about > #projects li:hover {
  opacity: 1;
}
*/
#pjax-identifier.about > #projects li {
  opacity: .3;
}

#pjax-identifier.about > #projects:hover li {
  opacity: 1;
}

#pjax-identifier.about > #projects {
  background: white;
}

#pjax-identifier.about > #projects:active li {
  opacity: 1;
}

#pjax-identifier.about {


  grid-template-columns: 25% calc(25% - 15px) 25% calc(25% - 30px);
  grid-column-gap: 15px;
  display: grid;

}



a {
  color: black;
  text-decoration: none;


}

h1, h2, h3, strong {
  font-weight: 400;
  line-height: 1em;
}

h2 {
  display: block;
  font-size: 1.5em;
  -webkit-margin-before: 0.83em;
  -webkit-margin-after: 0.83em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: 400;
}

nav.navigation {
 /* background: #eee;*/
 width: calc(100%);
 position: fixed;
 bottom: 0px;
 left:0px;
 z-index: 2;
 transition: .1s;
 display: grid;
 transform: translateY(35px);
 /*  border-top: 2px solid black;*/
}

ul.projects #archivelink a {
  color: lightgrey;
  pointer-events: none;
  cursor: default;
}

.fullscreen {
 position: fixed;
left: 0; 
 bottom: 0;
 min-width: 100%; 
 min-height: 100%;
 width: auto; 
 height: auto;
 z-index: -100;
}

::-range-track {
  border: 2px solid red;
  height: 20px;
  background: orange;
}
::-range-thumb {
  background: blue;
  height: 30px;
}

.class1 {
  color: green;
}

.class2 {
  color: red;
}

.class3 {
  color: purple;
}



.archive li:hover {

}

.sortby:hover {
  cursor: pointer;
  color: black;
}

#fullscreen-image {
  display: block;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: -5;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/*.toolbar {
  color: rgb(255, 0, 255);
  }*/

  .superscript {
   letter-spacing: .5px;
   font-size: var(--size-two);
   transform: translateY(-.7em);
   display: inline-block;
   line-height: 1em;
 }

.archive h3.sortby {
 font-size: var(--size-two);
 transform: translateY(-.7em);
}

 .hover {
  background: red;
}

.archive-item.row {
  display: grid;

}

ul.archive {
  display: grid;

}

.archive li:nth-of-type(1), .about li:nth-of-type(1) {
  padding-top: 0px;
}
.home #header-li {
  grid-template-columns: 2fr 2fr 1.5fr 2.5em;
  width: calc(100% - 30px);
}

.archive li, .about li {
  list-style: none;
  display: grid;
  grid-template-columns: 2fr 2fr 1.5fr 2.5em;
  grid-column-gap: 15px;
  border-bottom: 1px solid black;
  padding: 15px 0px 0px 0px;
}

.about li {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: 15px;
  border-bottom: 1px solid black;
  padding: 15px 0px 0px 0px;
}

.archive h3 {
  display: block;
  font-size: 1em;
  line-height: 1.2em;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;

}

.archive a {
 background: none !important;
}



.smalltext {
  font-size: var(--size-two);
  line-height: 1.25em;
  margin-bottom: 0px;

}


h1, h2, h3 {
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-size: 1em;
}

nav {
  display: none !important;
}

nav.navigation li {
  list-style: none;
}

nav.navigation ul {
  padding-left: 20px;
}

.controls input, button {
  padding: 0px;
  border: none;
  background: none;
}

.slide-indicators {
  background: black;
  width: 10px;
  height: 10px;
  display: block;
  float: left;
  margin: 5px;
  border-radius: 100%;
  border: 2px solid black;

}

.slide-indicators:nth-of-type(1) {
  margin-left: 0px;
}

.slide-indicators.beingviewed {
  background: white;
}

.slides {
  cursor: pointer;
}

.active-state.grid {
  display: grid;
  grid-template-columns: 2fr 2fr 1.5fr 2.5em;
  grid-column-gap: 15px;
  position: relative;
  z-index: 9999;
}

/*.media-container {
  width: calc(100% - 30px);
}
*/
.active-state.grid p {
  padding: 0px;
  display: block;

  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;

  grid-column: span 2;
  line-height: 1em;
  margin-top: .1em;
}

.active-state.grid #caption {
  grid-column: 3 / span 1;

}

.transition {
  transition: .5s;
}

.home.archive.grid {
  position: fixed;
  top: 15px;
  color: white;
  width: 100%;
  color: white;
  left: 15px;
  z-index: 9999999;
}

.home.archive.grid .constant, .home.archive.grid h3 a {
  color: white;
  height: 1em;
}

.home.menu {
 width: calc(100% - 30px);
 grid-template-columns: 1fr 1fr;
}

ul.menu.transition.half.home {
 width: calc(100% - 30px);
 grid-template-columns: 1fr 1fr;
}

.home.menu.half {
 width: calc(50% - 45px);
 grid-template-columns: 1fr 1fr;
}

.projects>#projects, .about>#about {
  background: #ccc;
  color: transparent;
  pointer-events:none;
}

.clicked {
/* background: #ccc;
color: transparent;*/
pointer-events:none;
}

.project.menu, .projects.menu, .about.menu   {
  width: calc(50% - 30px);
  grid-template-columns: calc(50% - 15px) calc(50% - 0px);
}

.project.menu {
  width: calc(50% - 30px);
}

nav.sorting {
  position: fixed;
  bottom: 0px;
  left: calc(50% + 0px);
  transform: translateY(35px);
  width: calc(50% - 15px);
  margin: 0px;
  padding: 0px;
  z-index:99;
}

#pjax-identifier.about > #projects {
  grid-column: span 2;
  grid-row: 1 / span 3;
  color: grey;
  cursor: pointer;
  min-height: calc(100vh - 30px);
}





.project nav.sorting {
  left: calc(50% + 0px);
  width: calc(50% - 15px);
}

a.embed {
 background: white;
 border-top: 1px solid black;
}

.project ul.sorting {
 grid-template-columns: 1fr;
 display: grid;
}

ul.sorting {
  grid-template-columns: calc(50% - 15px) calc(50%);
  display: grid;
  column-gap: 15px;
}


.menu {

  display: grid;
  padding: 0px 15px 0px 15px !important;
  grid-column-gap: 15px;
  letter-spacing: .3px;
}





.popup:hover {
  transform: translateY(-20px);
  background: #ccc;
}


*:focus {
  outline: none;
}


.menu a, .sorting span {
  font-size: var(--size-two);
  line-height: .8em;
  padding: 18px 0px 50px 20px;
  background: white;
  transition: .25s;
  
  background: #eee;
  cursor: pointer;
  transition: background .3s, transform .15s, color .2s;
}

.project .sorting span {
  cursor: default;
  border: 0px;
  background: #ccc;
  color: white;
}

.sorting span {

  background: white;
  border-top: 1px solid black;

  
}

.pleasemove span {
 opacity: 1;
 animation-name: fadeInOpacity;
 animation-iteration-count: 1;
 animation-timing-function: ease-in-out;
 animation-duration: 1s;
 animation-delay: 0s;
}

@keyframes fadeInOpacity {
  0% {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}



.slides-container {

  position: fixed;
  left: 0px;
  top:0px;
  width: 100%;
  height: 100%;
  z-index: -1;
}

ul, menu, dir {
  display: block;
  list-style-type: disc;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 0px;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 0px;
}




















.home .video-element {
  
  position: fixed;
  bottom: 15px;
  left: 15px;
  width: 100%;
}






.home #play-pause {
  margin-right: 15px;
  transform: none;
}

#seek-bar {
 transform: translateY(-6px);
}

#play-pause:focus {
 outline: none;
}

#play-pause {
 transform: translateY(-3px);
 cursor: pointer;
}

input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: calc(100% - 40px); /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */

}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent; 
  border-color: transparent;
  color: transparent;
}

.onpage input[type=range]::-webkit-slider-thumb {
  height: 100%;
}

/* Special styling for WebKit/Blink */
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 1.5em;
  width: 2px;
  background: black;
  cursor: pointer;
  margin-top: 0px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {

  border: 1px solid #000000;
  height: 36px;
  width: 16px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {

  border: 1px solid #000000;
  height: 36px;
  width: 16px;

  background: #ffffff;
  cursor: pointer;
}

.onpage input[type=range]::-webkit-slider-runnable-track {
  height: 100%;
}





input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 1.5em;
  cursor: pointer;

 


}

input[type=range]:focus::-webkit-slider-runnable-track {
  

}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;

  background: red;
  border-radius: 1.3px;
  border: 0.2px solid #010101;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 8.4px;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;

}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;

}

#aboutlink {
  cursor: pointer;
}



.embed-about ul {
  grid-row-start: 2;
}

input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}

figure {
  display: block;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
}

#right-half figure:last-child {
  padding-bottom: 15px;
}

@media only screen and (max-width: 1440px) {
  :root {
    --size-one: 24px;
    --size-two: .6em;
  }
}



@media only screen and (max-width: 1280px) {
  :root {
    --size-one: 20px;
    --size-two: .7em;
  }
}

@media only screen and (max-width: 1000px) {

  #colophon {
display: none;
}

  #background-holder {
    display: none !important;
  }

  html {
    overflow: auto !important;
  }

  .ahalf {
    max-height: unset;
  }

  .project.archive.grid {
    width: calc(100% - 30px);

    
  }

  .archive li, .about li {
    padding-top: 15px;
    padding-bottom: 7px;
  }

  .project.archive.grid #header-li {

    grid-template-columns: 1fr 1fr;
    
  }

  .projects.archive.grid #header-li {
    grid-template-columns: 1fr 1fr;
  }


  main>#pjax-identifier.project {
    grid-template-columns: 1fr;
  }

  li.sortbybar {
    display: none;
  }

  #pjax-identifier.projects > .embed-about {
    grid-template-columns: 1fr;

    width: 100%;
  }

  #pjax-identifier.projects > .embed-about div {
    margin-bottom: 1.25em;
  }

  .archive li, .about li {
    grid-template-columns: 1fr;
  }

  #pjax-identifier.projects > .embed-about div:last-child {
    margin-bottom: 0em;
  }

  main>.project {
    grid-template-columns: 100%;
  }
  #research {
    display: none;
  }
  body {
    width: 100%;
  }


.active-state.grid {
padding-top: 1.5em;
grid-template-columns: 1fr;
}

.active-state.grid #caption {
grid-column: 1 / span 1;
  }


}