:root {
  --jumbotron-padding-y: 3rem;
}

.jumbotron {
  padding-top: var(--jumbotron-padding-y);
  padding-bottom: var(--jumbotron-padding-y);
  margin-bottom: 0;
  background-color: #fff;
}
@media (min-width: 768px) {
  .jumbotron {
  padding-top: calc(var(--jumbotron-padding-y) * 2);
  padding-bottom: calc(var(--jumbotron-padding-y) * 2);
  }
}

.jumbotron p:last-child {
  margin-bottom: 0;
}

.jumbotron-heading {
  font-weight: 300;
}

.jumbotron .container {
  max-width: 40rem;
}

footer {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

footer p {
  margin-bottom: .25rem;
}

.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

/* customisation for snapple media logo */
strong.logo {
  font-family: 'Monoton', cursive;
  font-weight: normal;
}

.navbar-brand {
  font-size: 1.6em;
}

/* Carousel base class */
.carousel {
  margin-bottom: 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: 32rem;
  background-color: #777;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 32rem;
}

/* customised carousel caption text background opacity */
.carousel-caption p {
margin-bottom: 0.1rem;
}

.carousel-caption p.last {
margin-bottom: 1.25rem;
}

.carousel-caption span {
  background: rgba(0,0,0,0.6);
  padding: 4px;
}

/* custom image zoom on gallery cards */

.image-box {
  position: relative;
  margin: auto;
  overflow: hidden;
  width: 348px;
  width: 100%;
}

.image-box img {
  max-width: 100%;
  transition: all 2.0s;
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1);
}

.image-box:hover img {
  transform: scale(1.9);
}

/* smooth scrolling with CSS */
html {
  scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Responsive CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 0.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  /* bigger logo text */
  .navbar-brand {
    font-size: 2.2em;
  }
}

@media (min-width: 62em) {
}