.carousel-unit { /* carousel is created within this container */
  float: right;
  background-color: #ffffff;
  width: 400px;
}
#this-carousel-id {
  margin: 0px;
  padding: 0px;
}
#carousel-wide {
  min-width: 100%;
  width: 100%;
  height: auto;
  bottom: 0%;
  left: 0%;
}
.carousel-title { /* this is within a carousel-unit, at the top */
  font-size: 30px;
  color: #660033;
  top: 0px;
  padding-top: 3px;
  padding-bottom: 3px;
  text-align: center;
}
.carousel-pic { /* this is a 4 picture region within which pictures are contained for the carousel */
  width: 100%;
}
.carousel-pic img { /* this is one of the pictures within the pic region */
  float: none;
  width: 48%;
  margin: 1px;
  border-style: none;
  border-width: 0px;
  border-color: none;
}
.carousel-blurb { /* this is the text beneath the pictures, at the bottom */
  font-size: 12px;
  color: #660033;
  height: 25px;
  text-align: center;
}
.carousel-control.left,
.carousel-control.right {  /* these are the arrows used to scroll to the next pictures */
  padding: 0px;
  margin: 0px;
  top: 4px; /* affects position of circle. in pixels so it is always the same no matter what the content of the carousel is */
  height: 20px; /* affects size of circle */
  width: 20px; /* affects size of circle */
  font-size: 30px; /* affects size of arrow */
  line-height: 50%; /* affects position of arrow within circle */
  background-color: #660033; /* changes color of circle */
}
@media (max-width: 400px) {
  .carousel-unit { /* carousel is created within this container */
    width: 100%;
  }
}