body {
  font-family: sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: #444;
}

.title {
  color: #e41612;
}

/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*=======Document========*/
/** Use a better box model (opinionated).*/
*,
::before,
::after { box-sizing: border-box;}

/**Use a more readable tab size (opinionated).**/
html {
    -moz-tab-size: 4;
    -o-tab-size: 4;
     tab-size: 4;
    }

/** 1. Correct the line height in all browsers.
    2. Prevent adjustments of font size after orientation changes in iOS.*/
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
    }

/*========Sections========*/
/**========Remove the margin in all browsers.========*/
body {
  margin: 0;
}

/**Improve consistency of default fonts in all browsers. 
(https://github.com/sindresorhus/modern-normalize/issues/3)*/

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

/*========Grouping content================*/
/**1. Add the correct height in Firefox.
   2. Correct the inheritance of border color in Firefox. 
   (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)*/
hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
}

/*========Text-level semantics====================*/
/**Add the correct text decoration in Chrome, Edge, and Safari.*/
abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/**Add the correct font weight in Edge and Safari.*/
b,
strong {
  font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. 
(https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**Add the correct font size in all browsers.*/
small {
  font-size: 80%;
}

/**Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*Tabular data============*/
/**1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
   2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)*/
table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
}

/*Forms=====*/
/**1. Change the font styles in all browsers.
   2. Remove the margin in Firefox and Safari.*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**Remove the inheritance of text transform in Edge and Firefox.
  1. Remove the inheritance of text transform in Firefox.*/
button,
select {
  /* 1 */
  text-transform: none;
}

/**Correct the inability to style clickable types in iOS and Safari.*/
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**Remove the inner border and padding in Firefox.*/
::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**Restore the focus styles unset by the previous rule.*/
:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737*/
:-moz-ui-invalid {
  box-shadow: none;
}

/**Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.*/
legend {
  padding: 0;
}

/**Add the correct vertical alignment in Chrome and Firefox.*/
progress {
  vertical-align: baseline;
}

/**Correct the cursor style of increment and decrement buttons in Safari.*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**1. Correct the odd appearance in Chrome and Safari.
   2. Correct the outline style in Safari.*/
[type=search] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**Remove the inner padding in Chrome and Safari on macOS.*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**1. Correct the inability to style clickable types in iOS and Safari.
   2. Change font properties to 'inherit' in Safari.*/
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*========Interactive===========*/
/*Add the correct display in Chrome and Safari.*/
summary {
  display: list-item;
}

@font-face {
  font-family: "dialog";
  src: url("../assets/fonts/dialog.otf");
}
:root {
  --font-primary: "Bai Jamjuree", sans-serif;
  --color-primary: #8246E0;
  --color-secondary: #F74D1A;
  --color-text: #454541;
  --color-white: #ffffff;
}

html {
  scroll-behavior: smooth;
}

header {
  position: sticky;
  z-index: 30;
  top: 0;
  background-color: var(--color-white);
}

body {
  font-family: var(--font-primary);
}
body section {
  margin: 0 5vw 4em 5vw;
}
body ul {
  list-style: none;
  padding: 0;
}

h2 {
  font-size: 32px;
  color: var(--color-primary);
  margin-bottom: 1em;
}
h2 span {
  color: var(--color-secondary);
}

nav.mobile {
  display: block;
  height: 65px;
}
nav.mobile button {
  border: none;
  background: none;
}
nav.mobile .nav__links--hidden {
  display: none;
}
nav.mobile .nav__links {
  position: fixed;
  z-index: 20;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  background: linear-gradient(166.95deg, #F74D1A 0%, #A548A4 100%);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
nav.mobile .nav__links li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5em;
  font-size: 28px;
}
nav.mobile .nav__links--active {
  font-weight: bold;
}
nav.mobile .burger__menu {
  position: relative;
  z-index: 30;
}
nav.mobile .burger__menu--fixed {
  position: fixed;
  right: 20px;
}
nav.mobile .burger__menu--hidden {
  display: none;
}
nav.desktop {
  display: none;
}
nav ul {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 20px 20px;
}
nav ul.nav__links {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 5em;
}
nav ul.nav__links a {
  color: var(--color-white);
  text-decoration: none;
}
nav ul li {
  height: 25px;
}

/* ========================================== HOME ========================================== */
.home {
  position: relative;
  margin: 0;
}
.home__container {
  width: 100%;
  position: absolute;
  z-index: 10;
}
.home__container ul {
  display: none;
}
.home__container h1 {
  display: block;
  color: var(--color-white);
  padding: 4em 0;
  font-size: 24px;
}
.home__container img {
  display: none;
}
.home video {
  position: relative;
  z-index: 0;
  width: 100vw;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  background-repeat: no-repeat;
  filter: brightness(0.5);
  height: calc(100vh - 65px);
}
.home h1, .home svg {
  width: 100%;
  margin: auto;
  text-align: center;
}
.home .scroll, .home .scroll_down {
  display: none;
  align-items: center;
  text-align: center;
}

/*---------- about -------------------------------------*/

.about__subtitle {
  font-size: 24px;
}
.about__margin {
  margin-top: 0em;
  margin-bottom: 2em; 
}

.about__text {
  margin: 2em 0 2em 2em;
  font-size: 20px;
}

.about a {
  color: var(--color-text);
  transition: 0.2s;
}

.about a:hover {
  color: var(--color-secondary);
}
/*-- time line grid --*/
.about .grid__content {
  margin-bottom: 4em;
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  grid-template-rows: 5fr;
  grid-auto-flow: row;
  grid-template-areas: "grid__timeline1 grid__cell1 grid__cell1 grid__cell1" "grid__timeline2 grid__cell2 grid__cell2 grid__cell2" "grid__timeline3 grid__cell3 grid__cell3 grid__cell3" "grid__timeline4 grid__cell4 grid__cell4 grid__cell4" "grid__timeline5 grid__cell5 grid__cell5 grid__cell5";
}

.about .grid__content p {
  margin: 0;
}
.about .grid__content strong {
  font-size: 20px;
}
.about .grid__timeline1, .about .grid__timeline2, .about .grid__timeline3 {
  margin: 0 auto;
  position: relative;
  background: linear-gradient(166.95deg, #F74D1A 0%, #A548A4 100%);
  width: 5px;
  height: 100%;
}
.about .grid__timeline1::before, .about .grid__timeline2::before, .about .grid__timeline3::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-secondary);
  transform: translateX(-50%);
}
/* .about .grid__timeline3, .about .grid__timeline4 {
  margin: 0 auto;
  position: relative;
  height: 100%;
  border: none;
  border-left: 4px dotted #A548A4;
  background: linear-gradient(166.95deg, #F74D1A 0%, #A548A4 100%);
}
.about .grid__timeline3::before, .about .grid__timeline4::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  padding: 8px;
  background-color: var(--color-white);
  border: 2px var(--color-secondary) solid;
  transform: translateX(-60%);
}
.about .grid__timeline3::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  padding: 3px;
  background-color: var(--color-secondary);
  transform: translateX(-84%);
} */

.about .grid__timeline4 {
    margin: 0 auto;
    position: relative;
    height: 100%;
    border: none;
    background: linear-gradient(166.95deg, #F74D1A 0%, #A548A4 100%);
  }
  .about .grid__timeline4::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-secondary);
    transform: translateX(-50%);
  }


.about .grid__timeline5 {
  margin: 0 auto;
  position: relative;
  height: 100%;
}
.about .grid__timeline5::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  padding: 8px;
  background-color: var(--color-white);
  border: 2px var(--color-secondary) solid;
  transform: translateX(-50%);
}
.about .grid__cell1 {
  grid-area: grid__cell1;
  margin-bottom: 20px;
}
.about .grid__cell2 {
  grid-area: grid__cell2;
  margin-bottom: 20px;
}
.about .grid__cell3 {
  grid-area: grid__cell3;
  margin-bottom: 20px;
}
.about .grid__cell4 {
  grid-area: grid__cell4;
  margin-bottom: 20px;
}
.about .grid__cell5 {
  grid-area: grid__cell5;
}
.about .grid__img {
  display: none;
}
.about svg {
  width: 100%;
}
.about img {
  display: none;
}

.guide svg {
  margin-top: 20em;
  display: none;
}
.guide img {
  width: 100%;
  margin-bottom: 2em;
}
.guide p {
  margin-bottom: 1.5em;
  font-size: 20px;
}
.guide button {
  position: relative;
  border: none;
  padding: 16px 24px;
  cursor: pointer;
  font-weight: bold;
  color: var(--color-white);
  transition: 0.3s;
  line-height: 1.5;
  height: 60px;
  font-size: 18px;
}


.guide button.purple::after {
  display: inline-block;
  content: "";
  background-image: url(../assets/images/download.svg);
  background-size: cover;
  transform: translateY(20%);
  height: 1em;
  width: 1em;
  margin-left: 0.5em;
}

.purple_button{
  background-color: var(--color-primary);
}


.guide button:hover {
  background-color: var(--color-text);
}

.tutorial {
  margin-left: 0;
  margin-right: 0;
}
.tutorial h2 {
  margin-left: 5vw;
}
.tutorial video {
  height: 100vh;
  width: 100vw;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  background-repeat: no-repeat;
}
.tutorial svg {
  display: none;
}

.community .etfi img {
  height: 10vh;
}
.community img, .community svg {
  height: 8vh;
}
.community ul li {
  text-align: center;
  margin-bottom: 2em;
}


/* ========================================== ARTISTS ========================================== */
main h1 {
  display: none;
}

