html, body {
    max-width: 100%;
    height: auto;
    min-height: 100vh;
    overflow-x: hidden!important;
    /* overflow-y: hidden!important; */
background: #fbfbfb;
background: rgb(255,255,255);
margin: 0!important;
scroll-behavior: auto!important;

}

a:active {
    text-decoration: none;
    /* color: rgb(0, 53, 107); */
            /* color: rgb(254, 80, 0); */
    color: rgb(255, 80, 0);
    text-decoration: none;
/*                border-bottom: 3px dashed rgb(0, 0, 0);*/
}

.smaller {
font-size: 1.2vw;
font-family: IBM plex mono, courier;
font-style: normal;
}
.smaller1 {
font-size: 1.25vw;
font-family: archivo, sans-serif;
/* font-style: italic; */
}

#absolute_parent {
  top: 200vw;
}
.mobile_only {
  display: none;
}
#sc {
  display: flex;
}
canvas {
  position: absolute;
  top: 0;
  z-index: 1;
  pointer-events: none;
}
.bottom_content {
  position: absolute;
  top: 150vw;
  width: 100vw;
  height: auto;
  display: block;
  pointer-events: none;

}
.video_flex {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
    justify-content: space-evenly;
  margin: auto 0;
}
.participants_flex {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  flex-direction: column;
    justify-content: center;
    align-items: center;
  margin: auto 0;
}
.video_box {
  width: 100vw;
display: block;
max-width: 33vw;
margin: auto 0;
padding: 5vw;

}
.iframe_container {
  position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;

}
.iframe_container iframe {
  position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
  flex: 1;
  border: 5px dashed rgb(255, 64, 0);
  pointer-events: all!important;
}
.participants_box {
  max-width: 33vw;
}
.participants_box a {
  pointer-events: all!important;
  color: rgb(255, 80, 0);
}

#top_container {
  /* margin: 0vw 5vw 0vw 5vw; */
  position: fixed;
  top: 35vh;
  left: 1.5vw;
}
#right_container {
  /* margin: 0vw 5vw 0vw 5vw; */
  position: fixed;
  top: 60vh;
  right: 1.5vw;
}
#upper_right {
  position: fixed;
  top: 2vw;
  right: 2vw;
}

.text_box {
  width: 25vw;
  border: 5px dashed rgb(254, 80, 0);
}
.text_box a {
  pointer-events: all!important;
  color: rgb(255, 80, 0);
}

.casestudy{
height: 33vh;
width: auto;
overflow-y: scroll;
display: flex;
flex-direction: column;
max-width: 28vw;
/* pointer-events: none; */
}
/* .casestudy:hover::before {
  content: "scroll here, workshop gallery";
  font-size: 16px;
  font-family: IBM plex mono, courier;
  font-style: normal;
  z-index: 10;
  position: fixed;
  top: 32.5vh;
} */
#border_light_blue:hover::after {
  content: "scroll here, workshop gallery: click an image to enlarge";
  font-size: 14px;
  font-family: IBM plex mono, courier;
  font-style: normal;
  z-index: 10;
  position: fixed;
  margin-top: 34.5vh;
  max-width: 30vw;
}
#border_light_green:hover::after {
  content: "scroll here, archive gallery: click an image to enlarge";
  font-size: 14px;
  font-family: IBM plex mono, courier;
  font-style: normal;
  z-index: 10;
  position: fixed;
  margin-top: 34.5vh;
  max-width: 30vw;
}
#border_light_blue {
      border: 5px dashed rgb(19, 123, 197)!important;
}
#border_light_green {
    border: 5px dashed rgb(23, 155, 123)!important;
}


.casestudy img {
  display: block;
  height: auto;
  width: 45vh;
  max-width: 26.5vw;
  margin 0 auto;
  /* max-height: 100vh;
  min-height: 100vh; */
  object-fit: cover;
}
.modal {
  display: none;
  flex-wrap: wrap;
  align-content: center;
  flex-direction: column;
    justify-content: center;
    align-items: flex-end;
  position: fixed;
  z-index: 30;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: rgb(255,80,0);
 background: linear-gradient(180deg, rgba(255,80,0,1) 0%, rgba(255,255,255,1) 76%, rgba(255,255,255,0.8) 81%, rgba(255,255,255,0) 100%);
}

