@font-face {
  font-family: 'Mulish', sans-serif;
  src: url('Fonts/Mulish-ExtraLight') format('truetype');
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'Mulish', sans-serif;
  src: url('Fonts/Mulish-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Mulish', sans-serif;
  src: url('Fonts/Mulish-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

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

html {
  height: 100%;
}

body {
  background-color: rgb(0, 0, 0);
  min-height: 100vh;
}


a {
  color: rgb(255, 255, 255);
  text-decoration: none;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(71, 40, 40, 0);
}

::-webkit-scrollbar-thumb {
  background-color: rgb(50, 50, 50);
  border-radius: 30px;
}


/*HOME*/

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4.5vw 5vw;
  z-index: 1001;
  color: rgb(255, 255, 255);
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.4) 53%,
      rgba(0, 0, 0, 0) 100%);
}

.logo {
  font-family: "Mulish", sans-serif;
  font-weight: 300;
  font-size: 1.6vw;
  text-transform: uppercase;
  letter-spacing: 0.4vw;
}

.hamburger {
  display: flex;
  flex-direction: column;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1001;
  gap: 1.92vh;
}

.hamburger span {
  width: 8vw;
  height: 0.1vh;
  background: white;
  transition: all 0.5s ease;
}

.hamburger.active span:first-child {
  transform: translateY(1vh);
}

.hamburger.active span:last-child {
  transform: translateY(-1vh);
}

.menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: rgba(0, 0, 0, 1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
  z-index: 1000;
  overflow-y: hidden;
}

.menu.open {
  opacity: 1;
  pointer-events: auto;
}

.menu li a {
  color: white;
  text-decoration: none;
  transition: color 0.5s;
  font-family: "Mulish", sans-serif;
  font-weight: 100;
  font-size: 1.4vw;
  text-transform: uppercase;
  letter-spacing: 0.5vw;
}

.menu li .current {
  color: rgb(130, 130, 130);
}

.menu li a:hover {
  color: rgb(130, 130, 130);
}

#slideshow {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: -1;
  object-fit: cover;
  animation: fadein 2s ease-in;
  overflow: hidden;
}

#slideshow img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  top: 0;
  position: fixed;
  object-fit: cover;
  filter: grayscale(100%);
}

#footer {
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.4) 53%,
      rgba(0, 0, 0, 0) 100%);
  position: sticky;
  width: 100%;
  top: 100%;
  color: rgb(255, 255, 255);
}

#footer div {
  display: flex;
  justify-content: center;
  align-items: center;
}

#footer .copyright {
  font-family: "Mulish", sans-serif;
  font-size: 0.9vw;
  font-weight: 300;
  list-style: none;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.1vw;
  padding: 2vw 0;
}

#footer div a {
  padding-left: 5px;
}

@media screen and (max-width: 767px) and (orientation:portrait) {

  .navbar {
    padding: 10vw 5vw;
  }

  .logo {
    font-size: 4vw;
    letter-spacing: 0.9vw;
  }

  .hamburger {
    gap: 1.1vh;
  }

  .hamburger span {
    width: 13vw;
    height: 0.07vh;
  }

  .hamburger.active span:first-child {
    transform: translateY(0.6vh);
  }

  .hamburger.active span:last-child {
    transform: translateY(-0.6vh);
  }

  .menu {
    gap: 10vw;
  }

  .menu li a {
    font-size: 3.5vw;
    letter-spacing: 1.5vw;
    font-weight: 200;
  }

  #footer div {
    height: 15vw;
  }

  #footer .copyright {
    font-size: 2.3vw;
  }

  #footer div a {
    font-style: 2.6vw;
    padding-left: 4px;
  }
}

@media only screen and (device-width: 768px) {

  .navbar {
    padding: 5vw 4vw;
  }

  .logo {
    font-size: 3.3vw;
    letter-spacing: 0.9vw;
  }

  .hamburger span {
    height: 0.08vh;
  }

  .menu {
    gap: 7vw;
  }


  .hamburger span {
    width: 10vw;
  }

  .menu li a {
    font-size: 3vw;
    letter-spacing: 1.5vw;
  }

  .hamburger {
    gap: 1.7vh;
  }

  #footer .copy {
    font-size: 1.5vw;
  }

  #footer div {
    height: 10vw;
  }
}


/* WORK */

.work {
  margin-bottom: 10vh;
  margin-top: 3vh;
}

.work ul {
  display: flex;
  justify-content: center;
  list-style: none;
  flex-wrap: wrap;
  gap: 2.5vw 2.5vw;
}

.work ul li {
  justify-content: center;
  align-items: center;
  text-align: center;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 100%;
  }
}

.work figure {
  overflow: hidden;
  transition: 0.3s ease-in-out;
}

.work .album-name {
  margin-top: 1.5vw;
  font-family: "Mulish", sans-serif;
  font-weight: 300;
  font-size: 1vw;
  letter-spacing: 0.1vw;
  text-transform: uppercase;
}

.work .image-cover {
  display: block;
  object-fit: cover;
  height: 29vw;
  width: 43.6vw;
  transition: 0.4s ease-in-out;
  filter: grayscale(100%);
}

.work .image-cover:hover {
  transform: scale(1.1);
  filter: grayscale(0%);
}


@media screen and (max-width: 767px) and (orientation:portrait) {
  .work {
    display: flex;
    flex-direction: column;
    margin-top: 5vh;
    margin-bottom: 0;
  }

  .work ul {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .work .album-name {
    font-size: 3vw;
    margin-bottom: 8vh;
    padding-top: 3vw;
    letter-spacing: 0.5vw;
  }

  .work .image-cover {
    height: 65vw;
    width: 89.55vw;
  }
}

@media only screen and (min-device-width: 576px) and (max-device-width: 1023px) and (orientation:landscape) {

  .work {
    margin-bottom: 10vh;
    margin-top: 1vw;
  }

  .work .album-name {
    font-size: 1.2vw;
    letter-spacing: 0.3vw;
  }
}


@media only screen and (device-width: 768px) {
  .work {
    margin-bottom: 0;
    margin-top: 4vw;
  }

  .work .album-name {
    margin-top: 15px;
    font-size: 2vw;
    letter-spacing: 0.5vw;
    margin-bottom: 25px;
  }

  .work .image-cover {
    height: 43vw;
    width: 91.5vw;
  }
}


@media only screen and (device-width: 1024px) {
  .work {
    margin-bottom: 0;
    margin-top: 10vw;
  }

  .work .album-name {
    margin-top: 15px;
    font-size: 1.3vw;
    letter-spacing: 0.3vw;
  }

  .work .image-cover {
    height: 30vw;
    width: 43.6vw;
  }
}



/*PHOTOGRAPHY*/

#intro {
  animation: fadein 2s ease-in;
}

#photography {
  margin-bottom: 10vh;
  margin-top: 3vh;
}


#photography ul {
  display: flex;
  justify-content: center;
  list-style: none;
  flex-wrap: wrap;
  gap: 12vh 2.5vw;
}

#photography ul li {
  justify-content: center;
  align-items: center;
  text-align: center;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 100%;
  }
}

#photography figure {
  overflow: hidden;
  transition: 0.3s ease-in-out;
}

#photography .album-name {
  margin-top: 1.5vw;
  font-family: "Mulish", sans-serif;
  font-weight: 300;
  font-size: 1vw;
  letter-spacing: 0.1vw;
  text-transform: uppercase;
}

#photography .image-cover {
  display: block;
  object-fit: cover;
  height: 29vw;
  width: 43.4vw;
  transition: 0.5s ease-in-out;
  filter: grayscale(100%);
}

#photography .image-cover:hover {
  transform: scale(1.1);
  filter: grayscale(0%);
}


@media screen and (max-width: 767px) and (orientation:portrait) {
  #photography {
    margin-bottom: 0;
    margin-top: 5vh;
    display: flex;
    flex-direction: column;
  }

  #photography ul {
    gap: 0 0;
  }

  #photography .album-name {
    font-size: 3vw;
    margin-bottom: 8vh;
    padding-top: 3vw;
    letter-spacing: 0.5vw;
  }

  #photography .image-cover {
    height: 65vw;
    width: 89.55vw;
  }
}

@media only screen and (min-device-width: 576px) and (max-device-width: 1023px) and (orientation:landscape) {

  #photography {
    margin-bottom: 10vh;
    margin-top: 1vw;
  }

  #photography .album-name {
    font-size: 1.2vw;
    letter-spacing: 0.3vw;
  }
}


