/* Start General Plan Chooser Div */
.plan-chooser {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 2rem 0 4rem;

	.card {
		width: calc(33.33% - 1rem);
		height: max-content;
		margin-right: 1rem;
		border: .08rem solid #000;
		border-radius: .75rem;
		color: #000;
		background: #fff;
		transition: all .3s ease-in-out;

		&:last-child {
			margin-right: 0;
		}

		&:hover {
			box-shadow: .1px 5px 20px 5px rgba(0, 0, 0, .094);
			transform: scale(1.02);
			transition: all .3s ease-in-out;
		}
	}

	ul {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		margin: 1.5rem;

		li {
			display: flex;
			justify-content: flex-start;
			width: 100%;
			padding: .5rem 0;
			font-size: 14px;
			line-height: 1em;
			list-style-type: none;

			&.price {
				align-items: baseline;
				margin-bottom: 0;
				color: #222;
				font-size: 36px;
				font-weight: bold;
			}
		}
	}

	#space {
		color: #2f1c6a;
		font-size: 20px;
		font-weight: lighter;
	}

	.breaker {
		margin: 1rem 0;
		border-bottom: 1px solid #56cfff;
	}

	.seeAll {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 3rem;
		color: #0cbff2;
		font-size: 16px;
		font-weight: bold;

		> *:not(:last-child) {
			margin-right: 1rem;
		}
	}

	.topSection {
		justify-items: center;

		li {
			justify-content: center;
		}

		p {
			margin-bottom: 2.5rem;
			color: #222;
			font-size: 14px;
			font-weight: normal;
			text-align: center;
		}
	}

	.plan-headline {
		color: #222;
		font-family: #{$title};
		font-size: 2.5rem;
	}

	.premiumBtn .plan-btn {
		background: #222;
		font-family: #{$title};

		&:hover {
			background: #444;
		}
	}

	.premiumSeeAll {
		color: #444;
	}

	.mega-list a {
		padding-right: .75rem;
		color: #0cbff2;
		font-weight: bold;
	}

	.mega-lists li {
		justify-content: start;
	}

	.plan-btn, .trial-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 3rem;
		margin-top: .5rem;
		border-radius: .25rem;
		outline: none;
		font-family: #{$title};
		font-size: 24px;
		text-transform: uppercase;

		&.plan-btn {
			border: 0;
			color: #fff;
			background: #0cbff2;

			a {
				color: #fff;
			}

			&:hover {
				background: #56cfff;

				a {
					color: #fff;
				}
			}
		}

		&.trial-btn {
			border: 1px solid #222;
			color: #222;
			background: #fff;

			a {
				color: #222;
			}

			&:hover {
				color: #fff;
				background: #222;

				a {
					color: #fff;
				}
			}
		}

		i.fas {
			padding-right: 5px;
		}
	}
}

@media (min-width: 320px) and (max-width: 414px) {
	.plan-chooser {
		.card {
			margin-bottom: 1rem;
		}
	}
}

@media (max-width: 599px) {
	.plan-chooser {
		.card {
			width: calc(98% - 1rem);
			margin-right: 1rem;
			margin-bottom: 1rem;
		}
	}
}

@media (min-width: 600px) and (max-width: 1080px) {
	.plan-chooser {
		.card {
			width: calc(48% - 1rem);
			margin-right: 1rem;
			margin-bottom: 1rem;
		}
	}
}

.plan-chooser-terms-and-conditions {
	clear: both;
}

.card-terms {
	padding: 1rem;
	background: #fff;

	h2 {
		margin-bottom: 1rem;
		font-family: #{$title};
		font-size: 2rem;
	}
}

/* Start mega plan chooser left-right alignment of the content and image */
.mega-content-page {
	max-width: 100%;
	margin: 20px auto;
}

.mega-row {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.mega-column {
	flex: 1;
	box-sizing: border-box;
	padding: 15px;
}

.mega-column img {
	height: auto;
	max-width: 100%;
}

/* Responsive Styles */
@media (max-width: 600px) {
	.mega-row {
		flex-direction: column;
	}

	.mega-row:nth-child(even) .mega-column:first-child {
		order: 2;
	}

	.mega-row:nth-child(even) .mega-column:last-child {
		order: 1;
	}
}

/* Start mega accordion */
.mega-accordion {
	max-width: 100%;
	margin: 20px auto;
}

.mega-accordion-header {
	clear: left;
	padding: 10px;
	line-height: 1.3;
	font-weight: normal;
	user-select: none;
	cursor: pointer;

	&:hover {
		color: #0cbff2;
	}
}

.mega-toggle-icon {
	display: inline-block;
	float: left;
	width: .8em;
	height: .85em;
	margin: .1em .75em .25em 0;
	padding: 0;
	color: #fff;
	background-color: #0cbff2;
	font-size: 1.15em;
	line-height: .75;
	font-weight: bold;
	text-align: center;
}

.mega-accordion-content {
	display: none;
	float: left;
	box-sizing: border-box;
	margin-bottom: 1em;
	margin-left: 0;
	padding: 1.5em;
	background: rgba(255, 255, 255, .5);
	font-size: .95rem;
	line-height: 1.5em;

	p {
		line-height: 1.5;
	}
}