.project_image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: auto;
}
.header_image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.footer_image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.more_button {
  display: grid;

  grid-template-rows: 3.6vw;
  grid-template-columns: 20vw 4vw;

  border-bottom-style: solid;
  border-color: #ffeb0000;
  border-width: 0vw;

  box-sizing: content-box;

  transition: border-color 0.6s ease-in-out, border-width 0.6s ease-in-out;
}
.more_button:hover {
  display: grid;

  grid-template-rows: 3.6vw;
  grid-template-columns: 20vw 4vw;

  border-bottom-style: solid;
  border-width: 0.1vw;

  box-sizing: content-box;
}
#text {
  grid-column-start: 1;
  grid-column-end: 1;

  grid-row-start: 1;
  grid-row-end: 1;
}
#icons {
  grid-column-start: 2;
  grid-column-end: 2;

  grid-row-start: 1;
  grid-row-end: 1;
}



.hero_grid {
  display: grid;

  grid-template-rows: 4vw 16vw 4vw;
  grid-template-columns: 2vw 96vw;

  gap: 1vh;
  height: 100%;

  max-width: 100%;
}
#hero {
  grid-column-start: 2;
  grid-column-end: 2;

  grid-row-start: 2;
  grid-row-end: 2;

  position: fixed;
  z-index: -1;
}
.hero_image {
  width: 60%;
  padding-top: 2vw;
  padding-left: 2vw;
}

.header_grid {
  display: grid;

  grid-template-rows: 1.1vw 2vw 1vw 0.2vw;
  grid-template-columns: 1vw 1fr 1fr 1fr 1fr 1fr 1fr 1vw;

  gap: 1vh;
  height: 100%;

  max-width: 100%;

  background-color: #1c1c1c;
  /* opacity: 90%; */
}
#menu_items {
  grid-column-start: 2;
  grid-column-end: 7;

  grid-row-start: 2;
  grid-row-end: 2;

  display: flex;
  gap: 1vw;
}
#menu_line {
  grid-column-start: 1;
  grid-column-end: 9;

  grid-row-start: 4;
  grid-row-end: 4;

  background-color: #ffffff;
}
#name {
  grid-column-start: 7;
  grid-column-end: 8;

  grid-row-start: 2;
  grid-row-end: 2;
}



.portfolio_v2_grid {
  display: grid;

  grid-template-rows: 1.5vw 0.3vw 3vw 0.3vw;
  grid-template-columns: 1fr;

  height: 100%;

  max-width: 100%;

  background-color: #1c1c1c;
}
#white_space {
  grid-column-start: 1;
  grid-column-end: 1;

  grid-row-start: 1;
  grid-row-end: 1;
}
#line_top {
  grid-column-start: 1;
  grid-column-end: 1;

  grid-row-start: 2;
  grid-row-end: 2;
  background-color: #ffffff;
}
#image {
  grid-column-start: 1;
  grid-column-end: 1;

  grid-row-start: 3;
  grid-row-end: 3;
}
#line_bottom {
  grid-column-start: 1;
  grid-column-end: 1;

  grid-row-start: 4;
  grid-row-end: 4;
  background-color: #ffffff;
}

