@font-face {
  font-family: "eurostile";
  src: url("R41Eurostile-Bold.otf");
}
/* 
body{
    position: absolute;
    top: 0;     
} */

html, 
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #fff;
  /* overflow: hidden; */
  font-family: "eurostile";
  transition: 1s ease;
}

* {
  font-size: 2.1rem;
  line-height: 1.1;
}

*::selection {
  color: purple;
}

.get-back {
  text-decoration: none;
  z-index: 999;
}

#back {
  cursor: pointer;
  mix-blend-mode: difference;
  color: white;
  margin-bottom: 70px;
}

#back a {
  z-index: 999;
  text-decoration: none;
  color: unset !important;
  margin: 0;
  width: fit-content;
}

li,
ul {
  width: fit-content;
  padding: unset;
}
ul {
  max-width: 40%;
}

#buffer {
  mix-blend-mode: difference;
  color: white;
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
}

#buffer div {
  display: flex;
  align-items: baseline;
  justify-content: space-evenly;
  width: 7em;
  gap: 5%;
}

#buffer div img {
  box-shadow: unset !important;
  -webkit-box-shadow: unset !important;
  -moz-box-shadow: unset !important;
}

.dot {
  width: 100%;
}

.punto {
  width: 56.7%;
}

.smaller {
  width: min-content;
}
.smaller * {
  font-size: 18px;
}
.flex {
  display: flex;
  justify-content: space-around;
  width: inherit;
}

.centrino {
  height: 100vh;
  display: flex;
  align-items: center;
}



.categories{
    cursor: pointer;
}

.header {

  z-index: 10;
  position: relative;
  z-index: 1001;
  overflow-y: hidden;
    /* porcata calcolata */
    margin: 19px 30px; 
  width: fit-content;
  height: auto;
  padding-bottom: 10px;
}

.header p {
  padding-bottom: 15px;
}

/* .infos{
    position: relative;
    width: 98%; left: 1%; top: -15%
} */


.about {
  position: absolute;
  bottom: 0;
    /* porcata calcolata */
    margin: 20px 37px; 
  cursor: pointer;
  z-index: 999;
  text-decoration: none;
}

figcaption {
  font-size: 1.1rem;
}

#closeInfo,
.close {
  position: fixed;
  bottom: 5vh;
  width: 100%;
  display: flex;
  justify-content: center;
  left: 0;
  cursor: pointer;
}

#infoBox {
  display: none;
  width: 100%;
  height: 100vh;
  position: fixed;
  background: white;

  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 70%,
    rgba(255, 255, 255, 0) 100%
  );
}

.header p {
  /* width: 75%; */
  /* padding: 0 1rem; */
  margin: unset;
}

.swiper {
  width: 98%;
  height: 100%;
}

.swiper-slide {
  width: 35%;
}

.swiper-wrapper {
  display: flex;
  align-items: center;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  /* width: 90%; */
  overflow: hidden;
  box-sizing: border-box;
  overflow: visible;
  transition: transform 0.3s ease;

  backface-visibility: hidden;
  transform-origin: center center;
  /* perspective: 800px; */
}

.swiper-slide a {
  width: auto;
  height: auto;
}

video,
img {
  box-shadow: 0px -2px 13px 0px rgba(0, 0, 0, 0.55);
  -webkit-box-shadow: 0px -2px 13px 0px rgba(0, 0, 0, 0.55);
  -moz-box-shadow: 0px -2px 13px 0px rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.swiper-slide img,
.swiper-slide video {
  box-shadow: unset;
  -webkit-box-shadow: unset;
  -moz-box-shadow: unset;
  cursor: unset;
}

video {
  pointer-events: none;
}

.swiper-slide img,
.swiper-slide video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.invert {
  color: white !important;
  mix-blend-mode: difference;
}

.project-title {
  display: none;
  position: absolute;
  color: white;
  /* text-shadow: 0 0 10px rgba(0,0,0,0.5); */
  mix-blend-mode: difference;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
  text-align: center;
}

.gallery-view {
  /* margin: 70px 0; */
  height: fit-content;
}

.gallery-swiper {
  flex: 1;
}

/* .gallery-title {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-around;
    position: fixed;
    z-index: 100;
  bottom: .5rem;
} */

.title-project {
width: 34%;
text-align: center;
z-index: 998;
margin: 0 33%;
margin: 17px 33%;
position: absolute;
top: 0; 
}

#info-project {
  font-size: 1rem;
  cursor: pointer;
}

#infoProjectBox p {
  width: 88%;
  margin-left: 6%;
  padding-bottom: 2rem;
}

.mobile {
  display: none;
}

@media only screen and (max-width: 992px) {


  .desktop {
    display: none;
  }
  .mobile {
    display: block;
  }

  .swiper {
    width: 100%;
    height: 100%;
    top: 0;
    z-index: -1;
    position: unset;
  }

  * {
    font-size: 1.3rem;
  }


  .title-project {
    width: 100%;
    margin: 35px 0;
    text-align: center;
    position: unset;
}

.gallery-view {
  margin: unset;
}

  .swiper-slide {
    width: calc(100% - 35px);
  }

  .swiper-slide a {
    height: max-content;
  }

  #buffer div {
    width: 80%;
  }

  .infos {
    top: -10vh;
  }

  .header{ 
    margin: 15px 17px;
  }

  .about {
    margin: 15px 17.5px;
  }


}