/*
 * Elementor compatibility for pages converted from WPBakery.
 *
 * The converter keeps WPBakery's class names on the Elementor elements
 * (pic-row, vc_col-sm-*, wpb_single_image, vc_cta3 ...). These rules give
 * them the spacing and look WPBakery's own stylesheet used to provide.
 *
 * The last sections style WPBakery markup that is written into the theme
 * itself (the call to action in page.php, the footer columns), which loses
 * its styles once WPBakery is deactivated.
 */

/* --- grid --- */
/* Rows have WPBakery's -15px gutters, set through Elementor's variables. */
.elementor .e-con.pic-row:not(.pic-stretch-row) {
	--margin-left: -15px;
	--margin-right: -15px;
	--width: auto;
	max-width: none;
}
/*
 * WPBakery columns are ordinary blocks, so the vertical margins of the
 * elements in them collapse. Elementor's are flex columns, where margins add
 * up; make them blocks again. Rows stay flex.
 */
.elementor .e-con.pic-col {
	display: block;
}

/*
 * --- element spacing (WPBakery's .wpb_content_element) ---
 * Same specificity as Elementor's ".e-con .elementor-widget.elementor-widget
 * { margin-block-end: 0 }" and loaded after it, so these win over Elementor
 * but the site's own CSS (Additional CSS, loaded later) still wins over these.
 */
.e-con .elementor-widget.wpb_content_element {
	margin-bottom: 35px;
}
.e-con.vc_cta3-container {
	--margin-bottom: 35px;
}

/* --- text --- */
.elementor .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/*
 * --- headings ---
 * Elementor sets .elementor-heading-title { line-height: 1 }; put back
 * Twenty Seventeen's 1.4. :where() keeps this at Elementor's specificity.
 */
:where(h1, h2, h3, h4, h5, h6).elementor-heading-title {
	line-height: 1.4;
}
:where(div, p, span).elementor-heading-title {
	line-height: inherit;
}
/* Elementor also zeroes heading margins; put back the theme's. */
:where(h1, h2, h3, h4, h5, h6).elementor-heading-title {
	margin-bottom: 0.75em;
}
:where(p).elementor-heading-title {
	margin-bottom: 1.5em;
}
/*
 * Twenty Seventeen gives headings 1.5em top padding unless they are a first
 * child. Each Elementor heading is the first child of its own widget, so
 * apply it by widget position instead. Not h2: the site CSS sets h2 { padding: 0 }.
 */
/* :is() matches the weight of the theme's "h5:first-child { padding-top: 0 }" */
:where(.e-con > .elementor-widget-heading:not(:first-child)) :is(h1, h3, h4, h5, h6).elementor-heading-title {
	padding-top: 1.5em;
}
/* The theme's ".wpb_wrapper h5" (style.css) */
.elementor-widget h5 {
	text-transform: uppercase;
	font-weight: 600;
	font-size: 12px;
}

/* --- images --- */
.elementor .elementor-widget-image img {
	vertical-align: top;
}
/*
 * WPBakery pads a wrapper round the image; here the padding is on the img,
 * so keep it outside the image's width (Elementor makes everything border-box).
 */
.elementor .pic-image-vc-box-border img {
	box-sizing: content-box;
	max-width: calc(100% - 12px);
	padding: 6px;
	background-color: #ebebeb;
}

/* --- call to action --- */
.elementor .e-con.vc_cta3 {
	border: 1px solid transparent;
	word-wrap: break-word;
}
.elementor .e-con.vc_cta3.vc_cta3-shape-rounded {
	border-radius: 5px;
}
.elementor .e-con.vc_cta3.vc_cta3-style-classic {
	border-color: #f0f0f0;
	background-color: #f7f7f7;
}
.elementor .e-con.vc_cta3.vc_cta3-style-flat.vc_cta3-color-classic {
	background-color: #f0f0f0;
}
.elementor .e-con.vc_cta3 > .e-con.vc_cta3-content {
	--width: auto;
	flex: 1 1 0%;
	min-width: 0;
}
/* WPBakery's icon sits in a table cell with 28px between it and the text */
.elementor .e-con.vc_cta3 > .elementor-widget-icon {
	flex: 0 0 auto;
	margin: 0 28px 0 0;
}

