.gotham-light,
.gotham-light-italic {

  font-family: "HCO Gotham Light";
  font-weight: 300;

}
.gotham-light-italic {

  font-style: italic;
  
}

.fouc {
  display: none;
}

.card-img-top {
  max-height: unset;
}

.uppercase {
  text-transform: uppercase;
}

blockquote {
  font-family: "HCo Gotham", sans-serif;
  padding: var(--fc-spacer-6);
  color: #000;
  background-color: var(--fc-dorian);
  margin: 0;
  font-size: var(--fc-large-text);
  line-height: 1.2;
  position: relative;
}

blockquote::before {
  display: block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font: var(--fa-font-sharp-solid);
  color: var(--fc-bright-iris-2);
  content: "\f10d";
  margin-bottom: 1rem;
  font-size: var(--fc-large-text);
  position: relative;
}

blockquote cite {
  position: relative;
}

blockquote cite::after {
  display: block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font: var(--fa-font-sharp-solid);
  color: var(--fc-bright-iris-2);
  content: "\f10e";
  margin-bottom: 1rem;
  font-size: var(--fc-large-text);
  position: absolute;
  right: 0;
  top: -0.5rem;
}

blockquote cite {
  color: var(--fc-bright-iris-2);
  display: block;
  font-weight: bold;
  font-size: var(--fc-normal-text);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-style: normal;
  padding-top: 2rem;
}

@media (min-width: 576px) {
  ul.two-column {
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
    column-gap: 4rem;
  }
  ul.two-column li {
    break-inside: avoid-column;
  }
}

/*------------------------------------ BTN  ------------------------------------/*

/*!
    Styles to progressively enhance the .btn class from BS v5.2

    @version 1
    @used http://flemingcollege.ca/*
    @TODO 
    @module BTN
*/

.dropdown-toggle::after {
  margin-left: 0.5rem;
}

.dropdown-item .form-check label {
  white-space: normal;
}

.nav-pills {
  --bs-nav-pills-border-radius: 0.375rem;
  --bs-nav-pills-link-active-color: #000;
  --bs-nav-pills-link-color: #000;
  --bs-nav-pills-link-active-bg: var(--fc-fleming-teal);
  --bs-nav-link-font-weight: bold;
  --bs-nav-link-color: #fff;
  --bs-nav-link-disabled-color: #6c757d;

  --bs-nav-pills-border-radius: 2rem;
}

.nav-pills .nav-link {
  border: 1px solid var(--fc-fleming-teal);
  margin-bottom: 8px;
  margin-right: 16px;
  background-color: #fff;
  color: #000;
}

.nav-pills .nav-link:hover {
  background-color: var(--fc-fleming-teal-3);
}

.filter-pill-tag,
.filter-pill-topic,
.filter-pill-filter {
  position: relative;
  padding-top: 1rem;
}
.filter-pill-tag::before {
  content: "TAG";
  position: absolute;
  top: 0;
  left: 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--fc-light-slate);
}

/* There's no first-of-class selector.  This is a workaround.
 * Select all .filter-pill-topic, including the first one,
 * and give them styles.
 */
 .filter-pill-topic:not(:first-of-type),
 .filter-pill-filter:not(:first-of-type) {
   border-left: 1px solid var(--fc-dorian);
 }

.filter-pill-topic::before,
.filter-pill-filter::before {
  content: "TOPIC";
  position: absolute;
  top: 0;
  left: 1rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--fc-light-slate);
}
.filter-pill-filter::before {
  content: "FILTER";
}

/* 
 * Select all but the first .filter-pill-topic,
 * and remove the styles from the previous rule.
 */
.filter-pill-topic ~ .filter-pill-topic::before,
.filter-pill-filter ~ .filter-pill-filter::before {
  content: "";
  display: none;
}
.filter-pill-topic ~ .filter-pill-topic,
.filter-pill-filter ~ .filter-pill-filter {
  border-left: 1px solid transparent;
}

.btn-filter-pill {
  --bs-btn-color: #000;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: rgb(0, 0, 0, 10%);
  --bs-btn-border-radius: 0;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #000;
  --bs-btn-hover-border-color: rgb(0, 0, 0, 10%);
  --bs-btn-focus-shadow-rgb: rgb(75, 77, 237, 100%);
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: rgb(0, 0, 0, 100%);
  position: relative;
  font-size: 60%;
}

.btn-filter-pill.filter-alt {
  /*
  --bs-btn-color: var(--fc-fleming-black);
  --bs-btn-bg: var(--fc-bright-iris-4);
  --bs-btn-border-color: var(--fc-bright-iris-3);
  --bs-btn-border-radius: 0.8rem;
  --bs-btn-hover-color: var(--fc-fleming-black);
  --bs-btn-hover-bg: var(--fc-bright-iris-3);
  --bs-btn-hover-border-color: var(--fc-bright-iris-4);
  --bs-btn-focus-shadow-rgb: rgb(var(--fc-bright-iris-rgb), 100%);
  --bs-btn-active-color: var(--fc-fleming-black);
  --bs-btn-active-bg: var(--fc-bright-iris-3);
  --bs-btn-active-border-color: var(--fc-bright-iris-4);
  position: relative;
  font-size: 60%;  
 */
  opacity: 80%;
}
.btn-filter-pill.filter-alt.mute {
  /*
  --bs-btn-color: var(--fc-fleming-black);
  --bs-btn-bg: var(--fc-bright-iris-4);
  --bs-btn-border-color: var(--fc-bright-iris-3);
  --bs-btn-border-radius: 0.8rem;
  --bs-btn-hover-color: var(--fc-fleming-black);
  --bs-btn-hover-bg: var(--fc-bright-iris-3);
  --bs-btn-hover-border-color: var(--fc-bright-iris-4);
  --bs-btn-focus-shadow-rgb: rgb(var(--fc-bright-iris-rgb), 100%);
  --bs-btn-active-color: var(--fc-fleming-black);
  --bs-btn-active-bg: var(--fc-bright-iris-3);
  --bs-btn-active-border-color: var(--fc-bright-iris-4);
  position: relative;
  font-size: 60%;  
 */
  opacity: 40%;
}

.btn-filter-pill::after {
  /* These styles are required to make icons render reliably 
	https://fontawesome.com/docs/web/add-icons/pseudo-elements
	*/
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  /**/
  /* Note: Make sure to include the correct weight and Unicode value for the icon */
  font: var(--fa-font-sharp-solid);
  content: "\f057";
  color: #000;
  border-radius: 50%;
  opacity: 20%;
  position: absolute;
  top: -9px;
  right: -9px;
  font-size: 1.75em;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
    opacity 0.15s ease-in-out;
  background-color: #fff;
}

.btn-filter-pill:hover::after {
  opacity: 1;
}

.btn-filter-tag-pill {
  --bs-btn-color: var(--fc-fleming-white);
  --bs-btn-bg: var(--fc-bright-iris-2);
  --bs-btn-border-color: rgb(0, 0, 0, 10%);
  --bs-btn-border-radius: 0;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #000;
  --bs-btn-hover-border-color: rgb(0, 0, 0, 10%);
  --bs-btn-focus-shadow-rgb: rgb(75, 77, 237, 100%);
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: rgb(0, 0, 0, 100%);

  position: relative;
  font-size: 60%;
}

.btn-filter-tag-pill::after {
  /* These styles are required to make icons render reliably 
	https://fontawesome.com/docs/web/add-icons/pseudo-elements
	*/
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  /**/
  /* Note: Make sure to include the correct weight and Unicode value for the icon */
  font: var(--fa-font-sharp-solid);
  content: "\f057";
  color: #000;
  border-radius: 50%;
  opacity: 0%;
  position: absolute;
  top: -9px;
  right: -9px;
  font-size: 1.75em;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
    opacity 0.15s ease-in-out;
  background-color: #fff;
}

.btn-filter-tag-pill:hover::after {
  opacity: 1;
}
.btn-check:checked + .btn-filter-tag-pill {
  color: var(--fc-fleming-black);
  background-color: var(--fc-fleming-white);
  border-color: var(--fc-bright-iris-2);
  border-bottom-color: var(--fc-fleming-white);
}

.btn-filter-clear,
.btn-filter-tool {
  --bs-btn-color: #fff;
  --bs-btn-bg: #4e4ded;
  --bs-btn-border-color: #ccc;
  --bs-btn-hover-color: #4e4ded;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #4e4ded;
  --bs-btn-focus-shadow-rgb: rgb(75, 77, 237, 100%);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4949ed;
  --bs-btn-active-border-color: rgb(255, 255, 255, 80%);

  position: relative;
  font-size: 80%;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  padding-left: 2em;
  margin-bottom: 1rem;
}

.btn-filter-clear::before,
.btn-filter-tool::before {
  /* These styles are required to make icons render reliably 
	https://fontawesome.com/docs/web/add-icons/pseudo-elements
	*/
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  /**/
  /* Note: Make sure to include the correct weight and Unicode value for the icon */
  font: var(--fa-font-sharp-solid);
  content: "";
  border-radius: 50%;
  position: absolute;
  top: 9px;
  left: 8px;
  transition: opacity 0.15s ease-in-out;
}