.project_grid {
  display: grid;

  grid-template-rows: 2vw 47vw 9vw 6vw 0.2vw;
  grid-template-columns: 1vw 1fr 1fr 1fr 1fr 1fr 1fr 1vw;

  /* grid-template-columns: 1vw 15vw 15vw 15vw 15vw 15vw 15vw 1vw; */

  gap: 1vh;
  height: 100%;

  max-width: 100%;

  background-color: #1c1c1c;

  overflow-x: hidden;
}
.project_grid_2 {
  display: grid;

  grid-template-rows: 2vw 40vw 9vw 6vw 0.2vw;
  grid-template-columns: 1vw 1fr 1fr 1fr 1fr 1fr 1fr 1vw;

  /* grid-template-columns: 1vw 15vw 15vw 15vw 15vw 15vw 15vw 1vw; */

  gap: 1vh;
  height: 100%;

  max-width: 100%;

  background-color: #1c1c1c;

  overflow-x: hidden;
}
.project_grid_3 {
  display: grid;

  grid-template-rows: 2vw 50vw 9vw 6vw 0.2vw;
  grid-template-columns: 1vw 1fr 1fr 1fr 1fr 1fr 1fr 1vw;

  /* grid-template-columns: 1vw 15vw 15vw 15vw 15vw 15vw 15vw 1vw; */

  gap: 1vh;
  height: 100%;

  max-width: 100%;

  background-color: #1c1c1c;

  overflow-x: hidden;
}
#project_img_one {
  grid-column-start: 2;
  grid-column-end: 4;

  grid-row-start: 2;
  grid-row-end: 2;

  overflow: hidden;
}
#project_img_two {
  grid-column-start: 4;
  grid-column-end: 6;

  grid-row-start: 2;
  grid-row-end: 2;

  overflow: hidden;
}
#project_img_three {
  grid-column-start: 6;
  grid-column-end: 8;

  grid-row-start: 2;
  grid-row-end: 2;

  overflow: hidden;
}
#project_img_four {
  grid-column-start: 2;
  grid-column-end: 8;

  grid-row-start: 2;
  grid-row-end: 2;

  overflow: hidden;
}

#title {
  grid-column-start: 2;
  grid-column-end: 8;

  grid-row-start: 3;
  grid-row-end: 3;
}
#sub_title_one {
  grid-column-start: 2;
  grid-column-end: 5;

  grid-row-start: 4;
  grid-row-end: 4;
}
#sub_title_two {
  grid-column-start: 3;
  grid-column-end: 5;

  grid-row-start: 4;
  grid-row-end: 4;
}
#sub_title_three {
  grid-column-start: 6;
  grid-column-end: 7;

  grid-row-start: 4;
  grid-row-end: 4;
}
#cta_button_text {
  grid-column-start: 7;
  grid-column-end: 8;

  grid-row-start: 4;
  grid-row-end: 4;

}
#cta_button {
  grid-column-start: 7;
  grid-column-end: 8;

  grid-row-start: 4;
  grid-row-end: 4;
}
#line {
  grid-column-start: 1;
  grid-column-end: 10;

  grid-row-start: 5;
  grid-row-end: 5;
  background-color: #ffffff;
}

.more_work_grid {
  display: grid;

  grid-template-rows: 7vw 0.3vw;
  grid-template-columns: 2vw 6vw 1fr 2vw;

  height: 100%;

  max-width: 100%;

  background-color: #1c1c1c;
}
#more_work_button {
  grid-column-start: 2;
  grid-column-end: 2;

  grid-row-start: 1;
  grid-row-end: 1;

  margin-top: auto;
  margin-bottom: auto;
}
#more_work_cta {
  grid-column-start: 3;
  grid-column-end: 3;

  grid-row-start: 1;
  grid-row-end: 1;

  padding-top: 1.3vw;
}
#more_work_line {
  grid-column-start: 1;
  grid-column-end: 4;

  grid-row-start: 2;
  grid-row-end: 2;
  background-color: #ffffff;
}