/* --- image carousel --- */
.elementor .pic-carousel .swiper-slide-image {
	vertical-align: top;
}
/* WPBakery's slides start at the column's left edge */
.elementor .pic-carousel .swiper-slide {
	text-align: left;
}

/* --- hover box (WPBakery 6.6 vc_hoverbox) --- */
.vc-hoverbox-wrapper,
.vc-hoverbox-wrapper * {
	box-sizing: border-box;
}
.vc-hoverbox-wrapper.vc-hoverbox-shape--rounded .vc-hoverbox-back,
.vc-hoverbox-wrapper.vc-hoverbox-shape--rounded .vc-hoverbox-front {
	border-radius: 10px;
}
.vc-hoverbox-wrapper.vc-hoverbox-shape--round .vc-hoverbox-back,
.vc-hoverbox-wrapper.vc-hoverbox-shape--round .vc-hoverbox-front {
	border-radius: 50px;
}
.vc-hoverbox-wrapper.vc-hoverbox-align--center { text-align: center; }
.vc-hoverbox-wrapper.vc-hoverbox-align--left { text-align: left; }
.vc-hoverbox-wrapper.vc-hoverbox-align--right { text-align: right; }
.vc-hoverbox-wrapper .vc-hoverbox {
	position: relative;
	display: inline-block;
	text-align: center;
	width: 100%;
}
.vc-hoverbox-wrapper.vc-hoverbox-width--90 .vc-hoverbox { width: 90%; }
.vc-hoverbox-wrapper.vc-hoverbox-width--80 .vc-hoverbox { width: 80%; }
.vc-hoverbox-wrapper.vc-hoverbox-width--70 .vc-hoverbox { width: 70%; }
.vc-hoverbox-wrapper.vc-hoverbox-width--60 .vc-hoverbox { width: 60%; }
.vc-hoverbox-wrapper.vc-hoverbox-width--50 .vc-hoverbox { width: 50%; }
.vc-hoverbox-inner {
	width: 100%;
	display: inline-block;
	min-height: 250px;
}
.vc-hoverbox-inner :last-child {
	margin-bottom: 0;
}
.vc-hoverbox-block {
	height: 100%;
	width: 100%;
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	transition: transform .5s ease-in-out;
	transform-style: preserve-3d;
	background-size: cover;
	background-position: center;
}
.vc-hoverbox-block-inner {
	flex-shrink: 0;
	padding: 20px;
}
.vc-hoverbox-block-inner > * {
	backface-visibility: hidden;
}
.vc-hoverbox-front {
	transform: rotateY(0);
	z-index: 1;
}
.vc-hoverbox-back {
	transform: rotateY(180deg);
}
.vc-hoverbox:hover .vc-hoverbox-front {
	transform: rotateY(-180deg);
}
.vc-hoverbox:hover .vc-hoverbox-back {
	transform: rotateY(0);
}
.vc-hoverbox-wrapper.vc-hoverbox-direction--reverse .vc-hoverbox-front { transform: rotateY(180deg); }
.vc-hoverbox-wrapper.vc-hoverbox-direction--reverse .vc-hoverbox-back { transform: rotateY(0); z-index: 2; }
.vc-hoverbox-wrapper.vc-hoverbox-direction--reverse .vc-hoverbox:hover .vc-hoverbox-front { transform: rotateY(0); }
.vc-hoverbox-wrapper.vc-hoverbox-direction--reverse .vc-hoverbox:hover .vc-hoverbox-back { transform: rotateY(-180deg); }

/*
 * --- WPBakery markup in the theme: call to action (page.php) ---
 * Copied from WPBakery 6.6's js_composer.min.css. Scoped to non-Elementor
 * markup so the converted elements, which share these class names, are not
 * affected.
 */
.site-main > .vc_row:not(.e-con) {
	margin-left: -15px;
	margin-right: -15px;
}
.site-main > .vc_row:not(.e-con)::before,
.site-main > .vc_row:not(.e-con)::after {
	content: " ";
	display: table;
}
.site-main > .vc_row:not(.e-con)::after {
	clear: both;
}
.site-main > .vc_row:not(.e-con) > .vc_column_container.cta {
	position: relative;
	min-height: 1px;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}
