/* large & x-large resolution */
@media(min-width: 992px) { 
  /* -----CUSTOMIZE THE CAROUSEL----- */
  /* Carousel base class */
  .carousel {
    margin-top: 0rem;
    margin-bottom: 1.4rem;
  }
  /* Since positioning the image, we need to help out the caption */
  .carousel-caption {
    bottom: 3rem;
    z-index: 10;
  }

  /* Declare heights because of positioning of img element */
  .carousel-item {
    height: 26vw;
    background-color: #777;
  }

  .carousel-item > picture > img {
    height: 100%;
    margin-left: 50%;
    transform: translateX(-50%);
  }


  /* Declare heights because of static banner is shorter */
  .Scarousel-item {
    height: 20rem;
    background-color: #777;
  }

  .Scarousel-item > picture > img {
    height: 100%;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .AB > .A{
    /* disply: block; */
  }

  .AB > .B{
    display: none;
  }  
}

/* small & medium resolution */
@media(min-width: 576px){
  /* -----CUSTOMIZE THE CAROUSEL----- */
  /* Carousel base class */
  .carousel {
    margin-top: 0rem;
    margin-bottom: 1.4rem;
  }
  /* Since positioning the image, we need to help out the caption */
  .carousel-caption {
    bottom: 3rem;
    z-index: 10;
  }

  /* Declare heights because of positioning of img element */
  .carousel-item {
    height: 26vw;
    background-color: #777;
  }

  .carousel-item > picture > img {
    height: 100%;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  /* Declare heights because of static banner is shorter */
  .Scarousel-item {
    height: 20rem;
    background-color: #777;
  }

  .Scarousel-item > picture > img {
    height: 100%;
    margin-left: 50%;
    transform: translateX(-50%);
  }
  .AB > .A{
    /* disply: block; */
  }

  .AB > .B{
    display: none;
  }  
}

/* extra small resolution */
@media(max-width: 575.98px){
  /* -----CUSTOMIZE THE CAROUSEL----- */
  /* Carousel base class */
  .carousel {
    margin-top: 0rem;
    margin-bottom: 1.4rem;
  }
  /* Since positioning the image, we need to help out the caption */
  .carousel-caption {
    bottom: 3rem;
    z-index: 10;
  }

  /* Declare heights because of positioning of img element */
  .carousel-item {
/*     height: 30rem; */
	min-height: 50px;
    background-color: #777;
  }
 
  .carousel-item > picture > img {
    height: 100%;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  /* Declare heights because of static banner is shorter */
  .Scarousel-item {
    height: 20rem;
    background-color: #777;
  }

  .Scarousel-item > picture > img {
    height: 100%;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  .AB > .A{
    display: none;
  }

  .AB > .B{
    /* disply: block; */
  }
}