@import "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css";

.ui-autocomplete.ui-front {
    position: relative;
    margin-bottom: 0px;
}

[data-component="FPEmotiveSearch"] {
    height: 24em;
}

[data-component="FPEmotiveSearch"] .toggled_search {
    width: 35rem;
    margin: 0 auto;
    position: absolute;
    box-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.25);
    border: 0.0625rem solid #b7b9bb;
    border-radius: 0.15625rem;
    top: calc(1.5em + 1.5rem - 2px);
    display: none;
}

[data-component="FPEmotiveSearch"] .search-toggle-btn {
    float: right;
    position: relative;
    top: -10px;
    right: -20px;
}

[data-component="FPEmotiveSearch"] .inline-search-bar {
    position: absolute;
    display: block;
    z-index: 1;
    top: 15em;
    width: 90%;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: transparent;
    transition: none;
    animation: fadeIn 0.3s 1;
    /*max-width: calc(100vw - 20px);*/
}

[data-component="FPEmotiveSearch"][data-state="open"] .inline-search-bar,
[data-component="FPEmotiveSearch"][data-state="open"] {
    width: 35rem;
    margin: 0 auto;

}

[data-component="FPEmotiveSearch"] .inline-search-bar .toggled_search>div.inner {
    margin: 0.75rem 1.6875rem 1.6875rem 1.6875rem;
}

[data-component="FPEmotiveSearch"][data-state="open"] .inline-search-bar .toggled_search>div.typeahead {
    display: block;
}

[data-component="FPEmotiveSearch"][data-state="closed"] .inline-search-bar .toggled_search>div.typeahead {
    display: none;
}

[data-component="FPEmotiveSearch"] .comp-body.slideInRight
{
	text-align: right;
}

@media (min-width: 576px) {
    [data-component="FPEmotiveSearch"] .inline-search-bar {
        width: 35rem;
    }

    [data-component="FPEmotiveSearch"][data-state="closing"] .toggled_search {
        opacity: 0;
        display: block;
        overflow: hidden;
        animation: slideClosed 0.4s 1 linear -0.2s;
    }

    [data-component="FPEmotiveSearch"][data-state="open"] .toggled_search {
        display: block;
        overflow: hidden;
        animation: slideOpen 0.75s 1;
    }

    [data-component="FPEmotiveSearch"] .search-toggle-btn-mobile {
        display: none;
    }
}

@media (max-width: 575px) {
    [data-component="FPEmotiveSearch"] .inline-search-bar .toggled_search {
        width: 100%;
        box-shadow: none;
        border: none;
        position: static;
        display: none;
    }

    [data-component="FPEmotiveSearch"][data-state="open"] .search-box {
        margin-top: 3.6em;
    }

    [data-component="FPEmotiveSearch"][data-state="open"] .inline-search-bar .toggled_search {
        display: block;
    }

    [data-component="FPEmotiveSearch"][data-state="open"] .inline-search-bar,
    [data-component="FPEmotiveSearch"][data-state="closing"] .inline-search-bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        z-index: 99999;
        padding: 1.6875rem !important;
        background-color: #ededee;
    }

    [data-component="FPEmotiveSearch"][data-state="open"] .inline-search-bar {
        animation: slideDownFromTop 0.25s 1;
    }

    [data-component="FPEmotiveSearch"][data-state="closing"] .inline-search-bar {
        animation: slideUpPastTop 0.25s 1;
    }

    [data-component="FPEmotiveSearch"] .inline-search-bar .toggled_search>div.inner {
        padding: 0;
        margin: 0;
    }

    [data-component="FPEmotiveSearch"] .search-toggle-btn-mobile {
        position: absolute;
        top: 0.9em;
        right: 0.9em;
        padding-left: 0.5625rem;
        padding-right: 0.5625rem;
        padding-top: 0.313rem;
        padding-bottom: 0.313rem;
    }

    [data-component="FPEmotiveSearch"] .search-toggle-btn {
        display: none;
    }

    [data-component="FPEmotiveSearch"] .search-toggle-btn::after {
        font-family: "cicon" !important;
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        content: '\e039';
        display: inline-block;
        font-size: 75%;
        margin-left: 0.375rem;
    }

}

@media (min-width: 576px) {
    [data-component="FPEmotiveSearch"] .inline-search-bar {
        top: 15em;
    }
}

@media (min-width: 768px) {
    [data-component="FPEmotiveSearch"] .inline-search-bar {
        top: 16em;
    }
}

@keyframes slideDownFromTop {
    0% {
        top: -100%;
    }

    100% {
        top: 0;
    }
}