.about_grid {
  display: grid;

  grid-template-rows: 2vw 10vw 5vw 15vw 10vw 3vw 0.3vw;
  grid-template-columns: 1vw 1fr 1fr 1fr 1fr 1fr 1fr 1vw;

  gap: 1vh;
  height: 100%;

  max-width: 100%;

  background-color: #1c1c1c;
}
#headshot {
  grid-column-start: 2;
  grid-column-end: 4;

  grid-row-start: 2;
  grid-row-end: 6;
}
#about_title {
  grid-column-start: 4;
  grid-column-end: 8;

  grid-row-start: 3;
  grid-row-end: 3;

  padding-left: 1vw;
}
#about_icon {
  grid-column-start: 6;
  grid-column-end: 8;

  grid-row-start: 3;
  grid-row-end: 3;

  padding-left: 1vw;
}
#about_copy {
  grid-column-start: 4;
  grid-column-end: 6;

  grid-row-start: 4;
  grid-row-end: 5;

  padding-left: 1vw;
}
#about_copy_two {
  grid-column-start: 6;
  grid-column-end: 8;

  grid-row-start: 4;
  grid-row-end: 5;

  padding-left: 1vw;
}
#download_resume {
  grid-column-start: 4;
  grid-column-end: 5;

  grid-row-start: 5;
  grid-row-end: 6;

  padding-left: 1vw;
}
#download_resume_button {
  grid-column-start: 5;
  grid-column-end: 6;

  grid-row-start: 5;
  grid-row-end: 6;
}
#download_portfolio {
  grid-column-start: 6;
  grid-column-end: 7;

  grid-row-start: 5;
  grid-row-end: 6;

  padding-left: 1vw;
}
#download_portfolio_button {
  grid-column-start: 7;
  grid-column-end: 8;

  grid-row-start: 5;
  grid-row-end: 6;
}
#about_line {
  grid-column-start: 1;
  grid-column-end: 9;

  grid-row-start: 7;
  grid-row-end: 7;
  background-color: #ffffff;
}

.calder_v2_grid {
  display: grid;

  grid-template-rows: 0.3vw 3vw 0.2vw 1.5vw;
  grid-template-columns: 1fr;

  height: 100%;

  max-width: 100%;

  background-color: #1c1c1c;
}
#calder_line_top {
  grid-column-start: 1;
  grid-column-end: 1;

  grid-row-start: 1;
  grid-row-end: 1;
  background-color: #ffffff;
}
#calder_image {
  grid-column-start: 1;
  grid-column-end: 1;

  grid-row-start: 2;
  grid-row-end: 2;
}
#calder_line_bottom {
  grid-column-start: 1;
  grid-column-end: 1;

  grid-row-start: 3;
  grid-row-end: 3;
  background-color: #ffffff;
}
#calder_white_space {
  grid-column-start: 1;
  grid-column-end: 1;

  grid-row-start: 4;
  grid-row-end: 4;
}

