/* //////////////////////////////////////////////////////////////////////////////////////////////// */
/* GRIDS */
/* //////////////////////////////////////////////////////////////////////////////////////////////// */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* Home ///////////////////////////////////////////////////////////////////////////////////////////*/
.grid-main {
  display: grid;
  width: 100%;
  height: 100vh;
  grid-template-columns: 56.8% 14.1% 29.1%;
  grid-template-rows: 15.9% 75.8% 8.1%;
}

.grid-logo {
  display: grid;
  width: 100%;
  margin-top: 2rem;
  margin-left: 2rem;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-template-columns: 3.5% 3.5%;
  grid-template-rows: auto;
}

.grid-tagline {
  display: grid;
  width: 100%;
  text-align: right;
  margin-top: 2rem;
  grid-column-start: 3;
  grid-row-start: 1;
  grid-template-columns: auto;
  grid-template-rows: auto;
}

.grid-about {
  display: grid;
  width: 100%;
  margin-left: 2rem;
  grid-column-start: 1;
  grid-row-start: 2;
  grid-template-columns: auto;
  grid-template-rows: auto;
}

.grid-about .about-buttons {
  display: grid;
  width: 100%;
  padding-top: 1.5rem;
  grid-template-columns: 8% 16% 76%;
  grid-template-rows: auto;
}

.grid-projects {
  display: grid;
  width: 100%;
  padding-right: 8rem;
  grid-column-start: 3;
  grid-row-start: 2;
  grid-template-columns: auto;
  grid-template-rows: 3% 1.5% 6.5% 6.5% 6.5% 6.5% 6.5% 4% 3% 1.5% 6.5% 6.5% 6.5% 6.5%;
}

.project-selection {
  display: grid;
  width: 100%;
  grid-template-columns: auto;
  grid-template-rows: auto;
}

.grid-contact {
  display: grid;
  width: 100%;
  margin-left: 2rem;
  margin-bottom: 2rem;
  grid-column-start: 1;
  grid-row-start: 3;
  grid-template-columns: 23% 23% 71%;
  grid-template-rows: auto;
}

/* Projects ///////////////////////////////////////////////////////////////////////////////////////////*/

/* Navigation Elements */
.back-button {
  position: fixed;
  margin-top: 2rem;
  margin-left: 2rem;
  border: none;
  z-index: 200;
}

.nav {
  top: 0;
  border: none;
  position: sticky;
  /* z-index: -10; */
}

/* Header */
.grid-hero-banner {
}

/* Main */
.grid-main-project {
  display: grid;
  margin-top: 1.5rem;
  margin-left: 18rem;
  margin-right: 18rem;
  grid-template-rows: auto;
}

/* Details */
.project-details {
  display: grid;
  padding-bottom: 2.5rem;
  grid-template-columns: 50% 50%;
  grid-template-rows: 55% 45%;
  border-bottom: 3px solid #000;
}

.project-timeline {
  display: grid;
  align-items: center;
  text-align: center;
  grid-column-start: 1;
  grid-row-start: 2;
}

.project-slide-deck {
  display: grid;
  align-items: center;
  text-align: right;
  grid-column-start: 2;
  grid-row-start: 2;
}

.project-content {
  display: grid;
  padding-top: 5rem;
  grid-template-columns: 27% 73%;
  grid-template-rows: auto;
}

.body-contents {
}

.extra-details {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto;
}

.side-details {
  display: grid;
  grid-template-columns: 15% 85%;
  grid-template-rows: auto;
}

/* //////////////////////////////////////////////////////////////////////////////////////////////// */
/* GRIDS END */
/* //////////////////////////////////////////////////////////////////////////////////////////////// */

/* //////////////////////////////////////////////////////////////////////////////////////////////// */
/* MEDIA QUERIES */
/* //////////////////////////////////////////////////////////////////////////////////////////////// */

/* Mobile */
@media all and (min-width: 425px) { \
  /* .grid-main {
		background-color: orange;
	} */
}