@keyframes slideUpPastTop {
    0% {
        top: -;
    }

    100% {
        top: -100%;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes slideOpen {
    0% {
        max-height: 0;
    }

    100% {
        max-height: 400px;
    }
}

@keyframes slideClosed {
    0% {
        max-height: 400px;
        opacity: 1;
    }

    99% {
        max-height: 0;
        opacity: 1;
    }

    100% {
        max-height: 0;
        opacity: 0;
    }
}
/*body[data-modalactive]
{
	overflow: hidden !important;
}*/

/*[data-component="Modal"]
{
	position:fixed;
	transition: opacity .33s ease-in-out 0s, top .33s ease-in-out 0s;
	background: white;
	bottom:0; 
	height:100%;
	width:100%;
	z-index: 100;
	overflow-y: scroll;
	overflow-x: hidden;
	pointer-events: none;
	
	top: 20vh;
	opacity: 0;
}*/


/*[data-component="Modal"].active
{
	pointer-events: all;
	top: 0;
	opacity: 1;
}*/

/*[data-component="Modal"] .modal-contents
{
	opacity: 0;
	transition: opacity .33s ease-in-out 0.33s, top .33s ease-in-out 0.33s;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 40vh;
}

[data-component="Modal"].active .modal-contents
{
	opacity: 1;
	top:0;
}

[data-component="Modal"] .btn-modal-close
{
	position:absolute; 
	top: 0.75rem;
	right: 0;
}

[data-component="Modal"] .btn-modal-close:after
{
    font-family: "cicon" !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\e039';
    display: inline-block;
    font-size: 75%;
    margin-left: 0.375rem;
}

[data-component="Modal"] .subtitle-block.cui h2
{
    font-size: 1.25rem !important;
    line-height: normal !important;
}

[data-component="Modal"] nav.cui.list-widget.group-links.arrowed
{
	padding-left: 0; padding-right:0;
}*/
/** CSS for an Emotive Image container and Top Search Bar with Major Initiatives on homepage **/

.emotive-large.top-banner.emotive-container>.cui.text-on-image>.comp-media {
	/*display: none;*/
}

.top-banner.emotive-container .cui.text-on-image.simple .comp-body {
	position: relative;
}

.top-banner.emotive-container {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none; 
	width: 100%;
	z-index: 100;
	margin: 0;
	/*height: 361px;*/
}

.emotive-small.top-banner.emotive-container .background-image {
	flex: 0 0 100%;
	max-height: 34.8%;
	background-size: cover;
	background-repeat: no-repeat;
	height: 500px;
}

.emotive-large.top-banner.emotive-container .card-media .background-image {
	height: auto;
}

.top-banner.emotive-container .cui.text-on-image.simple .comp-body.bottom-left {
	bottom: 25px;

	left: 0;
	padding: 0;
}

.emotive-small.top-banner.emotive-container .cui.text-on-image.simple .comp-body.bottom-left {
	bottom: 50px !important;
}

.emotive-large.top-banner.emotive-container .card-media {
	width: 100%;
}

.emotive-large.top-banner.emotive-container .card-body {
	padding: 1rem;
}

.emotive-large.top-banner.emotive-container .swiper-wrapper .swiper-slide.cui.card {
	flex-direction: column;
}

.top-banner.emotive-container.p-0 {
	margin: 0 auto;
}

.emotive-large.top-banner.emotive-container>.cui.text-on-image>.comp-media>.background-image {
	margin: 0.9rem 0.9rem 0 0.9rem;
}

.emotive-large.top-banner.emotive-container .cui.text-on-image.simple .comp-body {
	position: relative;
	padding: 0;
}

.emotive-large.top-banner.emotive-container .background-image {
	height: 700px;
}

.emotive-large.top-banner.emotive-container>.cui.text-on-image>.comp-media>.background-image.ratio-16x9 {
	padding-bottom: 0;
}


.emotive-large.top-banner.emotive-container .cui.card {
	flex-direction: column;
	min-width: 32.5%;
	width: 300px;
}

@media (max-width: 350px) {
	.emotive-large.top-banner.emotive-container {
		flex-direction: column;
		min-width: 32.5%;
		width: 230px;
	}
}

@media (max-width: 767px) {
	.emotive-small.top-banner.emotive-container .background-image {
		height: 200px !important;
	}
}


@media (max-width: 992px) {
	.cta-background.coc-white-opacity {
		opacity: 1 !important;
		transform: matrix(1, 0, 0, 1, 0, 0) !important;
		animation-duration: 0s !important;
		margin: 0 auto;
	}

	.emotive-large.top-banner.emotive-container .cui.text-on-image.simple .comp-body.bottom-left {
		bottom: 0px !important;
		left: 0;
		padding: 0;
	}

	.emotive-large .cta-background.coc-white-opacity {
		background: transparent;
		margin: 0;
	}
}


@media (min-width: 992px) {
	.cta-background.coc-white-opacity {
		padding: 0 0.9rem;
		margin: 0 auto;
	}
	
	.top-banner.emotive-container {
		/*height: 377px;*/
	}
	
/*	.cui.text-on-image.simple .comp-body .title.bg-red {
		top:4em !important;
	}*/

	.top-banner.emotive-container .cui.text-on-image.simple .comp-body {
		width: 100%;
	}

	.emotive-large.top-banner.emotive-container .cui.text-on-image.simple .comp-body {
		position: absolute;
		padding: 0;
		height: auto;
	}

	.emotive-large.top-banner.emotive-container>.cui.text-on-image>.comp-media {
		display: block;
	}

	.top-banner.emotive-container>.cui.text-on-image>.comp-media>.background-image {
		margin: 0;
	}

	.top-banner.emotive-container .background-image {
		border-top-left-radius: 0;
		border-top-right-radius: 0;

	}

	.top-banner.emotive-container .background-image {
		border-top-left-radius: 0;
		border-top-right-radius: 0;

	}
}
@media (min-width: 1200px) {
	.emotive-large.top-banner.emotive-container .background-image {
		height: 900px;
	}
}
/** Emotive Image Section CSS **/

/** Emotive Image Section CSS End **/
/** CSS for Horizontal Slider and Popular today with Major Initiatives on homepage **/

/**
 * Swiper 5.3.0
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * http://swiperjs.com
 *
 * Copyright 2014-2020 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: January 11, 2020
 */


:root {
	--swiper-theme-color: #4b4f55
}

.swiper-container {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	list-style: none;
	padding: 0;
	z-index: 1
}

.swiper-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: flex;
	transition-property: transform;
	box-sizing: content-box
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
	transform: translate3d(0px, 0, 0)
}


.swiper-slide {
	flex-shrink: 0;
	width:300px;
	position: relative;
	transition-property: transform
}


.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper {
	scroll-snap-type: x mandatory
}

:root {
	--swiper-navigation-size: 44px
}

.swiper-button-lock {
	display: none
}

.swiper-pagination {
	position: absolute;
	text-align: center;
	transition: .3s opacity;
	transform: translate3d(0, 0, 0);
	z-index: 10
}

.swiper-container-horizontal>.swiper-pagination-bullets {
	bottom: -6px;
	left: 0;
	width: 100%
}

.swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	display: inline-block;
	border-radius: 100%;
	background: #000;
	opacity: .2
}

button.swiper-pagination-bullet {
	border: none;
	margin: 0;
	padding: 0;
	box-shadow: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
	cursor: pointer
}

.swiper-pagination-bullet-active {
	opacity: 1;
	background: var(--swiper-pagination-color, var(--swiper-theme-color))
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0 4px
}

