/*
Theme Name: OceanWP Child
Theme URI: https://oceanwp.org/
Template: oceanwp
Author: OceanWP
Author URI: https://oceanwp.org/about-oceanwp/
Description: OceanWP is the perfect theme for your project. Lightweight and highly extendable, it will enable you to create almost any type of website such a blog, portfolio, business website and WooCommerce storefront with a beautiful & professional design. Very fast, responsive, RTL & translation ready, best SEO practices, unique WooCommerce features to increase conversion and much more. You can even edit the settings on tablet & mobile so your site looks good on every device. Work with the most popular page builders as Elementor, Beaver Builder, Brizy, Visual Composer, Divi, SiteOrigin, etc... Developers will love his extensible codebase making it a joy to customize and extend. Best friend of Elementor & WooCommerce. Looking for a Multi-Purpose theme? Look no further! Check the demos to realize that it's the only theme you will ever need: https://oceanwp.org/demos/
Tags: two-columns,right-sidebar,footer-widgets,blog,news,custom-background,custom-menu,post-formats,rtl-language-support,sticky-post,editor-style,threaded-comments,translation-ready,buddypress,custom-colors,featured-images,full-width-template,theme-options,e-commerce,block-styles,wide-blocks,accessibility-ready
Version: 3.4.3.1748451942
Updated: 2025-05-28 17:05:42

*/

/**************** BLOGUE CUSTOM STYLES ****************/

.blog-posts-container .elementor-shortcode {	
	display: flex;
	flex-flow: column nowrap;
	align-items: center;
	gap: 100px;
}

.ss-blog-list {
	display: flex;
	flex-flow: column nowrap;
	gap: 50px;
}

.ss-blog-list li {
	list-style: none;
	display: flex;
	flex-flow: row nowrap;
	gap: 50px;
	min-height: 250px;
}

.ss-blog-thumb > * {
  position: relative; /* keep your inner content above the overlay */
  z-index: 1;
}

.ss-blog-list li:hover .ss-blog-thumb::before {
  opacity: 1;
}

.ss-blog-thumb {	
  position: relative;
  overflow: hidden;
  padding: 20px;
  max-width: 25vw;
}

.ss-blog-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(121deg, #009048 50%, #FFFFFF 0%);
  opacity: 0;
  transition: opacity 500ms;
  z-index: 0;
}

.ss-blog-thumb img{
	object-fit: cover;
}

.attachment-medium.size-medium.wp-post-image {}

.ss-blog-content {
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
	gap: 20px;
}

.ss-blog-content * {
	margin: 0;
	padding: 0;
}

.ss-blog-list li:hover .ss-blog-content h2 {
	color: #2182c6;
}

.ss-blog-content h2 {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2em;
	font-family: "Open Sans", Sans-serif;
	text-transform: uppercase;
	color: #0A0000;
	transition: all 300ms;
}

.ss-read-more-wrap {
	display: flex;
	flex-direction: row;
	justify-content: center;
	background-color: #2182C5;
	transition: all 300ms;
	border-radius: 4px;
	padding: 15px 30px;
	margin-top: 20px;
	width: 200px;
}

.ss-read-more-wrap:focus, .ss-read-more:focus {
	border: none !important;
	outline: none !important;
}

.ss-read-more-wrap:hover {
	transform: scale(1.1);
	cursor: pointer;
}

.ss-read-more-wrap .ss-read-more {
	font-family: "Titillium Web", Sans-serif;
	text-transform: uppercase;
	color: #FFFFFF;
	line-height: 28px;
	letter-spacing: 0.8px;
	font-weight: 700;
	font-size: 16px;
}

#ss-loadmore-btn {
	display: flex;
	position: relative;
	flex-direction: row;
	justify-content: center;
	font-family: "Titillium Web", Sans-serif;
	text-transform: uppercase;
	color: #FFFFFF;
	border: none;
	transition: all 300ms;
	z-index: 2;
	border-radius: 4px;
	padding: 15px 30px;
	width: 200px;
	line-height: 28px;
	letter-spacing: 0.8px;
	font-weight: 700;
	font-size: 16px;
}

