/* 
 * Style updates NOT using SASS, starting 4/2025 - Jennergy
 */

p {
	margin-bottom: 30px !important;
}

.BlogLP.site-content>article>header {
	display: flex !important;
	justify-content: center !important;
	height: 350px;
	background: url(/wp-content/uploads/2025/06/blog-header_bg-pattern_4-1-ratio.jpg) bottom center no-repeat;
	background-size: cover !important;
	/*aspect-ratio: 4 / 1;*/
	padding-top: 70px;
}

.BlogLP.site-content>article>header>h1{
	color: #fff !important;
}

.BlogLP .section {
	padding-top: 0 !important;
}

.BlogLP .grid-container {
	max-width: 1160px !important;
}

#BlogPostsCategoryList {
	float: left;
	margin-top: 28px;
	margin-bottom: 20px;
}

.single .BlogPostCategories,
.Carousel.BlogPostItem .BlogContentWrapper .BlogPostCategories,
#BlogPosts .BlogPostItem .BlogContentWrapper .BlogPostCategories,
#BlogFeaturedPostWrapper.BlogPostItem .BlogContentWrapper .BlogPostCategories {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.single .BlogPostCategories .BlogPostCategory,
.Carousel.BlogPostItem .BlogContentWrapper .BlogPostCategories .BlogPostCategory,
#BlogPosts .BlogPostItem .BlogContentWrapper .BlogPostCategories .BlogPostCategory,
#BlogFeaturedPostWrapper.BlogPostItem .BlogContentWrapper .BlogPostCategories .BlogPostCategory {
	display: inline-flex;
}

.BlogPostCategoryItem {
	float: left;
	margin-right: 20px;
	color: #000;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.BlogPostCategoryItem a {
	color: #000;
}

.BlogPostCategoryItem a:hover,
.BlogPostCategoryItem.Active a,
.BlogPostCategoryItem.Active a:hover {
	color: #DC3F39;
}

.BlogPostCategoryItem.Active a:after,
.BlogPostCategoryItem.Active a:hover:after {
	content: "";
	background-color: #dc3f39;
	display: block;
	width: 100%;
	height: 2px;
	margin-top: 3px;
	text-decoration: none;
}

#BlogFeaturedPostWrapper {
	margin-top: -160px !important;
}

#BlogFeaturedCarouselWrapper {
	margin-top: 85px;
	margin-bottom: 85px;
}

#CarouselTitleWrapper {
	display: flex;
	justify-content: space-between;
	margin-bottom: 30px;
}

#blog-slider {
	width: auto;
	margin-left: auto;
	margin-right: auto;
}

#BlogFeaturedCarouselWrapper.NotOnNewsPage {
	margin: 20px auto 50px auto;
}

#BlogFeaturedCarouselWrapper.NotOnNewsPage #blog-slider {
	width: calc(100% - 160px);
}

#BlogFeaturedCarouselWrapper.NotOnNewsPage .splide__arrow--prev {
	left: -80px;
}

#BlogFeaturedCarouselWrapper.NotOnNewsPage .splide__arrow--next {
	right: -80px;
}

#BlogNewsletterSignup .button.hollow.secondary {
	border: 1px solid #000;
	color: #000;
	font-size: 16px;
	font-weight: 700;
	margin-bottom: 0;
}

#BlogNewsletterSignup .button.hollow.secondary:hover {
	border: 1px solid #DC3F39;
	color: #DC3F39;
}

#BlogPostsWrapper {
	margin-top: 85px;
	margin-bottom: 30px;
}

#BlogFeaturedCarouselWrapper ul li,
#BlogFeaturedCarouselWrapper ul li.is-visible {
	display: flex !important;
}

.BlogPostItem.Carousel {
	display: grid;
	grid-template-rows: max-content auto;
}

.BlogPostItem.Carousel .BlogContentWrapper {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#BlogFeaturedCarouselWrapper .splide__arrow--prev {
	left: -80px;
	border: solid 1px rgba(0, 0, 0, 0.25);
	border-radius: 20px;
}

#BlogFeaturedCarouselWrapper .splide__arrow--prev::after {
	content: '\f060';
	font-family: 'Font Awesome 6 Sharp';
	font-size: 20px;
	width: 40px;
	height: 40px;
	color: #DC3F39;
	position: absolute;
	top: 9px;
	left: 0;
}

#BlogFeaturedCarouselWrapper .splide__arrow--next {
	right: -80px;
	border: solid 1px rgba(0, 0, 0, 0.25);
	border-radius: 20px;
}

#BlogFeaturedCarouselWrapper .splide__arrow--next::after {
	content: '\f061';
	font-family: 'Font Awesome 6 Sharp';
	font-size: 20px;
	width: 40px;
	height: 40px;
	color: #DC3F39;
	position: absolute;
	top: 9px;
	right: 0;
}