section.artists h2 {
  font-weight: 400;
  text-transform: uppercase;
}
section.artists h2 span {
  color: var(--color-secondary);
}
section .flex__artist {
  display: flex;
  flex-direction: column;
  margin-bottom: 1em;
}
section .flex__artist .artist__content {
  position: relative;
  display: flex;
  flex-direction: row;
  gap: 1em;
}
section .flex__artist .artist__content::before {
  content: "";
  width: 120px;
  height: 120px;
  z-index: 10;
  top: 0;
  left: 0;
  position: absolute;
  background: conic-gradient(from 179deg at 60% -20%, #F74D1A 0deg, #8246E0 32deg, #F74D1A 296deg);
  mix-blend-mode: lighten;
  opacity: 0.5;
}
section .flex__artist .artist__content--resize::before {
  background: none;
}
section .flex__artist .artist__content--resize2::before {
  content: "";
  background: none;
}
section .flex__artist .artist__content img {
  width: 120px;
  height: 120px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  filter: grayscale(1);
}
section .flex__artist .artist__content .artist__info {
  margin: 0;
  display: flex;
  flex-direction: column;
}
section .flex__artist .artist__content .artist__info::before {
  content: "";
  z-index: 10;
  position: absolute;
  width: 120px;
  height: 5vh;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(47, 4, 116, 0.7) 100%);
}
section .flex__artist .artist__content .artist__info li .artist__name {
  color: var(--color-primary);
}
section .flex__artist .artist__content .artist__info li .artist__name span {
  color: var(--color-secondary);
}
section .flex__artist .artist__content .artist__info li p {
  margin: 0;
}
section .flex__artist .artist__content .artist__info li a {
  color: var(--color-text);
  transition: 0.2s;
}
section .flex__artist .artist__content .artist__info li a:hover {
  color: var(--color-secondary);
}
section .flex__artist--position .artist__content img {
  -o-object-position: 0;
     object-position: 0;
}

