:root {
  /* scrollbar-width: none; */
  --viewWidth: 1200px;
  --windowHeight: 100vh;
  --frameSize: 15px;
}
::-webkit-scrollbar {
    /* display: none; */
}
body, html {
  margin: 0;
  padding: 0;

  font-size: 16px;

  user-select: none;
  overflow: hidden;
}
.no-scroll {
  overflow: hidden !important;
}
.no-scroll-x {
  overflow-x: hidden;
}
.opa0 {
  opacity: 0 !important;
}

.background {
  width: 100vw;
  height: 100vh;
  height: var(--windowHeight);
  /* background: url('/private/bruse/img/bruse q7.jpg') center;
  background-size: auto 100vh;
  background-repeat: repeat-x; */
  background: #2f1f17 url('/img/bruse q7.jpg');
  background: #1c0b04;
  background: #35241e;
  background-position: center;
  background-repeat: repeat;
  background-size: auto 86vh;
  background-size: auto calc(var(--windowHeight));
  overflow: hidden;
  scroll-behavior: smooth;
  /* display: flex;
  justify-content: flex-start;*/
}
.background::before {
  /* content: ' '; */
  position: absolute;
  background: url('https://images.unsplash.com/photo-1506689205310-0a29c388691c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80');
  background-size: auto;
  height: var(--windowHeight);
  width: 100vw;
  background-size: auto var(--windowHeight);
  filter: hue-rotate(150deg);
  opacity: 0.6;
}
.vert-strip {
  display: none;
  height: 2rem;
  position: fixed;
  width: 200vw;
  background: darkgoldenrod;
  opacity: 0.67;
  transform: translateX(-18vw) rotate(90deg);
  mix-blend-mode: hard-light;
}

