html{
  scroll-behavior: smooth;
}

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

a {
  text-decoration: none;
  cursor: pointer;
}

li {
  list-style: none;
}

@font-face {
  font-family: 'Rubik', sans-serif;
  src: url(../assets/fonts/Rubik-VariableFont_wght.ttf)
}

@font-face {
  font-family: 'Rubik Moonrocks', cursive;
  src: url(../assets/fonts/RubikMoonrocks-Regular.ttf)
}

/* -------------------------------------------------------------------------------- Text ------------------------------------------------------------------------------- */
h1 {
  font-family: 'Rubik', sans-serif;
  font-size: 3.5rem;
  font-variation-settings: "wght" 800;
  color: black; 
  letter-spacing: 0.1rem;
  line-height: 4rem;
}

h2 {
  font-family: 'Rubik', sans-serif;
  font-size: 1.5rem;
  font-variation-settings: "wght" 600;
  color: black; 
}

h3 {
  font-family: 'Rubik Moonrocks', cursive;
  font-size: 6rem;
  color: black; 
  letter-spacing: 0.1rem;
  line-height: 6rem;
}

h4 {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-variation-settings: "wght" 400;
  color: black; 
}

p {
  font-family: 'Rubik';
  font-size: .9rem;
  font-variation-settings: "wght" 300;
  color: black;  
  line-height: 1.4rem;
}
/* -------------------------------------------------------------------------------- Font Media Queries ------------------------------------------------------------------------------- */


@media only screen and (max-width: 2560px) {
  html {
    font-size: 100%; 
  } 
  }
/* -------Desktop large----------- */
 @media only screen and (max-width: 1920px) {
  html {
    font-size: 100%; } 
  }
/* -------Laptop large----------- */

@media only screen and (max-width: 1440px) {
  html {
    font-size: 75%; 
  } 
  }

/* -------------------------------------------------------------------------------- Home Page Menu Section ------------------------------------------------------------------------------- */

.menu_button:hover {
  transform: scale(1.2);
  transition: 0.2s;
  cursor: pointer;
}

.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  background-color: black;
  background-color: black;
  overflow-x: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  display: block;
  transition: 0.3s;
}

.overlay .closebtn {
  position: absolute;
  top: 2%;
  right: 2%;
  font-size: 7rem;
  opacity: 0;
  color: #fceed4;
  z-index: 101;
}

.closebtn:hover {
  color: white;
}

.menu_container {  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0 0;
  grid-auto-flow: row;
  grid-template-areas:
    "home project01 project02 project03 project04 project05 project06";
    box-sizing: border-box;
    padding: 0 1% 0 3% ;
}

.home { 
  grid-area: home;
}

.home:hover {
  transform: scale(1.2);
  transition: 0.2s;
}

.project01 { 
  grid-area: project01;
}

.project01:hover {
  transform: scale(1.2);
  transition: 0.2s;
}

.project02 { 
  grid-area: project02;
}

.project02:hover {
  transform: scale(1.2);
  transition: 0.2s;
}

.project03 { 
  grid-area: project03;
}

.project03:hover{
  transform: scale(1.2);
  transition: 0.2s;
}

.project04 { 
  grid-area: project04;
}

.project04:hover {
  transform: scale(1.2);
  transition: 0.2s;
}

.project05 { 
  grid-area: project05;
}

.project05:hover {
  transform: scale(1.2);
  transition: 0.2s;
}

.project06 { 
  grid-area: project06;
}

.project06:hover {
  transform: scale(1.2);
  transition: 0.2s;
}
/* -------------------------------------------------------------------------------- Home Page Header Section ------------------------------------------------------------------------------- */

/* ---------------------HOME:PROJECTS--------------------- */
.projects_section {
  position: relative;
  background-color: #ffedd1;
  width: 100vw;
  height: 180vh;
  z-index: 2;
  overflow: hidden;
}

.title_container {
  position: absolute;
  width: auto;
  height: 25vh;
  top: 8%;
  right: 6%;
  z-index: 20;
}

.home_title {
  text-align: right;
  animation: home_title 1.5s ease-in-out 0s 1 normal forwards;
}

