/* ----------------------------------------------------------------
	Canvas: Modern Blog
-----------------------------------------------------------------*/

:root {
	--cnvs-themecolor: #dc3545;
	--cnvs-themecolor-rgb: 220, 53, 69;

	--cnvs-body-font: 'Nunito', sans-serif;
	--cnvs-primary-font: 'Nunito', sans-serif;
}

#header {
	--cnvs-primary-menu-color: #000;
	--cnvs-primary-menu-ls: 1px;
	--cnvs-primary-menu-tt: uppercase;
	--cnvs-header-border-color: transparent;
}

.is-expanded-menu.overlay-menu .menu-link {
	--cnvs-menu-padding-y: 29px;
}

#content {
	margin: 0;
	width: 100%;
}

#slider {
	position: relative;
	width: 100% !important;
	background-repeat: no-repeat;
	background-position: center right;
	background-size: cover;
}

#header.sticky-header.transparent-header #header-wrap:not(.not-dark) {
	background-color: transparent !important;
	box-shadow: none;
}

@media (min-width: 992px) {

	#header { border-bottom: 0; }

	#content {
		width: 50%;
		float: right;
	}

	#slider {
		position: fixed;
		top: 0;
		right: auto;
		left: 0;
		width: 50% !important;
		height: 100%;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-position: center right;
		background-size: cover;
	}

	#header .container-fluid,
	#content .container {
		padding-left: 40px;
		padding-right: 40px;
	}

	#header-wrap #primary-menu-trigger {
		right: 40px;
		opacity: 1;
	}

	.sticky-header #header-wrap #primary-menu-trigger {
		opacity: 0;
		-webkit-transition: transform .2s ease, opacity .2s ease;
			-o-transition: transform .2s ease, opacity .2s ease;
				transition: transform .2s ease, opacity .2s ease;
		-webkit-transform: translateY(-25px);
			-ms-transform: translateY(-25px);
				-o-transform: translateY(-25px);
					transform: translateY(-25px);
		backface-visibility: hidden;
		z-index: -2;
	}

	#content { margin-top: -80px; }
}

/* Card system: scoped to the feed grid, the only place the design applies it. */

:where(.infinity-wrapper) .entry {
	background-color: #FFF;
	padding: 0;
	vertical-align: top;
	border-bottom: 0;
	border-radius: 4px;
	-webkit-transform-origin: 50% 50% 0px;
		transform-origin: 50% 50% 0px;
	-webkit-transition: all 250ms cubic-bezier(.02, .01, .5, 1);
		-o-transition: all 250ms cubic-bezier(.02, .01, .5, 1);
			transition: all 250ms cubic-bezier(.02, .01, .5, 1);
}

:where(.infinity-wrapper) .entry:hover {
	box-shadow: 0 10px 20px rgba(0,0,0,.05);
	-webkit-transform: translate(0, -8px);
		-ms-transform: translate(0, -8px);
			-o-transform: translate(0, -8px);
				transform: translate(0, -8px);
}

:where(.infinity-wrapper) .entry-title,
:where(.infinity-wrapper) .entry-meta,
:where(.infinity-wrapper) .entry-content { padding: 0 20px; }

:where(.infinity-wrapper) .entry-title h3 {
	font-size: 20px;
	line-height: 1.4;
	margin-bottom: 12px;
}