@media only screen and (device-width: 768px) {
  #photography {
    margin-bottom: 0;
    margin-top: 4vw;
  }

  #photography .album-name {
    margin-top: 15px;
    font-size: 2vw;
    letter-spacing: 0.5vw;
    margin-bottom: 25px;
  }

  #photography .image-cover {
    height: 43vw;
    width: 91.5vw;
  }
}


@media only screen and (device-width: 1024px) {
  #photography {
    margin-bottom: 0;
    margin-top: 10vw;
  }

  #photography ul li {
    padding-bottom: 2vw;
  }

  #photography .album-name {
    margin-top: 15px;
    font-size: 1.3vw;
    letter-spacing: 0.3vw;
  }

  #photography .image-cover {
    height: 30vw;
    width: 43.6vw;
  }
}

/*LANDSCAPE*/

#landscape {
  margin-bottom: 10vh;
  margin-top: 3vh;
}

#landscape ul {
  display: flex;
  justify-content: center;
  list-style: none;
  flex-wrap: wrap;
  gap: 12vh 2.5vw;
  list-style: none;
}

#landscape ul li {
  justify-content: center;
  align-items: center;
  text-align: center;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 100%;
  }
}

#landscape figure {
  overflow: hidden;
  transition: 0.3s ease-in-out;
}

#landscape .album-name {
  margin-top: 1.5vw;
  font-family: "Mulish", sans-serif;
  font-weight: 300;
  font-size: 1vw;
  letter-spacing: 0.1vw;
  text-transform: uppercase;
}

#landscape .image-cover {
  display: block;
  object-fit: cover;
  height: 28.1vw;
  width: 28.1vw;
  transition: 0.4s ease-in-out;
  filter: grayscale(100%);
}

#landscape .image-cover:hover {
  transform: scale(1.1);
  filter: grayscale(0%);
}


@media only screen and (max-width: 767px) and (orientation: portrait) {
  #landscape {
    margin-bottom: 2vh;
    display: flex;
    flex-direction: column;
    margin-top: 5vh;
  }

  #landscape ul {
    gap: 0 0;
  }

  #landscape .album-name {
    font-size: 3vw;
    margin-bottom: 8vh;
    padding-top: 3vw;
    letter-spacing: 0.5vw;
  }

  #landscape .image-cover {
    height: 65vw;
    width: 89.55vw;
  }
}

@media only screen and (min-device-width: 576px) and (max-device-width: 1023px) and (orientation:landscape) {

  #landscape {
    margin-bottom: 10vh;
    margin-top: 1vw;
  }

  #landscape .album-name {
    font-size: 1.2vw;
    letter-spacing: 0.3vw;
  }
}

@media only screen and (device-width: 768px) {
  #landscape {
    margin-bottom: 8vh;
    margin-top: 1vw;
  }

  #landscape .album-name {
    margin-top: 15px;
    font-size: 1.5vw;
    letter-spacing: 0.5vw;
    margin-bottom: 25px;
  }

  #landscape .image-cover {
    height: 29vw;
    width: 45vw;
  }
}

@media only screen and (device-width: 1024px) {
  #landscape {
    margin-bottom: 5vw;
    margin-top: 7vw;
  }

  #landscape .album-name {
    margin-top: 15px;
    font-size: 1.3vw;
    letter-spacing: 0.2vw;
  }
}


/* NEW WORK */

#lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 1003;
  flex-direction: column;
}

#lightbox.visible {
  opacity: 1;
}

#lightbox-image {
  max-width: auto;
  max-height: 75%;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

#lightbox-image.visible {
  opacity: 1;
}

.close-button {
  position: absolute;
  top: 2.4vw;
  right: 4vw;
  font-size: 2.6vw;
  color: white;
  cursor: pointer;
  z-index: 5;
  font-weight: 100;
}

.prev-button,
.next-button {
  font-size: 1.5vw;
  color: white;
  text-decoration: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  cursor: pointer;
  font-weight: 100;
}

.prev-button {
  left: 4vw;
}

.next-button {
  right: 4vw;
}

.gallery-lightbox {
  animation: fadein 2s ease-in;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 4vh;
  gap: 0.5vw;
  margin-bottom: 10vh;
}

.lightbox-trigger {
  opacity: 0;
  transition: opacity 2.5s ease-in-out;
}

.lightbox-trigger.visible {
  opacity: 1;
}

.lightbox-trigger.instant {
  transition: none !important;
}

.gallery-lightbox img {
  padding: 0 5px;
}

.line-one-newwork img {
  max-width: 100%;
  height: 27.05vw;
  cursor: pointer;
}

.line-two-newwork img {
  max-width: 100%;
  height: 29.25vw;
  cursor: pointer;
}

.line-three-newwork img {
  max-width: 100%;
  height: 30.8vw;
  cursor: pointer;
}

.line-four-newwork img {
  max-width: 100%;
  height: 43.8vw;
  cursor: pointer;
}

@media screen and (max-width: 767px) and (orientation: portrait) {
  .gallery-lightbox {
    margin-top: 7vw;
  }

  .gallery-lightbox div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .gallery-lightbox img {
    width: 92.5vw;
    height: auto;
    padding-bottom: 2vw;
  }

  .close-button {
    position: absolute;
    top: 4vw;
    right: 6vw;
    font-size: 10vw;
  }

  #lightbox img {
    width: 88vw;
  }
}

@media only screen and (device-width: 768px) {
  .gallery-lightbox {
    margin-top: 4vw;
  }

  #lightbox img {
    width: 70vw;
    height: auto;
  }

  .close-button {
    top: 2.2vw;
    right: 3.9vw;
    font-size: 5vw;
  }
}

@media only screen and (device-width: 1024px) {
  .gallery-lightbox {
    margin-top: 7vw;
  }

  #lightbox img {
    width: auto;
    height: 45vw;
  }

  .close-button {
    top: 1.5vw;
    right: 3.9vw;
    font-size: 5vw;
  }
}


/* PERSONAL FAVORITES */

.line-one-personalfavorites img {
  max-width: 100%;
  height: 26.45vw;
  cursor: pointer;
}

.line-two-personalfavorites img {
  max-width: 100%;
  height: 31.5vw;
  cursor: pointer;
}

.line-three-personalfavorites img {
  max-width: 100%;
  height: 24vw;
  cursor: pointer;
}


@media only screen and (device-width: 768px) {
  .gallery-lightbox {
    margin-top: 4vw;
  }

  #lightbox img {
    width: 70vw;
    height: auto;
  }

  .close-button {
    top: 2.2vw;
    right: 3.9vw;
    font-size: 5vw;
  }
}

/*DOLOMITES*/

.line-one-dolomites img {
  max-width: 100%;
  height: 24.2vw;
  cursor: pointer;
}

.line-two-dolomites img {
  max-width: 100%;
  height: 24.7vw;
  cursor: pointer;
}

.line-three-dolomites img {
  max-width: 100%;
  height: 24.9vw;
  cursor: pointer;
  justify-content: center;
}

.line-four-dolomites img {
  max-width: 100%;
  height: 24.05vw;
  cursor: pointer;
  justify-content: center;
}

.line-five-dolomites img {
  max-width: 100%;
  height: 24.8vw;
  cursor: pointer;
  justify-content: center;
}

.line-six-dolomites img {
  max-width: 100%;
  height: 25.5vw;
  cursor: pointer;
  justify-content: center;
}

.line-seven-dolomites img {
  max-width: 100%;
  height: 20.7vw;
  cursor: pointer;
  justify-content: center;
}

.line-eight-dolomites img {
  max-width: 100%;
  height: 20.75vw;
  cursor: pointer;
  justify-content: center;
}

/* ALPS */

.line-one-alps img {
  max-width: 100%;
  height: 25.9vw;
  cursor: pointer;
}

.line-two-alps img {
  max-width: 100%;
  height: 23.6vw;
  cursor: pointer;
}


@media only screen and (device-width: 768px) {
  .gallery-lightbox {
    margin-top: 4vw;
  }

  #lightbox img {
    width: 70vw;
    height: auto;
  }

  .close-button {
    top: 2.2vw;
    right: 3.9vw;
    font-size: 5vw;
  }
}

@media only screen and (device-width: 1024px) {
  .gallery-lightbox {
    margin-top: 7vw;
  }

  #lightbox img {
    width: auto;
    height: 45vw;
  }

  .close-button {
    top: 1.5vw;
    right: 3.9vw;
    font-size: 5vw;
  }
}

/* NORWAY */

.line-one-norway img {
  max-width: 100%;
  height: 27.15vw;
  cursor: pointer;
}


