/*
Theme Name: Kendall Child
Theme URI: https://kendall.qodeinteractive.com/
Description: A child theme of Kendall Theme
Author: Elated Themes
Author URI: http://themeforest.net/user/elated-themes
Version: 1.0.2
Template: kendall
Text Domain: kendall
*/

/* ==========================================================================
   Single product pages: the page-title module heading is now rendered as
   <span> instead of <h1> (see functions.php + the title module template
   override) so the WooCommerce product title is the page's only H1.
   The theme's own CSS styles that heading via the "h1" tag selector, so we
   duplicate the relevant rules here for "span.eltd-title-size-*" to keep the
   same look.
   ========================================================================== */
.eltd-title .eltd-title-holder span.eltd-title-size-small,
.eltd-title .eltd-title-holder span.eltd-title-size-medium,
.eltd-title .eltd-title-holder span.eltd-title-size-large {
	color: #444;
	display: inline-block;
	line-height: 1em;
	vertical-align: middle;
	margin: 11px 0;
}
.eltd-title .eltd-title-holder span.eltd-title-size-small { font-size: 28px; }
.eltd-title .eltd-title-holder span.eltd-title-size-medium { font-size: 50px; }
.eltd-title .eltd-title-holder span.eltd-title-size-large { font-size: 80px; }
.eltd-title .eltd-title-holder span.eltd-title-size-small span,
.eltd-title .eltd-title-holder span.eltd-title-size-medium span,
.eltd-title .eltd-title-holder span.eltd-title-size-large span {
	display: inline-block;
}

@media only screen and (max-width: 768px) {
	.eltd-title .eltd-title-holder span.eltd-title-size-small { font-size: 22px; }
	.eltd-title .eltd-title-holder span.eltd-title-size-medium { font-size: 40px; }
	.eltd-title .eltd-title-holder span.eltd-title-size-large { font-size: 60px; }
}
@media only screen and (max-width: 480px) {
	.eltd-title .eltd-title-holder span.eltd-title-size-medium { font-size: 32px; }
	.eltd-title .eltd-title-holder span.eltd-title-size-large { font-size: 35px; }
}

/* ==========================================================================
   Dark overlay over the title-area background image (single blog posts,
   or any other page using the image title-area type), so the heading text
   stays readable regardless of the photo behind it.
   ========================================================================== */
.eltd-title.eltd-has-background::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5); /* adjust the 0.5 to make it lighter/darker */
	z-index: 1;
	pointer-events: none;
}