body {
  background-color: #000000;
}

.center {
  /* width: 1px;
  height: 100vh;
  position: fixed;
  z-index: 200;
  background-color: white;
  left: 50%; */
  display: none;
}

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: block;
}

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

#background-image-container {
  display: none;
}

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

/** LEFT SIDE **/

#home-grid-left {
  width: 100%;
  height: 80vh;
  padding-top: 5vh;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
  grid-column: 1/2;
  grid-row: 1/2;
  box-shadow: 0 0 500px rgba(0,0,0,1) inset;
  display: grid;
  grid-template-rows: auto 50% auto;
  grid-template-columns: 100%;
  grid-row-gap: 1em;
  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,1fr);
  grid-row-gap: 2em;
  justify-content: center;
  align-items: center;
}

#home-header span {
  height: auto;
  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;
}

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

#polaroid {
  width: auto;
  height: 100%;
  grid-row:2/3;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  transform: translateY(5%);
}

#polaroid-img {
  width:auto;
  max-height: 70%;
  position: absolute;
  top: 4%;
  z-index: 3;
  /* filter: drop-shadow(#be6a78 0rem 2.75rem 80px); */
}

#em-producer-creative-img {
  width:auto;
  max-height: 35%;
  position: absolute;
  top: 53%;
  z-index: 4;
  /* filter: drop-shadow(#be6a78 0rem 1.75rem 80px); */
}

#home-footer {
  grid-row:3/4;
  grid-column: 1/2;
  width: 100%;
  height: auto;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto auto;
  /* grid-row-gap: 25px; */
  justify-content: center;
  align-items: center;
  position: relative;
}

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

#home-footer-span-p, #mobile-work p {
  width:100%;
  height: auto;
  margin: 0;
  padding: 0;
  font-size: 1.3em;
  line-height: 300%;
  letter-spacing: 0.065em;
  text-align: center;
  transition: 0.35s;
  transition-timing-function: cubic-bezier();
}

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

#home-footer-span-return, #mobile-work {
  width: 100%;
  cursor: pointer;
}

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

#home-footer-span-return p, #mobile-work p {
  padding: 0;
  margin: 0;
}

#mobile-work {
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  /* margin-top: 1em; */
}

.mobile-work-arrow {
  height: 1.6em;
  width: auto;
  display: none;
  transition: 0.25s;
  transition-timing-function: cubic-bezier();
}

#home-footer-span-return img {
  right:0;
}

#mobile-work img {
  left:0;
  transform: rotate(90deg);
}

#home-footer-span-return img {
  transform: rotate(-90deg);
}

#mobile-work-button {
  width: auto;
  height: auto;
  margin: 0 auto;
  padding: 1em;
  /* padding-left: 1.5rem;
  padding-right: calc(1.5rem + 25px); */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#mobile-work-arrow {
  transform: rotate(90deg);
}


/** WORK GRID **/

#home-grid-right {
  width: 100%;
  height: calc((35vw - 10px) * 7);
  position: relative;
  grid-column: 1/2;
  grid-row: 2/3;
  z-index: 100;
  display: grid;
  grid-template-columns:auto;
  grid-template-rows: repeat(calc(35vw - 10px),7) auto;
  letter-spacing: 0.05em;
  background-color: black;
  opacity: 1;
}

.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: 100%;
  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;
}

.fixed-text {
  width: 70%;
  height: calc(35vw - 12px);
  transition: 0.35s;
  transition-timing-function: cubic-bezier();
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* padding: 1em; */
  /* position: relative; */
}

.fixed-text p:nth-child(1) {
  position: absolute;
  top: calc((35vw - 10px) / 8);
}

.fixed-text-span {
  width: 100%;
  height: auto;
  cursor: pointer;
  display: flex;
  margin: 0 auto;
  padding: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1em!important;
  position: absolute;
  top: 49%;
}

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

.project-link, .project-link:link, .project-link:active, .project-link:visited {
  opacity: 100%;
  font-size: 0.9em;
  line-height: 250%;
  color: white;
  letter-spacing: 0.075em;
  transition: 0.35s!important;
  transition-timing-function: cubic-bezier();
}

.openlink {
  display: none;
  height: auto;
  width: calc((35vw - 10px) / 12);
  padding: 0;
  margin: 0 auto;
  position: absolute;
  top: calc((100% - ((35vw - 10px) / 12)) / 2);
  right: calc(35vw - 10px);
  transition: 0.35s;
  transition-timing-function: cubic-bezier();
}