@media only screen and (device-width: 768px) {
  .gallery-lightbox {
    margin-top: 4vw;
  }

  #lightbox img {
    width: 70vw;
    height: auto;
  }

  .close-button {
    top: 2.2vw;
    right: 3.9vw;
    font-size: 5vw;
  }
}

@media only screen and (device-width: 1024px) {
  .gallery-lightbox {
    margin-top: 7vw;
  }

  #lightbox img {
    width: auto;
    height: 45vw;
  }

  .close-button {
    top: 1.5vw;
    right: 3.9vw;
    font-size: 5vw;
  }
}

/* COMMERCIAL */

#commercial {
  margin-bottom: 10vh;
  margin-top: 3vh;
}

#commercial ul {
  display: flex;
  justify-content: center;
  list-style: none;
  flex-wrap: wrap;
  gap: 12vh 2.5vw;
  list-style: none;
}

#commercial ul li {
  justify-content: center;
  align-items: center;
  text-align: center;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 100%;
  }
}

#commercial figure {
  overflow: hidden;
  transition: 0.3s ease-in-out;
}

#commercial .album-name {
  margin-top: 1.5vw;
  font-family: "Mulish", sans-serif;
  font-weight: 300;
  font-size: 1vw;
  letter-spacing: 0.1vw;
  text-transform: uppercase;
}

#commercial .image-cover {
  display: block;
  object-fit: cover;
  height: 28.1vw;
  width: 28.1vw;
  transition: 0.4s ease-in-out;
  filter: grayscale(100%);
}

#commercial .image-cover:hover {
  transform: scale(1.1);
  filter: grayscale(0%);
}


@media screen and (max-width: 767px) and (orientation:portrait) {
  #commercial {
    margin-bottom: 2vh;
    margin-top: 5vh;
    display: flex;
    flex-direction: column;
  }

  #commercial ul {
    gap: 0 0;
  }

  #commercial .album-name {
    font-size: 3vw;
    margin-bottom: 8vh;
    padding-top: 3vw;
    letter-spacing: 0.5vw;
  }

  #commercial .image-cover {
    height: 65vw;
    width: 89.55vw;
  }
}

@media only screen and (min-device-width: 576px) and (max-device-width: 1023px) and (orientation:landscape) {

  #commercial {
    margin-bottom: 10vh;
    margin-top: 1vw;
  }

  #photography .album-name {
    font-size: 1.2vw;
    letter-spacing: 0.3vw;
  }
}

@media only screen and (device-width: 768px) {
  #commercial {
    margin-bottom: 8vh;
    margin-top: 1vw;
  }

  #commercial .album-name {
    margin-top: 15px;
    font-size: 1.5vw;
    letter-spacing: 0.5vw;
    margin-bottom: 25px;
  }

  #commercial .image-cover {
    height: 29vw;
    width: 44.3vw;
  }
}

@media only screen and (device-width: 1024px) {
  #commercial {
    margin-bottom: 5vw;
    margin-top: 4vw;
  }

  #commercial .album-name {
    margin-top: 15px;
    font-size: 1.3vw;
    letter-spacing: 0.2vw;
  }
}


/* AUDI RS5 */

.line-one-audirs5 img {
  max-width: 100%;
  height: 29.5vw;
  cursor: pointer;
}

.line-two-audirs5 img {
  max-width: 100%;
  height: 29.5vw;
  cursor: pointer;
}

.line-three-audirs5 img {
  max-width: 100%;
  height: 29.5vw;
  cursor: pointer;
}

.line-four-audirs5 img {
  max-width: 100%;
  height: 29.5vw;
  cursor: pointer;
}

.line-five-audirs5 img {
  max-width: 100%;
  height: 29.5vw;
  cursor: pointer;
}

.line-six-audirs5 img {
  max-width: 100%;
  height: 29.5vw;
  cursor: pointer;
}

.line-seven-audirs5 img {
  max-width: 100%;
  height: 29.5vw;
  cursor: pointer;
}


@media screen and (max-width: 767px) and (orientation: portrait) {
  .gallery-lightbox {
    margin-top: 5vw;
  }

  .gallery-lightbox div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .gallery-lightbox img {
    width: 92.5vw;
    height: auto;
    padding-bottom: 2vw;
  }

  .close-button {
    position: absolute;
    top: 4vw;
    right: 6vw;
    font-size: 10vw;
  }

  #lightbox img {
    width: 88vw;
  }
}

/* GIORGIA AND PAOLO */

.line-one-giorgiaandpaolo img {
  max-width: 100%;
  height: 29.5vw;
  cursor: pointer;
}

.line-two-giorgiaandpaolo img {
  max-width: 100%;
  height: 29.5vw;
  cursor: pointer;
}

.line-three-giorgiaandpaolo img {
  max-width: 100%;
  height: 29.5vw;
  cursor: pointer;
}

.line-four-giorgiaandpaolo img {
  max-width: 100%;
  height: 29.5vw;
  cursor: pointer;
}

.line-five-giorgiaandpaolo img {
  max-width: 100%;
  height: 29.5vw;
  cursor: pointer;
}


@media screen and (max-width: 767px) and (orientation: portrait) {
  .gallery-lightbox {
    margin-top: 5vw;
  }

  .gallery-lightbox div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .gallery-lightbox img {
    width: 92.5vw;
    height: auto;
    padding-bottom: 2vw;
  }

  .close-button {
    position: absolute;
    top: 4vw;
    right: 6vw;
    font-size: 10vw;
  }

  #lightbox img {
    width: 88vw;
  }
}


/* DG */

.line-one-dg img {
  max-width: 100%;
  height: 29.5vw;
  cursor: pointer;
}

.line-two-dg img {
  max-width: 100%;
  height: 29.5vw;
  cursor: pointer;
}

.line-three-dg img {
  max-width: 100%;
  height: 29.5vw;
  cursor: pointer;
}


@media screen and (max-width: 767px) and (orientation: portrait) {
  .gallery-lightbox {
    margin-top: 5vw;
  }

  .gallery-lightbox div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .gallery-lightbox img {
    width: 92.5vw;
    height: auto;
    padding-bottom: 2vw;
  }

  .close-button {
    position: absolute;
    top: 4vw;
    right: 6vw;
    font-size: 10vw;
  }

  #lightbox img {
    width: 88vw;
  }
}


/* RISOTTO WITH BERGAMOTTO */

.line-one-risottowithbergamotto img {
  max-width: 100%;
  height: 29.5vw;
  cursor: pointer;
}

.line-two-risottowithbergamotto img {
  max-width: 100%;
  height: 29.5vw;
  cursor: pointer;
}

.line-three-risottowithbergamotto img {
  max-width: 100%;
  height: 29.5vw;
  cursor: pointer;
}


@media screen and (max-width: 767px) and (orientation: portrait) {
  .gallery-lightbox {
    margin-top: 5vw;
  }

  .gallery-lightbox div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .gallery-lightbox img {
    width: 92.5vw;
    height: auto;
    padding-bottom: 2vw;
  }

  .close-button {
    position: absolute;
    top: 4vw;
    right: 6vw;
    font-size: 10vw;
  }

  #lightbox img {
    width: 88vw;
  }
}


/* AP ROYAL APARTMENTS */


.line-one-aproyalapartments img {
  max-width: 100%;
  height: 29.5vw;
  cursor: pointer;
}

.line-two-aproyalapartments img {
  max-width: 100%;
  height: 29.5vw;
  cursor: pointer;
}

.line-three-aproyalapartments img {
  max-width: 100%;
  height: 29.5vw;
  cursor: pointer;
}


@media screen and (max-width: 767px) and (orientation: portrait) {
  .gallery-lightbox {
    margin-top: 5vw;
  }

  .gallery-lightbox div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .gallery-lightbox img {
    width: 92.5vw;
    height: auto;
    padding-bottom: 2vw;
  }

  .close-button {
    position: absolute;
    top: 4vw;
    right: 6vw;
    font-size: 10vw;
  }

  #lightbox img {
    width: 88vw;
  }
}

/* PAOLO */

.line-one-paolo img {
  max-width: 100%;
  height: 30.4vw;
  cursor: pointer;
}

.line-two-paolo img {
  max-width: 100%;
  height: 40.9vw;
  cursor: pointer;
}


@media screen and (max-width: 767px) and (orientation: portrait) {
  .gallery-lightbox {
    margin-top: 5vw;
  }

  .gallery-lightbox div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .gallery-lightbox img {
    width: 92.5vw;
    height: auto;
    padding-bottom: 2vw;
  }

  .close-button {
    position: absolute;
    top: 4vw;
    right: 6vw;
    font-size: 10vw;
  }

  #lightbox img {
    width: 88vw;
  }
}