.close {
color: rgb(254, 80, 0);
background-color: rgb(255,255,255);
position: fixed;
height: auto;
z-index: 10;
bottom: .5vh;
right: 2vw;
cursor: pointer;
display: none;
}
.close span {
  border: 5px dashed rgb(254, 80, 0);
  padding: 0 1.5vw 0;
}

.close span:hover {
  border: 5px dashed rgb(19, 123, 197)!important;
}

.modal img {
  display: block;
  height: auto;
  width: 95vw;
  max-height: 90vh;
  margin 0 auto;
  /* max-height: 100vh;
  min-height: 100vh; */
  object-fit: contain;
}

.credit {
  z-index: 100;
  position: absolute;
  top: -1vh;
}
#socials img {
  width: 3vw;
  height: auto;
  padding: 2vh 2vw 2vh 2vw;
}
#socials {
  padding: 2vh 0 2vh 0;
}
#contact {
  width: 33vw;
}

#socials_wrapper {
  display: flex;
  justify-content: space-around;
}

#full_logo {
  position: fixed;
  left: 2vw;
  top: 1vh;
  max-width: 20.05vw;
}

#vert_logo {
  position: fixed;
  left: 2vw;
  top: 1vh;
  max-width: 7vw;
  max-height: 33vh;
  display: block;
}

@media screen and (max-width: 600px) and (min-width: 0px) {
  body {
    min-height: -webkit-fill-available;
  }
  .bottom_content ul {
    margin-left: -4vw;
  }
  .reed_bio {
    background: rgb(255,80,0);
   background: linear-gradient(180deg, rgba(255,80,0,1) 0%, rgba(255,255,255,1) 90%, rgba(255,255,255,0) 100%)!important;
   padding-bottom: 5vh;
  }
  .reed_bio .smaller {
    /* font-size: 1.65vh; */
  }
  #vert_logo {
display: none!important
  }

}
@media screen and (max-width: 900px) and (min-width: 0px) {

html, body {
    /*! max-width: 100%; */
    height: auto;
    /*! overflow-x: hidden!important; */
    /* overflow-y: hidden!important; */
background: #fbfbfb;
background: rgb(255,255,255);
margin: 0!important;
scroll-behavior: auto!important;

}

#vert_logo {
display: none!important
}
.reed_bio {
  /* background: rgba(255,255,255, .9); */
  background: rgb(255,80,0);
 background: linear-gradient(180deg, rgba(255,80,0,1) 0%, rgba(255,255,255,1) 76%, rgba(255,255,255,0.8) 81%, rgba(255,255,255,0) 100%);
  min-height: 100vh;
  pointer-events: all!important;
}
.reed_bio p {
  padding: 1vh 5vw 0vh 5vw;
}
.reed_bio ul {
  padding-right: 5vw;
  margin-left: 0;
}
#mobile_logo {
  max-width: 50vw;
  position: relative;
  top: 2vh;
  left: 5vw;
}
a:active {
    text-decoration: none;
    /* color: rgb(0, 53, 107); */
            /* color: rgb(254, 80, 0); */
    color: rgb(255, 80, 0);
    text-decoration: none;
/*                border-bottom: 3px dashed rgb(0, 0, 0);*/
}


.smaller1 {
font-size: 1.9vh;
font-family: archivo, sans-serif;
/* font-style: italic; */
}

  .mobile_only {
  display: block!important;

}
  .desktop_only {
  display: none!important;
}

.smaller {
font-size: 1.9vh;
font-family: IBM plex mono, courier;
font-style: normal;
}

#absolute_parent {
  top: 1200vw!important;
}

#absolute_parent {
  top: 200vw;
}
.mobile_only {
  display: none;
}
#sc {
  display: flex;
}
canvas {
  position: absolute;
  top: 0;
  z-index: 1;
  pointer-events: none;
}
.bottom_content {
  position: absolute;
  top: 0;
  /*! width: 100vw; */
  /*! height: auto; */
  display: block;
  pointer-events: none;

}
.video_flex {
  display: block;
  flex-wrap: wrap;
  align-content: center;
    justify-content: space-evenly;
  margin: auto 0;
}
.participants_flex {
  display: block;
  flex-wrap: wrap;
  align-content: baseline;
  flex-direction: column;
    justify-content: center;
    align-items: center;
  margin: auto 0;
}
.video_box {
  width: 100vw;
display: block;
max-width: 33vw;
margin: auto 0;
padding: 5vw;

}
.iframe_container {
  position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;

}
.iframe_container iframe {
  position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
  flex: 1;
  border: 5px dashed rgb(255, 64, 0);
  pointer-events: all!important;
}
.participants_box {
  max-width: 42.5vw;
  /*! background: rgba(255,255,255,.5); */
}
.participants_box a {
  pointer-events: all!important;
  color: rgb(255, 80, 0);
}

