body {
  width: 100vw;
  height: 100vh;
  background-color: black;
  z-index: -101;
  position: absolute;
  overflow:hidden;
}

#background-image-container {
  width: 110vw;
  height: 100vh;
  background-image: url('art/gradients/bg gradient-01-min.jpg');
  background-size: cover;
  background-position: center center;
  position: absolute;
  left: -2vw;
  z-index: -100;
  opacity: 0.35;
  transition-duration: 1s;
  transition-timing-function:ease-out;
}

.bg-slide {
  left: 0vw!important;
}



a, a:link, a:visited {
  text-decoration: none;
  color: #032b36;
  transition: 0.25s;
  transition-timing-function:cubic-bezier();
}

a:hover, a:active {
  color: #2e7890;
}

.mobile-only {
  display: none!important;
}

#home-grid-container {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll!important;
  overflow-x: hidden;
  position: relative;
  display: grid;
  grid-template-columns: 40vw 60vw;
  grid-template-rows: auto;
  transition:0.5s;
  transition-timing-function:cubic-bezier();
  z-index: 2;
}

/** LEFT SIDE **/

#home-grid-left {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: sticky;
  top: 0;
  left: 0;
  grid-column: 1/2;
  display: grid;
  grid-template-rows: 30% 50% 20%;
  grid-template-columns: 70%;
  justify-content: center;
  align-items: center;
  color: white;
  z-index: 0;
}

#home-header{
  height: auto;
  width: 100%;
  grid-row:1/2;
  display: grid;
  align-self: center;
  grid-template-rows: repeat(2,auto);
  justify-content: center;
  align-items: center;
}

#home-header span {
  height: 100%;
  width: 100%;
  grid-row:2/3;
  grid-column: 1/3;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#home-header p {
  font-size: 1.3em;
  padding: 0.5em;
}

.fixed-text {
  width: 100%;
  height: 90%;
  cursor: pointer;
  transition: 0.35s;
  transition-timing-function: cubic-bezier();
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.fixed-text-span {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  margin: 0 auto;
  position: absolute;
  bottom: 15%;
}

.project-link {
  width: 100%;
  height: auto;
}

.fixed-text p {
  line-height: 200%
  /* padding-top: 0.5em; */
  /* padding-bottom: 1em; */
}

.ubuntu-sans-mono-footer-mv {
  font-size: 0.65em;
  position: absolute;
}

.project-link, .project-link:link, .project-link:active, .project-link:visited {
  opacity: 1;
  font-size: 1em;
  letter-spacing: 0.075em;
  /* padding: 1em; */
  transition: 0.35s!important;
  transition-timing-function: cubic-bezier();
  color: white;
  font-style: italic;
}

.openlink {
  height: auto;
  width: 0.4em;
  padding: 0;
  /* padding-top: 3px; */
  margin: 0 auto;
  position: absolute;
  /* right: 45%; */
  top: 0;
  opacity: 0;
  transition: 0.5s;
  transition-timing-function: cubic-bezier();
}

.another {
  transition: 0.35s;
  transition-timing-function: cubic-bezier();
}

.openlink-ready {
  opacity: 1!important;
  height: auto;
  top:-25%!important;
  /* right: calc(50% - 0.2em); */
  width: 0.4em!important;
}

#mappin {
  height: 1em;
  width: auto;
  filter: invert();
  margin-right: 10px;
}

#polaroid {
  max-width: 100%;
  height: 100%;
  grid-row:2/3;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

#polaroid-img {
}


@media screen and (min-height: 701px) {
  #polaroid-img {
    width: auto;
    height: 80%;
    position: absolute;
    top: 0;
    z-index: 0;
    /* #be6a78 */
    filter: drop-shadow(#0c2027 -2rem 5rem 2rem);
  }
  #em-producer-creative-img {
    max-width: 60%;
    height: auto;
    position: absolute;
    bottom: 0;
    z-index: 4;
    /* filter: drop-shadow(#0c2027 -5rem 5rem 3rem); */
  }
  .ubuntu-sans-mono-footer-mv {
    top: 15%!important;
  }
}


