::-webkit-scrollbar{
  display: block !important;
}
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #841c17;
}
::-webkit-scrollbar-thumb:hover {
  background: #dc851f8f;
}

.galWrapper{

    width: 100%;
    height: 100%;

}

.imgContent{

  width: 100%;
  max-height: 100%;

  display: flex;
  /*flex-direction: column;
  justify-content: center;
  align-items: center;*/

  padding: 0rem;

  background: rgb(255,204,102);
  background: radial-gradient(circle, rgba(255,204,102,1) 0%, rgba(204,102,0,1) 100%);
}

.pics{


  /*min-width: 400px;
  min-height: 400px;*/

  /*width: 100%;*/
  width: 100%;

  /*max-height: 50rem;*/
  max-height: 100%;

  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;

  padding: 4rem;
  border-radius: 0px;
  /*background-color: #A6A092;*/
  background-color: transparent;

  /*box-shadow: 0px 0px 15px 4px #656565;*/
  box-shadow: 0px 0px 0px 0px #65656500;
}
.pics img{

  border: 1.5rem solid  #a6a092;

  border-radius: 0px;
  box-shadow: 0px 8px 20px 3px #331b02cc;

  width: 60%;
  height: auto;

  max-height: 600px;
  object-fit: contain;

  transition: all 1s ease-in-out;
  background-color: white;

}

.lightBox{

  max-height: 38rem !important;

}
.marginer{
  margin-top: 200px;
}

.control{

  position: absolute;
  width: 100%;
  height: auto;
  min-width: 320px;
  max-width: inherit;

  font-size: 8rem;
  font-weight: 900;
  color: black;

  display: flex;
  flex-direction: row;
  justify-content: space-between !important;
  align-items: center;

  margin-top: 0rem;
  border-radius: 0px;

  padding-left: 5rem;
  padding-right: 5rem;
}

.control div{

  width: 10rem;
  height: 12.5rem;
  display: flex;
  justify-content: center;
  text-align: center;
  vertical-align: middle;

  padding-top: 0.4rem;
  margin: 0rem;

  margin-top: -13rem;

  border-radius: 0%;
  background-color: #a25b4600;

  cursor: pointer;
  transition: all 1s ease-in-out;
}

.control div:hover{
  background-color: #331b0282;
}

.pics img:hover{
  width: 65%;
  height: auto;
  box-shadow: 0px 20px 20px 4px #331b02cc;
}

.pics div {

  /*border: 1px solid black;*/

  margin-top: 2rem;
  width: 60%;
  height: 13rem;

  display: flex;
  justify-content: center;

  flex-flow: row;

}

.backing{

    background-color: #827e7ec7;
    overflow-x: scroll;
    scroll-behavior: smooth;

    justify-content: left !important;
    transition: all 1s ease-in-out;

}
.reelPic{

  width: 24.9% !important;
  height: auto;

  margin-right: 0.1%;

  object-fit: cover !important;
  border: none !important;

  box-shadow:  0px 8px 20px 3px #331b02cc !important;

  cursor: pointer;
  opacity: 0.5;

}

.active{
  opacity: 1;
}

.reelPic:hover{

    opacity: 1;
}

.reelControl{

  margin-top: 0px !important;

  padding: 0px !important;

  width: 70% !important;

  box-shadow: 0px 8px 20px 3px #331b02cc !important;


}

.reelControl div{

  height: inherit;
  width: 10%;

  margin-top: 0px;

  font-size: 5rem;
  font-weight: 600;

  padding-left: 0%;
  padding-right: 0%;


}


@media all and (max-width: 600px) {

  .control{
    font-size: 3rem;
  }
  .control div{
    width: 5rem;
    height: 5rem;
    margin-top: 0rem;
  }


}

@media all and (max-width: 900px) {

  .control{
    padding-left: 1%;
    padding-right: 1%;
  }

}