/* DIRTY Responsive pricing table CSS */

/* 
- make mobile switch sticky
*/
* {
  box-sizing:border-box;
  padding:0;
  margin:0;
   outline: 0;
}

article {
  width:100%;
  max-width:1000px;
  margin:0 auto;
  height:1000px;
  position:relative;
}
article ul {
  display:flex;
  top:0px;
  z-index:10;
  padding-bottom:14px;
}
article li {
  list-style:none;
  flex:1;
}
article li:last-child {
  border-right:1px solid #DDD;
}
article 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
}
article li.active button {
  background:#F5F5F5;
  color:#000;
}
article table { border-collapse:collapse; table-layout:fixed; width:100%; }
article th { background:#F5F5F5; display:none; }
article td, th {
  height:53px
}
article td,th { border:1px solid #DDD; padding:10px; empty-cells:show; }
article td,th {
  text-align:left;
}
article td+td, th+th {
  text-align:center;
  display:none;
}
article td.default {
  display:table-cell;
}
article .bg-purple {
  border-top:3px solid #A32362;
}
article .bg-blue {
  border-top:3px solid #0097CF;
}
article .sep {
  background:#F5F5F5;
  font-weight:bold;
}
article .txt-l { font-size:28px; font-weight:bold; }
article .txt-top { position:relative; top:-9px; left:-2px; }
article .tick { font-size:18px; color:#2CA01C; }
article .hide {
  border:0;
  background:none;
}

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