/*
Theme Name: Beaver Builder Child Theme
Theme URI: https://www.wpbeaverbuilder.com
Version: 1.3
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: https://www.fastlinemedia.com
template: bb-theme
*/

/* Add your custom styles here...Remember to change the Version number above! */

/* =========================================================
   Pull quote
   Apply the CSS class "wr-pullquote" to a Text Editor module
   (module settings -> Advanced -> CSS Class).
   ========================================================= */
.wr-pullquote {
	position: relative;
	background-color: #f5b921;
	border-radius: 0 80px 0 80px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	padding: 40px 50px 40px 130px;
	margin: 1.5em 0;
}

/* The floating quote-mark icon */
.wr-pullquote::before {
	content: "";
	position: absolute;
	top: 42px;
	left: 38px;
	width: 64px;
	height: 64px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23000000' d='M464 256h-80v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8c-88.4 0-160 71.6-160 160v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zm-288 0H96v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8C71.6 32 0 103.6 0 192v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

.wr-pullquote p {
	color: #000;
	margin: 0;
}

.wr-pullquote p + p {
	margin-top: 1em;
}

@media (max-width: 768px) {
	.wr-pullquote {
		border-radius: 0 40px 0 40px;
		padding: 30px 28px 30px 90px;
	}
	.wr-pullquote::before {
		top: 30px;
		left: 24px;
		width: 44px;
		height: 44px;
	}
}

/* =========================================================
   Header navigation (Beaver Builder Menu module)
   Floating underline on hover / active page.
   The left/right values inset the underline from the link
   padding so it hugs the label - tweak to match your menu.
   ========================================================= */
.fl-menu .menu > li > a {
	position: relative;
}

.fl-menu .menu > li > a::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 30px;
	bottom: 6px;
	height: 2px;
	background-color: #56c271;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.25s ease;
}

.fl-menu .menu > li > a:hover::after,
.fl-menu .menu > li > a:focus::after,
.fl-menu .menu > li.current-menu-item > a::after,
.fl-menu .menu > li.current-menu-ancestor > a::after,
.fl-menu .menu > li.current-menu-parent > a::after {
	transform: scaleX(1);
}