.openlink-ready {
  opacity: 1!important;
  height: 1em!important;
  right:10px!important;
  width: auto;
}


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

/* .gradient-animate {
  background: linear-gradient(300deg, rgba(46, 120, 144, 0) 0%, rgba(46, 120, 144, 1) 20%, rgba(46, 120, 144, 0) 90%, rgba(0, 0, 0, 0) 95%);
	background-size: 500% 500%;
	animation: gradient 2.5s infinite;
}

.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 100px 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;}
}

.about-contact-arrow-reverse {
  animation-name: about-contact-arrow-reverse;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-direction: normal;
  animation-timing-function: cubic-bezier();
}

@keyframes about-contact-arrow-reverse {
    from {width: 5%;}
    to {width: 10%;transform:scaleX(-1);}
}

/* TRANSITIONS */

.link-flow {
  letter-spacing: 0.075em!important;
}

.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: 100vw;
  height: 100vh;
  position: absolute;
  top: -100vh;
  z-index: -100;
  color: white;
  transition: 0.5s;
  transition-timing-function: cubic-bezier();
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: black;
  opacity: 0;
  overflow-x: hidden;
  margin-bottom: 10vh;
}

.about-active {
  z-index: 202!important;
  opacity: 1!important;
  top:0!important;
}

#home-about-page-container {
  width: 100%;
  height: 95%;
  position: relative;
  display: grid;
  grid-template-rows: 10vh auto auto auto;
  grid-row-gap: 2em;
  grid-template-columns: 100%;
  justify-content: center;
  align-items: center;
  overflow-y: scroll;
}

#about-emilymiller {
  grid-row: 2/3;
  grid-column: 1/2;
  width: inherit;
  height: auto;
  text-align: center;
  margin: 0 auto;
  position: absolute;
  /* top:0; */
  z-index: -50;
  transform: scale(1.15);
  opacity:0.3;
  transition: left 0.1s ease-out;
}

#bio {
  grid-row: 4/5;
  grid-column: 1/2;
  width: 80%;
  padding-left: 10%;
  padding-right: 10%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  z-index: 205;
}

#bio p {
  line-height: 150%;
  margin-bottom: 25px;
}

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

#home-about-page-footer {
  /* grid-row: 1/2;
  grid-column: 1/2; */
  width: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  z-index: 240;
}

#about-footer-background {
  width: 100%;
  height: 15vh;
  z-index: 50!important;
  position: fixed;
  z-index: 239;
  top: 0;
  left: 0;
  background-image: linear-gradient(to top, rgba(255,0,0,0), rgba(0,0,0,1) 45%);
}

#return-text {
  width: inherit;
  height: auto;
  margin: 0 auto;
  transition: 0.35s;
  transition-timing-function: ease-out;
  color: #2e7890!important;
  padding-top: 2em;
  padding-bottom: 2em;
  padding-right: 3em;
  padding-left: 3em;
  text-align: center;
  font-size: 1.3em;
  cursor: pointer;
  z-index: 230;
}

#about-page-inner-contact {
  grid-row: 3/4;
  grid-column: 1/2;
  width: 80%;
  padding-left: 10%;
  padding-right: 10%;
  padding-top: 1em;
  padding-bottom: 1em;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 1em;
  margin: 0 auto;
  /* z-index: 235; */
  /* position: sticky; */
  top: 15vh;
}

#about-page-inner {
  grid-row: 5/6;
  grid-column: 1/2;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 1em;
  padding-bottom: 2em;
}

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

#socials-header p {
  text-align: center;
  font-size: 2em;
  line-height: 80%;
}

#socials {
  width: 80%;
  height: auto;
  margin-top: 25px;
  display: grid;
  grid-template-columns: repeat(3,33.3%);
  grid-template-rows: 100%;
  justify-content: center;
  align-items: center;
}

.socials-container {
  width: 35px;
  height: 35px;
  padding: 15px;
  list-style: none;
  margin: 0 auto;
  cursor: pointer;
}

.socials {
  width: inherit;
  height: inherit;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  transition: 0.35s;
  transition-delay: 0.05s;
  transition-timing-function: cubic-bezier();
}

.socials-active {
  display: none;
}

.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;
}

#back-to-top {
  width: 100%;
  height: auto;
  background-color: black;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-bottom: 10vh;
}

#back-to-top p {
  color: white;
  font-size: 1em;
  letter-spacing: 0.075em;
  text-align: center;
  line-height: 300%;
  cursor: pointer;
}