/* GLOBAL */
/* Text syles */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@800&display=swap');
@import url("https://use.typekit.net/shq7gkq.css");

html {font-size: 18px;
/* Adjust default font size, for rem */}

body {
	font-family: Archivo; /* archivo -- font-family: acumin-pro, sans-serif; */
	font-size: 1rem;
	line-height: 1.4;
	color: #000000;
  background-color: #FFFFFF;
}

a {
  text-decoration: none;
  color: #000000;
}

sup {font-size:0.8rem; vertical-align:top;}

img {
  opacity: 0;
  transition: opacity 0.6s ease;
}
/* Add this class when image is fully loaded */
img.loaded {
  opacity: 1;
}


.white{
	color: #FFFFFF;
}

.inactive{
  opacity: 0.4;
}

.indent {
  padding-left: calc(1.25em * 1.4);
}

.indent-border {
  padding-left: calc(1em * 0.8);
  border-left: 1.5px solid #000000;
}

.secondary-font {
  /* font-family:magneta;
  font-style: italic; */
  font-weight: 700;
}

.light-border {
  border: 1px solid #d3d3d3;
}

h1 {
  font-size: 3.052rem;
	line-height: 1.2;
}

h2 {
  font-size: 2.441rem;
	line-height: 1.2;
}

h3 {
  font-size: 1.953rem;
	line-height: 1.2;
  font-weight: 500;
}

h4 {
  font-size: 1.25rem;
  font-weight: 500;
}

h5 {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
}

.body2 {
  /* font-family: JetBrains Mono; */
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1;
}

.body3 {
  font-size: 0.8rem;
}

.bodyXL {
  font-size: 1.563rem;
}

.caption {
  font-size: 0.6rem;
}

button {
  padding: 0;
  font-family:archivo;
	font-size: 1rem;
  background: none;
  border: none;
}

#regular-weight{
  font-weight: 400;
}

#weight-500{
  font-weight: 500;
}

.bold{
  font-weight: 700;
}

.italic{
  font-style: italic;
}

.underline-thin {
   text-decoration: underline;
   text-decoration-thickness: 1.5px;
   text-underline-offset: 0.1em;
}

.underline {
   text-decoration: underline;
   text-underline-offset: 0.15em;
}

.paragraph_link {
   font-weight: 700;
   transition: color 0.2s; /* smooth transition when color changes */
}

/* .paragraph_link:hover {
    color: #9a54f5;
} */

.inline-icon {
  height: 1.563rem;
  vertical-align: text-bottom; /* or middle, depending on style */
}

.inline-symbol {
  height: 3.052rem;
  vertical-align: text-bottom;
  border-radius: 0px;
}

.inline-symbol-h2{
  height: 2.441rem;
  vertical-align: text-bottom;
  border-radius: 0px;
}

.bottom-border {
  border-bottom: 1px solid #000000;
}

.top-border {
  border-top: 1px solid #000000;
}

/* ----------------------- Toggle switch wrapper */
.switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  vertical-align: bottom;
  margin-bottom: 4px;
}

/* Hide native checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Track (slider) */
.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.3s;
}

/* Thumb (circle) */
.slider::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  top: 2px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
}

/* Checked state (ON) */
input:checked + .slider {
  background-color: #9a54f5;
}

input:checked + .slider::before {
  transform: translateX(16px);
}

/* -----------------------  Configuration calsses */

.main-box {
  background-color: #FFFFFF;
  height: 100vh;
}

.flex-container {
    display: flex;
    flex-wrap: nowrap;
    padding: 88px 40px 0 40px;
    gap: 16px;
    background-color: #FFFFFF;
}

.flex-container-wrap {
    display: flex;
    flex-wrap: wrap;
    padding: 88px 40px 0 40px;
    gap: 16px;
    /* background-color: #E3E4DD; */
  	z-index: 2;
}

.one-column {
    flex: 0 0 calc(((100% - 176px) / 12) * 1);
    /* background-color: #ff0083; */
    box-sizing: border-box;
  	z-index: 2;
}

.two-columns {
    flex: 0 0 calc(((100% - 176px) / 12) * 2 + (1 * 16px));
    box-sizing: border-box;
  	z-index: 2;
}

.three-columns {
    flex: 0 0 calc(((100% - 176px) / 12) * 3 + (2 * 16px));
    /* background-color: #7fdbff; */
    box-sizing: border-box;
  	z-index: 2;
}