.btn-filter-clear::before {
  content: "\f057";
}

.btn-filter-clear:hover::after,
.btn-filter-tool:hover::after {
  opacity: 1;
}

.dark-red-background .btn-filter-tool {
  --bs-btn-color: var(--fc-darker-red);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--fc-darker-red);
  --bs-btn-hover-color: var(--fc-red);
  --bs-btn-hover-bg: var(--fc-cloud);
  --bs-btn-hover-border-color: var(--fc-red);
  --bs-btn-focus-shadow-rgb: rgb(var(--fc-red-rgb), 100%);
  --bs-btn-active-color: var(--fc-darker-red);
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: rgb(var(--fc-red), 80%);
}

.btn-filter-dropdown {
  --bs-btn-color: #000;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #ccc;
  --bs-btn-border-radius: 2rem;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #333;
  --bs-btn-focus-shadow-rgb: rgb(75, 77, 237, 100%);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4e4ded;
  --bs-btn-active-border-color: rgb(255, 255, 255, 80%);

  padding: 0.375rem 1.5rem;
  margin-bottom: 1rem;
}

.blue-background .btn-filter-dropdown {
  --bs-btn-color: #fff;
  --bs-btn-bg: #4e4ded;
  --bs-btn-border-color: rgb(255, 255, 255, 60%);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #4949ed;
  --bs-btn-hover-border-color: rgb(255, 255, 255, 100%);
  --bs-btn-focus-shadow-rgb: rgb(75, 77, 237, 100%);
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: rgb(75, 77, 237, 80%);
}

.accordion-item {
  margin-top: 8px;
  margin-bottom: 0;
}

.accordion-header {
  margin-top: 0;
}

.accordion,
.white-background .accordion {
  --bs-accordion-border-color: rgb(var(--fc-fleming-black-rgb), 0.6);
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-color: var(--fc-fleming-white);
  --bs-accordion-btn-bg: var(--fc-fleming-black);
  --bs-accordion-btn-focus-border-color: var(--fc-bright-iris-4);
  --bs-accordion-active-color: var(--fc-fleming-white);
  --bs-accordion-active-bg: var(--fc-slate);

  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem
    rgba(var(--fc-bright-iris-4-rgb), 0.8);
  --bs-accordion-active-color: var(--fc-fleming-white);
  --bs-accordion-active-bg: var(--fc-fleming-black);

  --bs-accordion-btn-icon-color: var(--fc-fleming-white);
}

.accordion-button::after {
  font-family: "Font Awesome 6 Pro";
  background-image: none;
  content: "\f078";
  transition: var(--bs-accordion-btn-icon-transition);
  transform-origin: center;
}

.accordion-button:not(.collapsed)::after {
  background-image: none;
}

.black-background .accordion {
  --bs-accordion-btn-border-color: rgb(var(--fc-fleming-white-rgb), 0.6);
  --bs-accordion-btn-color: var(--fc-fleming-black);
  --bs-accordion-btn-bg: var(--fc-fleming-white);
  --bs-accordion-btn-focus-border-color: var(--fc-bright-iris-4);
  --bs-accordion-active-color: var(--fc-fleming-white);
  --bs-accordion-active-bg: var(--fc-slate);
}

.blue-background .accordion {
  --bs-accordion-btn-focus-border-color: var(--fc-bright-iris-4);
  --bs-accordion-active-color: var(--fc-fleming-white);
  --bs-accordion-active-bg: var(--fc-slate);
}