/* VOLKSWAGEN T-ROC */

.line-one-volkswagentroc img {
  max-width: 100%;
  height: 28.1vw;
  cursor: pointer;
}

.line-two-volkswagentroc img {
  max-width: 100%;
  height: 28.6vw;
  cursor: pointer;
}

.line-three-volkswagentroc img {
  max-width: 100%;
  height: 28.1vw;
  cursor: pointer;
}


@media screen and (max-width: 767px) and (orientation: portrait) {
  .gallery-lightbox {
    margin-top: 5vw;
  }

  .gallery-lightbox div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .gallery-lightbox img {
    width: 92.5vw;
    height: auto;
    padding-bottom: 2vw;
  }

  .close-button {
    position: absolute;
    top: 4vw;
    right: 6vw;
    font-size: 10vw;
  }

  #lightbox img {
    width: 88vw;
  }
}


/* BMW 1 SERIES */

.line-one-bmw1series img {
  max-width: 100%;
  height: 29.5vw;
  cursor: pointer;
}

@media screen and (max-width: 767px) and (orientation: portrait) {
  .gallery-lightbox {
    margin-top: 7vw;
  }

  .gallery-lightbox div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .gallery-lightbox img {
    width: 92.5vw;
    height: auto;
    padding-bottom: 2vw;
  }

  .close-button {
    position: absolute;
    top: 4.5vw;
    right: 6vw;
    font-size: 9vw;
  }

  #lightbox img {
    width: 88vw;
  }
}



/* MERCEDES C43 */

.line-one-mercedes-c43 img {
  max-width: 100%;
  height: 25vw;
  cursor: pointer;
}


@media screen and (max-width: 767px) and (orientation: portrait) {
  .gallery-lightbox {
    margin-top: 7vw;
  }

  .gallery-lightbox div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .gallery-lightbox img {
    width: 92.5vw;
    height: auto;
    padding-bottom: 2vw;
  }

  .close-button {
    position: absolute;
    top: 4.5vw;
    right: 6vw;
    font-size: 9vw;
  }

  #lightbox img {
    width: 88vw;
  }
}


/* SAMSUNG GALAXY S24 ULTRA */

.line-one-samsung-galaxy-s24-ultra img {
  max-width: 100%;
  height: 25vw;
  cursor: pointer;
}


@media screen and (max-width: 767px) and (orientation: portrait) {
  .gallery-lightbox {
    margin-top: 7vw;
  }

  .gallery-lightbox div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .gallery-lightbox img {
    width: 92.5vw;
    height: auto;
    padding-bottom: 2vw;
  }

  .close-button {
    position: absolute;
    top: 4.5vw;
    right: 6vw;
    font-size: 9vw;
  }

  #lightbox img {
    width: 88vw;
  }
}


/* JEEP WRANGLER SAHARA */


.line-one-Jeep-Wrangler img {
  max-width: 100%;
  height: 25vw;
  cursor: pointer;
}


@media screen and (max-width: 767px) and (orientation: portrait) {
  .gallery-lightbox {
    margin-top: 7vw;
  }

  .gallery-lightbox div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .gallery-lightbox img {
    width: 92.5vw;
    height: auto;
    padding-bottom: 2vw;
  }

  .close-button {
    position: absolute;
    top: 4.5vw;
    right: 6vw;
    font-size: 9vw;
  }

  #lightbox img {
    width: 88vw;
  }
}



/* 4 ERRE - BETWEEN PAPERS & CALLS */


.Between-Papers-And-Calls-title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  animation: fadein 2s ease-in;
}

.Between-Papers-And-Calls-title p {
  text-align: center;
  color: rgb(180, 180, 180);
  font-size: 1vw;
  line-height: 1.8;
  letter-spacing: 0.5px;
  font-weight: 300;
  font-family: "Mulish", sans-serif;
  width: 70vw;
  margin: 5vh 0 10vh 0;
}

.Between-Papers-And-Calls-title strong {
  color: rgb(200, 200, 200);
}


.line-one-Between-Papers-And-Calls img {
  max-width: 100%;
  height: 24.9vw;
  cursor: pointer;
}

@media screen and (max-width: 767px) and (orientation: portrait) {
  .gallery-lightbox {
    margin-top: 5vw;
    margin-bottom: 10vh;
  }

  .gallery-lightbox div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .gallery-lightbox img {
    width: 92.5vw;
    height: auto;
    padding-bottom: 2vw;
  }

  .close-button {
    position: absolute;
    top: 6.6vw;
    right: 5.5vw;
    font-size: 9vw;
  }

  #lightbox img {
    width: 88vw;
  }

  .Between-Papers-And-Calls-title p {
    font-size: 2.5vw;
    line-height: 1.8;
    width: 85vw;
    margin: 5vh 0 0 0;
  }
}



/* ART */

#art {
  margin-bottom: 10vh;
  margin-top: 3vh;
}

#art ul {
  display: flex;
  justify-content: center;
  list-style: none;
  flex-wrap: wrap;
  gap: 12vh 2.5vw;
  list-style: none;
}

#art ul li {
  justify-content: center;
  align-items: center;
  text-align: center;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 100%;
  }
}

#art figure {
  overflow: hidden;
  transition: 0.3s ease-in-out;
}

#art .album-name {
  margin-top: 1.5vw;
  font-family: "Mulish", sans-serif;
  font-weight: 300;
  font-size: 1vw;
  letter-spacing: 0.1vw;
  text-transform: uppercase;
}

#art .image-cover {
  display: block;
  object-fit: cover;
  height: 28vw;
  width: 28.1vw;
  transition: 0.4s ease-in-out;
  filter: grayscale(100%);
}

#art .image-cover:hover {
  transform: scale(1.1);
  filter: grayscale(0%);
}


@media screen and (max-width: 767px) and (orientation:portrait) {
  #art {
    margin-bottom: 2vh;
    margin-top: 5vh;
    display: flex;
    flex-direction: column;
  }

  #art ul {
    gap: 0 0;
  }

  #art .album-name {
    font-size: 3vw;
    margin-bottom: 8vh;
    padding-top: 3vw;
    letter-spacing: 0.5vw;
  }

  #art .image-cover {
    height: 65vw;
    width: 89.55vw;
  }
}

@media only screen and (min-device-width: 576px) and (max-device-width: 1023px) and (orientation:landscape) {

  #art {
    margin-bottom: 10vh;
    margin-top: 1vw;
  }


  #art .album-name {
    font-size: 1.2vw;
    letter-spacing: 0.3vw;
  }

  #art .image-cover {
    height: 29.4vw;
    height: 29.4vw;
  }
}


@media only screen and (device-width: 768px) {
  #art {
    margin-bottom: 0;
    margin-top: 4vw;
  }

  #art .album-name {
    margin-top: 15px;
    font-size: 1.4vw;
    letter-spacing: 0.5vw;
    margin-bottom: 25px;
  }

  #art .image-cover {
    height: 29vw;
    width: 45vw;
  }
}

@media only screen and (device-width: 1024px) {
  #art {
    margin-bottom: 0;
    margin-top: -13vw;
  }

  #art .album-name {
    margin-top: 15px;
    font-size: 1.5vw;
    letter-spacing: 0.2vw;
  }

  #art .image-cover {
    height: 29.4vw;
    width: 29.4vw;
  }
}


/* CRACKS IN THE VOID */


.cracks-in-the-void-title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  animation: fadein 2s ease-in;
}

.cracks-in-the-void-title p {
  text-align: center;
  color: rgb(180, 180, 180);
  font-size: 1vw;
  line-height: 1.8;
  letter-spacing: 0.5px;
  font-weight: 300;
  font-family: "Mulish", sans-serif;
  width: 70vw;
  margin: 5vh 0 10vh 0;
}

.cracks-in-the-void-title strong {
  color: rgb(200, 200, 200);
}


.line-one-cracks-in-the-void img {
  max-width: 100%;
  height: 31vw;
  cursor: pointer;
}

.line-two-cracks-in-the-void img {
  max-width: 100%;
  height: 31vw;
  cursor: pointer;
}

.line-three-cracks-in-the-void img {
  max-width: 100%;
  height: 31vw;
  cursor: pointer;
}

.line-four-cracks-in-the-void img {
  max-width: 100%;
  height: 25.7vw;
  cursor: pointer;
}

.line-five-cracks-in-the-void img {
  max-width: 100%;
  height: 31vw;
  cursor: pointer;
}

.line-six-cracks-in-the-void img {
  max-width: 100%;
  height: 31vw;
  cursor: pointer;
}


