@charset "UTF-8";

/* Variables */

:root {
          /* hover */
          --controlButtonsHover: background-color .2s ease-in-out;
          --controlButtonsHoverandScale: transform .2s ease-in-out;
          --controlCloseButtonRotate: transform .2s ease-in-out;
          /* transitions */
          --imgHoverOpacity: opacity .2s ease-in-out;
          --slideImage: left 0.5s ease-in-out;
          /* colors */
          --black20: rgba(51, 51, 51, 1.0);
          --black50: rgba(128, 128, 128, 1.0);
          --black: rgba(0, 0, 0, 1.0);
          --white: rgba(255, 255, 255, 1.0);
}

/* a Styles */

a {
          text-decoration: none;
}

a.view-master-close-btn:link,
a.previous-image-btn:link,
a.next-image-btn:link {
          color: var(--white);
          transform: scale(1);
          background-color: var(--black20);
          transition: var(--controlButtonsHoverandScale);
}

a.previous-image-btn:hover,
a.next-image-btn:hover,
a.view-master-close-btn:hover {
          transform: scale(1.2);
          background-color: var(--black50);
          transition: var(--controlButtonsHover);
          transition: var(--controlButtonsHoverandScale);
}

a.previous-image-btn:active,
a.next-image-btn:active,
a.view-master-close-btn:active {
          transform: scale(0.9);
}

a.view-master-close-btn:visited {
          color: var(--white);
}

.view-master-close-btn>img,
.previous-image-btn>img,
.next-image-btn>img {
          transform: rotate(0deg);
          transition: var(--controlCloseButtonRotate);
}

a.view-master-close-btn:hover>img {
          transform: rotate(90deg);
          transition: var(--controlCloseButtonRotate);
}

/* Gallery */

.gallery {
          max-width: 768px;
          margin-left: auto;
          margin-right: auto;
          padding: 0px;
          margin-top: 72px;
          text-align: center;
}

.gallery ul {
          display: grid;
          list-style: none;
          margin: 24px 0px 0px 0px;
          padding: 0px;
          grid-template-columns: 1fr 1fr;
          grid-auto-rows: 300px;
          grid-gap: 8px;
          clip-path: fill-box;
          border-radius: 10px;
          overflow: hidden;
}

.gallery ul li {
          background-color: var(--black);
          overflow: hidden;
}

.gallery li:nth-child(3n) {
          grid-column-start: 1;
          grid-column-end: 3;
}

.gallery ul li img {
          height: 100%;
          width: 100%;
          display: block;
          object-fit: cover;
          transform: scale(1);
          transition: all 0.3s ease-in-out;
}

.gallery ul li img:hover {
          opacity: 0.6;
          cursor: zoom-in;
          transition: all 0.5s ease-in-out;
          transform: scale(1.04);
}

/* View Master Container */

.view-master-modal {
          width: 100vw;
          height: 0vh;
          position: fixed;
          top: 100vh;
          transition: all 0.3s ease-in-out;
          background-color: var(--black);
          z-index: 101;
}

.view-master {
          display: flex;
          flex-direction: row;
          height: 100vh;
          width: 100%;
          opacity: 0 !important;
          transition: opacity 0.3s ease-out 0s;
          -moz-transition: opacity 0.3s ease-out 0s;
}

/* View Master Controls */

.view-master-close {
          z-index: 1;
          position: absolute;
          top: 40px;
          left: 80px;
}

.view-master-close-btn {
          display: inline-block;
          padding: 20px;
          border-radius: 50%;
          transition: var(--controlButtonsHover);
}

.pagination {
          display: inline-block;
          padding: 0px 32px 0px 32px !important;
          border-radius: 32px;
          line-height: 59px;
          margin-left: 8px;
          background-color: var(--black20);
          color: var(--white);
}

.view-master-close img {
          vertical-align: middle;
          height: 20px;
          text-align: center;
}

/* Image Reel */

.view-master ul {
          position: relative;
          align-self: center;
          width: 100%;
          height: 90vh;
          margin: 0px;
          padding: 0px;
          transition: transform 0.3s ease-in-out;
          list-style: none;
          list-style-position: inside;
          white-space: nowrap;
          font-size: 0px;
          
}

.view-master ul li {
          display: inline-block;
          width: 100%;
          height: 100%;
          padding: 0px;
          margin: 0px;
}

.view-master ul li img {
          display: inline-block;
          width: 100%;
          height: 100%;
          padding: 0px;
          margin: 0px;
          object-fit: contain;
          pointer-events: none;
}

/* Next and Previous Buttons */

.previous-image-btn,
.next-image-btn {
          position: absolute;
          top: 50%;
          z-index: 1;
          border-radius: 50%;
          padding: 20px;
          transition: var(--controlButtonsHover);
}

.previous-image-btn {
          left: 80px;
}

.next-image-btn {
          right: 80px;
}

.previous-image-btn img,
.next-image-btn img {
          vertical-align: middle;
}

/* Toggles */

.display-modal {
          top: 0vh;
          height: 100vh;
          transition: all 0.3s ease-in-out;
}

.stop-scroll {
          overflow: hidden;
}

.display-view-master {
          opacity: 1 !important;
          transition: opacity 0.3s ease-out 0.3s;
          -moz-transition: opacity 0.3s ease-out 0.3s;
}

.disable-button {
          opacity: 0.3;
          cursor: not-allowed;
}

/* Media Query */

@media (max-width: 425px) {
          .previous-image-btn,
          .next-image-btn {
                    display: none;
          }

          .gallery {
                    max-width: 100%;
                    border-radius: 0px;
          }
          .view-master-close {
                    top: 85%;
                    left: calc((100vw - 184px)/2);
          }
}