.accordion-item {
  background-color: var(--bs-accordion-bg);
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

.saving {
  position: relative;
  --border-size: 3px;
  --border-angle: 0turn;
  background-image: conic-gradient(
      from var(--border-angle),
      #fff,
      #fff 50%,
      #fff
    ),
    conic-gradient(from var(--border-angle), transparent 20%, #f6921e, #b46204);
  background-size: calc(100% - (var(--border-size) * 2))
      calc(100% - (var(--border-size) * 2)),
    cover;
  background-position: center center;
  background-repeat: no-repeat;
  animation: borderSave 1s linear infinite;
}

@keyframes borderSave {
  to {
    --border-angle: 1turn;
  }
}


.nav-iconbox li {
  position: relative;
  text-align: center;
  max-width: 5rem;

}

.nav-iconbox li a {
  padding: 0.5rem 0.5rem 1rem 0.5rem;
  text-decoration: none;
  font-size: 1rem;
  display: block;
  word-spacing: 100vw;
  line-height: 1;
}

.nav-iconbox li a.active {
  z-index: 100;
}
.nav-iconbox li a.active::after {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  width: 0;
  height: 0;
  border: solid transparent;
    border-top-width: medium;
    border-top-color: transparent;
    border-right-width: medium;
    border-bottom-width: medium;
    border-left-width: medium;
  border-width: 10px;
  border-top-color: #fff;
  content: '';
  pointer-events: none;
}

.nav-iconbox li.iconbox-winter {
  background-color: var(--fc-fleming-teal);
  color: var(--fc-fleming-white)!important;
}
.nav-iconbox li.iconbox-winter a {
  color: #000!important;
}
.nav-iconbox li.iconbox-winter:hover {
  background-color: var(--fc-fleming-teal-4);
  color: var(--fc-darker-green)!important;
}
.nav-iconbox li.iconbox-winter:hover a {
  color: var(--fc-fleming-teal)!important;
  text-shadow: 1px 1px #000000;
}
.nav-iconbox li.iconbox-winter a.active::after {
  border-top-color: var(--fc-fleming-teal);
}
.nav-iconbox li.iconbox-winter:hover a.active::after {
  border-top-color: var(--fc-fleming-teal-4);
}

.nav-iconbox li.iconbox-spring {
  background-color: var(--fc-darker-green);
  color: var(--fc-fleming-white)!important;
}
.nav-iconbox li.iconbox-spring a {
  color: var(--fc-green)!important;
  text-shadow: 1px 1px #000000;
}
.nav-iconbox li.iconbox-spring a.active::after {
  border-top-color: var(--fc-darker-green);

}
.nav-iconbox li.iconbox-spring:hover {
  background-color: var(--fc-green);
  color: var(--fc-darker-green)!important;
}
.nav-iconbox li.iconbox-spring:hover a {
  color: var(--fc-darker-green)!important;
  text-shadow: 1px 1px #000000;
}
.nav-iconbox li.iconbox-spring:hover a.active::after {
  border-top-color: var(--fc-green);

}

.nav-iconbox li.iconbox-fall {
  background-color: var(--fc-darker-orange);
  color: var(--fc-fleming-white)!important;
}
.nav-iconbox li.iconbox-fall a {
  color: var(--fc-orange)!important;
  text-shadow: 1px 1px #000000;
}
.nav-iconbox li.iconbox-fall a.active::after {
  border-top-color: var(--fc-darker-orange);

}

.nav-iconbox li.iconbox-fall:hover {
  background-color: var(--fc-orange);
  color: var(--fc-fleming-white)!important;
}
.nav-iconbox li.iconbox-fall:hover a {
  color: var(--fc-darker-orange)!important;
  text-shadow: 1px 1px #000000;
}
.nav-iconbox li.iconbox-fall:hover a.active::after {
  border-top-color: var(--fc-orange);

}


/*  X-Small devices (portrait phones, less than 576px) */
/*  No media query for `xs` since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	.nav-iconbox li {
    min-width: 7rem;
  
  }
  
  .nav-iconbox li a {
    padding: 0.75rem 0.75rem 1.25rem 0.75rem;
    font-size: 1.5rem;
  }
}

/*  Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.nav-iconbox li {
    min-width: 9rem;
  
  }
  
  .nav-iconbox li a {
    padding: 1rem 1rem 1.5rem 1rem;
    font-size: 1.75rem;
  }
}

/*  Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.nav-iconbox li {
    min-width: 13rem;
  
  }
  
  .nav-iconbox li a {
    padding: 1.25rem 1.25rem 1.75rem 1.25rem;
    font-size: 2rem;
  }
}

/*  X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .nav-iconbox li {
    min-width: 17rem;
  
  }
  
  .nav-iconbox li a {
    padding: 1.75rem 1.75rem 2.25rem 1.75rem;
    font-size: 2.25rem;
  }
}


/*------------------------------------ Modal  ------------------------------------/*

/*!
    Progressively enhance BS 5 Modals https://getbootstrap.com/docs/5.2/components/modal

    @version 1
    @used http://flemingcollege.ca/programs/*
    @TODO 
    @module MOdal
*/

.modal {
  --bs-modal-border-radius: 0;
  --bs-modal-header-border-width: 0;
  --bs-modal-footer-border-width: 0;
}

.modal .btn-close {
  opacity: 1;
  font-size: 1.5rem;
}

.modal-fullscreen .modal-content .btn-close {
  color: var(--fc-fleming-black);
  background-color: var(--fc-fleming-white);
  font-size: 1rem;
  position: absolute;
  right: 10%;
}

@media (min-width: 992px) {
  .modal-fullscreen .modal-content .btn-close {
    font-size: 1.75rem;
  }
}

/*------------------------------------ Ratios  ------------------------------------/*

/*!
    Progressively enhance BS 5 Ratios https://getbootstrap.com/docs/5.2/helpers/ratio/

    @version 1
    @used 
    @TODO 
    @module Ratios
*/
.ratio-1x1 {
  --bs-aspect-ratio: 100%;
}

.ratio-1x2 {
  --bs-aspect-ratio: 200%;
}

.ratio-2x1 {
  --bs-aspect-ratio: 50%;
}

.ratio-1x3 {
  --bs-aspect-ratio: 300%;
}

.ratio-3x1 {
  --bs-aspect-ratio: 33.3333333333%;
}

.ratio-1x4 {
  --bs-aspect-ratio: 400%;
}

.ratio-4x1 {
  --bs-aspect-ratio: 25%;
}

.ratio-1x5 {
  --bs-aspect-ratio: 500%;
}

.ratio-5x1 {
  --bs-aspect-ratio: 20%;
}

.ratio-3x2 {
  --bs-aspect-ratio: 66.6666666667%;
}

.ratio-2x3 {
  --bs-aspect-ratio: 150%;
}

.ratio-3x4 {
  --bs-aspect-ratio: 133.3333333333%;
}

.ratio-4x3 {
  --bs-aspect-ratio: 75%;
}

.ratio-16x9 {
  --bs-aspect-ratio: 56.25%;
}

.ratio-9x16 {
  --bs-aspect-ratio: 177.7777777778%;
}

.ratio-21x9 {
  --bs-aspect-ratio: 42.8571428571%;
}

.ratio-9x21 {
  --bs-aspect-ratio: 233.3333333333%;
}

.ratio-9x32 {
  --bs-aspect-ratio: 355.5555555556%;
}

.ratio-32x9 {
  --bs-aspect-ratio: 28.125%;
}

/* X-Small */
@media (max-width: 575px) {
  .ratio-xs-1x1 {
    --bs-aspect-ratio: 100%;
  }

  .ratio-xs-1x2 {
    --bs-aspect-ratio: 200%;
  }

  .ratio-xs-2x1 {
    --bs-aspect-ratio: 50%;
  }

  .ratio-xs-1x3 {
    --bs-aspect-ratio: 300%;
  }

  .ratio-xs-3x1 {
    --bs-aspect-ratio: 33.3333333333%;
  }

  .ratio-xs-1x4 {
    --bs-aspect-ratio: 400%;
  }

  .ratio-xs-4x1 {
    --bs-aspect-ratio: 25%;
  }

  .ratio-xs-1x5 {
    --bs-aspect-ratio: 500%;
  }

  .ratio-xs-5x1 {
    --bs-aspect-ratio: 20%;
  }

  .ratio-xs-3x2 {
    --bs-aspect-ratio: 66.6666666667%;
  }

  .ratio-xs-2x3 {
    --bs-aspect-ratio: 150%;
  }

  .ratio-xs-3x4 {
    --bs-aspect-ratio: 133.3333333333%;
  }

  .ratio-xs-4x3 {
    --bs-aspect-ratio: 75%;
  }

  .ratio-xs-16x9 {
    --bs-aspect-ratio: 56.25%;
  }

  .ratio-xs-9x16 {
    --bs-aspect-ratio: 177.7777777778%;
  }

  .ratio-xs-21x9 {
    --bs-aspect-ratio: 42.8571428571%;
  }

  .ratio-xs-9x21 {
    --bs-aspect-ratio: 233.3333333333%;
  }

  .ratio-xs-9x32 {
    --bs-aspect-ratio: 355.5555555556%;
  }

  .ratio-xs-32x9 {
    --bs-aspect-ratio: 28.125%;
  }
}

/* Small */
@media (min-width: 576px) {
  .ratio-sm-1x1 {
    --bs-aspect-ratio: 100%;
  }

  .ratio-sm-1x2 {
    --bs-aspect-ratio: 200%;
  }

  .ratio-sm-2x1 {
    --bs-aspect-ratio: 50%;
  }

  .ratio-sm-1x3 {
    --bs-aspect-ratio: 300%;
  }

  .ratio-sm-3x1 {
    --bs-aspect-ratio: 33.3333333333%;
  }

  .ratio-sm-1x4 {
    --bs-aspect-ratio: 400%;
  }

  .ratio-sm-4x1 {
    --bs-aspect-ratio: 25%;
  }

  .ratio-sm-1x5 {
    --bs-aspect-ratio: 500%;
  }

  .ratio-sm-5x1 {
    --bs-aspect-ratio: 20%;
  }

  .ratio-sm-3x2 {
    --bs-aspect-ratio: 66.6666666667%;
  }

  .ratio-sm-2x3 {
    --bs-aspect-ratio: 150%;
  }

  .ratio-sm-3x4 {
    --bs-aspect-ratio: 133.3333333333%;
  }

  .ratio-sm-4x3 {
    --bs-aspect-ratio: 75%;
  }

  .ratio-sm-16x9 {
    --bs-aspect-ratio: 56.25%;
  }

  .ratio-sm-9x16 {
    --bs-aspect-ratio: 177.7777777778%;
  }

  .ratio-sm-21x9 {
    --bs-aspect-ratio: 42.8571428571%;
  }

  .ratio-sm-9x21 {
    --bs-aspect-ratio: 233.3333333333%;
  }

  .ratio-sm-9x32 {
    --bs-aspect-ratio: 355.5555555556%;
  }

  .ratio-sm-32x9 {
    --bs-aspect-ratio: 28.125%;
  }
}

/* Medium */
@media (min-width: 768px) {
  .ratio-md-1x1 {
    --bs-aspect-ratio: 100%;
  }

  .ratio-md-1x2 {
    --bs-aspect-ratio: 200%;
  }

  .ratio-md-2x1 {
    --bs-aspect-ratio: 50%;
  }

  .ratio-md-1x3 {
    --bs-aspect-ratio: 300%;
  }

  .ratio-md-3x1 {
    --bs-aspect-ratio: 33.3333333333%;
  }

  .ratio-md-1x4 {
    --bs-aspect-ratio: 400%;
  }

  .ratio-md-4x1 {
    --bs-aspect-ratio: 25%;
  }

  .ratio-md-1x5 {
    --bs-aspect-ratio: 500%;
  }

  .ratio-md-5x1 {
    --bs-aspect-ratio: 20%;
  }

  .ratio-md-3x2 {
    --bs-aspect-ratio: 66.6666666667%;
  }

  .ratio-md-2x3 {
    --bs-aspect-ratio: 150%;
  }

  .ratio-md-3x4 {
    --bs-aspect-ratio: 133.3333333333%;
  }

  .ratio-md-4x3 {
    --bs-aspect-ratio: 75%;
  }

  .ratio-md-16x9 {
    --bs-aspect-ratio: 56.25%;
  }

  .ratio-md-9x16 {
    --bs-aspect-ratio: 177.7777777778%;
  }

  .ratio-md-21x9 {
    --bs-aspect-ratio: 42.8571428571%;
  }

  .ratio-md-9x21 {
    --bs-aspect-ratio: 233.3333333333%;
  }

  .ratio-md-9x32 {
    --bs-aspect-ratio: 355.5555555556%;
  }

  .ratio-md-32x9 {
    --bs-aspect-ratio: 28.125%;
  }
}

/* Large */
@media (min-width: 992px) {
  .ratio-lg-1x1 {
    --bs-aspect-ratio: 100%;
  }

  .ratio-lg-1x2 {
    --bs-aspect-ratio: 200%;
  }

  .ratio-lg-2x1 {
    --bs-aspect-ratio: 50%;
  }

  .ratio-lg-1x3 {
    --bs-aspect-ratio: 300%;
  }

  .ratio-lg-3x1 {
    --bs-aspect-ratio: 33.3333333333%;
  }

  .ratio-lg-1x4 {
    --bs-aspect-ratio: 400%;
  }

  .ratio-lg-4x1 {
    --bs-aspect-ratio: 25%;
  }

  .ratio-lg-1x5 {
    --bs-aspect-ratio: 500%;
  }

  .ratio-lg-5x1 {
    --bs-aspect-ratio: 20%;
  }

  .ratio-lg-3x2 {
    --bs-aspect-ratio: 66.6666666667%;
  }

  .ratio-lg-2x3 {
    --bs-aspect-ratio: 150%;
  }

  .ratio-lg-3x4 {
    --bs-aspect-ratio: 133.3333333333%;
  }

  .ratio-lg-4x3 {
    --bs-aspect-ratio: 75%;
  }

  .ratio-lg-16x9 {
    --bs-aspect-ratio: 56.25%;
  }

  .ratio-lg-9x16 {
    --bs-aspect-ratio: 177.7777777778%;
  }

  .ratio-lg-21x9 {
    --bs-aspect-ratio: 42.8571428571%;
  }

  .ratio-lg-9x21 {
    --bs-aspect-ratio: 233.3333333333%;
  }

  .ratio-lg-9x32 {
    --bs-aspect-ratio: 355.5555555556%;
  }

  .ratio-lg-32x9 {
    --bs-aspect-ratio: 28.125%;
  }
}

/* Extra large */
@media (min-width: 1200px) {
  .ratio-xl-1x1 {
    --bs-aspect-ratio: 100%;
  }

  .ratio-xl-1x2 {
    --bs-aspect-ratio: 200%;
  }

  .ratio-xl-2x1 {
    --bs-aspect-ratio: 50%;
  }

  .ratio-xl-1x3 {
    --bs-aspect-ratio: 300%;
  }

  .ratio-xl-3x1 {
    --bs-aspect-ratio: 33.3333333333%;
  }

  .ratio-xl-1x4 {
    --bs-aspect-ratio: 400%;
  }

  .ratio-xl-4x1 {
    --bs-aspect-ratio: 25%;
  }

  .ratio-xl-1x5 {
    --bs-aspect-ratio: 500%;
  }

  .ratio-xl-5x1 {
    --bs-aspect-ratio: 20%;
  }

  .ratio-xl-3x2 {
    --bs-aspect-ratio: 66.6666666667%;
  }

  .ratio-xl-2x3 {
    --bs-aspect-ratio: 150%;
  }

  .ratio-xl-3x4 {
    --bs-aspect-ratio: 133.3333333333%;
  }

  .ratio-xl-4x3 {
    --bs-aspect-ratio: 75%;
  }

  .ratio-xl-16x9 {
    --bs-aspect-ratio: 56.25%;
  }

  .ratio-xl-9x16 {
    --bs-aspect-ratio: 177.7777777778%;
  }

  .ratio-xl-21x9 {
    --bs-aspect-ratio: 42.8571428571%;
  }

  .ratio-xl-9x21 {
    --bs-aspect-ratio: 233.3333333333%;
  }

  .ratio-xl-9x32 {
    --bs-aspect-ratio: 355.5555555556%;
  }

  .ratio-xl-32x9 {
    --bs-aspect-ratio: 28.125%;
  }
}

/* Extra extra large */
@media (min-width: 1400px) {
  .ratio-xxl-1x1 {
    --bs-aspect-ratio: 100%;
  }

  .ratio-xxl-1x2 {
    --bs-aspect-ratio: 200%;
  }

  .ratio-xxl-2x1 {
    --bs-aspect-ratio: 50%;
  }

  .ratio-xxl-1x3 {
    --bs-aspect-ratio: 300%;
  }

  .ratio-xxl-3x1 {
    --bs-aspect-ratio: 33.3333333333%;
  }

  .ratio-xxl-1x4 {
    --bs-aspect-ratio: 400%;
  }

  .ratio-xxl-4x1 {
    --bs-aspect-ratio: 25%;
  }

  .ratio-xxl-1x5 {
    --bs-aspect-ratio: 500%;
  }

  .ratio-xxl-5x1 {
    --bs-aspect-ratio: 20%;
  }

  .ratio-xxl-3x2 {
    --bs-aspect-ratio: 66.6666666667%;
  }

  .ratio-xxl-2x3 {
    --bs-aspect-ratio: 150%;
  }

  .ratio-xxl-3x4 {
    --bs-aspect-ratio: 133.3333333333%;
  }

  .ratio-xxl-4x3 {
    --bs-aspect-ratio: 75%;
  }

  .ratio-xxl-16x9 {
    --bs-aspect-ratio: 56.25%;
  }

  .ratio-xxl-9x16 {
    --bs-aspect-ratio: 177.7777777778%;
  }

  .ratio-xxl-21x9 {
    --bs-aspect-ratio: 42.8571428571%;
  }

  .ratio-xxl-9x21 {
    --bs-aspect-ratio: 233.3333333333%;
  }

  .ratio-xxl-9x32 {
    --bs-aspect-ratio: 355.5555555556%;
  }

  .ratio-xxl-32x9 {
    --bs-aspect-ratio: 28.125%;
  }
}

.Curriculum {
  padding: 0px 48px 64px 48px;
}

.Curriculum .accordion {
  --bs-accordion-btn-border-color: var(--fc-fleming-white);
  --bs-accordion-btn-color: var(--fc-fleming-black);
  --bs-accordion-btn-bg: var(--fc-fleming-white);
  --bs-accordion-btn-focus-border-color: var(--fc-bright-iris-4);
  --bs-accordion-active-color: var(--fc-fleming-black);
  --bs-accordion-active-bg: var(--fc-fleming-white);

  border-top: 1px solid var(--fc-fleming-black);
  margin-bottom: 0px;
}

.Curriculum .accordion:first-of-type {
  border-top: 0px;
}

.Curriculum .accordion-button {
  padding: 12px;
  margin-bottom: 8px;
}

.Curriculum .accordion-button:hover {
  background-color: var(--fc-dorian);
}

.Curriculum .accordion-item {
  --bs-accordion-border-width: 0;
  padding: 0px;
}

.Curriculum h4:not(:first-of-type) {
  margin-top: 24px;
}

.Curriculum h5 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.1rem;
}

/*------------------------------------ FilterPills  ------------------------------------/*

/*!
    A Widget to display pills indicating the filter state of the related list.
    Used on many pages.  Typically a list of either inline anchors or links to other pages that also has a shortcut bar, such as an alpha index, or titled index.

    @version 1
    @used http://flemingcollege.ca/programs/a-z
    @TODO 
    @module FilterPills
*/

.FilterPills {
	opacity: 40%;
	padding-left: 64px;
	position: relative;
	min-height: 3rem;
	font-size: 1rem;
	font-weight: 300;
	display: flex;
  }
  
  .FilterPills::before {
	/* These styles are required to make icons render reliably 
	  https://fontawesome.com/docs/web/add-icons/pseudo-elements
	  */
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	/**/
	/* Note: Make sure to include the correct weight and Unicode value for the icon */
	font: var(--fa-font-sharp-solid);
	content: "\e17e";
	color: #000;
	opacity: 40%;
	position: absolute;
	top: 12px;
	left: 12px;
	transform: translate(-50%, -50%);
	font-size: 1.75em;
	transition: opacity 0.15s ease-in-out;
  }
  
  .FilterPills.filter-active {
	opacity: 100%;
	padding-left: 2.5rem;
  }
  
  .FilterPills.filter-active,
  .FilterPills.filter-active::before {
	opacity: 100%;
  }
  
  .FilterPills button {
	margin: 0 16px 16px;
  }
  
  .FilterPills.has-pills {
	opacity: 100%;
	padding-left: 2.75rem;
  }
  .FilterPills.has-pills,
  .FilterPills.has-pills::before {
	opacity: 100%;
  }
  
  .empty-list {
	color: var(--fc-light-slate);
	font-size: 2rem;
	padding-left: 2.5rem;
	padding-top: 3rem;
  }
  .empty-list.invisible {
	  padding: 0;
	  height:0;
  }
  
  #subtag-filter-select + .selectize-control {
	flex-grow: 1;
  }
  
  .DataFilter {
	position: relative;
  }
  
  .DataFilter .filter-subtags {
	padding: var(--fc-spacer-2);
	border: 5px solid var(--fc-bright-iris-3);
	position: absolute;
	background: #fff;
	flex-wrap: wrap;
	width: 100%;
	z-index: 900;
  }
  .DataFilter .btn-datafilter-tag {
	--bs-btn-color: var(--fc-fleming-black);
	--bs-btn-bg: var(--fc-fleming-white);
	--bs-btn-border-color: rgb(0, 0, 0, 10%);
	--bs-btn-border-radius: 0;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #000;
	--bs-btn-hover-border-color: rgb(0, 0, 0, 10%);
	--bs-btn-focus-shadow-rgb: rgb(75, 77, 237, 100%);
	--bs-btn-active-color: var(--fc-fleming-white);
	--bs-btn-active-bg: var(--fc-bright-iris-2);
	--bs-btn-active-border-color: rgb(0, 0, 0, 100%);
  
	position: relative;
	font-size: 60%;
  }
  .DataFilter .btn-datafilter-tag::after {
	/* These styles are required to make icons render reliably 
	  https://fontawesome.com/docs/web/add-icons/pseudo-elements
	  */
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	/**/
	/* Note: Make sure to include the correct weight and Unicode value for the icon */
	font: var(--fa-font-sharp-solid);
	content: "\f057";
	color: #000;
	border-radius: 50%;
	opacity: 0%;
	position: absolute;
	top: -9px;
	left: -9px;
	font-size: 1.75em;
	transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
	  border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
	  opacity 0.15s ease-in-out;
	background-color: #fff;
  }
  
  .DataFilter .btn-check:checked + .btn-datafilter-tag {
	color: var(--fc-fleming-white);
	background-color: var(--fc-bright-iris-2);
	border-color: var(--fc-bright-iris-2);
  }
  .DataFilter .filter-subtags .btn-check:checked + .btn-datafilter-tag {
	background-color: var(--fc-bright-iris-4);
	border-color: var(--fc-bright-iris-3);
	color: var(--fc-fleming-black);
  }
  .DataFilter .btn-check:checked + .btn-datafilter-tag::after {
	opacity: 1;
  }
  .DataFilter .btn-check:not(:checked) + .btn-datafilter-tag:hover {
	background-color: var(--fc-dorian);
	color: #000;
  }
  .DataFilter .btn-check:not(:checked) + .btn-datafilter-tag:hover + button {
	background-color: var(--fc-dorian);
  }
  .DataFilter .btn-check:not(:checked) + .btn-datafilter-tag + button:hover {
	border-color: rgb(0, 0, 0, 10%);
	box-shadow: none;
  }
  .DataFilter .btn-datafilter-tag + button {
	border-color: rgb(0, 0, 0, 10%);
	border-left: 0;
	position: relative;
	padding-top: 0;
	padding-bottom: 0;
	border-radius: 0;
  }
  .DataFilter .btn-datafilter-tag + button::after {
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	/**/
	/* Note: Make sure to include the correct weight and Unicode value for the icon */
	font-family: "Font Awesome 6 Pro";
	font-weight: bold;
	content: "\f0da";
	font-size: 60%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 10%;
  }
  .DataFilter .btn-check:checked + .btn-datafilter-tag + button {
	background-color: var(--fc-bright-iris-3);
	border-color: var(--fc-bright-iris-2);
  }
  .DataFilter .btn-check:checked + .btn-datafilter-tag + button:hover {
	background-color: var(--fc-bright-iris-4);
	color: var(--fc-bright-iris-1);
  }
  .DataFilter .btn-check:checked + .btn-datafilter-tag + button::after {
	content: "\f0d7";
	opacity: 100%;
	color: var(--fc-fleming-white);
  }
  
  .DataFilter .btn-check:checked + .btn-datafilter-tag + button:hover::after {
	color: var(--fc-bright-iris-1);
  }
  
  .DataFilter .btn-check:checked + .btn-datafilter-tag + button.closed::after {
	content: "\f0da";
  }
  .DataFilter .input-group-text {
	background-color: var(--fc-fleming-black);
	font-size: var(--fc-xsmall-text);
	color: var(--fc-fleming-white);
	font-weight: bold;
  }
  
  .DataFilter .selectize-control.multi .selectize-input [data-value].active {
	background-color: var(--fc-fleming-white);
	background-image: none;
  }
  .DataFilter .selectize-control.multi .selectize-input [data-value] {
	background-color: var(--fc-fleming-white);
	background-image: none;
	border: 2px solid var(--fc-fleming-black);
	color: var(--fc-fleming-black);
	font-weight: bold;
	font-size: var(--fc-xsmall-text);
  }
  
  .datafilter-select.selectize-dropdown .selected {
	background-color: var(--fc-dorian);
	color: #000;
  }
  .datafilter-select .label:hover,
  .datafilter-select .label:hover .titleText {
	text-decoration: underline;
  }
  .datafilter-select .titleText {
	display: block;
	opacity: 0.8;
	padding-right: 1rem;
	align-self: center;
	min-width: 7rem;
  }
  .datafilter-select .option-tags .tag,
  .datafilter-select .titleText {
	color: var(--fc-light-slate);
	background: transparent;
	position: relative;
	font-size: 60%;
	line-height: 1.5;
	display: block;
	margin-right: 0.5rem;
	text-transform: uppercase;
  }
  .datafilter-select .option-tags .tag {
	padding-bottom: 0.25rem;
  }
  
  .datafilter-select .option-tags .tag:last-child {
	margin-right: 0rem;
  }
  
