Beaver Builder CSS Snippets

bb.css

/* Content Slider
 * Set Opacity Bg on text 100% wide to overlay image - then position text with fl-slide-title and fl-slide-text
---------------------------------------------------------------------------------------------------- */
@media (min-width:768px) {
	.hero-slider-row .fl-slide-2 .fl-slide-title,
	.hero-slider-row .fl-slide-2 .fl-slide-text {
		width: 65%;
		margin: 0 auto !important;
	}

	.hero-slider-row .fl-slide-2 .fl-slide-title {
		margin-top: 80px !important;
	}
}


/* Buttons - substitute out .black-but for a custom CSS
---------------------------------------------------------------------------------------------------- */

.fl-builder-content .black-but a.fl-button, 
.fl-builder-content .black-but a.fl-button:visited {
    background: #000;
    border: 1px solid #000;
    color: #fff;
    border-radius: 1px;
}

.fl-builder-content .black-but  a.fl-button:hover, 
.fl-builder-content .black-but  a.fl-button:focus {
    background: #fff;
    border: 1px solid #000;
    color: #000;
}

.fl-builder-content .black-but a.fl-button *, 
.fl-builder-content .black-but a.fl-button:visited  {
	  color: #fff;
}

.fl-builder-content .black-but  a.fl-button:hover *, 
.fl-builder-content .black-but  a.fl-button:focus * {
	  color: #000000;
}

/* Before and after quote symbols on a rich text box
---------------------------------------------------------------------------------------------------- */
.testimonial-boxed-quote  .fl-rich-text:before{
	content: "\f122";
	font-family: dashicons;
	position: absolute;
	top: 20px;
	left: -20px;
	font-size: 55px;
	display: inline-block;
	background: #fff;
}

.testimonial-boxed-quote  .fl-rich-text:after{
	content: "\f122";
	font-family: dashicons;
	transform: rotate(180deg);
	position: absolute;
	bottom: 20px;
	right: -20px;
	font-size: 55px;
	display: inline-block;
	background: #fff;
}