@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:ital,wght@0,100..900;1,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
.body-smu{
	--cerulean: #5CC6CF;
    --blue: #139ad1;
    --magenta: #E84699;
    --orange: #F15A22;
    --purple: #6954A3;
    --teal: #06B5A8;
    --pink: #E13D96;
    --yellow: #F7BC18;
    --light-blue: #edf5f9;
    --easeout: cubic-bezier(0.39, 0.09, 0.08, 0.99);
    --bounce: cubic-bezier(0.39, 0.09, 0.58, 1.42);
    --shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
}

.body-smu h1, 
.body-smu h2,
.body-smu h3,
.body-smu h5,
.body-smu h6 {
	font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  color: var(--blue);
}
.main-container {
	// background-image: url(/sites/artsfest.smu.edu.sg/files/2024-07/background.jpg?fid=8856);
  // background-attachment: fixed;
}
.title-breadcrumbs {
	background: transparent !important;
}
h1.page-title {
	color: var(--cerulean);
	font-weight: 700;
}
.theme-color--purple h1.page-title,
.theme-color--purple h2 {
	color: var(--purple);
}
.theme-color--teal h1.page-title,
.theme-color--teal h2 {
	color: var(--teal);
}
.theme-color--magenta h1.page-title,
.theme-color--magenta h2 {
	color: var(--magenta);
}
.theme-color--orange h1.page-title,
.theme-color--orange h2 {
	color: var(--orange);
}
.theme-color--blue h1.page-title,
.theme-color--blue h2 {
	color: var(--blue);
}
.theme-color--cerulean h1.page-title,
.theme-color--cerulean h2 {
	color: var(--cerulean);
}
.body-smu .title-breadcrumbs .breadcrumb-item.active {
    color: #6c757d;
}
.body-smu .btn {
	font-family: "Libre Franklin", sans-serif !important;
	font-weight: 700;
	font-optical-sizing: auto;
	font-style: normal;
}

.af25-programme-highlights {
  position: relative;
  z-index: 2;
  padding: 5em 0;
  background: #004B80;
  background-size: 200%;
  background-position: 100%;
  text-align: center;
  animation: subtlebg 20s var(--easeout) infinite alternate;
}
@keyframes subtlebg {
  from {
    background-position: 100%;
  }
  to {
    background-position: 0%;
  }
}

.af25-programme-highlights figure {
  cursor: pointer;
}
.af25-programme-highlights img {
  width: 100%;
  border-radius: 1em;
  display: block;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
  transition: all 0.5s ease;
}
.af25-programme-highlights figure:hover img {
  transform: translate(-3px, -3px);
  box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.5);
}
.af25-programme-highlights figcaption {
  font-size: 1.3em;
  font-weight: bold;
  color: white;
  margin: 0.5em 0;
}

