.modal {
    position: fixed;
    top: 0;
    left: 0;
    width:100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);

}

.welcome-main {
    position:fixed;
    background: transparent;
    width: 100%;
    height: 100%;
    margin-top: 10vh;
    border-radius: 10px;
}
:focus {
    outline: -webkit-focus-ring-color #333 auto 5px;
}

.modalContainer {
    display: flex;
    width: 90%;
    flex-direction: row;
    margin: auto;
}

.modal-visible {
    display: block;
}

.welcomeModal {
    max-height: 80vh;
}

.carousel-container {
    /* border: 4px solid #A8DADC; */
    border-radius: 18px;
    position: relative;
    height: 50%;
    overflow: hidden;
    margin: auto;
}

.carousel-text {
    margin: 2% 0;
}

.carousel-img {
  width: 76%;
  min-height: 70%;
  height: 70%;
  border-radius: 25px;
  cursor: pointer;
  border: 5px solid transparent;
}
.carousel-img:hover {
  border: 5px solid rgba(240, 200, 8, 0.5);
  border-radius: 26px;
}

/* Next Image Classes */

.carousel-next-enter {
  left: 100%;
}

.carousel-next-enter.carousel-next-enter-active {
  left: 0;
  transition: left 500ms ease-in-out;
}

.carousel-next-leave {
  right: 0;
}

.carousel-next-leave.carousel-next-leave-active {
  right: 100%;
  transition: right 500ms ease-in-out;
}

/* Previous Image Classes */

.carousel-previous-enter {
  /* opacity: 0.01; */
  right: 100%;
}

.carousel-previous-enter.carousel-previous-enter-active {
  right: 0;
  transition: right 500ms ease-in-out;
}

.carousel-previous-leave {
  left: 0;
}

.carousel-previous-leave.carousel-previous-leave-active {
  left: 100%;
  transition: left 500ms ease-in-out;
}

/* Fade Image Classes */

.carousel-fade-enter {
  opacity: 0.01;
}

.carousel-fade-enter.carousel-fade-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in-out;
}

.carousel-fade-leave {
  opacity: 1;
}

.carousel-fade-leave.carousel-fade-leave-active {
  opacity: 0.01;
  transition: opacity 500ms ease-in-out;
}

/* Image Indicator */

.indicators {
    display: flex;
    width: 40%;
    margin: auto;
    margin-top: 3%;
    margin-bottom: 2%;
}

.indicators .dot {
    border: 2px solid #F0C808;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    height: 10px;
    margin: auto;
    width: 10px;
}

.indicators .dot.active {
    background-color: #F0C808;
}

.ImgAndArrowBox button i{
  font-size: 50px;
  color: #F0C808;
  margin: 0;
  opacity: .5;
}
.ImgAndArrowBox button:focus{
  outline: none;
}
.loadingImage {
  display: flex;
  align-items: center;
  justify-content: center;
}
.loadingImage img {
  transform: translateY(25%);
}
.genreLabel {
  opacity: .5;
}
.ReactModal__Body--open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

/* --------------------------------------- */
.ImgAndArrowBox{
  display: flex;
  justify-content: space-evenly;
  width: 100%;
}

@media only screen and (min-width: 321px) and (max-width: 750px) {
  /* .carousel-container {
    max-width: 100%;
    height: auto;
    width: 375px;
  } */
  .indicators {
    width: 80%;
  }
}
@media only screen and (min-width: 750px) {
  /* .carousel-container { */
    /* width: 400px;
    height: auto;
    margin: auto;
    max-height: 400px;
  } */
  .indicators{
      width: 50%;
      margin-top: 2%;
  }
}
@media only screen and (max-width: 450px){
  /* .carousel-container {
    width: 100%;
  } */
}
@media only screen and (max-width: 320px) {
  /* .carousel-container {
      max-height: 250px;
  } */
  .indicators {
      width: 80%;
    }
}.screenshot-carousel-container {
    /* border: 4px solid #A8DADC; */
    /* border-radius: 18px; */
    position: relative;
    height: 100%;
    width: 80%;
    /* overflow: hidden;
    margin: auto; */
}

/* .screenshot-carousel-text {
    margin: 2% 0;
} */

.screenshot-carousel-img {
  width: auto;
  max-height: 211px;
  min-height: 211px;
  max-width: 100%;
}

/* Next Image Classes */

.carousel-next-enter {
  left: 100%;
}

.carousel-next-enter.carousel-next-enter-active {
  left: 0;
  transition: left 500ms ease-in-out;
}

.screenshot-carousel-next-leave {
  right: 0;
}

.carousel-next-leave.carousel-next-leave-active {
  right: 100%;
  transition: right 500ms ease-in-out;
}

/* Previous Image Classes */

.carousel-previous-enter {
  /* opacity: 0.01; */
  right: 100%;
}

.carousel-previous-enter.carousel-previous-enter-active {
  right: 0;
  transition: right 500ms ease-in-out;
}

.carousel-previous-leave {
  left: 0;
}

.carousel-previous-leave.carousel-previous-leave-active {
  left: 100%;
  transition: left 500ms ease-in-out;
}

/* Fade Image Classes */

.carousel-fade-enter {
  opacity: 0.01;
}

.carousel-fade-enter.carousel-fade-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in-out;
}

.carousel-fade-leave {
  opacity: 1;
}

.carousel-fade-leave.carousel-fade-leave-active {
  opacity: 0.01;
  transition: opacity 500ms ease-in-out;
}

/* Image Indicator */

.screenshot-indicators {
    display: flex;
    width: 40%;
    margin: auto;
    margin-top: 3%;
    margin-bottom: 2%;
}

.screenshot-indicators .dot {
    border: 2px solid #F0C808;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
    height: 10px;
    margin: auto;
    width: 10px;
    opacity: .4;
}

.screenshot-indicators .dot.active {
    background-color: #F0C808;
}

button i{
  font-size: 50px;
  color: #086788;
  margin: 0 12px;
}
.loadingImage {
  display: flex;
  align-items: center;
  justify-content: center;
}
.loadingImage img {
  transform: translateY(25%);
}
.genreLabel {
  opacity: .5;
}

@media only screen and (max-width: 600px) {
  .screenshot-carousel-container {
    height: 100%;
    width: 80%;
}
.screenshot-indicators {
  width: 80%;
}

}
/* ========================================== */
.screenshotBox{
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 20px;
}
.leftButton, .rightButton{
  position: absolute;
  font-size: 1.5em;
  height: 211px;
  opacity: .7;
}
.leftButton{
  left: 5vmin;
}
.rightButton{
  right: 5vmin;
}
.leftButton i{
  color: #086788;
  margin: 0 5px 0 0;
  text-shadow: 0px 0px 10px snow;
}
.rightButton i{
  color: #086788;
  margin: 0 0 0 5px;
  text-shadow: 0px 0px 10px snow;
}
.screenshotBox :focus{
  outline: none;
}
.screenshotModalCloseX{
  display: flex;
  justify-content: center;
  position: absolute;
  top: 25px;
  right: 24px;
  height: 35px;
  width: 35px;
}
.closeX1{
  background: darkgray;
  border-radius: 15px;
  width: 5px;
  transform: rotate(45deg);
}
.closeX2{
  position: absolute;
  right: 15px;
  background: darkgray;
  border-radius: 15px;
  width: 5px;
  height: 35px;
  transform: rotate(-45deg);
}