.four-columns {
    flex: 0 0 calc(((100% - 176px) / 12) * 4 + (3 * 16px));
  	/* background-color: #ffb1b1; */
    box-sizing: border-box;
  	z-index: 2;
}

.five-columns {
    flex: 0 0 calc(((100% - 176px) / 12) * 5 + (4 * 16px));
  	/* background-color: #5510ff; */
    box-sizing: border-box;
    z-index: 2;
  	/* overflow: hidden; */
}

.six-columns {
    flex: 0 0 calc(((100% - 176px) / 12) * 6 + (5 * 16px));
  	/* background-color: #5510ff; */
    box-sizing: border-box;
    z-index: 2;
  	/* overflow: hidden; */
}

.seven-columns {
    flex: 0 0 calc(((100% - 176px) / 12) * 7 + (6 * 16px));
  	/* background-color: #ff851b; */
    box-sizing: border-box;
  	z-index: 2;
}

.nine-columns {
    flex: 0 0 calc(((100% - 176px) / 12) * 9 + (8 * 16px));
  	/* background-color: #ff851b; */
    box-sizing: border-box;
  	z-index: 2;
}

.twelve-columns {
    flex: 0 0 calc(((100% - 176px) / 12) * 12 + (11 * 16px));
  	/* background-color: #1abc9c; */
    box-sizing: border-box;
  	z-index: 2;
}

/* colors */

.purple {
  color: #7C77DF;
}

.green {
  color: #9BDF77;
}

.orange {
  color: #ffb93c;
}

/* common spaces */

.top-8{
  padding-top: 8px;
}

.top-20{
  padding-top: 20px;
}

.top-24{
  padding-top: 24px;
}

.top-big{
  padding-top: 148px;
}

#hero-text{}

.top-adaptable-landing{
  padding-top: var(--text-box-height);
}

#text-left-services{}

.top-adaptable-services{
  padding-top: var(--text-box-height-2);
}

#text-left-contacts{}

.top-adaptable-contacts{
  padding-top: var(--text-box-height-3);
}

.bottom-4{
  padding-bottom: 4px;
}

.bottom-8{
  padding-bottom: 8px;
}

.bottom-12{
  padding-bottom: 12px;
}

.bottom-16{
  padding-bottom: 16px;
}

.bottom-20{
  padding-bottom: 20px;
}

.bottom-24{
  padding-bottom: 24px;
}

.bottom-32{
  padding-bottom: 32px;
}

.bottom-40{
  padding-bottom: 40px;
}

.bottom-48{
  padding-bottom: 48px;
}

.bottom-56{
  padding-bottom: 56px;
}

.bottom-64{
  padding-bottom: 64px;
}

.bottom-80{
  padding-bottom: 80px;
}

.bottom-120{
  padding-bottom: 120px;
}

.bottom-huge{
  padding-bottom: 160px;
}

.bottom-margin-120{
  margin-bottom: 120px;
}

.right-margin-32{
  margin-right: 32px;
}

.top-margin-minus64{
  margin-top: -64px;
}

/* HEADER */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px; 
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

/* HEADER */

header {
  position: fixed;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 40px;
  box-sizing: border-box;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 1) 55%,
    rgba(255, 255, 255, 0) 100%
  );
  z-index: 5;
}

/* Keep your site title on the left */
header p a {
  color: #000000;
  text-decoration: none;
}

/* Hide the hamburger by default; show only on mobile via media query */
.hamburger {
  display: none;
  font-size: 1.8rem;
  cursor: pointer;
  user-select: none;
  z-index: 6; /* above the overlay */
}

/* Your existing nav styling */
header nav {
  float: right;
}
header nav p {
  margin: 0;
}
header nav a {
  margin-left: 1rem;
  color: #000000;
  font-weight: 400;
  transition: color 0.2s;
}
/* header nav a:hover {
  color: #9a54f5;
} */


/* LANDING */

/* .background-image {
    position: fixed;
    width: 100%;
    z-index: 1;
} */

#header-home{
  padding-bottom: 2.4rem;
}

#landing-paragraph {
  padding-bottom: 4rem;
}

#home-button {
  display: flex;
  flex-direction: row;
  padding-top: 2rem;
  align-items: center;
}

#home-button-txt {
  font-weight: 700;
  /* font-style: italic; */
  padding-right: 16px;
}

#home-button-img {
  height: 2rem;
  color: #000000;
  /* margin-top: 2px; */
}

#locked-column-five{
  position:  fixed;
  display: flex;
  width: calc(((100% - 196px) / 12) * 5 + (4 * 16px));
  overflow: hidden;
  height:100vh;
  flex-direction: column;
}