.swiper-pagination-white {
	--swiper-pagination-color: #ffffff
}

.swiper-pagination-black {
	--swiper-pagination-color: #000000
}

.swiper-pagination-lock {
	display: none
}

.swiper-scrollbar {
	border-radius: 10px;
	position: relative;
	-ms-touch-action: none;
	background: rgba(0, 0, 0, .1)
}

.swiper-container-horizontal>.swiper-scrollbar {
	position: absolute;
	left: 1%;
	bottom: 3px;
	z-index: 50;
	height: 5px;
	width: 98%
}

.swiper-scrollbar-drag {
	height: 100%;
	width: 100%;
	position: relative;
	background: rgba(0, 0, 0, .5);
	border-radius: 10px;
	left: 0;
	top: 0
}

.swiper-scrollbar-cursor-drag {
	cursor: move
}

.swiper-scrollbar-lock {
	display: none
}


.swiper-container .swiper-notification {
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	opacity: 0;
	z-index: -1000
}

/** Swiper 5.3.0 End **/


/** PL CSS styles **/

.swiper-wrapper {
	padding: 0 0 1rem 0;
}


/** card border radius change should be updated on the current card component **/
.swiper-slide.cui.card,
.cui.card {
	border-radius: 0.1875rem;
	overflow: inherit;
	text-align: left;
}


/*.swiper-wrapper .swiper-slide.cui.card {
	box-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.25);
}*/

.swiper-wrapper .swiper-slide.cui.card:hover {
	transform: scale(1.01);
	-moz-transform: scale(1.01);
	-webkit-transform: scale(1.01);
	-o-transform: scale(1.01);
	-ms-transform: scale(1.01);
	-webkit-transform: scale(1.01);
	transition: transform 0.1s ease-in-out;
	/*box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.35);
	transition-property: background, box-shadow;
	border-radius: 4px;*/
}

body[data-browser='ie11'] .swiper-wrapper .swiper-slide.cui.card:hover
{
	transition: none !important;
	transform: none !important;
}

.swiper-wrapper .swiper-slide.cui.card,
.swiper-wrapper .swiper-slide.cui.card.small {
	min-width: 32.4%;
	width: 300px !important;
}

.swiper-wrapper .swiper-slide.cui.card {
	flex-direction: column;
}

.swiper-wrapper .swiper-slide.cui.card.small {
	flex-direction: row;
}

.card-media {
	width: 100%;
}


@media (max-width: 350px) {
	.swiper-wrapper .swiper-slide.cui.card.,
	.swiper-wrapper .swiper-slide.cui.card.small {
		flex-direction: column;
		min-width: 32.4%;
		width: 250px !important;
	}
}


@media (min-width: 767px) {

	/* Hide swiper pagination till we need it */
	.swiper-pagination {
		display: none;
	}
}




/** Horizontal Sliding Article Cards **/
.swiper-slide .card-title {
	color: #c8102e !important;
}

.swiper-slide {
	font-family: "Open Sans", Helvetica, Arial, Verdana, sans-serif;
	display: inline-block;
}

button.swiper-slide {
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

button.swiper-slide:last-child {
	scroll-snap-align: center;
}

button.swiper-slide:first-child {
	scroll-snap-align: center;
}

/** Horizontal Sliding Article Cards end **/

@media (min-width: 992px) {
	.swiper-wrapper .swiper-slide.cui.card {
		min-width: 32.5%;
	}
}

@media (max-width: 992px) {
	.swiper-wrapper .swiper-slide.cui.card.small .card-media .background-image.ratio-5x6 {
	    padding-bottom: 145%;
	}
}

/* -------------------------------------------------------
	Start of horizontal scroll cards
	------------------------------------------------------- */
.swiper-slide {
	-webkit-flex-shrink: 0;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	width: 100%;
	position: relative;
	-webkit-transition-property: -webkit-transform;
	transition-property: -webkit-transform;
	transition-property: transform;
	transition-property: transform, -webkit-transform;
}

.card {
	min-width: 30%;
	-webkit-transition-duration: 0.3s;
	-moz-transition-duration: 0.3s;
	-o-transition-duration: 0.3s;
	transition-duration: 0.3s;
	-webkit-transition-property: -webkit-transform;
	-moz-transition-property: -moz-transform;
	-o-transition-property: -o-transform;
	transition-property: transform;
}

.card-scale {
	transform: scale(0.95);
}

.swiper-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-transition-property: -webkit-transform;
	transition-property: -webkit-transform;
	transition-property: transform;
	transition-property: transform, -webkit-transform;
	-webkit-box-sizing: content-box;
	box-sizing: content-box;
	padding: 1rem 0;
	flex-wrap: nowrap;
	margin: 0;
	-webkit-overflow-scrolling: touch;
	left: 0;
	scrollbar-width: none;
	/* Firefox 8 */
	-ms-overflow-style: none;
	/* IE 10+ */
}

.swiper-wrapper::-webkit-scrollbar {
	width: 0;
	background: transparent;
	/* Chrome/Safari/Webkit */
}

.swiper-wrapper .swiper-slide {
	max-width: 100%;
	padding: 0;
	margin-right: 10px;
}

.swiper-wrapper .swiper-slide.cui.card {
	flex-direction: column;
	margin-bottom: 0 !important;
}