#BlogFeaturedCarouselWrapper .splide__arrow--prev:hover::after,
#BlogFeaturedCarouselWrapper .splide__arrow--next:hover::after {
	color: #099FA1;
}

#BlogFeaturedCarouselWrapper .splide__pagination__page {
	margin: 8px;
}

#BlogFeaturedCarouselWrapper .splide__pagination__page:hover,
#BlogFeaturedCarouselWrapper .splide__pagination__page.is-active {
	background: #DC3F39;
}

.splide__pagination {
	bottom: -50px !important;
}

@media screen and (max-width: 1280px) {
	#blog-slider {
		width: calc(100% - 120px);
	}

	#BlogFeaturedCarouselWrapper .splide__arrow--prev {
		left: -60px;
	}

	#BlogFeaturedCarouselWrapper .splide__arrow--next {
		right: -60px;
	}
}

@media screen and (max-width: 1023px) {
	#blog-slider,
	#BlogFeaturedCarouselWrapper.NotOnNewsPage #blog-slider {
		width: auto;
	}

	.splide__arrows {
		display: none;
	}
}

#BlogPostsResultsWrapper {
	width: 100%;
	margin: 0 0 30px 0;
	background-size: 64px;
	min-height: 450px;
}

#BlogPostsResults {
	width: 100%;
	background: #fff;
	min-height: 450px;
	display: none;
	float: left;
}

.BlogPostsResultsGroup {
	width: 100%;
	float: left;
	clear: both;
	display: flex;
	flex-wrap: wrap;
}

.BlogPostBoxButton a {
	font-size: 16px;
	line-height: 20px;
	color: #fff !important;
	font-weight: 400;
	text-transform: uppercase;
	background: #F65B0A;
	padding: 8px;
	width: 100%;
	border: none;
	text-align: center;
	display: block;
	border-radius: 6px;
	max-width: 220px;
	margin: 0 auto;
}

.BlogPostBox:hover h5 a {
	color: #212326 !important;
}

.BlogPostBoxButton a:hover {
	background: #C94400;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
}

#BlogPostsLoadMore {
	clear: both;
	padding-top: 30px;
	text-align: center;
	height: 30px;
}

#BlogPostsLoadMore a {
	color: #DC3F39;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
	text-align: center;
}

#BlogPostsLoadMore a:hover {
	color: #099FA1;
}

#BlogPostsLoadingResults {
	clear: both;
	width: 80px;
	height: 80px;
	background: #fff url('/wp-content/themes/watribes/assets/images/loading.svg') 50% 50% no-repeat;
	animation: rotateSpinner 1200ms linear infinite;
	margin: 20px auto;
}

@keyframes rotateSpinner {
	to {
		transform: rotate(360deg);
	}
}

.BlogPostItem {
	border: solid 1px #666;
}

#BlogFeaturedPostWrapper.BlogPostItem {
	display: flex;
	justify-content: center;
	align-items: stretch;
}

#BlogPosts .BlogPostItem {
	display: flex;
	justify-content: center;
	align-items: stretch;
	margin-bottom: 30px;
}

#BlogFeaturedPostWrapper.BlogPostItem .BlogPostImage {
	flex-basis: 50%;
}

#BlogFeaturedPostWrapper.BlogPostItem .BlogContentWrapper {
	flex-basis: 50%;
	padding: 45px;
}

#BlogFeaturedPostWrapper.BlogPostItem .BlogPostImage img,
#BlogPosts .BlogPostItem .BlogPostImage img {
	width: 100%;
	height: 100% !important;
	object-fit: cover !important;
}

.BlogPostItem h3 {
	color: #000;
	margin-bottom: 24px;
}

.BlogPostItem h3 a {
	color: #000;
}

.BlogPostItem h3 a:hover {
	color: #DC3F39;
}

#BlogFeaturedPostWrapper.BlogPostItem h3 {
	font-size: 30px !important;
	line-height: 36px !important;
}

.BlogPostItem.Carousel h3,
#BlogPosts .BlogPostItem h3 {
	font-size: 22px !important;
	line-height: 24px !important;
}

.BlogPostItem.Carousel .BlogContentWrapper {
	padding: 30px;
}

#BlogPosts .BlogPostItem {
	display: flex;
	justify-content: stretch;
}

#BlogPosts .BlogPostItem .BlogPostImage {
	flex-basis: 42%;
}

.BlogPostItem .BlogContentWrapper {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: #fff;
}

#BlogPosts .BlogPostItem .BlogContentWrapper {
	flex-basis: 58%;
	padding: 30px;
}

/*.BlogPostItem .BlogPostDate {
	color: rgba(0, 0, 0, 0.70);
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	margin-bottom: 10px;
}*/

.BlogPostItem .BlogPostCategories {
	margin-bottom: 20px;
}

