.Slider {
	overflow-x: clip;
}
@media (min-width: 992px) {
	.Slider  {
		overflow-x: visible;
	}
}
.Slide div[class^="col"] {
	position: relative;
}

.Slide h4,
.Slide h5 {
	margin-top: 0;
	line-height: 1;
}

.Slide img {
	max-width: 100%;
	object-fit: contain;
}
.Slide a.Button {
	display: inline-block;
}

.SlideCard div[class^="col"] {
	position: relative;
	overflow: hidden;
}
.SlideCard div[class^="col"]:::before {
	border-top: 1px solid;
	border-color: #000;
	content: "";
	display: block;
	height: 0;
}

.SlideCard h3 {
	margin-top: 1rem;
}

.black-background .SlideCard div[class^="col"]:::before {
	border-color: #fff;
}

.Slide.video [data-ui="VideoCard"] {

	width:100%;
}

.Slide .slide-description.txt-overlay {
	position: absolute;
	right: 0;
	bottom: 30px;
	color: #fff;
	font-size: 1.7rem;
	background: rgba(0, 0, 0, 0.7);
}

.Slide .slide-description h3 {
	color: #fff;
	text-transform: uppercase;
	margin-top: 0;
	text-align: left;
	border-bottom: 1px solid #f5f5f5;
	padding-bottom: 8px;
	margin-bottom: 8px;
}

.Slide .slide-description + .media-thumb-container {
	margin: 0;
	max-width: 50%;
}

.Slide .slide-description + .media-thumb-container.nothumb {
	margin-bottom: 33%;
}

.Slide .slide-description + .media-thumb-container img {
	max-width: 100%;
}

.Slide div.youtube-play-button {
	
}

.Slide .media-thumb-container.nothumb div.youtube-play-button {
	top: 0%;
	left: 50%;
	transform: translateX(-50%) translateY(100%);
	z-index: 800;
	cursor: pointer;
	height: 72px;
	width: 98px;
	position: absolute;
	background: url(YouTube-social-icon_red.png) no-repeat;
}

.Slide li div.youtube-play-button:hover {
	background: url(YouTube-social-icon_red-hover.png) no-repeat;
}

.Slide .video-container {
	color: #fff;
	background-color: rgba(0, 0, 0, 1);
	padding-bottom: 64px;
	display: none;
	position: relative;
}

.Slide .video-container #close-video {
	
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	top: 26px;

}
.Slide .img-responsive img {
	margin: 0 auto;
	max-width: 93%;
}
.Slide .img-responsive .slider-img-txt {
	position: absolute;
	bottom: 20px;
	right: 0;
	color: #fff;
	font-size: 1.5rem;
	background: rgba(0, 0, 0, 0.4);
	padding: 10px;
	margin: 20px;
	width: 30%;
	text-align: left;
}

.Slide .video-container #close-video:hover {
	background: #4a4a4a;
}

.Slide .youtube-small-screen {
	cursor: pointer;
	background: rgba(255, 255, 255, 1) url("/theme/YouTube-social-icon_red-hover.png") no-repeat scroll 0 7px / 64px auto;
	border-radius: 4px;
	color: red;
	font-weight: bold;
	margin: 16px 0;
	padding: 16px 16px 16px 75px;
	text-transform: uppercase;
}

@media only screen and (min-width: 990px) and (max-width: 1200px) {
	.Slide .media-thumb-container img {
		max-height: 165px;
	}

	.Slide .slide-description {
		font-size: 1.2rem;
		max-height: 165px;
	}

	.Slide .slide-description h3 {
		font-size: 1.4rem;
	}
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
	.Slide .media-thumb-container img {
		max-height: 141px;
	}

	.Slide .slide-description {
		font-size: 1.2rem;
		max-height: 141px;
	}

	.Slide .slide-description h3 {
		font-size: 1.4rem;
	}
}

@media only screen and (min-width: 700px) and (max-width: 767px) {
	.Slide .media-thumb-container img {
		max-height: 144px;
	}

	.Slide .slide-description {
		font-size: 1.2rem;
		max-height: 144px;
	}

	.Slide .slide-description h3 {
		font-size: 1.4rem;
	}
}

@media only screen and (min-width: 640px) and (max-width: 699px) {
	.Slide .media-thumb-container img {
		max-height: 115px;
	}

	.Slide .slide-description {
		font-size: 1.1rem;
		max-height: 115px;
	}

	.Slide .slide-description h3 {
		font-size: 1.2rem;
	}
}

@media (max-width: 639px) {
	.Slide #small-screen-container {
		display: block;
	}
}


/*------------------------------------ ImageOnly  ------------------------------------/*
/*!
    Just an image. that's it.

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

.Slide.image-only  {

    padding: 0rem;
    display: flex!important; /* important req'd to take precedence over JS injected styles of slider script*/
    align-items: stretch;
    justify-content: center;
    

}

.Slide.image-only img {

    width: 100%;
    max-width: 100%;

}