/*------------------------------------ HOME PAGE  ------------------------------------/*

/*!
    The Home page

    @version 1
    @used http://flemingcollege.ca/
    @TODO 
    @module HOMEPAGE
*/

#home_program_select {
  width: 100%;
}
#home_program_select + .selectize-control .selectize-input {
  text-transform: uppercase;
}
#home_program_select,
#home_program_select + .selectize-control .selectize-input,
#home_program_select + .selectize-control .selectize-input input {
  font-size: 1.1em !important;
  font-weight: 700;
  font-family: 'HCo Gotham', 'Arial', Helvetica, sans-serif;
  color: #3c3c3d;
  padding: 1em 2em 1em 0.5em;
}
#home_program_select + .selectize-control .selectize-dropdown-content {
  padding: 1rem 1rem;
}
#home-feature-hero .slick-next .slick-next-icon::before, 
#home-feature-hero .slick-prev .slick-prev-icon::before {
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 6 Pro";
  content: " ";
  transition: opacity 0.15s ease-in-out;
  text-decoration: none;
  color: var(--fc-fleming-white);
  font-weight: 900;
  font-size: 5rem;
}

#home-feature-hero .slick-next .slick-next-icon::before {
  content: '\f054';
}
#home-feature-hero .slick-prev .slick-prev-icon::before {
  content: '\f053';
}
#home-feature-hero .slick-next, #home-feature-hero .slick-prev {
  width: 4rem;
  height: 8rem;
}
#home-feature-hero .slick-next,
#home-feature-hero .slick-prev {
  top: 50%;
  z-index:10;
  display:none!important;
}
#home-feature-hero .slick-next {
  right: 1rem;
}
#home-feature-hero .slick-prev {
  left: 1rem;
}

