/*-----------------------------------------------------------  CHURCH ORNAMENT --------------------------*/
@media screen and (max-width: 1179px) {
	.ornament .content .flex .fx_2 .flexC .button-map.fx_2 {
		width: 300px;
		margin: 5px auto;
	}
}

.ornament {
	position: relative;
	z-index: 801;
}

@media screen and (min-width: 600px) {
	.ornament {
		padding: 4em 0;
	}
}

.ornament .content .fx_2 h1 {
	text-transform: uppercase;
	margin-top: 0;
}

.ornament .content .flex .fx_2 .flexC {
	margin-top: 20px;
}

.ornament .content .flex .fx_2 .flexC .button-map.fx_2 {
	min-height: auto;
}

.ornament .content .fx_2.church {
	position: relative;
}

.ornament .content .fx_2.church::after {
	position: absolute;
	content: "";
	background-image: url("../images/church-ornament.png");
	background-size: contain;
	display: block;
	bottom: -10px;
	left: 52%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 570px;
	height: 700px;
	background-repeat: no-repeat;
	background-position: center bottom;
}

@media (max-width: 879px) {
	.ornament .content .fx_2 h1 {
		font-size: 30px;
	}
}

@media (max-width: 599px) {
	.ornament .content .fx_2:nth-child(1) {
		order: 2;
	}

	.ornament .content .fx_2:nth-child(2) {
		order: 1;
		min-height: 240px;
		width: 50%;
		margin: 0 auto 3em auto;
	}

	.ornament .content .flex .fx_2 .flexC .button-map.fx_2:nth-child(2) {
		order: 2;
	}
}


/*-----------------------------------------------------------  FAITH --------------------------*/

.faith {
	padding: 4em 0;
}

.faith {
	background: url("../images/faith-bg-home.jpg") rgba(255, 255, 255, 0.94);
	background-size: cover;
	background-blend-mode: color;
	background-repeat: no-repeat;
	background-position: center center;
}

.faith .content .title {
	text-align: center;
}

.faith .content .title h1 {
	text-transform: uppercase;
	color: var(--color_p);
	font-size: 2.5em;
}

.faith .content .title p {
	color: var(--gray4);
}

.faith .content .flex .fx_2 {
	color: var(--gray5);
}

/*--------------------------------------------------------  CURRENT LOCATION  -----------------------*/
#hm_current-location { margin-bottom: 40px; }

#hm_current-location h2 {
	text-align: center;
	font-size: 22px;
	font-weight: normal;
	margin-bottom: 15px;
}

#hm_current-location .index_back a i {
	margin-right: 2px;
	font-size: initial;
}

@media screen and (max-width: 1179px) {
	#hm_current-location #show-more {
		padding-top: 35px;
	}
}

#hm_current-location #show-more {
	padding-bottom: 35px;
	display: flex;
	justify-content: center;
}

#hm_current-location .show-more-btn {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	color: white;
	background: var(--color1000);
	border: 0;
	height: 37px;
	width: 110px;
	border-radius: 20px;
	cursor: pointer;
}

#hm_current-location .show-more-btn:hover {
	opacity: 0.8;
}


/*-----------------------------------------------------------  SWIPER -------------------------*/
#hm_current-location .cl-date {
	background: var(--color_a);
	color: white;
	padding: 5px 13px;
	text-align: center;
	top: 13px;
	display: table;
	margin: 0 auto;
	position: relative;
	z-index: 100;
	height: 20px;
}

#hm_current-location .pg_swiper .swiper-slide { background: white; }

@media screen and (min-width:640px) {
	#hm_current-location dl dt {
		position: relative;
		height: 0;
		padding-bottom: 87.32%;
	}
}

@media screen and (max-width:639px) {
	#hm_current-location .swiper-slide-active dl {
		width: 320px;
		margin: 0 auto !important;
	}	
	
	#hm_current-location dl dt {
		position: relative;
		width: 320px;
	}
}