.af25-curator {
  position: relative;
  z-index: 2;
  padding: 5em 0;
  background: #6954A3;
  background: linear-gradient(90deg, #6954A3 0%, #2FA1A5 50%, #6954A3 100%);
  background-size: 200%;
  background-position: 100%;
  text-align: center;
  animation: subtlebg 20s var(--easeout) infinite alternate;
}
.block--local-tasks {
	bottom: 85px;
}

.bg-motif {
	background-image: url('/sites/artsfest.smu.edu.sg/themes/artsfest_5g/img/af25/motif-for-masthead.png?2');
	background-size: cover;
	background-position: center center;
}
.bg-light-blue {
	background-color: var(--light-blue);
}

.card-programme-specs, .card-motif {
	border: solid 4px var(--teal);
	border-radius: 10px;
	position: relative;
	margin: 30px 0 0 20px;
}
.card-programme-specs:before,
.card-programme-specs:after,
.card-motif:before,
.card-motif:after{
	content: '';
	position: absolute;
	background-image: url('/sites/artsfest.smu.edu.sg/themes/artsfest_5g/img/af25/motif-corners.png?2');
	width: 130px; height: 85px;
}
.card-programme-specs:before,
.card-motif:before{
	top:-20px;left: -20px;
}
.card-programme-specs:after,
.card-motif:after{
	bottom:-20px;right: -20px;
	transform: rotate(180deg);
}
.card-motif .card-body {
	padding: 3rem;
}

.af24-programme-lockup {
  width: 100%;
}
.af24-programme-lockup img {
  width: 100%;
  box-shadow: var(--shadow);
  display: block;
  border-radius: 1em;
}
.theme-color--purple .af24-programme-lockup img {
  border-color: var(--purple);
}
.theme-color--teal .af24-programme-lockup img {
  border-color: var(--teal);
}
.theme-color--magenta .af24-programme-lockup img {
  border-color: var(--magenta);
}
.theme-color--orange .af24-programme-lockup img {
  border-color: var(--orange);
}
.theme-color--cerulean .af24-programme-lockup img {
  border-color: var(--cerulean);
}

.af24-image-style img {
  border: 0.5em solid var(--yellow);
  border-radius: 1em;
  overflow: hidden;
  object-position: center;
  object-fit: cover;
  box-shadow: var(--shadow);
  height: 100%;
}
.af25-image-style {
	position: relative;
}
.af25-image-style img {
	border-radius: 10px;
  height: 100%;
}
.af25-image-style:before {
	content: '';
	position: absolute;
	bottom: -20px; right: -20px;
	background-image: url('/sites/artsfest.smu.edu.sg/themes/artsfest_5g/img/af25/img-flower.png?2');
	background-size: cover;
	width: 101px; height: 75px;
}

.af25-image-style.variant-2 img {
	border-radius: 10px;
	border: 0.5em solid var(--yellow);
  height: 100%;
}
.af25-image-style.variant-2:before {
	top: -20px; left: -20px;
	bottom: auto; right: auto;
	background-image: url('/sites/artsfest.smu.edu.sg/themes/artsfest_5g/img/af25/img-flower-2.png?3');
	width: 118px; height: 128px;
}
.af25-image-style.variant-3 img {
	border-radius: 10px;
  height: 100%;
}
.af25-image-style.variant-3:before {
	top: 0; left: -50px;
	bottom: auto; right: auto;
	background-image: url('/sites/artsfest.smu.edu.sg/themes/artsfest_5g/img/af25/motif-corners.png?2');
	width: 130px; height: 85px;
	transform: rotate(90deg) scale(1, -1);
}

.dxpr--ratio img {
	object-fit: cover;
	object-position: center;
	transform: translateY(0%) !important;
	top: 0 !important;
}
.dxpr--ratio.dxpr--ratio-4x3 img {
	aspect-ratio: 4 / 3;
}
.dxpr--ratio.dxpr--ratio-16x9 img {
	aspect-ratio: 16 / 9;
}
.dxpr--ratio.dxpr--ratio-1x1 img {
	aspect-ratio: 1 / 1;
}
.owl-buttons .owl-prev,
.owl-buttons .owl-next {
	background: var(--blue) !important;
	border-radius: 10px;
}
/***************
 * Accordion
 * 
 *  */
.accordion .accordion-item {
  margin-bottom: 2em;
}
.accordion .accordion-button {
  background: #9D2482;
  background: linear-gradient(90deg, #9D2482 0%, #cc42ad 33%, #9D2482 66%, #cc42ad 100%);
  background-size: 320%;
  background-position: 0;
  color: white;
  font-weight: bold;
  transition: background-position 0.8s ease;
}
.accordion .accordion-button::after {
  background-image: url("/sites/artsfest.smu.edu.sg/files/2024-07/chevron-down.svg");
}
.accordion .accordion-button:hover {
  background-position: 100%;
}
.accordion .accordion-button:focus {
  box-shadow: none;
}

.montserrat-400 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
  }
  .montserrat-700 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
  }
  .font-weight-bold {
    font-weight: bold;
  }
  body {
    padding-bottom: 4vw;
  }
  .page-scrolled--show-menu .main-container {
    margin-top: 40px;
  }
  .af25-main {
    position: relative;
    background-color: #9D2482;
  }
  .af25-landing {
    position: relative;
    min-height: 56vw;
    width: 100%;
    overflow: hidden;
    background-image: url('/sites/artsfest.smu.edu.sg/themes/artsfest_5g/img/af25/img-motif.png?2');
    background-position:center center;
    background-size: cover;
  }
  .af25-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
    background: url('../img/af25/background.jpg') no-repeat center / cover;
  }
  .af25-play {
    position: relative;
    height: 52vw;
  }
  .af25-play figure {
    position: absolute;
  }
  .af25-play figure img {
    width: 100%;
  }
  .af25-play .af25-presents {
    position: absolute;
    text-align: center;
    top: 39vw !important;
    left: 7vw !important;
    font-size: 1.2vw;
    width: 15vw;
    z-index: 3;
  }
  .af25-play .af25-presents p {
    margin-bottom: 0em;
  }
  .af25-play .af25-play--logo {
    top: 43vw !important;
    left: 9vw !important;
    width: 11vw;
    z-index: 3;
  }
  .af25-play .af25-radial {
    top: -25vh !important;
    left: -25vw !important;
    width: 150vw;
    height: 150vh;
    z-index: 2;
    background: radial-gradient(circle,rgba(157, 36, 130, 0) 0%, rgba(157, 36, 130, 1) 43%, rgba(10, 58, 110, 1) 69%);
  }
  .af25-play .af25-emblem {
    top: 2vw !important;
    left: 19.5vw !important;
    width: 55vw;
    z-index: 3;
  }
  .af25-play .af25-text-date {
    top: 32vw !important;
    left: 77vw !important;
    width: 14vw;
    z-index: 5;
  }
  .af25-play .af25-play--heart {
    top: 8vw !important;
    left: 48vw !important;
    width: 18vw;
    z-index: 5;
  }
  .af25-play .af25-play--time {
    position: absolute;
    top: 46vw !important;
    left: 77vw !important;
    font-size: 1vw;
    width: 18vw;
    z-index: 5;
  }
  .af25-play .af25-play--time p {
    margin-bottom: 0;
  }
  .af25-play .af25-play--time span {
    display: inline-block;
    margin: 0 5px;
  }
  .af25-play .af25-play--time .af25-play-timetext {
    font-size: 2em;
  }
  .af25-play .af25-play--time .af25-days-js {
    font-size: 2em;
    color: var(--blue);
  }
  .af25-play .af25-play--time .af25-mins-js {
    font-size: 2em;
    color: var(--magenta);
  }
  @media screen and (max-width: 767px) {
    .af25-play {
      height: 133vw;
    }
    .af25-play .af25-presents {
      text-align: left;
      top: 3vw !important;
      left: 5vw !important;
      font-size: 3.5vw;
      width: 50vw;
    }
    .af25-play .af25-emblem {
    	top: 20vw !important;
    	left: 4.5vw !important;
    	width: 90vw;
    }
    .af25-play .af25-play--logo {
      top: 3vw !important;
      left: 75vw !important;
      width: 25vw;
    }
    .af25-play .af25-p {
      top: 20vw !important;
      left: 11.5vw !important;
      width: 40vw;
    }
    .af25-play .af25-p img {
      transform: rotate(45deg);
    }
    .af25-play .af25-l {
      top: 48vw !important;
      left: -1vw !important;
      width: 38vw;
    }
    .af25-play .af25-l img {
      transform: rotate(-30deg);
    }
    .af25-play .af25-a {
      top: 69vw !important;
      left: 26vw !important;
      width: 41vw;
    }
    .af25-play .af25-a img {
      transform: rotate(15deg);
    }
    .af25-play .af25-y {
      top: 109vw !important;
      left: 48vw !important;
      width: 41vw;
    }
    .af25-play .af25-text-date {
      top: 100vw !important;
      left: 7vw !important;
      width: 20vw;
    }
    .af25-play .af25-play--heart {
      top: 57vw !important;
      left: 57vw !important;
      width: 33.9vw;
    }
    .af25-play .af25-play--time {
      top: 104vw !important;
      left: 68vw !important;
      font-size: 2vw;
      width: 70vw;
    }
  }
  .af25-social {
    position: fixed;
    bottom: 6vw;
    right: 2em;
    z-index: 11;
    border-radius: 1em;
    background-color: rgba(255, 255, 255, 0.8);
    overflow: hidden;
  }
  .af25-social .af25-social-btn {
    display: block;
    border-radius: 1em;
    padding: 1em;
    overflow: hidden;
    position: relative;
  }
  .af25-social .af25-social-btn img {
    width: 2em;
    position: relative;
    z-index: 1;
  }
  .af25-social .af25-social-btn::before {
    content: "";
    background: #fba919;
    transform: scale(0);
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.5s var(--easeout);
  }
  .af25-social .af25-social-btn:hover::before {
    transform: scale(100%);
  }
  @media screen and (max-width: 767px) {
    .af25-social {
      bottom: 3em;
      right: 1.5em;
    }
  }
  .af25-book {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10;
    width: 100%;
    height: 4vw;
    text-align: center;
    background: #e13d96;
    background: linear-gradient(90deg, rgba(250, 168, 25, 0.9) 0%, rgba(185, 0, 98, 0.9) 33%, rgba(250, 168, 25, 0.9) 67%, rgba(185, 0, 98, 0.9) 100%);
    background-size: 320%;
    background-position: 0%;
    transition: background-position 0.8s ease;
  }
  .af25-book:hover {
    background-position: 100%;
  }
  .af25-book--btn {
    background-color: var(--orange);
    display: inline-block;
    vertical-align: middle;
    line-height: 4vw;
    color: black !important;
    margin: 0 auto;
    height: 100%;
    padding: 0 1em;
    transition: all 0.3s var(--bounce) !important;
  }
  .af25-book--btn:hover,
  .af25-book--btn:focus {
    padding: 0 3em;
    border-radius: 2vw;
    text-decoration: none !important;
  }
  .af25-book--btn img {
    display: inline;
    margin-bottom: 0.5vw;
  }
  @media screen and (max-width: 767px) {
    body {
      padding-bottom: 0;
    }
    .af25-book {
      position: relative;
      height: 3em;
    }
    .af25-book--btn {
      line-height: 3em;
    }
    .af25-book--btn:hover,
    .af25-book--btn:focus {
      border-radius: 1.5em;
    }
  }
  @media screen and (max-width: 350px) {
    .af25-book--btn:hover {
      padding: 0 1em;
      border-radius: 0;
    }
    .af25-book {
      height: 3em;
      font-size: 5vw;
    }
  }
  
  .site-footer {
    position: relative;
    z-index: 1;
  }