@font-face {
  font-family: ephesis;
  src: url(./Fonts/Ephesis/Ephesis-Regular.ttf);
}
@font-face {
  font-family: roboto;
  src: url(./Fonts/Roboto/Roboto-Black.ttf);
}
@font-face {
  font-family: dancingScript;
  src: url(./Fonts/Dancing_Script/DancingScript-VariableFont_wght.ttf);
}
@font-face {
  font-family: monserat;
  src: url(./Fonts/Montserrat/static/Montserrat-ExtraLight.ttf);
}
@font-face {
  font-family: kanit;
  src: url(./Fonts/Kanit/Kanit-SemiBold.ttf);
}
@font-face {
  font-family: raleway;
  src: url(./Fonts/Raleway/Raleway-VariableFont_wght.ttf);
}

.galleryPage {
  width: 100%;
  box-sizing: border-box;
  background-color: #0d0d0d;
  background-image: url(./img/BackgroundNew0.jpg);
  background-size: contain;
  background-attachment: fixed;
  background-position: center center;
  background-repeat: no-repeat;
  background-position-y: 35vh;
  display: none;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 12vw);
}

.galleryPage h2 {
  font-size: 3vw;
  font-family: raleway;
  text-align: center;
  margin-bottom: 0;
  animation: logo 1.2s ease-in;
  padding-top: 2.5vw;
  margin-top: 0;
}
#gallerySpan {
  font-size: 1.3vw;
  margin-top: 1vw;

  color: #e2bf6e;
  font-family: raleway;
  width: 100%;
  text-align: center;
  animation: logo 1.2s ease-in;
}
.galleryPhotos {
  padding: 4vw 2vw 3vw 2vw;
  display: grid;
  grid-gap: 1.5vw;
  grid-template-rows: repeat(8, 20vw);
  grid-template-columns: repeat(3, 1fr);
  position: relative;
}

.galleryPhoto {
  cursor: pointer;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
  /*   border: 3px inset #e2bf6e; 
  /*   border-radius: 10px; */
}

.galleryPhoto:hover {
  transform: scale(1.02);
  box-shadow: 0 0 0.5vw rgba(255, 255, 255, 0.275);
}

#galleryPhoto1 {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  animation: logo 1s ease-in forwards;
  animation-delay: 0.3s;
}
#galleryPhoto2 {
  grid-column: 2;
  grid-row: 1/3;
  opacity: 0;
  animation: logo 1s ease-in forwards;
  animation-delay: 0.45s;
}
#galleryPhoto3 {
  grid-column: 3;
  grid-row: 1;
  opacity: 0;
  animation: logo 1s ease-in forwards;
  animation-delay: 0.6s;
}
#galleryPhoto4 {
  grid-column: 1;
  grid-row: 2;
  opacity: 0;
  animation: logo 1s ease-in forwards;
  animation-delay: 0.75s;
}
#galleryPhoto5 {
  grid-column: 3;
  grid-row: 2;
  opacity: 0;
  animation: logo 1s ease-in forwards;
  animation-delay: 0.9s;
}
#galleryPhoto6 {
  grid-column: 1/3;
  grid-row: 3;
  opacity: 0;
  animation: logo 1s ease-in forwards;
  animation-delay: 1.05s;
}
#galleryPhoto7 {
  grid-column: 3;
  grid-row: 3;
  opacity: 0;
  animation: logo 1s ease-in forwards;
  animation-delay: 1.3s;
}
#galleryPhoto8 {
  grid-column: 1/2;
  grid-row: 4;
  opacity: 0;
  animation: logo 1s ease-in forwards;
  animation-delay: 1.2s;
}
#galleryPhoto9 {
  grid-column: 3;
  grid-row: 4;
  opacity: 0;
  animation: logo 1s ease-in forwards;
  animation-delay: 1.1s;
}
#galleryPhoto10 {
  grid-column: 2;
  grid-row: 4/6;
  opacity: 0;
  animation: logo 1s ease-in forwards;
  animation-delay: 1.1s;
}
#galleryPhoto11 {
  grid-column: 1;
  grid-row: 5/7;
  opacity: 0;
  animation: logo 1s ease-in forwards;
  animation-delay: 1.1s;
}
#galleryPhoto12 {
  grid-column: 3;
  grid-row: 5/7;
  opacity: 0;
  animation: logo 1s ease-in forwards;
  animation-delay: 1.1s;
}
#galleryPhoto13 {
  grid-column: 2;
  grid-row: 6;
  opacity: 0;
  animation: logo 1s ease-in forwards;
  animation-delay: 1.1s;
}
/*---------------------------------------*/
#galleryPhoto14 {
  grid-column: 3;
  grid-row: 8;
  opacity: 0;
  animation: logo 1s ease-in forwards;
  animation-delay: 1.2s;
}
#galleryPhoto15 {
  grid-column: 2;
  grid-row: 7/9;
  opacity: 0;
  animation: logo 1s ease-in forwards;
  animation-delay: 1.25s;
}
#galleryPhoto16 {
  grid-column: 3;
  grid-row: 7;
  opacity: 0;
  animation: logo 1s ease-in forwards;
  animation-delay: 1.3s;
}
#galleryPhoto17 {
  grid-column: 1;
  grid-row: 7/9;
  opacity: 0;
  animation: logo 1s ease-in forwards;
  animation-delay: 1.35s;
}

