#IMOIzf4XxZtUuy3oZDBcrb8P p:nth-child(1) {
  position: relative;
  top: -10px;

  opacity: 0;
  animation: fadeInUp 1s ease-out forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Change color of intro text */
 
.col-event-jumbotron__left > h1 {
  color: #9E0918;
}

/* Center main title */
 
.event-jumbotron__left-right__title {
    text-align: center;
}

/* Bolden event date and time */

.itemInfos.event-jumbotron__date {
  font-weight: bold;      /* Make the text bold */
}

/* Reduce spacing on top of first registration button */

a#singlebutton.btn-primary:not(.js-event-registration-validate) {
  position: relative;
  top: -30px;
}

/* Add spacing below carousel */

.carousel-text {
  margin-bottom: 40px;
}

/* Change arrows on slider banner carousel */

/* Hide the default glyphicon arrows */
.carousel-control .glyphicon {
  display: none !important;  /* Hide default glyphicon arrows */
}

/* Left arrow custom image */
.carousel-control.left {
  background-image: url('https://cdn.ca.yapla.com/company/CPYMOyRtxSIJTKjnm0aYkZHwQ/asset/files/Left%20Arrow%20(4).png') !important;
  background-size: contain;      /* Ensure the image fits the control size */
  background-repeat: no-repeat;  /* Prevent tiling of the image */
  background-position: center;   /* Center the image within the control */
  width: 40px;                   /* Adjust width of the control */
  height: 40px;                  /* Adjust height of the control */
  padding: 0;                    /* Remove padding */
  transition: transform 0.3s ease, opacity 0.3s ease;  /* Smooth transition for scale and opacity */
}

/* Right arrow custom image */
.carousel-control.right {
  background-image: url('https://cdn.ca.yapla.com/company/CPYMOyRtxSIJTKjnm0aYkZHwQ/asset/files/Right%20Arrow%20(6).png') !important;
  background-size: contain;      /* Ensure the image fits the control size */
  background-repeat: no-repeat;  /* Prevent tiling of the image */
  background-position: center;   /* Center the image within the control */
  width: 40px;                   /* Adjust width of the control */
  height: 40px;                  /* Adjust height of the control */
  padding: 0;                    /* Remove padding */
  transition: transform 0.3s ease, opacity 0.3s ease;  /* Smooth transition for scale and opacity */
}

/* Optional: Hover effect for the arrows */
.carousel-control.left:hover,
.carousel-control.right:hover {
  opacity: 1;                    /* Full opacity on hover */
  transform: scale(1.2);          /* Scale up the image slightly */
}