/*normal css (not mobile)
*/
#top_container {
  /* margin: 0vw 5vw 0vw 5vw; */
  position: fixed;
  top: 49vh;
  left: unset;
  bottom: unset;
  right: 2vw;
  /*! width: 150vw; */
  /*! overflow-x: scroll; */
  /*! height: 80vw; */
  /*! background-color: greenyellow; */
}
#right_container {
  /* margin: 0vw 5vw 0vw 5vw; */
  position: fixed;
  top: 74vh;
  right: 2vw;
  bottom: unset;
}
#upper_right {
  position: fixed;
  top: 2vh;
  right: 2vw;
}

.text_box {
  width: 60.5vw;
  border: 5px dashed rgb(254, 80, 0);
  max-height: 45vh;
  overflow-y: scroll;
}
.text_box a {
  pointer-events: all!important;
  color: rgb(255, 80, 0);
}
#border_light_green::before {
  content: "scrollable galleries: click images to enlarge";
  font-size: 1.3vh;
  font-family: IBM plex mono, courier;
  font-style: normal;
  z-index: 10;
  position: fixed;
  max-width: 56vw;
  padding-left: 0;
  margin-top: -4.6vh;
}
.casestudy{
  height: 19vh;
  width: 50vw;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  max-width: none;
/* pointer-events: none; */
}
.casestudy img {
  display: block;
  height: auto;
  width: 50vw;
  margin 0 auto;
  max-width: none;
  /* max-height: 100vh;
  min-height: 100vh; */
  object-fit: cover;
}
#border_light_green:hover::after {
    content: ""!important;
}
#border_light_blue:hover::after {
    content: ""!important;
}
#border_light_blue {
      border: 5px dashed rgb(19, 123, 197)!important;
}
#border_light_green {
    border: 5px dashed rgb(23, 155, 123)!important;
}


.modal {
  display: none;
  flex-wrap: wrap;
  align-content: center;
  flex-direction: column;
    justify-content: center;
    align-items: flex-end;
  position: fixed;
  z-index: 30;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255,255,255,.75);
}

.close {
color: rgb(254, 80, 0);
background-color: rgb(255,255,255);
position: fixed;
height: 2.5vh;
z-index: 10;
top: 90vh;
right: 2.5vw;
cursor: pointer;
}
.close span {
  border: 5px dashed rgb(254, 80, 0);
  padding: 0 1.5vw 0;
}

.close span:hover {
  border: 5px dashed rgb(19, 123, 197)!important;
}

.modal img {
  display: block;
  height: auto;
  width: 95vw;
  max-height: 90vh;
  margin 0 auto;
  /* max-height: 100vh;
  min-height: 100vh; */
  object-fit: cover;
}

.credit {
  z-index: 100;
  position: absolute;
  top: -1vh;
}