@media screen and (max-width: 767px) and (orientation: portrait) {
  .gallery-lightbox {
    margin-top: 5vw;
    margin-bottom: 10vh;
  }

  .gallery-lightbox div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .gallery-lightbox img {
    width: 92.5vw;
    height: auto;
    padding-bottom: 2vw;
  }

  .close-button {
    position: absolute;
    top: 6.6vw;
    right: 5.5vw;
    font-size: 9vw;
  }

  #lightbox img {
    width: 88vw;
  }

  .cracks-in-the-void-title p {
    font-size: 2.5vw;
    line-height: 1.8;
    width: 85vw;
    margin: 5vh 0 0 0;
  }
}



/* WARDE OF THE ASYLUM */


.warden-of-the-asylum-title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  animation: fadein 2s ease-in;
}

.warden-of-the-asylum-title p {
  text-align: center;
  color: rgb(180, 180, 180);
  font-size: 1vw;
  line-height: 1.8;
  letter-spacing: 0.5px;
  font-weight: 300;
  font-family: "Mulish", sans-serif;
  width: 70vw;
  margin: 5vh 0 10vh 0;
}

.warden-of-the-asylum-title strong {
  color: rgb(200, 200, 200);
}


.line-one-warden-of-the-asylum img {
  max-width: 100%;
  height: 29.6vw;
  cursor: pointer;
}

.line-two-warden-of-the-asylum img {
  max-width: 100%;
  height: 29.6vw;
  cursor: pointer;
}

.line-three-warden-of-the-asylum img {
  max-width: 100%;
  height: 29.6vw;
  cursor: pointer;
}

.line-four-warden-of-the-asylum img {
  max-width: 100%;
  height: 29.6vw;
  cursor: pointer;
}


@media screen and (max-width: 767px) and (orientation: portrait) {
  .gallery-lightbox {
    margin-top: 5vw;
    margin-bottom: 10vh;
  }

  .gallery-lightbox div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .gallery-lightbox img {
    width: 92.5vw;
    height: auto;
    padding-bottom: 2vw;
  }

  .close-button {
    position: absolute;
    top: 6.6vw;
    right: 5.5vw;
    font-size: 9vw;
  }

  #lightbox img {
    width: 88vw;
  }

  .warden-of-the-asylum-title p {
    font-size: 2.5vw;
    line-height: 1.8;
    width: 85vw;
    margin: 5vh 0 0 0;
  }
}


/* DYSPHORIA */


.dysphoria-title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  animation: fadein 2s ease-in;
}

.dysphoria-title p {
  text-align: center;
  color: rgb(180, 180, 180);
  font-size: 1vw;
  line-height: 1.8;
  letter-spacing: 0.5px;
  font-weight: 300;
  font-family: "Mulish", sans-serif;
  width: 70vw;
  margin: 5vh 0 10vh 0;
}

.dysphoria-title strong {
  color: rgb(200, 200, 200);
}


.line-one-dysphoria img {
  max-width: 100%;
  height: 24.9vw;
  cursor: pointer;
}


@media screen and (max-width: 767px) and (orientation: portrait) {
  .gallery-lightbox {
    margin-top: 5vw;
    margin-bottom: 10vh;
  }

  .gallery-lightbox div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .gallery-lightbox img {
    width: 92.5vw;
    height: auto;
    padding-bottom: 2vw;
  }

  .close-button {
    position: absolute;
    top: 5vw;
    right: 6.5vw;
    font-size: 9vw;
  }

  #lightbox img {
    width: 88vw;
  }


  .dysphoria-title p {
    font-size: 2.7vw;
    line-height: 1.8;
    width: 85vw;
    margin: 5vh 0 0 0;
  }
}


/* LOVE ME LIKE YOU DON'T */


.love-me-like-you-dont-title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  animation: fadein 2s ease-in;
}

.love-me-like-you-dont-title p {
  text-align: center;
  color: rgb(180, 180, 180);
  font-size: 1vw;
  line-height: 1.8;
  letter-spacing: 0.5px;
  font-weight: 300;
  font-family: "Mulish", sans-serif;
  width: 70vw;
  margin: 5vh 0 10vh 0;
}

.love-me-like-you-dont strong {
  color: rgb(200, 200, 200);
}


.line-one-love-me-like-you-dont img {
  max-width: 100%;
  height: 24.9vw;
  cursor: pointer;
}


@media screen and (max-width: 767px) and (orientation: portrait) {
  .gallery-lightbox {
    margin-top: 5vw;
    margin-bottom: 10vh;
  }

  .gallery-lightbox div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .gallery-lightbox img {
    width: 92.5vw;
    height: auto;
    padding-bottom: 2vw;
  }

  .close-button {
    position: absolute;
    top: 5vw;
    right: 6.5vw;
    font-size: 9vw;
  }

  #lightbox img {
    width: 88vw;
  }


  .love-me-like-you-dont-title p {
    font-size: 2.7vw;
    line-height: 1.8;
    width: 85vw;
    margin: 5vh 0 0 0;
  }
}


/* ECHO'S MIRROR */


.echos-mirror-title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  animation: fadein 2s ease-in;
}

.echos-mirror-title p {
  text-align: center;
  color: rgb(180, 180, 180);
  font-size: 1vw;
  line-height: 1.8;
  letter-spacing: 0.5px;
  font-weight: 300;
  font-family: "Mulish", sans-serif;
  width: 70vw;
  margin: 5vh 0 10vh 0;
}

.echos-mirror-title strong {
  color: rgb(200, 200, 200);
}


.line-one-echos-mirror img {
  max-width: 100%;
  height: 24.9vw;
  cursor: pointer;
}


@media screen and (max-width: 767px) and (orientation: portrait) {
  .gallery-lightbox {
    margin-top: 5vw;
    margin-bottom: 10vh;
  }

  .gallery-lightbox div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .gallery-lightbox img {
    width: 92.5vw;
    height: auto;
    padding-bottom: 2vw;
  }

  .close-button {
    position: absolute;
    top: 5vw;
    right: 6.5vw;
    font-size: 9vw;
  }

  #lightbox img {
    width: 88vw;
  }


  .echos-mirror-title p {
    font-size: 2.7vw;
    line-height: 1.8;
    width: 85vw;
    margin: 5vh 0 0 0;
  }
}


/* BLEEDING SOUL */

.bleeding-soul-title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  animation: fadein 2s ease-in;
}

.bleeding-soul-title p {
  text-align: center;
  color: rgb(180, 180, 180);
  font-size: 1vw;
  line-height: 1.8;
  letter-spacing: 0.5px;
  font-weight: 300;
  font-family: "Mulish", sans-serif;
  width: 70vw;
  margin: 5vh 0 10vh 0;
}

.bleeding-soul-title strong {
  color: rgb(200, 200, 200);
}


.line-one-bleeding-soul img {
  max-width: 100%;
  height: 24.9vw;
  cursor: pointer;
}


@media screen and (max-width: 767px) and (orientation: portrait) {
  .gallery-lightbox {
    margin-top: 5vw;
    margin-bottom: 10vh;
  }

  .gallery-lightbox div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .gallery-lightbox img {
    width: 92.5vw;
    height: auto;
    padding-bottom: 2vw;
  }

  .close-button {
    position: absolute;
    top: 6.6vw;
    right: 5.5vw;
    font-size: 9vw;
  }

  #lightbox img {
    width: 88vw;
  }

  .bleeding-soul-title p {
    font-size: 2.7vw;
    line-height: 1.8;
    width: 85vw;
    margin: 5vh 0 0 0;
  }
}

/* THE CREATIVE INDUSTRY */

.the-creative-industry-title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  animation: fadein 2s ease-in;
}

.the-creative-industry-title p {
  text-align: center;
  color: rgb(180, 180, 180);
  font-size: 1vw;
  line-height: 1.8;
  letter-spacing: 0.5px;
  font-weight: 300;
  font-family: "Mulish", sans-serif;
  width: 70vw;
  margin: 5vh 0 10vh 0;
}

.the-creative-industry-title strong {
  color: rgb(200, 200, 200);
}


.line-one-the-creative-industry img {
  max-width: 100%;
  height: 24.9vw;
  cursor: pointer;
}


@media screen and (max-width: 767px) and (orientation: portrait) {
  .gallery-lightbox {
    margin-top: 5vw;
    margin-bottom: 5vh;
  }

  .gallery-lightbox div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .gallery-lightbox img {
    width: 92.5vw;
    height: auto;
    padding-bottom: 2vw;
  }

  .close-button {
    position: absolute;
    top: 6.6vw;
    right: 5.5vw;
    font-size: 9vw;
  }

  #lightbox img {
    width: 88vw;
  }


  .the-creative-industry-title p {
    font-size: 2.5vw;
    line-height: 1.8;
    width: 90vw;
    margin: 5vh 0 0 0;
  }
}



