alookatommorow/children-of-mex

.well.gallery {

  .gallery-content {

    #photo {

      .photo-menu {
        width: 300px;
        margin: 0 auto;
        min-height: 2.85714286em;
        display: flex;
        align-items: center;
        justify-content: space-around;

        .item {
          width: 25%;
          text-align: center;
          justify-content: center;
          font-size: 18px;

          &.active {
            border-bottom: 2px solid $red;
          }
        }
      }

      .photo-content {
        margin: 0 auto;
        width: 100%;
        position: relative;

        .photo-group {
          display: none;
          text-align: center;

          &.active {
            display: block
          }
        }

        .carousel-button {
          position: absolute;
          top: 45%;
          transform: translateY(-45%);
          cursor: pointer;
          width: 50px;
          background-color: rgba(255, 255, 255, 0.5);

          &.prev {
            left: 0;
          }

          &.next {
            right: 0;
          }

          i {
            color: $red;
            font-size: 50px;
            line-height: 50px;
            margin: 0;
          }
        }

        .carousel-image-container {
          margin: 0 auto;
          height: 720px;
          width: 100%;
          display: flex;
          justify-content: center;

          .gallery-image {
            margin: auto 0;
            display: none;
            cursor: pointer;

            &.active-photo {
              display: block;
            }

            img {
              max-height: 700px;
              max-width: 100%;
            }
          }
        }

        .photo-thumbnails {
          margin: 0 auto;
          padding: 10px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          flex-wrap: wrap;
          width: 100%;

          .circle {
            border-color: $blue;

            &.active-photo {
              background-color: $blue;
              border-color: $red;
            }
          }
        }

        @include media-query($tablet) {

          .carousel-image-container {
            height: 620px;

            .gallery-image {

              img {
                max-height: 600px;
              }
            }
          }

          .photo-thumbnails {
            justify-content: center;

            .circle-container {
              margin: 10px;
            }
          }
        }

        @include media-query($on-palm) {

          .carousel-button {
            top: 30%;
            width: 18px;
            transform: translateY(-30%);

            i {
              font-size: 30px;
              line-height: 30px;


              &.prev {
                left: -5px;
              }

              &.next {
                right: -5px;
              }
            }
          }


          .carousel-image-container {
            height: 320px;

            .gallery-image {

              img {
                max-height: 300px;
              }
            }
          }

          .photo-thumbnails {

            .circle-container {
              margin: 7px;
            }
          }

        }
      }
    }
  }
}