.horiz-cont {
  transform: translateX(calc(100vw)) rotate(90deg);
  transform: translateX(calc(-100vh)) rotate(-90deg); /*left to right*/
  transform: translateX(calc(-1 * var(--windowHeight))) rotate(-90deg);
  /* overflow-x: hidden; */
  overflow-y: auto;
  height: 100vw;
  display: grid;
  grid-template-rows: min(60vw, 850px) repeat(var(--nChildren), var(--viewWidth));
  grid-template-rows: 70vw repeat(var(--nChildren), var(--viewWidth));
  transform-origin: top left;
  transform-origin: top right; /*left to right*/
  width: 100vh;
  width: var(--windowHeight);
  /*justify-content: end;*/ /*off for left to right*/
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.horiz-cont::-webkit-scrollbar {
  display: none;
}
.horiz-cont.trackpad {
  scrollbar-width: auto;
}
.horiz-cont.trackpad::-webkit-scrollbar {
  display: block !important;
  background-color: #664f47;
  width: 0.75rem;
}
.horiz-cont.trackpad::-webkit-scrollbar-thumb {
  background: rgb(166 57 32 / 80%);
}
.horiz-elem {
  transform: translateY(calc(-100vh)) rotate(-90deg);
  transform: translateY(calc(-100vh)) rotate(90deg); /*left to right*/
  transform: translateY(calc(-1 * var(--windowHeight))) rotate(90deg);
  width: var(--viewWidth);
  height: 100vh;
  height: var(--windowHeight);
  transform-origin: bottom right;
  transform-origin: bottom left; /*left to right*/
  display: flex;
  justify-content: center;
  align-items: center;
}
.horiz-elem:first-child {
  width: min(70vw, 850px);
  width: 65vw;
}

.background .title, .background .title-top, .background .title-bottom {
  /* color: #6d2a1d; */
  /* color: #5b8db6; */
  color: #efeee9;
  font-family: 'montserrat alternates';
  font-size: 2.8rem;
  font-size: min(9vh, min(50px, max(9vw, 35px)));
  font-size: min(calc(0.09 * var(--windowHeight)), min(50px, max(9vw, 35px)));
  line-height: 1;
  font-weight: 300;
  font-style: italic;
  background-color: rgba(250, 10, 80, 0.25);
  background-color: rgba(210, 82, 52, 0.25);
  background-color: rgba(151, 104, 93, 0.13);
  line-height: 100%;
  width: 100vw;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.background .title span, .background .title-top span, .background .title-bottom span {
  max-width: min(70vw, 850px);
  max-width: 65vw;
  display: inline-block;
  padding: 0.7rem;
  box-sizing: border-box;
}
.stripe.title {
  transform: translateY(-50%);
}
.stripe.title span, .stripe.title-bottom.bottom span, .stripe.title-bottom span, .stripe.title-top span {
  opacity: 0;
}
.menu .title {
  background-color: transparent !important;
}
.menu .title, .menu .title-top, .menu .title-bottom {
  width: 65vw;
  left: 0;
}
.menu .title-bottom.bottom {
  transform: translateY(150%);
  background-color: rgba(10, 250, 180, 0.25);
  text-align: left;
}
.menu .title-bottom {
  transform: translateY(50%);
  background-color: rgba(10, 200, 250, 0.25);
  background-color: rgba(60, 211, 251, 0.25);
  text-align: right;
}
.menu .title-top.top {
  transform: translateY(-250%);
  background-color: rgba(210, 242, 72, 0.25);
  text-align: left;
}
.menu .title-top {
  transform: translateY(-150%);
  background-color: rgba(250, 180, 10, 0.25);
  background-color: rgba(251, 195, 60, 0.25);
  text-align: right;
}

#index, #rotoli {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  height: var(--windowHeight);
  width: 100vw;
  visibility: hidden;
  transform: translateY(-100%);
  background-color: rgba(250, 180, 10, 0.75);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 1s ease-in-out, visibility 1s linear 1.1s;
  z-index: 3;
  color: white;
}
#index.show, #rotoli.show {
  visibility: visible;
  transform: translateY(0%);
  transition: all 1s ease-in-out;
}
.index-x, .rotoli-x, .rotoli-img-x, .about-x, .about-cont-x, .privacy-x {
  position: fixed;
  top: 0;
  left: 0;
  font-family: 'montserrat alternates';
  font-size: 2.2rem;
  font-size: min(calc(0.09 * var(--windowHeight)), min(50px, max(9vw, 35px)));
  font-size: min(calc(0.082 * var(--windowHeight)), min(36px, max(8.2vw, 28px)));
  z-index: 3;
  opacity: 1;
  height: 15vw;
  width: 15vw;
  text-align: center;
  line-height: 15vw;
  transition: all 0.35s ease-out 0.1s;
}
.index-title, .rotoli-title, .about-title {
  font-family: 'montserrat alternates';
  font-size: 2.2rem;
  font-size: min(9vh, min(50px, max(9vw, 35px)));
  font-size: min(calc(0.09 * var(--windowHeight)), min(50px, max(9vw, 35px)));
  font-weight: 400;
  text-align: center;
  transform-origin: left top;
  left: 0;
  width: 100vh;
  width: var(--windowHeight);
  position: fixed;
  transform: translateY(100vh) rotate(-90deg);
  transform: translateY(var(--windowHeight)) rotate(-90deg) translateX(0);
  height: 15vw;
  line-height: 15vw;
}
.index-els, .rotoli-els, .about-els {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1rem 0;
  height: 100vh;
  height: var(--windowHeight);
  width: 85vw;
  right: 0;
  position: absolute;
  box-sizing: border-box;
  transform: translateX(0);
}
.index-el, .rotoli-el, .about-el {
  font-family: 'fira sans';
  font-weight: 200;
  font-size: 1.3rem;
  font-size: min(7vh, min(32px, max(7vw, 24px)));
  font-size: min(calc(0.036 * var(--windowHeight)), min(32px, max(6vw, 24px)));
  padding: 0.8rem 0;
  transition: all 0.35s ease-out 0.1s;
  transform-origin: left center;
}
.index-el:active, .index-el:hover, .index-x:active, .index-x:hover,
.rotoli-el:active, .rotoli-el:hover, .rotoli-x:active, .rotoli-x:hover, .about-x:active, .about-x:hover, .about-el:active, .about-el:hover {
  transform: scale(114%);
  /* font-size: min(calc(0.06 * var(--windowHeight)), min(36px, max(8vw, 28px))); */
}
.index-el span, .rotoli-el span, .about-el span {
  text-align: right;
  width: 3vw;
  width: max(min(20vw, 100px), 5vw);
  display: inline-block;
  padding-right: 8px;
  padding-right: calc(min(7vh, min(32px, max(7vw, 24px))) / 3);
  padding-right: calc(min(calc(0.07 * var(--windowHeight)), min(32px, max(7vw, 24px))) / 3);
  box-sizing: border-box;
}