@keyframes home_title {
	0% {
		opacity: 0;
		transform: translateX(250px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.name_title {
  text-align: right;
  animation: name_title  1.5s ease-in-out 0s 1 normal forwards;
}

@keyframes name_title  {
	0% {
		opacity: 0;
		transform: translateX(250px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.projects_bg_img_container {
  position: absolute;
  width: 100vw;
  height: 180vh;
  top: -0.8%;
  left: -3%;
  z-index: 1;
}

/* -------Laptop large----------- */

@media only screen and (max-width: 1440px) {
  .projects_bg_img_container {
    top: 5%;
  }

}

.exploding_head {
  width: 100%;
  height: auto;
}

.projects_container {
  position: absolute;
  width: 100vw;
  height: 100vh;
  padding: 5rem;
  z-index: 10;
}

.juicebox01 {
  position: absolute;
  width: 15%;
  height: auto;
  rotate: -20deg;
  top: 8%;
  left: 15%;
  z-index: 1;
  animation: juicebox01 4s ease 0s infinite alternate-reverse none;
}

.juicebox01:hover {
  transform: scale(1.2);
  transition: 0.2s;
  z-index: 3;
  rotate: -4deg;
  animation: none;
}

@keyframes juicebox01 {
	0% {
		animation-timing-function: ease-in-out;
		opacity: 1;
		transform: translateY(10px);
	}

  100% {
		animation-timing-function: ease-in-out;
		opacity: 1;
		transform: translateY(-10px);
	}
}

.juicebox02 {
  position: absolute;
  width: 15%;
  height: auto;
  rotate: 45deg;
  top: 50%;
  left: 56%;
  z-index: 1;
  animation: juicebox02 3s ease-in-out 0s infinite alternate none;
}

.juicebox02:hover {
  transform: scale(1.2);
  transition: 0.2s;
  z-index: 3;
  rotate: -3deg;
  animation: none;
}

@keyframes juicebox02 {
	0% {
		animation-timing-function: ease-in-out;
		opacity: 1;
		transform: translateY(10px);
	}

  100% {
		animation-timing-function: ease-in-out;
		opacity: 1;
		transform: translateY(-10px);
	}
}

.juicebox03 {
  position: absolute;
  width: 15%;
  height: auto;
  rotate: -40deg;
  top: 46%;
  left: 15%;
  z-index: 2;
  animation: juicebox03 3s ease-in-out 0s infinite alternate none;
}

.juicebox03:hover {
  transform: scale(1.2);
  transition: 0.2s;
  z-index: 3;
  rotate: -3deg;
  animation: none;
}

@keyframes juicebox03 {
	0% {
		animation-timing-function: ease-in-out;
		opacity: 1;
		transform: translateY(-10px);
	}

  100% {
		animation-timing-function: ease-in-out;
		opacity: 1;
		transform: translateY(10px);
	}
}

.juicebox04 {
  position: absolute;
  width: 15%;
  height: auto;
  rotate: 5deg;
  top: 15%;
  left: 44%;
  z-index: 1;
  animation: juicebox04 4s ease-in-out 0s infinite alternate none;
}

.juicebox04:hover {
  transform: scale(1.2);
  transition: 0.2s;
  z-index: 3;
  rotate: -3deg;
  animation: none;
}

@keyframes juicebox04 {
	0% {
		animation-timing-function: ease-in-out;
		opacity: 1;
		transform: translateY(-10px);
	}

  100% {
		animation-timing-function: ease-in-out;
		opacity: 1;
		transform: translateY(10px);
	}
}

.juicebox05 {
  position: absolute;
  width: 15%;
  height: auto;
  rotate: -15deg;
  top: 15%;
  left: 30%;
  z-index: 2;
  animation: juicebox05 4s ease-in-out 0s infinite alternate none;
}

.juicebox05:hover {
  transform: scale(1.2);
  transition: 0.2s;
  z-index: 3;
  rotate: -3deg;
  animation: none;
}

@keyframes juicebox05 {
	0% {
		animation-timing-function: ease-in-out;
		opacity: 1;
		transform: translateY(-10px);
	}

  100% {
		animation-timing-function: ease-in-out;
		opacity: 1;
		transform: translateY(10px);
	}
}

.juicebox06 {
  position: absolute;
  width: 15%;
  height: auto;
  rotate: -25deg;
  top: 45%;
  left: 34%;
  z-index: 2;
  animation: juicebox05 4s ease-in-out 0s infinite alternate none;
}

.juicebox06:hover {
  transform: scale(1.2);
  transition: 0.2s;
  z-index: 3;
  rotate: -3deg;
  animation: none;
}

@keyframes juicebox06 {
	0% {
		animation-timing-function: ease-in-out;
		opacity: 1;
		transform: translateY(-10px);
	}

  100% {
		animation-timing-function: ease-in-out;
		opacity: 1;
		transform: translateY(10px);
	}
}


.splash01 {
  position : absolute ;
  rotate: -4deg;
  left : 27%;
  top : 72%;
  width: 12%;
  height: auto;
  z-index: 2;
  animation: splash01 4s ease-in-out 0s infinite alternate none;
}

@keyframes splash01 {
	0% {
		animation-timing-function: ease-in-out;
		opacity: 1;
		transform: translateY(-10px);
	}

  100% {
		animation-timing-function: ease-in-out;
		opacity: 1;
		transform: translateY(10px);
	}
}

.splash02 {
  position : absolute ;
  left : 78%;
  top : 50%;
  width: 11%;
  height: auto;
  rotate: 10deg;
  animation: splash02 3s ease-in-out 0s infinite alternate none;
}

@keyframes splash02 {
	0% {
		animation-timing-function: ease-in-out;
		opacity: 1;
    transform: translateY(10px);
	}

  100% {
		animation-timing-function: ease-in-out;
		opacity: 1;
    transform: translateY(-10px);
	}
}

.splash03 {
  position : absolute ;
  left : 45%;
  top : 45%;
  width: 17%;
  z-index: 2;
  rotate: -10deg;
  height: auto;
  animation: splash03 3s ease-in-out 0s infinite alternate none;
}

@keyframes splash03 {
	0% {
		animation-timing-function: ease-in-out;
		opacity: 1;
    transform: translateY(-10px);
	}

  100% {
		animation-timing-function: ease-in-out;
		opacity: 1;
    transform: translateY(10px);
	}
}

.splash04 {
  position : absolute ;
  left : 3%;
  top : 39%;
  width: 9%;
  height: auto;
  z-index: 1;
  animation: splash04 3s ease-in-out 0s infinite alternate none;
}

@keyframes splash04 {
	0% {
		animation-timing-function: ease-in-out;
		opacity: 1;
    transform: translateY(-10px);
	}

  100% {
		animation-timing-function: ease-in-out;
		opacity: 1;
    transform: translateY(10px);
	}
}

.splash05 {
  position : absolute ;
  left : 30%;
  top : 23%;
  width: 15%;
  height: auto;
  rotate: -40deg;
  animation: splash05 3s ease-in-out 0s infinite alternate none;
}

@keyframes splash05 {
	0% {
		animation-timing-function: ease-in-out;
		opacity: 1;
    transform: translateY(-10px);
	}

  100% {
		animation-timing-function: ease-in-out;
		opacity: 1;
    transform: translateY(10px);
	}
}

.splash06 {
  position : absolute ;
  left : 65%;
  top : 5%;
  width: 4%;
  height: auto;
  animation: splash06 3s ease-in-out 0s infinite alternate none;
}

@keyframes splash06 {
	0% {
		animation-timing-function: ease-in-out;
		opacity: 1;
    transform: translateY(-10px);
	}

  100% {
		animation-timing-function: ease-in-out;
		opacity: 1;
    transform: translateY(10px);
	}
}

.splash07 {
  position : absolute ;
  left : 48%;
  top : 72%;
  width: 12%;
  height: auto;
  z-index: 2;
  rotate: 10deg;
  animation: splash07 3s ease-in-out 0s infinite alternate none;
}

@keyframes splash07 {
	0% {
		animation-timing-function: ease-in-out;
		opacity: 1;
    transform: translateY(-10px);
	}

  100% {
		animation-timing-function: ease-in-out;
		opacity: 1;
    transform: translateY(10px);
	}
}

.splash08 {
  position : absolute ;
  left : 90%;
  top : 70%;
  width: 6%;
  height: auto;
  animation: splash08 3s ease-in-out 0s infinite alternate none;
}

@keyframes splash08 {
	0% {
		animation-timing-function: ease-in-out;
		opacity: 1;
    transform: translateY(-10px);
	}

  100% {
		animation-timing-function: ease-in-out;
		opacity: 1;
    transform: translateY(10px);
	}
}

.splash09 {
  position : absolute ;
  left : 5%;
  top : 65%;
  width: 13%;
  rotate: -30deg;
  height: auto;
  animation: splash09 2.5s ease-in-out 0s infinite alternate none;
}

@keyframes splash09 {
	0% {
		animation-timing-function: ease-in-out;
		opacity: 1;
    transform: translateY(-10px);
	}

  100% {
		animation-timing-function: ease-in-out;
		opacity: 1;
    transform: translateY(10px);
	}
}

.splash10 {
  position : absolute ;
  left : 5%;
  top : 5%;
  width: 4%;
  height: auto;
  rotate: -20deg;
  animation: splash10 2.5s ease-in-out 0s infinite alternate none;
}

@keyframes splash10 {
	0% {
		animation-timing-function: ease-in-out;
		opacity: 1;
    transform: translateY(-10px);
	}

  100% {
		animation-timing-function: ease-in-out;
		opacity: 1;
    transform: translateY(10px);
	}
}

.splash11 {
  position : absolute ;
  left : 35%;
  top : 5%;
  width: 5%;
  height: auto;
  animation: splash11 2.5s ease-in-out 0s infinite alternate none;
}

@keyframes splash11 {
	0% {
		animation-timing-function: ease-in-out;
		opacity: 1;
    transform: translateY(-10px);
	}

  100% {
		animation-timing-function: ease-in-out;
		opacity: 1;
    transform: translateY(10px);
	}
}

/* -------------------------------------------------------------------------------- Home Page Showreel Section ------------------------------------------------------------------------------- */


/* -------------------SHOWREEL-------------------- */
.showreel_section {
  position: relative;
  background-color: black;
  width: 100VW;
  height: 100vh;
  z-index: 2;
  overflow: hidden;
}

.showreel_container {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
}

/* -------------------WAVES-------------------- */
.wave_about_top{
  position: relative;
}

.waves_about_bottom {
  position: relative;
  background-color: black;
  height: 15vh;
  width: 100vw;
}

.waves_section_top{
  position: absolute;
  width: 100vw;
  height: 15vh;
  bottom: 0;
  z-index: 3;
}

.waves_section_bottom {
  position: relative;
  width: 100vw;
  height: 15vh;
}

.waves_bottom {
  position: relative;
  width: 100%;
  height: 15vh;
}

.waves {
  position: absolute;
  width: 100%;
  height: 15vh;
}

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}
/* -------------------------------------------------------------------------------- Home Page About Section ------------------------------------------------------------------------------- */
/* ---------------------HOME:ABOUT--------------------- */
.about_section {
  position: relative;
  width: 100VW;
  height: 100vh;
  background-color: #ffedd1;
}

.about_text_container {
  position: absolute;
  width: 50vw;
  height: auto;
  left: 38%;
  box-sizing: border-box;
  padding:  5%;
  z-index: 40;
}

.about_title {
  text-align: left;
}

.about_bg_img {
  position: absolute;
  width: 100vw;
  height: auto;
  z-index: 30;
  top: 0;
}

.about_text {
  text-align: justify;
  box-sizing: border-box;
  padding: 3% 11% 1% 1%;
  line-height: 1.7rem;
}
/* -------------------------------------------------------------------------------- Home Page Connect Section ------------------------------------------------------------------------------- */
/* ---------------------HOME:CONNECT--------------------- */
.connect_section {
  position: relative;
  background-color: #ffedd1;
  width: 100VW;
  height: 80vh;

}

.connect_text {
  position: absolute;
  box-sizing: border-box;
  width: 35vw;
  height: auto;
  padding: 3.2%;
  top: 6%;
  left: 60%;
  z-index: 40;
}


.connect_context {
  width: 90%;
  height: auto;
  line-height: 1.7rem;
}

.connect_bg_img {
  position: absolute;
  width: 100vw;
  height: auto;
  bottom: 0;
  left: -1%;
  z-index: 35;
}

.contact_info_container {  
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "contact_info_title"
    "connect_link01"
    "connect_link02"
    "connect_link03"
    "process_work_title"
    "connect_link_process";
  width: 35%;
  height: 30%;
  box-sizing: border-box;
  padding: 7% 4% 0 20%;
  z-index: 50;

}

.contact_info_title { grid-area: contact_info_title;
  z-index: 50; }

.connect_link01 { 
  grid-area: connect_link01;
  z-index: 50; 
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-variation-settings: "wght" 400;
  color: black; }


.connect_link02 { 
  grid-area: connect_link02;
  z-index: 50; 
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-variation-settings: "wght" 400;
  color: black; 
}

.connect_link03 { 
  grid-area: connect_link03;
  z-index: 50; 
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-variation-settings: "wght" 400;
}

.process_work_title { 
  grid-area: process_work_title;
  z-index: 50; 
}

.connect_link_process { 
  grid-area: connect_link_process;
  z-index: 50; 
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-variation-settings: "wght" 400;
}

a:link {
  color: black;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: black;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: #ffedd1;
  background-color: transparent;
}

a:active {
  color: #feaa73;
  background-color: transparent;
  text-decoration: none;
}

/* -------------------------------------------------------------------------------- PROJECT TEMPLATE ------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- PROJECT TEMPLATE------------------------------------------------------------------------------- */
/* __________PROJECT COVER & INFO_________ */

.menu_button {
  position: fixed;
  width: 3.5%;
  height: auto;
  top: 2%;
  right: 2%;
  z-index: 100;
}

.cover_section{
  position: relative;
  width: 100vw;
  height: 100vh;
}

.project_splash_container {
  position: absolute;
  width: 30vw;
  top: 55vh;
  left: 19vw;
  height: auto;
  z-index: 5;
  animation: splash 1s ease 1 normal forwards;
}

@keyframes splash {
	0% {
		transform: scale(0);
		transform-origin: 50% 100%;
	}

	100% {
		transform: scale(1);
		transform-origin: 50% 100%;
	}
}

.cover_img {
  position: absolute;
  width: 100vw;
  height: auto;
  z-index: 0;
}

.project_intro_section {
  position: relative;
  width: 100vw;
  height: 55vh;
  background-color: white;
  overflow: hidden;
}

.straw01_container {
  position: absolute;
  width: 60vw;
  top: 1%;
  height: auto;
  z-index: 4;
}

.straw02_container {
  position: absolute;
  width: 60vw;
  top: 1%;
  height: auto;
  z-index:3 ;
}

.straw06_1_container {
  position: absolute;
  width: 60vw;
  top: -13%;
  height: auto;
  z-index: 4;
}

.straw06_2_container {
  position: absolute;
  width: 60vw;
  top: 13%;
  left: -4%;
  height: auto;
  z-index:3 ;
}

.project_type_container {
  position: absolute;
  width: 70vw;
  top: 25%;
  left: 7.25%;
  height: auto;
  z-index: 5;
}

.keywords_container {
  position: absolute;
  width: 50vw;
  top: 20%;
  left: 7.27%;
  height: auto;
  z-index: 5;
}

.problem_text_container {
  position: absolute;
  width: 28vw;
  height: auto;
  top: 41%;
  left: 14.5%;
  z-index: 5;
}

.brief_text_container {
  position: absolute;
  width: 29vw;
  height: auto;
  top: 72%;
  left: 14.5%;
  z-index: 5;
}

.solution_text_container {
  position: absolute;
  width: 28vw;
  height: auto;
  top: 41%;
  left: 58%;
  z-index: 5;
}
.audience_text_container {
  position: absolute;
  width: 29vw;
  height: auto;
  top: 72%;
  left: 58%;
  z-index: 5;
}

.project_img_container {
  position: absolute;
  width: 30vw;
  height: 70vh;
  top: -25%;
  left: 57%
}

.straw03_container {
  position: absolute;
  width: 60vw;
  height: 40vh;
  top: 9%;
  left: -2%;
  z-index: 2;
}

.straw04_container {
  position: absolute;
  width: 60vw;
  height: auto;
  top: 9%;
  left: -2%;
  z-index: 1;
}
/* -------------------------------------------------------------------------------- PROJECT 01: MUD ------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- PROJECT 01: MUD ------------------------------------------------------------------------------- */
/* ---------------------CONCEPT--------------------- */
.concept_section {
  position: relative;
  width: 100vw;
  height: 70vh;
}

.concept_container {  
  display: grid;
  grid-template-columns: 0.7fr 1.5fr 0.8fr;
  grid-template-rows: 0.2fr 0.1fr 2fr 1.7fr;
  gap: 0 5%;
  grid-auto-flow: row;
  grid-template-areas:
    ". concept01 ."
    ". concept_line01 ."
    ". concept_text01 ."
    "concept_img01 concept_img01 concept_img01";
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 2% 14.5% 2% 14.5%;
}

.concept01 { 
  grid-area: concept01;
  display: flex;
  align-content: center;
  justify-content: center;
}

.concept_line01 { 
  grid-area: concept_line01;
  display: flex;
  align-content: center;
  justify-content: center;
 }

.concept_text01 { 
  grid-area: concept_text01;
  display: flex;
  align-content: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 2%;
  text-align: center;
 }

.concept_img01 { 
  grid-area: concept_img01;
  display: flex;
  align-content: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 2%;
 }

.waste_concept_section {
  position: relative;
  width: 100vw;
  height: 40vh;
 }

/* ---------------------CONCEPT--------------------- */

.concept_container02 {  
  display: grid;
  grid-template-columns: 0.7fr 1.5fr 0.8fr;
  grid-template-rows: 0.1fr 0.1fr .5fr 0.3fr;
  gap: 0% 0%;
  grid-auto-flow: row;
  grid-template-areas:
    ". the_waste ."
    ". waste_line ."
    "tokens_01 tokens_01 tokens_01"
    "the_aim01 the_aim01 the_aim01";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 2% 14.5% 2% 14.5%;
}

.the_waste { 
  grid-area: the_waste;
  display: flex;
  align-content: center;
  justify-content: center;
 }

.waste_line { 
  grid-area: waste_line;
  display: flex;
  align-content: center;
  justify-content: center;
}

.the_aim01 {
  grid-area: the_aim01;
  display: flex;
  align-content: center;
  justify-content: center;
}

.tokens_01 {  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0% 1%;
  grid-auto-flow: row;
  grid-template-areas:
    "token01 token02 token03 token04 token05 token06";
  grid-area: tokens_01;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 2% 0 2% 0;
}

.token01 { grid-area: token01; }

.token02 { grid-area: token02; }

.token03 { grid-area: token03; }

.token04 { grid-area: token04; }

.token05 { grid-area: token05; }

.token06 { grid-area: token06; }

/* ---------------------CONCEPT--------------------- */
.the_product_section {
  position: relative;
  width: 100vw;
  height: 74vh;
}

.the_product_container {  display: grid;
  grid-template-columns: .5fr 1fr .5fr;
  grid-template-rows: 0.2fr 0.1fr 2.7fr;
  gap: 0% 1%;
  grid-auto-flow: row;
  grid-template-areas:
    ". product_title ."
    ". product_line ."
    ". product_reveal_gif .";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 2% 14.5% 2% 14.5%;
}

.product_title { 
  grid-area: product_title;
  display: flex;
  align-content: center;
  justify-content: center;
}

.product_line { 
  grid-area: product_line;
  display: flex;
  align-content: center;
  justify-content: center;
  box-sizing: border-box;
  padding-bottom: 1%;
}

.product_reveal_gif { 
  grid-area: product_reveal_gif;
  box-sizing: border-box;
  padding: 5% 0 2% 0;
}

.circle_frame01 {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 5%;
  box-sizing: border-box;
  padding: 3%;
  display: flex;
  align-content: center;
  justify-content: center;
}

/* ---------------------CONCEPT--------------------- */

.case_symbols_section {
  position: relative;
  width: 100vw;
  height: 40vh;
}

.case_container {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.2fr 0.1fr 2.6fr 0.2fr;
  gap: 2% 0;
  grid-auto-flow: row;
  grid-template-areas:
    ". case_symbols_title ."
    ". case_symbols_line ."
    "case_symbols_container case_symbols_container case_symbols_container"
    ". case_tracking_text .";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 2% 14.5% 1% 14.5%;
}

.case_symbols_title { 
  grid-area: case_symbols_title;
  display: flex;
  align-content: center;
  justify-content: center;
 }

.case_symbols_line { 
  grid-area: case_symbols_line;
  display: flex;
  align-content: center;
  justify-content: center;
 }

 .case_tracking_text {
  grid-area: case_tracking_text;
  display: flex;
  align-content: center;
  justify-content: center;
  text-align: center;
}

/* ---------------------CONCEPT--------------------- */

.case_symbols_container {  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.8fr;
  gap: 0 2%;
  grid-auto-flow: row;
  grid-template-areas:
    "symbol06 symbol05 symbol04 symbol03 symbol02 symbol01";
  grid-area: case_symbols_container;
  width: 100%;
  height: 100%;
  display: flex;
  align-content: center;
  justify-content: center;
}

.symbol01 { grid-area: symbol01; }

.symbol02 { grid-area: symbol02; }

.symbol03 { grid-area: symbol03; }

.symbol04 { grid-area: symbol04; }

.symbol05 { grid-area: symbol05; }

.symbol06 { grid-area: symbol06; }

/* __________The Solution Unpacked_________ */
.solution_intro_section {
  position: relative;
  width: 100vw;
  height: 100vh;
}
.solution_intro {  
  box-sizing: border-box;
  padding: 2% 14.5% 10% 14.5%;
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  grid-template-rows: 0.1fr 1.2fr 1fr;
  gap: 0% 2%;
  grid-auto-flow: row;
  grid-template-areas:
    "MUD_reveal_gif MUD_intro_title"
    "MUD_reveal_gif MUD_intro_text"
    "MUD_reveal_gif .";
  width: 100%;
  height: 100%;
}

.MUD_intro_title { 
  grid-area: MUD_intro_title; 
  box-sizing: border-box;
  padding: 1% 0 0 0;
}

.MUD_intro_text { 
  grid-area: MUD_intro_text; 
  box-sizing: border-box;
  padding: 4% 0 0 0;
}

.MUD_reveal_gif { 
  grid-area: MUD_reveal_gif; 
}

.solution_audience {
  position: relative;
  width: 100vw;
  height: 20vh;
  text-align: center;
}

.audience_line01 {
  position: absolute;
  width: 30%;
  height: auto;
  left: 3%;
}

.audience_line02 {
  position: absolute;
  width: 30%;
  height: auto;
  right: 3%;
}

.solution_elements {
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* ---------------------CONCEPT--------------------- */

.mud_elements {  
  box-sizing: border-box;
  padding: 10% 7% 10% 7%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 2% 8%;
  grid-auto-flow: row;
  grid-template-areas:
    "the_cup_text the_ring_text the_case_text"
    "cup_drawing ring_drawing case_drawing"
    "cup_info ring_info case_info";
  width: 100%;
  height: 100%;
}

.the_cup_text { 
  grid-area: the_cup_text; 
  z-index: 2;
}

.the_ring_text { 
  grid-area: the_ring_text; 
  z-index: 2;
}

.the_case_text { 
  grid-area: the_case_text; 
  z-index: 2;
}

.cup_drawing { 
  grid-area: cup_drawing; 
  box-sizing: border-box;
  padding: 15% 15% 0 15%;
  z-index: 2;
}

.ring_drawing { 
  grid-area: ring_drawing;
  box-sizing: border-box;
  padding: 15% 0 0 0;
  z-index: 2;
}

.case_drawing { 
  grid-area: case_drawing;
  box-sizing: border-box;
  padding: 0 15% 0 15%;
  z-index: 2;
}

.cup_info { 
  grid-area: cup_info; 
  text-align: center;
  z-index: 2;
}

.ring_info { 
  grid-area: ring_info;
  text-align: center; 
  z-index: 2;
}

.case_info { 
  grid-area: case_info; 
  text-align: center;
  z-index: 2;
}

.element_box01 {
  position: absolute;
  width: 30%;
  height: auto;
  top: 8%;
  left: 4%;
  right: 0;
  z-index: 1;
}

.element_box02 {
  position: absolute;
  width: 30%;
  height: auto;
  top: 8%;
  left: 35%;
  right: 0;
  z-index: 1;
}

.element_box03 {
  position: absolute;
  width: 30%;
  height: auto;
  top: 8%;
  left: 66%;
  right: 0;
  z-index: 1;
}

.cup_demo_section {
  position: relative;
  width: 100vw;
  height: 50vh;
}

/* ---------------------INSTRUCTIONS--------------------- */

.cup_instructions_container {  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.2fr .8fr .4fr;
  gap: 2% 2%;
  grid-auto-flow: row;
  grid-template-areas:
    "cup_instructions_title cup_instructions_title cup_instructions_title cup_instructions_title"
    "cup_demo01 cup_demo02 cup_demo03 cup_demo04"
    "cup_demo01_text cup_demo02_text cup_demo03_text cup_demo04_text";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 4% 20% 1% 20%;
}

.cup_instructions_title { 
  grid-area: cup_instructions_title;
  text-align: center;
}

.cup_demo01 { grid-area: cup_demo01; }

.cup_demo02 { grid-area: cup_demo02; }

.cup_demo03 { grid-area: cup_demo03; }

.cup_demo04 { grid-area: cup_demo04; }

.cup_demo01_text { grid-area: cup_demo01_text;
  text-align: center; }

.cup_demo02_text { grid-area: cup_demo02_text; 
  text-align: center;}

.cup_demo03_text { grid-area: cup_demo03_text; 
  text-align: center;}

.cup_demo04_text { grid-area: cup_demo04_text; 
  text-align: center;}

  /* ---------------------CONCEPT--------------------- */

.ring_interface_section{
  position: relative;
  width: 100vw;
  height: 60vh;
}

.ring_interface_container {  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.3fr 1.8fr 1fr;
  gap: 1% 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "ring_interface_title ring_interface_title ring_interface_title"
    "ring_interface_video ring_interface_video ring_interface_video"
    "ring_interface_text ring_interface_text ring_interface_text";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 2% 29% 4% 29%;
}

.ring_interface_title { 
  grid-area: ring_interface_title;
  text-align: center;
  box-sizing: border-box;
  padding: 2% 5% 2% 5%;
 }

.ring_interface_video { grid-area: ring_interface_video; }

.ring_interface_text { 
  grid-area: ring_interface_text;
  text-align: center;
  box-sizing: border-box;
  padding: 2% 5% 2% 5%;
}

.ring_demo_section {
  position: relative;
  width: 100vw;
  height: 50vh;
}

/* ---------------------CONCEPT--------------------- */

.ring_demo_container {  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.1fr 0.4fr .1fr;
  gap: 0 2%;
  grid-auto-flow: row;
  grid-template-areas:
    "ring_instructions_title ring_instructions_title ring_instructions_title"
    "ring_demo01 ring_demo02 ring_demo03"
    "ring_demo_text01 ring_demo_text02 ring_demo_text03";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 2% 20% 4% 20%;
}

.ring_instructions_title { 
  grid-area: ring_instructions_title;
  text-align: center; }

.ring_demo01 { grid-area: ring_demo01; }

.ring_demo02 { grid-area: ring_demo02; }

.ring_demo03 { grid-area: ring_demo03; }

.ring_demo_text01 { 
  grid-area: ring_demo_text01;
  text-align: center;
}

.ring_demo_text02 {
  grid-area: ring_demo_text02;
  text-align: center;
}

.ring_demo_text03 { 
  grid-area: ring_demo_text03;
  text-align: center;
}

.product_features_section {
  position: relative;
  width: 100vw;
  height: 80vh;
}

/* ---------------------CONCEPT--------------------- */

.case_features_container {  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.1fr .5fr;
  gap: 2% 2%;
  grid-auto-flow: row;
  grid-template-areas:
    "product_features_title product_features_title product_features_title"
    "case_interface case_interface case_interface";
    box-sizing: border-box;
    padding: 2% 14.5% 0 14.5%;
  width: 100%;
  height: 100%;
}

.case_interface01 { 
  grid-area: case_interface;
  box-sizing: border-box;
  padding: 2% 14.5% 0 14.5%;
}

.product_features_title { 
  grid-area: product_features_title; 
  text-align: center;
}

.solution_prototype {
  position: relative;
  width: 100vw;
  height: 70vh;
  overflow: hidden;
  box-sizing: border-box;
  padding: 3% 0 0 0;
}

.digital_prototypes_title {
  position: absolute;
  width: 100%;
  height: auto;
  z-index: 1;
  display: flex;
  align-content: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
}

/* ---------------------CONCEPT--------------------- */

.renders_title_container {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.2fr 0.2fr 0.2fr 3.4fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    ". digital_renders_line01 ."
    ". digital_renders_title ."
    ". digital_renders_line02 ."
    ". . .";
  width: 100%;
  height: 100%;
}

.digital_renders_line01 { grid-area: digital_renders_line01; }

.digital_renders_title { grid-area: digital_renders_title; }

.digital_renders_line02 { grid-area: digital_renders_line02; }

/* ---------------------CONCEPT--------------------- */

.main-carousel01 {
  position: absolute;
  bottom: 35%;
  width: 100%;
  height: 50%;
  box-sizing: border-box;
  padding: 5% 0 0 0;
}

.carousel-cell01 {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 5px;
  counter-increment: carousel-cell;
}

/* __________Explainer Section_________ */

.explainer_section {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: white;
}
.explainer_text_container {
  position: absolute;
  width: 100vw;
  height: 10vh;
  top: 3%;
  text-align: center;
}

.explainer_line {
  position: absolute;
  width: 34%;
  height: auto;
  left: 52%;
  top: 18%;
}

.explainer_video_container{
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 4% 14.5%  1% 14.5% ;
}

/* __________Footer Section_________ */

footer {
  position: relative;
  width: 100vw;
  height: 10vh;
  overflow: hidden;
}

.footer_grid {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr; 
  grid-template-rows: 1fr; 
  gap: 2% 2%; 
  grid-template-areas: 
    "previous footer_line next"; 
  width: 100%;
  height: 100%;
}

.previous {
  grid-area: previous;
  display: flex;
  align-items: center;
  justify-content: center;
}

.previous:hover {
  transform: scale(1.2);
  transition: 0.2s;
}

.footer_line {
  grid-area: footer_line;
}
.milanote_line{
  grid-area: footer_line;
  box-sizing: border-box;
  padding: 0 20% 0 20%;
}

.milanote_link {
  grid-area: footer_line;
  box-sizing: border-box;
  padding: 5% 0% 1% 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.milanote_link:hover {
  transform: scale(1.2);
  transition: 0.2s;
}

.next {
  grid-area: next;
  display: flex;
  align-items: center;
  justify-content: center;
}

.next:hover {
  transform: scale(1.2);
  transition: 0.2s;
}

/* -------------------------------------------------------------------------------- PROJECT 02 ------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- PROJECT 02 ------------------------------------------------------------------------------- */

.solution_intro_section02 {
  position: relative;
  width: 100vw;
  height: 80vh;
}

/* ---------------------CONCEPT--------------------- */

.song_symbols_section {
  position: relative;
  width: 100vw;
  height: 75vh;
}

.symbolism_container {  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.2fr 1fr 0.2fr 1fr 0.2fr;
  gap: 1% 1%;
  grid-auto-flow: row;
  grid-template-areas:
    "symbolism_title symbolism_title symbolism_title symbolism_title symbolism_title"
    "s01 s02 s03 s04 s05"
    "s01_t s02_t s03_t s04_t s05_t"
    "s06 s07 s08 s09 s10"
    "s06_t s07_t s08_t s09_t s10_t";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 4% 14.5% 4% 14.5%;
}

.symbolism_title { 
  grid-area: symbolism_title;
  text-align: center;
}

.s01 { grid-area: s01; }

.s02 { grid-area: s02; }

.s03 { grid-area: s03; }

.s04 { grid-area: s04; }

.s05 { grid-area: s05; }

.s06 { grid-area: s06; }

.s07 { grid-area: s07; }

.s08 { grid-area: s08; }

.s09 { grid-area: s09; }

.s10 { grid-area: s10; }

.s01_t { 
  grid-area: s01_t;
  text-align: center;
 }

.s02_t { 
  grid-area: s02_t;
  text-align: center;
 }

.s03_t { 
  grid-area: s03_t;
  text-align: center;
 }

.s04_t { 
  grid-area: s04_t;
  text-align: center;
 }

.s05_t { 
  grid-area: s05_t;
  text-align: center;
 }

.s06_t { 
  grid-area: s06_t;
  text-align: center;
 }

.s07_t { 
  grid-area: s07_t;
  text-align: center;
 }

.s08_t { 
  grid-area: s08_t;
  text-align: center;
 }

.s09_t { 
  grid-area: s09_t;
  text-align: center;
 }

.s10_t { 
  grid-area: s10_t;
  text-align: center;
 }
/* ---------------------CONCEPT--------------------- */
 .pattern_section{
  position: relative;
  width: 100vw;
  height: 30vh;
  overflow: hidden;
 }

 .background_pattern {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
 }


/* ---------------------CONCEPT--------------------- */
.song_section {
position: relative;
width: 100vw;
height: 140vh;
}

.song_container {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.1fr 0.2fr 1.1fr 1.4fr 1.3fr 1.3fr 1.3fr;
  gap: 0 0;
  grid-auto-flow: row;
  grid-template-areas:
    ". the_song_title ."
    ". blou_aarde_title ."
    ". song_lyrics song_img01"
    "song_img02 song_lyrics ."
    ". song_lyrics song_img03"
    "song_img04 song_lyrics ."
    ". song_lyrics song_img05";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 5%;

}

.the_song_title { 
  grid-area: the_song_title;
  text-align: center;
 }

.blou_aarde_title { 
  grid-area: blou_aarde_title;
  text-align: center;
 }

.song_lyrics { 
  grid-area: song_lyrics;
  text-align: center;
 }

.song_img01 { grid-area: song_img01; }

.song_img02 {
  grid-area: song_img02;

}

.song_img03 { 
  grid-area: song_img03;
  box-sizing: border-box;
  padding: 2% 14.5% 0 0;
  display: flex;
  align-content: center;
  justify-content: center;
 }

.song_img04 { grid-area: song_img04; }

.song_img05 { grid-area: song_img05; }



.solution_storyboard02 {
  position: relative;
  width: 100vw;
  height: 40vh;
  overflow: hidden;
  box-sizing: border-box;
  padding: 4% 0 0 0;
}

.storyboard_title02 {
  position: absolute;
  width: 100%;
  height: auto;
  z-index: 1;
  text-align: center;
}

.main-carousel02 {
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 5% 0 0 0;
  overflow: hidden;
}

.carousel-cell02 {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 5px;
  counter-increment: carousel-cell02;
}

.song_concept {
  position: relative;
  width: 100vw;
  height: 50vh;
  overflow: hidden;
}

.concept02_container {
  position: absolute;
  width: 50%;
  height: 50%;
  box-sizing: border-box;
  padding: 2%;
  margin: 5%;
  z-index: 2;
  display: flex;
  align-content: center;
  justify-content: center;
}
.concept_song_title{
  position: inherit;
 width: 80%;
}

.concept_song_text {
  position: inherit;
  width: 80%;
  box-sizing: border-box;
  padding-top: 5%;
}


.background_concept_pattern {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

 /* -------------------------------------------------------------------------------- PROJECT 03 ------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- PROJECT 03 ------------------------------------------------------------------------------- */

.solution_logo {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.theLogo {  
  display: grid;
  grid-template-columns: 1.6fr .4fr;
  grid-template-rows: 0.1fr 0.1fr 2.5fr 0.3fr;
  gap: 1% 2%;
  grid-auto-flow: row;
  grid-template-areas:
    "line01_03 ."
    "logo_03 logo_title_03"
    "logo_03 logo_text_03"
    "line02_03 insta_link";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding:  0 29% 0 29% ;
}

.line01_03 { 
  grid-area: line01_03;
 display: flex;
 align-content: center;
 justify-content: center;
 box-sizing: border-box;
 padding-top: 5%;
 }

.line02_03 { 
  grid-area: line02_03;
  box-sizing: border-box;
  padding-bottom: 5%;
  display: flex;
  align-content: center;
  justify-content: center;
  box-sizing: border-box;
 }

.logo_03 { 
  grid-area: logo_03;
 }

.logo_title_03 { 
  grid-area: logo_title_03;
 }

.logo_text_03 { 
  grid-area: logo_text_03;
 }

.insta_link {
  grid-area: insta_link;
}

 /* -------------------------------------------------------------------------------- PROJECT 04 ------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- PROJECT 04 ------------------------------------------------------------------------------- */

.concept_04_section {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.concept04_container {  
  display: grid;
  grid-template-columns: .9fr 1.25fr 1fr;
  grid-template-rows: 0.1fr 0.2fr 1fr 1fr 1fr;
  gap: 2% 2%;
  grid-auto-flow: row;
  grid-template-areas:
    "concept_03title concept_03title concept_03title"
    "idea_gen_title idea_gen_title idea_gen_title"
    "insp_img insp_text insp_text"
    "machine_img machine_text machine_text"
    "creative_c creative_c_text creative_c_text";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 2% 28% 2% 28%;
}

.concept_03title { grid-area: concept_03title; }

.idea_gen_title { grid-area: idea_gen_title; }

.insp_img { grid-area: insp_img; }

.machine_img { grid-area: machine_img; }

.machine_text { 
  grid-area: machine_text;
  box-sizing: border-box;
  padding: 7% 4%  0 2%;
}

.creative_img01 { grid-area: creative_img01; }

.creative_img02 { grid-area: creative_img02; }

.creative_img03 { grid-area: creative_img03; }

.insp_text { 
  grid-area: insp_text;
  box-sizing: border-box;
  padding: 7% 4%  0 2%;
 }

.creative_c {
  grid-area: creative_c;
}

.creative_c_text {
  grid-area: creative_c_text;
  box-sizing: border-box;
  padding: 7% 4%  0 2%;
}

.creative_process_section {
  position: relative;
  width: 100vw;
  height: 115vh;
}

.creative_elements_container {  
  display: grid;
  grid-template-columns: 1fr 1.9fr 0.8fr 0.2fr;
  grid-template-rows: 0.2fr .9fr .4fr;
  gap: 2% 2%;
  grid-auto-flow: row;
  grid-template-areas:
    "coffee_img tanks_img c_process_title c_process_title"
    "coffee_img tanks_img tears_img tears_img"
    "coffee_img mixer_img brush_img pencil_img ";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 2% ;
}

.coffee_img { 
  grid-area: coffee_img;
  background-color: #f4b03d;
  box-sizing: border-box;
  padding: 5%;
  display: flex;
  align-content: center;
  justify-content: center;
 }

.tanks_img { 
  grid-area: tanks_img;
  background-color: #f4b03d;
  box-sizing: border-box;
  padding: 5%;
  display: flex;
  align-content: center;
  justify-content: center;
 }

.mixer_img { 
  grid-area: mixer_img;
  background-color: #f4b03d;
  box-sizing: border-box;
  padding: 5%;
  display: flex;
  align-content: center;
  justify-content: center;
 }

.c_process_title { 
  grid-area: c_process_title;
  text-align: center;
  background-color: #f4b03d;
  box-sizing: border-box;
  padding: 5%;
 }

.tears_img { grid-area: tears_img;
  background-color: #f4b03d;
  box-sizing: border-box;
  padding: 5%;
  display: flex;
  align-content: center;
  justify-content: center;
 }

.pencil_img { grid-area: pencil_img;
  background-color: #f4b03d; 
  box-sizing: border-box;
  padding: 5%;
  display: flex;
  align-content: center;
  justify-content: center;
}


.brush_img { grid-area: brush_img;
  background-color: #f4b03d;
  box-sizing: border-box;
  padding: 5%;
  display: flex;
  align-content: center;
  justify-content: center;
 }


.campaign_section {
  position: relative;
  width: 100vw;
  height: 45vh;
}

.campaign_container {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.3fr 1.7fr;
  gap: 2% 2%;
  grid-auto-flow: row;
  grid-template-areas:
    "campaign_title campaign_title campaign_title"
    "logo_04 logo_04 logo_04";
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 1% 5% 1% 5%;
}

.campaign_title { 
  grid-area: campaign_title;
  text-align: center;
 }

.logo_04 { 
  grid-area: logo_04;
  display: flex;
  align-content: center;
  justify-content: center;
 }


.solution_files {
  position: relative;
  width: 100vw;
  height: 40vh;
}

.file_container {  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "file01 file02 file03 file04 file05 file06";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 4%;
  gap: 0 2%;
}

.file01 { 
  grid-area: file01;
 }

.file02 { 
  grid-area: file02;
 }

.file03 { 
  grid-area: file03;
 }

.file04 { 
  grid-area: file04;
 }

.file05 { 
  grid-area: file05;
 }

.file06 { 
  grid-area: file06;
 }

.file :hover {
  transform: scale(1.2);
  transition: 0.2s;
}
#inner {
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

#inner:hover {
  transform: scale(1.1);
  -ms-transform: scale(1.1);
  -moz-transform: scale(1.1); 
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  vertical-align: middle;
}

.solution_AR_04 {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.AR_guide {  
  display: grid;
  grid-template-columns: 1.3fr .6fr;
  grid-template-rows: 0.1fr .2fr 1.7fr;
  gap: 0% 3%;
  grid-auto-flow: row;
  grid-template-areas:
    "AR_title ."
    "AR_text ."
    "AR_demo AR_sticker";
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding: 1% 24% 4% 24%;
}

.AR_demo { 
  grid-area: AR_demo;
  background-color: #CB006C;
  border-radius: 6%;
  display: flex;
  align-content: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 2%;
 }

.AR_sticker { 
  grid-area: AR_sticker;
 }

.AR_title { 
  grid-area: AR_title;
}

.AR_text {
  grid-area: AR_text;
  box-sizing: border-box;
  padding: 2% 0 2% 0;

}

.solution_episodes {
  position: relative;
  width: 100vw;
  height: 75vh;
  overflow: hidden;
}

.episode {  
  display: grid;
  grid-template-columns: .8fr 1.2fr 1fr;
  grid-template-rows: 0.2fr .1fr 1fr;
  gap: 2% 2%;
  grid-auto-flow: row;
  grid-template-areas:
    "episode_title episode_title ."
    "episode_text . ."
    "episode_character episode_video episode_video";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 2% 14.5% 2% 14.5%;
}

.episode_video { 
  grid-area: episode_video; 
}

.episode_text { 
  grid-area: episode_text;
 }

.episode_title { 
  grid-area: episode_title; 
}

.episode_character { 
  grid-area: episode_character; 
}

/* -------------------------------------------------------------------------------- PROJECT 05: C-ZONE ------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- PROJECT 05: C-ZONE ------------------------------------------------------------------------------- */

.solution_intro_section05 {
position: relative;
width: 100vw;
height: 110vh;
}

.solution05_box {
  position: absolute;
  width: 100vw;
  height: auto;
  display: flex;
  align-content: center;
  justify-content: center;
  box-sizing: border-box;
}

.solution_intro05 {  
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 2.3fr 0.1fr .6fr;
  gap: 1% ;
  grid-auto-flow: row;
  grid-template-areas:
    "intro_video05"
    "intro_title05"
    "intro_text05";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 1% 14.5% 0 14.5%;
}

.intro_video05 { 
  grid-area: intro_video05;
}

.intro_title05 { 
  grid-area: intro_title05;
}

.intro_text05 { 
  grid-area: intro_text05;
  width: 29vw;
}

/* ______________________________________________ */

.game_concept_section {
  position: relative;
  width: 100vw;
  height: 60vh;
}
.game_concept_type {
  position: absolute;
  z-index: 2;
  width: 42%;
  height: auto;
  text-align: center;
  box-sizing: border-box;
  padding: 2.4% 0 0 0;
}

.concept_title_frame {
  position: relative;
  z-index: 1;
  display: flex;
  align-content: center;
  justify-content: center;
}

.concept_poem_text {
  position: absolute;
  z-index: 2;
  width: 25%;
  height: auto;
  box-sizing: border-box;
  padding: 2.8%;
}

.game_poem_frame {
  position: relative;
  z-index: 1;
}

.game_concept_container {  
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: .5fr .8fr .2fr;
  gap: 1% 0%;
  grid-auto-flow: row;
  grid-template-areas:
    "game_concept_title"
    "game_peom"
    "game_concept_text";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 2% 29% 4% 29%;
}

.game_concept_title { 
  grid-area: game_concept_title;
 }

.game_peom { 
  grid-area: game_peom;
  box-sizing: border-box;
  padding: 2% 20% 2% 20%;
 }

.game_concept_text { 
  grid-area: game_concept_text;
  box-sizing: border-box;
  padding: 0 20% 2% 20%;
 }

/* ______________________________________________ */

.enemy_section {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.enemy_title_frame {
  z-index: 1;
}

.enemy_title_text {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  padding: 5%;
}

.enemy_framed_container {  
  display: grid;
  grid-template-columns: 1.2fr .8fr 1fr;
  grid-template-rows: 0.1fr 0.1fr 1fr 1fr;
  gap: 2% 2%;
  grid-auto-flow: row;
  grid-template-areas:
    "enemy_title05 enemy_title05 stress_bomb05"
    "enemy_fly05 c-zone_text stress_bomb_text05"
    "enemy_fly05 c-zone_text enemy_walk05"
    "enemy_text05 enemy_text05 enemy_walk05";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 1% 14.5% 4% 14.5%;
}

.enemy_title05 { 
  grid-area: enemy_title05;
 }

.stress_bomb05 { 
  grid-area: stress_bomb05;
  display: flex;
  align-content: center;
  justify-content: center;
 }

.stress_bomb_text05 { 
  grid-area: stress_bomb_text05;
 }

.enemy_fly05 { 
  grid-area: enemy_fly05;
 }

.enemy_walk05 { 
  grid-area: enemy_walk05;
 }

.enemy_text05 { 
  grid-area: enemy_text05;
 }

.c-zone_text {
  grid-area: c-zone_text;
  box-sizing: border-box;
  padding: 45% 5% 5% 5%;
}

/* ______________________________________________ */
.hero_character_section {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.hero_title_frame {
  position: relative;
  width: 100%;
  height: auto;
  z-index: 1;
}

.hero_title_text_container {
  position: absolute;
  width: 100%;
  height: auto;
  z-index: 2;
  box-sizing: border-box;
  padding: 1.1% 0 0 3%;
}

.hero_text_type {
  position: absolute;
  width: 45%;
  height: auto;
  z-index: 2;
  box-sizing: border-box;
  padding: 3% 4% 0 5%;
}

.hero_wave {
  position: absolute;
  width: 45%;
  height: auto;
  z-index: 2;
  box-sizing: border-box;
  padding: 2% 0 0 16%;
}

.hero_wave_frame {
    width: 100%;
  height: auto;
  z-index: 1;
}

.hero_grid05 {  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: .4fr 1fr 1fr 1fr;
  gap: 1% 1%;
  grid-auto-flow: row;
  grid-template-areas:
    "hero_title05 hero_img hero_img"
    "hero_gif01 hero_img hero_img"
    "hero_gif02 hero_img hero_img"
    "hero_gif03 hero_text05 hero_text05";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 1% 14.5% 1% 14.5%;
}

.hero_gif01 { 
  grid-area: hero_gif01;
 }

.hero_gif02 { 
  grid-area: hero_gif02;
 }

.hero_gif03 { 
  grid-area: hero_gif03; 
}

.hero_img { 
  grid-area: hero_img;
 }

.hero_text05 { 
  grid-area: hero_text05; 
  box-sizing: border-box;
  padding-top: 2%;
}

.hero_title05 { 
  grid-area: hero_title05;
 }

/* ______________________________________________ */

.collectable_section {
  position: relative;
  width: 100vw;
  height: 60vh;
}

.collectable_grid05 {  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: .2fr 1fr 1fr;
  gap: 2% 2%;
  grid-auto-flow: row;
  grid-template-areas:
    "collectable_title05 collectable_title05  . ."
    "collectable01 collectable02 collectable03 collectable04"
    "collectable01_text collectable02_text collectable03_text collectable04_text";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 1% 14.5% 1% 14.5%;
}

.collectable01 { 
  grid-area: collectable01;
}

.collectable01_text {
  grid-area: collectable01_text;
  box-sizing: border-box;
  padding: 0 2% 0 2%;
}

.collectable02 { 
  grid-area: collectable02;
}

.collectable02_text {
  grid-area: collectable02_text;
  box-sizing: border-box;
  padding: 0 2% 0 2%;
}

.collectable03 { 
  grid-area: collectable03; 
}

.collectable03_text {
  grid-area: collectable03_text;
  box-sizing: border-box;
  padding: 0 2% 0 2%;
}

.collectable04 { 
  grid-area: collectable04;
}

.collectable04_text {
  grid-area: collectable04_text;
  box-sizing: border-box;
  padding: 0 2% 0 2%;
}

.collectable_title05 {
  grid-area: collectable_title05;
}

.solution_environment {
  position: relative;
  width: 100vw;
  height: 165vh;
}

@media only screen and (max-width: 1920px) {
  .solution_environment {
    position: relative;
    width: 100vw;
    height: 170vh;
    } 
  }


.environment {  
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: .1fr .3fr .2fr .3fr .2fr .5fr .2fr .5fr;
  gap: 0 2%;
  grid-auto-flow: row;
  grid-template-areas:
    "enviro_title enviro_title enviro_title"
    "enviro_01 enviro_02 enviro_03"
    "enviro_01_text enviro_02_text enviro_03_text"
    "enviro_04 enviro_08 enviro_05 "
    "enviro_04_text enviro_08_text enviro_05_text"
    "enviro_07 enviro_09_text enviro_06"
    "enviro_07_text . enviro_06_text"
    "enviro_09 enviro_09 enviro_09";
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 1% 7.25% 5% 7.25%;
}

.enviro_title { 
  grid-area: enviro_title;
  display: flex;
  align-content: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 2% 0 2% 0;
}

.enviro_02 { 
  grid-area: enviro_02;
  display: flex;
  align-content: center;
  justify-content: center;
}

.enviro_03 { 
  grid-area: enviro_03; 
}

.enviro_01 { 
  grid-area: enviro_01;
  display: flex;
  align-content: right;
  justify-content: right;
}

.enviro_01_text { 
  grid-area: enviro_01_text;
  box-sizing: border-box;
  padding: 2% 0 2% 75%;
 }

.enviro_02_text { 
  grid-area: enviro_02_text;
  display: flex;
  align-content: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 2% 0 2% 0;
 }

.enviro_03_text { 
  grid-area: enviro_03_text;
  box-sizing: border-box;
  padding: 2% 0 2% 20%;
}

.enviro_04 { 
  grid-area: enviro_04;
  display: flex;
  align-content: right;
  justify-content: right;
}

.enviro_04_text { 
  grid-area: enviro_04_text;
  display: flex;
  align-content: right;
  justify-content: right;
  box-sizing: border-box;
  padding: 2% 30% 2% 0;
}

.enviro_05 { 
  grid-area: enviro_05;
}

.enviro_05_text { 
  grid-area: enviro_05_text;
  box-sizing: border-box;
  padding: 2% 0 2% 30%;
}

.enviro_06 { grid-area: enviro_06; }

.enviro_06_text { 
  grid-area: enviro_06_text;
  box-sizing: border-box;
  padding: 2% 0 2% 45%;
}

.enviro_07 { 
  grid-area: enviro_07;
 }

.enviro_07_text { 
  grid-area: enviro_07_text;
  display: flex;
  align-content: right;
  justify-content: right;
  box-sizing: border-box;
  padding: 2% 45% 2% 0;
}

.enviro_08 { grid-area: enviro_08; }

.enviro_08_text { 
  grid-area: enviro_08_text;
  display: flex;
  align-content: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 2% 0 2% 0;
}

.enviro_09 { 
  grid-area: enviro_09;
  display: flex;
  align-content: center;
  justify-content: center;
}

.enviro_09_text {
  grid-area: enviro_09_text;
  text-align: center;
  box-sizing: border-box;
  padding: 5% 5% 5% 5%;
}

.game_trailer {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.game_trailer_title {
  position: relative;
  width: 100%;
  height: 20vh;
  box-sizing: border-box;
  padding-top: 5%;
}

.g_t_title_container {
  position: absolute;
  width: 100vw;
  height: auto;
  display: flex;
  align-content: center;
  justify-content: center;
  z-index: 2;
  box-sizing: border-box;
  padding: 2.5%;
}

.game_t_tile_frame {
  position: absolute;
  width: 100vw;
  height: auto;
  display: flex;
  align-content: center;
  justify-content: center;
  z-index: 1;
}

/* -------------------------------------------------------------------------------- PROJECT 06: HONS ------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------- PROJECT 06: HONS ------------------------------------------------------------------------------- */

.map_boarder06 {
  position: relative;
  width: 100vw;
  height: 20vh;
}

.map_boarder_img {
  position: absolute;
  width: 100vw;
  height: 15vh;
}

.heading06_section {
  position: relative;
  width:100vw ;
  height: 10vh;
}

.concept_06title {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center !important;
}

.concept_06_section {
  position: relative;
  width: 100vw;
  height: 110vh;

}

.concept_container {  
  display: grid;
  grid-template-columns: 1fr .5fr .5fr;
  grid-template-rows: 0.2fr 1.8fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  justify-content: left;
  align-content: left;
  justify-items: left;
  align-items: left;
  grid-template-areas:
    "about_fism concept_1 concept_1"
    "about_fism concept_2 concept_2";
  width: 100%;
  height: 100%;
}

.about_fism { grid-area: about_fism; }

.concept_1 { grid-area: concept_1; }

.concept_2 { grid-area: concept_2; }

.aim_container {  display: grid;
  grid-template-columns: 0.8fr 0.8fr 1.4fr;
  grid-template-rows: 1fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  grid-template-areas:
    "aim1 aim2 aim_img"
    "aim3 aim4 aim_img";
  width: 100%;
  height: 90%;
  padding: 2% 14.5% 2% 14.5%;
}

.aim_img { grid-area: aim_img; }

.aim1 { grid-area: aim1; }

.aim2 { grid-area: aim2; }

.aim3 { grid-area: aim3; }

.aim4 { grid-area: aim4; }

.process_context{
  text-align: center;
  margin: auto;
  width: 50%;
  padding: 4%;
}

.process06_section {
  position: relative;
  width: 100vw;
  height: 200vh;
}

.process_container{
position: absolute;
width: 100vw;
height: auto;
}

.website_section{
  position: relative;
  width: 100vw;
  height: 100vh;
}

.boarder{
  display:inline-block;
  width:20%;
  margin:5% auto;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  padding:1em;
  line-height:1.5em;
  background:white;
}
#one {
  border:solid 5px black;
}

.fism_website {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.boarder02{
  display:inline-block;
  width:100%;
  margin:5% auto;
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  padding:1em;
  line-height:1.5em;
  background:white;
}

.process_buttons {
  position: relative;
  width: 100vw;
  height: 60vh;
}

 .button01_container {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 0.8fr;
  grid-auto-columns: 1fr;
  gap: 2% 4%;
  grid-auto-flow: row;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  grid-template-areas:
    "button01 button02 button03";
  width: 100%;
  height: 20%;
  padding: 5% 20% 2% 20%;
}

.button01 { grid-area: button01; }

.button02 { grid-area: button02; }

.button03 { grid-area: button03; }

.button02_container {  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 0.8fr;
  grid-auto-columns: 1fr;
  gap: 2% 4%;
  grid-auto-flow: row;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  grid-template-areas:
    "button04 button05 button06 button07";
  width: 100%;
  height: 20%;
  padding: 0 10% 7% 10%;
}

.button04 { grid-area: button04; }

.button05 { grid-area: button05; }

.button06 { grid-area: button06; }

.button07 { grid-area: button07; }



.button :hover {
  transform: scale(1.2);
  transition: 0.2s;
}

.product06_section {
position: relative;
width: 100vw;
height: 90vh;
}

.product_06Heading {
  position: relative;
  width: 100vw;
  height: 10vh;
  text-align: center;
}

.map_container {  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1.1fr 0.7fr 1.2fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  grid-template-areas:
    "map_img01 map_img01 map_description_01 map_description_01"
    "map_img01 map_img01 map_img02 map_img02"
    "map_description_02 map_description_02 map_img02 map_img02";
  width: 100%;
  height: 95%;
  padding: 0 14.5% 2% 14.5%;
}

.map_iterations_section {
  position: relative;
  width: 100vw;
  height: 70vh;
}

.map_iteration_container { 
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1.6fr 0.7fr;
  gap: 2% 2%;
  grid-auto-flow: row;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  grid-template-areas:
    "map_img_01 map_img_02 map_img_03 map_img_04 map_img_05"
    "map_text_01 map_text_02 map_text_03 map_text_04 map_text_05";
  width: 100%;
  height: 30%;
  padding: 10% 11% 0% 11%;
}

.map_img_01 { grid-area: map_img_01; }

.map_img_02 { grid-area: map_img_02; }

.map_img_03 { grid-area: map_img_03; }

.map_img_04 { grid-area: map_img_04; }

.map_img_05 { grid-area: map_img_05; }

.map_text_01 { grid-area: map_text_01; }

.map_text_02 { grid-area: map_text_02; }

.map_text_03 { grid-area: map_text_03; }

.map_text_04 { grid-area: map_text_04; }

.map_text_05 { grid-area: map_text_05; }


.map_img01 { grid-area: map_img01; }

.map_description_01 { grid-area: map_description_01; }

.map_img02 { grid-area: map_img02; }

.map_description_02 { grid-area: map_description_02; }


.scale_img {
  transition: transform .2s;
}

.scale_img:hover {
  transform:scale(2.5);
}

.map_img_section {
  position: relative;
  width: 100vw;
  height: 90vh;
}

.mapimg_container {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-auto-columns: 1fr;
  gap: 2% 2%;
  grid-auto-flow: row;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  grid-template-areas:
    "map01 map02 map03"
    "map04 map05 map06";
  width: 100%;
  height: 60%;
  padding: 0 14.5% 2% 14.5%;
}

.map01 { grid-area: map01; }

.map02 { grid-area: map02; }

.map03 { grid-area: map03; }

.map04 { grid-area: map04; }

.map05 { grid-area: map05; }

.map06 { grid-area: map06; }


.element_setion{
position: relative;
width: 100vw;
height: 100vh;
}

.map_video_container {  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1.7fr 0.5fr 1.6fr 0.5fr;
  gap: 3% 3%;
  grid-auto-flow: row;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  grid-template-areas:
    "element01 element02 element03 element04 element05"
    "element01_txt element02_txt element03_txt element04_txt element05_txt"
    "element06 element07 element08 element09 element10"
    "element06_txt element07_txt element08_txt element09_txt element10_txt";
  width: 100%;
  height: 90%;
  padding: 0 14.5% 2% 14.5%;
}

.element01 { grid-area: element01; }

.element02 { grid-area: element02; }

.element03 { grid-area: element03; }

.element04 { grid-area: element04; }

.element05 { grid-area: element05; }

.element06 { grid-area: element06; }

.element07 { grid-area: element07; }

.element08 { grid-area: element08; }

.element09 { grid-area: element09; }

.element10 { grid-area: element10; }

.element01_txt { grid-area: element01_txt; }

.element02_txt { grid-area: element02_txt; }

.element03_txt { grid-area: element03_txt; }

.element04_txt { grid-area: element04_txt; }

.element05_txt { grid-area: element05_txt; }

.element06_txt { grid-area: element06_txt; }

.element07_txt { grid-area: element07_txt; }

.element08_txt { grid-area: element08_txt; }

.element09_txt { grid-area: element09_txt; }

.element10_txt { grid-area: element10_txt; }

.website_wireframes_section {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.map_wireframes_grid_container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.map_wireframe_container {  
  display: grid;
  grid-template-columns: 1.4fr 0.6fr 0.6fr;
  grid-template-rows: 0.9fr 1.4fr 1.4fr;
  gap: 2% 2%;
  grid-auto-flow: row;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  grid-template-areas:
    "main_wireframe_img wireframe_txt wireframe_txt"
    "main_wireframe_img wireframe01 wireframe02"
    "main_wireframe_img wireframe03 wireframe04";
  width: 100%;
  height: 80%;
  padding: 5% 10% 5% 10%;
}

.main_wireframe_img { grid-area: main_wireframe_img; }

.wireframe_txt { grid-area: wireframe_txt; }

.wireframe01 { grid-area: wireframe01; }

.wireframe02 { grid-area: wireframe02; }

.wireframe03 { grid-area: wireframe03; }

.wireframe04 { grid-area: wireframe04; }

.merchandise_section{
  position: relative;
  width: 100vw;
  height: 150vh;
}

.merchandise_container {  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 0.4fr 1.9fr 0.7fr;
  grid-auto-columns: 1fr;
  gap: 2% 2%;
  grid-auto-flow: row;
  justify-content: center;
  align-content: center;
  justify-items: center;
  align-items: center;
  grid-template-areas:
    "socks_heading stickers_heading"
    "socks_txt stickers_txt"
    "socks_img01 stickers_img"
    "socks_img02 sticker_video_container"
    "socks_img03 sticker_video_container";
  width: 100%;
  height: 100%;
  padding: 0 14.5% 2% 14.5%;
}

.socks_heading { grid-area: socks_heading; }

.stickers_heading { grid-area: stickers_heading; }

.socks_img01 { grid-area: socks_img01; }
.socks_img02 { grid-area: socks_img02; }
.socks_img03 { grid-area: socks_img03; }

.stickers_img { grid-area: stickers_img; }

.sticker_video_container {grid-area: sticker_video_container;}

.socks_txt { grid-area: socks_txt; }

.stickers_txt { grid-area: stickers_txt; }

.exit_section {
  position: fixed;
  width: 100vw;
  height: 20vh;
  z-index: 10;
}

.exit_container {
  position: absolute;
  width: 15%;
  padding: 2%;
}

.process_section01{
  position: relative;
  width: 100vw;
  height: 180vh;
  }

  .process_section02{
    position: relative;
    width: 100vw;
    height: 180vh;
    }

  .process_section03{
    position: relative;
    width: 100vw;
    height: 130vh;
  }

  .process_section04{
    position: relative;
    width: 100vw;
    height: 95vh;
  }

  .process_section05{
    position: relative;
    width: 100vw;
    height: 180vh;
  }

  .process_section05_2{
    position: relative;
    width: 100vw;
    height: 210vh;
  }

  .process_section06{
    position: relative;
    width: 100vw;
    height: 180vh;
  }
  .process_section07{
    position: relative;
    width: 100vw;
    height: 180vh;
  }

  .website_intro_section {
    position: relative;
    width: 100vw;
    height: 20vh;
  }

  .thesis_container {  display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-auto-columns: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    justify-content: center;
    align-content: center;
    justify-items: center;
    align-items: center;
    grid-template-areas:
      "thesis_cover thesis_text";
    width: 100%;
    height: 60%;
    padding: 0 14.5% 2% 14.5%;
  }
  
  .thesis_cover { grid-area: thesis_cover; }
  
  .thesis_text { grid-area: thesis_text; }