@media screen and (min-height: 301px) and (max-height: 700px) {
  #home-grid-left p {
    font-size: 0.9em!important
  }
  #mappin  {
    height: 0.9em!important;
    width: auto;
  }
  #polaroid-img {
    width: auto;
    height: 35vh;
    position: absolute;
    top: 0%;
    z-index: 0;
    /* #be6a78 */
    filter: drop-shadow(#0c2027 -2rem 5rem 2rem);
  }
  #em-producer-creative-img {
    width: auto;
    height: 25vh;
    position: absolute;
    bottom: 0%;
    z-index: 4;
    /* filter: drop-shadow(#0c2027 -5rem 5rem 3rem); */
  }
  .ubuntu-sans-mono-footer-mv {
    right: -50%!important;
  }

  .project-link {
    padding-top: 0.15em;
    padding-bottom: 0.15em;
  }
  .openlink {
    /* left: 0; */
    display: none!important;
  }
}

@media screen and (max-height: 300px) {
  #home-header {
    grid-template-columns: repeat(2,auto)!important;
    grid-column-gap:45px;
  }
  #home-header p {
    grid-column: 1/2!important;
    grid-row: 1/2;
  }
  #home-header span {
    grid-column: 2/3!important;
    grid-row: 1/2;
  }
  #home-grid-left p {
    font-size: 0.9em!important
  }
  #mappin  {
    height: 0.9em!important;
    width: auto;
  }
  #polaroid-img {
    display: none!important;
  }
  #em-producer-creative-img {
    width: auto;
    height: 35vh;
    position: absolute;
    z-index: 4;
    /* filter: drop-shadow(#0c2027 -5rem 5rem 3rem); */
  }

  .ubuntu-sans-mono-footer-mv {
    right: -50%!important;
  }

  .project-link {
    padding-top: 0.15em;
    padding-bottom: 0.15em;
  }
}

#home-footer {
  grid-row:3/4;
  grid-column: 1/2;
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

#home-footer-span {
  width: auto;
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.mobile-work-arrow, #mobile-work {
  display: none;
}

#home-footer-span-return {
  height: auto;
  width: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  cursor: pointer;
  padding: 1.3em;
}

#home-footer-span-p {
  margin: 0;
  width: 100%;
  text-align: center;
  transition: 0.35s;
  transition-timing-function: cubic-bezier();
}

#home-footer-span-return:hover{
  color: #2e7890!important;
}

.about-contact-toggle-spacing {
  letter-spacing: 0.095em!important;
  color: #2e7890!important;
}


#home-footer-span-work {
  height: auto;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 0.75em!important;
  overflow: hidden;
}

.home-footer-span-work-inner {
  position: relative;
  font-family: monospace!important;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  opacity: 0;
  animation-name: typing;
  animation-duration: 10s;
  animation-timing-function: steps(45,end);
  animation-delay: 0.5s;
  animation-iteration-count: 1;
}

 #home-footer-span-work {
   width: 100%;
   height: 100%;
 }

#home-footer p {
  font-size: 1em;
  letter-spacing: 0.065em;

}

#home-footer p {
  font-size: 1.3em;
  padding-left: 1.3em;
  padding-right: 1.3em;
  padding-top:0;
  padding-bottom:0;

}

#projects-link {
  grid-column:2/3;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}


/** RIGHT SIDE **/

#home-grid-right {
  width: 100%;
  height: calc(140vh - 35px);
  grid-column: 2/3;
  grid-row: 1/2;
  position: absolute;
  z-index: 100;
  display: grid;
  grid-template-columns:100%;
  grid-template-rows: repeat(auto,7);
  letter-spacing: 0.05em;
  /* background-color: black; */
  opacity: 1;
  /* background-image: url('art/gradients/bg gradient-4-01.jpg');
  background-size: cover; */
}

