/** {
        box-sizing: border-box;
      }*/

      /**
        @ADJUST margin

        The whitespace around the whole of the component
      */
      .paginationController {
        inset: 0;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        user-select: none;
      }

      .slideshowContainer {
        flex: 1 1 auto;
        align-self: center;
        height: fit-content;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: end;
		width:90%;
		margin-top:50px;
      }

      .slideWindow {
        overflow: hidden;
      }

      /**
        @ADJUST transition: margin-left DURATION TIMING_FUNCTION;

        Perfect the animation of the slide changing.  DURATION controls
        how long the animation takes and TIMING_FUNCTION describes how
        fast the animation goes with respect to time.

        `transition: margin-left 250ms ease;` was what the program you
        sent me used.

        See https://developer.mozilla.org/en-US/docs/Web/CSS/transition
        for more information.
      */
      .slideContainer {
        display: flex;
        flex-direction: row;
        justify-content: end;

        overflow: hidden;

        transition: margin-left 250ms ease;
      }

      .slide {
        flex: 0 1 auto;
        float: left;
        object-fit: scale-down;
      }
		
		img.slide{
			height:100%;
		}

      /**
        @ADJUST width

        The width of the slide advance buttons in desktop mode.

        @ADJUST transition: background-color DURATION TIMING_FUNCTION;

        The animation for the background-color change that occurs on
        hover.  Note that this doesn't determine the color to change to.
      */
      .prev,
      .next {
        cursor: pointer;
        flex: 0 0 auto;
        width: 100px;

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

        background-color: Transparent;
        transition: background-color 0.6s ease;
      }

      /**
        @ADJUST background-color

        The background color of the desktop-mode slide-advance buttons
        when being moused over.
      */
      .advanceIcon:hover {
        background-color: LightCyan;
      }

      /**
        @ADJUST padding-top

        The distance between the bottom bar with the slide numbers and
        the mobile-mode slide advance buttons and the slides themselves.
      */
      .bottomBar {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding-top: 50px;
		padding-bottom: 100px;
        width: 90%;
      }

      #bottomPrev,
      #bottomNext {
        flex: 1 1 auto;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .slideSelectorWindow {
        -webkit-border-fit: border !important;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      /**
        @ADJUST gap

        The distance between the slide numbers in the bottom bar.
      */
      .slideSelector {
        flex: 0 0 auto;

        display: flex;
        flex-flow: row wrap;
        gap: 3px;

        width: 100%;
      }

      /**
        @ADJUST height, width

        The dimensions of the slide numbers.

        @ADJUST background-color, color

        The colors of the slide numbers in the unselected state.

        @ADJUST transition: background-color DURATION TIMING_FUNCTION;

        The animation for when the slide number changes state.
      */
      .dot {
        flex: 0 0 auto;

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

        cursor: pointer;
        height: 25px;
        width: 25px;

        background-color: PowderBlue;
        color: Black;

        transition: background-color 0.6s ease;
      }

      /**
        @ADJUST background-color color

        The colors of the slide numbers in the selected state.
      */
      .active,
      .dot:hover {
        background-color: Black;
        color: White;
      }

      @media only screen and (max-width: 800px) {
        /**
          @ADJUST max-width

          The width of the slide number container in mobile mode.
        */
        .slideSelectorWindow {
          max-width: 137px;
        }
		  .bottomBar {
		  padding-top: 20px;
		}
      }