.footer_grid {
  display: grid;

  grid-template-rows: 2vw 3vw 0.2vw 3vw 2vw;
  grid-template-columns: 1vw 1fr 1fr 1fr 1fr 1fr 1fr 1vw;

  gap: 1vh;
  height: 100%;

  max-width: 100%;

  background-color: #ffffff;
}
#footer_name {
  grid-column-start: 2;
  grid-column-end: 9;

  grid-row-start: 2;
  grid-row-end: 2;
}
#footer_icons {
  grid-column-start: 7;
  grid-column-end: 8;

  grid-row-start: 2;
  grid-row-end: 2;
}
#footer_line {
  grid-column-start: 2;
  grid-column-end: 8;

  grid-row-start: 3;
  grid-row-end: 3;
  background-color: #1c1c1c;
}
#footer_text_one {
  grid-column-start: 2;
  grid-column-end: 3;

  grid-row-start: 4;
  grid-row-end: 4;
}
#footer_text_two {
  grid-column-start: 3;
  grid-column-end: 4;

  grid-row-start: 4;
  grid-row-end: 4;
}
#footer_text_three {
  grid-column-start: 4;
  grid-column-end: 5;

  grid-row-start: 4;
  grid-row-end: 4;
}
#footer_text_four {
  grid-column-start: 5;
  grid-column-end: 6;

  grid-row-start: 4;
  grid-row-end: 4;
}



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

  .hero_grid {
    display: grid;

    grid-template-rows: 70vw 28vw 70vw;
    grid-template-columns: 2vw 1fr;

    gap: 1vh;
    height: 100%;

    max-width: 100%;
  }
  #hero {
    grid-column-start: 2;
    grid-column-end: 2;

    grid-row-start: 2;
    grid-row-end: 2;

    position: fixed;
    z-index: -1;
  }
  .hero_image {
    width: 90%;
    padding-top: 70vw;
  }

  .header_grid {
    display: grid;

    grid-template-rows: 1.1vw 4vw 1vw 0.2vw;
    grid-template-columns: 1vw 1fr 1fr 1fr 1fr 1fr 1fr 1vw;

    gap: 1vh;
    height: 100%;

    max-width: 100%;

    background-color: #1c1c1c;
    /* opacity: 90%; */
  }
  #menu_items {
    grid-column-start: 2;
    grid-column-end: 7;

    grid-row-start: 2;
    grid-row-end: 2;

    display: flex;
    gap: 1vw;
  }
  #menu_line {
    grid-column-start: 1;
    grid-column-end: 9;

    grid-row-start: 4;
    grid-row-end: 4;

    background-color: #ffffff;
  }
  #name {
    grid-column-start: 6;
    grid-column-end: 8;

    grid-row-start: 2;
    grid-row-end: 2;
  }

  .portfolio_v2_grid {
    display: grid;

    grid-template-rows: 1.5vw 0.3vw 3vw 0.3vw;
    grid-template-columns: 1fr;

    height: 100%;

    max-width: 100%;

    background-color: #1c1c1c;

    display: none;
  }
  #white_space {
    grid-column-start: 1;
    grid-column-end: 1;

    grid-row-start: 1;
    grid-row-end: 1;
  }
  #line_top {
    grid-column-start: 1;
    grid-column-end: 1;

    grid-row-start: 2;
    grid-row-end: 2;
    background-color: #ffffff;
  }
  #image {
    grid-column-start: 1;
    grid-column-end: 1;

    grid-row-start: 3;
    grid-row-end: 3;
  }
  #line_bottom {
    grid-column-start: 1;
    grid-column-end: 1;

    grid-row-start: 4;
    grid-row-end: 4;
    background-color: #ffffff;
  }

  .project_grid {
    display: grid;

    grid-template-rows: 1.6vw 110vw 3vw 2.6vw 1.6vw 6vw 3vw 1.6vw 0.3vw;
    grid-template-columns: 1vw 1fr 1fr 1fr 1vw;

    /* grid-template-columns: 1vw 15vw 15vw 15vw 15vw 15vw 15vw 1vw; */

    gap: 1vh;
    height: 100%;

    max-width: 100%;

    background-color: #1c1c1c;

    overflow-x: hidden;
  }
  .project_grid_2 {
    display: grid;

    grid-template-rows: 1.6vw 110vw 3vw 2.6vw 1.6vw 6vw 3vw 1.6vw 0.3vw;
    grid-template-columns: 1vw 1fr 1fr 1fr 1vw;

    /* grid-template-columns: 1vw 15vw 15vw 15vw 15vw 15vw 15vw 1vw; */

    gap: 1vh;
    height: 100%;

    max-width: 100%;

    background-color: #1c1c1c;

    overflow-x: hidden;
  }
  .project_grid_3 {
    display: grid;

    grid-template-rows: 1.6vw 110vw 3vw 2.6vw 1.6vw 6vw 3vw 1.6vw 0.3vw;
    grid-template-columns: 1vw 1fr 1fr 1fr 1vw;

    /* grid-template-columns: 1vw 15vw 15vw 15vw 15vw 15vw 15vw 1vw; */

    gap: 1vh;
    height: 100%;

    max-width: 100%;

    background-color: #1c1c1c;

    overflow-x: hidden;
  }
  #project_img_one {
    grid-column-start: 2;
    grid-column-end: 5;

    grid-row-start: 2;
    grid-row-end: 2;

    overflow: hidden;
  }
  #project_img_two {
    grid-column-start: 4;
    grid-column-end: 6;

    grid-row-start: 2;
    grid-row-end: 2;

    overflow: hidden;
    display: none;
  }
  #project_img_three {
    grid-column-start: 6;
    grid-column-end: 8;

    grid-row-start: 2;
    grid-row-end: 2;

    overflow: hidden;
    display: none;
  }
  #project_img_four {
    grid-column-start: 2;
    grid-column-end: 5;

    grid-row-start: 2;
    grid-row-end: 2;
  }
  #title {
    grid-column-start: 2;
    grid-column-end: 5;

    grid-row-start: 3;
    grid-row-end: 3;
  }
  #sub_title_one {
    grid-column-start: 2;
    grid-column-end: 6;

    grid-row-start: 5;
    grid-row-end: 5;
  }
  #sub_title_two {
    grid-column-start: 2;
    grid-column-end: 4;

    grid-row-start: 7;
    grid-row-end: 7;
  }
  #sub_title_three {
    grid-column-start: 2;
    grid-column-end: 4;

    grid-row-start: 7;
    grid-row-end: 7;
  }
  #cta_button_text {
    grid-column-start: 2;
    grid-column-end: 4;

    grid-row-start: 7;
    grid-row-end: 7;

    padding-left: 65vw;

    /* display: none; */
  }
  #cta_button {
    grid-column-start: 4;
    grid-column-end: 6;

    grid-row-start: 7;
    grid-row-end: 7;

    padding-left: 15vw;
  }
  #line {
    grid-column-start: 1;
    grid-column-end: 6;

    grid-row-start: 9;
    grid-row-end: 9;
    background-color: #ffffff;

    /* display: none; */
  }

  .more_button {
    display: grid;

    grid-template-rows: 3.6vw;
    grid-template-columns: 28.2vw 4vw;

    border-bottom-style: solid;
    border-color: #ffeb0000;
    border-width: 0vw;

    box-sizing: content-box;

    transition: border-color 0.6s ease-in-out, border-width 0.6s ease-in-out;
  }
  .more_button:hover {
    display: grid;

    grid-template-rows: 3.6vw;
    grid-template-columns: 28.2vw 4vw;

    border-bottom-style: solid;
    border-color: #ffeb00;
    border-width: 0.1vw;

    box-sizing: content-box;
  }
  #text {
    grid-column-start: 1;
    grid-column-end: 1;

    grid-row-start: 1;
    grid-row-end: 1;
 
  }
  #icons {
    grid-column-start: 2;
    grid-column-end: 2;

    grid-row-start: 1;
    grid-row-end: 1;
  }

  .more_work_grid {
    display: grid;

    grid-template-rows: 12vw 0.6vw;
    grid-template-columns: 1vw 1vw 1fr 1vw;

    height: 100%;

    max-width: 100%;

    background-color: #1c1c1c;

    /* display: none; */
  }
  #more_work_button {
    grid-column-start: 2;
    grid-column-end: 2;

    grid-row-start: 1;
    grid-row-end: 1;

    margin-top: auto;
    margin-bottom: auto;

    display: none;
  }
  #more_work_cta {
    grid-column-start: 3;
    grid-column-end: 3;

    grid-row-start: 1;
    grid-row-end: 1;

    padding-top: 5.3vw;
  }
  #more_work_line {
    grid-column-start: 1;
    grid-column-end: 5;

    grid-row-start: 2;
    grid-row-end: 2;
    background-color: #ffffff;
  }

  .about_grid {
    display: grid;

    grid-template-rows: 2vw 110vw 4vw 18vw 16vw 2vw 0vw 0vw 0.3vw;
    grid-template-columns: 0.1vw 1fr 1fr 1fr 0.1vw;

    gap: 1vh;
    height: 100%;

    max-width: 100%;

    background-color: #1c1c1c;

    /* display: none; */
  }
  #headshot {
    grid-column-start: 2;
    grid-column-end: 5;

    grid-row-start: 2;
    grid-row-end: 2;

    overflow: hidden;
  }
  #about_title {
    grid-column-start: 2;
    grid-column-end: 4;

    grid-row-start: 3;
    grid-row-end: 3;

    padding-left: 1vw;
  }
  #about_icon {
    grid-column-start: 4;
    grid-column-end: 5;

    grid-row-start: 3;
    grid-row-end: 3;

    padding-left: 1vw;

    display: none;
  }
  #about_copy {
    grid-column-start: 2;
    grid-column-end: 5;

    grid-row-start: 4;
    grid-row-end: 4;

    padding-left: 1vw;
  }
  #about_copy_two {
    grid-column-start: 2;
    grid-column-end: 5;

    grid-row-start: 5;
    grid-row-end: 5;

    padding-left: 1vw;
  }
  #download_resume {
    grid-column-start: 2;
    grid-column-end: 4;

    grid-row-start: 7;
    grid-row-end: 7;

    padding-top: 1vw;

    display: none;
  }
  #download_resume_button {
    grid-column-start: 4;
    grid-column-end: 5;

    grid-row-start: 7;
    grid-row-end: 7;

    display: none;
  }
  #download_portfolio {
    grid-column-start: 2;
    grid-column-end: 5;

    grid-row-start: 8;
    grid-row-end: 8;

    padding-top: 1vw;

    display: none;
  }
  #download_portfolio_button {
    grid-column-start: 4;
    grid-column-end: 5;

    grid-row-start: 8;
    grid-row-end: 8;

    display: none;
  }
  #about_line {
    grid-column-start: 1;
    grid-column-end: 5;

    grid-row-start: 9;
    grid-row-end: 9;
    background-color: #ffffff;
  }

  .calder_v2_grid {
    display: grid;

    grid-template-rows: 0.3vw 3vw 0.3vw 1.5vw;
    grid-template-columns: 1fr;

    height: 100%;

    max-width: 100%;

    background-color: #1c1c1c;

    display: none;
  }
  #calder_line_top {
    grid-column-start: 1;
    grid-column-end: 1;

    grid-row-start: 1;
    grid-row-end: 1;
    background-color: #ffffff;
  }
  #calder_image {
    grid-column-start: 1;
    grid-column-end: 1;

    grid-row-start: 2;
    grid-row-end: 2;
  }
  #calder_line_bottom {
    grid-column-start: 1;
    grid-column-end: 1;

    grid-row-start: 3;
    grid-row-end: 3;
    background-color: #ffffff;
  }
  #calder_white_space {
    grid-column-start: 1;
    grid-column-end: 1;

    grid-row-start: 4;
    grid-row-end: 4;
  }

  .footer_grid {
    display: grid;

    grid-template-rows: 2vw 30vw 0.6vw 4vw 4vw 4vw 4vw;
    grid-template-columns: 1vw 1fr 1fr 1fr 1vw;

    gap: 1vh;
    height: 100%;

    max-width: 100%;

    background-color: #ffffff;

    /* display: none; */
  }
  #footer_name {
    grid-column-start: 2;
    grid-column-end: 3;

    grid-row-start: 2;
    grid-row-end: 2;
  }
  #footer_icons {
    grid-column-start: 4;
    grid-column-end: 5;

    grid-row-start: 2;
    grid-row-end: 2;
  }
  #footer_line {
    grid-column-start: 2;
    grid-column-end: 8;

    grid-row-start: 3;
    grid-row-end: 3;
    background-color: #1c1c1c;
  }
  #footer_text_one {
    grid-column-start: 2;
    grid-column-end: 4;

    grid-row-start: 4;
    grid-row-end: 4;
  }
  #footer_text_two {
    grid-column-start: 2;
    grid-column-end: 4;

    grid-row-start: 5;
    grid-row-end: 5;
  }
  #footer_text_three {
    grid-column-start: 2;
    grid-column-end: 4;

    grid-row-start: 6;
    grid-row-end: 6;
  }
  #footer_text_four {
    grid-column-start: 2;
    grid-column-end: 4;

    grid-row-start: 7;
    grid-row-end: 7;
  }
}