/* ========================================== BIOGRAPHIES ========================================== */
.bio__container {
  margin: 0 5vw 4em 5vw;
}
.bio__container .back {
  position: relative;
}
.bio__container .back::before {
  display: inline-block;
  content: "";
  background-image: url(../assets/images/arrow_left.svg);
  background-size: cover;
  height: 1em;
  width: 1em;
  transition: 0.2s;
  cursor: pointer;
}
.bio__container .back a {
  display: inline-block;
  margin: 3em 0 2em 0;
  font-size: 18px;
  text-decoration: none;
  color: var(--color-text);
}
.bio__container .back a:hover {
  text-decoration: underline;
}
.bio__container section {
  margin: 0;
}
.bio__container section.bio img {
  width: 100%;
  filter: grayscale(1);
  height: 500px;
  -o-object-fit: cover;
     object-fit: cover;
}
.bio__container section.bio .bio__pic {
  position: relative;
}
.bio__container section.bio .bio__pic::before {
  content: "";
  width: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  position: absolute;
  background: conic-gradient(from 179deg at 60% -20%, #F74D1A 0deg, #8246E0 32deg, #F74D1A 296deg);
  mix-blend-mode: lighten;
  opacity: 0.5;
  height: 500px;
}
.bio__container section.bio .bio__text h1 {
  display: block;
  color: var(--color-secondary);
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}
.bio__container section.bio .bio__text span {
  display: inline;
  color: var(--color-primary);
  font-size: 32px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 2.4px;
  text-transform: uppercase;
}
.bio__container section.bio .bio__text h2 {
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  color: var(--color-text);
}
.bio__container section.bio .bio__text p {
  font-size: 18px;
}

/* ========================================== GALLERY ========================================== */
section figure {
  margin: 0 0 4em 0;
}
section figcaption {
  text-align: right;
  margin: 0 2em;
}
section figcaption.link {
  text-decoration: underline;
  transition: 0.2s;
  cursor: pointer;
}
section figcaption.link:hover {
  color: var(--color-secondary);
}
section .hidden {
  display: none;
}
section.gallery {
  margin: 0;
}
section.gallery h1 {
  display: none;
}
section.gallery h2 {
  margin: 1em 5vw 1em 5vw;
  font-weight: 400;
  text-transform: uppercase;
}
section.gallery h2 span {
  color: var(--color-secondary);
}
section.gallery .gallery__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
  position: absolute;
  z-index: 10;
  right: 50%;
  left: 50%;
  top: 50%;
}
section.gallery .gallery__nav button {
  border: none;
  background: none;
  color: var(--color-white);
  font-weight: 600;
  padding: 20px;
  cursor: pointer;
}
section.gallery .gallery__nav .gallery__title {
  text-align: center;
}
section.gallery .gallery__nav .gallery__title p {
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0;
}
section.gallery .gallery__nav .gallery__title p.gallery--country {
  font-weight: 600;
  font-size: 24px;
}
section.gallery .zagreb__content, section.gallery .budapest__content, section.gallery .perth__content, section.gallery .stockholm__content, section.gallery .brussels__content {
  margin: 0;
}
section.gallery .zagreb__content .zagreb__pictures, section.gallery .zagreb__content .budapest__pictures, section.gallery .zagreb__content .perth__pictures, section.gallery .zagreb__content .stockholm__pictures, section.gallery .zagreb__content .brussels__pictures, section.gallery .budapest__content .zagreb__pictures, section.gallery .budapest__content .budapest__pictures, section.gallery .budapest__content .perth__pictures, section.gallery .budapest__content .stockholm__pictures, section.gallery .budapest__content .brussels__pictures, section.gallery .perth__content .zagreb__pictures, section.gallery .perth__content .budapest__pictures, section.gallery .perth__content .perth__pictures, section.gallery .perth__content .stockholm__pictures, section.gallery .perth__content .brussels__pictures, section.gallery .stockholm__content .zagreb__pictures, section.gallery .stockholm__content .budapest__pictures, section.gallery .stockholm__content .perth__pictures, section.gallery .stockholm__content .stockholm__pictures, section.gallery .stockholm__content .brussels__pictures, section.gallery .brussels__content .zagreb__pictures, section.gallery .brussels__content .budapest__pictures, section.gallery .brussels__content .perth__pictures, section.gallery .brussels__content .stockholm__pictures, section.gallery .brussels__content .brussels__pictures {
  margin: 0;
  position: relative;
}
section.gallery .zagreb__content .zagreb__pictures .warning, section.gallery .zagreb__content .budapest__pictures .warning, section.gallery .zagreb__content .perth__pictures .warning, section.gallery .zagreb__content .stockholm__pictures .warning, section.gallery .zagreb__content .brussels__pictures .warning, section.gallery .budapest__content .zagreb__pictures .warning, section.gallery .budapest__content .budapest__pictures .warning, section.gallery .budapest__content .perth__pictures .warning, section.gallery .budapest__content .stockholm__pictures .warning, section.gallery .budapest__content .brussels__pictures .warning, section.gallery .perth__content .zagreb__pictures .warning, section.gallery .perth__content .budapest__pictures .warning, section.gallery .perth__content .perth__pictures .warning, section.gallery .perth__content .stockholm__pictures .warning, section.gallery .perth__content .brussels__pictures .warning, section.gallery .stockholm__content .zagreb__pictures .warning, section.gallery .stockholm__content .budapest__pictures .warning, section.gallery .stockholm__content .perth__pictures .warning, section.gallery .stockholm__content .stockholm__pictures .warning, section.gallery .stockholm__content .brussels__pictures .warning, section.gallery .brussels__content .zagreb__pictures .warning, section.gallery .brussels__content .budapest__pictures .warning, section.gallery .brussels__content .perth__pictures .warning, section.gallery .brussels__content .stockholm__pictures .warning, section.gallery .brussels__content .brussels__pictures .warning {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  color: var(--color-white);
  width: 100%;
  text-align: center;
}
section.gallery .zagreb__content .zagreb__pictures .zagreb__intro, section.gallery .zagreb__content .budapest__pictures .zagreb__intro, section.gallery .zagreb__content .perth__pictures .zagreb__intro, section.gallery .zagreb__content .stockholm__pictures .zagreb__intro, section.gallery .zagreb__content .brussels__pictures .zagreb__intro, section.gallery .budapest__content .zagreb__pictures .zagreb__intro, section.gallery .budapest__content .budapest__pictures .zagreb__intro, section.gallery .budapest__content .perth__pictures .zagreb__intro, section.gallery .budapest__content .stockholm__pictures .zagreb__intro, section.gallery .budapest__content .brussels__pictures .zagreb__intro, section.gallery .perth__content .zagreb__pictures .zagreb__intro, section.gallery .perth__content .budapest__pictures .zagreb__intro, section.gallery .perth__content .perth__pictures .zagreb__intro, section.gallery .perth__content .stockholm__pictures .zagreb__intro, section.gallery .perth__content .brussels__pictures .zagreb__intro, section.gallery .stockholm__content .zagreb__pictures .zagreb__intro, section.gallery .stockholm__content .budapest__pictures .zagreb__intro, section.gallery .stockholm__content .perth__pictures .zagreb__intro, section.gallery .stockholm__content .stockholm__pictures .zagreb__intro, section.gallery .stockholm__content .brussels__pictures .zagreb__intro, section.gallery .brussels__content .zagreb__pictures .zagreb__intro, section.gallery .brussels__content .budapest__pictures .zagreb__intro, section.gallery .brussels__content .perth__pictures .zagreb__intro, section.gallery .brussels__content .stockholm__pictures .zagreb__intro, section.gallery .brussels__content .brussels__pictures .zagreb__intro {
  position: relative;
  z-index: 0;
}
section.gallery .zagreb__content .zagreb__pictures .perth__intro, section.gallery .zagreb__content .zagreb__pictures .stockholm__intro, section.gallery .zagreb__content .zagreb__pictures .brussels__intro, section.gallery .zagreb__content .budapest__pictures .perth__intro, section.gallery .zagreb__content .budapest__pictures .stockholm__intro, section.gallery .zagreb__content .budapest__pictures .brussels__intro, section.gallery .zagreb__content .perth__pictures .perth__intro, section.gallery .zagreb__content .perth__pictures .stockholm__intro, section.gallery .zagreb__content .perth__pictures .brussels__intro, section.gallery .zagreb__content .stockholm__pictures .perth__intro, section.gallery .zagreb__content .stockholm__pictures .stockholm__intro, section.gallery .zagreb__content .stockholm__pictures .brussels__intro, section.gallery .zagreb__content .brussels__pictures .perth__intro, section.gallery .zagreb__content .brussels__pictures .stockholm__intro, section.gallery .zagreb__content .brussels__pictures .brussels__intro, section.gallery .budapest__content .zagreb__pictures .perth__intro, section.gallery .budapest__content .zagreb__pictures .stockholm__intro, section.gallery .budapest__content .zagreb__pictures .brussels__intro, section.gallery .budapest__content .budapest__pictures .perth__intro, section.gallery .budapest__content .budapest__pictures .stockholm__intro, section.gallery .budapest__content .budapest__pictures .brussels__intro, section.gallery .budapest__content .perth__pictures .perth__intro, section.gallery .budapest__content .perth__pictures .stockholm__intro, section.gallery .budapest__content .perth__pictures .brussels__intro, section.gallery .budapest__content .stockholm__pictures .perth__intro, section.gallery .budapest__content .stockholm__pictures .stockholm__intro, section.gallery .budapest__content .stockholm__pictures .brussels__intro, section.gallery .budapest__content .brussels__pictures .perth__intro, section.gallery .budapest__content .brussels__pictures .stockholm__intro, section.gallery .budapest__content .brussels__pictures .brussels__intro, section.gallery .perth__content .zagreb__pictures .perth__intro, section.gallery .perth__content .zagreb__pictures .stockholm__intro, section.gallery .perth__content .zagreb__pictures .brussels__intro, section.gallery .perth__content .budapest__pictures .perth__intro, section.gallery .perth__content .budapest__pictures .stockholm__intro, section.gallery .perth__content .budapest__pictures .brussels__intro, section.gallery .perth__content .perth__pictures .perth__intro, section.gallery .perth__content .perth__pictures .stockholm__intro, section.gallery .perth__content .perth__pictures .brussels__intro, section.gallery .perth__content .stockholm__pictures .perth__intro, section.gallery .perth__content .stockholm__pictures .stockholm__intro, section.gallery .perth__content .stockholm__pictures .brussels__intro, section.gallery .perth__content .brussels__pictures .perth__intro, section.gallery .perth__content .brussels__pictures .stockholm__intro, section.gallery .perth__content .brussels__pictures .brussels__intro, section.gallery .stockholm__content .zagreb__pictures .perth__intro, section.gallery .stockholm__content .zagreb__pictures .stockholm__intro, section.gallery .stockholm__content .zagreb__pictures .brussels__intro, section.gallery .stockholm__content .budapest__pictures .perth__intro, section.gallery .stockholm__content .budapest__pictures .stockholm__intro, section.gallery .stockholm__content .budapest__pictures .brussels__intro, section.gallery .stockholm__content .perth__pictures .perth__intro, section.gallery .stockholm__content .perth__pictures .stockholm__intro, section.gallery .stockholm__content .perth__pictures .brussels__intro, section.gallery .stockholm__content .stockholm__pictures .perth__intro, section.gallery .stockholm__content .stockholm__pictures .stockholm__intro, section.gallery .stockholm__content .stockholm__pictures .brussels__intro, section.gallery .stockholm__content .brussels__pictures .perth__intro, section.gallery .stockholm__content .brussels__pictures .stockholm__intro, section.gallery .stockholm__content .brussels__pictures .brussels__intro, section.gallery .brussels__content .zagreb__pictures .perth__intro, section.gallery .brussels__content .zagreb__pictures .stockholm__intro, section.gallery .brussels__content .zagreb__pictures .brussels__intro, section.gallery .brussels__content .budapest__pictures .perth__intro, section.gallery .brussels__content .budapest__pictures .stockholm__intro, section.gallery .brussels__content .budapest__pictures .brussels__intro, section.gallery .brussels__content .perth__pictures .perth__intro, section.gallery .brussels__content .perth__pictures .stockholm__intro, section.gallery .brussels__content .perth__pictures .brussels__intro, section.gallery .brussels__content .stockholm__pictures .perth__intro, section.gallery .brussels__content .stockholm__pictures .stockholm__intro, section.gallery .brussels__content .stockholm__pictures .brussels__intro, section.gallery .brussels__content .brussels__pictures .perth__intro, section.gallery .brussels__content .brussels__pictures .stockholm__intro, section.gallery .brussels__content .brussels__pictures .brussels__intro {
  margin: 0;
  margin-bottom: -1em;
}
section.gallery .zagreb__content .zagreb__pictures .perth__intro figcaption, section.gallery .zagreb__content .zagreb__pictures .stockholm__intro figcaption, section.gallery .zagreb__content .zagreb__pictures .brussels__intro figcaption, section.gallery .zagreb__content .budapest__pictures .perth__intro figcaption, section.gallery .zagreb__content .budapest__pictures .stockholm__intro figcaption, section.gallery .zagreb__content .budapest__pictures .brussels__intro figcaption, section.gallery .zagreb__content .perth__pictures .perth__intro figcaption, section.gallery .zagreb__content .perth__pictures .stockholm__intro figcaption, section.gallery .zagreb__content .perth__pictures .brussels__intro figcaption, section.gallery .zagreb__content .stockholm__pictures .perth__intro figcaption, section.gallery .zagreb__content .stockholm__pictures .stockholm__intro figcaption, section.gallery .zagreb__content .stockholm__pictures .brussels__intro figcaption, section.gallery .zagreb__content .brussels__pictures .perth__intro figcaption, section.gallery .zagreb__content .brussels__pictures .stockholm__intro figcaption, section.gallery .zagreb__content .brussels__pictures .brussels__intro figcaption, section.gallery .budapest__content .zagreb__pictures .perth__intro figcaption, section.gallery .budapest__content .zagreb__pictures .stockholm__intro figcaption, section.gallery .budapest__content .zagreb__pictures .brussels__intro figcaption, section.gallery .budapest__content .budapest__pictures .perth__intro figcaption, section.gallery .budapest__content .budapest__pictures .stockholm__intro figcaption, section.gallery .budapest__content .budapest__pictures .brussels__intro figcaption, section.gallery .budapest__content .perth__pictures .perth__intro figcaption, section.gallery .budapest__content .perth__pictures .stockholm__intro figcaption, section.gallery .budapest__content .perth__pictures .brussels__intro figcaption, section.gallery .budapest__content .stockholm__pictures .perth__intro figcaption, section.gallery .budapest__content .stockholm__pictures .stockholm__intro figcaption, section.gallery .budapest__content .stockholm__pictures .brussels__intro figcaption, section.gallery .budapest__content .brussels__pictures .perth__intro figcaption, section.gallery .budapest__content .brussels__pictures .stockholm__intro figcaption, section.gallery .budapest__content .brussels__pictures .brussels__intro figcaption, section.gallery .perth__content .zagreb__pictures .perth__intro figcaption, section.gallery .perth__content .zagreb__pictures .stockholm__intro figcaption, section.gallery .perth__content .zagreb__pictures .brussels__intro figcaption, section.gallery .perth__content .budapest__pictures .perth__intro figcaption, section.gallery .perth__content .budapest__pictures .stockholm__intro figcaption, section.gallery .perth__content .budapest__pictures .brussels__intro figcaption, section.gallery .perth__content .perth__pictures .perth__intro figcaption, section.gallery .perth__content .perth__pictures .stockholm__intro figcaption, section.gallery .perth__content .perth__pictures .brussels__intro figcaption, section.gallery .perth__content .stockholm__pictures .perth__intro figcaption, section.gallery .perth__content .stockholm__pictures .stockholm__intro figcaption, section.gallery .perth__content .stockholm__pictures .brussels__intro figcaption, section.gallery .perth__content .brussels__pictures .perth__intro figcaption, section.gallery .perth__content .brussels__pictures .stockholm__intro figcaption, section.gallery .perth__content .brussels__pictures .brussels__intro figcaption, section.gallery .stockholm__content .zagreb__pictures .perth__intro figcaption, section.gallery .stockholm__content .zagreb__pictures .stockholm__intro figcaption, section.gallery .stockholm__content .zagreb__pictures .brussels__intro figcaption, section.gallery .stockholm__content .budapest__pictures .perth__intro figcaption, section.gallery .stockholm__content .budapest__pictures .stockholm__intro figcaption, section.gallery .stockholm__content .budapest__pictures .brussels__intro figcaption, section.gallery .stockholm__content .perth__pictures .perth__intro figcaption, section.gallery .stockholm__content .perth__pictures .stockholm__intro figcaption, section.gallery .stockholm__content .perth__pictures .brussels__intro figcaption, section.gallery .stockholm__content .stockholm__pictures .perth__intro figcaption, section.gallery .stockholm__content .stockholm__pictures .stockholm__intro figcaption, section.gallery .stockholm__content .stockholm__pictures .brussels__intro figcaption, section.gallery .stockholm__content .brussels__pictures .perth__intro figcaption, section.gallery .stockholm__content .brussels__pictures .stockholm__intro figcaption, section.gallery .stockholm__content .brussels__pictures .brussels__intro figcaption, section.gallery .brussels__content .zagreb__pictures .perth__intro figcaption, section.gallery .brussels__content .zagreb__pictures .stockholm__intro figcaption, section.gallery .brussels__content .zagreb__pictures .brussels__intro figcaption, section.gallery .brussels__content .budapest__pictures .perth__intro figcaption, section.gallery .brussels__content .budapest__pictures .stockholm__intro figcaption, section.gallery .brussels__content .budapest__pictures .brussels__intro figcaption, section.gallery .brussels__content .perth__pictures .perth__intro figcaption, section.gallery .brussels__content .perth__pictures .stockholm__intro figcaption, section.gallery .brussels__content .perth__pictures .brussels__intro figcaption, section.gallery .brussels__content .stockholm__pictures .perth__intro figcaption, section.gallery .brussels__content .stockholm__pictures .stockholm__intro figcaption, section.gallery .brussels__content .stockholm__pictures .brussels__intro figcaption, section.gallery .brussels__content .brussels__pictures .perth__intro figcaption, section.gallery .brussels__content .brussels__pictures .stockholm__intro figcaption, section.gallery .brussels__content .brussels__pictures .brussels__intro figcaption {
  display: none;
}
section.gallery .zagreb__content .zagreb__pictures .zagreb__header, section.gallery .zagreb__content .zagreb__pictures .budapest__header, section.gallery .zagreb__content .zagreb__pictures .perth__header, section.gallery .zagreb__content .zagreb__pictures .stockholm__header, section.gallery .zagreb__content .zagreb__pictures .brussels__header, section.gallery .zagreb__content .budapest__pictures .zagreb__header, section.gallery .zagreb__content .budapest__pictures .budapest__header, section.gallery .zagreb__content .budapest__pictures .perth__header, section.gallery .zagreb__content .budapest__pictures .stockholm__header, section.gallery .zagreb__content .budapest__pictures .brussels__header, section.gallery .zagreb__content .perth__pictures .zagreb__header, section.gallery .zagreb__content .perth__pictures .budapest__header, section.gallery .zagreb__content .perth__pictures .perth__header, section.gallery .zagreb__content .perth__pictures .stockholm__header, section.gallery .zagreb__content .perth__pictures .brussels__header, section.gallery .zagreb__content .stockholm__pictures .zagreb__header, section.gallery .zagreb__content .stockholm__pictures .budapest__header, section.gallery .zagreb__content .stockholm__pictures .perth__header, section.gallery .zagreb__content .stockholm__pictures .stockholm__header, section.gallery .zagreb__content .stockholm__pictures .brussels__header, section.gallery .zagreb__content .brussels__pictures .zagreb__header, section.gallery .zagreb__content .brussels__pictures .budapest__header, section.gallery .zagreb__content .brussels__pictures .perth__header, section.gallery .zagreb__content .brussels__pictures .stockholm__header, section.gallery .zagreb__content .brussels__pictures .brussels__header, section.gallery .budapest__content .zagreb__pictures .zagreb__header, section.gallery .budapest__content .zagreb__pictures .budapest__header, section.gallery .budapest__content .zagreb__pictures .perth__header, section.gallery .budapest__content .zagreb__pictures .stockholm__header, section.gallery .budapest__content .zagreb__pictures .brussels__header, section.gallery .budapest__content .budapest__pictures .zagreb__header, section.gallery .budapest__content .budapest__pictures .budapest__header, section.gallery .budapest__content .budapest__pictures .perth__header, section.gallery .budapest__content .budapest__pictures .stockholm__header, section.gallery .budapest__content .budapest__pictures .brussels__header, section.gallery .budapest__content .perth__pictures .zagreb__header, section.gallery .budapest__content .perth__pictures .budapest__header, section.gallery .budapest__content .perth__pictures .perth__header, section.gallery .budapest__content .perth__pictures .stockholm__header, section.gallery .budapest__content .perth__pictures .brussels__header, section.gallery .budapest__content .stockholm__pictures .zagreb__header, section.gallery .budapest__content .stockholm__pictures .budapest__header, section.gallery .budapest__content .stockholm__pictures .perth__header, section.gallery .budapest__content .stockholm__pictures .stockholm__header, section.gallery .budapest__content .stockholm__pictures .brussels__header, section.gallery .budapest__content .brussels__pictures .zagreb__header, section.gallery .budapest__content .brussels__pictures .budapest__header, section.gallery .budapest__content .brussels__pictures .perth__header, section.gallery .budapest__content .brussels__pictures .stockholm__header, section.gallery .budapest__content .brussels__pictures .brussels__header, section.gallery .perth__content .zagreb__pictures .zagreb__header, section.gallery .perth__content .zagreb__pictures .budapest__header, section.gallery .perth__content .zagreb__pictures .perth__header, section.gallery .perth__content .zagreb__pictures .stockholm__header, section.gallery .perth__content .zagreb__pictures .brussels__header, section.gallery .perth__content .budapest__pictures .zagreb__header, section.gallery .perth__content .budapest__pictures .budapest__header, section.gallery .perth__content .budapest__pictures .perth__header, section.gallery .perth__content .budapest__pictures .stockholm__header, section.gallery .perth__content .budapest__pictures .brussels__header, section.gallery .perth__content .perth__pictures .zagreb__header, section.gallery .perth__content .perth__pictures .budapest__header, section.gallery .perth__content .perth__pictures .perth__header, section.gallery .perth__content .perth__pictures .stockholm__header, section.gallery .perth__content .perth__pictures .brussels__header, section.gallery .perth__content .stockholm__pictures .zagreb__header, section.gallery .perth__content .stockholm__pictures .budapest__header, section.gallery .perth__content .stockholm__pictures .perth__header, section.gallery .perth__content .stockholm__pictures .stockholm__header, section.gallery .perth__content .stockholm__pictures .brussels__header, section.gallery .perth__content .brussels__pictures .zagreb__header, section.gallery .perth__content .brussels__pictures .budapest__header, section.gallery .perth__content .brussels__pictures .perth__header, section.gallery .perth__content .brussels__pictures .stockholm__header, section.gallery .perth__content .brussels__pictures .brussels__header, section.gallery .stockholm__content .zagreb__pictures .zagreb__header, section.gallery .stockholm__content .zagreb__pictures .budapest__header, section.gallery .stockholm__content .zagreb__pictures .perth__header, section.gallery .stockholm__content .zagreb__pictures .stockholm__header, section.gallery .stockholm__content .zagreb__pictures .brussels__header, section.gallery .stockholm__content .budapest__pictures .zagreb__header, section.gallery .stockholm__content .budapest__pictures .budapest__header, section.gallery .stockholm__content .budapest__pictures .perth__header, section.gallery .stockholm__content .budapest__pictures .stockholm__header, section.gallery .stockholm__content .budapest__pictures .brussels__header, section.gallery .stockholm__content .perth__pictures .zagreb__header, section.gallery .stockholm__content .perth__pictures .budapest__header, section.gallery .stockholm__content .perth__pictures .perth__header, section.gallery .stockholm__content .perth__pictures .stockholm__header, section.gallery .stockholm__content .perth__pictures .brussels__header, section.gallery .stockholm__content .stockholm__pictures .zagreb__header, section.gallery .stockholm__content .stockholm__pictures .budapest__header, section.gallery .stockholm__content .stockholm__pictures .perth__header, section.gallery .stockholm__content .stockholm__pictures .stockholm__header, section.gallery .stockholm__content .stockholm__pictures .brussels__header, section.gallery .stockholm__content .brussels__pictures .zagreb__header, section.gallery .stockholm__content .brussels__pictures .budapest__header, section.gallery .stockholm__content .brussels__pictures .perth__header, section.gallery .stockholm__content .brussels__pictures .stockholm__header, section.gallery .stockholm__content .brussels__pictures .brussels__header, section.gallery .brussels__content .zagreb__pictures .zagreb__header, section.gallery .brussels__content .zagreb__pictures .budapest__header, section.gallery .brussels__content .zagreb__pictures .perth__header, section.gallery .brussels__content .zagreb__pictures .stockholm__header, section.gallery .brussels__content .zagreb__pictures .brussels__header, section.gallery .brussels__content .budapest__pictures .zagreb__header, section.gallery .brussels__content .budapest__pictures .budapest__header, section.gallery .brussels__content .budapest__pictures .perth__header, section.gallery .brussels__content .budapest__pictures .stockholm__header, section.gallery .brussels__content .budapest__pictures .brussels__header, section.gallery .brussels__content .perth__pictures .zagreb__header, section.gallery .brussels__content .perth__pictures .budapest__header, section.gallery .brussels__content .perth__pictures .perth__header, section.gallery .brussels__content .perth__pictures .stockholm__header, section.gallery .brussels__content .perth__pictures .brussels__header, section.gallery .brussels__content .stockholm__pictures .zagreb__header, section.gallery .brussels__content .stockholm__pictures .budapest__header, section.gallery .brussels__content .stockholm__pictures .perth__header, section.gallery .brussels__content .stockholm__pictures .stockholm__header, section.gallery .brussels__content .stockholm__pictures .brussels__header, section.gallery .brussels__content .brussels__pictures .zagreb__header, section.gallery .brussels__content .brussels__pictures .budapest__header, section.gallery .brussels__content .brussels__pictures .perth__header, section.gallery .brussels__content .brussels__pictures .stockholm__header, section.gallery .brussels__content .brussels__pictures .brussels__header {
  filter: brightness(0.5);
  height: calc(100vh - 9em);
  -o-object-fit: cover;
     object-fit: cover;
}
section.gallery .zagreb__content .zagreb__pictures h2, section.gallery .zagreb__content .budapest__pictures h2, section.gallery .zagreb__content .perth__pictures h2, section.gallery .zagreb__content .stockholm__pictures h2, section.gallery .zagreb__content .brussels__pictures h2, section.gallery .budapest__content .zagreb__pictures h2, section.gallery .budapest__content .budapest__pictures h2, section.gallery .budapest__content .perth__pictures h2, section.gallery .budapest__content .stockholm__pictures h2, section.gallery .budapest__content .brussels__pictures h2, section.gallery .perth__content .zagreb__pictures h2, section.gallery .perth__content .budapest__pictures h2, section.gallery .perth__content .perth__pictures h2, section.gallery .perth__content .stockholm__pictures h2, section.gallery .perth__content .brussels__pictures h2, section.gallery .stockholm__content .zagreb__pictures h2, section.gallery .stockholm__content .budapest__pictures h2, section.gallery .stockholm__content .perth__pictures h2, section.gallery .stockholm__content .stockholm__pictures h2, section.gallery .stockholm__content .brussels__pictures h2, section.gallery .brussels__content .zagreb__pictures h2, section.gallery .brussels__content .budapest__pictures h2, section.gallery .brussels__content .perth__pictures h2, section.gallery .brussels__content .stockholm__pictures h2, section.gallery .brussels__content .brussels__pictures h2 {
  display: none;
}
section.gallery .zagreb__content .zagreb__pictures .grid__txt1, section.gallery .zagreb__content .zagreb__pictures .grid__txt2, section.gallery .zagreb__content .zagreb__pictures .grid__txt3, section.gallery .zagreb__content .budapest__pictures .grid__txt1, section.gallery .zagreb__content .budapest__pictures .grid__txt2, section.gallery .zagreb__content .budapest__pictures .grid__txt3, section.gallery .zagreb__content .perth__pictures .grid__txt1, section.gallery .zagreb__content .perth__pictures .grid__txt2, section.gallery .zagreb__content .perth__pictures .grid__txt3, section.gallery .zagreb__content .stockholm__pictures .grid__txt1, section.gallery .zagreb__content .stockholm__pictures .grid__txt2, section.gallery .zagreb__content .stockholm__pictures .grid__txt3, section.gallery .zagreb__content .brussels__pictures .grid__txt1, section.gallery .zagreb__content .brussels__pictures .grid__txt2, section.gallery .zagreb__content .brussels__pictures .grid__txt3, section.gallery .budapest__content .zagreb__pictures .grid__txt1, section.gallery .budapest__content .zagreb__pictures .grid__txt2, section.gallery .budapest__content .zagreb__pictures .grid__txt3, section.gallery .budapest__content .budapest__pictures .grid__txt1, section.gallery .budapest__content .budapest__pictures .grid__txt2, section.gallery .budapest__content .budapest__pictures .grid__txt3, section.gallery .budapest__content .perth__pictures .grid__txt1, section.gallery .budapest__content .perth__pictures .grid__txt2, section.gallery .budapest__content .perth__pictures .grid__txt3, section.gallery .budapest__content .stockholm__pictures .grid__txt1, section.gallery .budapest__content .stockholm__pictures .grid__txt2, section.gallery .budapest__content .stockholm__pictures .grid__txt3, section.gallery .budapest__content .brussels__pictures .grid__txt1, section.gallery .budapest__content .brussels__pictures .grid__txt2, section.gallery .budapest__content .brussels__pictures .grid__txt3, section.gallery .perth__content .zagreb__pictures .grid__txt1, section.gallery .perth__content .zagreb__pictures .grid__txt2, section.gallery .perth__content .zagreb__pictures .grid__txt3, section.gallery .perth__content .budapest__pictures .grid__txt1, section.gallery .perth__content .budapest__pictures .grid__txt2, section.gallery .perth__content .budapest__pictures .grid__txt3, section.gallery .perth__content .perth__pictures .grid__txt1, section.gallery .perth__content .perth__pictures .grid__txt2, section.gallery .perth__content .perth__pictures .grid__txt3, section.gallery .perth__content .stockholm__pictures .grid__txt1, section.gallery .perth__content .stockholm__pictures .grid__txt2, section.gallery .perth__content .stockholm__pictures .grid__txt3, section.gallery .perth__content .brussels__pictures .grid__txt1, section.gallery .perth__content .brussels__pictures .grid__txt2, section.gallery .perth__content .brussels__pictures .grid__txt3, section.gallery .stockholm__content .zagreb__pictures .grid__txt1, section.gallery .stockholm__content .zagreb__pictures .grid__txt2, section.gallery .stockholm__content .zagreb__pictures .grid__txt3, section.gallery .stockholm__content .budapest__pictures .grid__txt1, section.gallery .stockholm__content .budapest__pictures .grid__txt2, section.gallery .stockholm__content .budapest__pictures .grid__txt3, section.gallery .stockholm__content .perth__pictures .grid__txt1, section.gallery .stockholm__content .perth__pictures .grid__txt2, section.gallery .stockholm__content .perth__pictures .grid__txt3, section.gallery .stockholm__content .stockholm__pictures .grid__txt1, section.gallery .stockholm__content .stockholm__pictures .grid__txt2, section.gallery .stockholm__content .stockholm__pictures .grid__txt3, section.gallery .stockholm__content .brussels__pictures .grid__txt1, section.gallery .stockholm__content .brussels__pictures .grid__txt2, section.gallery .stockholm__content .brussels__pictures .grid__txt3, section.gallery .brussels__content .zagreb__pictures .grid__txt1, section.gallery .brussels__content .zagreb__pictures .grid__txt2, section.gallery .brussels__content .zagreb__pictures .grid__txt3, section.gallery .brussels__content .budapest__pictures .grid__txt1, section.gallery .brussels__content .budapest__pictures .grid__txt2, section.gallery .brussels__content .budapest__pictures .grid__txt3, section.gallery .brussels__content .perth__pictures .grid__txt1, section.gallery .brussels__content .perth__pictures .grid__txt2, section.gallery .brussels__content .perth__pictures .grid__txt3, section.gallery .brussels__content .stockholm__pictures .grid__txt1, section.gallery .brussels__content .stockholm__pictures .grid__txt2, section.gallery .brussels__content .stockholm__pictures .grid__txt3, section.gallery .brussels__content .brussels__pictures .grid__txt1, section.gallery .brussels__content .brussels__pictures .grid__txt2, section.gallery .brussels__content .brussels__pictures .grid__txt3 {
  max-width: 55ch;
  margin: 2em 5vw 1em 5vw;
}
section.gallery .zagreb__content img, section.gallery .budapest__content img, section.gallery .perth__content img, section.gallery .stockholm__content img, section.gallery .brussels__content img {
  width: 100vw;
}