.swiper-wrapper .swiper-slide.cui.card .background-image {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.swiper-wrapper.swiper-slide.cui.card.medium .card-media {
	border-bottom: 0;
	position: relative;
	width: 33.33%;
}

.swiper-wrapper .swiper-slide.cui.card.medium .card-body {
	width: 66.66%;
}

.swiper-wrapper .swiper-slide.cui.card.medium .card-title {
	font-size: 1.25rem;
	margin-bottom: 0;
	font-family: Open Sans;
	color: #c8102e;
}

.swiper-wrapper .swiper-slide:last-child {
	margin-right: 0 !important;
}

/* -------------------------------------------------------
	 Start of cards with modal pop up
	 ------------------------------------------------------- */

.modal-header.cui>.col-9,
.modal-header.cui>.col-md-11 {
	padding-left: 0;
}
/** CSS for animations and modal transitions **/
/** This is not going to be a component, but can be applied to certain components. **/
/** Currently this is only being used on the home page **/

@import "https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css";


/* animation staggers */
 
._1 {
  -webkit-animation-delay: 0.2s;
  -moz-animation-delay: 0.2s;
  -ms-animation-delay: 0.2s;
  -o-animation-delay: 0.2s;
  animation-delay: 0.2s;
}
._2 {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  -ms-animation-delay: 0.4s;
  -o-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
._3 {
  -webkit-animation-delay: 0.6s;
  -moz-animation-delay: 0.6s;
  -ms-animation-delay: 0.6s;
  -o-animation-delay: 0.6s;
  animation-delay: 0.6s;
}
._4 {
  -webkit-animation-delay: 0.8s;
  -moz-animation-delay: 0.8s;
  -ms-animation-delay: 0.8s;
  -o-animation-delay: 0.8s;
  animation-delay: 0.8s;
}
._5 {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -ms-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
}

/*animation staggers end */

/* animations */

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

.slideInLeft {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.fast {
    -webkit-animation-duration: .8s;
    animation-duration: .8s
}

.animated.faster,
.anim-fade-up {
	animation-timing-function: ease-in-out;
	-webkit-animation-duration: .4s !important;
	animation-duration: .4s !important;
}

body[data-modalstate='opening'] .modal-backdrop	
{ 
	animation: modalOpeningBackdrop 0.4s ease-in-out;
}

body[data-modalstate='closing'] .modal-backdrop	
{ 
	animation: modalClosingBackdrop 0.5s ease-in-out;
}

.modal[data-modalstate='opening']
{
	animation: modalOpening 0.5s ease-in-out
}

@keyframes modalOpening
{
	0% { opacity: 0; top: 2em; }
	100% { opacity: 1; top:0; }
}

@keyframes modalOpeningBackdrop 
{
	0% { opacity: 0; }
}

@keyframes modalClosingBackdrop 
{
	0% { opacity:1; }
	100% { opacity: 0; }
}

/* animations end */




/** CSS for the new Calgary 3.0 homepage **/
/** This is not going to apply to any component, it is only for the homepage **/


/** background-wrapper for laying effect on homepage **/

.background-wrapper 
{
	transition: all 2s ease-in-out;
	background: #f6f6f6;
	position: relative;
	scroll-behavior: smooth;
}

body {
	background: #f6f6f6;
}

.cui.coc-footer {
	position: relative;
}

button.cui.card {
	align-items: normal;
}

.cui.card .card-body { 
	overflow-wrap: break-word; word-wrap: break-word; 
}
 
.media .media-body { 
	overflow-wrap: break-word;  word-wrap: break-word; 
}

header {
	box-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.25);
}

main {
	position: relative;
	width: 100%;
}

#global-search-container,
#searchModalButton
{
	display:none !important;
}

.cui.search-box.d-none.d-sm-block {
	display: block;
}

.fixed-image {
	position: fixed;
	top:0;
	height: 650px;
	background-size: cover;
	background-position: center;
	width: 100%;
	z-index:-1;
}
@supports (-webkit-touch-callout: none) 
{
	.fixed-image { position:absolute; }
}

/** homepage heading styles **/
/*.cui.subtitle-block.red-underline
{ 
	padding: 2rem 0 1rem 0; margin-bottom: 0;
}*/

/*div.subtitle-block.red-underline h2
{
	font-weight: bold;
    font-size: 1.7rem;
}*/

/*div.subtitle-block.red-underline hr
{
	width: 5.5em;
    background: #c8102e;
    height: .30rem;
	float:left;
}*/

@media (max-width: 575px) 
{
	body[data-mobilemodal]
	{
		overflow-y: hidden;
	}
}


/** Container spacing **/
.initiatives .container-home,
.feat-news .container-home,
#programs-services-modal .container-home {
	padding-left: 15px;
	padding-right: 15px;
	overflow: hidden;
}

/*.container-home {
	margin-left: auto;
	margin-right: auto;
	max-width: 100vw;
	overflow: hidden;
}*/

.container-home > .subtitle-block:first-child {
	/*padding-top: 0.9rem;*/
	padding-top: 0;
}

.background-wrapper {
	box-sizing: border-box;
}

@media (max-width: 767px) {

	.background-wrapper {
	}
}

@media (min-width: 767px) and (max-width: 992px) {

	.background-wrapper {
	}
}

@media (min-width: 992px) {
	.background-wrapper {
	}

/*	.container-home {
		max-width: 1022px;
	}*/
}

@media (max-width: 992px) {
	.container-home {
		padding-left: 15px;
		padding-right: 15px;
	}

	.initiatives .container-home,
	.mobile-services-container .container-home,
	.feat-news .container-home {
		padding-left: 15px;
		padding-right: 15px;
	}

	.nav-mega-btn span.cicon-search {
		font-size: 24px;
	}
}

/** Container spacing end **/



/** Top Search box section in Emotive Container **/

/** CSS Styles for the red text banner in the search section on homepage **/
.cui.text-on-image.simple .comp-body .title.bg-red {
	/*top: 70px; */
	position: relative;
}

.cui.text-on-image.simple .title {
	text-transform: uppercase;
	font-weight: bolder;
	padding: 0 10px;
	line-height: 2.625rem; /*42px*/
}


@media (min-width: 350px) and (max-width: 767px) {
	.cui.text-on-image.simple .title {
		font-size: 1.5rem;
		line-height: 2.25rem; /*36px*/
	}
}

.cui.text-on-image.simple .comp-body.bottom-left {
	left: 0;
}

.cui.text-on-image {
	margin-bottom: 0;
}

@media (max-width: 350px) {

	.cui.text-on-image.simple .title {
		font-size: 1.2rem;
		line-height: initial;
	}

	.cui.text-on-image.simple .comp-body .title.bg-red {
		/*top: 230px;*/
		position: relative;
	}

}

@media (min-width: 576px) {
/*	.cui.text-on-image.simple .title {
		line-height: 2.1rem !important;
	}*/

	.cui.text-on-image.simple .comp-body {
		height: 100%;
	}
}

@media ( min-width: 992px ) {
	.cui.text-on-image.simple .title {
		line-height: 3rem; /*48px*/
	}
}

div#modal-search-1 {
	-webkit-animation-duration: .2s !important;
	animation-duration: .2s !important;
}

