body {}

.site-card__parent.open__false .site-card__inner {
  transform: scale(0.6) rotate(90deg);
  height: calc(100vw + (100vw * 0.6) - 60px);
  overflow: hidden;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.site-card__parent.open__true .site-card__inner {
  transform-origin: center !important;
  max-height: unset !important;
  position: relative !important;
}

.site-card__parent.open__false {
  /* make element in center */
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.site-card__inner {
  transition: transform 2s ease, margin 1s linear;
}


@media only screen and (min-width: 1024px) {
  .site-card__parent.open__false .site-card__inner {
    height: 1400px;
    width: 915px;
  }
}

.site-card__back-img {
  transform: scale(0.6) rotate(90deg);
  height: calc(100vw + (100vw * 0.6) - 60px);
  width: 100%;
  position: absolute;
  z-index: 9999;
  transition: all 1s linear;
  display: flex;
  justify-content: center;
  align-items: center;

}

@media only screen and (min-width: 1024px) {
  .site-card__back-img {
    height: 1400px;
    width: 915px;
  }
}

.site-card__back-img.turn {
  transform: scale(0.6) rotate(90deg) rotateX(90deg);
  perspective: 800px;
  transform-origin: 50% 50%;
}

.site-card__back-img img {
  width: 100%;
  height: 100%;
}

.main__site {
  height: calc(100vw + (100vw * 0.6));
  overflow: hidden;
  display: none;
  background-color: white;
}

.main__site.active {
  display: block;
}



.site-card__front-image {
  transform: scale(0.6) rotate(90deg) rotateX(90deg);
  height: calc(100vw + (100vw * 0.6) - 60px);
  width: 100%;
  position: absolute;
  z-index: 9999;
  transition: all 1s linear;
}

.site-card__front-image img {
  max-width: 100%;
  height: 100%;
}

.site-card__front-image.turn {
  transform: scale(0.6) rotate(90deg) rotateX(0);
  perspective: 800px;
}

@media only screen and (min-width:1024px) {
  .site-card__front-image {
    height: 1400px;
    width: 915px;
  }
}

/* Pattern */
.site-card__pattern-image {
  transform: scale(0.6) rotate(90deg) rotateX(90deg);
  height: calc(100vw + (100vw * 0.6) - 60px);
  width: 100%;
  position: absolute;
  z-index: 5;
  transition: all 1s linear;
}

.site-card__pattern-image img {
  max-width: 100%;
  height: 100%;
}

.site-card__pattern-image.turn {
  transform: scale(0.6) rotate(90deg) rotateX(0);
  perspective: 800px;
}

@media only screen and (min-width:1024px) {
  .site-card__pattern-image {
    height: 1400px;
    width: 915px;
  }
}

.site-card__top-image {
  transform: scale(0.6) rotate(90deg) rotateX(90deg);
  height: calc(100vw + (100vw * 0.6) - 60px);
  width: 100%;
  position: absolute;
  z-index: 9999;
  transition: transform 1s linear;
  cursor: pointer;
  display: flex;
  justify-content: end;
}

.site-card__top-image.turn {
  transform: scale(0.6) rotate(90deg) rotateX(0);
  perspective: 800px;

}

@media only screen and (min-width:1024px) {
  .site-card__top-image {
    height: 1400px;
    width: 915px;
  }
}

.site-card__top-image img {
  height: 100%;
  width: 100%;
  transform-origin: 0% 0%;
  transition: all 1s;
  perspective: 800px;
}

.site-card__top-image.open img {
  transform: rotateY(180deg);
}


.site-card__back-img_text {
  position: absolute;
  transform: rotate(-90deg);
  font-size: calc(20px + (20px * .6));
  color: white;
  font-family: 'nastaliq';
}

@media only screen and (min-width:1024px) {
  .site-card__back-img_text {
    position: absolute;
    transform: rotate(-90deg);
    font-size: calc(36px + (36px * .6));
  }
}


.site-card__mohr-image {
  transform: scale(0.6) rotate(90deg) rotateX(90deg);
  height: calc(100vw + (100vw * 0.6) - 60px);
  width: 100%;
  position: absolute;
  z-index: 9999;
  transition: transform 1s linear;
  cursor: pointer;
  display:flex;
  justify-content: center;
  align-items: center;
}

.site-card__mohr-image.turn {
  transform: scale(0.6) rotate(90deg) rotateX(0);
  perspective: 800px;
}


@media only screen and (min-width:1024px) {
  .site-card__mohr-image {
    height: 1400px;
    width: 915px;
  }
}


.mohr {
  width: 80px;
  height: auto;
  margin-right: -70px;
  transform: rotate(-90deg);
}


@media only screen and (min-width:768px){
  .mohr{
    width: 150px;
    margin-right: -160px;
  }
}

@media only screen and (min-width:1024px){
  .mohr{
    width: 160px;
    margin-right: -190px;
  }
}




.w-auto {
  width: auto !important;
}

.h-auto {
  height: auto;
}