/* HIS BED */

.his-bed-title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  animation: fadein 2s ease-in;
}

.his-bed-title p {
  text-align: center;
  color: rgb(180, 180, 180);
  font-size: 1vw;
  line-height: 1.8;
  letter-spacing: 0.5px;
  font-weight: 300;
  font-family: "Mulish", sans-serif;
  width: 70vw;
  margin: 5vh 0 10vh 0;
}

.his-bed-title strong {
  color: rgb(200, 200, 200);
}


.line-one-his-bed img {
  max-width: 100%;
  height: 24.9vw;
  cursor: pointer;
}


@media screen and (max-width: 767px) and (orientation: portrait) {
  .gallery-lightbox {
    margin-top: 5vw;
    margin-bottom: 10vh;
  }

  .gallery-lightbox div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .gallery-lightbox img {
    width: 92.5vw;
    height: auto;
    padding-bottom: 2vw;
  }

  .close-button {
    position: absolute;
    top: 6.6vw;
    right: 5.5vw;
    font-size: 9vw;
  }

  #lightbox img {
    width: 88vw;
  }

  .his-bed-title p {
    font-size: 2.7vw;
    line-height: 1.8;
    width: 85vw;
    margin: 5vh 0 0 0;
  }
}



/* UNARTISTIC */

.Unartistic-title {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  animation: fadein 2s ease-in;
}

.Unartistic-title p {
  text-align: center;
  color: rgb(180, 180, 180);
  font-size: 1vw;
  line-height: 1.8;
  letter-spacing: 0.5px;
  font-weight: 300;
  font-family: "Mulish", sans-serif;
  width: 70vw;
  margin: 5vh 0 10vh 0;
}

.Unartistic-title strong {
  color: rgb(200, 200, 200);
}

#lightbox-title {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  font-family: "Mulish", sans-serif;
  font-weight: 300;
  font-size: 1vw;
  letter-spacing: 1px;
  color: rgb(248, 248, 248);
  text-align: center;
  padding-top: 1vw;
  padding-bottom: 3vw;
}

#lightbox-title.visible {
  opacity: 1;
}

.title {
  opacity: 0;
  transition: opacity 0.6s ease-in;
}

.title.visible {
  opacity: 1;
}

.gallery-lightbox div {
  text-align: center;
  justify-content: center;
  display: flex;
}

.line-one-Unartistic div {
  flex-direction: column;
}

.line-two-Unartistic div {
  flex-direction: column;
}

.line-three-Unartistic div {
  flex-direction: column;
}

.line-four-Unartistic div {
  flex-direction: column;
}

.line-one-Unartistic p,
.line-two-Unartistic p,
.line-three-Unartistic p,
.line-four-Unartistic p {
  flex-direction: column;
  font-family: "Mulish", sans-serif;
  font-weight: 300;
  font-size: 0.8vw;
  letter-spacing: 1px;
  color: rgb(203, 203, 203);
  text-align: center;
  padding-top: 1vw;
  padding-bottom: 3vw;
}


.line-one-Unartistic img {
  max-width: 100%;
  height: 24.5vw;
  cursor: pointer;
}

.line-two-Unartistic img {
  max-width: 100%;
  height: 20.35vw;
  cursor: pointer;
}

.line-three-Unartistic img {
  max-width: 100%;
  height: 23.6vw;
  cursor: pointer;
}

.line-four-Unartistic img {
  max-width: 100%;
  height: 32.4vw;
  cursor: pointer;
}

@media screen and (max-width: 767px) and (orientation: portrait) {
  .gallery-lightbox {
    margin-top: 5vh;
    margin-bottom: 10vh;
  }

  .gallery-lightbox div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .gallery-lightbox img {
    width: 92.5vw;
    height: auto;
    padding-bottom: 2vw;
  }

  .close-button {
    position: absolute;
    top: 6.6vw;
    right: 5.5vw;
    font-size: 9vw;
  }

  #lightbox img {
    width: 88vw;
  }

  .Unartistic-title p {
    font-size: 2.7vw;
    line-height: 1.8;
    width: 85vw;
    margin: 5vh 0 0 0;
  }

  .line-one-Unartistic p,
  .line-two-Unartistic p,
  .line-three-Unartistic p,
  .line-four-Unartistic p {
    font-size: 3vw;
    padding-top: 2vh;
    padding-bottom: 10vh;
  }


  #lightbox-title {
    padding-top: 3vh;
    font-size: 3vw;
  }
}

@media screen and (width: 768px) {
  #lightbox-title {
    font-size: 2vw;
  }
}


/* FILM */

#film {
  margin: 2vw 0 0 0;
  animation: fadein 2s ease-in;
  display: flex;
  flex-direction: column;
}

#film div {
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.video-container iframe {
  width: 50vw;
  height: 30vw;
}

.video-container {
  margin: 20px auto;
}

.film-title {
  margin: 1vw 0 1vw 0;
  font-family: "Mulish", sans-serif;
  font-weight: 300;
  font-size: 1.2vw;
  letter-spacing: 0.2vw;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  text-align: center;
}

.film-summary {
  margin-bottom: 7vw;
  width: 85vw;
  font-family: "Mulish", sans-serif;
  font-weight: 300;
  font-size: 1vw;
  letter-spacing: 1px;
  color: rgb(203, 203, 203);
  text-align: center;
}

@media only screen and (max-width: 767px) {
  #film {
    margin-top: -8vw;
  }

  .video-container iframe {
    width: 74vw;
    height: 40vw;
    margin-top: 8vw;
  }

  .film-title {
    margin: -1vw 0 3vw 0;
    font-size: 3vw;
    letter-spacing: 0.3vw;
    width: 90vw;
  }

  .film-summary {
    margin-bottom: 5vw;
    width: 90vw;
    font-size: 3vw;
    letter-spacing: 0.5px;
    line-height: 1.6;
  }
}

@media only screen and (min-device-width: 651px) and (max-device-width: 1023px) {
  #film {
    margin-top: -3vw;
  }

  .video-container iframe {
    width: 64vw;
    height: 30vw;
    margin-top: 2vw;
  }

  .film-title {
    margin: 1vw 0 1vw 0;
    font-size: 1.7vw;
    letter-spacing: 0.2vw;
  }

  .film-summary {
    margin-bottom: 4vw;
    width: 90vw;
    font-size: 1.6vw;
    letter-spacing: 0.5px;
    line-height: 1.6;
  }
}

@media only screen and (min-device-width: 560px) and (max-device-width: 740px) {
  #film {
    margin-top: -8vw;
  }

  .video-container iframe {
    width: 64vw;
    height: 30vw;
    margin-top: 2vw;
  }

  .film-title {
    margin: -1vw 0 1vw 0;
    font-size: 1.9vw;
    letter-spacing: 0.2vw;
  }

  .film-summary {
    margin-bottom: 4vw;
    width: 90vw;
    font-size: 1.6vw;
    letter-spacing: 0.5px;
    line-height: 1.6;
  }
}

@media only screen and (device-width: 768px) {
  #film {
    margin-top: 0vw;
  }

  .video-container iframe {
    width: 62vw;
    height: 30vw;
    margin-top: 2vw;
  }

  .film-title {
    margin: 1vw 0 1vw 0;
    font-size: 1.9vw;
    letter-spacing: 0.2vw;
  }

  .film-summary {
    margin-bottom: 4vw;
    width: 90vw;
    font-size: 1.6vw;
    letter-spacing: 0.5px;
    line-height: 1.6;
  }
}

@media only screen and (device-width: 1024px) {
  #film {
    margin-top: -15vw;
  }

  .video-container iframe {
    width: 64vw;
    height: 30vw;
    margin-top: 2vw;
  }

  .film-title {
    margin: 1vw 0 1vw 0;
    font-size: 1.9vw;
    letter-spacing: 0.2vw;
  }

  .film-summary {
    margin-bottom: 4vw;
    width: 90vw;
    font-size: 1.6vw;
    letter-spacing: 0.5px;
    line-height: 1.6;
  }
}



/*ABOUT*/

#about {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6vw;
  justify-content: center;
  align-items: center;
  margin-bottom: 10vh;
  margin-top: 5vh;
}

#about img {
  height: auto;
  width: 30vw;
}

#about .bio-title {
  font-size: 1.3vw;
  font-family: "Mulish", sans-serif;
  font-weight: 300;
  letter-spacing: 1px;
  line-height: 1.4;
  color: rgb(239, 239, 239);
  margin-bottom: 3vw;
}