/* Tablet */
@media all and (min-width: 768px) {
  /* .grid-main {
		background-color: red;
	} */
}

/* Laptop (Small) */
@media all and (max-width: 1024px) {
  .grid-main {
    grid-template-columns: auto;
    grid-template-rows: 15.9% 75.8% 8.1%;
	}

  /* Top Bar */
  .grid-main .grid-logo img {
    width: 19px;
  }

  .grid-tagline .tagline-body {
    font-size: 12px;
  }

  /* Hero Text */
  .grid-about .about-body {
    font-size: 40px;
    letter-spacing: 1.25%;
    line-height: 50px;
  }

  /* More Text */
  .about-body #more-text {
    padding-top: 1.35rem;
    font-size: 23px;
  }

  /* Project Type */
  .project-selection #type {
    font-size: 16px;
  }

  /* Hero Buttons */
  .grid-about .about-buttons {
    padding-top: 1.25rem;
    grid-template-columns: 11.5% 16% 71.5%;
  }
  .about-buttons img {
    width: 73px;
  }

  /* Projects */
  .grid-projects {
    margin-left: 2rem;
    padding-top: 5rem;
    grid-column-start: 1;
    grid-row-start: 3;
  }
  .grid-projects .projects-design {
    font-size: 11px;
    border-bottom: 2.9px solid #222;
  }
  .grid-projects .projects-media {
    font-size: 11px;
    border-bottom: 2.9px solid #222;
  }
  .project-selection .selection {
    font-size: 20px;
  }

  /* Contact */
  .grid-contact {
    grid-column-start: 1;
    grid-row-start: 4;
    grid-template-columns: 26.5% 26.5% 47%;
  }
  .grid-contact .hero-button {
    /* Button */
    padding: 26px 65px 15px 65px;
    border: 2px solid #222;

    /* Text */
    font-size: 26px;
  }
}

/* Laptop (Large) */
@media all and (min-width: 1440px) {
  .grid-main {
    grid-template-columns: 54.8% 10.2% 33%;
	}

  /* Top Bar */
  .grid-main .grid-logo img {
    width: 19px;
  }

  .grid-tagline .tagline-body {
    font-size: 12px;
  }

  /* Hero Text */
  .grid-about .about-body {
    font-size: 40px;
    letter-spacing: 1.25%;
    line-height: 50px;
  }

  /* More Text */
  .about-body #more-text {
    padding-top: 1.35rem;
    font-size: 23px;
  }

  /* Project Type */
  .project-selection #type {
    font-size: 16px;
  }

  /* Hero Buttons */
  .grid-about .about-buttons {
    padding-top: 1.25rem;
    grid-template-columns: 11.5% 16% 71.5%;
  }
  .about-buttons img {
    width: 73px;
  }

  /* Projects */
  .grid-projects .projects-design {
    font-size: 11px;
    border-bottom: 2.9px solid #222;
  }
  .grid-projects .projects-media {
    font-size: 11px;
    border-bottom: 2.9px solid #222;
  }
  .project-selection .selection {
    font-size: 20px;
  }

  /* Contact */
  .grid-contact {
    grid-template-columns: 26.5% 26.5% 47%;
  }
  .grid-contact .hero-button {
    /* Button */
    padding: 26px 65px 15px 65px;
    border: 2px solid #222;

    /* Text */
    font-size: 26px;
  }
}