.HomeSearch {
  position: relative;
}

.HomeHeroButton {
  position: absolute;
  bottom: 71%;
  left: 3.5%;
}

.HomeHeroButton .btn,
.btn-fc-gradient {
  --bg-start: rgb(5, 207, 193);
  --bg-end: rgb(1, 117, 190);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-right: 10px solid #fff;
  border-radius: 0;
  padding: 0;
  padding-right: 1rem;

  color: #000 !important;
  font-size: var(--fc-small-text);
  font-family: "HCo Gotham", "Arial", Helvetica, sans-serif;
  text-transform: uppercase;

  background: rgb(5, 207, 193);
  background: linear-gradient(
    111deg,
    var(--bg-start) 0%,
    var(--bg-start) 35%,
    var(--bg-end) 50%,
    var(--bg-end) 50%,
    var(--bg-start) 70%,
    var(--bg-start) 100%
  );
  background-size: 200% 100%;

  animation-duration: 0.2s;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-name: undo_gradient;
  border-right: 10px solid #fff;
}

.btn-fc-gradient-blue {
  --bg-start: #0075C0;
  --bg-end: #00C1C3; 
  color: #fff !important;
}
.btn-fc-gradient-blue::after {
  color: #000 !important;
}

.btn-fc-gradient {
  font-size: var(--fc-normal-text);
  padding: 0.375rem;
  padding-right: 3rem;
  min-height: 3.25rem;
}
 
.HomeHeroButton .btn::after,
.btn-fc-gradient::after {
  position: absolute;
  top: 0px;
  right: -6px;
  width: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  margin: 0;
  padding-right: 0.25rem;
  background: #fff;
  -webkit-transform: skewX(-10deg);
  -moz-transform: skewX(-10deg);
  -ms-transform: skewX(-10deg);
  transform: skewX(-10deg);
}
.btn-fc-gradient::after {
  width: 2rem;
}
.HomeHeroButton .btn:active:focus,
.btn-fc-gradient:active:focus {
  filter: invert(100%);
}

.HomeHeroButton .btn:active:focus::after,
.btn-fc-gradient:active:focus::after {
  filter: invert(0%);
}

.HomeHeroButton .btn:hover,
.btn-fc-gradient:hover {
  box-shadow: none;
  animation-name: gradient;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 50% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

@keyframes undo_gradient {
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 50% 50%;
  }

  0% {
    background-position: 100% 50%;
  }
}

.HomeSearch.HeroImage::before {
  background-image: var(--fc-hero-src);
}

.HomeSearch.HeroImage {
  padding-top: 10em;
}

div[class^="HomeHeroButton--slide"] {
  position: absolute;
  bottom: 2%;
  left: 14%;
}

.HomeHeroButton--slide1 {
  top: 0;
  bottom: 0!important;
  left: 0!important;
  width: 100%;
  background: rgb(0,0,0);
background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.7875350823923319) 39%, rgba(0,0,0,0) 56%);
  display:flex;
  justify-content: center;
  align-items: end;
  padding: 0em;
  flex-direction: column;
}
.HomeHeroButton--slide1 .slide1-title {

  text-transform: uppercase;
  font-size: .75rem;
  color:var(--fc-fleming-teal);
  font-family: "HCo Gotham", "Arial", Helvetica, sans-serif;
  font-weight: 700;
  text-align: center;
  width: 25rem;
  line-height: 1;
  margin-right: 0rem;
}
.HomeHeroButton--slide1 .slide1-title .slide1-title--emphasis1 {
  display:block;
  font-size: 1.13em;
}
.HomeHeroButton--slide1 .slide1-title .slide1-title--emphasis2 {
  display:block;
  font-size: 1.5em;
}
.HomeHeroButton--slide1 .slide1-subtitle {

  text-transform: uppercase;
  font-size: 1em;
  color:var(--fc-fleming-white);
  font-family: "HCo Gotham", "Arial", Helvetica, sans-serif;
  font-weight: 700;
  padding-top:1em;
  padding-bottom: 1em;
}