.coc-tagline {
	position: relative;
	top: 1.125rem;
	font-weight: bolder;
	line-height: 1.25rem;
}

.cui.src-btn {
	background: #fff;
	border-color: #4b4f55;
	color: #4b4f55;
	position: relative;
	border-radius: 1rem;
	border-width: 0.075rem;
	margin: 0 0.75rem 0.75rem 0;
	font-size: 1.125rem;
	box-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.25);

}

.cui.src-btn:focus {
	border-color: #0099FF;
	background: #fafafa;
	border-width: 0.2rem;
	box-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.5);
}


.cui.search-box .search-box-btn.icon-only {
	background: transparent;
	color: #c8102e;
	border: none;
	box-shadow: none;
}

.cui.search-box .search-box-btn.icon-only [class*="cicon"] {
	color: #c8102e;
}


.home-search {
	padding: 1.875rem 0.9375rem;
	position: absolute;
	top: 14em;
	width: 100%;
}

@media (min-width: 576px) {
	
	.cui.text-on-image.simple .comp-body {
		overflow: visible;
	}
}

@media (min-width: 576px) and (max-width: 767px) {
	.cui.text-on-image.simple .comp-body {
		overflow: visible;
	}
	
	.toggled_search {
	}
}

@media (min-width: 768px) {
	.cui.text-on-image.simple .comp-body {
		overflow: visible;
	}

	.cui.text-on-image.simple .comp-body .title.bg-red {
		top: 100px; /*5em*/
		position: relative;
	}
}

@media (min-width: 992px) {
	.cui.text-on-image.simple .comp-body .title.bg-red {
		top: 90px !important; /*4em*/
	}
}

/** Top Search box section in Emotive Container end **/




/** Mobile Popular Today section **/
@media (max-width: 576px) {
	.cui.list-widget .group-links.arrowed a {
		padding: 0.75rem 0.5rem;
	}
}


@media (max-width: 992px) {
	a.menu-btn.cui.btn-md.primary {
		padding: 7px 20px !important;
		margin-left: 1rem;
		margin-bottom: 1rem;
		border-bottom: 0.125rem solid #c8102e !important;
	}

	ul#programsAndServices ul.cui.catalogue-group .group-links {
		display: none;
	}

	ul.group-links.col-sm-6,
	ul.group-links.col-8,
	ul.group-links.col-4 {
		flex: 100% !important;
		min-width: 100% !important;
	}

	.emotive-small.top-banner .cui.text-on-image.simple .comp-body.bottom-left {
		bottom: 75px;
	}

	.coc-header .cui.search-box.d-none.d-sm-block {
		display: none !important;
	}
}


/** Mobile Popular Today section end **/
/** CSS for the popluar today card list for the home page **/
/** This is based off the cards component, but does not need to be added to the component, it will be for the homepage only **/



/** Updates to current component that should happen **/
/** More-Less component should have easing on it **/

div#more-less-hidden-content {
	animation-timing-function: ease-in-out;
	-webkit-animation-duration: .4s !important;
	animation-duration: .4s !important;
}

/** Popular for today **/

.swiper-wrapper .slider-card.cui.card {
	flex-direction: column;
	min-width: 32.4%;
	width: 300px;
}
 .card-media {
	width: 100%;
}


@media (max-width: 350px) {
	.swiper-wrapper .slider-card.cui.card {
		flex-direction: column;
		min-width: 32.4%;
		width: 250px;
	}
}


/*.popular-today span.cui.cicon-lg {
	color: #c8102e;
}
*/
/** Popular for today end **/


/** 1 and 2 card homepage options **/



/* One card display */
.popular-today .pop-card-1.swiper-wrapper .swiper-slide.cui.card {
	flex-direction: column;
}

.pop-card-1 .swiper-wrapper .swiper-slide.cui.card {
	min-width: 100% !important;
}

/* One card display end */



/* two card display */
.pop-card-2 .swiper-wrapper .swiper-slide.cui.card {
	min-width: 49.4% !important;
}

/* two card display end*/


@media (min-width: 767px) {

	/* One card display */
	.popular-today .pop-card-1 .cui.card .card-title {
		font-size: 1.4375rem !important;
	}

	.popular-today .pop-card-1 .cui.card .card-context-title {
		font-size: 1.125rem;
	}

	/* One card display end */

}


@media (min-width: 576px) {

	/* Two cards display */
	.pop-card-2.swiper-wrapper .swiper-slide {
		min-width: 49.5% !important;
	}

	/* Two cards display end */

	/* One card display */
	.pop-card-1.swiper-slide-wrapper .swiper-slide {
		min-width: 100% !important;
	}

	.popular-today .pop-card-1 .card-media {
		width: 70% !important;
	}

	.popular-today .pop-card-1.swiper-wrapper .swiper-slide.cui.card {
		flex-direction: row;
	}

	/* One card display end */
}




/* popular today switch */
.desktop-popular-list {
	display: none;
}

.mobile-popular-list {
	display: block;
}


@media (min-width: 992px) {

	/* popular today switch */
	.desktop-popular-list {
		display: block;
	}

	.mobile-popular-list {
		display: none;
	}

}

/* end popular today switch */

/* Popular Today List*/
span.cicon-lg.mr-sm {
	font-size: 160%;
}

/* Mobile */
.mobile-popular-list .cui.list-widget a {
	text-decoration: none;
	width: 100%;
}

.mobile-popular-list ul li a.cui.btn-md {
	text-align: left;
	align-items: center;
	justify-items: center;
	display: flex;
	/*box-shadow: 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.25);*/
	border-radius: 4px;
	background: #fff;
	border: 0.0625rem solid #dbdcdd;
}

