@require './Layout.styl';


.Image {
  width: 100%;
  padding-bottom: 70%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin: 0 0 16px;
  cursor: pointer;

  &:first-of-type {
    margin-top: 100px;
  }

  opacity: .75;
  transition: opacity .4s;

  &:hover {
    opacity: 1;
  }
}

.About {
  &Text {
    box-sizing: border-box;
    padding: 0 0 0 24px;
    font-size: 15px;
    line-height: 22px;
    height: 80vh;
    overflow-y: auto;
  }

  &Image {
    width: 100%;
    padding-bottom: 100%;
    background-size: contain;
    opacity: 1;
    transition: opacity 0.3s;
    background-position: center top;
    background-repeat: no-repeat;

    &Fade {
      opacity: 0;
    }
  }
}

@media only screen  and (min-device-width : 320px)  and (max-device-width : 568px) and (orientation:portrait){

  .Half, .Quarter, .ThreeQuarter {
    position: static;
    width: 100%;
    float: none;
  }

  .Image {
    width: 90vw;
    margin: 0 16px 0 0;
  }

  .AboutText {
    height: auto;
    text-align: center;
    line-height: 4vh;
    font-size: 3vh;
  }

  .Separator {
    width: 50vw;
    height: 2px;
    background: #BDBDBD;
    margin: auto;

    &Bottom {
      margin-bottom: 3vh;
    }

    &Top {
      margin-top: 3vh;
    }
  }

  .AboutImages {
    position: relative;
    white-space: nowrap;
    width: auto;
    overflow-x: scroll;
    margin: -34px 0 70px;
    padding-bottom: 25px;

    //&:after, &:before {
    //  content: '';
    //  position: absolute;
    //  width: 100%;
    //  left: 50%;
    //  transform: translateX(-50%);
    //  background: #BDBDBD;
    //  height: 2px;
    //}
    //
    //&:after {
    //  bottom: 0;
    //}
    //
    //&:before {
    //  top: 80px;
    //}
  }

  .AboutImage {
    display: none;
  }

}