/* DIRTY Responsive pricing table CSS */

/* 
- make mobile switch sticky
*/

.grid-item .grid-item--inner a img {
	height: auto;
}

.chart ul {
  display:flex;
  top:0px;
  z-index:10;
  padding-bottom:14px;
  padding-left: 0;
}

.chart li {
  list-style:none;
  flex:1;
}

.chart li:last-child {
  border-right:1px solid #DDD;
}

.chart button {
  width:100%;
  border: 1px solid #DDD;
  border-right:0;
  border-top:0;
  padding: 10px;
  background:#FFF;
  font-size:14px;
  font-weight:bold;
  height:60px;
  color:#999
}
.chart li.active button {
  background:#F5F5F5;
  color:#000;
}
.chart table { border-collapse:collapse; table-layout:fixed; width:100%; }
.chart th { background:#F5F5F5; display:none; }
.chart td, .chart th {
  height:53px
}
.chart td, .chart th { border:1px solid #DDD; padding:10px; empty-cells:show; }
.chart td, .chart th {
  text-align:left;
}
.chart td+td, .chart th+th {
  text-align:center;
  display:none;
}
.chart td.default {
  display:table-cell;
}
.chart .bg-purple {
  border-top:3px solid #A32362;
}
.chart .bg-blue {
  border-top:3px solid #0097CF;
}
.chart .sep {
  background:#F5F5F5;
  font-weight:bold;
}
.chart .txt-l { font-size:28px; font-weight:bold; }
.chart .txt-top { position:relative; top:-4px; left:-4px; }
.chart .tick { font-size:18px; color:#2CA01C; }
.chart .txt-xs { font-size:12px; }
.chart .hide {
  border:0;
  background:none;
}

@media (min-width: 640px) {
  .chart ul {
    display:none;
  }
  .chart td,.chart th {
    display:table-cell !important;
  }
  .chart td,.chart th {
    width: 330px;
  
  }
  .chart td+td, .chart th+th {
    width: auto;
  }
}

.badge-link {
	position: absolute;
	right: 40px;
	top: 120px;
	z-index: 9999;
}

@media (max-width: 768px) {
	.badge-link {
		top: 80px;
	}
}

@media (max-width: 1140px) {
	.badge-link img {
		width: 75px;
		height: 75px;
	}
}