#rotoli {
  background-color: rgba(10, 250, 180, 0.835);
  transform: translateY(0) translateX(-100%);
  overflow-x: hidden;
  overflow-y: auto;
  min-width: 100vw;
  width: auto;
  display: flex;
  flex-direction: column;
}
#rotoli.show {
  transform: translateY(0) translateX(0);
}
.rotoli-els {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rotoli-el {
  font-weight: 300;
}

.rotoli-img {
  position: fixed;
  z-index: 4;
  top: 0;
  left: 0;
  overflow: auto;
  transform: translateX(calc(-1 * var(--windowHeight))) rotate(-90deg) translateY(100%);
  width: var(--windowHeight);
  height: 100vw;
  transform-origin: top right;
  top: calc(calc(var(--windowHeight) - min(1000px, calc(0.72 * var(--windowHeight)))) / -2);
  transition: all 1s ease-in-out, visibility 1s linear 1.1s;
  visibility: hidden;
}
.rotoli-img.show {
  visibility: visible;
  transform: translateX(calc(-1 * var(--windowHeight))) rotate(-90deg) translateY(0%);
  transition: all 1s ease-in-out;
}
.rotoli-img img {
  opacity: 1;
  transform: translateY(calc(-1 * calc(0.72 * var(--windowHeight)))) rotate(90deg);
  transform: translateY(calc(-1 * calc(min(1000px, calc(0.72 * var(--windowHeight)))))) rotate(90deg);
  height: var(--windowHeight);
  transform-origin: bottom left;
  max-width: none;
  max-height: calc(0.72 * var(--windowHeight));
  max-height: min(1000px, calc(0.72 * var(--windowHeight)));
  top: auto;
  margin-top: calc(15vw - calc(calc(var(--windowHeight) - calc(0.72 * var(--windowHeight))) / 2));
  margin-top: calc(15vw - calc(calc(var(--windowHeight) - min(1000px, calc(0.72 * var(--windowHeight)))) / 2));
  padding-right: 15vw;
  position: absolute;
}
.rotoli-img-x {
  height: calc(calc(var(--windowHeight) - calc(0.72 * var(--windowHeight))) / 2);
  width: calc(calc(var(--windowHeight) - mcalc(0.72 * var(--windowHeight))) / 2);
  line-height: calc(calc(var(--windowHeight) - calc(0.72 * var(--windowHeight))) / 2);
  transform: translateX(calc(0.72 * var(--windowHeight))) rotate(90deg);

  height: calc(calc(var(--windowHeight) - min(1000px, calc(0.72 * var(--windowHeight)))) / 2);
  width: calc(calc(var(--windowHeight) - min(1000px, calc(0.72 * var(--windowHeight)))) / 2);
  line-height: calc(calc(var(--windowHeight) - min(1000px, calc(0.72 * var(--windowHeight)))) / 2);
  transform: translateX(min(1000px, calc(0.72 * var(--windowHeight)))) rotate(90deg);
  color: white;
  position: sticky;
}

#contact, #privacy {
  position: fixed;
  top: 0;
  left: 0;
  height: var(--windowHeight);
  width: 100vw;
  visibility: hidden;
  transform: translateY(100%);
  background-color: rgba(177, 206, 53, 0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 1s ease-in-out, visibility 1s linear 1.1s;
  z-index: 3;
  color: white;
  padding: 2rem 0;
  box-sizing: border-box;
}
#contact.show, #privacy.show {
  visibility: visible;
  transform: translateY(0%);
  transition: all 1s ease-in-out;
}
.contact-scroll {
  height: var(--windowHeight);
  overflow-y: auto;
  font-family: 'montserrat alternates';
  font-size: min(calc(0.075 * var(--windowHeight)), min(35px, max(7.2vw, 26px)));
  font-weight: 200;
  font-style: italic;
  padding-bottom: 0;
  padding-top: 8vw;
}
.contact-scroll span {
  font-weight: 400;
  font-style: normal;
}
.email, .phone {
  margin-bottom: 2.5rem;
  user-select: text;
}
.contact-x {
  position: fixed;
  top: 0;
  left: 0;
  font-family: 'montserrat alternates';
  font-size: min(calc(0.09 * var(--windowHeight)), min(50px, max(9vw, 35px)));
  font-size: min(calc(0.082 * var(--windowHeight)), min(36px, max(8.2vw, 28px)));
  z-index: 3;
  height: 8vw;
  width: 8vw;
  text-align: center;
  line-height: 8vw;
  transition: all 0.35s ease-out 0.1s;
}
.contact-x:hover, .contact-x:active {
  transform: scale(114%);
}