.home-gallery-container {
  width: 100%;
  height: 100%;
  overflow:hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.project-preview-overlay-container {
  width: 30%;
  height: 100%;
  margin: 0 auto;
  align-self: center;
  position: absolute;
  z-index: 6;
  transition: 0.5s;
  transition-timing-function: ease-out;
}

.overlay-inner {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0 auto;
  color: white;
  z-index: 2;
  transition: 0.5s;
  transition-timing-function: ease-out;
  opacity: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.thumbnail-preview {
  position: relative;
  height:calc(20vh - 10px);
  width: calc(80vw + 10px);
  overflow-x: scroll;
  overflow-y: hidden;
  padding-top: 5px;
  padding-bottom: 5px;
  margin: 0;
  align-self: flex-start;
  display: grid;
  grid-template-rows: 100%;
  grid-template-columns: auto;
  /* grid-column-gap: 5px; */
  transition: 1s;
  transition-timing-function: cubic-bezier();
  opacity: 80%;
}

.thumbnail-preview-slide {
  transform: translateX(calc(-20vw - 5px));
}

@keyframes gradient {
  0% {background-position: 0% 50%;}
	80% {background-position: 100% 50%;}
	100% {background-position: 0% 50%;}
}

.video-thumbnail {
  max-width:100%;
  height:inherit;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-color: black;
  position: relative;
  box-shadow: 0 0 150px rgba(0,0,0,0.75) inset;
}

#water-walk-preview {
  grid-column: 1/2;
  grid-row: 1/2;
}

#water-walk-thumbnail-1 {
  grid-column: 2/3;
  background-image:url('thumbs/carlos_antonio_–_walk_on_water (1080p).mp4.00_00_22_20.Still001.jpg');
}

#water-walk-thumbnail-2 {
  grid-column: 1/2;
  background-image: url('thumbs/carlos_antonio_–_walk_on_water (1080p).mp4.00_01_57_17.Still003.jpg');
}

#water-walk-thumbnail-3 {
  grid-column: 3/4;
  background-image:url('thumbs/carlos_antonio_–_walk_on_water (1080p).mp4.00_02_23_04.Still005.jpg');
}

#water-walk-thumbnail-4 {
  grid-column: 4/5;
  background-image: url('thumbs/carlos_antonio_–_walk_on_water (1080p).mp4.00_02_07_16.Still004.jpg');
}

#legos-preview {
  grid-row: 4/5;
  grid-column: 1/2;
}

#legos-thumbnail-1 {
  grid-column: 1/2;
  background-image:url('thumbs/Abby T - Legos (Official Music Video) ft. Rodney Chrome.00_01_22_01.Still006.jpg');
}

#legos-thumbnail-2 {
  grid-column: 4/5;
  background-image:url('thumbs/Abby T - Legos (Official Music Video) ft. Rodney Chrome.00_02_27_14.Still009.jpg');
}

#legos-thumbnail-3 {
  grid-column: 3/4;
  background-image:url('thumbs/Abby T - Legos (Official Music Video) ft. Rodney Chrome.00_03_03_11.Still003.jpg');
}

#legos-thumbnail-4 {
  grid-column: 2/3;
  background-image:url('thumbs/Abby T - Legos (Official Music Video) ft. Rodney Chrome.00_02_36_03.Still011.jpg');
}

#snailmail-preview {
  grid-row:2/3;
  grid-column: 1/2;
}

#snailmail-thumbnail-1 {
  grid-column: 1/2;
  background-image: url('thumbs/snail mail.00_00_21_15.Still002.jpg');
}

#snailmail-thumbnail-2 {
  grid-column: 4/5;
  background-image: url('thumbs/snail mail.00_02_55_16.Still007.jpg');
}

#snailmail-thumbnail-3 {
  grid-column: 3/4;
  background-image: url('thumbs/snail mail.00_02_10_04.Still005.jpg');

}

#snailmail-thumbnail-4 {
  grid-column: 2/3;
  background-image: url('thumbs/snail mail.00_01_04_17.Still003.jpg');
}

/* #snailmail-thumbnail-5 {
  grid-column: 5/6;
  background-image: url('thumbs/snail mail.00_01_53_17.Still004.jpg');
} */

#down-preview {
  grid-row: 5/6;
  grid-column: 1/2;
}

#down-thumbnail-1 {
  grid-column:1/2;
  background-image: url('thumbs/down.webm.00_02_01_13.Still003.jpg');
}