.participants_flex {
  padding-top: 2vh;
}
#socials img {
  width: 9vw;
}

}
@media screen and (max-width: 1250px) and (min-width: 901px) {
  html, body {
    max-width: 100%;
    height: auto;
    overflow-x: hidden!important;
    /* overflow-y: hidden!important; */
background: #fbfbfb;
background: rgb(255,255,255);
margin: 0!important;
scroll-behavior: auto!important;

}

a:active {
    text-decoration: none;
    /* color: rgb(0, 53, 107); */
            /* color: rgb(254, 80, 0); */
    color: rgb(255, 80, 0);
    text-decoration: none;
/*                border-bottom: 3px dashed rgb(0, 0, 0);*/
}

.smaller {
font-size: 1.75vh;
font-family: IBM plex mono, courier;
font-style: normal;
}
.smaller1 {
font-size: 1.8vh;
font-family: archivo, sans-serif;
/* font-style: italic; */
/*! margin-left: 5vw; */
}

#absolute_parent {
  top: 200vw;
}
.mobile_only {
  display: none;
}
#sc {
  display: flex;
}
canvas {
  position: absolute;
  top: 0;
  z-index: 1;
  pointer-events: none;
}
.bottom_content {
  position: absolute;
  top: 150vw;
  width: 100vw;
  height: auto;
  display: block;
  pointer-events: none;

}
.video_flex {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
    justify-content: space-evenly;
  margin: auto 0;
}
.participants_flex {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
  flex-direction: column;
    justify-content: center;
    align-items: center;
  margin: auto 0;
}
.video_box {
  width: 100vw;
display: block;
max-width: 33vw;
margin: auto 0;
padding: 5vw;

}
.iframe_container {
  position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;

}
.iframe_container iframe {
  position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
  flex: 1;
  border: 5px dashed rgb(255, 64, 0);
  pointer-events: all!important;
}
.participants_box {
  max-width: 23vw;
  margin-left: -5vw;
}
.participants_box a {
  pointer-events: all!important;
  color: rgb(255, 80, 0);
}

#top_container {
  /* margin: 0vw 5vw 0vw 5vw; */
  position: fixed;
  top: 35vh;
  left: 1.5vw;
}
#right_container {
  /* margin: 0vw 5vw 0vw 5vw; */
  position: fixed;
  bottom: 5vh;
  right: 2vw;
}
#upper_right {
  position: fixed;
  top: 2vw;
  right: 2vw;
}

.text_box {
  width: 28vw;
  border: 5px dashed rgb(254, 80, 0);
}
.text_box a {
  pointer-events: all!important;
  color: rgb(255, 80, 0);
}

/* .casestudy:hover::before {
  content: "scroll here, workshop gallery";
  font-size: 14px;
  font-family: IBM plex mono, courier;
  font-style: normal;
  z-index: 10;
  position: fixed;
  margin-top: -2.1vh;
} */
#border_light_blue:hover::after {
  content: "scroll here, workshop gallery: click an image to enlarge";
  font-size: 14px;
  font-family: IBM plex mono, courier;
  font-style: normal;
  z-index: 10;
  position: fixed;
  margin-top: 33.5vh;
  max-width: 30vw;
}
#border_light_green:hover::after {
  content: "scroll here, archive gallery: click an image to enlarge";
  font-size: 14px;
  font-family: IBM plex mono, courier;
  font-style: normal;
  z-index: 10;
  position: fixed;
  margin-top: 33.5vh;
  max-width: 30vw;
}
#border_light_blue {
      border: 5px dashed rgb(19, 123, 197)!important;
}
#border_light_green {
    border: 5px dashed rgb(23, 155, 123)!important;
}


.casestudy{
height: 33vh;
width: 33vw;
overflow-y: scroll;
display: flex;
flex-direction: column;
max-width: 28vw;
overflow-x: hidden;
/* pointer-events: none; */
}
.casestudy img {
  display: block;
  height: auto;
  width: 28vw;
  margin 0 auto;
  /* max-height: 100vh;
  min-height: 100vh; */
  object-fit: cover;
}
.modal {
  display: none;
  flex-wrap: wrap;
  align-content: center;
  flex-direction: column;
    justify-content: center;
    align-items: flex-end;
  position: fixed;
  z-index: 30;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255,255,255,.75);
}

.close {
color: rgb(254, 80, 0);
background-color: rgb(255,255,255);
position: fixed;
height: auto;
z-index: 10;
bottom: 0.5vh;
right: 2.5vw;
cursor: pointer;
}
.close span {
  border: 5px dashed rgb(254, 80, 0);
  padding: 0 1.5vw 0;
}

.close span:hover {
  border: 5px dashed rgb(19, 123, 197)!important;
}

.modal img {
  display: block;
  height: auto;
  width: 95vw;
  max-height: 90vh;
  margin 0 auto;
  /* max-height: 100vh;
  min-height: 100vh; */
  object-fit: cover;
}

.credit {
  z-index: 100;
  position: absolute;
  top: -1vh;
}
.participants_box ul {
  margin-left: -1.5vw
}
.participants_box {
  max-width: 23vw;
  margin-left: -2.5vw;
}

}