#about .bio {
  font-size: 1.1vw;
  font-family: "Mulish", sans-serif;
  font-weight: 300;
  letter-spacing: 0.5px;
  line-height: 1.7;
  width: 30vw;
  color: rgb(180, 180, 180);
}

#about .bio-statement {
  margin-bottom: 1vw;
}

.scroll {
  opacity: 0;
  transition: opacity 2.5s ease-in-out;
}

.scroll.visible {
  opacity: 1;
}

.scroll.instant {
  transition: none !important;
}

@media only screen and (max-width: 767px) and (orientation:portrait) {
  #about {
    margin-bottom: 7vh;
    margin-top: 5vh;
    gap: 0;
  }

  #about img {
    width: 89.55vw;
    height: auto;
    padding-bottom: 5vh;
    margin-top: 0;
  }

  #about .bio-title {
    font-size: 3.7vw;
    letter-spacing: 1.5px;
    padding-bottom: 3vh;
  }

  #about .bio {
    font-size: 3.4vw;
    width: 85vw;
    text-align: center;
    line-height: 1.6;
    letter-spacing: 0.5px;
  }

  #about .bio-statement {
    margin-bottom: 3vw;
  }
}

@media only screen and (min-device-width: 651px) and (max-device-width: 1023px) and (orientation:landscape) {
  #about {
    margin-top: 2vw;
    gap: 0 3.7vw;
  }

  #about img {
    width: 40.5vw;
    height: auto;
  }

  #about .bio-title {
    padding-top: 3vw;
    font-size: 1.9vw;
    letter-spacing: 1px;
    width: 330px;
    padding-top: 0;
    margin-top: 0;
  }

  #about .bio {
    font-size: 1.4vw;
    line-height: 2;
    width: 42vw;
    width: 40%;
    padding-top: 0;
  }
}

@media only screen and (device-width: 768px) {
  #about {
    margin-top: 20vw;
    gap: 0 20px;
    margin-bottom: 0;
  }

  #about img {
    width: 43vw;
    height: auto;
  }

  #about .bio .title {
    font-size: 3vw;
    letter-spacing: 1px;
    text-align: left;
  }

  #about .bio {
    font-size: 1.5vw;
    width: 40vw;
  }
}

@media only screen and (device-width: 1024px) {
  #about {
    margin-top: 2vw;
    gap: 0 20px;
    margin-bottom: 0;
  }

  #about img {
    width: 35vw;
    height: auto;
  }

  #about .bio .title {
    font-size: 3vw;
    letter-spacing: 1px;
    text-align: left;
  }

  #about .bio {
    font-size: 1.2vw;
    width: 35vw;
  }
}

@media only screen and (device-height: 568px) {
  #about {
    padding-top: 30px;
  }
}


/* CONTACT */

#contact {
  margin: 1vw 0 0 0;
  justify-content: center;
  font-family: "Mulish", sans-serif;
}

#contact-statement p {
  text-align: center;
  color: rgb(180, 180, 180);
  font-size: 1.1vw;
  line-height: 2;
  letter-spacing: 0.5px;
  font-weight: 300;
}

#contact-info {
  margin-top: 12vh;
  display: block;
  align-items: center;
  justify-content: center;
  text-align: center;
}


#contact-info p {
  color: rgb(220, 220, 220);
  font-weight: 400;
  font-size: 1.3vw;
  letter-spacing: 2px;
  padding-bottom: 0.8vw;
}

#contact-info div a {
  color: rgb(180, 180, 180);
  font-weight: 300;
  font-size: 1.25vw;
  transition: 0.2s ease-in-out;
  letter-spacing: 2px;
}

#contact-info .phone {
  margin-top: 3vw;
}

#contact-statement p a {
  transition: 0.2s ease-in-out;
}

#contact-info a:hover {
  color: rgb(255, 255, 255);
}

#icons {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8vw;
  padding-bottom: 5vw;
}

#icons a {
  transition: 0.2s ease-in-out;
  filter: opacity(0.7);
}

#icons a:hover {
  opacity: 0.5;
}

#icons a img {
  margin: 0 2vw;
  width: auto;
  height: 1.8vw;
}

#icons a img:hover {
  color: grey;
}

#icons a {
  padding: 0 10px;
}


@media only screen and (max-width: 767px) and (orientation:portrait) {
  #contact {
    text-align: center;
  }

  #contact-statement {
    margin-top: 6vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5vh 0;
  }

  #contact-statement p {
    font-size: 3.4vw;
    line-height: 1.6;
    letter-spacing: 0.5px;
    width: 85vw;
  }

  #contact-info {
    margin-top: 15vh;
  }

  #contact-info div {
    gap: 5vh 0;
  }

  #contact-info p {
    font-size: 4vw;
    padding-bottom: 1.5vw;
  }

  #contact-info .phone {
    margin-top: 4.2vh;
  }

  #contact-info div a {
    font-size: 3.7vw;
    letter-spacing: 1.5px;
  }

  #icons {
    margin-top: 16.5vh;
    padding-bottom: 4vh;
  }

  #icons a img {
    margin: 0 4vw;
    width: auto;
    height: 4.8vw;
  }
}

@media only screen and (min-device-width: 568px) and (max-device-width: 740px) {
  #contact {
    margin-top: -2vw;
  }

  #contact-statement {
    gap: 0;
  }

  #contact-statement p {
    font-size: 2vw;
    line-height: 1.6;
    letter-spacing: 0.5px;
    padding-bottom: 5vh;
  }

  #contact-info {
    margin-top: 10vh;
  }

  #contact-info p {
    padding-top: 1vw;
    font-size: 2.5vw;
    padding-bottom: 0.1vw;
  }

  #contact-info div a {
    font-size: 2.3vw;
    letter-spacing: 1px;
  }

  #icons {
    margin-top: 20vh;
    margin-bottom: 5vw;
  }

  #icons a img {
    margin: 0 12px;
    height: 3vw;
    width: auto;
  }
}

@media only screen and (device-width: 768px) {
  #contact-statement {
    margin-top: 20vw;
  }

  #contact-statement p {
    font-size: 2.2vw;
    line-height: 1.6;
    margin: 5vw 7vw;
    letter-spacing: 0.5px;
  }

  #contact-info {
    margin-top: 15vw;
  }

  #contact-info p {
    font-size: 3vw;
    padding-bottom: 1vw;
  }

  #contact-info div a {
    font-size: 2.5vw;
    letter-spacing: 1px;
  }

  #contact-info div .phone {
    padding-top: 2vw;
  }

  #icons {
    margin-top: 20vw;
  }

  #icons a img {
    margin: 0 30px;
    width: auto;
    height: 3.5vw;
  }
}


@media only screen and (min-device-width: 769px) and (max-device-width: 1023px) {
  #contact-statement {
    margin-top: 0vw;
  }

  #contact-statement p {
    font-size: 1.8vw;
    margin: 3vw 12vw;
    letter-spacing: 0.5px;
    line-height: 1.7;
  }

  #contact-info p {
    font-size: 2.2vw;
  }

  #contact-info div a {
    font-size: 2vw;
  }

  #icons {
    margin-top: 10vw;
    margin-bottom: 0;
  }

  #icons a img {
    height: 2.8vw;
    width: auto;
    margin: 0 3vw;
  }
}

@media only screen and (device-width: 1024px) {
  #contact-statement {
    margin-top: 5vw;
    margin-bottom: 0;
  }

  #contact-statement p {
    font-size: 1.3vw;
    line-height: 1.6;
    margin: 2vw 10vw;
    letter-spacing: 0.5px;
  }

  #contact-info {
    margin-top: 6.5vw;
  }

  #contact-info p {
    font-size: 2vw;
    padding-bottom: 1vw;
  }

  #contact-info div a {
    font-size: 1.7vw;
    letter-spacing: 1px;
  }

  #contact-info div .phone {
    padding-top: 0;
  }

  #icons {
    margin-top: 10vw;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  #icons a img {
    margin: 0 30px;
    width: auto;
    height: 2.3vw;
  }
}




/* COOKIE */

#cookie {
  margin: 5vh 5.5vw 10vh 5.5vw;
  font-family: "Mulish", sans-serif;
}

#cookie h1 {
  font-size: 1.5vw;
  margin-bottom: 8vw;
  font-family: "Mulish", sans-serif;
  font-weight: 300;
  letter-spacing: 1.2vw;
  color: white;
  text-align: center;
  text-transform: uppercase;
}