#down-thumbnail-2 {
  grid-column:2/3;
  background-image: url('thumbs/Sabrina Song - Down.00_01_43_18.Still005.jpg');
}

#down-thumbnail-3 {
  grid-column: 3/4;
  background-image: url('thumbs/down.webm.00_02_29_14.Still007.jpg');
}

#down-thumbnail-4 {
  grid-column: 4/5;
  background-image: url('thumbs/down.webm.00_02_38_16.Still008.jpg');
}

/* #down-thumbnail-5 {
  grid-column: 5/6;
  background-image: url('thumbs/down.webm.00_01_03_15.Still002.jpg');
} */

#doors-preview {
  grid-row: 3/4;
  grid-column: 1/2;
}

#doors-thumbnail-1 {
  grid-column:1/2;
  background-image: url('thumbs/Sabrina Song - Doors.00_01_16_21.Still002.jpg');
}

#doors-thumbnail-2 {
  grid-column:2/3;
  background-image: url('thumbs/videoplayback.webm.00_00_25_06.Still001.jpg');
}

#doors-thumbnail-3 {
  grid-column:3/4;
  background-image: url('thumbs/Sabrina Song - Doors.00_01_50_20.Still004.jpg');
}

#doors-thumbnail-4 {
  grid-column:4/5;
  background-image: url('thumbs/Sabrina Song - Doors.00_02_29_04.Still007.jpg');
}

/* #doors-thumbnail-5 {
  grid-column:5/6;
  background-image: url('thumbs/videoplayback.webm.00_02_32_02.Still002.jpg');
} */

#summer-clothes-preview {
  grid-row:6/7;
  grid-column: 1/2;
}

#summer-clothes-thumbnail-1 {
  grid-column:1/2;
  background-image: url('thumbs/summer clothes.webm.00_03_54_16.Still028.jpg');
}

#summer-clothes-thumbnail-2 {
  grid-column:2/3;
  background-image: url('thumbs/summer clothes.webm.00_03_29_14.Still025.jpg');
}

#summer-clothes-thumbnail-3 {
  grid-column:3/4;
  background-image: url('thumbs/summer clothes.webm.00_03_03_03.Still022.jpg');
}

#summer-clothes-thumbnail-4 {
  grid-column:4/5;
  background-image: url('thumbs/summer clothes.webm.00_03_58_06.Still029.jpg');
}

/* #summer-clothes-thumbnail-5 {
  grid-column:5/6;
  background-image: url('thumbs/summer clothes.webm.00_02_24_02.Still013.jpg');
} */

#ispy-preview {
  grid-row:6/7;
  grid-column: 1/2;
}

#ispy-thumbnail-1 {
  grid-column: 1/2;
  background-image: url('thumbs/ispy.webm.00_01_43_13.Still013.jpg');
}

#ispy-thumbnail-2 {
  grid-column: 2/3;
  background-image: url('thumbs/ispy.webm.00_00_04_00.Still002.jpg');
}

#ispy-thumbnail-3 {
  grid-column: 3/4;
  background-image: url('thumbs/ispy.webm.00_01_10_03.Still010.jpg');
}

#ispy-thumbnail-4 {
  grid-column: 4/5;
  background-image: url('thumbs/ispy.webm.00_00_12_04.Still001.jpg');
}


/* ANIMATIONS */

.maindiv-slide {
  animation-name: maindiv-slide;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-direction: normal;
  animation-timing-function:cubic-bezier();
}

@keyframes maindiv-slide {
  from {left:0vw;}
  to {left:2vw;}
}

.maindiv-slide-return {
  animation-name: maindiv-slide-return;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-direction: normal;
  animation-timing-function:cubic-bezier();
}

@keyframes maindiv-slide-return {
  from {left:2vw;}
  to {left:0vw;}
}

.maindiv-disappear {
  animation-name: maindiv-disappear;
  animation-duration: 1.5s;
  animation-fill-mode: both;
  animation-direction: normal;
  animation-timing-function:cubic-bezier();
}

@keyframes maindiv-disappear {
  from {z-index:0;}
  to {z-index:-10;}
}