.mobile-popular-list ul li a.cui.btn-md:hover {
	background: #fff;
	transform: scale(1.01);
	-moz-transform: scale(1.01);
	-webkit-transform: scale(1.01);
	-o-transform: scale(1.01);
	-ms-transform: scale(1.01);
	-webkit-transform: scale(1.01);
	transition: transform 0.1s ease-in-out;
/*	box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.35);*/
}

.mobile-popular-list ul li a [class*=" cicon-"] {
	color: #c8102e;
}

.mobile-popular-list ul li a span {
	display: block;
}

.mobile-popular-list ul li a .subtitle-text {
	color: #333;
	font-weight: normal;
}

/* Mobile  end*/


/* Desktop */
.desktop-popular-list .row-equal-height-tiles .col .card .card-body h3.card-title,
.desktop-popular-list .row-equal-height-tiles .col .card .card-body p {
	font-size: 1rem;
}

.desktop-popular-list .row-equal-height-tiles .col {
	padding-right: 0.625rem;
	padding-left: 0;
}

.desktop-popular-list .row-equal-height-tiles .col:last-child {
	padding-right: 0;
}

.row-equal-height-tiles {
	display: flex;
	flex-wrap: wrap;
}

.tile-detail.text-left {
	height: 100%;
}

.row-equal-height-tiles>[class*="col"] {
	display: flex;
}

.desktop-services-container .subtitle-block.cui {
	padding-top: 0;
}

button.cui.tile-button {
	padding: 1.8rem;
	background: #ededee;
	color: #c8102e;
	flex-wrap: wrap;
	height: 100%;
	vertical-align: top;
	border: 0.0625rem solid #dbdcdd;
}


/* Desktop end */
/** CSS for the City Emergency Event Banner for the home page **/
/** This is based off the Global alert component **/

/* City Event styles */
.city-event p.card-title {
	font-size: .95rem;
}

.city-event .mobile-popular-list .cui[class*="btn"].primary-text [class*="cicon"],
.cui[class*="btn"].secondary-text [class*="cicon"] {
	display: inline-block;
	align-self: baseline;
	margin-top: 5px;
}

.alert-banner.city-event {
	background: #f6f6f6;
	position: relative;
	top: 2rem;
}

.alert-banner .popular-today span.cui.cicon-lg {
	color: #333;
}

/* City Event styles end */



/** CSS updates for buttons on homepage **/


/** Buttons **/
.cui.modal .btn-modal-close,
.cui.alert-banner.global .alert-action-btn {
	box-shadow: none;
}

.articleBtn {
	position: relative;
	cursor: pointer;
	text-align: left;
	border: 0;
}

.cui[class*="btn"].icon-only.primary:hover {
	background: #c8102e;
}


/** Buttons end **/
/** Button Animations **/
button {
	-webkit-transition: transform 0.1s ease-in-out;
	-moz-transition: transform 0.1s ease-in-out;
	transition: transform 0.1s ease-in-out;
}

button:hover {
	transform: scale(1.01);
	-moz-transform: scale(1.01);
	-webkit-transform: scale(1.01);
	-o-transform: scale(1.01);
	-ms-transform: scale(1.01);
	-webkit-transform: scale(1.01);
	transition: transform 0.1s ease-in-out;
	box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.35);
	transition-property: background, box-shadow;
}


/** Button Animation end **/
/** CSS updates for modals on homepage **/

.modal-open {
	overflow: hidden !important;
}

.cui.modal {
	padding-right: 0 !important;
	position: fixed;
	bottom: 0;
	top: auto;
	z-index: 10011;
	outline: 0;
	overflow: hidden;
	margin: 0 auto;
	height: 100% !important;
	width: 100% !important;
	border-radius: 0px;
}

.modal-header h2 {
	font-size: 1.25rem;
}

@media (max-width: 350px) {

	.cui.modal .modal-header,
	.cui.modal .modal-footer {
		padding: 0 1rem;
	}

	.cui.modal .modal-header .cui.btn-md {
		margin-right: 0 !important;
	}

	.cui.modal .modal-body.bg-medium.p-md {
		padding-top: 0.5rem !important;
	}
}


@media (max-width: 576px) {
	.cui.modal {
		height: 100% !important;
		width: 100% !important;
		border-radius: 0px;
	}

/*	.cui.modal .subtitle-block.cui h2 {
		font-size: 1.25rem !important;
		line-height: normal !important;
	}*/
}

	
@media (min-width: 767px) {
	.modal img {
		max-width: min(700px, 100%);
	}
}

/** CSS updates for the top header and menu across the website **/
/** Currently for the new Homepahe **/


.coc-logo {
	margin-right: auto !important;
}

@media (min-width: 1350px) {
	.cui.coc-header .header-inner {
		height: 2.45rem;
	}
}

@media (max-width: 991px) {
	.cui.nav-mega .sub-nav-group {
		display: block;
		margin: 0;
		width: 100%;
		flex: 100% !important;
		min-width: 100% !important;
	}

	.cui.nav-mega .nav-item>a .cicon-angle-down {
		font-size: 120%;
	}

	.menu-header span {
		background: #ededee;
		border-bottom: 0.125rem solid #dbdcdd;
		color: #000;
		font-weight: 600;
		padding: 0.75rem 1.125rem;
		text-decoration: none;
		display: flex;
		font-size: 1.25rem;
	}

	.cui.nav-mega .nav-item>a {
		padding: 0.75rem 2.125rem;
		text-decoration: none;
	}

	.cui.nav-mega .cui.catalogue-group .group-title {
		padding-left: 2.75rem;
	}

	.cui.nav-mega .cui.catalogue-group .group-links a {
		padding: 0.5625rem 0 0.5625rem 2.75rem;
	}

	.catalogue-group .h3.font-bold {
		margin-left: 35px;
		margin-bottom: 0px;
		margin-top: 10px;
	}
}

@media (min-width: 992px) {
	.menu-header span {
		display: none;
	}
}
	
.coc-pl nav.cui .nav-menu .nav-item .sub-nav .sub-nav-group
{
	border-right:none;
}

