/**
 * @package SP Page Builder
 * @author JoomShaper http://www.joomshaper.com
 * @copyright Copyright (c) 2010 - 2015 JoomShaper
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or later
*/
#sp-page-builder {
	.page-content {
		.sppb-section {
			margin-top: 30px;
			z-index: 1;
			&:first-child {
				margin-top: 0;
			}
		}
	}

	//Section Title
	.sppb-section-title {
		margin-bottom: 50px;
		.sppb-title-heading {
			margin-top: 0;
			font-size: 36px;
			line-height: 36px;
			margin-bottom: 15px;
			border: 0;
		}

		.sppb-title-subheading {
			font-size: 16px;
			line-height: 24px;
			margin-top: 0;
			margin-bottom: 0;
		}

		&.sppb-text-center .sppb-title-subheading {
			display: inline-block;
			max-width: 80%;
		}
	}

}

//Call to action
.sppb-addon-cta {
	.sppb-cta-title {
		margin-top: 0;
		font-size: 36px;
		line-height: 36px;
		margin-bottom: 15px;
		border: 0;
	}

	.sppb-cta-subtitle {
		font-size: 24px;
		line-height: 24px;
		margin-top: 0;
		margin-bottom: 0;
	}

	.sppb-cta-text {
		margin-top: 15px;
		margin-bottom: 0;
	}
}

// Scale up controls for tablets and up
@media screen and (min-width: @screen-sm-min) {
	.sppb-addon-cta {
		.sppb-row {
			display: table-row;
			height: 100%;
			>div{
				display: table-cell;
				vertical-align: middle;
				float: none;
			}
		}
	}
}

//Facebook Likebox
.sppb-addon-facebook-likebox * {
	max-width: 100% !important;
}

.sppb-gallery {
	list-style: none;
	padding: 0;
	margin: 0;
}

.sppb-gallery li {
	display: inline-block;
	float: left;
	padding: 0;
	.box-sizing(~'border-box');
}

.sppb-gallery li a {
	display: block;
}

//Person
.sppb-addon-persion {
	.sppb-addon-content>div {
		margin-top: 15px;
		&:first-child {
			margin-top: 0;
		}
	}
	.sppb-person-information {
		>span {
			display: block;
			&.sppb-person-name {
				font-size: 16px;
				font-weight: bold;
			}
			&.sppb-person-designation {
				font-size: 12px;
				color: #888;
			}
		}
	}
	.sppb-person-social {
		list-style: none;
		display: block;
		padding: 0;
		margin: 0 -8px;
		>li {
			display: inline-block;
			margin: 0 8px;
			>a {
				display: block;
				font-size: 16px;
				line-height: 16px;
				color: #999;
				&:hover {
					color: #666;
				}
			}
		}
	}
}

//Pricing Table
.sppb-pricing-box {
	border: 1px solid #e5e5e5;
	padding: 20px;

	&.sppb-pricing-featured {
		border-color: #7FBA00;
		background-color: #7FBA00;
		color: #fff;
	}

	.sppb-pricing-header {
		.sppb-pricing-title {
			margin-top: 0;
			padding: 0;
			font-size: 18px;
			font-weight: bold;
			text-transform: uppercase;
			margin-bottom: 20px;
		}

		>span {
			&.sppb-pricing-price {
				font-size: 24px;
				line-height: 24px;
			}

			&.sppb-pricing-duration {
				font-size: 16px;
				line-height: 16px;
			}
		}
	}

	.sppb-pricing-features {
		padding: 20px 0;
		>ul {
			list-style: none;
			padding: 0;
			margin: 0;

			>li {
				display: block;
				padding: 5px 0;
			}
		}
	}
}

//Animated Number
.sppb-addon-animated-number {
	.sppb-addon-content {
		display: inline-block;

		.sppb-animated-number-title {
			margin-top: 10px;
		}
	}
	&.sppb-hasbg {
		.sppb-addon-content {
			padding: 20px;
		}
	}
}

//Flickr Gallery
.sppb-flickr-gallery {
	list-style: none;
	padding: 0;
	margin: -5px;
	.clearfix();

	li {
		display: block;
		float: left;
		margin: 5px;
		a{
			display: block;
			>img {
				width: 64px;
				height: 64px;
			}
		}
	}
}

//Pie Progress

.sppb-pie-chart {
	position: relative;
	display: inline-block;
	canvas {
		position: absolute;
		top: 0;
		left: 0;
	}

	.sppb-chart-percent {
		font-size: 24px;
	}

	.sppb-chart-icon,
	.sppb-chart-percent {
		width: 100%;
		height: 100%;
		display: table;
		span {
			display: table-cell;
			vertical-align: middle;
		}
	}
}


//Image content addon
.sppb-addon-image-content {
	position: relative;
	.sppb-image-holder {
		position: absolute;
		top: 0;
		width: 50%;
		height: 100%;
		background-position: 50%;
		background-size: cover;
	}

	&.aligment-left {
		.sppb-image-holder {
			left: 0;
		}

		.sppb-content-holder {
			padding: 120px 0 120px 50px;
		}
	}

	&.aligment-right {
		.sppb-image-holder {
			right: 0;
		}

		.sppb-content-holder {
			padding: 120px 50px 120px 0;
		}
	}

}


@media (max-width: @screen-sm-min) {
	.sppb-addon-image-content {
		.sppb-image-holder {
			position: inherit;
			width: 100% !important;
			height: 300px;
		}
	}
}


// Core variables and mixins
@import "variables.less";
@import "mixins.less";

// Core CSS
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "buttons.less";

// Components
@import "component-animations.less";
@import "labels.less";
@import "thumbnails.less";
@import "alerts.less";
@import "progress-bars.less";
@import "media.less";
@import "panels.less";
@import "navs.less";
@import "responsive-embed.less";
@import "close.less";
@import "forms.less";

// Components w/ JavaScript
@import "modals.less";
@import "popovers.less";
@import "carousel.less";

// Utility classes
@import "utilities.less";
@import "responsive-utilities.less";