#hm_current-location dl dd.cl-link {
	text-align: center;
	padding: 15px 0;
}

#hm_current-location dl dd.cl-link a {
	text-align: center;
	margin: 0 auto;
	color: var(--color_c);
	display: inline-block;
	border: 1px solid var(--color_c);
	padding: 3px 7px;
}

#hm_current-location dl dd.cl-link a:hover {
	color: var(--color_a);
	border: 1px solid var(--color_a);
}


#hm_current-location dl dt img { 
	margin: 0;
	width: 100%;
}

#hm_current-location .cl-place {
	background: var(--color_p);
	position: absolute;
	width: calc(100% - 4px);
	bottom: 0;
	color: white;
	text-align: center;
	padding: 8px 0;
	border-left: 4px solid var(--color_c);
	margin: 0;
	font-size: 16px;
}

#hm_current-location .pg_swiper {
	position: relative;
	width: 100%;
	height: initial !important;
}

#hm_current-location .swiper-slide dl {
	opacity: 0.3;
	filter: grayscale(1);
	margin: 0 15px;
}

#hm_current-location .pg_swiper .swiper-slide-prev dl,
#hm_current-location .pg_swiper .swiper-slide-next dl {
	opacity: 0.6;
}

#hm_current-location .swiper-slide-active dl {
	opacity: 1;
	filter: grayscale(0);
}

#hm_current-location .pg_swiper .swiper-button-prev { left: 18px; }
#hm_current-location .pg_swiper .swiper-button-next { right: 10px; }

#hm_current-location .pg_swiper .swiper-button-prev::before, 
#hm_current-location .pg_swiper .swiper-button-next::before {
	color: var(--color_c);
	opacity: 1;
	background: none;
	padding: 0;
}

#hm_current-location .pg_swiper .swiper-button-prev:hover::before, 
#hm_current-location .pg_swiper .swiper-button-next:hover::before {
	color: var(--color_a);
}

/*-----------------------------------------------------  SOCIAL MEDIA BANNER  -----------------------*/
@media screen and (min-width: 1180px) {
	#video_relics {
		max-width: 750px;
		padding-bottom: 36%;
		left: -5px;
	}
}

@media screen and (min-width: 890px) and (max-width: 1179px) {
	#video_relics {
		max-width: 640px;
		padding-bottom: 45%;
	}
}

@media screen and (min-width: 890px) {
	.hm_socialmedia .content .flexC .follow {
		max-width: 220px;
		width: 100%;
	}

	.hm_socialmedia .content .link-follow a { top: 10px; }	
}

@media screen and (min-width: 680px) and (max-width: 889px) {
	.hm_socialmedia .content .flexC .follow {
		width: 100%;
		text-align: center;
	}

	.hm_socialmedia .content .flexC .link-follow {
		max-width: 280px;
	}

	.hm_socialmedia .content .flexC .link-follow a {
		margin: 10px auto 0;
	}

	#video_relics {
		max-width: 540px;
		padding-bottom: 42%;
	}	
}

@media screen and (max-width: 679px) {
	.hm_socialmedia .content .flexC .fx_3 {
		width: 100%;
		text-align: center;
	}

	.hm_socialmedia .content .flexC .link-follow a {
		margin: 10px auto 0;
	}
}

.hm_socialmedia {
	margin: 0 auto 30px;
	position: relative;
}

.hm_socialmedia .content {
	/*border-top: 1px solid var(--gray2);*/
	padding-top: 0px;
}

.hm_socialmedia .content .flexC { max-width: 850px; width: 100%; margin: 0 auto; }

.hm_socialmedia .content .follow hgroup h2 {
	margin-bottom: -10px;
	font-size: 32px;
}

.hm_socialmedia .content .follow hgroup h3 {
	color: var(--gray5);
	font-weight: 400;
	font-style: italic;
	font-size: 21px;
}