.HomeHeroButton--slide3 {
  left: 48%!important;
}

.HomeHeroButton--slide1 .btn {
  --bs-btn-font-size: 0.65rem;
}


/*  X-Small devices (portrait phones, less than 576px) */
/*  No media query for `xs` since this is the default in Bootstrap */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 400px) {
  .HomeHeroButton {
    bottom: 69%;
    left: 4.25%;
  }
}

@media (min-width: 420px) {
  .HomeHeroButton {
    bottom: 70%;
    left: 4.5%;
  }
}

@media (min-width: 460px) {
  .HomeHeroButton {
    bottom: 68%;
    left: 5%;
  }

  .HomeHeroButton .btn {
    text-indent: 1rem;
  }

  .HomeHeroButton .btn::after {
    padding-right: 0.75rem;
  }

  .HomeSearch.HeroImage {
    padding-top: 12em;
  }
}

@media (min-width: 500px) {
  .HomeHeroButton {
    bottom: 66%;
    left: 5.5%;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .HomeHeroButton {
    bottom: 67%;
    left: 6.5%;
  }
  .HomeHeroButton--slide1 .slide1-title {
    
    font-size: 1.55rem;
  }
  .HomeHeroButton--slide3 {
    left: 14%!important;
  }

  .HomeHeroButton .btn::after {
    padding-right: 1rem;
  }

  .HomeSearch.HeroImage {
    padding-top: 13em;
  }
}

/*  Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .HomeHeroButton {
    bottom: 60%;
    left: 8.5%;
  }
  div[class^="HomeHeroButton--slide"] {
    bottom: 5%;
    left: 18%;
  }
  div[class^="HomeHeroButton--slide"] .btn {
    --bs-btn-font-size: 0.75rem;
  }

  .HomeHeroButton .btn {
    height: 1.5rem;
  }

  .HomeHeroButton .btn::after {
    width: 1rem;
    height: 1.5rem;
    padding-right: 0.75rem;
  }

  .HomeSearch.HeroImage {
    padding-top: 14rem;
  }
}

/*  Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .HomeHeroButton {
    bottom: 56%;
    left: 6.5%;
  }

  .HomeHeroButton .btn {
    font-size: var(--fc-normal-text);
    height: 2.25rem;
    padding-right: 3rem;
  }

  .HomeHeroButton .btn::after {
    width: 2rem;
    height: 2.25rem;
    padding-right: 0.5rem;
  }

  .HomeSearch.HeroImage {
    padding-top: 18rem;
  }

  .HomeHeroButton--slide1 .slide1-title {
    font-size: 2.5rem;
    line-height: 1;
  }
  .HomeHeroButton--slide1 .slide1-title .slide1-title--emphasis1 {
    font-size: 1.13em;
  }
  .HomeHeroButton--slide1 .slide1-title .slide1-title--emphasis2 {
    font-size: 1.5em;
  }
  .HomeHeroButton--slide1 .slide1-subtitle {
    font-size: 1.5rem;
    padding-top:1.5em;
    padding-bottom:1.5em;
  }

  #home-feature-hero .slick-next,
  #home-feature-hero .slick-prev {
    display:inline-block!important;
  }
}

/*  custom breakpoint to keep things smooth (desktops, 1024px and up) */
@media (min-width: 1024px) {
  .HomeHeroButton {
    bottom: 57%;
    left: 7%;
  }
  div[class^="HomeHeroButton--slide"] {
    bottom: 10%;
    left: 18%;
  }
  div[class^="HomeHeroButton--slide"] .btn {
    --bs-btn-font-size: 1rem;
  }
  
  .btn-fc-gradient {
    padding: 0.75rem;
    padding-right: 3rem;
  
  }

}

/*  X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .HomeHeroButton {
    bottom: 55%;
    left: 8%;
  }

  .HomeHeroButton .btn {
    font-size: var(--fc-normal-text);
    height: 2.25rem;
  }

  .HomeHeroButton .btn::after {
    height: 2.25rem;
  }

  .HomeSearch.HeroImage {
    padding-top: 23.5rem;
  }
}

/*  XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .HomeHeroButton {
    bottom: 51%;
    left: 8.5%;
  }

  .HomeSearch.HeroImage {
    padding-top: 25rem;
  }
}

.Slide.home-hero .btn {
  --bs-btn-bg: var(--fc-fleming-teal);
  --bs-btn-color: var(--fc-fleming-black);
  --bs-btn-border-color: var(--fc-fleming-teal-1);
  --bs-btn-border-hover-color: var(--fc-fleming-teal-3);
}
.Slider.home-hero-slider-2 .card {
  height: 100%;
}
.Slider.home-hero-slider-2 .card-header {
  border-top: 3px solid #000!important;
  height: 100%;
  display: flex;
}
.Slider.home-hero-slider-2 .card-body {
  background-color: var(--bs-card-cap-bg);
  padding-top: 0;
  padding-bottom: var(--fc-spacer-4);
}
.Slider.home-hero-slider-2 .card-footer {
  text-align: right;
  padding-top: 1rem;
}
.Slider.home-hero-slider-2 .slick-next .slick-next-icon::before, 
.Slider.home-hero-slider-2 .slick-prev .slick-prev-icon::before {
  color: var(--fc-fleming-black);
}
.slick-next .slick-next-icon:hover::before {
  color: var(--fc-orange) !important;
}
.Slider.home-hero-slide-2 .slick-next .slick-next-icon:hover, 
.Slider.home-hero-slider-2 .slick-prev .slick-prev-icon:hover {
  background: rgba(0, 0, 0, 0);
}

.HomeFeaturedProgram,
.HSADFeaturedProgram {
  padding-top: 3rem;
  padding-bottom: 3rem;
  color: var(--fc-fleming-white);
}
.HomeFeaturedProgram .btn:hover,
.HSADFeaturedProgram .btn:hover {
  text-shadow: none;
}

.HomeFeaturedProgram ul,
.HSADFeaturedProgram ul {
  list-style: none;
}

.HomeFeaturedProgram ul li,
.HSADFeaturedProgram ul li {
  border-bottom: 1px solid var(--fc-fleming-white);
  padding-left: var(--fc-spacer-5) !important;
  padding-top: var(--fc-spacer-4) !important;
}

.HomeFeaturedProgram ul li::before,
.HSADFeaturedProgram ul li::before {
  content: "\203A" !important;
  color: #fff !important;
  font-size: calc(2.25rem + 0.3vw) !important;
  top: 0 !important;
  left: 0 !important;
}

.HomeFeaturedProgram ul li h4,
.HSADFeaturedProgram ul li h4 {
  display: inline-block;
}

.HomeCampus ul {
  margin: var(--fc-spacer-4) 0 0;
  padding-left: 0;
  list-style: none;
}

.HomeCampus ul li {
  padding: var(--fc-spacer-2) var(--fc-spacer-6) !important;
  font-size: var(--fc-xlarge-text) !important;
  font-weight: bold !important;
}

.HomeCampus ul li::before {
  min-height: 100% !important;
  padding-left: var(--fc-spacer-4) !important;
  border-left: 4px solid var(--fc-fleming-teal) !important;
  content: "" !important;
  opacity: 1 !important;
}

.HomeCampus .HeroImage {
  min-height: 10rem;
}

/*  Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .HomeCampus .HeroImage {
    min-height: 100%;
  }
}

/*  Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
}

/*------------------------------------ END HOME PAGE  ------------------------------------/*



/*------------------------------------ DEFAULT PAGE  ------------------------------------/*

/*!
    A linked list to many pages
    Used on many page.  Typically a list of either inline anchors or links to other pages that also has a shortcut bar, such as an alpha index, or titled index.

    @version 1
    @used http://flemingcollege.ca/programs/a-z
    @TODO 
    @module PAGE
*/
.SECTION {
  padding: 3rem 0;
}

.SECTION h3:first-of-type {
  padding-top: 0;
}

.Breadcrumb {
  padding-top: 4px;
  padding-bottom: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-top: 1px solid var(--fc-dorian);
}

.Breadcrumb ol {
  margin: 0;
  padding: 0;
}

.Breadcrumb li {
  margin: 0;
  padding: 4px 8px;
  display: inline-block;
  border-radius: 2px;
}

.Breadcrumb a {
  color: #fff;
}

.Breadcrumb li:hover {
  color: #fff;
}

.Breadcrumb li:hover a {
  color: #fff;
}

.blue-background .Breadcrumb li:hover,
.blue-background .Breadcrumb li:hover {
  background-color: #fff;
  color: #000;
}

.blue-background .Breadcrumb li:hover a,
.blue-background .Breadcrumb li:hover a {
  color: #000;
}

.VideoCard {
  color: #fff;
  background-color: rgba(0, 0, 0, 1);
}

.VideoCard img {
  max-width: 100%;
  object-fit: contain;
}

.VideoCard button {
  margin: 24px auto;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.VideoCard .PlayButton.youtube {
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-75%);
  z-index: 800;
  cursor: pointer;
  height: 72px;
  width: 98px;
  position: absolute;
}

.VideoCard .PlayButton.youtube::before {
  font-family: "Font Awesome 6 Brands";
  content: "\f167";
  font-size: 5rem;
  color: #ff0000;
  background: rgb(255, 255, 255);
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0) 50%
  );
}