/* 1920x */
@media all and (min-width: 1920px) {
  .grid-main {
	}

  /* Top Bar */
  .grid-main .grid-logo img {
    width: 19px;
  }

  .grid-tagline .tagline-body {
    font-size: 14px;
  }

  /* Hero Text */
  .grid-about .about-body {
    font-size: 53px;
    letter-spacing: 1.25%;
    line-height: 67px;
  }

  /* More Text */
  .about-body #more-text {
    padding-top: 1.5rem;
    font-size: 30px;
  }

  /* Project Type */
  .project-selection #type {
    font-size: 20px;
  }

  /* Hero Buttons */
  .grid-about .about-buttons {
    padding-top: 1.5rem;
    grid-template-columns: 9.5% 9.5% 79%;
  }
  .about-buttons img {
    width: 73px;
  }

  /* Projects */
  .grid-projects .projects-design {
    font-size: 11px;
    border-bottom: 2.9px solid #222;
  }
  .grid-projects .projects-media {
    font-size: 11px;
    border-bottom: 2.9px solid #222;
  }
  .project-selection .selection {
    font-size: 20px;
  }

  /* Contact */
  .grid-contact {
    grid-template-columns: 23% 23% 71%;
  }
  .grid-contact .hero-button {
    /* Button */
    padding: 23px 75px 15px 75px;
    border: 2px solid #222;

    /* Text */
    font-size: 26px;
  }
}

/* 4k */
@media all and (min-width: 2560px) {
  /* .grid-main {
		background-color: blue;
	} */

  /* Top Bar */
  .grid-main .grid-logo img {
    width: 25px;
  }

  .grid-tagline .tagline-body {
    font-size: 16px;
  }

  /* Hero Text */
  .grid-about .about-body {
    font-size: 72px;
    letter-spacing: 1.35%;
    line-height: 78px;
  }

  /* More Text */
  .about-body #more-text {
    padding-top: 2.5rem;
    font-size: 40px;
  }

  /* Project Type */
  .project-selection #type {
    font-size: 24px;
  }

  /* Hero Buttons */
  .grid-about .about-buttons {
    padding-top: 2.25rem;
    grid-template-columns: 9% 16% 76%;
  }
  .about-buttons img {
    width: 100px;
  }

  /* Projects */
  .grid-projects .projects-design {
    font-size: 15px;
    border-bottom: 3.5px solid #222;
  }
  .grid-projects .projects-media {
    font-size: 15px;
    border-bottom: 3.5px solid #222;
  }
  .project-selection .selection {
    font-size: 30px;
  }

  /* Contact */
  .grid-contact {
    grid-template-columns: 20% 20% 77%;
  }

  .grid-contact .hero-button {
    /* Button */
    padding: 29px 75px 15px 75px;
    border: 3px solid #222;

    /* Text */
    font-size: 46px;
  }
}

/* 4k */
@media all and (min-width: 3840px) {
  .grid-main {
		background-color: yellow;
	}

}

/* //////////////////////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////////////////////// */
/* MEDIA QUERIES PROJECTS*/
/* //////////////////////////////////////////////////////////////////////////////////////////////// */
/* //////////////////////////////////////////////////////////////////////////////////////////////// */

/* Mobile */
@media all and (max-width: 425px) {
  .grid-main-project {
		/* background-color: yellow; */
	}

}

/* Tablet */
@media all and (min-width: 768px) {
  .grid-main-project {
		/* background-color: yellow; */
	}

}

/* Laptop (Small) */
@media all and (min-width: 1024px) {
  .grid-main-project {
		/* background-color: yellow; */
	}

}

/* Laptop (Large) */
@media all and (min-width: 1440px) {
  .grid-main-project {
		/* background-color: yellow; */
	}

}

/* 1920x */
@media all and (min-width: 1920px) {
  .grid-main-project {
		/* background-color: yellow; */
	}

}

/* 2k */
@media all and (min-width: 2560px) {
  .grid-main-project {
		/* background-color: yellow; */
	}

  .project-details #project-title {
    font-size: 50px;
  }

  .project-details #project-type {
    font-size: 43px;
  }

  .project-content #intro {
    font-size: 48px;
  }

}

/* 4k */
@media all and (min-width: 3840px) {
  .grid-main-project {
		/* background-color: yellow; */
	}


}

/* //////////////////////////////////////////////////////////////////////////////////////////////// */
/* MEDIA QUERIES END*/
/* //////////////////////////////////////////////////////////////////////////////////////////////// */