/* ========================================== SHOP ========================================== */
main.shop h2 {
  display: none;
}

section.shop {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}
section.shop h1 {
  display: none;
}
section.shop h2 {
  font-weight: 400;
  text-transform: uppercase;
}
section.shop h2 span {
  color: var(--color-secondary);
}
section.shop button {
  position: relative;
  border: none;
  padding: 16px 24px;
  cursor: pointer;
  font-weight: bold;
  color: var(--color-white);
  transition: 0.3s;
  line-height: 1.5;
  height: 60px;
  font-size: 18px;
  background-color: var(--color-primary);
}
section.shop button:hover {
  background-color: var(--color-text);
}
section.product {
  margin-left: 20vw;
}
section.product .product__item {
  margin-bottom: 4em;
  width: 70vw;
}
section.product .product__item .product__title {
  transition: 0.2s;
  font-weight: bold;
}
section.product .product__item .product__title:hover {
  color: var(--color-secondary);
  text-decoration: underline;
}
section.product .product__item a {
  color: var(--color-text);
  text-decoration: none;
  transition: 0.2s;
  width: 70vw;
  display: block;
}
section.product .product__item a ul {
  margin: 0;
}
section.product .product__item a ul li p {
  margin: 0 0 5px 0;
}
section.product .product__item .product__gradient {
  position: relative;
  width: 70vw;
  margin-bottom: 10px;
}
section.product .product__item .product__gradient:hover .opacity {
  opacity: 1;
}
section.product .product__item .product__gradient .opacity {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: 0.2s;
  color: var(--color-white);
  text-decoration: underline;
  z-index: 20;
}
section.product .product__item .product__gradient::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 15;
  background: conic-gradient(from 228deg at 50% -5%, #F74D1A 80deg, #8246E0 270deg, #F74D1A 360deg);
  opacity: 0.7;
  left: 0;
  top: 0;
  transform: scaleY(0);
}
section.product .product__item .product__gradient:hover::after {
  transform: scaleY(1);
  transition: 2s;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}