/*------------------------------------ END ImageSmallText  ------------------------------------/*

/*------------------------------------ ImageBlockquote  ------------------------------------/*

/*!
    An image aligned left of a blockquote, with a leading graphical quote mark

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

.Slide.image-blockquote  {

    display: flex!important; /* !important req'd to take precedence over JS injected styles of slider script*/
    align-items: stretch;
	flex-direction: column;
}

.Slide.image-blockquote img {

    max-width: 100%;
}
.Slide.image-blockquote  blockquote {

    font-family: 'HCo Gotham',sans-serif;
	padding: 3rem;
    color: #000;
    background-color:var(--fc-dorian);
    margin:0;
    font-size: 2rem;
    line-height: 1.2;
    
}
.Slide.image-blockquote  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;

}

.Slide.image-blockquote  cite {

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

}


/*  Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
	
	.Slide.image-blockquote  {

		flex-direction:row;

	}
	.Slide.image-blockquote img {

		margin: 0;
   		max-width: 33%;

	}
}

/*------------------------------------ END ImageBlockquote  ------------------------------------/*

/*------------------------------------ TextOverImage  ------------------------------------/*

/*!
    An text block overlayed on top of an image

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

.Slide.text-over-image  {

    padding: 3rem;
    position:relative;
    display: flex!important;
    align-items: center;
    justify-content: center;

    
}

.Slide.text-over-image > div {

    position: absolute;
    top: 50%;
    left:50%;
    transform:  translate(-80%,0%);
    z-index: 10;
    width: 15rem;

}
/*------------------------------------ END TextOverImage  ------------------------------------/*


/*------------------------------------ ImageHTML  ------------------------------------/*
/*!
    An image aligned left of a div (vertically aligned top) containing other markup

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

.Slide.image-html  {

    padding: 3rem;
    display: flex!important; /* important req'd to take precedence over JS injected styles of slider script*/
    align-items: stretch;
	

}

.Slide.image-html img {

    width: 50%;

}
.Slide.image-html > div {

   padding: 3rem;
}

/*------------------------------------ END ImageHTML  ------------------------------------/*

/*------------------------------------ ImageSmallText  ------------------------------------/*
/*!
    An image aligned left of a div (vertically aligned bottom) containing other markup

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

.Slide.image-smalltext  {

    padding: 3rem;
    font-family: 'HCo Gotham',sans-serif;
    display: flex!important; /* important req'd to take precedence over JS injected styles of slider script*/
    align-items: flex-end;
	

}

.Slide.image-smalltext img {

    max-width: 50%;
    align-self: start;

}
.Slide.image-smalltext  p,
.Slide.image-smalltext  h4 {

    padding: 0 7.5% 0 5%;
}

/*------------------------------------ END ImageSmallText  ------------------------------------/*

/*------------------------------------ HTMLImageFull  ------------------------------------/*
/*!
    An image aligned left of a div (vertically aligned top) containing other markup

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

.Slide.html-image-full,
.Slide.image-full-html  {

    display: flex!important; /* important req'd to take precedence over JS injected styles of slider script*/
    justify-content: center;
	flex-direction: column;

}

.Slide.html-image-full img,
.Slide.image-full-html img {

	margin: 0 auto 1rem auto; 
	max-width: 100%;
	max-height: 26rem;

}

.Slide.html-image-full div.vertical-truncation,
.Slide.image-full-html div.vertical-truncation {
	overflow:hidden;
	max-height: calc(line-height * 10);
	-webkit-box-orient: vertical;
	display: block;
	display: -webkit-box;
	overflow: hidden !important;
	text-overflow: ellipsis;
	-webkit-line-clamp: 10;
	margin-bottom: 1rem;
}

.Slide.html-image-full div.vertical-truncation img,
.Slide.image-full-html div.vertical-truncation img {

	display: none;

}
/*  Medium devices (tablets, 768px and up) */
@media (min-width: 992px) {
	
	.Slide.html-image-full,
	.Slide.image-full-html  {

		flex-direction:row;

	}
	.Slide.html-image-full img,
	.Slide.image-full-html img {

		margin: 0;
   		max-width: 33%;
		padding-right: 3rem;

	}
}

.Slide div.vertical-truncation,
.Slide div.vertical-truncation {
	overflow:hidden;
	max-height: calc(line-height * 10);
	-webkit-box-orient: vertical;
	display: block;
	display: -webkit-box;
	overflow: hidden !important;
	text-overflow: ellipsis;
	-webkit-line-clamp: 10;
	margin-bottom: 1rem;
	box-orient: vertical;
	line-clamp: 10;
}

.Slide div.vertical-truncation img,
.Slide div.vertical-truncation img {

	display: none;

}
/*------------------------------------ END HTMLImageFull  ------------------------------------/*



/*------------------------------------ HTML  ------------------------------------/*
/*!
    Just copy, no images

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

.Slide.html  {

    padding: 0;
    display: flex!important; /* important req'd to take precedence over JS injected styles of slider script*/
    align-items: self-start;
    justify-content: center;
	

}

.Slide.html > div {

   padding: 3rem;
}