#locked-column-six{
  position:  fixed;
  display: flex;
  width: calc(((100% - 196px) / 12) * 6 + (5 * 16px));
  overflow: hidden;
  height:100vh;
  flex-direction: column;
}

#bottom{
   position: fixed;
   bottom: 0;
   padding: 0 0 32px 0;
   line-height: 1.5;
}

footer {
		  position:  fixed;
  		bottom: 0;
  		width: 100%;
      padding: 0 40px 40px 40px;
       background: linear-gradient(to top,rgba(255, 255, 255, 1) 0%,rgba(255, 255, 255, 1) 80%,rgba(255, 255, 255, 0) 100%);
  		z-index: 5;
		}

.hover-container {
  	cursor: pointer;
    position: relative; /* This makes the image position relative to the hovered word */
    display: inline-block; /* Ensures it wraps only the word */
}

.overlay-image {
    position: absolute;
    top: 100%; /* Below the hovered word */
    left: 50%;
    transform: translateX(-100%);
    width: 400px;
    height: auto;
    display: none;
    border-radius: 5px;
    z-index: 9999;
    /* box-shadow: 4px 4px 4px 4px rgba(0.2, 0.2, 0.2, 0.2); */
    max-width: none; /* Prevents it from being constrained by any parent container's width */
  	overflow: visible;
}

.hover-container:hover .overlay-image {
    display: block; /* Show the image when the word is hovered */
    transition: transform 0.5s ease;
}

/*about page */ 

.imeges-two {
  display: flex;
  gap: 8px;
}

.imeges-two img {
  width: calc(50% - 4px);
  height: auto;
}


/* WORKS PAGE */

img{
  border-radius: 5px;
}

.no-corners{
  border-radius: 0px;
}

.margin-and-corners {
  border-radius: 5px;
}

.video-full {
  width: 100%;
  height: auto;
  border-radius: 5px;
  display: block;
}

#locked-column-three{
  position: fixed;
  display: flex;
  width: calc(((100% - 176px) / 12) * 3 + (2 * 16px));
  overflow: hidden;
  height:100vh;
  flex-direction: column;
}

.card-box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  width:calc(((100% - 176px) / 12) * 12 + (11 * 16px));
  /* box-sizing: border-box; */
  z-index: 2;
}

.card {
	display: flex;
  flex-direction:  column;
  position: relative;
  overflow: hidden;   /* Ensure overlay stays inside card */
  width: calc(((100% - 32px)/ 12) * 4);
  aspect-ratio: 5 / 4;
  box-sizing: border-box;
  border-radius: 5px;
  gap: 16px;
}

.image-proportions {
  width: 100%;
  aspect-ratio: 5 / 4;
  position: relative;   /* for absolute overlay */
  overflow: hidden;
  border-radius: 5px;
  flex: 0 0 auto;
}

/* the photo itself */
.image-proportions img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* overlay now positioned in the exact same box */
.image-proportions .card-text {
  position: absolute;
  inset: 0;             /* shorthand for top:0; right:0; bottom:0; left:0; */
  background: rgb(243, 243, 243);
  border-radius: 5px;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.card-text p {
  width: 90%;
   text-align: left;
}

.card:hover .card-text {
  opacity: 1;
  pointer-events: auto;
}


/* CONFETTI PAGE */

/* to control overlay appereance */

#overlay-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: rgba(0, 0, 0, 0.5); dim background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  pointer-events: none;
}

#confetti-box {
  /* background: rgb(255, 255, 255);  */
  height: 80vh;
  width: 80vh;
  overflow-y: auto;
  position: relative;
  padding: 20px;
  /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); */
  border-radius: 5px;
  pointer-events: auto;
  overflow:visible;
}

/* previous to overlay */

#scatter-container {
  position: relative;
  /* margin-top: -210px;
  z-index: -1;
  width: 70%;
  margin-left: 15%;
  margin-right: 15%; 
  /* overflow: hidden;*/
  height: 100%;
  width: 100%;
  opacity: 0%;
  transition: opacity 0.8s ease;
  overflow:visible;
  /* Optional: prevent interaction until visible */
  /* pointer-events: none; */
}

#scatter-container a {
  position: absolute;
  display: inline-block;
  width: 100px;
  height: 100px;
}

.scatter-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: grab;
  transition: transform 0.1s ease;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
}

.scatter-image:active {
  cursor: grabbing;
}



/* ========== LIST VIEW STYLES ========== */

body.list-view .card-box {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
}