@media only screen and (min-width: 992px) 
	/*.cui.nav-mega .sub-nav-group {
		border-right: none;
	} 

	.coc-pl nav.cui .nav-menu .nav-item .sub-nav .sub-nav-group li a {
		line-height: 1.3;
		font-size: 15px;
		font-size: 1.5rem;
		color: #333333;
		padding-top: 12px;
		padding-bottom: 12px;
		padding-left: 20px;
	}

	.coc-pl nav.cui .nav-menu .nav-item .sub-nav .sub-nav-group a {
		min-width: 100%;
		display: inline-block;
		line-height: 1.6;
		font-size: 16px;
		font-size: 1.6rem;
		border-bottom: 1px solid #dbdcdd;
		padding: 6px 6px 6px 10px;
		padding: 0.6rem 0.6rem 0.6rem 1rem;
	}

	.coc-pl nav.cui .nav-menu .nav-item .sub-nav .sub-nav-group ul li {
		flex: 100%;
		min-width: 100%;
	}*/

}



/* Menu button CSS */

.cui.nav-mega-btn-open,
.cui.nav-mega-btn {
	color: #c8102e;
	display: inline-block;
	border: 0;
	background: 0;
	padding: 0px;
	margin-right: 1.25rem;
	margin-left: 0 !important;
	font-size: 0.8125rem;
	box-shadow: none;
	-webkit-box-flex: 0;
	-moz-box-flex: 0;
	-webkit-flex-grow: 0;
	-ms-flex: 0;
	flex-grow: 0;
	-webkit-flex-shrink: 0;
	-moz-flex-shrink: 0;
	flex-shrink: 0;
	width: 2.875rem;
}


.cui.nav-mega-btn-close {
	box-shadow: none;
}

.cui.nav-mega-btn-open:hover,
.cui.nav-mega-btn:hover .cui.nav-mega-btn-close:hover {
	-webkit-transition: transform 0.1s ease-in-out;
	-moz-transition: transform 0.1s ease-in-out;
	transition: transform 0.1s ease-in-out;
	box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.35);
}

.cui .nav-mega-btn-close {
	background: #f6f6f6;
	border-color: transparent;
	padding-left: 0.5625rem;
	padding-right: 0.5625rem;
	color: #c8102e;
	border: none;
	text-decoration: underline;
}

.cui .nav-mega-btn-close:hover {
	background: #ededee;
	text-decoration: none;
	color: #c8102e;
}
@media (max-width: 991px) {

	.cui.nav-mega .nav-item>a,
	.cui.nav-mega {
		background: #ededee;
	}
}

@media (min-width: 992px) {

	.cui.nav-mega-btn-open,
	.cui.nav-mega-btn {
		display: none;
	}
}


/**
 * Swiper 5.3.0
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * http://swiperjs.com
 *
 * Copyright 2014-2020 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: January 11, 2020
 */


:root {
	--swiper-theme-color: #4b4f55
}

.swiper-container {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	list-style: none;
	padding: 0;
	z-index: 1
}

.swiper-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: flex;
	transition-property: transform;
	box-sizing: content-box
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
	transform: translate3d(0px, 0, 0)
}


.swiper-slide {
	flex-shrink: 0;
	width:300px;
	position: relative;
	transition-property: transform
}


.swiper-container-horizontal.swiper-container-css-mode>.swiper-wrapper {
	scroll-snap-type: x mandatory
}

:root {
	--swiper-navigation-size: 44px
}

.swiper-button-lock {
	display: none
}

.swiper-pagination {
	position: absolute;
	text-align: center;
	transition: .3s opacity;
	transform: translate3d(0, 0, 0);
	z-index: 10
}

.swiper-container-horizontal>.swiper-pagination-bullets {
	bottom: -6px;
	left: 0;
	width: 100%
}

.swiper-pagination-bullet {
	width: 8px;
	height: 8px;
	display: inline-block;
	border-radius: 100%;
	background: #000;
	opacity: .2
}

button.swiper-pagination-bullet {
	border: none;
	margin: 0;
	padding: 0;
	box-shadow: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none
}

.swiper-pagination-clickable .swiper-pagination-bullet {
	cursor: pointer
}

.swiper-pagination-bullet-active {
	opacity: 1;
	background: var(--swiper-pagination-color, var(--swiper-theme-color))
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
	margin: 0 4px
}

.swiper-pagination-white {
	--swiper-pagination-color: #ffffff
}

.swiper-pagination-black {
	--swiper-pagination-color: #000000
}

.swiper-pagination-lock {
	display: none
}

.swiper-scrollbar {
	border-radius: 10px;
	position: relative;
	-ms-touch-action: none;
	background: rgba(0, 0, 0, .1)
}

.swiper-container-horizontal>.swiper-scrollbar {
	position: absolute;
	left: 1%;
	bottom: 3px;
	z-index: 50;
	height: 5px;
	width: 98%
}

.swiper-scrollbar-drag {
	height: 100%;
	width: 100%;
	position: relative;
	background: rgba(0, 0, 0, .5);
	border-radius: 10px;
	left: 0;
	top: 0
}

.swiper-scrollbar-cursor-drag {
	cursor: move
}

.swiper-scrollbar-lock {
	display: none
}


.swiper-container .swiper-notification {
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	opacity: 0;
	z-index: -1000
}




@media (max-width: 991px) {
    .menu-header.sr-only {
        position: relative;
        width: auto;
        height: auto;
        padding: initial;
        margin: initial;
        overflow: auto;
        clip: initial;
        border: initial;
    }
}
/* fix the layout on the home page*/
[type=reset],
[type=submit],
button,
html [type=button] {
    -webkit-appearance: initial;
}

.page-container {
    overflow-x: hidden;
}

/* The background colour removed only on the home page */
@media (max-width: 991px) {
    .background-image-block.cui .comp-body {
        background-color: transparent;
    }
}

.card-width-reset {
    min-width: auto !important;
}

.cui.emotive-small.top-banner.emotive-container .cui.text-on-image.simple .comp-body.slideInRight {
    right: 0;
   /* overflow-x: hidden;*/
    height: inherit;
}