/*------------------------------------ END HTMLImageFull  ------------------------------------/*

/*------------------------------------ SlideVideoCard  ------------------------------------/*
/*!
    a slide containing a VideoCard widget

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


.Slide.video {

    display: flex!important; /* important req'd to take precedence over JS injected styles of slider script*/
    align-items: stretch;

}

.Slide .VideoCard {

    padding: 0rem ;

}
/*  Medium devices (tablets, 768px and up) */
@media (min-width: 992px) {
	.Slide .VideoCard {

		padding: 1rem;

	}
}


/*------------------------------------ END SlideVideoCard  ------------------------------------/*

/*------------------------------------ HomeHero  ------------------------------------/*
/*!
    a slider for the Hero section of the Home page

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

/*= SLICK SLIDER MODIFIERS  
    Overwrite or enhance the default slider styles.

    @version 1
    @used https://flemingcollege.ca/programs/apprenticeships
    @TODO 
    @module SLIDER
*/

.Slider.home-hero-slider .slick-track,
.Slider.home-hero-slider-2 .slick-track
{
    display: flex;
}

.Slider.home-hero-slider .slick-slide,
.Slider.home-hero-slider-2 .slick-slide
{
    height: inherit;
}

.Slider.home-hero-slider .slick-slide > div,
.Slider.home-hero-slider-2 .slick-slide > div { 
	display: flex;
	align-items: stretch;
	height: 100%;
}
.Slider.home-hero-slider .slick-next,
.Slider.home-hero-slider .slick-prev,
.Slider.home-hero-slider-2 .slick-next,
.Slider.home-hero-slider-2 .slick-prev {
	width: 4rem;
	height: 8rem;
}
.Slider.home-hero-slider .slick-prev,
.Slider.home-hero-slider-2 .slick-prev {
	
	left: -4rem;
}
.Slider.home-hero-slider .slick-next,
.Slider.home-hero-slider-2 .slick-next {
	
	right: -4rem;
}
.Slider.home-hero-slider .slick-next .slick-next-icon,
.Slider.home-hero-slider .slick-prev .slick-prev-icon,
.Slider.home-hero-slider-2 .slick-next .slick-next-icon,
.Slider.home-hero-slider-2 .slick-prev .slick-prev-icon {
	background: rgba(0, 0, 0, 0);

}
.Slider.home-hero-slider .slick-next .slick-next-icon:hover,
.Slider.home-hero-slider .slick-prev .slick-prev-icon:hover,
.Slider.home-hero-slider-2 .slick-next .slick-next-icon:hover,
.Slider.home-hero-slider-2 .slick-prev .slick-prev-icon:hover {
	background: rgba(0, 0, 0, 0.2);

}
.Slider.home-hero-slider .slick-next .slick-next-icon::before,
.Slider.home-hero-slider .slick-prev .slick-prev-icon::before,
.Slider.home-hero-slider-2 .slick-next .slick-next-icon::before ,
.Slider.home-hero-slider-2 .slick-prev .slick-prev-icon::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";
	content: " ";
	transition: opacity 0.15s ease-in-out;
	text-decoration: none;
	color: var(--fc-fleming-white);
	font-weight: 900;
	font-size: 5rem;
}

.Slider.home-hero-slider .slick-prev  .slick-prev-icon::before,
.Slider.home-hero-slider-2  .slick-prev  .slick-prev-icon::before {
	content: '\f053';
}
.Slider.home-hero-slider .slick-next  .slick-next-icon::before,
.Slider.home-hero-slider-2 .slick-next  .slick-next-icon::before  {
	content: '\f054';
}

.Slide.home-hero {

	padding: 0 1rem 1rem 1rem;

}

.Slider.home-hero-slider .card,
.Slider.home-hero-slider-2 .card  {
	height: 100%;

}
.Slider.home-hero-slider .card-header,
.Slider.home-hero-slider-2 .card-header  {
	height: 100%;
	border-top: 3px solid #fff;
	display: flex;

}
.Slider.home-hero-slider .card-header h4,
.Slider.home-hero-slider-2 .card-header h4  {
	font-size: var(--fc-large-text);
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.03em;

}

.Slider.home-hero-slider .card-body,
.Slider.home-hero-slider-2 .card-body {
	padding-top: 0;
	padding-bottom: var(--fc-spacer-4);
}
.Slide.home-hero .btn {

	--bs-btn-hover-bg: var(--fc-fleming-teal);
	--bs-btn-active-bg: var(--fc-fleming-teal);

}
/*------------------------------------ END HomeHero  ------------------------------------/*

/*------------------------------------ ProgramList  ------------------------------------/*
/*!
    a slider for the Hero section of the Home page

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

.Slider.program-list  {

	padding-top: 1.25rem;
}
.Slider.program-list .Slide {

	padding: 0 1rem 1rem 1rem;

}
.Slider.program-list .Slide .title-text {

	border-top: 3px solid #fff;
	padding-top: 8px;

}
.Slider.program-list .Slide  a {

	color: var(--fc-fleming-teal);
	font-weight: bold;

}