.openedPhoto {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.893);
  width: 100%;
  height: 100%;
  top: 0;
  justify-content: center;
  align-items: center;
  z-index: 10;
  display: none;
  animation: logo 0.3s ease;
}
.galleryPhotoOpened {
  position: absolute;
  border: 0.15vw solid rgba(255, 255, 255, 0.518);
  border-radius: 0.5vw;
}
#gallery1 {
  display: none;
}
#gallery2 {
  display: none;
}
#gallery3 {
  display: none;
}
#gallery4 {
  display: none;
}
#gallery5 {
  display: none;
}
#gallery6 {
  display: none;
}
#gallery7 {
  display: none;
}
#gallery8 {
  display: none;
}
#gallery9 {
  display: none;
}
#gallery10 {
  display: none;
}
#gallery11 {
  display: none;
}
#gallery12 {
  display: none;
}
#gallery13 {
  display: none;
}
#gallery14 {
  display: none;
}
#gallery15 {
  display: none;
}
#gallery16 {
  display: none;
}
#gallery17 {
  display: none;
}
.sentCrossGallery {
  position: absolute;
  top: 2vw;
  right: 2vw;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2vw;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.sentCrossGallery:hover {
  transform: scale(1.1);
}
.sentCrossGallery:active {
  transform: scale(0.97);
}
.galleryArrowLeft {
  font-size: 2.7vw;
  position: absolute;
  left: 0px;
  padding-left: 2vw;
  height: 60vh;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.352);
  transition: color 0.5s ease;
}
.galleryArrowLeft:hover {
  color: white;
}
.galleryArrowRight {
  font-size: 2.7vw;
  position: absolute;
  right: 0px;
  padding-right: 2vw;
  height: 60vh;
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: right;
  color: rgba(255, 255, 255, 0.352);
  transition: color 0.5s ease;
}
.galleryArrowRight:hover {
  color: white;
}
@media (min-width: 667px) and (orientation: portrait) {
  .sentCrossGallery {
    position: absolute;
    top: 2vw;
    right: 2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.5vw;
    cursor: pointer;
    transition: transform 0.2s ease;
  }
  .galleryArrowLeft {
    font-size: 3.8vw;
    position: absolute;
    left: 0px;
    padding-left: 6vw;
    height: 60vh;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.352);
    transition: color 0.5s ease;
    z-index: 1;
  }
  .galleryArrowRight {
    font-size: 3.8vw;
    position: absolute;
    right: 0px;
    padding-right: 6vw;
    height: 60vh;
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: right;
    color: rgba(255, 255, 255, 0.352);
    transition: color 0.5s ease;
    z-index: 1;
  }
  .galleryPage h2 {
    font-size: 4vw;
    font-family: raleway;
    text-align: center;
    margin-bottom: 0;
    animation: logo 1.2s ease-in;
    padding-top: 2.5vw;
    margin-top: 0;
  }
  #gallerySpan {
    font-size: 1.8vw;
    margin-top: 1vw;

    color: #e2bf6e;
    font-family: raleway;
    width: 100%;
    text-align: center;
    animation: logo 1.2s ease-in;
  }
}
@media (max-width: 666px) {
  .galleryPage {
    min-height: calc(100vh - 19vw);
  }
}
@media only screen and (max-width: 666px) and (orientation: portrait) {
  .galleryPage {
    background-color: transparent;
    width: 100%;
    box-sizing: border-box;
    background-color: #0d0d0d;
    background-image: url(./img/Background\ 2.jpg);
    background-size: contain;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-position-y: 35vh;
    display: none;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 60vw);
    margin-top: 20vw;
    padding: 0 3vw;
  }

  .galleryPage h2 {
    font-size: 7vw;
    font-family: raleway;
    text-align: center;
    margin-bottom: 0;
    animation: logo 1.2s ease-in;
    padding-top: 2.5vw;
    margin-top: 0;
  }
  #gallerySpan {
    font-size: 3vw;
    margin-top: 1vw;

    color: #e2bf6e;
    font-family: raleway;
    width: 100%;
    text-align: center;
    animation: logo 1.2s ease-in;
  }
  .galleryPhotos {
    padding: 4vw 0vw;
    display: grid;
    grid-gap: 1.5vw;
    grid-template-rows: repeat(13, 30vw);
    grid-template-columns: repeat(2, 1fr);
    position: relative;
  }

  .galleryPhoto {
    cursor: pointer;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
    /*   border: 3px inset #e2bf6e; 
    /*   border-radius: 10px; */
  }

  .galleryPhoto:hover {
    transform: scale(1.02);
    box-shadow: 0 0 0.5vw rgba(255, 255, 255, 0.275);
  }

  #galleryPhoto1 {
    grid-column: 1;
    grid-row: 1;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 0.3s;
  }
  #galleryPhoto2 {
    grid-column: 2;
    grid-row: 1/3;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 0.6s;
  }
  #galleryPhoto3 {
    grid-column: 1;
    grid-row: 5;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 1s;
  }
  #galleryPhoto4 {
    grid-column: 1;
    grid-row: 6;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 1.15s;
  }
  #galleryPhoto5 {
    grid-column: 1;
    grid-row: 8;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 1.3s;
  }
  #galleryPhoto6 {
    grid-column: 1/3;
    grid-row: 3;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 0.75s;
  }
  #galleryPhoto7 {
    grid-column: 1;
    grid-row: 2;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 0.45s;
  }
  #galleryPhoto8 {
    grid-column: 1/2;
    grid-row: 4;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 1.2s;
  }
  #galleryPhoto9 {
    grid-column: 2;
    grid-row: 4;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 1.1s;
  }
  #galleryPhoto10 {
    grid-column: 2;
    grid-row: 5/7;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 1.1s;
  }
  #galleryPhoto11 {
    grid-column: 1;
    grid-row: 6/8;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 1.1s;
  }
  #galleryPhoto12 {
    grid-column: 2;
    grid-row: 7/9;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 1.1s;
  }
  #galleryPhoto13 {
    grid-column: 1/3;
    grid-row: 9/11;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 1.1s;
  }
  #galleryPhoto14 {
    grid-column: 1;
    grid-row: 11;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 1.1s;
  }
  #galleryPhoto15 {
    grid-column: 2;
    grid-row: 11/13;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 1.1s;
  }
  #galleryPhoto16 {
    grid-column: 2;
    grid-row: 13;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 1.1s;
  }
  #galleryPhoto17 {
    grid-column: 1;
    grid-row: 12/14;
    opacity: 0;
    animation: logo 1s ease-in forwards;
    animation-delay: 1.1s;
  }
  .openedPhoto {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.893);

    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    z-index: 10;
    display: none;
    animation: logo 0.3s ease;
  }
  .galleryPhotoOpened {
    position: absolute;
    border: 0.15vw solid rgba(255, 255, 255, 0.518);
    border-radius: 1.5vw;
  }
  #gallery1 {
    display: none;
  }
  #gallery2 {
    display: none;
  }
  #gallery3 {
    display: none;
  }
  #gallery4 {
    display: none;
  }
  #gallery5 {
    display: none;
  }
  #gallery6 {
    display: none;
  }
  #gallery7 {
    display: none;
  }
  #gallery8 {
    display: none;
  }
  #gallery9 {
    display: none;
  }
  #gallery10 {
    display: none;
  }
  #gallery11 {
    display: none;
  }
  #gallery12 {
    display: none;
  }
  #gallery14 {
    display: none;
  }
  #gallery15 {
    display: none;
  }
  #gallery16 {
    display: none;
  }
  #gallery17 {
    display: none;
  }
  #gallery13 {
    display: none;
  }
  .sentCrossGallery {
    position: absolute;
    top: 4vw;
    right: 4vw;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 7vw;
    cursor: pointer;
    transition: transform 0.2s ease;
  }
  .sentCrossGallery:hover {
    transform: scale(1.1);
  }
  .sentCrossGallery:active {
    transform: scale(0.97);
  }
  .galleryArrowLeft {
    font-size: 5vw;
    position: absolute;
    left: 0vw;
    padding-left: 7vw;
    height: 60vh;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.466);
    transition: color 0.5s ease;
    z-index: 10;
  }
  .galleryArrowLeft:hover {
    color: rgba(255, 255, 255, 0.466);
  }
  .galleryArrowRight {
    font-size: 5vw;
    position: absolute;
    right: 0px;
    padding-right: 7vw;
    height: 60vh;
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: right;
    color: rgba(255, 255, 255, 0.466);
    transition: color 0.5s ease;
    z-index: 10;
  }
  .galleryArrowRight:hover {
    color: rgba(255, 255, 255, 0.466);
  }
}
@keyframes logo {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}