/*---------------- Flip Card ------------------------------*/

.FlipCard {
  position: relative;
  width: 300px;
  height: 300px;
  perspective: 500px;
}

.FlipCard .flip-content {
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);

  transition: transform 1s;
  transform-style: preserve-3d;
}

.FlipCard:hover .flip-content,
.FlipCard.active .flip-content {
  transform: rotateY(180deg);
  transition: transform 0.5s;
}

.FlipCard .flip-content .front,
.FlipCard .flip-content .back {
  position: absolute !important;
  height: 100%;
  width: 100%;
  text-align: center;
  backface-visibility: hidden;
  top: 0;
}
.FlipCard .flip-content .front {
  background-image: url("/i/coned/coned-tile-background-animation-bg.png");
  background-repeat: no-repeat;
  background-size: 98%;
  box-shadow: 0px 0px 60px 50px #000 inset;
  background-position: center;
  transition: 0.4s ease-in-out;
}
.FlipCard .flip-content .back {
  transform: rotateY(180deg);

  text-align: center;
  font-weight: bold;
  font-size: 1.3rem;
  padding: 2rem;
}

/* coned landing page */

.FlipCard .flip-content .front img,
.FlipCard .flip-content .front p {
  transition: 0.5s ease-in-out;
  transform: scale(0.6);
}

.FlipCard .flip-content:hover {
  box-shadow: 0px 0px 50px 10px #000 inset;
  background-size: 100%;
}

.FlipCard .flip-content:hover img {
  transform: scale(0.61);
}

.FlipCard .flip-content .front p {
  text-align: center;
  font-weight: bold;
  font-size: 1.6rem;
}

/*---------------- End Flip Card ------------------------------*/

/*------------------------------------  LandAcknowledgement Widget ------------------------------------/*
/*!
    A widget to display the Land Acknowledgement

    @version 1
    @used http://flemingcollege.ca/
    @TODO 
    @module LandAcknowledgement
*/

.LandAcknowledgement {
  padding-top: 4px;
  padding-bottom: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-top: 1px solid var(--fc-dorian);
}

.LandAcknowledgement a {
  position: relative;
  font-weight: 600;
  cursor: pointer;
  padding-bottom: 1rem;
  display: block;
  color: var(--fc-fleming-white);
  text-decoration: none;
}

.LandAcknowledgement a::before {
  /* These styles are required to make icons render reliably 
	https://fontawesome.com/docs/web/add-icons/pseudo-elements
	*/
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  /**/
  /* Note: Make sure to include the correct weight and Unicode value for the icon */
  font-family: "Font Awesome 6 Pro";
  font-weight: normal;
  content: "\f077";
  padding-right: var(--fc-spacer-4);
}

.LandAcknowledgement a.collapsed::before {
  content: "\f078";
}

.LandAcknowledgement a:visited {
  color: var(--fc-fleming-white);
}

.LandAcknowledgement a:hover {
  text-decoration: underline;
}

/*------------------------------------ HeroImage Widget  ------------------------------------/*

/*!
    Styles a hero image block

    @version 1
    @used http://flemingcollege.ca/
    @TODO 
    @module HeroImage
*/
.HeroImage {
  padding: 0;
  position: relative;
}

.HeroImage::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  content: " ";
  background-image: var(--fc-hero-src);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}
.HeroImage.OH::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  content: " ";
  background-image: var(--fc-hero-src);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.HeroImage.featured::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  content: " ";
  background-image: var(--fc-hero-src);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

.HeroImage.background-contain::before {
  background-size: contain;
}

.Overlay::after {
  background-color: rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: " ";
  width: 100%;
  height: 100%;
  z-index: -1;
}

.Overlay.black::after {
  background-color: rgba(0, 0, 0, 0.3);
}

.Overlay.white::after {
  background-color: rgba(255, 255, 255, 0.3);
}

.Overlay.blur::after {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}

/*------------------------------------ END HeroImage Widget  ------------------------------------*/

/*------------------------------------ Event Widget  ------------------------------------/*
/*!
    A widget to an Event to the page

    @version 1
    @used http://flemingcollege.ca/admissions/academic-calendar
    @TODO 
    @module ContactCard
*/

.EventCard {
  width: 33%;
  position: relative;
  --bs-card-border-radius: 2px;
  --bs-card-border-width: 1px;
  border-color: transparent;
}

.card-edit-button {
  position: absolute;
  top: -4px;
  right: -4px;
  z-index: 1050;
}

/*------------------------------------ Webcart Widget  ------------------------------------/*

/*!
    a widget providing a typical shopping cart UI
    @version 1
    @used http://flemingcollege.ca/*
    @TODO 
    @module Webcart
*/
[data-widget="cart-toggler"] {
  transition: 0.5s ease-in-out;
}

[data-widget="cart-toggler"].empty {
  bottom: -6rem;
  display: none;
}

/*------------------------------------ Swiftype SiteSearch Widget  ------------------------------------/*

/*!
    a widget attaching the Swiftype Search scripts to the site.  These styles are referenced primarly in /js/v2/fleming-ui.js

    @version 1
    @used http://flemingcollege.ca/*
    @TODO 
    @module SiteSearch
*/

.swiftype-widget .autocomplete {
  background-color: var(--fc-cloud);
  font-family: "HCo Gotham", "Arial", Helvetica, sans-serif;
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  position: absolute;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  text-align: left;
}

.swiftype-widget .autocomplete ul {
  background-color: var(--fc-cloud);
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
  text-align: left;
}

.swiftype-widget .autocomplete li {
  cursor: pointer;
  list-style-type: none;
  margin: 0;
  background-color: var(--fc-cloud);
}

.swiftype-widget .autocomplete li:first-child {
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  -ms-border-radius: 3px 3px 0 0;
  -o-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
}

.swiftype-widget .autocomplete li:last-child {
  -webkit-border-radius: 0 0 3px 3px;
  -moz-border-radius: 0 0 3px 3px;
  -ms-border-radius: 0 0 3px 3px;
  -o-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
}

.swiftype-widget .autocomplete li.active {
  background-color: var(--fc-fleming-white);
}

.swiftype-widget .autocomplete li.noResults {
  pointer-events: none;
}

.SiteSearchItem {
  padding: var(--fc-spacer-4) var(--fc-spacer-2);
  border-bottom: 1px solid var(--fc-light-slate);
  margin-left: var(--fc-spacer-4);
  margin-right: var(--fc-spacer-4);
}

.SiteSearchItem a {
  color: var(--fc-fleming-black);
  padding-bottom: var(--fc-spacer-1);
  text-decoration: none;
  font-weight: 500;
  display: block;
}

.SiteSearchItem p,
.SiteResultItem p {
  color: var(--fc-slate);
}

.SiteSearchItem p {
  margin-bottom: 0;
  font-size: var(--fc-small-text);
}

.SiteResultItem {
  padding: var(--fc-spacer-4) var(--fc-spacer-2) var(--fc-spacer-6)
    var(--fc-spacer-2);
  border-bottom: 1px solid var(--fc-light-slate);
}

.SiteResultItem:first-of-type {
  margin-top: var(--fc-spacer-6);
}

.SiteResultItem:last-of-type {
  margin-bottom: var(--fc-spacer-6);
}

.SiteSearchItem em,
.SiteResultItem em {
  font-weight: bold;
  font-style: normal;
}

/*------------------------------------ END Swiftype SiteSearch Widget  ------------------------------------ */

/*------------------------------------ Navigator Page  ------------------------------------/*

/*!
    a widget attaching the Swiftype Search scripts to the site.  These styles are referenced primarly in /js/v2/fleming-ui.js

    @version 1
    @used http://flemingcollege.ca/*
    @TODO 
    @module SiteSearch
*/
.NavigatorStep {
  padding-left: 2rem;
  background-repeat: no-repeat;
}

a.NavigatorStep {
  color: var(--fc-fleming-black);
}

.NavigatorStep.one {
  background-image: url(/theme/v2/img/navigator/navigator-1-off.svg);
}

.NavigatorStep.one.active {
  background-image: url(/theme/v2/img/navigator/navigator-1-on.svg);
}

.NavigatorStep.two {
  background-image: url(/theme/v2/img/navigator/navigator-2-off.svg);
}

.NavigatorStep.two.active {
  background-image: url(/theme/v2/img/navigator/navigator-2-on.svg);
}

.NavigatorStep.three {
  background-image: url(/theme/v2/img/navigator/navigator-3-off.svg);
}

.NavigatorStep.three.active {
  background-image: url(/theme/v2/img/navigator/navigator-3-on.svg);
}

.NavigatorStep.four {
  background-image: url(/theme/v2/img/navigator/navigator-4-off.svg);
}

