@require './Layout.styl';


.Title {
  display: inline-block;
  position: relative;
  z-index: 15;

  &Inactive {
    color: #838383;
    cursor: pointer;
  }
}

.Book {
  font-family: Lora;
}

.GallerySlide {
  width: 100%;
  padding-bottom: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  //background-position: center center;
}

.LeftSide, .RightSide {
  display: inline-block;
  vertical-align: top
}

.LeftSide {
  width: 20%;
}

.RightSide {
  width: 80%;
}

.BookGalery {
  padding: 2vh 65px 0;
  margin-top: -10vh;
}


.BookImageTumb {

  width: 100%;
  padding-bottom: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  margin: 30px;
}

.MiniDescBg {
  position: absolute;
  width: 50%;
  height: 100vh;
  background: url(/public/img/minilaut.png);
  right: 0;
  z-index: 10;
  top: 0;
  opacity: 1;
  background-size: cover;
}

.Overlay  {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #222;
  opacity: 0.45;
  z-index: 1;
}

.MiniDesc {
  display: inline-block;
  padding: 0 16px 0 0;
  margin-top: 30px;


  &Title {
    position: relative;
    font-size: 16px;
    letter-spacing: 2px;
    cursor: pointer;
    z-index: 15;
    color: #838383;

    &Active {
      color: #333;
    }

    &:before {
      content: '|';
      color: #333;
      padding: 0 8px 0px 13px;
    }
  }

  &Popup {
    background: #fff;
    position: absolute;
    left: 27px;
    top: calc(10vh + 73px);
    width: 34vw;
    padding: 40px 0 0 6px;
    z-index: 10;

    &Text {
      width: 100%;
      padding: 0 25px 0 0;
      box-sizing: border-box;
      display: inline-block;
      margin: 0 4px;
      color: #555;
      height: 78vh;
      overflow: hidden;
      line-height: 24px;
      font-size: 16px;
    }
  }
}

.MiniActiveBg {
  width: 100vw;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  z-index: -1;
  transition: left .5s;

  &Slide {
    left: -100%;
  }
}

@media only screen  and (min-device-width : 320px)  and (max-device-width : 568px) and (orientation:portrait){
  .LeftSide, .RightSide {
    width: 100%;
    display: block;
  }

  .BookImageTumb {
    display: none;
  }

  .Title {
    display: block;
    text-align:  center;
  }

  .MiniDescTitle {
    display: none;
  }

  .BookGalery {
    margin-top: 15vh;
  }

  .MiniDescPopup {
    color: #fff;
    position: relative;
    top: 8px;
    right: 0;
    width: 90vw;
    padding-top: 50vh;
    transform: none;

    &Close {
      display: none;
    }

    &Text {
      width: 100%;
      text-align: center;
      height: auto;
      font-size: 5vw;
      overflow: visible;
      line-height: 1.2;
    }
  }

  .Title {
    width: 60vw;
    border-bottom: 1px solid #999;
    margin: auto;
    padding-bottom: 2vh;
  }

  .GallerySlide {
    width: 100%;
    padding-bottom: 114%;
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: center top;

    &Slide0 {
        background-size: 78%;
        background-position: 105% top;
    }

    &Slide1 {
      background-position: 80% top;
    }

    &Slide2 {
      background-size: 97%;
      background-position: center 20%;
    }

    &Slide3 {
      background-size: 97%;
      background-position: center 20%;
    }

    &Slide4 {
      background-size: 97%;
      background-position: center 20%;

    }
  }
}