.emotive-large.top-banner.emotive-container>.cui.text-on-image>.comp-media>.background-image {
    margin-top: 0;
}

.homepage-card-set .container-home .swiper-wrapper {
    padding-bottom: 24px;
}

.homepage-card-set .swiper-container-horizontal>.swiper-pagination-bullets {
    bottom: 21px;
}

.homepage-card-set,
.desktop-services-container {
    padding-left: 0;
    padding-right: 0;
}

.mobile-popular-list {
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 3px;
}

.homepage-button .cui.card {
    margin-bottom: 0;
}

.homepage-event-alert .global-inline-banner-container {
    /*padding-top: 1.6875rem;*/
    padding-left: 15px;
    padding-right: 15px;
}

.homepage-event-alert a.cui.card {
    margin-bottom: 9px;
}

.swiper-wrapper {
    padding: 1rem 0 0 0;
}

/* When modal open, fix the search input*/
[data-component="FPEmotiveSearch"] {
    height: 325px;
}

[data-component="FPEmotiveSearch"][data-state="open"] .inline-search-bar .search-box-btn.d-none.d-sm-flex {
    display: -webkit-box !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
}

[data-component="FPEmotiveSearch"][data-state="open"] .inline-search-bar .search-box-btn.d-flex.d-sm-done,
[data-component="FPEmotiveSearch"][data-state="open"] span.cui.search-box-btn.d-sm-none {
    display: none;
}

/*Add the missing icon on the search close button*/
[data-component="FPEmotiveSearch"][data-state="open"] .search-toggle-btn-mobile::after {
    font-family: "cicon" !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: '\e039';
    display: inline-block;
    font-size: 75%;
    margin-left: 0.375rem;
}

.cui.emotive-small .background-image,
.cui.emotive-small .fixed-image {
    position: relative;
    height: 325px !important;
}

.cui.emotive-small.top-banner.emotive-container .cui.text-on-image.simple .comp-body {
    position: absolute;
    top: 0;
}

/*on focus fix*/
/*To aligning with other button style */
.cui.src-btn:focus {
    border-color: initial;
    border-width: 0.075rem;
}

[data-component="FPEmotiveSearch"][data-state="open"] .coc-search-suggestion:hover {
    box-shadow: 0 0.25rem 1.25rem rgba(0, 0, 0, 0.25);
}

.cui.modal .btn-modal-close:focus,
.homepage-event-alert .global-inline-banner-container a.cui.card:focus,
.homepage-card-set .container-home .swiper-wrapper .swiper-slide.cui.card:focus,
.homepage-card-set .container-home .single-card .cui.card:focus,
.desktop-popular-list a.cui.card:focus,
.mobile-popular-list a.cui.card:focus,
.swiper-wrapper .slider-card.cui.card:focus,
[data-component="FPEmotiveSearch"][data-state="open"] .toggled_search:focus,
[data-component="FPEmotiveSearch"][data-state="open"] .search-toggle-btn-mobile:focus,
[data-component="FPEmotiveSearch"][data-state="open"] .search-toggle-btn:focus,
[data-component="FPEmotiveSearch"][data-state="open"] .coc-search-suggestion:focus,
[data-component="FPEmotiveSearch"][data-state="open"] .inline-search-bar .search-box-btn.d-none.d-sm-flex:focus {
    box-shadow: 0 0 0.1875rem 0.1875rem #60bbfe, 0 0.1875rem 0.3125rem rgba(0, 0, 0, 0.15);
}

[data-component="FPEmotiveSearch"][data-state="open"] .coc-search-suggestion:active,
[data-component="FPEmotiveSearch"][data-state="open"] .coc-search-suggestion:visited {
    box-shadow: inset 0 0.0625rem 0.375rem rgba(0, 0, 0, 0.25);
}

@media (min-width: 646px) {
    .container-home .swiper-wrapper.card-row-size-2 .swiper-slide.cui.card {
        width: 50% !important;
    }
}

@media (min-width: 768px) {
    [data-component="FPEmotiveSearch"] {
        height: 400px;
    }

    .cui.emotive-small .background-image,
    .cui.emotive-small .fixed-image {
        height: 400px !important;
    }

    .mobile-popular-list {
        margin-bottom: 27px;
    }

    .fp-programs-and-services .desktop-services-container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .fp-programs-and-services .mobile-services-wrapper {
        display: none;
    }

    .homepage-event-alert .global-inline-banner-container {
        padding-top: 0;
    }
}

@media (max-width: 992px) {
    .container-home {
        margin-right: 15px;
    }

    /*popular for section*/
    .homepage-card-set .container-home {
        margin-right: 15px;
    }

/*    .homepage-card-set .container-home .single-card {
        margin-right: -30px;
        padding-right: 15px;
    }
*/
    .mobile-services-wrapper {
        margin-right: 0;
    }
}

@media (min-width: 992px) {

/*    .homepage-card-set .container-home,
    .homepage-button .container-home {
        max-width: 1052px;
    }*/

    .homepage-button .container-home .desktop-popular-list {
        padding-left: 15px;
        padding-right: 15px;
    }

/*    .homepage-card-set .container-home .subtitle-block.cui.initiatives-desktop-header {
        padding-left: 15px;
    }*/

    .homepage-card-set .container-home .swiper-wrapper {
        padding-bottom: 24px;
    }

    /*.homepage-card-set .container-home .single-card {
        padding-left: 15px;
        padding-right: 15px;
    }*/

    .homepage-card-set .container-home .card-row-size-3 {
        max-width: 1022px;
    }

    .fp-programs-and-services .desktop-services-container {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (min-width: 1052px) {
    .homepage-card-set .container-home .swiper-wrapper.card-row-size-2 .swiper-slide.cui.card {
        width: 503px !important;
    }

/*    .homepage-card-set .container-home .card-row-size-2,
    .homepage-card-set .container-home .card-row-size-3 {
        padding-left: 15px;
        padding-right: 15px;
    }*/
}

@media (min-width: 1200px) {
    /*new utility class in phase 2 increase; from 54px to 72px*/
    .mb-responsive {
        margin-bottom: 4.5rem !important;
    }
}