body.list-view .card {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 64px;
  width: 100%;
  padding: 0;
  border-top: 1px solid rgb(209, 209, 209);
  border-radius: 0;
  aspect-ratio: auto;
  box-sizing: border-box;
  position: relative;
}

body.list-view .card-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
}

body.list-view .image-proportions img {
  display: none;
}

body.list-view .image-proportions .card-text {
  position: static;           /* remove absolute positioning */
  opacity: 1;                 /* make text visible */
  pointer-events: auto;
  vertical-align: middle;
  background: none;
  padding: 8px 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: all 0.1s ease;
}

body.list-view .card-text p {
  margin: 0;
  padding: 0;
  text-align: left;
}

body.list-view .card-text p:first-child {
  width: calc(((100% - 176px) / 12) * 8 + (7 * 16px));
  font-weight: 500;
  font-size: 1.25rem;
}

body.list-view .card-text p:last-child {
  width: calc(((100% - 176px) / 12) * 4 + (3 * 16px));
  margin-left: calc(((100% - 176px) / 12) * 1 + (0 * 16px));
  text-align: left;
  font-size: 0.8rem;
}

/* Optional: Adjust hover styles if needed */
body.list-view .card:hover .card-text {
  /* opacity: 1; */
  /* background: #f8f8f8; */
  padding-left: 24px;
}




/* PROJECT PAGE */

.paragraph-spacing{
  margin-bottom: 0em;
}

#locked-column-four{
  position: fixed;
  display: flex;
  width: calc((100% / 12) * 4 - 32px);
  overflow: hidden;
  height:100vh;
  flex-direction: column;
  /* background-color: #ffdc00;*/
}

#locked-column-four-bottom{
  position: fixed;
  bottom: 56px;
  width: calc((100% / 12) * 4 - 32px);
  overflow: hidden;
  display: block;
  height:auto;
  /* background-color: #ffdc00; */
}

#details-line{
  display: flex;
  justify-content: flex-start;
  gap: 1.2rem;
}

#details-item{
  width: 96px;
}

.accordion-item-first {
    border-bottom: 1px solid #000000;
  	border-top: 1px solid #000000;
}

.accordion-item {
    border-bottom: 1px solid #000000;
}

.accordion-button {
    font-family:archivo;
  	background-color: #FFFFFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border: none;
    padding: 24px 0 24px 0;
    cursor: pointer;
    text-align: left;
    outline: none; /* Remove default button outline */
}

.accordion-icon {
    width: 16px;
    height: 16px;
}

.accordion-content {
    display: none;
}

.accordion-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 8px;
}

.accordion-content p {
    margin: 0;
}

.out-accordion-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 8px;
}

/* Open accordion */
.accordion-button[aria-expanded="true"] + .accordion-content {
    display: block;
}

#image_with_shadow{
  margin-left: -12px;
  margin-right: -12px;
}

/* Show and hide paragraph */

.expandable-paragraph {
  cursor: pointer;
  margin-bottom: 1rem;
}

.details {
  display: none;
}

.expandable-paragraph.expanded .details {
  display: inline;
}

#card-box-fishes {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
  width:100%;
  box-sizing: border-box;
  z-index: 2;
}

.card-fishes {
  display: flex;
  flex-direction:  column;
  width: calc(((100% - 16px)/ 7) * 3.5);
  box-sizing: border-box;
}




/* MEDIA QUERIES */
@media (max-width: 1480px) { 
	html {font-size: 18px;}
  .flex-container { gap: 8px;}
}

/* 1) iPad Pro portrait - iPad landscape */

@media (max-width: 1350px) {
   html {font-size: 16px;} 
}
 
/* 2) iPad portrait - phones (FROM HERE VERTICAL LAYOUT) */

@media (max-width: 1000px) {
  
  html {font-size: 16px;}
  
  .flex-container {
    display: flex;
    flex-direction: column;
}
  
  .four-columns { flex:100%;}  
  .five-columns { flex: 100%;}
  
  #locked-column-five{
  position: relative;
  width: calc((100% / 12) * 10);
  height:auto;
  flex-direction: column;
  margin-bottom: 4rem;
  z-index: 1;
  padding-bottom: 1rem;
  border-bottom: 1px solid #000000;
}
  
  #bottom {
   position: relative;
   bottom: 0;
   padding: 0 0 40px 0;
   line-height: 1.5;
}
  
  #locked-column-four{
  position: relative;
  width: calc((100% / 12) * 10);
  height:auto;
  flex-direction: column;
  margin-bottom: 4rem;
  z-index: 1;
}
  