section.product .product__item .product__gradient img {
  width: 70vw;
}
section.product .product__item .product__gradient ul.product__info {
  display: flex;
  flex-direction: column;
}
section.product .product__item .product__gradient ul.product__info li p.product__title {
  font-weight: 600;
}
section.nav_down h2 {
  display: none;
}
section.nav_down .grid__menu {
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 20px 10px;
  grid-template-areas: "grid__stock . ." ". grid__pagination .";
}
section.nav_down .grid__pagination {
  grid-area: grid__pagination;
  text-align: center;
  position: relative;
}
section.nav_down .grid__pagination:hover {
  text-decoration: underline;
  cursor: pointer;
  transition: 0.2s;
}
section.nav_down .grid__pagination::after {
  display: inline-block;
  content: "";
  background-image: url(../assets/images/arrow_right.svg);
  background-size: cover;
  height: 1em;
  width: 1em;
  transition: 0.2s;
  cursor: pointer;
  margin-left: 5px;
  position: absolute;
  top: 3px;
}
section.nav_down .grid__pagination:hover::after {
  transform: translateX(10px);
}
section.nav_down .grid__stock {
  grid-area: grid__stock;
}

nav.shop {
  margin-bottom: 2em;
}
nav.shop .hidden {
  display: none;
}
nav.shop ul {
  padding: 20px 20px;
  overflow-x: auto;
  overflow-y: hidden;
}
nav.shop ul li {
  padding-right: 2em;
}
nav.shop ul li.new {
  color: var(--color-secondary);
  text-transform: uppercase;
  font-weight: 600;
}
nav.shop ul li.main_menu {
  display: flex;
  flex-direction: row;
}
nav.shop ul li.main_menu::after {
  display: inline-block;
  content: "";
  background-image: url(../assets/images/arrow_down.svg);
  background-size: cover;
  transform: translateY(20%);
  height: 1em;
  width: 1em;
  margin-left: 0.5em;
}
nav.shop ul li.sub_menu {
  font-weight: 400;
}
nav.shop ul li.sub_menu:hover {
  text-decoration: underline;
}
nav .rotate::after {
  content: "";
  display: inline-block;
  background-image: url(../assets/images/arrow_up.svg) !important;
  background-size: cover;
  transform: translateY(20%);
  height: 1em;
  width: 1em;
  margin-left: 0.5em;
}

/* ========================================== CASE STUDY ========================================== */
main.case_study .gs_reveal {
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}
main.case_study li {
  margin-bottom: 0.5em;
}
main.case_study img {
  width: 100vw;
}
main.case_study .prologue img {
  opacity: 0;
  visibility: hidden;
  will-change: transform, opacity;
}
main.case_study .prologue, main.case_study .goals {
  margin: 0;
}
main.case_study .prologue h1, main.case_study .prologue h2, main.case_study .prologue h3, main.case_study .prologue p, main.case_study .prologue li, main.case_study .goals h1, main.case_study .goals h2, main.case_study .goals h3, main.case_study .goals p, main.case_study .goals li {
  margin: 0 5vw 0.5em 5vw;
}
main.case_study .prologue h1, main.case_study .goals h1 {
  margin-top: 3em;
}
main.case_study .prologue h1.date, main.case_study .goals h1.date {
  margin-top: 0;
  margin-bottom: 2em;
}
main.case_study .prologue .subtitle, main.case_study .goals .subtitle {
  font-size: 24px;
  margin-bottom: 2em;
}
main.case_study .prologue h3, main.case_study .goals h3 {
  margin-top: 0.5em;
}
main.case_study .prologue .end, main.case_study .goals .end {
  margin-bottom: 2em;
}
main.case_study .goals {
  margin-bottom: 3em;
}
main.case_study .goals .bw {
  margin-bottom: 2em;
}
main.case_study .goals .end {
  margin-bottom: 3em;
}
main.case_study .goals .margin_left {
  margin-left: 2em;
}
main.case_study .goals .margin_left .flex_logo .logo {
  width: 60px;
  margin-left: 0.5em;
}
main.case_study h1 {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 300;
  font-size: 16px;
}
main.case_study h2 {
  color: var(--color-text);
}
main.case_study h4 {
  font-weight: 300;
  font-size: 24px;
  margin: 0;
}
main.case_study a {
  color: var(--color-text);
  transition: 0.2s;
}
main.case_study a:hover {
  color: var(--color-secondary);
}
main .visual_identity {
  margin: 0;
}
main .visual_identity h2, main .visual_identity p {
  margin: 0 5vw 2em 5vw;
}
main .visual_identity h2 {
  margin-bottom: 0.5em;
}
main .visual_identity img {
  width: 100vw;
}
main .visual_identity .desktop_video {
  display: none;
}
main .solution {
  margin-bottom: 3em;
}
main .solution .grid__title {
  display: none;
}
main .solution img {
  display: none;
}
main .evolution {
  margin: 0;
}
main .evolution .margin {
  margin: 0 5vw 2em 5vw;
}
main .evolution h2 {
  margin-bottom: 0;
}
main .evolution figure {
  margin-bottom: 3em;
}
main .evolution figcaption {
  font-size: 16px;
  font-style: italic;
}
main .conclusion {
  margin: 0;
}
main .conclusion .display_mobile {
  display: block;
}
main .conclusion h2 {
  margin-bottom: 0;
}
main .conclusion .margin {
  margin: 0 5vw 2em 5vw;
}
main .conclusion .margin .display_desktop {
  display: none;
}
main .conclusion .thanks {
  font-size: 24px;
  font-weight: bold;
  text-align: right;
  margin-bottom: 3em;
}
main .conclusion figure {
  margin-bottom: 2em;
}
main .conclusion figcaption {
  font-size: 16px;
  font-style: italic;
}

