_carousel.scss 7.9 KB
//  carousel css
.carousel:not(.is-admin) {
	background-color: transparent !important;
	left: -5%;
	width: 110%;
	margin-top: 24px;
  margin-bottom: 24px;
	padding: 0rem 3.125rem;
  height: 280px;
	@media only screen and (max-width:67.063rem) {
		left: 0%;
		width: calc(100vw - 24px);
		padding: 0rem 0rem;

	}

}

.carousel-items {
	text-align: center;
	font-size: 1.125rem;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	//max-width: 75rem;
	margin: 0 auto;
	overflow: hidden;

	@media only screen and (max-width:67.063rem) {
		overflow: scroll;
		height: 300px;
	}

}

.carousel-content {
	height: 260px;
	a:after{
		display: none !important;
	}
	a[target=_blank]{
		&:after {
		display: none !important;
		}
	}
}

.promo-image {
	width: 340px;
	height: 186px;
	overflow: hidden;
	background-color: #F2F2F2;
	transition: all 0.5s ease-in-out;

	@media only screen and (max-width:1073px) {
		min-height: 186px !important;
		max-height: 186px !important;
		max-width:  340px;
		min-width:   340px;
	}
	@media only screen and (max-width: 500px) {
		max-width:  80vw;
        min-width:   80vw;
	}
	

	img {
		width: 100%;
		transition: all 0.5s ease-in-out;
	}
}



.promo-carousel {
	h2 {
		font-size: 1.5rem;
		line-height: 1.875rem;
		text-align: left;
	}

	p {
		font-size: 1rem;
		line-height: 1.5rem;
		text-align: left;
	}

	.promo-text {
		margin-left: 0px;
		margin-top: 24px;
		text-align: left;
		font-size: 18px;
		line-height: 23px;
		text-align: left;
		color: #000;
		text-decoration: none;
		max-width: 320px;
		font-weight: bold;

	}

	.pdf_open,
	.video_open {
		text-decoration: none !important;
		font-weight: bold;
	}

	.pdf_open:hover,
	.video_open:hover {
		text-decoration: underline !important;

		.promo-image {
			background-color: #c2c2c2;

			img {
				filter: brightness(0.5);

			}
		}

	}


	.understrap-read-more-link {
		font-weight: bold;
		text-transform: capitalize;
		text-decoration: none;

	}

	.understrap-read-more-link:hover {
		text-decoration: underline;
	}
}

.pdf-carousel{
	.promo-image.pdf {
		width: 270px;
	
		img {
			width: auto;
		}
	}
}

//swiper controls


.swiper-pagination-bullet {
	background: #fff !important;
	border: 0.125rem solid #2c2c2c !important;
	height: 0.625rem !important;
	width: 0.625rem !important;
	border-radius: 0% !important;
	background-color: #666666 !important;
	border: 0.0625rem solid #666666 !important;
	opacity: 0.25 !important;
}

.swiper-pagination-bullet-active {
	opacity: 1 !important;
}

.swiper-pagination {
	bottom: -2.5rem !important;
}


.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
	pointer-events: all !important;
}

.carousel-items.slick-initialized.slick-slider {
	margin-right: 0.9375rem; //for the scroll bar
}


.swiper-button-prev {
	background-color: #EE0000;
	width: 2.1875rem !important;
	height: 2.1875rem !important;
	border: 0rem solid #EE0000;
	border-radius: 1.25rem;
	display: none;
	left: -15px !important;
	top: calc(50% - 2.1875rem) !important;

	@media only screen and (max-width:67.063rem) {
		display: none !important;
	}

	&:after {
		content: "" !important;
		width: 0.6875rem;
		height: 1.125rem;
		background-repeat: no-repeat;
		background-size: contain;
		background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9.095" height="15" viewBox="0 0 9.095 15"><path id="Path_1291" data-name="Path 1291" d="M7.515,5.543c.52-.526,1.03-1.048,1.546-1.564Q10.918,2.123,12.779.272a.834.834,0,0,1,1.232,0c.236.242.477.479.716.718a.817.817,0,0,1,0,1.222L11.379,5.557Q9.758,7.18,8.138,8.8a.9.9,0,0,1-.606.289.864.864,0,0,1-.667-.288Q5.614,7.551,4.363,6.3L.956,2.889c-.232-.232-.465-.463-.7-.7A.812.812,0,0,1,.269.993l.71-.71a.833.833,0,0,1,1.25,0l3.016,3L7.429,5.462Z" transform="translate(9.095 0) rotate(90)" fill="%23fff"/></svg>');
		display: inline-block;
		position: absolute;
		top: 0.5rem;
		left: 11px;

		@media only screen and (max-width:67.063rem) {
			display: none;
		}
	}

}