#about {
  position: fixed;
  top: 0;
  left: 0;
  height: var(--windowHeight);
  width: 100vw;
  visibility: hidden;
  transform: translateY(100%);
  background-color: rgba(10, 200, 250, 0.835);
  background-color: rgba(10, 200, 250, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 1s ease-in-out, visibility 1s linear 1.1s;
  z-index: 3;
  color: white;
  /* padding: 2rem 0; */
  box-sizing: border-box;
}
#about.show {
  visibility: visible;
  transform: translateY(0%);
  transition: all 1s ease-in-out;
}
.about-title {
  transition: all 1s ease-in-out;
}
.about-els {
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: all 1s ease-in-out;
}
.about-el {
  font-weight: 300;
  padding-left: 1rem;
}
.about-cont-x, .privacy-x {
  position: sticky;
  height: calc((100vw - min(800px, 70vw)) / 2);
  width: calc((100vw - min(800px, 70vw)) / 2);
  line-height: calc((100vw - min(800px, 70vw)) / 2);
}
.about-x, .about-cont-x, .privacy-x {
  font-size: min(calc(0.082 * var(--windowHeight)), min(36px, max(8.2vw, 28px)));
}
.about-x:hover, .about-x:active, .about-cont-x:hover, .about-cont-x:active, .privacy-x:hover, .privacy-x:active {
  transform: scale(114%);
}
.about-scroll {
  height: var(--windowHeight);
  width: calc(min(800px, 70vw) + 4vw);
  /* overflow-y: auto;
  overflow-x: hidden; */
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
/* .about-title {
  font-family: 'montserrat alternates';
  font-size: min(calc(0.09 * var(--windowHeight)), min(50px, max(9vw, 35px)));
  font-weight: 400;
  text-align: center;
  padding: 1.7rem;
  padding-bottom: 0;
} */
.about-cont-crit {
  position: absolute;
  width: min(800px, 70vw);
  padding-top: 1.7rem;
  padding-bottom: 1.7rem;
  font-family: 'fira sans';
  font-weight: 300;
  font-size: 1.2rem;
  font-size: min(calc(0.04 * var(--windowHeight)), min(20px, max(4vw, 15px)));
  line-height: 1.6;
  text-align: justify;
  hyphens: auto;
  transform: translateY(0);
  transition: all 1s ease-in-out, transform 0s linear;
}
.about-cont-crit.opa0 {
  transform: translateY(-100%);
  transition: all 1s ease-in-out, transform 0.1s ease 2s;
}
.about-by {
  font-size: min(calc(0.055 * var(--windowHeight)), min(25.5px, max(5.5vw, 20px)));
  padding-top: 0.6rem;
  font-style: italic;
  text-align: right;
}
.about-cont {
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto;
  height: var(--windowHeight);
  /* padding-top: 8vw; */
  z-index: 4;
  overflow: auto;
  transform: translateX(100%);
  transition: all 1s ease-in-out;
  visibility: hidden;
  display: flex;
  width: 100vw;
}
.about-cont.show {
  visibility: visible;
  transform: translateX(0);
  /* transition: all 1s ease-in-out; */
}
.about-cont img {
  opacity: 1;
  max-height: none;
  top: auto;
  left: 0;
  max-width: none;
}
.hide-title-left {
  transform: translateY(var(--windowHeight)) rotate(-90deg) translateX(-100%);
  transition: all 1s ease-in-out;
}
.hide-left {
  opacity: 0;
  transform: translateX(-100%);
  transition: all 1s ease-in-out;
}
.zoom-ritaglio {
  width: max(1300px, 80vw);
  left: 0px !important;
  padding-right: 2rem;
}
.zoom-img {
  width: max(1300px, 80vw);
  left: 0px !important;
  padding-right: 2rem;
}

#privacy {
  background: rgba(210, 52, 180, 0.8);
  flex-direction: column;
  overflow-y: auto;
  padding-top: 0;
}
#privacy .privacy-cont {
  text-align: center;
  width: 70vw;
  width: calc(min(800px, 70vw) + 4vw);
  padding-top: 1.7rem;
  padding-bottom: 1.7rem;
  font-family: 'fira sans';
  font-weight: 300;
  font-size: 1.2rem;
  font-size: min(calc(0.04 * var(--windowHeight)), min(20px, max(4vw, 15px)));
  line-height: 1.6;
}
#privacy .privacy-x {
  position: relative;
  height: min(20vw, 200px);
  width: min(20vw, 200px);
  line-height: min(20vw, 200px);
}