.hm_socialmedia .content .link-follow a {
	display: block;
    width: 100%;
    max-width: 260px;
    border: 1px solid var(--color_a);
    padding: 10px 21px 10px 54px;
    text-align: left;
    position: relative;
    transition: all 0.3s ease-in-out
}

.hm_socialmedia .content .link-follow a:hover {
	color: white;
	transition: all 0.3s ease-in-out;
}

.hm_socialmedia .content .link-follow a::before {
	content: " ";
	display: block;
	width: 45px;
	height: 100%;
	background: var(--color_a);
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	transition: all 0.3s ease-in-out;
}

.hm_socialmedia .content .link-follow a:hover::before {
	width: 100%;
	transition: all 0.3s ease-in-out;
}

.hm_socialmedia .content .link-follow a span {
	position: absolute;
	left: 10px;
	font-size: 26px;
	top: 3px;
	color: white;
}

#hm_history {
	background: hsl(0, 0%, 78%) url(/ctm/31257/projects/BernadetteUSA/gallery/2022/04/Procession_Mariale_photo_VINCENT_Pierre_low.jpg) center center no-repeat;
	background-size: cover;
	background-attachment: fixed;
	background-blend-mode: screen;
	padding: 100px 0;
}

#hm_history .video {
	margin: 0 auto;
}

a.buyTicket {
    width: 290px;
    text-align: center;
    display: block;
    margin: 10px auto;
    font-size: 20px;
    float: none;
}

/*-----------------------------------------------------------  QUICKLINKS  --------------------------*/
@media screen and (min-width:880px) {
	.hm_quicklinks .content .quick-buttons {
		max-width: 870px;
	}

	.hm_quicklinks .content .quick-buttons .fx_4 {
		border-left: 1px solid rgba(242, 174, 0, 0.3);
	}
}

@media screen and (min-width:550px) and (max-width: 879px) {
	.hm_quicklinks .content .quick-buttons {
		max-width: 530px;
	}

	.hm_quicklinks .content .quick-buttons .fx_4 {
		border-left: 1px solid rgba(242, 174, 0, 0.3);
		width: 25%;
		margin: 0;
		padding: 5px;
	}
}

@media screen and (max-width: 549px) {
	.hm_quicklinks .content .quick-buttons {
		max-width: 250px;
	}

	.hm_quicklinks .content .quick-buttons .fx_4 {
		width: calc(100%/2 - 10px);
		margin: 0;
		padding: 10px;
	}

	.hm_quicklinks .content .quick-buttons .fx_4:nth-child(even) {
		border-left: 1px solid rgba(242, 174, 0, 0.3);
	}

	.hm_quicklinks .content .quick-buttons .fx_4:nth-child(1),
	.hm_quicklinks .content .quick-buttons .fx_4:nth-child(2) {
		border-bottom: 1px solid rgba(242, 174, 0, 0.3);
	}
}

.hm_quicklinks {
	background: var(--color_p);
	text-align: center;
	padding-top: 30px;
}

.hm_quicklinks .content .quick-buttons {
	margin: 50px auto 30px;
}

.hm_quicklinks .content .quick-buttons .fx_4:first-child {
	border-left: 0;
}

.hm_quicklinks .content .quick-buttons .fx_4 img,
.hm_quicklinks .content .quick-buttons .fx_4 p {
	color: white;
	opacity: 0.4;
	transition: all 0.2s linear;
}

.hm_quicklinks .content .quick-buttons .fx_4:hover img,
.hm_quicklinks .content .quick-buttons .fx_4:hover p {
	opacity: 1;
	color: var(--color_a);
}

/*-----------------------------------------------------------  PROCESSIONS --------------------------*/