/* ========================================== FOOTER ========================================== */
footer {
  margin-top: auto;
  padding: 2em 5vw 3em 5vw;
  color: var(--color-white);
  background: rgb(130, 70, 224);
  background: conic-gradient(from 322deg at -5% -80%, #F74D1A 194deg, #8246E0 220deg, #F74D1A 302deg);
}
footer a {
  color: var(--color-white);
  text-decoration: none;
}
footer a:hover {
  text-decoration: underline;
}
footer ul {
  margin-bottom: 2em;
}
footer ul.flex__media {
  margin-bottom: 1em;
}
footer ul li.footer__id {
  margin-bottom: 1em;
}
footer ul li p {
  margin: 0;
}
footer ul li p strong {
  display: block;
  margin-bottom: 0.5em;
}
footer ul.social_media {
  display: flex;
  gap: 1em;
  margin-bottom: 2em;
}
footer ul.social_media li svg {
  cursor: pointer;
}
footer ul.social_media li svg:hover path {
  transition: 0.2s;
  fill: var(--color-text);
}
footer small {
  text-transform: uppercase;
}
footer small a {
  color: var(--color-white);
  transition: 0.2s;
}
footer small a:hover {
  font-weight: bold;
}

/* ========================================== MEDIA QUERIES ========================================== */
@media (min-width: 1050px) {
  body section {
    font-size: 20px;
  }

  nav.mobile {
    display: none;
  }
  nav.desktop {
    display: flex;
    justify-content: space-between;
    padding: 0.5em 2em;
    align-items: center;
    height: 80px;
  }
  nav.desktop .nav__links--active {
    font-weight: bold;
  }
  nav ul.nav__links {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 8em;
  }
  nav ul.nav__links a {
    text-decoration: none;
    color: var(--color-text);
    transition: 0.2s;
  }
  nav ul.nav__links a:hover {
    text-decoration: underline;
    -webkit-text-decoration-color: var(--color-text);
            text-decoration-color: var(--color-text);
  }
  nav ul.nav__links a:active {
    font-weight: bold;
  }

  /* ========================================== HOME ========================================== */
  .home {
    display: flex;
    align-items: center;
    margin-bottom: 4em;
  }
  .home video {
    height: calc(100vh - 80px);
  }
  .home .home__container {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
  }
  .home .home__container a {
    text-decoration: none;
  }
  .home .home__container .scroll_down {
    display: grid;
    color: var(--color-white);
    text-align: center;
    margin: 0;
    
  }
  .home .home__container .scroll_down::before {
    display: grid;
    content: "";
    background-image: url(../assets/images/scroll_mouse.svg);
    background-size: cover;
    background-position: center;
    height: 14vh;
    align-items: center;
  }
  .home .home__container svg {
    display: none;
  }
  .home .home__container svg.scroll {
    display: block;
    height: 10vh;
    align-items: center;
  }
  .home .home__container img {
    display: block;
  }
  .home .home__container h1 {
    display: none;
  }
  .home .home__container ul {
    font-family: "dialog";
    font-size: 4em;
    display: flex;
    flex-direction: row;
    margin: 0;
    line-height: normal;
  }
  .home .home__container ul.purple {
    color: var(--color-primary);
    transform: translateX(-510px);
  }
  .home .home__container ul.purple li {
    transition: 0.3s;
    cursor: default;
  }
  .home .home__container ul.purple li:hover {
    transform: 0.3s;
    transform: translateY(-20px);
  }
  .home .home__container ul.purple--margin {
    margin-bottom: 1em;
    transform: translateX(370px);
  }
  .home .home__container ul.orange {
    color: var(--color-secondary);
  }
  .home .home__container ul.orange li {
    transition: 0.3s;
    cursor: default;
  }
  .home .home__container ul.orange li:hover {
    transform: translateY(-20px);
  }

  .about p {
    max-width: 55ch;
  }
  .about img {
    display: block;
  }
  .about svg {
    display: none;
  }
  .about__intro {
    margin-bottom: 4em;
  }
  .about__text {
    margin-bottom: 2em;
    font-size: 26px;
  }
  .about .grid__content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-auto-flow: row;
    grid-template-areas: ". grid__timeline1 grid__cell1 grid__cell1 grid__img grid__img grid__img" ". grid__timeline2 grid__cell2 grid__cell2 grid__img grid__img grid__img" ". grid__timeline3 grid__cell3 grid__cell3 grid__img grid__img grid__img" ". grid__timeline4 grid__cell4 grid__cell4 grid__img grid__img grid__img" ". grid__timeline5 grid__cell5 grid__cell5 grid__img grid__img grid__img";
  }
  .about .grid__content strong {
    font-size: 32px;
  }
  .about .grid__img {
    grid-area: grid__img;
  }
  .about .grid__timeline1 {
    grid-area: grid__timeline1;
  }
  .about .grid__timeline2 {
    grid-area: grid__timeline2;
  }
  .about .grid__timeline3 {
    grid-area: grid__timeline3;
  }
  .about .grid__timeline4 {
    grid-area: grid__timeline4;
  }
  .about .grid__timeline5 {
    grid-area: grid__timeline5;
  }
  .about .grid__cell1 {
    grid-area: grid__cell1;
  }
  .about .grid__cell2 {
    grid-area: grid__cell2;
  }
  .about .grid__cell3 {
    grid-area: grid__cell3;
  }
  .about .grid__cell4 {
    grid-area: grid__cell4;
  }
  .about .grid__cell5 {
    grid-area: grid__cell5;
  }
  .about .grid__timeline1, .about .grid__timeline2, .about .grid__timeline3, .about .grid__timeline5, .about .grid__timeline5, .about .grid__img {
    display: block;
  }
  .about .grid__timeline1 {
    width: 5px;
  }
  .about .grid__timeline1::before, .about .grid__timeline2::before, .about .grid__timeline3::before, .about .grid__timeline4::before, .about .grid__timeline5::before {
    width: 30px;
    height: 30px;
  }
  .about .grid__timeline3::after {
    top: 11px;
    transform: translateX(-95%);
  }
  .purplr_button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #8246E0; /* Purple background */
    color: #fff; /* White text */
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
  }
  .purplr_button:hover {
    background-color: #6a3bb5; /* Darker purple on hover */
  }
  
  
  .guide {
    display: flex;
    flex-direction: row;
    gap: 5em;
    margin-bottom: -7em;
    align-items: center;
    justify-content: space-between;
  }
  .guide .flex__left {
    
    transform: translateY(-50%);
  }
  .guide .flex__left svg {
    display: flex;
    width: 40vw;
    height: 60vh;
  }
  .guide .flex__right {
    display: flex;
    flex-direction: row;
    gap: 2em;
  }
  .guide .flex__right .left {
    line-height: 0;
    align-self: end;
  }
  .guide .flex__right .left img {
    animation: float 6s ease-in-out infinite;
  }
  @keyframes float {
    0% {
      transform: translatey(0px);
    }
    50% {
      transform: translatey(-10px);
    }
    100% {
      transform: translatey(0px);
    }
  }
  .guide .flex__right .left h2 {
    line-height: normal;
  }
  .guide .flex__right .right {
    align-self: end;
  }
  .guide img {
    width: 15vw;
    margin-bottom: 0;
  }

  .tutorial {
    position: relative;
  }
  .tutorial video {
    position: relative;
    margin: 0 auto;
    width: 70vw;
    display: block;
    z-index: 10;
    height: 80vh;
  }
  .tutorial svg {
    display: block;
    position: absolute;
    z-index: 0;
    width: 40vw;
    top: -120px;
    height: 50vh;
    right: 25px;
  }

  .community .community__flex {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .community .community__main, .community .community__partners {
    display: flex;
    flex-direction: row;
    gap: 2em;
    align-items: center;
  }
  

  /* ========================================== ARTISTS ========================================== */
  section.artists h2 {
    margin: 3em 0 2em 0;
  }
  section .flex__artist {
    flex-direction: row;
    justify-content: center;
  }
  section .flex__artist .artist__content {
    position: relative;
  }
  section .flex__artist .artist__content--gap {
    top: 20px;
  }
  section .flex__artist .artist__content::before {
    content: "";
    width: 100%;
    height: 100%;
  }
  section .flex__artist .artist__content::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 15;
    background: var(--color-secondary);
    opacity: 0.7;
    transform: scaleY(0);
    transform-origin: bottom;
  }
  section .flex__artist .artist__content:hover::after {
    transform: scaleY(1);
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
  }
  section .flex__artist .artist__content .opacity {
    opacity: 0;
    position: relative;
    z-index: 20;
  }
  section .flex__artist .artist__content:hover .opacity {
    opacity: 1;
  }
  section .flex__artist .artist__content ul {
    position: absolute;
  }
  section .flex__artist .artist__content img {
    width: 247px;
    height: 583px;
    -o-object-position: center;
       object-position: center;
  }
  section .flex__artist .artist__content .artist__info {
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-weight: 200;
  }
  section .flex__artist .artist__content .artist__info::before {
    content: "";
    width: 100%;
    height: 15vh;
  }
  section .flex__artist .artist__content .artist__info li {
    transition: 2s;
  }
  section .flex__artist .artist__content .artist__info li a {
    color: var(--color-white);
    text-decoration: none;
    font-weight: 400;
  }
  section .flex__artist .artist__content .artist__info li a:hover {
    text-decoration: underline;
    color: var(--color-white);
  }
  section .flex__artist .artist__content .artist__info .artist__box {
    z-index: 20;
    position: absolute;
    left: 20px;
    bottom: 20px;
    font-weight: 200;
  }
  section .flex__artist .artist__content .artist__info .artist__box li p {
    position: relative;
    z-index: 30;
  }
  section .flex__artist .artist__content .artist__info .artist__box .artist__name {
    color: var(--color-white);
  }
  section .flex__artist .artist__content .artist__info .artist__box .artist__name span {
    color: var(--color-white);
  }
  section .flex__artist .artist__content--resize {
    width: 247px;
    height: 247px;
  }
  section .flex__artist .artist__content--resize::before {
    content: "";
    background: none;
  }
  section .flex__artist .artist__content--resize .artist__info, section .flex__artist .artist__content--resize img {
    width: 247px;
    height: 247px;
  }
  section .flex__artist .artist__content--resize .artist__info li {
    position: relative;
    z-index: 20;
  }
  section .flex__artist .artist__content--resize::after {
    background: var(--color-primary);
  }
  section .flex__artist .artist__content--resize2 {
    width: 247px;
    height: 247px;
    bottom: 20px;
  }
  section .flex__artist .artist__content--resize2::before {
    content: "";
    background: none;
  }
  section .flex__artist .artist__content--resize2 .artist__info, section .flex__artist .artist__content--resize2 img {
    width: 247px;
    height: 247px;
  }
  section .flex__artist .artist__content--resize2 .artist__info li {
    position: relative;
    z-index: 20;
  }
  section .flex__artist .artist__content--resize2::after {
    background: var(--color-primary);
  }

  /* ========================================== BIOGRAPHIES ========================================== */
  .bio__container a {
    font-size: 20px;
  }
  .bio__container section.bio {
    display: flex;
    gap: 4em;
    justify-content: center;
  }
  .bio__container section.bio .bio__pic::before {
    content: "";
    height: 800px;
  }
  .bio__container section.bio .bio__pic img {
    width: unset;
    height: 800px;
  }
  .bio__container section .bio__text {
    max-width: 55ch;
  }
  .bio__container section .bio__text h1 {
    font-size: 48px;
    margin: 0 0 0.5em 0;
  }
  .bio__container section .bio__text span {
    font-size: 48px;
  }
  .bio__container section .bio__text h2 {
    font-size: 24px;
  }

  /* ========================================== GALLERY ========================================== */
  section figcaption {
    font-size: 16px;
  }
  section.zagreb__content .zagreb__pictures .grid__pictures, section.zagreb__content .budapest__pictures .grid__pictures, section.budapest__content .zagreb__pictures .grid__pictures, section.budapest__content .budapest__pictures .grid__pictures {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px 10px;
    grid-template-areas: "grid__txt1 grid__txt1 grid__txt1" "grid__pic1 grid__pic2 grid__pic3" "grid__txt2 grid__txt2 grid__txt2" "grid__pic4 grid__pic4 grid__pic5" "grid__txt3 grid__txt3 grid__txt3" "grid__pic6 grid__pic6 grid__pic6";
  }
  
  section.zagreb__content .zagreb__pictures .grid__txt1, section.zagreb__content .budapest__pictures .grid__txt1, section.budapest__content .zagreb__pictures .grid__txt1, section.budapest__content .budapest__pictures .grid__txt1 {
    grid-area: grid__txt1;
  }
  section.zagreb__content .zagreb__pictures .grid__pic1, section.zagreb__content .budapest__pictures .grid__pic1, section.budapest__content .zagreb__pictures .grid__pic1, section.budapest__content .budapest__pictures .grid__pic1 {
    grid-area: grid__pic1;
  }
  section.zagreb__content .zagreb__pictures .grid__pic2, section.zagreb__content .budapest__pictures .grid__pic2, section.budapest__content .zagreb__pictures .grid__pic2, section.budapest__content .budapest__pictures .grid__pic2 {
    grid-area: grid__pic2;
  }
  section.zagreb__content .zagreb__pictures .grid__pic3, section.zagreb__content .budapest__pictures .grid__pic3, section.budapest__content .zagreb__pictures .grid__pic3, section.budapest__content .budapest__pictures .grid__pic3 {
    grid-area: grid__pic3;
  }
  section.zagreb__content .zagreb__pictures .grid__txt2, section.zagreb__content .budapest__pictures .grid__txt2, section.budapest__content .zagreb__pictures .grid__txt2, section.budapest__content .budapest__pictures .grid__txt2 {
    grid-area: grid__txt2;
  }
  section.zagreb__content .zagreb__pictures .grid__pic4, section.zagreb__content .budapest__pictures .grid__pic4, section.budapest__content .zagreb__pictures .grid__pic4, section.budapest__content .budapest__pictures .grid__pic4 {
    grid-area: grid__pic4;
  }
  section.zagreb__content .zagreb__pictures .grid__pic5, section.zagreb__content .budapest__pictures .grid__pic5, section.budapest__content .zagreb__pictures .grid__pic5, section.budapest__content .budapest__pictures .grid__pic5 {
    grid-area: grid__pic5;
  }
  section.zagreb__content .zagreb__pictures .grid__txt3, section.zagreb__content .budapest__pictures .grid__txt3, section.budapest__content .zagreb__pictures .grid__txt3, section.budapest__content .budapest__pictures .grid__txt3 {
    grid-area: grid__txt3;
  }
  section.zagreb__content .zagreb__pictures .grid__pic6, section.zagreb__content .budapest__pictures .grid__pic6, section.budapest__content .zagreb__pictures .grid__pic6, section.budapest__content .budapest__pictures .grid__pic6 {
    grid-area: grid__pic6;
  }
  section.zagreb__content .zagreb__pictures .grid__txt1, section.zagreb__content .zagreb__pictures .grid__txt2, section.zagreb__content .zagreb__pictures .grid__txt3, section.zagreb__content .budapest__pictures .grid__txt1, section.zagreb__content .budapest__pictures .grid__txt2, section.zagreb__content .budapest__pictures .grid__txt3, section.budapest__content .zagreb__pictures .grid__txt1, section.budapest__content .zagreb__pictures .grid__txt2, section.budapest__content .zagreb__pictures .grid__txt3, section.budapest__content .budapest__pictures .grid__txt1, section.budapest__content .budapest__pictures .grid__txt2, section.budapest__content .budapest__pictures .grid__txt3 {
    max-width: 55ch;
    margin: 2em auto 1em auto;
  }
  section.perth__content .perth__pictures .grid__pictures {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px 10px;
    grid-template-areas: 
      "grid__txt1 grid__txt1 grid__txt1"
      "grid__pic1 grid__pic2 grid__pic3"
      "grid__txt2 grid__txt2 grid__txt2"
      "grid__pic4 grid__pic4 grid__pic5"
      "grid__txt3 grid__txt3 grid__txt3"
      "grid__pic6 grid__pic6 grid__pic6";
  }
  
  section.perth__content .perth__pictures .grid__txt1 {
    grid-area: grid__txt1;
  }
  
  section.perth__content .perth__pictures .grid__pic1 {
    grid-area: grid__pic1;
  }
  
  section.perth__content .perth__pictures .grid__pic2 {
    grid-area: grid__pic2;
  }
  
  section.perth__content .perth__pictures .grid__pic3 {
    grid-area: grid__pic3;
  }
  
  section.perth__content .perth__pictures .grid__txt2 {
    grid-area: grid__txt2;
  }
  
  section.perth__content .perth__pictures .grid__pic4 {
    grid-area: grid__pic4;
  }
  
  section.perth__content .perth__pictures .grid__pic5 {
    grid-area: grid__pic5;
  }
  
  section.perth__content .perth__pictures .grid__txt3 {
    grid-area: grid__txt3;
  }
  
  section.perth__content .perth__pictures .grid__pic6 {
    grid-area: grid__pic6;
  }

  section.stockholm__content .stockholm__pictures .grid__pictures {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px 10px;
    grid-template-areas: 
      "grid__txt1 grid__txt1 grid__txt1"
      "grid__pic1 grid__pic2 grid__pic3"
      "grid__txt2 grid__txt2 grid__txt2"
      "grid__pic4 grid__pic4 grid__pic5"
      "grid__txt3 grid__txt3 grid__txt3"
      "grid__pic6 grid__pic6 grid__pic6";
  }
  
  section.stockholm__content .stockholm__pictures .grid__txt1 {
    grid-area: grid__txt1;
  }
  
  section.stockholm__content .stockholm__pictures .grid__pic1 {
    grid-area: grid__pic1;
  }
  
  section.stockholm__content .stockholm__pictures .grid__pic2 {
    grid-area: grid__pic2;
  }
  
  section.stockholm__content .stockholm__pictures .grid__pic3 {
    grid-area: grid__pic3;
  }
  
  section.stockholm__content .stockholm__pictures .grid__txt2 {
    grid-area: grid__txt2;
  }
  
  section.stockholm__content .stockholm__pictures .grid__pic4 {
    grid-area: grid__pic4;
  }
  
  section.stockholm__content .stockholm__pictures .grid__pic5 {
    grid-area: grid__pic5;
  }
  
  section.stockholm__content .stockholm__pictures .grid__txt3 {
    grid-area: grid__txt3;
  }
  
  section.stockholm__content .stockholm__pictures .grid__pic6 {
    grid-area: grid__pic6;
  }

  section.brussels__content .brussels__pictures .grid__pictures {
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px 10px;
    grid-template-areas: 
      "grid__txt1 grid__txt1 grid__txt1"
      "grid__pic1 grid__pic2 grid__pic3"
      "grid__txt2 grid__txt2 grid__txt2"
      "grid__pic4 grid__pic4 grid__pic5"
      "grid__txt3 grid__txt3 grid__txt3"
      "grid__pic6 grid__pic6 grid__pic6";
  }
  
  section.brussels__content .brussels__pictures .grid__txt1 {
    grid-area: grid__txt1;
  }
  
  section.brussels__content .brussels__pictures .grid__pic1 {
    grid-area: grid__pic1;
  }
  
  section.brussels__content .brussels__pictures .grid__pic2 {
    grid-area: grid__pic2;
  }
  
  section.brussels__content .brussels__pictures .grid__pic3 {
    grid-area: grid__pic3;
  }
  
  section.brussels__content .brussels__pictures .grid__txt2 {
    grid-area: grid__txt2;
  }
  
  section.brussels__content .brussels__pictures .grid__pic4 {
    grid-area: grid__pic4;
  }
  
  section.brussels__content .brussels__pictures .grid__pic5 {
    grid-area: grid__pic5;
  }
  
  section.brussels__content .brussels__pictures .grid__txt3 {
    grid-area: grid__txt3;
  }
  
  section.brussels__content .brussels__pictures .grid__pic6 {
    grid-area: grid__pic6;
  }
  section.gallery .gallery__nav button {
    padding: 50px;
  }
  section.gallery .gallery__nav .gallery__title p {
    font-size: 1em;
  }
  section.gallery .gallery__nav .gallery__title p.gallery--country {
    font-size: 2em;
  }
  section.gallery .zagreb__content img, section.gallery .budapest__content img, section.gallery .perth__content img, section.gallery .stockholm__content img, section.gallery .brussels__content img {
    width: 100%;
    height: 500px;
    -o-object-fit: cover;
       object-fit: cover;
  }
  section.gallery .zagreb__content .grid__pic1--size, section.gallery .budapest__content .grid__pic1--size, section.gallery .perth__content .grid__pic1--size, section.gallery .stockholm__content .grid__pic1--size, section.gallery .brussels__content .grid__pic1--size {
    -o-object-position: top;
       object-position: top;
  }
  section.gallery .zagreb__content .grid__pic3--size, section.gallery .budapest__content .grid__pic3--size, section.gallery .perth__content .grid__pic3--size, section.gallery .stockholm__content .grid__pic3--size, section.gallery .brussels__content .grid__pic3--size {
    -o-object-position: 80%;
       object-position: 80%;
  }
  section.gallery .zagreb__content .grid__pic6--size, section.gallery .budapest__content .grid__pic6--size, section.gallery .perth__content .grid__pic6--size, section.gallery .stockholm__content .grid__pic6--size, section.gallery .brussels__content .grid__pic6--size {
    height: 100vh;
  }
  section.gallery .zagreb__content .zagreb__pictures .zagreb__header, section.gallery .zagreb__content .budapest__pictures .zagreb__header, section.gallery .zagreb__content .perth__pictures .zagreb__header, section.gallery .zagreb__content .stockholm__pictures .zagreb__header, section.gallery .zagreb__content .brussels__pictures .zagreb__header, section.gallery .budapest__content .zagreb__pictures .zagreb__header, section.gallery .budapest__content .budapest__pictures .zagreb__header, section.gallery .budapest__content .perth__pictures .zagreb__header, section.gallery .budapest__content .stockholm__pictures .zagreb__header, section.gallery .budapest__content .brussels__pictures .zagreb__header, section.gallery .perth__content .zagreb__pictures .zagreb__header, section.gallery .perth__content .budapest__pictures .zagreb__header, section.gallery .perth__content .perth__pictures .zagreb__header, section.gallery .perth__content .stockholm__pictures .zagreb__header, section.gallery .perth__content .brussels__pictures .zagreb__header, section.gallery .stockholm__content .zagreb__pictures .zagreb__header, section.gallery .stockholm__content .budapest__pictures .zagreb__header, section.gallery .stockholm__content .perth__pictures .zagreb__header, section.gallery .stockholm__content .stockholm__pictures .zagreb__header, section.gallery .stockholm__content .brussels__pictures .zagreb__header, section.gallery .brussels__content .zagreb__pictures .zagreb__header, section.gallery .brussels__content .budapest__pictures .zagreb__header, section.gallery .brussels__content .perth__pictures .zagreb__header, section.gallery .brussels__content .stockholm__pictures .zagreb__header, section.gallery .brussels__content .brussels__pictures .zagreb__header {
    max-width: 100%;
    height: calc(100vh - 9em);
  }

  /* ========================================== SHOP ========================================== */
  nav.shop ul {
    flex-direction: column;
    padding-left: 10vw;
  }
  nav.shop ul li {
    font-weight: 500;
    margin-bottom: 1em;
    transition: 0.2s;
  }
  nav.shop ul li:hover {
    transform: translateX(10px);
  }

  section.shop {
    margin: 3em 6em;
  }
  section.product {
    margin-left: 0;
    margin-bottom: 0;
  }
  section.product .product__item {
    width: 15vw;
  }
  section.product .product__item a {
    width: 15vw;
  }
  section.product .product__item .product__gradient {
    width: 15vw;
  }
  section.product .product__item .product__gradient img {
    width: 15vw;
  }
  section.product .product__item .product__gradient::after {
    content: "";
    width: 15vw;
    height: calc(100% - 8px);
  }
  section.nav_down {
    margin-bottom: 8em;
  }
  section.nav_down .grid__menu .grid__pagination::after {
    margin-left: 0.5em;
  }

  .grid__desktop {
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-auto-columns: 1fr;
    gap: 20px 10px;
    grid-auto-flow: row;
  }
  .grid__desktop li {
    cursor: pointer;
    list-style: none;
  }

  .grid__product {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    gap: 20px;
  }

  /* ========================================== CASE STUDY ========================================== */
  main.case_study strong {
    font-weight: bold;
  }
  main.case_study p, main.case_study li, main.case_study h4 {
    max-width: 55ch;
    font-weight: 300;
  }
  main.case_study section.prologue, main.case_study section.goals, main.case_study section.evolution, main.case_study section.visual_identity {
    display: flex;
    flex-direction: row;
    margin-bottom: 4em;
    justify-content: center;
    align-items: center;
  }
  main.case_study section.prologue img, main.case_study section.goals img, main.case_study section.evolution img, main.case_study section.visual_identity img {
    width: 25vw;
  }
  main.case_study section.prologue h1, main.case_study section.prologue h2, main.case_study section.prologue p {
    margin-left: 0;
  }
  main.case_study section.prologue img {
    align-self: end;
  }
  main.case_study section.goals {
    margin-bottom: 10em;
  }
  main.case_study section.goals .bw {
    margin-bottom: 0;
  }
  main.case_study section.goals .margin_left .flex_logo .logo {
    width: 70px;
    height: 70px;
  }
  main.case_study section.goals .flex {
    display: flex;
    flex-direction: column;
  }
  main.case_study section.goals .flex ul {
    margin-bottom: 2em;
  }
  main.case_study section.goals .flex ul li {
    margin-bottom: 0;
  }
  main.case_study section.goals .flex h2 {
    margin-bottom: 0;
  }
  main.case_study section.goals .flex .margin_left {
    margin-left: 5vw;
  }
  main.case_study section.goals .flex .margin_left h3 {
    margin: 0 0 1em 0;
  }
  main.case_study section.goals .flex_logo {
    display: flex;
    flex-direction: row;
  }
  main.case_study .visual_identity .left {
    align-self: start;
  }
  main.case_study .visual_identity .mobile_video {
    display: none;
  }
  main.case_study .visual_identity .desktop_video {
    display: block;
    width: 50vw;
    margin-right: 5vw;
  }
  main.case_study .solution {
    margin: 8em;
  }
  main.case_study .solution .grid__argument {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    gap: 20px 10px;
    grid-auto-flow: row;
    grid-template-areas: "grid__title grid__phone ." ". grid__phone grid__argument1" "grid__argument2 grid__phone ." ". grid__phone grid__argument3";
  }
  main.case_study .solution .grid__phone {
    grid-area: grid__phone;
  }
  main.case_study .solution .grid__title {
    display: block;
    grid-area: grid__title;
    font-size: 32px;
    font-weight: bold;
  }
  main.case_study .solution .grid__argument2 {
    grid-area: grid__argument2;
  }
  main.case_study .solution .grid__argument1 {
    grid-area: grid__argument1;
  }
  main.case_study .solution .grid__argument3 {
    grid-area: grid__argument3;
  }
  main.case_study .solution h2 {
    display: none;
  }
  main.case_study .solution img {
    display: block;
    width: 20vw;
  }
  main.case_study .evolution {
    margin-bottom: 8em !important;
  }
  main.case_study .evolution .margin, main.case_study .evolution figure {
    margin-bottom: 0;
    margin-right: 5vw;
  }
  main.case_study .evolution img {
    width: 30vw !important;
  }
  main.case_study .conclusion {
    margin-bottom: 4em;
  }
  main.case_study .conclusion p {
    margin-right: 0;
  }
  main.case_study .conclusion .display_mobile {
    display: none;
  }
  main.case_study .conclusion .display_desktop {
    display: block;
    max-width: 55ch;
  }
  main.case_study .conclusion img {
    width: 30vw;
  }
  main.case_study .conclusion .split {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
  }
  main.case_study .conclusion .split h2 {
    margin: 0;
  }
  main.case_study .conclusion .margin {
    margin: 0 5vw;
    max-width: 55ch;
  }
  main.case_study .conclusion figure {
    margin: 0 0 3em 5vw;
  }
  main.case_study .conclusion figcaption {
    margin: 0;
    width: 30vw;
  }

  /* ========================================== FOOTER ========================================== */
  footer {
    margin-bottom: 0cap;
    padding-bottom: 2em;
    background: conic-gradient(from 65deg at 50% -50%, #F74D1A 120deg, #8246E0 195deg, #F74D1A 23deg);
  }
  footer ul {
    margin-bottom: 0;
  }
  footer .footer__flex {
    display: flex;
    flex-direction: row;
    gap: 6em;
    margin: 2em 0 3em 0;  }
}

/*# sourceMappingURL=app.css.map*/


  .quote-container {
    margin-bottom: 20px;
    padding: 10px;
    border-left: 3px solid #f74d1a; /* Example border color */
    background-color: #f9f9f9; /* Example background color */
  }

  .quote-container p {
    font-style: italic;
  }