// --------------------------------------------------------------------------------------------
// PRICING TABLE
// --------------------------------------------------------------------------------------------

.pricing-tables-wrapper {
	
	.pricing-tables {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		flex-direction: row;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		align-items:center;
		-webkit-align-items:center;
		-ms-align-items:center;
		flex-wrap: wrap;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		margin-left: -15px;
		margin-right: -15px;
	}
}

.basel-price-table {
	flex-basis: 229px;
	-webkit-flex-basis: 229px;
	-ms-flex-basis: 229px;
	flex-grow: 1;
	-webkit-flex-grow: 1;
	-ms-flex-grow: 1;
	flex-shrink: 1;
	-webkit-flex-shrink: 1;
	-ms-flex-shrink: 1;
	margin-bottom: 30px;
	margin-left: 15px;
	margin-right: 15px;
	text-align: center;
	transition:
		transform .3s ease;
	-webkit-transition:
		transform .3s ease;
	line-height: 1.2;

	.basel-plan-name {
		padding: 15px 15px;

		> span:not(.price-subtitle) {
			font-weight: 600;
			font-size: 22px;
			color:$heading-color;
		}
	}

	.price-subtitle {
		display: block;
		color:#777777;
		font-size: 14px;
		font-weight: normal;
		margin-top: 5px;
		line-height: 1.4;
	}

	.basel-plan-inner {
		overflow: hidden;
		position: relative;
		background-color: white;
		border: 1px solid rgba(97, 97, 97, 0.09);
		box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
		transition:
			box-shadow .3s ease;
		-webkit-transition:
			box-shadow .3s ease;
	}

	.price-label {
		position: absolute;
		top: 16px;
		right: -31px;
		text-transform: uppercase;
		font-weight: 600;
		font-size: 14px;
		line-height: 22px;
		padding-left: 10px;
		padding-right: 10px;
		text-align: center;
		color: white;
		white-space: nowrap;
		transform: rotate(46deg);
	   	-webkit-transform: rotate(46deg);
		width: 120px;
		backface-visibility: hidden;
		perspective: 800px;
		-webkit-backface-visibility: hidden;
		-webkit-perspective: 800px;
	}

	.basel-plan-price {
		background-color: $primary-color;
		padding: 10px;
		margin: -1px;

		> span {
			color:white;
		}
	}

	.basel-price-currency {
		vertical-align: top;
		font-size: 28px;	
	}

	.basel-price-value {
		font-size: 42px;
		vertical-align: middle;
		font-weight: 600;		
	}

	.basel-price-suffix {
		vertical-align: bottom;
		display: block;
		text-transform: uppercase;
		font-size: 14px;
	}

	.basel-plan-features {
		padding: 25px;
		border-bottom: 1px solid rgba(97, 97, 97, 0.09);
	}

	.basel-plan-feature {
		border-bottom: 1px solid #e8e8e8;
		padding-bottom: 15px;
		margin-bottom: 15px;

		> p {
			border-bottom: 1px solid #e8e8e8;
			padding-bottom: 15px;
			margin-bottom: 15px;

			&:first-child {
				padding-bottom: 0;
				margin-bottom: 0;	
				border-bottom:none;
			}

			&:last-child {
				padding-bottom: 0;
				margin-bottom: -15px;
				border-bottom:none;
			}
		}

		&:last-child {
			padding-bottom: 0;
			margin-bottom: 0;
			border-bottom:none;
		}
	}

	.basel-plan-footer {
		padding: 20px 15px;
		background-color: #f9f9f9;

		> a {
			@include btn-color-primary;

			&.added {
				display: none;
			}

			&:after {
				border-color:white;
			}
		}
	}

	&.label-color-red {
		
		.price-label {
			background-color: #EF4836;
		}		
	}

	&.label-color-green {
		
		.price-label {
			background-color: #0fa34c;
		}		
	}

	&.label-color-blue {
		
		.price-label {
			background-color: #2a7ce4;
		}		
	}

	&.label-color-yellow {
		
		.price-label {
			background-color: #F7CA18;
		}		
	}

	&:hover {
		transform:translateY(-10px);
		-webkit-transform:translateY(-10px);

		.basel-plan-inner {
			box-shadow: 1px 1px 9px rgba(0, 0, 0, 0.12);
		}
	}
}