/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.3
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
:root {
	--primary-color-1: #2f2f2f;
	--accent-color-1: #e71900;
}

/****** univ **************************************************************/

html{
	font-size: 16px;
}

.cust-break-word {
	word-wrap: break-word;
}


/** header *****************************************************************/

#header .header-bottom {
	background-color: var(--primary-color-1);
}


/** blog ***********************************************************/

.from_the_blog_excerpt,
.single-post {
	word-wrap: break-word;
}

.blog-section {
	background-color: var(--accent-color-1);
	color: #fff;
	padding: 10px;
}

.single-post .entry-title,
.post-title.is-large {
	font-size: 1.75rem;
	line-height: 1.1 !important;
}
.post-title.is-large a {
	line-height: 1.1 !important;
}

.from_the_blog_excerpt{
	font-size: 1.2rem !important;
    line-height: 1.1 !important;

} 

.post-meta.is-small.op-8{
	opacity: 1 !important;
	font-size: .8rem !important;
}

.cat-label.is-xxsmall.op-7.uppercase{
	opacity: 1 !important;
	font-size: .8rem !important;
	text-transform: initial !important;	
}

/*** footer *************************************************/

#footer .wp-block-categories-list{
	display: flex !important;
    gap: 10px;
    flex-wrap: wrap;
}

@media only screen and (max-width: 848px) {
	/*************** ADD MOBILE ONLY CSS HERE  ***************/

	#logo{
		width: 160px !important;
	}

	.header-main{
		height: 70px !important;
	}

	.header-wrapper.stuck #masthead{
		display: inline-flex !important;
	}
	.header-wrapper.stuck{
		box-shadow: none !important;
		width: auto !important;
		left: initial !important;
		margin: 0 auto;
		position: fixed;
		right: 0;
		top: 0;
	}

	.header-wrapper.stuck .header-bg-color.fill{
		background-color: transparent !important;
	}

	.header-wrapper.stuck #logo{
		width: 0 !important;
	}
	.mobile-nav>li>a {
		color: white !important;
	}
	.mobile-nav>li>a>i.icon-menu::before{
		color: white !important;
		background-color: var(--accent-color-1) !important;
		padding: 5px;
	}

}