.processions .fx2.procession {
	background: url("https://www.stbernadetteusa.org/ctm/31257/projects/BernadetteUSA/gallery/2022/04/Copie-de-FeteSainteBernadette.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.processions .fx2.gray {
	background: #f2f2f2;
}

.processions .fx2 .content {
	max-width: 580px;
	padding: 20px;
}

@media screen and (min-width: 1180px) {
	.processions .fx2 {
		width: calc(100% / 2);
		padding: 30px;
	}
}

@media screen and (max-width: 1179px) {
	.processions .fx2 {
		width: 100%;
	}

	.processions .fx2:last-child {
		padding: 30px 0;
	}

	.processions .fx2 .content {
		max-width: 1000px;
		margin: 0 auto;
	}

	.processions .fx2 .content p:last-child {
		margin-bottom: 0;
	}
}

/*-----------------------------------------------------------  SANCTUARY --------------------------*/

.visit-sanctuary .fx2.sanctuary-place {
	background: url("../images/sanctuary-place.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

.visit-sanctuary .fx2.white {
	background: white;
	position: relative;
}

.visit-sanctuary .fx2 .content {
	max-width: 580px;
	padding: 20px;
}

.visit-sanctuary .content h1 {
	font-size: 30px;
	font-weight: 500;
}

.visit-sanctuary .content .button-sanctuary {
	display: block;
	max-width: 300px;
	background: var(--color_a);
	color: white;
	margin-top: 40px;
	padding: 15px 0;
	font-size: 1.1em;
	text-align: center;
	position: relative;
}

.visit-sanctuary .content .button-sanctuary::before {
	content: " ";
	position: absolute;
	z-index: 9;
	height: 100%;
	left: 0;
	top: 0;
	width: 5px;
	background: var(--color_p);
	transition: all 0.4s ease-in;
}

.visit-sanctuary .content .button-sanctuary:hover::before {
	width: 100%;
	transition: all 0.4s ease-out;
}

.visit-sanctuary .content .button-sanctuary span {
	position: relative;
	z-index: 10;
}

@media screen and (min-width: 1180px) {
	.visit-sanctuary .fx2 {
		width: calc(100% / 2);
		padding: 30px;
		height: 470px;
	}

	.visit-sanctuary .fx2.white .content {
		position: absolute;
		right: 90px;
		width: 518px;
	}

	.visit-sanctuary .content h1 { margin-top: 70px; }
}

@media screen and (max-width: 1179px) {
	.visit-sanctuary .fx2 {
		width: 100%;
		padding-bottom: 50px;
	}

	.visit-sanctuary .fx2:last-child {
		padding: 30px 0;
		display: none;
	}

	.visit-sanctuary .fx2 .content {
		margin: 0 auto;
		text-align: center;
	}

	.visit-sanctuary .fx2 .content .button-sanctuary {
		margin-right: auto;
		margin-left: auto;
	}

	.visit-sanctuary .fx2 .content p:last-child {
		margin-bottom: 0;
	}
}

/*-----------------------------------------------------------  COST --------------------------*/

.cost {
	padding: 4em 0;
	text-align: center;
}

/* -------------------------------------------------------------  MAP  ---------------------------- */
.hm_map {
	background: white;
}

.hm_map section {
	background: url(http://www.stbernadetteusa.org/ctm/31257/projects/BernadetteUSA/gallery/2022/02/map-StB.jpg) center right no-repeat;
	background-size: contain;
	padding: 130px 0;
}

.hm_map section h1 {
	margin-top: 0;
	margin-bottom: 0;
	font-size: 3.2em;
}

/*-----------------------------------------------------------  COUNT-FORM --------------------------*/
#stayinformed {
	margin: 0 auto 20px auto;
	max-width: 800px;
	padding: 0 15px;
}

#stayinformed > p { margin-left:  10px;}

.count-form {
	background: var(--color_pl0);
	color: white;
}

.count-form .fx2 {
	transition: 0.6s;
}

.count-form .fx2:nth-child(1) {
	padding: 2em 0;
}

.count-form .fx2 h2 {
	padding-left: 10px;
	color: white;
}

@media (max-width: 600px) {
	.count-form .fx2 h2 {
		padding-left: 20px;
	}
}

.count-form form.default {
	max-width: 900px;
	font-size: 15px;
	letter-spacing: -1px;
}

.count-form form.default label {
	all: unset;
	margin-left: 7px;
	cursor: pointer;
}

@media (max-width: 1079px) {
	.count-form .fx2:nth-child(1) {
		width: 100%;
	}

	.count-form .fx2:nth-child(2) {
		display: none;
	}
}

.count-form form.default .fx_2 input[type="text"] {
	width: 100%;
}

@media (min-width: 1080px) and (max-width: 1600px) {
	.count-form .fx2:nth-child(1) {
		width: 70%;
	}

	.count-form .fx2:nth-child(2) {
		width: 30%;
	}
}

@media (min-width: 1601px) {
	.count-form .fx2:nth-child(1) {
		width: 70%;
	}

	.count-form .fx2:nth-child(2) {
		width: 30%;
	}
}

.count-form:hover .fx2:nth-child(1) {
	width: 100%;
}

.count-form:hover .fx2:nth-child(2) {
	width: 0%;
}

.count-form .flex .fx_2:nth-child(1) {
	display: flex;
	flex-direction: column;
}

@media screen and (min-width: 600px) {
	.count-form .flex .fx_2 {
		width: calc(100% / 2 - 20px);
	}

	.count-form form.default :is(.resources, .form_buttons, .flex .fx_2) {
		margin: 0 10px;
	}

	.count-form form.default .form_buttons input {
		margin: 20px 0 0;
	}
}

.count-form form.default .form_buttons input {
	font-family: "Tenor Sans", sans-serif;
}

@media screen and (max-width: 599px) {
	.count-form .flex .fx_2 {
		width: 100%;
	}

	.count-form form.default :is(.resources, .form_buttons, .flex .fx_2) {
		margin: 0 20px;
	}
}

.count-form .fx2.count-image {
	background: url("../images/count-bg-home.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

@media (min-width: 500px) {
	.count-form form.default .city_zip_flex {
		display: flex;
	}

	.count-form form.default .city_zip_flex .city_zip:nth-child(1) {
		width: calc(65% - 5px);
		margin: 0 5px 0 0;
	}

	.count-form form.default .city_zip_flex .city_zip:nth-child(2) {
		width: calc(35% - 5px);
		margin: 0 0 0 5px;
	}
}

.count-form form.default .fx_2 .idented {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

@media (max-width: 599px) {
	.count-form form.default .fx_2 p.related {
		padding: 20px 0 0;
	}

	.count-form form.default :is(.resources, .fx_2 .idented, .fx_2:nth-child(1)) {
		padding: 0 0 20px;
	}
}

.count-form form.default input[type="submit"] {
	float: left;
}

/* ------------------------------------ */

.count-form form.default input[type="radio"] {
	display: none;
}

.count-form form.default input[type="radio"] + label {
	position: relative;
	display: inline-block;
	padding-left: 1.5em;
	cursor: pointer;
	line-height: 1em;
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.count-form form.default input[type="radio"] + label:before,
.count-form form.default input[type="radio"] + label:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 0.8em;
	height: 0.8em;
	text-align: center;
	color: white;
	font-family: Times;
	border-radius: 50%;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.count-form form.default input[type="radio"] + label:before {
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	box-shadow: inset 0 0 0 0.2em white, inset 0 0 0 1em white;
}
.count-form form.default input[type="radio"] + label:hover:before {
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	box-shadow: inset 0 0 0 0.3em white, inset 0 0 0 1em #c6c6c6;
}
.count-form form.default input[type="radio"]:checked + label:before {
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	box-shadow: inset 0 0 0 0.2em white, inset 0 0 0 1em var(--color_pl2);
}