.image-gallery-modal{
    display: block;
    text-align: center;
    width: 90wh !important;
    padding: 1rem 0 !important;
}
.image-modal{
    width: 300px;
    margin-bottom: 10px;
}
.modal-ext{
    background: rgb(23, 170, 201) !important;
}
.modal-ext-dialog{
    max-width: 950px !important;
    position: relative;
    top: 25%;
}
.modal-ext-2{
    right: 0 !important;
}
.modal-x{
    margin: 80px 0 100px 10px !important;
    padding: 0 17px !important;
}
.footer-spacer{
    height: 50px !important;
}
.sec-video{
    padding: 0 !important;
}
@media only screen and (max-width: 300px){
    .image-modal{
        max-width: 200px;
        margin-bottom: 10px;
    }

    .modal-ext-dialog{
        max-width: 680px !important;
    }
  }
  @media (min-width: 301px) and (max-width: 629px){
    .image-modal{
        max-width: 500px;
        margin-bottom: 10px;
    }

    .modal-ext-dialog{
        max-width: 680px !important;
    }
  }
  @media (min-width: 629px) and (max-width: 898px){
    .image-modal{
        width: 500px;
        margin-bottom: 10px;
    }

    .modal-ext-dialog{
        width: 600px !important;
    }
  }
  @media (min-width: 899px) and (max-width: 1024px){
    .image-modal{
        max-width: 280px;
        margin-bottom: 10px;
    }

    .modal-ext-dialog{
        max-width: 1100px !important;
    }
  }
  @media (min-width: 1025px) and (max-width: 1107px){
    .image-modal{
        width: 250px;
        margin-bottom: 10px;
    }

    .modal-ext-dialog{
        width: 800px !important;
    }
  }
  @media (min-width: 1108px){
    .image-modal{
        width: 300px;
        margin-bottom: 10px;
    }

    .modal-ext-dialog{
        width: 1000px !important;
    }
  }
  #video-player-xt{
    background-color: black;
    max-width: 400px;
  }
  @media only screen and (max-width: 400px){
    #video-player-xt{
        background-color: black;
        max-width: 300px;
      }
    }