img {
  max-height: 72vh;
  max-height: calc(0.72 * var(--windowHeight));
  width: auto;
  max-width: calc(var(--viewWidth) - 80px);
  transition: ease-in-out 0.7s;
  /* position: absolute; */
  top: calc(50vh - 36vh);
  top: calc(0.14 * var(--windowHeight));
  z-index: 3;
}
img.small {
  max-height: calc(0.54 * var(--windowHeight));
  max-width: calc(0.75 * var(--viewWidth) - 50px);
  position: initial;
}

.frame {
  border: #692412 var(--frameSize) solid;
  border: #5b2213 var(--frameSize) solid;
  top: calc(0.14 * var(--windowHeight) - var(--frameSize));
}
.frame-no-right {
  border: #692412 var(--frameSize) solid;
  border: #5b2213 var(--frameSize) solid;
  border-right: none;
  top: calc(0.14 * var(--windowHeight) - var(--frameSize));
}
.frame-no-left {
  border: #692412 var(--frameSize) solid;
  border: #5b2213 var(--frameSize) solid;
  border-left: none;
  top: calc(0.14 * var(--windowHeight) - var(--frameSize));
}
.bw {
  border: #463a37 var(--frameSize) solid;
}
.ittico {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.ittico img {
  /* max-width: calc(var(--viewWidth) / 2 - 80px); */
}

.horiz-elem.showText img {
  max-height: 25vh;
  top: 5vh;
  max-height: calc(0.25 * var(--windowHeight));
  top: calc(0.05 * var(--windowHeight));
  position: absolute;
}
.hasText img {
  position: absolute !important;
}
.horiz-elem .text {
  transition: ease-in-out 0.7s;
  opacity: 0;
  max-width: 66vw;
  position: absolute;
  top: 35vh;
  top: calc(0.35 * var(--windowHeight));
  font-size: max(min(2vw, 30px), 13px);
  font-family: raleway;
  font-weight: 600;
  background: rgba(10, 250, 180, 0.72);
  color: white;
  line-height: max(min(4vw, 55px), 26px);
  padding: max(min(3vw, 48px), 20px);
  overflow-y: auto;
  max-height: 60vh;
  max-height: calc(0.6 * var(--windowHeight));
  box-sizing: border-box;
  text-align: justify;
}
.horiz-elem .text span {
  font-size: max(min(3vw, 50px), 30px);
  font-family: 'abril fatface';
  font-weight: 400;
  mix-blend-mode: difference;
}
.horiz-elem .imgMore, .horiz-elem .imgN, .horiz-elem .imgTitle {
  opacity: 0;
  top: 0;
  position: absolute;
  color: white;
  font-size: 1.5rem;
  background: rgba(250, 10, 80, 0.25);
  background: #5b2213;
  padding: 0.4rem;
  font-family: 'montserrat alternates';
  transition: ease-in-out 0.7s;
  /* line-height: 5vh; */
  box-sizing: border-box;
  font-size: min(calc(0.044 * var(--windowHeight)), min(24px, max(4vw, 20px)));
}
.horiz-elem.hasText .imgMore {
  opacity: 1;
  top: calc(0.1 * var(--windowHeight));
  z-index: 4;
  padding: 0;
  background-color: rgba(60, 211, 251, 0.25);
}
.horiz-elem.showText .imgMore {
  opacity: 0;
}
.horiz-elem .imgTitle {
  opacity: 1;
  z-index: 5;
}
.horiz-elem .imgN {
  top: auto;
  opacity: 1;
  background: rgba(250, 180, 10, 0.25);
  bottom: 0 !important;
}
.horiz-elem.showText .text {
  opacity: 1;
}


@media (max-width: 900px) {
  :root {
    --viewWidth: 800px;
  }
}
@media (max-height: 550px) {
  :root {
    --frameSize: 9px;
  }
}
@media (max-width: 600px) {
  :root {
    --frameSize: 9px;
  }
}

.bye-info {
  right: 100vw !important;
}
.main-title {
  opacity: 0 !important;
}
@media (max-width: 1050px) {
  .main-title {
    opacity: 1 !important;
  }
  #temp-info {
    display: none !important;
  }
}