:root {
  --m-fix: 0px;
}

html {
  font-family: 'Fira Mono', monospace;
  letter-spacing: -.1vw;
  font-size: 1.4vw;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  color: black;
}

html, body {
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-image: url(img/bgd-studio.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

a, a:visited, a:active {
  color: black;
  text-decoration: none;
  transition: .1s;
  border-bottom: 1px gray dotted;
}

a:hover {
  border-bottom: 1px black solid;
  text-decoration: none;
}

.section {
  text-align: center;
  position: relative;
  width: 100vw;
  height: 100%;
}

.slide {
  position: relative;
  width: 100vw;
  height: 100%;
}

.frame {
  width: 80vw;
  height: 70vh;
  margin: 13vh 10vw 17vh;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  border: 0;
  background-color: var(--main-bg-color);
}

.ig {
  z-index: 100;
  left: 4vw;
  top: 5.77vh;
  position: absolute;
  border: none;
  width: 1.2rem;
  height: 1.2rem;
  transition: .5s;
  background: url(../img/ig.png) no-repeat 50% 50%;
  background-size: contain;
  opacity: 0;
  visibility: hidden;
}

.ig:hover {
  border: 0;
  opacity: .8;
}

.mmenu, .mmenu-index {
  z-index: 100;
  position: absolute;
  width: 100vw;
  height: 10vh;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
}

.mmenu>div, .mmenu-index>div {
  z-index: 100;
  display: block;
  width: 14vw;
  height: 0;
  padding: 5vh 0 0;
  margin: 0 2vw;
  text-align: center;
  border-top: .8vh solid transparent;
}

.mmenu>div.accent, .mmenu-index>div.accent {
  border-top: .8vh solid rgba(255, 255, 255, 1);
}

.catalog {
  z-index: 100;
  width: 80vw;
  height: 80vh;
  margin: 2vh 10vw 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
}

.catalog>div {
  z-index: 100;
  display: block;
  font-size: 80%;
  width: 25vw;
  margin: calc(.1vh + .1vw);
  white-space: nowrap;
}

.new {
  position: absolute;
  width: 100vw;
  left: 0;
  top: 75vh;
  height: 1vh;
  text-align: center;
  font-size: 60%;
  letter-spacing: normal;
}

.mobile {
  display: none;
}

.buy {
  position: absolute;
  width: 90vw;
  left: 5vw;
  top: calc(12vh - var(--m-fix));
  text-align: center;
  font-size: 60%;
  letter-spacing: normal;
  line-height: 360%;
}

.buy span {
  padding: 1em 2em;
  border: 1px dotted black;
}

.new-works {
  z-index: 100;
  position: absolute;
  width: 80vw;
  height: 20vh;
  top: 79vh;
  left: 10vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: flex-start;
}

.new-works>div {
  z-index: 100;
  display: block;
  font-size: 80%;
  width: 25vw;
  margin: calc(.1vh + .1vw);
  white-space: nowrap;
}

.caption {
  font-size: 70%;
  text-align: right;
  position: absolute;
  bottom: 4vh;
  right: 5vw;
}

.details {
  font-size: 80%;
}

.back{
  display: none;
}

#s-catalogue {
  background-color: rgba(0, 0, 0, 0.2);
}

.touchevents .fp-controlArrow.fp-prev, .touchevents .fp-controlArrow.fp-next, .touchevents .down, .touchevents .up {
  display: none;
}

.fp-controlArrow.fp-prev {
  position: absolute;
  left: 0;
  margin-top: -35vh;
  cursor: url(../img/arr-left.svg), auto;
}

.fp-controlArrow.fp-next {
  right: 0;
  margin-top: -35vh;
  cursor: url(../img/arr-right.svg), auto;
}

.fp-controlArrow.fp-prev, .fp-controlArrow.fp-next {
  width: 15vw;
  height: 90vh;
  border: 0;
}

.down {
  position: absolute;
  z-index: 200;
  right: 15vw;
  bottom: 0;
  border: none;
  width: 70vw;
  height: 10vh;
  cursor: url(../img/arr-down.svg), auto;
}

#up {
  position: absolute;
  z-index: 200;
  right: 0;
  top: 0;
  border: none;
  width: 100vw;
  height: 3vh;
  cursor: url(../img/arr-up.svg), auto;
}

.home {
  z-index: 100;
  right: 48vw;
  top: 90vh;
  position: absolute;
  border: none;
  width: 2vw;
  height: 2vw;
  background: url(../img/home.svg) no-repeat 50% 50%;
  background-size: contain;
  transition: .5s;
  border-bottom: none;
  opacity: .8;
}

.home-index {
  z-index: 200;
  left: 4vw;
  top: 5.8vh;
  position: absolute;
  border: none;
  width: 2.4vw;
  height: 2.4vw;
  transition: .5s;
  background: url(../img/back.svg) no-repeat 50% 50%;
  background-size: contain;
  border-bottom: none;
}

.menu-index {
  z-index: 200;
  left: 4vw;
  top: 5.8vh;
  position: absolute;
  width: 2.4vw;
  height: 2.4vw;
  background: url(../img/menu.svg) no-repeat 50% 50%;
  background-size: contain;
  transition: .5s;
  border-bottom: none;
}