/*
 * No padding: the site's WPBakery custom CSS has ".cta .vc_column-inner
 * { padding: 0 }", which the CSS migration rewrites for Elementor columns.
 */
.site-main > .vc_row:not(.e-con) > .vc_column_container.cta > .vc_column-inner {
	box-sizing: border-box;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}
@media (min-width: 768px) {
	.site-main > .vc_row:not(.e-con) > .vc_col-sm-12.cta {
		float: left;
		width: 100%;
	}
}
section.vc_cta3-container {
	margin-bottom: 35px;
	margin-left: auto;
	margin-right: auto;
}
section.vc_cta3-container::before,
section.vc_cta3-container::after {
	display: table;
	content: " ";
}
div.vc_general.vc_cta3 {
	border: 1px solid transparent;
	font-size: 1em;
	padding: 28px;
	word-wrap: break-word;
}
div.vc_general.vc_cta3 .vc_cta3-content {
	vertical-align: top;
}
div.vc_general.vc_cta3 .vc_cta3-actions {
	vertical-align: middle;
	white-space: nowrap;
}
div.vc_general.vc_cta3 .vc_cta3-content > :last-child {
	margin-bottom: 0;
}
div.vc_general.vc_cta3 h2 {
	margin-top: 0;
	margin-left: 0;
	margin-right: 0;
}
div.vc_general.vc_cta3.vc_cta3-align-left .vc_cta3-content {
	text-align: left;
}
div.vc_general.vc_cta3.vc_cta3-style-flat .vc_cta3-content-header h2 {
	color: inherit;
}
div.vc_general.vc_cta3.vc_cta3-shape-square {
	border-radius: 0;
}
div.vc_general.vc_cta3.vc_cta3-color-classic.vc_cta3-style-flat {
	color: #9d9d9e;
	border-color: transparent;
	background-color: #f0f0f0;
}
div.vc_general.vc_cta3.vc_cta3-color-classic.vc_cta3-style-flat .vc_cta3-content-header {
	color: #666;
}
@media (min-width: 768px) {
	div.vc_general.vc_cta3.vc_cta3-actions-right .vc_cta3-content {
		padding-right: 28px;
		display: table-cell;
	}
	div.vc_general.vc_cta3.vc_cta3-actions-right .vc_cta3-actions {
		display: table-cell;
		max-width: 30%;
	}
	div.vc_general.vc_cta3 .vc_cta3-actions .vc_btn3-container {
		margin: 0;
	}
}
div.vc_btn3-container {
	display: block;
	margin-bottom: 21.73913043px;
	max-width: 100%;
}
div.vc_btn3-container.vc_btn3-inline {
	display: inline-block;
	vertical-align: top;
}
a.vc_general.vc_btn3 {
	display: inline-block;
	margin-bottom: 0;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	border: 1px solid transparent;
	box-sizing: border-box;
	word-wrap: break-word;
	user-select: none;
	text-decoration: none;
	position: relative;
	top: 0;
	transition: all .2s ease-in-out;
	line-height: normal;
	box-shadow: none;
	font-size: 14px;
	padding: 14px 20px;
}
a.vc_btn3.vc_btn3-style-modern {
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, .2) 0, rgba(255, 255, 255, .01) 100%);
	background-repeat: repeat-x;
}
a.vc_btn3.vc_btn3-shape-rounded {
	border-radius: 5px;
}
a.vc_btn3.vc_btn3-color-green.vc_btn3-style-modern {
	color: #fff;
	border-color: #6dab3c;
	background-color: #6dab3c;
}
a.vc_btn3.vc_btn3-color-green.vc_btn3-style-modern:hover,
a.vc_btn3.vc_btn3-color-green.vc_btn3-style-modern:focus {
	color: #f7f7f7;
	border-color: #5f9434;
	background-color: #5f9434;
	outline: 0;
}

/* --- WPBakery markup in the theme: footer columns (footer.php) --- */
.site-info .vc_col-sm-4 {
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
}
@media (min-width: 768px) {
	.site-info .vc_col-sm-4 {
		float: left;
		width: 33.33333333%;
	}
}
