/* Fonts */
@font-face {
  font-family: 'abigdeal';
  src: url("https://static.igem.wiki/teams/5329/fonts/abigdeal.ttf");
}
@font-face {
  font-family: 'figtree';
  src: url("https://static.igem.wiki/teams/5329/fonts/figtree-medium.ttf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'figtree';
  src: url("https://static.igem.wiki/teams/5329/fonts/figtree-bold.ttf");
  font-weight: bold;
  font-style: normal;
}
@font-face {
	font-family: 'montserrat-light';
	src: url("https://static.igem.wiki/teams/5329/fonts/montserrat-light.ttf");
}
@font-face {
	font-family: 'montserrat';
	src: url("https://static.igem.wiki/teams/5329/fonts/montserrat-variablefont-wght.ttf");
}


body,
html {
  margin: 0;
  padding: 0;
  background-color: #fefaf8;
}

/* Sections */
.section-1 {
  width: 100%;
  background-color: #fefaf8;
  padding-bottom: 0%;
  padding-top: 300px;
  box-sizing: border-box;
  height: auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-2 {
  width: 100%;
  background-color: #fefaf8;
  padding-top: 10px;
  box-sizing: border-box;
  height: 600px;
  margin-top: 0;
  margin-bottom: 0;
  position: relative;
  display: block;
}

.section-3 {
  width: 100%;
  background-color: #6baec1;
  padding: 0px;
  box-sizing: border-box;
  height: 2000px;
  margin-top: 0;
  position: relative;
}

.section-4 {
  width: 100%;
  background-color: #003a5c;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
  height: 3200px;
  margin-top: 0;
  margin-bottom: 0;
  position: relative;              
  overflow: hidden;              
}

.section-5 {
  width: 100%;
  background-color: #69bbe3;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
  height: 2000px;
  margin-top: 0;
  margin-bottom: 0;
  position: relative;              
  overflow: hidden;              
}

.section-6 {
  width: 100%;
  background-color: #fefaf8;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
  height: 1100px;
  margin-top: 0;
  margin-bottom: 0;
  position: relative;              
  overflow: hidden;              
}

.contain {
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 0px;
  box-sizing: border-box;
}


.contain-3 {
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 0px;
  box-sizing: border-box;
  height: 2000px;
}


/* Boxes */

.box-1 {              /* wastewater1 */
  width: 25%;
  height: auto;
  margin-left: 0%;
  margin-top: 0%;
  position: absolute; 
  bottom: 0;          
  left: 0;            
  z-index: 4
}

.box-2 {              /* wastewater2 */
  width: 37%;
  height: auto;
  margin-left: 3%;
  margin-top: 0%;
  z-index: 1; 
  top: 0; 
  position: absolute;
}

.box-3 {              /* ground1 */
  width: 100%;
  height: auto;
  margin-left: 0%;
  margin-top: 0%;
  position: absolute; 
  bottom: 0;          
  left: 0;  
  z-index: 4;          
}

.box-4 {              /* ground2 */
  width: 100%;
  height: auto;
  margin-left: 0%;
  margin-top: 0%;
  position: absolute; 
  bottom: 0;          
  left: 0;  
  z-index: 2;          
}

.box-5 {              /* ground3 */
  width: 100%;
  height: auto;
  margin-left: 0%;
  margin-top: 0%;
  position: absolute; 
  bottom: 0;          
  left: 0;  
  z-index: 1;          
}

.box-6 {              /* plant1 */
  width: 20%;
  height: auto;
  margin-left: 1.5%;
  margin-top: 0%;
  position: absolute; 
  bottom: 100px;          
  left: 0;  
  z-index: 3;          
}

.box-7 {              /* plant2 */
  width: 20%;
  height: auto;
  margin-left: 22%;
  margin-top: 0%;
  position: absolute; 
  bottom: 30px;          
  left: 0;  
  z-index: 2;          
}

.box-8 {              /* plant3 */
  width: 20%;
  height: auto;
  margin-left: 70%;
  margin-top: 0%;
  position: absolute; 
  bottom: 20px;          
  left: 0;  
  z-index: 2;          
}

.box-9 {              /* light1 */
  width: 30%;
  height: auto;
  margin-left: 9.5%;
  margin-top: 0%;
  position: absolute; 
  bottom: 30%;          
  left: 0;  
  z-index: 0;          
}

.box-10 {              /* light2 */
  width: 25%;
  height: auto;
  margin-left: 26.9%;
  margin-top: 0%;
  position: absolute; 
  bottom: 44%;          
  left: 0;  
  z-index: 0;          
}

.box-11 {              /* light3 */
  width: 50%;
  height: auto;
  margin-left: 40%;
  margin-top: 0%;
  position: absolute; 
  bottom: 0%;          
  left: 0;  
  z-index: 0;          
}

.box-12 {              /* pills */
  width: 40%;
  height: auto;
  margin-left: 20%;
  margin-top: 8%;
  position: absolute; 
  top: 90px;           
  z-index: 4;          
}

.box-13 {              /* fish1 */
  width: 28%;
  height: auto;
  margin-bottom: 18%;
  margin-left: 18%;
  position: absolute; 
  top: 900px;          
  left: 0;  
  z-index: 4;          
}

.box-14 {              /* fish2 */
  width: 18%;
  height: auto;
  margin-left: 38%;
  margin-top: 90%;
  position: absolute; 
  top: 0;          
  left: 0;  
  z-index: 4;          
}

.box-15 {              /* text1 */
  width: 53%;          
  height: auto;
  margin-left: 45%;
  margin-top: 17%; 
  position: relative;
  color: #001825;         
  font-size: 1.8rem;   
  text-align: center;
  position: relative; 
  overflow: hidden;   
  z-index: 5;
  font-family: 'figtree', sans-serif;
  font-weight: normal; 
}

.box-15 strong {
  font-family: 'figtree', sans-serif;
  font-weight: bold; 
}


.box-16 {              /* wave-video */
  width: 100%;
  height: auto;
  margin-left: 0%;
  margin-top: 0%;
  position: absolute; 
  top: 0;          
  left: 0;  
  z-index: 4;          
} 



.box-18 {              /* text2 */
  width: 44%;          
  height: auto;
  margin-left: 63%;
  margin-top: 15%;
  position: relative;
  color: #00243a;      
  font-size: 1.8rem;   
  text-align: center;
  position: relative;
  overflow: hidden;  
  z-index: 5;
  font-family: 'figtree', sans-serif;
  font-weight: normal; 
}

.box-18 strong {
  font-family: 'figtree', sans-serif;
  font-weight: bold; 
}

.box-19 {              /* text3 */
  width: 45%;          
  height: auto;
  margin-left: 23%;
  margin-bottom: 75%;
  position: relative;
  color: #00243a;      
  font-size: 1.8rem;   
  text-align: center;
  position: relative;
  overflow: hidden;  
  z-index: 5;
  font-family: 'figtree', sans-serif;
  font-weight: normal; 
}

.box-19 strong {
  font-family: 'figtree', sans-serif;
  font-weight: bold;
}

.box-20 {              /* enzymatic degradation */
  width:100%;          
  height: auto;
  margin-left: auto;
  margin-top: 6%;
  position: relative;
  color: #fefaf8;      
  font-size: 6rem;   
  text-align: center;
  position: relative;
  overflow: hidden;  
  z-index: 5;
  font-family: 'figtree', sans-serif;
  font-weight: bold; 
  justify-content: center;
  align-items: center;  
}

.box-21 {              /* Check out our promotion video! */
  width:100%;          
  height: auto;
  margin-left: auto;
  margin-top: 6%;
  position: relative;
  color: #393939;      
  font-size: 4rem;   
  text-align: center;
  position: relative;
  overflow: hidden;  
  z-index: 5;
  font-family: 'figtree', sans-serif;
  font-weight: bold; 
  justify-content: center;
  align-items: center;  
}

.box-22 {              /* wave, river */
  width: 100%;
  height: auto;
  margin-left: 0%;
  margin-top: 0%;
  position: absolute; 
  bottom: 0;          
  left: 0;  
  z-index: 0;         
}

.box-23 {              /* degradation1 */
  width: 45%;
  height: auto;
  margin-left: 28%;
  margin-top: 20%;
  position: absolute;         
  z-index: 4;          
}

.box-26 {              /* degradation2 */
  width: 45%;
  height: auto;
  margin-left: 28%;
  margin-top: 1300px;
  position: absolute;         
  z-index: 5;          
}

.box-25 {              /* degradation3 */
  width: 50%;
  height: auto;
  margin-left: 27%;
  margin-top: 2300px;
  position: absolute;  
  z-index: 4;     
  justify-content: center;      
}

.box-27 {              /* Detection, biosensor */
  width:100%;          
  height: auto;
  margin-left: auto;
  margin-top: 6%;
  position: relative;
  color: #fefaf8;      
  font-size: 6rem;   
  text-align: center;
  position: relative;
  overflow: hidden;  
  z-index: 5;
  font-family: 'figtree', sans-serif;
  font-weight: bold; 
  justify-content: center;
  align-items: center;  
}

.box-28 {              /* text4 */
  width: 65%;          
  height: auto;
  margin-left: 20%;
  margin-top: 810px;
  position: relative;
  color: #fefaf8;      
  font-size: 1.8rem;   
  text-align: center;
  position: relative;
  overflow: hidden;  
  z-index: 5;
  font-family: 'figtree', sans-serif;
  font-weight: normal; 
}

.box-28 strong {
  font-family: 'figtree', sans-serif;
  font-weight: bold;
}

.box-29 {              /* text5 */
  width: 65%;          
  height: auto;
  margin-left: 20%;
  margin-top: 860px;
  position: relative;
  color: #fefaf8;      
  font-size: 1.8rem;   
  text-align: center;
  position: relative;
  overflow: hidden;  
  z-index: 5;
  font-family: 'figtree', sans-serif;
  font-weight: normal; 
}

.box-29 strong {
  font-family: 'figtree', sans-serif;
  font-weight: bold;
}



.box-31 {              /* yeast */
  width: 20%;
  height: auto;
  margin-left: 15%;
  margin-top: 30%;
  position: absolute;         
  z-index: 4;          
}

.box-32 {           /* yeast-gfp */
  width: 30%;
  height: auto;
  margin-left: 55%;
  margin-top: 25%;
  position: absolute;         
  z-index: 4;  
}

.box-33 {              /* yeast */
  width: 20%;
  height: auto;
  margin-left: 15%;
  margin-top: 80%;
  position: absolute;         
  z-index: 4;          
}

.box-34 {           /* yeast-tryptphan */
  width: 33%;
  height: auto;
  margin-left: 55%;
  margin-top: 75%;
  position: absolute;         
  z-index: 4;  
}

.box-35 {              /* text7 */
  width: 65%;          
  height: auto;
  margin-left: 18%;
  margin-top: 600px;
  position: relative;
  color: #fefaf8;      
  font-size: 1.8rem;   
  text-align: center;
  position: relative;
  overflow: hidden;  
  z-index: 5;
  font-family: 'figtree', sans-serif;
  font-weight: normal; 
}

.box-35 strong {
  font-family: 'figtree', sans-serif;
  font-weight: bold;
}

.box-36 {           /* fish3 */
  width: 45%;
  height: auto;
  margin-left: 42%;
  margin-top: 25%;
  position: absolute;         
  z-index: 1;  
}


.box-38 {              /* text4 */
  width: 65%;          
  height: auto;
  margin-left: 18%;
  margin-top: 530px;
  position: relative;
  color: #fefaf8;      
  font-size: 1.8rem;   
  text-align: center;
  position: relative;
  overflow: hidden;  
  z-index: 5;
  font-family: 'figtree', sans-serif;
  font-weight: normal; 
}

.box-38 strong {
  font-family: 'figtree', sans-serif;
  font-weight: bold;
}






.hometitle {              /* title */
  display: inline-block;
  font-size: 8rem;
  font-family: 'abigdeal';
  background: linear-gradient(to left, #6bbce5, #a9d6ef, #6eaccd, #6bbce5);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 500% 100%;
  animation: gradientAnimation 25s infinite linear;
  text-align: center;
  margin: 0 auto;
  flex-direction: column;
  letter-spacing: 0.1em; 
  padding: 0;
  box-sizing: border-box;
}


.video {              /* promotion video */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 30px solid  #69bbe3;
  border-radius: 0px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  z-index: 4; 
}







/* Animations */


.glowing-svg {          /* GFP */
  width: 100%; 
  height: auto;
  animation: glow 4s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    filter: drop-shadow(0 0 20px limegreen); 
  }
  to {
    filter: drop-shadow(0 0 40px chartreuse) brightness(1.5);
  }
}


@keyframes gradientAnimation {
  from {
      background-position: 0% center;
  }

  to {
      background-position: -200% center;
  }
}



.slide-hidden {
  transform: translateY(100%);
  opacity: 0;
}

.slide-in-view {
  animation: slide-up 5s forwards;
  opacity: 1;
}



@keyframes slide {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate {
  transition: opacity 1s ease, transform 1s ease;
}

@keyframes slide-in {
  from {
      transform: translateX(-100%);
      opacity: 0;
  }
  to {
      transform: translateX(0);
      opacity: 1;
  }
}
.slide-hidden {
  transform: translateX(-100%);
  opacity: 0;
  visibility: hidden;
}
.slide-in-view {
  animation: slide-in 5s forwards;
  opacity: 1;
  transform: translateX(0);
  visibility: visible;
}



@keyframes slide-in-left {
  from {
    transform: translateX(-100%); 
    opacity: 0; 
  }
  to {
    transform: translateX(0); 
    opacity: 1; 
  }
}

.slide-left-hidden {
  transform: translateX(-100%); 
  opacity: 0;
  visibility: hidden;
}

.slide-left-in-view {
  animation: slide-in-left 1s forwards;
  opacity: 1; 
  transform: translateX(0); 

  visibility: visible;
}


@keyframes slide-in-right {
  from {
    transform: translateX(100%); 
    opacity: 0; 
  }
  to {
    transform: translateX(0); 
    opacity: 1; }
}

.slide-right-hidden {
  transform: translateX(100%); 
  opacity: 0;
  visibility: hidden; 
}


.slide-right-in-view {
  animation: slide-in-right 1s forwards;
  opacity: 1; 
  transform: translateX(0); 
  visibility: visible; 
}


@keyframes slide-up {
  from {
    transform: translateY(100%); 
    opacity: 0; 
  }
  to {
    transform: translateY(0); 
    opacity: 1; 
  }
}

.slide-up-hidden {
  transform: translateY(100%); 
  opacity: 0;
  visibility: hidden; 
}


.slide-up-in-view {
  animation: slide-up 1s forwards;
  opacity: 1; 
  transform: translateY(0); 
  visibility: visible; 
}


@keyframes slide-in-left {
  from {
    transform: translateX(-100%); 
    opacity: 0; 
  }
  to {
    transform: translateX(0); 
    opacity: 1; 
  }
}

.slide-left-hidden {
  transform: translateX(-100%); 
  opacity: 0;
  visibility: hidden;
}

.slide-left-in-view {
  animation: slide-in-left 2s forwards;
  opacity: 1; 
  transform: translateX(0); 

  visibility: visible;
}


@keyframes slide-in-right {
  from {
    transform: translateX(100%); 
    opacity: 0; 
  }
  to {
    transform: translateX(0); 
    opacity: 1; }
}

.slide-right-hidden {
  transform: translateX(100%); 
  opacity: 0;
  visibility: hidden; 
}


.slide-right-in-view {
  animation: slide-in-right 2s forwards;
  opacity: 1; 
  transform: translateX(0); 
  visibility: visible; 
}


@keyframes slide-up {
  from {
    transform: translateY(100%); 
    opacity: 0; 
  }
  to {
    transform: translateY(0); 
    opacity: 1; 
  }
}

.slide-up-hidden {
  transform: translateY(100%); 
  opacity: 0;
  visibility: hidden; 
}


.slide-up-in-view {
  animation: slide-up 1s forwards;
  opacity: 1; 
  transform: translateY(0); 
  visibility: visible; 
}





.bouncing {              /* fish */  
  animation-name: bouncing;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes bouncing {
  0% { transform: translate(-8px, 0); }  
  50%  { transform: translate(8px, 0); }  
  100% { transform: translate(-8px, 0); }  
}

.bouncing-left {  
  animation-name: bouncing-left;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes bouncing-left {
  0% { transform: translate(8px, 0); }
  50%  { transform: translate(-8px, 0); } 
  100% { transform: translate(8px, 0); }  
}

.bouncing-up {              /* fish */  
  animation-name: bouncing;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes bouncing {
  0% { transform: translateY(-4px); }  /* Początek animacji - przesunięcie w górę */
  50%  { transform: translateY(4px); }  /* Środek animacji - przesunięcie w dół */
  100% { transform: translateY(-4px); }  /* Koniec animacji - powrót do góry */
}

#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 5px;
  background-color: #028175; 
  width: 0%;
  z-index: 9999;
}

/* Navbar */
.navbar-hidden {
  transition: top 0.3s ease;
}

/* Navbar style */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 70px; 
  background-color: #333; 
  z-index: 1000;
  transition: top 0.3s ease; 
}

@media only screen and (max-width: 769px) {
  .hometitle{
    font-size: 9vW;
  }
  
  .section-2 {          /* section 2 */
    height: 135vW;
  }
  .box-15 {              /* text1 */         
    height: auto;
    position: relative;
    color: #001825;         
    font-size: 5vW;   
    text-align: center;
    position: relative; 
    overflow: hidden;  
    font-family: 'montserrat-light', sans-serif;
  }
  .box-1 {               /* water pipe */
    margin: 0 auto 0 5vW;
  } 

  .box-22 {   	        /* static wave before illustration and text2 */
    margin: -5px 0;
    width: 100%;
  }
  .box-2 {              /* dirty water */
    margin-left: 6.5%;
    width: 50%;
  }
  .box-12{              /* pills up close */
    top: 35px;
    width: 40%;
  }

  .box-18 {             /* text2 */
    width: 75%;
    height: auto;
    margin: 50vw auto 0 auto;
    position: relative;
    color: #00243a;
    font-size: 5vW;
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 5;
    font-family: 'montserrat-light', sans-serif;
    font-weight: normal;
  }

  .box-14 {              /* floating fishies */
    top: -40px;
    left: 40px;
    width: 35vW;
    opacity: 0.6;
  }
  .box-13 {             /* floating fishies 2 */
    top: 700px;
  }

  .box-19 {             /* text3 */
    width: 75%;
    margin: 0 auto;
    font-size: 5vW;
    font-family: 'montserrat-light', sans-serif;
  }
  .box-6 {              /* left seaweed */
    bottom: 10px;
  }

  .section-4 {          /* section 4 */
    height: 550vW;      /* 2100px; */
  }
  .box-20 {             /* headline 2 */
    font-size: 10vW;
    font-family: 'montserrat', sans-serif;
  }

  .box-23 {             /* figure 4.1 */
    width: 75%;
    margin: 20vW auto;
    position: relative;
  }
  .box-28 {             /* text 4.1 */
    width: 75%;
    margin: 20vW auto;
    font-size: 5vW;
    font-family: 'montserrat-light', sans-serif;
  }

  .box-26 {              /* figure 4.2 */
    width: 75%;
    margin: 20vW auto;
    position: relative;
  }
  .box-29 {             /* text 4.2 */
    width: 75%;
    margin: 20vW auto;
    font-size: 5vW;
    font-family: 'montserrat-light', sans-serif;
  }
  .box-25 {             /* figure 4.3 */
    width: 75%;
    margin: 20vW auto;
    position: relative;
  }

  .section-5 {          /* section 5 */
    height: 450vW;       /* 1650px; */
  }

  .box-27 {             /* headline 3 */
    margin: 20vW auto;
    font-size: 10vW;
    font-family: 'montserrat', sans-serif;
  }
  .box-38 {             /* text 5.1 */
    width: 75%;
    margin: 60vW auto 20vW;
    font-size: 5vW;
    font-family: 'montserrat-light', sans-serif;
  }
  .box-31 {             /* figure 5.1 above-left */
    width: 25%;
    margin: 70vW 15% 0;
  }
  .box-32 {             /* figure 5.2 above-right */
    width: 35%;
    margin: 65vW 50% 0;
  }
  .box-33 {             /* figure 5.3 under-left */
    width: 32%;
    margin: 20vW auto 20vW 5VW;
    position: relative;
  }
  .box-34 {             /* figure 5.4 under-right */
    width: 50%;
    margin: 13vW 0 20vW auto;
    position: relative;
  }
  .box-35 {             /* text 5.2 */
    width: 75%;
    margin: 20vW auto;
    font-size: 5vW;
    font-family: 'montserrat-light', sans-serif;  
  } 

  .section-6 {          /* section 6 */
    height: 180vW;
  }
  .box-21 {             /* headline 6.1 */
    height: 40vW;
    margin: 20vW auto;
    font-size: 10vW;
    position: relative;
    font-family: 'montserrat', sans-serif;
  }
  .video {
    position: relative;
    top: 30vW;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 2vW solid #69bbe3;
    border-radius: 2vW;
  }

  .box-36 {             /* fishies */
    width: 65%;
    margin: 20vW 0 0 25vW;
    opacity: 0.4;
  }


}
@media only screen and (max-width: 426px) {
  .hometitle{
    font-size: 10vW;
  }
  .small_screen_p{
    font-size: 5vW;
    text-align:center;
  }
  .box-15 {              /* text1 */         
    height: auto;
    position: relative;
    color: #001825;         
    font-size: 5vW;   
    text-align: center;
    position: relative; 
    overflow: hidden;  
    font-family: 'montserrat-light', sans-serif;
  }
  .box-22 {   	        /* static wave before illustration and text2 */
    margin: -5px 0;
    width: 100%;
  }
  .box-1{               /* pipe */
    margin: 0 auto 0 5vW;
  }
  .box-2 {              /* dirty water */
    margin-left: 3%;
    width: 40%;
  }
  .box-12{              /* pills up close */
    top: 25px;
  }

  .box-18 {             /* text2 */
    width: 75%;
    height: auto;
    margin: 50vw auto 0 auto;
    position: relative;
    color: #00243a;
    font-size: 5vW;
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 5;
    font-family: 'montserrat-light', sans-serif;
    font-weight: normal;
  }

  .box-14 {              /* floating fishies */
    top: -40px;
    left: 40px;
    width: 35vW;
    opacity: 0.6;
  }
  .box-13 {             /* floating fishies 2 */
    top: 700px;
  }

  .box-19 {             /* text3 */
    width: 75%;
    margin: 0 auto;
    font-size: 5vW;
    font-family: 'montserrat-light', sans-serif;
  }
  .box-6 {              /* left seaweed */
    bottom: 10px;
  }

  .section-4 {          /* section 4 */
    height: 550vW;      /* 2100px; */
  }
  .box-20 {             /* headline 2 */
    font-size: 10vW;
    font-family: 'montserrat', sans-serif;
  }

  .box-23 {             /* figure 4.1 */
    width: 75%;
    margin: 20vW auto;
    position: relative;
  }
  .box-28 {             /* text 4.1 */
    width: 75%;
    margin: 20vW auto;
    font-size: 5vW;
    font-family: 'montserrat-light', sans-serif;
  }

  .box-26 {              /* figure 4.2 */
    width: 75%;
    margin: 20vW auto;
    position: relative;
  }
  .box-29 {             /* text 4.2 */
    width: 75%;
    margin: 20vW auto;
    font-size: 5vW;
    font-family: 'montserrat-light', sans-serif;
  }
  .box-25 {             /* figure 4.3 */
    width: 75%;
    margin: 20vW auto;
    position: relative;
  }

  .section-5 {          /* section 5 */
    height: 450vW;       /* 1650px; */
  }

  .box-27 {             /* headline 3 */
    margin: 20vW auto;
    font-size: 10vW;
    font-family: 'montserrat', sans-serif;
  }
  .box-38 {             /* text 5.1 */
    width: 75%;
    margin: 60vW auto 20vW;
    font-size: 5vW;
    font-family: 'montserrat-light', sans-serif;
  }
  .box-31 {             /* figure 5.1 above-left */
    width: 25%;
    margin: 70vW 15% 0;
  }
  .box-32 {             /* figure 5.2 above-right */
    width: 35%;
    margin: 65vW 50% 0;
  }
  .box-33 {             /* figure 5.3 under-left */
    width: 32%;
    margin: 20vW auto 20vW 5VW;
    position: relative;
  }
  .box-34 {             /* figure 5.4 under-right */
    width: 50%;
    margin: 13vW 0 20vW auto;
    position: relative;
  }
  .box-35 {             /* text 5.2 */
    width: 75%;
    margin: 20vW auto;
    font-size: 5vW;
    font-family: 'montserrat-light', sans-serif;  
  } 

  .section-6 {          /* section 6 */
    height: 900px;
  }
  .box-21 {             /* headline 6.1 */
    height: 45vW;
    margin: 20vW auto;
    font-size: 10vW;
    position: relative;
    font-family: 'montserrat', sans-serif;
  }
  .video {
    position: relative;
    top: 70vW;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 5vW solid #69bbe3;
    border-radius: 2vW;
  }

  .box-36 {             /* fishies */
    width: 65%;
    margin: 20vW 25% 0;
    opacity: 0.5;
  }

}