.swiper-button-next {
	background-color: #EE0000;

	right: 0rem !important;
	top: calc(50% - 2.1875rem) !important;

	width: 2.1875rem !important;
	height: 2.1875rem !important;
	border: 0rem solid #EE0000;
	border-radius: 1.25rem;
	display: none;

	@media only screen and (max-width:67.063rem) {
		display: none !important;
	}

	&:after {
		content: "" !important;
		width: 0.6875rem;
		height: 1.125rem;
		background-repeat: no-repeat;
		background-size: contain;
		transform: rotate(180deg);
		background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="9.095" height="15" viewBox="0 0 9.095 15"><path id="Path_1291" data-name="Path 1291" d="M7.515,5.543c.52-.526,1.03-1.048,1.546-1.564Q10.918,2.123,12.779.272a.834.834,0,0,1,1.232,0c.236.242.477.479.716.718a.817.817,0,0,1,0,1.222L11.379,5.557Q9.758,7.18,8.138,8.8a.9.9,0,0,1-.606.289.864.864,0,0,1-.667-.288Q5.614,7.551,4.363,6.3L.956,2.889c-.232-.232-.465-.463-.7-.7A.812.812,0,0,1,.269.993l.71-.71a.833.833,0,0,1,1.25,0l3.016,3L7.429,5.462Z" transform="translate(9.095 0) rotate(90)" fill="%23fff"/></svg>');
		display: inline-block;
		position: absolute;
		top: 0.5rem;
		left: 0.8125rem;

		@media only screen and (max-width:67.063rem) {
			display: none;
		}
	}

}

.swiper-button-next:hover,
.swiper-button-prev:hover {
	background-color: #669999;
}


.swiper-slide {
	width: auto !important;
	flex-shrink: 0;
	display: block;
	height: 100%;
	max-height: 100%;
	@media only screen and (max-width:1073px) {
		min-height: 186px !important;
		max-height: 186px !important;
		max-width:  340px;
		min-width:   340px;
		margin-right: 24px;
	}
	@media only screen and (max-width: 500px) {
		max-width:  80vw;
        min-width:   80vw;
		margin-right: 24px;
	}
	

}
.pdf-carousel{
  .swiper-slide {
  width: 270px !important;
    @media only screen and (max-width:67.063rem) {
    width: auto !important;
    margin-right: 24px;
    }
  }
}
.swiper-slide:last-of-type {
 //padding-right: 50px !important;
}

.swiper-wrapper {
	max-height: 100%;
	height: 100%;
	display: flex;

	@media only screen and (max-width:67.063rem) {
		width: auto;
	}

}


//video modal


.modal.show {
	background: rgba(0, 0, 0, 0.6);
}

.modal-backdrop {
	display: none !important;
}

.modal-header .btn-close {
	opacity: 1 !important;
}

.modal-header .btn-close-white:hover {
	filter: invert(59%) sepia(6%) saturate(1815%) hue-rotate(131deg) brightness(94%) contrast(89%) !important;
}

.modal-body {
	iframe {
		width: 100%;
		height: 100%;
		min-height: 60vh;
		margin: auto;
	}
}

.promo-image.video {
	position: relative;
}

.promo-image.video:after {
	content: "";
	position: absolute;
	width: 66px;
	height: 66px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="65.928" height="65.928" viewBox="0 0 65.928 65.928"><defs><clipPath id="clip-path"><rect id="Rectangle_250" data-name="Rectangle 250" width="65.928" height="65.928" fill="%23fff"/></clipPath></defs><g id="Group_1994" data-name="Group 1994" opacity="0.6"><g id="Group_1914" data-name="Group 1914"><path id="Path_1401" data-name="Path 1401" d="M112.886,81.243,91.2,94.52V67.966Z" transform="translate(-66.167 -48.109)" fill="%23fff"/><g id="Group_1516" data-name="Group 1516"><g id="Group_1515" data-name="Group 1515" clip-path="url(%23clip-path)"><path id="Path_1402" data-name="Path 1402" d="M32.964,65.928A32.964,32.964,0,1,1,65.929,32.964,33,33,0,0,1,32.964,65.928m0-57.886A24.922,24.922,0,1,0,57.887,32.964,24.95,24.95,0,0,0,32.964,8.042" fill="%23fff"/></g></g></g></g></svg>');
}
.featured-carousel{
	height: 400px;
}
.carousel:has(.featured-carousel){
	height: 400px;
	.promo-text{
		h2 {
			font-size:18px;
			line-height:23px;
			text-align: left;
		}
	
		p {
			font-size: 16px;
			line-height: 21px;
			text-align: left;
			font-weight: normal;
		}

	}
	.understrap-read-more-link{
		font-size: 14px;
		line-height: 21px;
		text-align: left;
	}
}



.promo-image.pdf img{
	width: auto;
}