@keyframes typing {
  0% {width:0;opacity:0;}
  5% {width:5%;opacity: 1;}
  20% {opacity:0.5;}
  35% {opacity:1;}
  40% {width:100%;}
  50% {opacity: 0.25;}
  70% {opacity: 1}
  90% {opacity: 0.5;}
  100% {opacity: 0;}
}

/* TRANSITIONS */


.slide-onhover-up, .slide-onhover-down {
  transition: 0.35s;
  transition-timing-function: cubic-bezier();
}

.slide-onhover-up {
}

.slide-onhover-down {

}

.slide-onhover-up-animate {
  transform: translateY(-1vh);
}

.slide-onhover-down-animate {
  transform: translateY(1vh);
}

.slide-onhover-left-animate {
  transform: translateX(10px);
}


/* ABOUT */

#home-grid-about {
  width: 40vw;
  height: 100%;
  overflow-y: scroll;
  position: fixed;
  right: -40vw;
  top: 0;
  color: white;
  transition: 0.5s;
  transition-timing-function: cubic-bezier();
  z-index: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

#home-about-page-container {
  width: auto;
  height: auto;
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto 10%;
  grid-template-columns: auto;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10vh;
}

#bio {
  grid-row: 3/4;
  grid-column: 1/2;
  position: relative;
  width: 70%;
  margin: 0;
  margin-left: 15%;
  padding: 0;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

#bio p {
  /* align-self: flex-start; */
  padding-bottom: 30px;
  line-height: 150%;
}

#home-about-page-container div p, #home-about-page-container div div p {
  letter-spacing: 0.065em;
}

#home-about-page-footer {
  grid-row: 5/6;
  grid-column: 1/2;
  width: inherit;
  height: auto;
  align-self: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 0;
  margin: 0 auto;
  position: fixed;
  bottom: 0;
  z-index: 225!important;
  background-image: linear-gradient(to bottom, rgba(255,0,0,0), rgba(0,0,0,1) 70%);
}

#about-emilymiller {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 25%;
  height: auto;
  position: relative;
  margin: 0 auto;
  padding: 3em;
}

#about-page-return {
  width: auto;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content:flex-start;
  align-items:flex-start;
  z-index: 3;
}

#return-text {
  transition: 0.35s;
  transition-timing-function: cubic-bezier();
  text-align: center;
  font-size: 1.3em;
  padding-left: 3em;
  padding-right: 3em;
  padding-top:1.3em;
  padding-bottom: 1.3em;
  margin-top: 2em;
  margin-bottom: 2em;
  cursor: pointer;
  /* line-height: 80%; */
}

#return-text:hover {
  color:#2e7890!important;
}

#about-page-inner-contact {
  grid-row: 2/3;
  grid-column: 1/2;
  width: 70%;
  height: auto;
  margin: 0 auto;
  margin-bottom: 3em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1.3em;
}

#about-page-inner {
  grid-row: 4/5;
  grid-column: 1/2;
  width: 100%;
  height: auto;
  margin-top: calc(2em - 30px);
  margin-bottom: calc(10vh + 3em);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.3em;
}

#socials-header {
  width: 80%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#socials-header p {
  text-align: center;
  font-size: 1.3em;
  padding: 0.6em;
}

#socials {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
}

.socials-container {
  width: 35px;
  height: 35px;
  padding: 0;
  margin: 0 auto;
  list-style: none;
  position: relative;
  background-size: cover;
  background-position: center center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.socials {
  width: 100%;
  height: 100%;
  position: absolute;
  margin: 0 auto;
  padding: 0;
  transition-duration: 0.35s;
  transition-timing-function: ease-in;
  cursor: pointer;
}

.socials-default-fadeout {
  opacity: 0!important;
}

.socials-default {
  z-index: 101;
  opacity: 1;
}

.socials-active {
  opacity: 0;
  z-index:102;
}

.socials-active-fadein {
  opacity: 1!important;
}

/* PRELOAD SOCIAL ICONS */


.home-container-slide {
  transform: translateX(-40vw)!important;
}

.home-about-container-slide {
  right:0!important;
}

.home-container-slide-return {
  transform: translateX();
}

.home-container-toggle-about {
  transform: translateX(-38vw)!important;
}