#cookie h2 {
  font-size: 1.4vw;
  margin-top: 3vw;
  margin-bottom: 1vw;
  color: white;
  font-weight: 300;
}

#cookie p {
  font-size: 1.2vw;
  line-height: 1.5;
  margin-bottom: 1.5vw;
  font-family: "Mulish", sans-serif;
  color: rgb(180, 180, 180);
  font-weight: 200;
}

#cookie .date {
  font-size: 1.3vw;
  margin-bottom: 0.5vw;
  font-family: "Mulish", sans-serif;
  color: rgb(255, 255, 255);
  font-weight: 200;
}

#cookie .list {
  font-size: 1.3vw;
  margin-bottom: 0.5vw;
  font-family: "Mulish", sans-serif;
  color: rgb(180, 180, 180);
  font-weight: 200;
}

#cookie a {
  color: rgb(180, 180, 180);
}

#cookie a:hover {
  color: rgb(255, 255, 255);
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
  #cookie {
    margin: 0 5.1vw;
  }

  #cookie h1 {
    font-size: 4vw;
    margin-top: 8vh;
    margin-bottom: 17vw;
    letter-spacing: 1.5vw;
  }

  #cookie h2 {
    font-size: 4.2vw;
    margin-top: 35px;
    margin-bottom: 10px;
  }

  #cookie p {
    font-size: 3.2vw;
    line-height: 1.5;
  }

  #cookie .list {
    font-size: 3.2vw;
    margin-bottom: 0.5vw;
  }

  #cookie .date {
    font-size: 3.2vw;
    margin-top: 5vw;
    margin-bottom: 7vh;
  }
}

@media only screen and (min-device-width: 769px) and (max-device-width: 1023px) {
  #cookie {
    margin: 0 4vw;
  }

  #cookie h1 {
    font-size: 2.8vw;
    margin-top: 3vw;
    margin-bottom: 5vw;
    letter-spacing: 1.5vw;
  }

  #cookie h2 {
    font-size: 2.2vw;
    margin-top: 35px;
    margin-bottom: 15px;
  }

  #cookie p {
    font-size: 1.8vw;
    line-height: 1.5;
  }

  #cookie .list {
    font-size: 1.8vw;
    margin-bottom: 0.5vw;
  }

  #cookie .date {
    font-size: 1.8vw;
    margin-top: 5vw;
  }
}

@media only screen and (min-device-width: 560px) and (max-device-width: 740px) {
  #cookie {
    margin: 0 4vw;
  }

  #cookie h1 {
    font-size: 2.5vw;
    margin-top: -5vw;
    margin-bottom: 5vw;
    letter-spacing: 1.5vw;
  }

  #cookie h2 {
    font-size: 2.2vw;
    margin-top: 35px;
    margin-bottom: 15px;
  }

  #cookie p {
    font-size: 1.8vw;
    line-height: 1.5;
  }

  #cookie .list {
    font-size: 1.8vw;
    margin-bottom: 0.5vw;
  }

  #cookie .date {
    font-size: 1.8vw;
    margin-top: 5vw;
  }
}

@media only screen and (width: 768px) {
  #cookie {
    margin: 5vw 3.5vw;
  }

  #cookie h1 {
    font-size: 2.5vw;
    margin-bottom: 4vw;
    letter-spacing: 1vw;
  }

  #cookie h2 {
    font-size: 3vw;
    margin-top: 35px;
    margin-bottom: 15px;
  }

  #cookie h3 {
    font-size: 4.5vw;
    line-height: 1.4;
  }

  #cookie .list {
    font-size: 2vw;
    line-height: 1.5;
  }

  #cookie p {
    font-size: 2vw;
    line-height: 1.5;
  }

  #cookie .date {
    font-size: 2vw;
    padding-top: 3vw;
  }
}

@media only screen and (width: 1024px) {
  #cookie {
    margin: 0vw 3.5vw;
  }

  #cookie h1 {
    margin-top: -15vw;
  }

}

/* PRIVACY */

#Privacy {
  margin: 5vh 5.5vw 10vh 5.5vw;
  font-family: "Mulish", sans-serif;
}

#Privacy h1 {
  font-size: 1.5vw;
  margin-bottom: 8vw;
  font-family: "Mulish", sans-serif;
  font-weight: 300;
  letter-spacing: 1.2vw;
  color: white;
  text-align: center;
  text-transform: uppercase;
}

#Privacy h2 {
  font-size: 1.4vw;
  margin-top: 3vw;
  margin-bottom: 1vw;
  color: white;
  font-weight: 300;
}

#Privacy p {
  font-size: 1.2vw;
  line-height: 1.5;
  margin-bottom: 1.5vw;
  font-family: "Mulish", sans-serif;
  color: rgb(180, 180, 180);
  font-weight: 200;
}

#Privacy h3 {
  font-size: 1.5vw;
  margin-top: 2vw;
  color: white;
  font-family: "Mulish", sans-serif;
  font-weight: 300;
}

#Privacy .date {
  font-size: 1.3vw;
  margin-bottom: 0.5vw;
  font-family: "Mulish", sans-serif;
  color: rgb(255, 255, 255);
  font-weight: 200;
}

@media only screen and (max-width: 767px) and (orientation:portrait) {
  #Privacy {
    margin: 0 5vw;
  }

  #Privacy h1 {
    font-size: 4vw;
    margin-top: 8vw;
    margin-bottom: 17vw;
    letter-spacing: 1.5vw;
    text-transform: uppercase;
  }

  #Privacy h2 {
    font-size: 4.2vw;
    margin-top: 20px;
    margin-bottom: 10px;
  }

  #Privacy h3 {
    font-size: 4.5vw;
    margin-top: 7vw;
    margin-bottom: 0;
  }

  #Privacy p {
    font-size: 3.2vw;
    line-height: 1.5;
  }

  #Privacy .list {
    font-size: 3.2vw;
    margin-bottom: 0.5vw;
  }

  #Privacy .date {
    font-size: 3.2vw;
    margin-top: 5vw;
    margin-bottom: 7vw;
  }
}

@media only screen and (min-device-width: 560px) and (max-device-width: 740px) {
  #Privacy {
    margin: 0 4vw;
  }

  #Privacy h1 {
    font-size: 2.5vw;
    margin-top: -5vw;
    margin-bottom: 5vw;
    letter-spacing: 1.5vw;
  }

  #Privacy h2 {
    font-size: 2.2vw;
    margin-top: 20px;
    margin-bottom: 5px;
  }

  #Privacy h3 {
    font-size: 2.4vw;
    margin-top: 3vw;
    margin-bottom: 0;
  }

  #Privacy p {
    font-size: 1.8vw;
    line-height: 1.5;
  }

  #Privacy .list {
    font-size: 1.8vw;
    margin-bottom: 0.5vw;
  }

  #Privacy .date {
    font-size: 1.8vw;
    margin-top: 5vw;
  }
}

@media only screen and (min-device-width: 769px) and (max-device-width: 1023px) {
  #Privacy {
    margin: 0 4vw;
  }

  #Privacy h1 {
    font-size: 2.6vw;
    margin-top: 3vw;
    margin-bottom: 5vw;
    letter-spacing: 1.5vw;
  }

  #Privacy h2 {
    font-size: 2.2vw;
    margin-top: 35px;
    margin-bottom: 15px;
  }

  #Privacy h3 {
    font-size: 2.4vw;
    margin-top: 3vw;
    margin-bottom: 0;
  }

  #Privacy p {
    font-size: 1.8vw;
    line-height: 1.5;
  }

  #Privacy .list {
    font-size: 1.8vw;
    margin-bottom: 0.5vw;
  }

  #Privacy .date {
    font-size: 1.8vw;
    margin-top: 5vw;
  }
}

@media only screen and (width: 768px) {
  #Privacy {
    margin: 5vw 3.5vw;
  }

  #Privacy h1 {
    font-size: 2.5vw;
    margin-bottom: 4vw;
    letter-spacing: 1vw;
  }

  #Privacy h2 {
    font-size: 2.8vw;
    margin-top: 35px;
    margin-bottom: 15px;
  }

  #Privacy h3 {
    font-size: 3vw;
    line-height: 1.4;
  }

  #Privacy .list {
    font-size: 2vw;
    line-height: 1.5;
  }

  #Privacy p {
    font-size: 2vw;
    line-height: 1.5;
  }

  #Privacy .date {
    font-size: 2vw;
    padding-top: 3vw;
  }
}

@media only screen and (width: 1024px) {
  #Privacy {
    margin: 0vw 3.5vw;
  }

  #Privacy h1 {
    margin-top: -15vw;
  }

}


/* THE END */