* { box-sizing: border-box; }

body { font-family: sans-serif; }

/* force scrollbar, not necessary, but may reduce gaps. Setting a max-height on .carousel also works */
html { overflow-y: scroll; }

.carousel {
  background: #EEE;
  max-height: 500px;
}

.carousel img {
  display: block;
  height: 500px;
}

/* position dots in carousel */
.flickity-page-dots {
  bottom: 12px;
}
/* white circles */
.flickity-page-dots .dot {
  width: 12px;
  height: 12px;
  opacity: 1;
  background: transparent;
  border: 2px solid #003985;
}
/* fill-in selected dot */
.flickity-page-dots .dot.is-selected {
  background: #003985;
}