.comparison-container {
	max-width: 100%;
	margin: 20px auto;
	overflow: hidden
}

.comparison-container .table-container {
	overflow-x: auto
}

.comparison-container table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed
}

.comparison-container table th,
.comparison-container table td {
	padding: 10px;
	text-align: center;
	border-top: 1px solid;
	width: 20%
}

.comparison-container table th:first-child,
.comparison-container table td:first-child {
	text-align: left
}

.comparison-container table thead th,
.comparison-container table thead td {
	border: 0
}

.comparison-container table th {
	font-weight: bold;
	position: sticky;
	top: 0;
	z-index: 1
}

.comparison-container .billed-annually {
	display: none
}

.comparison-container .plan-name,
.comparison-container .feature-text {
	font-weight: bold
}

.comparison-container .feature-name {
	position: relative
}

.comparison-container .feature-check {
	font-size: 1.2em;
	color: green
}

.comparison-container .feature-check-x {
	color: gray
}



.comparison-container .accordion-header {
	padding: 15px;
	background-color: #000;
	font-weight: bold;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	font-size: inherit;
	margin: 0;
	color: #fff
}

.comparison-container .accordion-content {
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s ease-out
}

.comparison-container .accordion-toggle {
	display: none
}

.comparison-container .accordion-toggle:checked+.accordion-header+.accordion-content {
	max-height: 10000px
}

.comparison-container .arrow {
	border: solid #fff;
	border-width: 0 2px 2px 0;
	display: inline-block;
	padding: 3px;
	transform: rotate(45deg);
	transition: transform .3s
}

.comparison-container .accordion-toggle:checked+.accordion-header .arrow {
	transform: rotate(-135deg)
}