.home-index:hover, .home:hover, .menu-index:hover {
  border-bottom: 1px dotted rgba(0, 0, 0, 0);
}

.loader-container, .loader-container-index {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30vw;
  height: 10vh;
  margin: 55vh 35vw 35vh;
  background-image: url(img/lm.png);
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-background-size: contain;
  background-size: contain;
  /* border: 1px red solid; */
}

.loader {
  position: absolute;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.loader::before, .loader::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  top: 0;
  opacity: 0;
}

.loader-one::before {
  box-shadow: 0px 37px 0px -14px #8C8C8C;
  -webkit-animation: animate-circle 2s ease-in-out 0.5s infinite;
  animation: animate-circle 2s ease-in-out 0.5s infinite;
}

.loader-one::after {
  box-shadow: 0px 37px 0px -14px #8C8C8C;
  -webkit-animation: animate-circle 2s ease-in-out 0.65s infinite;
  animation: animate-circle 2s ease-in-out 0.65s infinite;
}

.loader-two::before {
  box-shadow: 0px 37px 0px -14px #8C8C8C;
  -webkit-animation: animate-circle 2s ease-in-out 0.8s infinite;
  animation: animate-circle 2s ease-in-out 0.8s infinite;
}

.loader-two::after {
  box-shadow: 0px 37px 0px -14px #8C8C8C;
  -webkit-animation: animate-circle 2s ease-in-out 0.95s infinite;
  animation: animate-circle 2s ease-in-out 0.95s infinite;
}

@-webkit-keyframes animate-circle {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  25% {
    opacity: 1;
  }

  60% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    opacity: 0;
  }
}

@keyframes animate-circle {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }

  25% {
    opacity: 1;
  }

  60% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    opacity: 0;
  }

  100% {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
    opacity: 0;
  }
}

@media screen and (max-aspect-ratio: 1/1) {
  html {
    font-size: calc(1.6vh + 8px);
  }

  .fp-controlArrow.fp-prev, .fp-controlArrow.fp-next, .down, .up {
    display: none;
  }

  .frame {
    margin: 8vh 10vw 22vh;
  }

  .caption {
    font-size: 70%;
    bottom: calc(12vh + var(--m-fix));
  }

  .mmenu-index {
    position: absolute;
    width: 100vw;
    height: 10vh;
    top: 4.4rem;
    left: 0;
    display: flex;
    flex-direction: column;
  }

  .mmenu-index>div {
    width: 100vw;
    padding: .7rem 1.1rem;
    margin: 0;
    font-size: 80%;
    text-align: left;
  }

  .mmenu-index>div.accent {
    border-top: .8vh solid rgba(255, 255, 255, 0);
    color: white;
  }

  .mmenu {
    position: absolute;
    width: 100vw;
    height: auto;
    top: 2.2rem;
    left: 0;
    display: flex;
    flex-direction: column;
  }

  .mmenu>div {
    width: 100vw;
    height: 0;
    padding: 0 .8rem;
    margin: 0 2vw;
    font-size: 80%;
    text-align: left;
    border: none;
    display: none;
  }

  .mmenu a{
    border: none;
  }

  .mmenu>div.accent {
    border: none;
    display: block;
  }

  .catalog {
    display: block;
    position: relative;
    width: 90vw;
    height: auto;
    margin: 18vh 5vw 18vh 5vw;
  }

  .catalog>div {
    font-size: 80%;
    width: auto;
    margin: calc(.1rem + .1rem);
    white-space: nowrap;
    line-height: 1.5;
  }

  .back{
    display: block;
    margin-top: 2em;

  }

  .back a{
    font-size: 200%;
    color: #444;
    border-bottom: none;
  }

  .new-works {
    position: absolute;
    width: 90vw;
    height: 24vh;
    top: calc(58vh - var(--m-fix));
    left: 5vw;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
  }

  .new-works>div {
    font-size: 60%;
    width: auto;
    margin: 0 1.5rem .3rem 0;
    white-space: normal;
    text-align: left;
  }

  .new {
    width: 90vw;
    left: 5vw;
    top: calc(54vh - var(--m-fix));
    text-align: left;
    font-size: 60%;
  }

  .mobile {
    display: inline;
  }

  .buy {
    width: 90vw;
    left: 5vw;
    top: calc(82vh - var(--m-fix));
    text-align: left;
    font-size: 60%;
  }

  .loader-container, .loader-container-index {
    height: calc(20vh - var(--m-fix));
    margin-top: calc(10vh - var(--m-fix));
    width: 90vw;
    margin: 10vh 5vw;
    background-size: 86%;
    background-position: center 30%;
    /* border: 1px solid red; */
    /* background-image: none; */
  }

  .home {
    height: 4vh;
    width: 4vh;
    right: 5.5vw;
    top: 4vh;
    opacity: .6;
  }

  .ig {
    opacity: 0;
    visibility: hidden;
    height: 1.4rem;
    width: 1.4rem;
    left: 85vw;
    top: 5.2vh;
  }

  .home-index {
    height: 4vh;
    width: 4vh;
    top: 4vh;
    left: 5vw;
  }

  .menu-index {
    height: 4vh;
    width: 4vh;
    top: 3vh;
    left: 5vw;
  }
}