#BlogFeaturedPostWrapper.BlogPostItem .BlogPostCategories {
	margin-bottom: 40px;
}

.BlogPostItem .BlogPostCategory a {
	width: fit-content;
	color: #000;
	font-size: 12px;
	line-height: normal;
	background: #F3F3F3;
	padding: 5px 11px;
	margin-right: 0;
	transition: background-color .25s ease-out, color .25s ease-out;
}

.BlogPostItem .BlogPostCategory a:hover {
	background: #DC3F39;
	color: #fff;
}

#BlogFeaturedPostWrapper.BlogPostItem .BlogPostCategory a {
	background: #fff;
	color: #007F81;
	border: solid 1px #007F8140;
}

#BlogFeaturedPostWrapper.BlogPostItem .BlogPostCategory a:hover {
	background: #007F81;
	color: #fff;
	border: solid 1px #007F81;
}

.BlogPostItem .BlogPostExcerpt {
	color: #1C1B19;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 120%;
}

.BlogPostItem .BlogPostMore {
	display: flex;
	align-items: center;
	color: #DC3F39;
	font-weight: 700;
	text-transform: uppercase;
	margin-top: 62px;
	transition: all .2s ease-in-out;
	/*transition: width 1s ease-in-out, color .5s ease-in-out;*/
}

.BlogPostItem .BlogPostMore:hover {
	transition: all .2s ease-in-out;
	/*transition: width 1s ease-in-out, color .5s ease-in-out;*/
}

.BlogPostItem .BlogPostMore a {
	transition: all .2s ease-in-out;
	/*transition: color .5s ease-in-out;*/
}

.BlogPostItem .BlogPostMore:hover a {
	color: #099FA1;
	transition: all .2s ease-in-out;
	/*transition: color .5s ease-in-out;*/
}

#BlogPosts .BlogPostItem .BlogPostMore {
	margin-top: 25px;
}

.BlogPostItem .BlogPostMore:before {
	content: url('/wp-content/uploads/2025/06/red-arrow.svg');
	width: 37px;
	height: 24px;
	padding-right: 12px;
	transition: width .2s ease-in-out;
	/*transition: background-image 1s ease-in-out, width 1s ease-in-out;*/
}

.BlogPostItem .BlogPostMore:hover:before {
	content: url('/wp-content/uploads/2025/06/turquoise-arrow.svg');
	width: 51px;
	height: 24px;
	transition: width .2s ease-in-out;
	/*transition: background-image 1s ease-in-out, width 1s ease-in-out;*/
}

/*** Single Posts ***/

.single h1 {
	font-size: 40px;
}

.single h2 {
	font-size: 32px;
}

.single h3 {
	font-size: 26px;
}

.single h4 {
	font-size: 22px;
}

.single h5 {
	font-size: 18px;
}

.single h6 {
	font-size: 16px;
}

.post-template-default article {
	padding-bottom: 110px !important;
}

.post-template-default header.article-header {
	height: 550px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	padding: 0;
}

.post-template-default #BlogArticleContent {
	display: flex;
	gap: 100px;
	max-width: 1160px;
	margin: 0 auto;
	padding-top: 85px;
}

.post-template-default #BlogArticleContent #ArticleContent {
	width: calc(100% - 400px);
	max-width: 760px;
}

.post-template-default #BlogArticleContent aside {
	width: 300px;
}

.post-template-default .BlogPostCategories {
	display: flex;
	margin-bottom: 50px;
}

.post-template-default .BlogPostCategory a {
	width: fit-content;
	color: #000;
	font-size: 12px;
	line-height: normal;
	background: #F3F3F3;
	padding: 5px 11px;
	margin-right: 20px;
	transition: background-color .25s ease-out, color .25s ease-out;
}

.post-template-default .BlogPostCategory a:hover {
	background: #DC3F39;
	color: #fff;
}

div.wp-caption {
	background: transparent;
	padding: 0;
}

.wp-caption p.wp-caption-text {
	font-size: 14px;
	font-style: italic;
	font-weight: 300;
	line-height: 17px;
	text-align: left !important;
	margin-top: 10px !important;
	margin-bottom: 30px !important;
}