:where(.infinity-wrapper) .entry-title a { color: #333; }

:where(.infinity-wrapper) .entry-content p {
	margin-bottom: 0;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 14px;
	line-height: 22px !important;
}

:where(.infinity-wrapper) .entry-meta {
	font-size: 0.8125rem;
	text-transform: uppercase;
	border-top: 1px solid #E9EBEE;
	padding: 15px 0;
	margin: 15px 15px 0;
}

:where(.infinity-wrapper) .dark .entry-meta { border-top-color: #444; }

:where(.infinity-wrapper) .entry-meta li {
	margin-left: 0;
	margin-right: 0;
}

:where(.infinity-wrapper) .entry::after { display: none; }

:where(.infinity-wrapper) .entry-meta li::before { content: none; }

:where(.infinity-wrapper) .entry-meta.nohover,
:where(.infinity-wrapper) .entry:hover .entry-meta.hover { display: block; }

:where(.infinity-wrapper) .entry-meta.hover,
:where(.infinity-wrapper) .entry:hover .entry-meta.nohover { display: none; }

:where(.infinity-wrapper) .entry-user { padding: 20px; }

:where(.infinity-wrapper) .entry-user img {
	display: inline-block;
	height: 48px;
	width: 48px;
	border-radius: 100%;
	background-color: white;
}

:where(.infinity-wrapper) .entry-user h4 {
	display: inline-block;
	margin-bottom: 0;
	margin-left: 8px;
	vertical-align: middle;
	font-size: 16px;
	line-height: 1.25;
}

:where(.infinity-wrapper) .entry-user h4 span {
	display: block;
	font-size: 11px;
	color: #AAA !important;
	text-transform: lowercase;
	font-weight: 300;
}

:where(.infinity-wrapper) .entry-image .social-icon {
	display: inline-block;
	float: none;
}

.slide .slide-caption h3,
.slide .slide-caption p {
	opacity: 0;
	-webkit-transform: scale(0.9);
		transform: scale(0.9);
	-webkit-transition: -webkit-transform .05s ease-out;
		transition: -webkit-transform .05s ease-out;
			transition: transform .05s ease-out;
				transition: transform .05s ease-out, -webkit-transform .05s ease-out;
	-webkit-backface-visibility: hidden;
}

.slide.flex-active-slide .slide-caption h3,
.slide.flex-active-slide .slide-caption p {
	opacity: 1;
	-webkit-transition: transform 1s, opacity 1.05s;
		-o-transition: transform 1s, opacity 1.05s;
			transition: transform 1s, opacity 1.05s;
	-webkit-transform: scale(1);
		-ms-transform: scale(1);
			-o-transform: scale(1);
				transform: scale(1);
	-webkit-backface-visibility: hidden;
}

.slide.flex-active-slide .slide-caption p {
	-webkit-transition-delay: 0.3s;
		transition-delay: 0.3s;
			-webkit-backface-visibility: hidden;
}

.border-bottom { border-bottom-color: #E9EBEE !important; }

.instagram-photos a:hover { opacity: 0.85; }

.instagram-button .button {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate3d(-50%,-50%,0);
		-ms-transform: translate3d(-50%,-50%,0);
			-o-transform: translate3d(-50%,-50%,0);
				transform: translate3d(-50%,-50%,0);
	box-shadow: 0 10px 20px rgba(0,0,0,.2);
	-webkit-transition: all 250ms cubic-bezier(.02, .01, .5, 1);
		-o-transition: all 250ms cubic-bezier(.02, .01, .5, 1);
			transition: all 250ms cubic-bezier(.02, .01, .5, 1);
}

.instagram-button .button:hover {
	box-shadow: 0 10px 20px rgba(0,0,0,.4);
	-webkit-transform: translate3d(-50%,-58%,0);
		-ms-transform: translate3d(-50%,-58%,0);
			-o-transform: translate3d(-50%,-58%,0);
				transform: translate3d(-50%,-58%,0);
}

/* ----------------------------------------------------------------
	Additive: pages without the fixed slider
	The split screen above is written for the view that carries the
	slider. Every other page in the demo has no left column to sit
	beside, so the content column returns to full width there.
-----------------------------------------------------------------*/

@media (min-width: 992px) {

	body:not(.modern-blog-split) #content {
		width: 100%;
		float: none;
		margin-top: 0;
	}

}

/* ----------------------------------------------------------------
	Additive: post content sits flush in the column
	The design puts the whole horizontal inset on .container. The
	block editor's post-content wrapper carries the site's root
	padding as well, which would inset the column a second time.
-----------------------------------------------------------------*/

#content > .content-wrap > .entry-content {
	padding-left: 0;
	padding-right: 0;
}

/* ----------------------------------------------------------------
	Additive: photo grid hover
	The grid is rendered from the media library rather than fetched
	at runtime, so it does not carry the live widget's hook class
	that the rule above binds this hover to.
-----------------------------------------------------------------*/

.instagram-button .masonry-thumbs a:hover { opacity: 0.85; }

/* ----------------------------------------------------------------
	The overlay menu opens light so its links stay readable
	The menu links inherit the contrast-900 ink, so a dark overlay renders
	them at 1:1 against their own background.
-----------------------------------------------------------------*/

.is-expanded-menu.overlay-menu .primary-menu {
	--cnvs-invert-contrast-rgb: 255, 255, 255;
}