#ss-loadmore-btn:hover {
	transform: scale(1.1);
	cursor: pointer;
	color: #2182C5;
}

#ss-loadmore-btn::before {
	content: "";
	position: absolute;
	transition: all 300ms;
	background-image: linear-gradient(121deg, #009048 50%, #FFFFFF 0%);
	width: calc(100% + 30px);
	height: calc(100% + 30px);
	z-index: -1;
	top: -15px;
	left: -15px;
	opacity: 0;
}

#ss-loadmore-btn::after {
  	content: "";
 	position: absolute;
	background-color: #2182C5;
	transition: all 300ms;
 	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
 	z-index: -1;
}

#ss-loadmore-btn:hover::before {
	opacity: 1;
}

#ss-loadmore-btn:hover::after {
	background-color: #FFF;
}


@media only screen and (max-width: 767px) {

	.ss-blog-list {
		margin: 0;
    	padding: 0 5vw;
	}

	.ss-blog-list li {
		flex-flow: column nowrap;
	}

	.ss-blog-thumb {	
	  	padding: 15px;
    	max-width: 100%;
	}

	.ss-blog-thumb::before {
	  opacity: 1;
	}

	.ss-blog-content {
		display: flex;
		flex-flow: column nowrap;
		justify-content: center;
		gap: 20px;
	}

	.ss-blog-content * {
		margin: 0;
		padding: 0;
	}

	.ss-blog-list li:hover .ss-blog-content h2 {
		color: #2182c6;
	}

	.ss-blog-content h2 {
		font-size: 30px;
		font-weight: 700;
		line-height: 1.2em;
		font-family: "Open Sans", Sans-serif;
		text-transform: uppercase;
		color: #0A0000;
		transition: all 300ms;
	}

	.ss-read-more-wrap {
		display: flex;
		flex-direction: row;
		justify-content: center;
		background-color: #2182C5;
		transition: all 300ms;
		border-radius: 4px;
		padding: 15px 30px;
		margin-top: 20px;
		width: 200px;
	}

	.ss-read-more-wrap:focus, .ss-read-more:focus {
		border: none !important;
		outline: none !important;
	}

	.ss-read-more-wrap:hover {
		transform: scale(1.1);
		cursor: pointer;
	}

	.ss-read-more-wrap .ss-read-more {
		font-family: "Titillium Web", Sans-serif;
		text-transform: uppercase;
		color: #FFFFFF;
		line-height: 28px;
		letter-spacing: 0.8px;
		font-weight: 700;
		font-size: 16px;
	}

	#ss-loadmore-btn {
		display: flex;
		position: relative;
		flex-direction: row;
		justify-content: center;
		font-family: "Titillium Web", Sans-serif;
		text-transform: uppercase;
		color: #FFFFFF;
		border: none;
		transition: all 300ms;
		z-index: 2;
		border-radius: 4px;
		padding: 15px 30px;
		width: 200px;
		line-height: 28px;
		letter-spacing: 0.8px;
		font-weight: 700;
		font-size: 16px;
	}

	#ss-loadmore-btn:hover {
		transform: scale(1.1);
		cursor: pointer;
		color: #2182C5;
	}

	#ss-loadmore-btn::before {
		content: "";
		position: absolute;
		transition: all 300ms;
		background-image: linear-gradient(121deg, #009048 50%, #FFFFFF 0%);
		width: calc(100% + 30px);
		height: calc(100% + 30px);
		z-index: -1;
		top: -15px;
		left: -15px;
		opacity: 0;
	}

	#ss-loadmore-btn::after {
		content: "";
		position: absolute;
		background-color: #2182C5;
		transition: all 300ms;
		width: 100%;
		height: 100%;
		top: 0px;
		left: 0px;
		z-index: -1;
	}

	#ss-loadmore-btn:hover::before {
		opacity: 1;
	}

	#ss-loadmore-btn:hover::after {
		background-color: #FFF;
	}

	
}