/* Responsive pricing table CSS */

/* 
- make mobile switch sticky
*/

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800');


* {
  box-sizing:border-box;
  padding:0;
  margin:0;
   outline: 0;
}
body { 
  font-family: 'Montserrat';
  font-size:14px;
  font-weight:500;
  color: #233038;	
  padding:14px;
}
article {
  width:100%;
  max-width:1138px;
  margin:0 auto;
  height:1248px;
  position:relative;
}
ul {
  display:flex;
  top:0px;
  z-index:10;
  padding-bottom:14px;
}
li {
  list-style:none;
  flex:1;
}
li:last-child {
  border-right:1px solid #DDD;
}
button {
  width:100%;
  border: 1px solid #DDD;
  border-right:0;
  border-top:0;
  padding: 10px;
  background:#FFF;
  font-size:16px;
  font-weight:600;
  height:60px;
  color:#99a7c1
}
li.active button {
  background:#F5F5F5;
  color:#233038;
}
table { border-collapse:collapse; table-layout:fixed; width:100%; }
th { background:#F5F5F5; display:none; font-size:16px; }
td, th {
  height:53px
}
td,th { border:1px solid #99a7c1; padding:10px; empty-cells:show; }
td,th {
  text-align:left;
}
td+td, th+th {
  text-align:center;
  display:none;
}
td.default {
  display:table-cell;
}
.bg-purple {
  border-top:3px solid #A32362;
}
.bg-standard {
  border-top:3px solid #038387;
}
.bg-blue {
  border-top:3px solid #0097CF;
}
.bg-pro {
  border-top:3px solid #ee694b;
}
.sep {
  background:#c2c8d3;
  color: #233038;	
  font-size:15px;
  font-weight:600;
}
.txt-l { font-size:26px; font-weight:600; }
.txt-l-intro { font-size:26px; font-weight:600; color:#A32362 }
.txt-l-standard { font-size:26px; font-weight:600; color:#038387 }
.txt-l-pro { font-size:26px; font-weight:600; color:#ee694b }
.txt-l-deluxe { font-size:26px; font-weight:600; color:#0097CF }
.txt-sm-intro { font-size:12px; line-height:13px; font-weight:600; color:#A32362 }
.txt-sm-standard { font-size:12px; line-height:13px; font-weight:600; color:#038387 }
.txt-sm-pro { font-size:12px; line-height:13px; font-weight:600; color:#ee694b }
.txt-sm-deluxe { font-size:12px; line-height:13px; font-weight:600; color:#0097CF }
.txt-top { position:relative; top:-9px; left:-2px; }
.tick { font-size:20px; color:#038387; }
.tick-intro { font-size:20px; color:#A32362 !important; }
.tick-standard { font-size:20px; color:#038387 !important; }
.tick-pro { font-size:20px; color:#ee694b !important; }
.tick-deluxe { font-size:20px; color:#0097CF !important; }

.hide {
  border:0;
  background:none;
}



.info:hover .infotooltip { /* NEW */
    display: block;
}

.infotooltip {
    display: none;  /* NEW */
    background: #233038;
    margin-left: 58px;
    padding: 12px;
    position: absolute;
    z-index: 1000;
    width:260px;
    height:75px;
	border-radius: 4px;
	font-size:11px; 
	line-height:13px; 
	color:#fff;
}

.info {
    margin:100px;
}


@media (pointer: coarse), (hover: none) {
    info:focus:active::after {
        position: fixed;
        bottom: auto; top: 50%;
        left: 50%;
        text-align: left;
        transform: translate(-50%);
    padding: 8px;
      }
    }



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