.sidebar .widget h4 {
	margin-top: 60px;
	margin-bottom: 21px;
	padding-bottom: 14px;
	border-bottom: 5px solid;
	border-image:   linear-gradient(to right, #DC3F39 25%, #1C1B19 25%, #1C1B19 50%, #DFAD2F 50%, #DFAD2F 75%, #099FA1 75%) 5;
}

.sidebar .widget li {
	padding-top: 20px;
	line-height: normal;
}

.sidebar .widget li a {
	color: #000;
	font-size: 16px;
	line-height: 18px;
}

.sidebar .widget li a:hover {
	color: #C3322D;
	font-size: 16px;
	line-height: 18px;
}

/*** Added to CSS settings in Easy Social Share plugin settings as well ***/

.essb_links {
	margin: 0 !important;
}

.essb_links.essb_template_dark-outline-retina li a {
	background-color: transparent !important;
	opacity: 1 !important;
	color: #000 !important;
	border: 1px solid rgba(0, 0, 0, 0.25) !important;
	margin: 16px 22px 0 0 !important;
}

.essb_links.essb_template_dark-outline-retina li a:hover {
	color: #fff !important;
	border: 1px solid #C3322D !important;
}

@media screen and (max-width: 1280px) {
	.single .BlogPostCategories,
	.Carousel.BlogPostItem .BlogContentWrapper .BlogPostCategories,
	#BlogPosts .BlogPostItem .BlogContentWrapper .BlogPostCategories,
	#BlogFeaturedPostWrapper.BlogPostItem .BlogContentWrapper .BlogPostCategories {
		gap: 12px;
	}

	.BlogPostItem .BlogPostCategory a {
		margin-right: 0;
	}

	.post-template-default #BlogArticleContent {
		gap: 75px;
		margin: 0 50px;
	}

	.post-template-default #BlogArticleContent #ArticleContent {
		width: calc(100% - 325px);
	}

	.post-template-default #BlogArticleContent aside {
		width: 250px;
	}

	.post-template-default header.article-header {
		height: 500px;
	}
}

@media screen and (max-width: 1150px) {
	.post-template-default header.article-header {
		height: 450px;
	}
}


@media screen and (max-width: 1024px) {
	.BlogLP.site-content>article>header {
		height: 300px;
		padding-top: 85px;
	}

	#BlogFeaturedPostWrapper {
		margin-top: -120px !important;
	}

	#BlogPostsLoadMore {
		padding-bottom: 30px;
	}

	.post-template-default #BlogArticleContent {
		gap: 50px;
		padding-top: 65px;
	}

	.post-template-default #BlogArticleContent #ArticleContent {
		width: calc(100% - 300px);
	}
}

@media screen and (max-width: 900px) {
	.post-template-default header.article-header {
		height: 400px;
	}
}

@media screen and (max-width: 768px) {
	.BlogLP.site-content>article>header {
		height: 250px;
		padding-top: 65px;
	}

	#BlogFeaturedPostWrapper {
		margin-top: -100px !important;
	}

	#BlogFeaturedPostWrapper.BlogPostItem .BlogContentWrapper {
		padding: 30px;
	}

	#BlogFeaturedCarouselWrapper {
		margin-top: 55px;
	}

	#BlogPostsCategoryList {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		gap: 12px;
	}

	.BlogPostCategoryItem {
		display: inline-flex;
		float: none;
		margin: 0;
	}

	.BlogPostCategoryItem a{
		background: #F3F3F3;
		color: #000;
		font-size: 14px;
		padding: 9px 10px;
	}

	.BlogPostCategoryItem:hover,
	.BlogPostCategoryItem.Active:hover,
	.BlogPostCategoryItem a:hover,
	.BlogPostCategoryItem.Active a,
	.BlogPostCategoryItem.Active a:hover {
		background: #dc3f39;
		color: #fff;
	}

	.BlogPostCategoryItem.Active a:after,
	.BlogPostCategoryItem.Active a:hover:after {
		display: none;
	}

	#BlogFeaturedPostWrapper {
		flex-direction: column;
	}

	#BlogPosts .BlogPostItem {
		flex-direction: column;
	}

	#BlogFeaturedCarouselWrapper {
		position: relative;
	}

	#BlogNewsletterSignup {
		position: absolute;
		bottom: -160px;
	}

	#BlogPostsWrapper {
		margin-top: 210px;
	}

	.single h1 {
		font-size: 34px;
	}

	.single h2 {
		font-size: 28px;
	}

	.single h3 {
		font-size: 24x;
	}

	.post-template-default #BlogArticleContent {
		flex-direction: column;
		gap: 0;
	}

	.post-template-default #BlogArticleContent #ArticleContent,
	.post-template-default #BlogArticleContent aside {
		width: 100%;
	}

	.post-template-default header.article-header {
		height: 350px;
	}
}

@media screen and (max-width: 639px) {
	#BlogFeaturedPostWrapper.BlogPostItem h3 {
		font-size: 24px !important;
		line-height: 28px !important;
	}

	.BlogPostItem.Carousel h3,
	#BlogPosts .BlogPostItem h3 {
		font-size: 20px !important;
		line-height: 22px !important;
	}

	#BlogPostsLoadMore {
		padding-bottom: 60px;
	}

	#BlogPostsCategoryList {
		margin-top: 22px;
	}

	.post-template-default #BlogArticleContent {
		padding-top: 50px;
		margin: 0 25px;
	}

	.footer-newsletter {
		margin-top: 35px !important;
	}
}