.NavigatorStep.four.active {
  background-image: url(/theme/v2/img/navigator/navigator-4-on.svg);
}

.NavigatorStep.five {
  background-image: url(/theme/v2/img/navigator/navigator-5-off.svg);
}

.NavigatorStep.five.active {
  background-image: url(/theme/v2/img/navigator/navigator-5-on.svg);
}

.NavigatorStep.six {
  background-image: url(/theme/v2/img/navigator/navigator-6-off.svg);
}

.NavigatorStep.six.active {
  background-image: url(/theme/v2/img/navigator/navigator-6-on.svg);
}

.NavigatorStep.seven {
  background-image: url(/theme/v2/img/navigator/navigator-7-off.svg);
}

.NavigatorStep.seven.active {
  background-image: url(/theme/v2/img/navigator/navigator-7-on.svg);
}

.NavigatorStep.eight {
  background-image: url(/theme/v2/img/navigator/navigator-8-off.svg);
}

.NavigatorStep.eight.active {
  background-image: url(/theme/v2/img/navigator/navigator-8-on.svg);
}

.NavigatorStep.nine {
  background-image: url(/theme/v2/img/navigator/navigator-9-off.svg);
}

.NavigatorStep.nine.active {
  background-image: url(/theme/v2/img/navigator/navigator-9-on.svg);
}

.NavigatorStep.ten {
  background-image: url(/theme/v2/img/navigator/navigator-10-off.svg);
}

.NavigatorStep.ten.active {
  background-image: url(/theme/v2/img/navigator/navigator-10-on.svg);
}

/*------------------------------------ Comments Widget  ------------------------------------/*

/*!
    a widget allowing us to add comments to pages

    @version 1
    @used http://flemingcollege.ca/*
    @TODO 
    @module Comments
*/

.CommentReply {
  position: relative;
  padding: 12px 12px 12px 48px;
  background-color: #fff;
  color: var(--fc-slate);
  border: 1px solid var(--fc-slate);
}

.CommentReply::before {
  /* These styles are required to make icons render reliably 
	https://fontawesome.com/docs/web/add-icons/pseudo-elements
	*/
  display: inline-block;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  /**/
  /* Note: Make sure to include the correct weight and Unicode value for the icon */
  font: var(--fa-font-sharp-solid);
  content: "\e4b1";
  font-weight: bold;
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 1rem;
  color: var(--fc-slate);
}

/*------------------------------------ AutoCompleteSelect Select Box  ------------------------------------/*

/*!
    A common select box element that uses the selectize.js plugin to create an AutoComplete experience

    @version 1
    @used http://flemingcollege.ca/programs/a-z
    @TODO 
    @module AutoCompleteSelect Select Box
*/

.AcademicCalendarIndex {
  max-width: 25rem;
  margin: 0 auto;
}

.Calendar {
  display: flex;
  flex-flow: column;
  font-size: var(--fc-small-text);
  border-radius: 12px;
  background-color: var(--fc-fleming-white);
  color: var(--fc-fleming-black);
  border: 1px solid var(--fc-fleming-teal);
  padding: var(--fc-spacer-2) var(--fc-spacer-5);
}

.CalendarHeader .CalendarMonthYear {
  font-weight: bold;
  padding: var(--fc-spacer-2) 0;
  text-align: center;
}

.CalendarDays {
  display: flex;
  flex-flow: wrap;
}

.CalendarDayName {
  width: calc(100% / 7);
  padding: var(--fc-spacer-2);
  font-weight: bold;
}

.CalendarDayNumber {
  position: relative;
  display: flex;
  flex-flow: column;
  width: calc(100% / 7);
  padding: var(--fc-spacer-2);
  min-height: 2.75rem;
}

.CalendarDayNumber span,
.CalendarDayNumber a {
  position: absolute;
  top: var(--fc-spacer-2);
  left: var(--fc-spacer-2);
  display: inline-flex;
  justify-content: center;
  align-content: center;
  width: 1.75rem;
  height: 1.75rem;
  line-height: 1.75rem;
  text-align: center;
}

.CalendarDayNumber a {
  color: var(--fc-fleming-black);
  background-color: var(--fc-fleming-teal-3);
  border-radius: 50%;
  text-decoration: none;
}

.CalendarDayNumber.ignore {
  color: transparent;
}

.CalendarDayNumber.selected {
  background-color: var(--fc-cloud);
  color: var(--fc-slate);
}

.CalendarDayNumber.selected span,
.CalendarDayNumber.selected a {
  background-color: var(--fc-fleming-teal-1);
}

/*******************************
* MODAL AS LEFT/RIGHT SIDEBAR OR TOP/BOTTOM  
* Add .left or .right in modal parent div, after .modal
*******************************/

.modal-content {
  background: transparent;
}

.modal.left .modal-dialog,
.modal.right .modal-dialog {
  position: fixed;
  margin: auto;
  width: 75%;
  height: 100%;
  -webkit-transform: translate3d(0%, 0, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
}

.modal.left .modal-content,
.modal.right .modal-content {
  height: 100%;
  overflow-y: auto;
}

.modal.left .modal-body,
.modal.right .modal-body {
  padding: 15px 15px 80px;
}

/*Left*/
.modal.left.fade .modal-dialog {
  left: -75%;

  -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
  -o-transition: opacity 0.3s linear, left 0.3s ease-out;
  transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.show .modal-dialog {
  left: 0;
}

/*Right*/
.modal.right.fade .modal-dialog {
  right: -75%;
  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
  -o-transition: opacity 0.3s linear, right 0.3s ease-out;
  transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.show .modal-dialog {
  right: 0;
}

.modal.top .modal-dialog,
.modal.bottom .modal-dialog {
  position: fixed;
  margin: auto;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.modal.top .modal-content,
.modal.bottom .modal-content {
  height: auto;
  overflow-y: auto;
}

.modal.top .modal-body,
.modal.bottom .modal-body {
  padding: 15px 15px;
}

/* Top */

.modal.top.fade .modal-dialog {
  top: -100%;
  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
  -o-transition: opacity 0.3s linear, top 0.3s ease-out;
  transition: opacity 0.3s linear, top 0.3s ease-out;
}

.modal.top.fade.show .modal-dialog {
  top: 0;
}

/* Bottom */

.modal.bottom.fade .modal-dialog {
  bottom: -100%;
  -webkit-transition: opacity 0.3s linear, bottom 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, bottom 0.3s ease-out;
  -o-transition: opacity 0.3s linear, bottom 0.3s ease-out;
  transition: opacity 0.3s linear, bottom 0.3s ease-out;
}

.modal.bottom.fade.show .modal-dialog {
  bottom: 0;
}

.modal.bottom.fade .modal-dialog {
  bottom: -100%;
}

.ui-loader {
  padding: 0;
  font-size: 1rem;
  background-color: #fff;
  color: #fff;
  border: var(--bs-border-width) solid var(--bs-border-color);
  min-width: 2.5rem;
  min-height: 2rem;
}

.ui-loader.active {
  background-color: var(--fc-green);
}

.ui-loader-static {
  color: var(--fc-green);
  cursor: pointer !important;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.ui-loader.active .ui-loader-static {
  display: none;
}

.ui-loader-spinner {
  display: none;
  --bs-spinner-width: 1rem;
  --bs-spinner-height: 1rem;
  --bs-spinner-border-width: 0.2em;
  --bs-btn-padding-x: 0.75rem;
  --bs-btn-padding-y: 0.375rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.ui-loader.active .ui-loader-spinner {
  display: block;
}

.list-group-item {
  --bs-list-group-bg: transparent;
}

.STYLE_GUIDE .SECTION {
  padding: var(--fc-spacer-7);
}

.STYLE_GUIDE pre {
  background-color: #fff;
  border: 1px solid #555;
  border-radius: 2px;
  padding: 2em;
  color: black;
  font-family: "Arial", Helvetica, sans-serif !important;
}

.STYLE_GUIDE .color-pallate {
  padding: 1rem;
  width: 10rem;
  height: 8rem;
}

.STYLE_GUIDE button[type="button"].btn {
  margin-bottom: 0.75rem;
}

.icon-example::before {
  content: "\e1a5";
}

.ContentWidget h3 {
  color: red;
}

.EXAMPLE_HTML h3 {
  color: black;
}

.modified-header {
  color: green;
}

.EXAMPLE_HTML.modified-module h3 {
  color: blue;
}

/* ================================================================= */
/* 		BrightEdge
/* =================================================================*/

.be-ix-link-block .be-related-link-container .be-label {
  font-size: var(--fc-large-text) !important;
}

.be-ix-link-block .be-related-link-container .be-list {
  display: flex !important;
  justify-content: space-evenly;
  width: 100%;
}

.be-ix-link-block .be-related-link-container .be-list .be-list-item {
  display: unset !important;
}

.be-ix-link-block
  .be-related-link-container
  .be-list
  .be-list-item
  .be-related-link {
  text-decoration: underline !important;
  font-size: var(--fc-normal-text) !important;
}

.be-ix-link-block .be-related-link-container .be-list .be-list-item::before {
  content: " " !important;
}