.three-columns {
    flex: 100%;
  	margin-bottom: 2rem;
}
  
.card-box {
  flex: 0 0 calc((100% / 12) * 12);
  gap: 16px;
}

.card {
  flex: 0 0 calc((100% / 12) * 12);
  flex-direction: column;
  gap: 0px;
}
  
.two-columns { flex: 100%; }

.bottom-80 {padding-bottom: 3rem;}

#locked-column-four-bottom{
  position: relative;
  bottom: 56px;
  width: calc((100% / 12) * 4 - 32px);
}

/* PROJECT DETAILS */

#details-line{
  display: block;
}

#details-item{
  width: 100%;
  margin-bottom: 4px;
}

/* LIST VIEW */

body.list-view .card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 120px;
  aspect-ratio: unset;
}

body.list-view .card-link {
  flex-direction: column;
  align-items: center;
}

body.list-view .image-proportions .card-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

body.list-view .card-text p {
    margin: 0;
    padding: 0;
}

body.list-view .card-text p:first-child {
  width: 100%;
  margin-bottom: 8px;
}

body.list-view .card-text p:last-child {
  width: 100%;
  text-align: left;
}



/* CONFETTI PAGE */

#overlay-wrapper {
  top: 100px;
}

#confetti-box {
  width: 100%;
}

#scatter-container {
  width: 100%;
  margin-left: 0%;
  margin-right: 0%;
}

#scatter-container a {
  width: 80px;
  height: 80px;
}
  
 }

/* —— MOBILE MENU —— */
@media (max-width: 700px) {
  /* 1) Show the hamburger icon */
  .hamburger {
    display: block;
    height: auto;
  }
  /* 2) Hide the normal nav links row */
  header nav {
    display: none;
  }
  /* 3) When #menu-toggle is checked, show <nav> as a full-screen overlay */
  #menu-toggle:checked ~ nav {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(255, 255, 255, 0.97);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 5;
  }
  /* 4) Style the links inside the overlay as large, vertical buttons */
  #menu-toggle:checked ~ nav p {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    margin: 0;
  }
  #menu-toggle:checked ~ nav a {
    font-size: 1.25rem;
    margin: 0;
  }
  /* 5) Change the hamburger into a “close” (×) when checked */
  #menu-toggle:checked + .hamburger {
    content: "✕";
  }
  /* Note: The “+” selector targets the label immediately after the input. */
  
  #mobile-hidden{ display: none;}
}


/* 2B) 700px - Phones */

@media (max-width: 700px){ 

  .body2 {font-size: 1rem;}
  .body3 {font-size: 1rem;}
  
  .flex-container {padding: 88px 16px 0 16px;}
	.flex-container-wrap {padding: 88px 16px 0 16px;}
  
  /* header {padding: 24px;}
  header nav a {margin-left: 12px;}
  header a {font-size: 1rem;} */

  header {padding: 24px 16px 24px 16px;}

  .main-box {
  height: auto;
} 
  footer {
	    position: relative;
      width:  100%;
      padding: 0 24px 24px 24px;
      background-color: #ffffff;
  		z-index: 2;
		}
  footer p { font-size: 1.4rem;}
  #bottom {
    padding-top: 8px; 
    border-top: 1px solid #000000;
  }


  
  #locked-column-five { width: calc((100% / 12) * 12);} 
  #locked-column-four { width: calc((100% / 12) * 12);}
  
  #locked-column-six { 
    width: calc((100% / 12) * 12); 
    position: static; 
    height: hug;
  }

 .top-adaptable-landing{
  padding-top: 0px;
}

 .top-adaptable-services{
  padding-top: 0px;
}

 .top-adaptable-contacts{
  padding-top: 0px;
}

.accordion-button h4 { color: #000000; }
.accordion-button p { color: #000000; }
  
  /* .image-proportions{
    width: 100%;
    height: 190px;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 16px;
  } */

  .image-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
		}
  
}

/* Phones (iPhone XR, XS Max - Galaxy S5) */

@media (max-width: 480px){ 
  
  .flex-container { padding: 88px 16px 0 16px;}
	.flex-container-wrap { padding: 88px 16px 0 16px;}
  .accordion-button {margin-right: 16px;}
  .accordion-content{margin-right: 0px;}
  
  footer {padding: 0 16px 16px 16px}

/* Phones (iPhone XS and iPhone 6, 6S, 7, 8) */

@media (max-width: 375px){ 
}

/* Phones smaller than Galaxy S5 */

@media (max-width: 350px){
  
}