/* DIRTY Responsive pricing table CSS */

/* 
- make mobile switch sticky
*/

* {
  box-sizing:border-box;
  padding:0;
  margin:0;
  outline: 0;
}
article.dateperfect-comparison-wrapper {
  width:100%;
  height: auto;
  overflow: hidden;
  margin:0 auto;
  position:relative;
}
ul.mobile-tab-links {
  display:flex;
  top:0px;
  z-index:10;
  padding-bottom:14px;
}
.mobile-tab-links li {
  list-style:none;
  flex:1;
  margin-left: 0px!important;
}
.mobile-tab-links li:last-child {
  border-right:1px solid #DDD;
}
article.dateperfect-comparison-wrapper button {
  width:100%;
  border: 1px solid #DDD;
  border-right:0;
  border-top:0;
  padding: 8px;
  background:#FFF;
  font-size:10px;
  height:60px;
  color:#999;
  word-break: break-all;

}
.mobile-tab-links li.active button {
  background:#F5F5F5;
  color:#000;
}
article.dateperfect-comparison-wrapper tbody tr td,article.dateperfect-comparison-wrapper thead th { border-bottom: none; border-top: none;}
article.dateperfect-comparison-wrapper table { border-collapse:collapse; table-layout:fixed; width:100%; }
article.dateperfect-comparison-wrapper th { background:#F5F5F5; display:none; }
article.dateperfect-comparison-wrapper td, article.dateperfect-comparison-wrapper th {
  height:53px
}
article.dateperfect-comparison-wrapper td,article.dateperfect-comparison-wrapper th { padding:10px; empty-cells:show; }

article.dateperfect-comparison-wrapper td+td, article.dateperfect-comparison-wrapper th+th {
  text-align:center;
  display:none;
}
article.dateperfect-comparison-wrapper thead th {
  background: #ffffff;
} 
article.dateperfect-comparison-wrapper tbody tr:nth-child(odd) {
  background: #f7fbfc;
}
article.dateperfect-comparison-wrapper tbody tr:last-child {
  background: #ffffff;
}
article.dateperfect-comparison-wrapper td.default {
  display:table-cell;
}
article.dateperfect-comparison-wrapper .bg-red {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f58364+0,fe6840+100 */
  background: #ec6642; /* Old browsers */
  background: -moz-linear-gradient(top, #ec6642 0%, #d64b21 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #ec6642 0%,#d64b21 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ec6642 0%,#d64b21 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ec6642', endColorstr='#d64b21',GradientType=0 ); /* IE6-9 */  
  color: #ffffff;
  font-weight: 300;
  font-size: 18px !important;
  text-align: center;
  font-family: 'Roboto',sans-serif;
  clip-path: ellipse(75% 100% at 50% 100%);
  -webkit-clip-path: ellipse(75% 100% at 50% 100%);
  border:none;
}
article.dateperfect-comparison-wrapper thead tr:last-child th {
  border-top: none;
}
.bg-purple {
  
}
.bg-blue {
  
}
article.dateperfect-comparison-wrapper .sep {
  background:#F5F5F5;
  font-weight:bold;
}
article.dateperfect-comparison-wrapper .txt-l { font-size:28px; font-weight:bold; }
article.dateperfect-comparison-wrapper .txt-top { position:relative; top:-9px; left:-2px; }
article.dateperfect-comparison-wrapper .tick { font-size:18px; color:#2CA01C; }
article.dateperfect-comparison-wrapper .hide {
  border:0;
  background:none;
}
article.dateperfect-comparison-wrapper tbody tr td:first-child {
    color: #0d8798;
    font-size: 18px;
    font-family: 'Roboto',sans-serif;
    width: 240px !important;
    border-left: none;
}
article.dateperfect-comparison-wrapper thead tr th:first-child {
    width: 240px !important;
}
article.dateperfect-comparison-wrapper tbody tr td {
    font-family: 'Roboto',sans-serif;
    font-size: 15px;
}
.dateperfect-comparison-wrapper img.dp-comparison-logo {
    max-width: 100px;
    margin: auto;
    display: block;
}
.dateperfect-comparison-wrapper img.dp-comparison-icons,
.dateperfect-comparison-wrapper img.dp-sexual_orientation-icons, 
.dateperfect-comparison-wrapper img.dp-miscellaneous-icons,
.dateperfect-comparison-wrapper img.dp-fetish_icons,
.dateperfect-comparison-wrapper img.dp-religion-icons,
.dateperfect-comparison-wrapper img.dp-lifestyle-icons,
.dateperfect-comparison-wrapper img.dp-platform-icons {
    width: 28px;
    margin-right: 6px;
    margin-top: 5px;
}
.dateperfect-comparison-wrapper .tag-links {
  color: #222;
}
.dateperfect-comparison-wrapper .first_sitelink {  
  background: #ec6642; /* Old browsers */
  background: -moz-linear-gradient(top, #ec6642 0%, #d64b21 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #ec6642 0%,#d64b21 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #ec6642 0%,#d64b21 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ec6642', endColorstr='#d64b21',GradientType=0 ); /* IE6-9 */    
  border-radius: 3px;
  color: #ffffff;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 35px;
  line-height: 35px;
  font-weight: 300;
  font-size: 15px !important;
  font-family: 'Roboto',sans-serif;
}
.dateperfect-comparison-wrapper .first_sitelink img {
   width: 14px !important;
   height: 13px !important;
   margin-left: 5px;
}

.dateperfect-comparison-wrapper .first_sitelink:hover {
  text-decoration: none;  
  background: #d64b21; /* Old browsers */
  background: -moz-linear-gradient(top, #d64b21 0%, #ec6642 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #d64b21 0%,#ec6642 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #d64b21 0%,#ec6642 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d64b21', endColorstr='#ec6642',GradientType=0 ); /* IE6-9 */  
}
.dateperfect-comparison-wrapper .site_link {   
  background: #0e8495; /* Old browsers */
  background: -moz-linear-gradient(top, #0e8495 0%, #1a4a54 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #0e8495 0%,#1a4a54 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #0e8495 0%,#1a4a54 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e8495', endColorstr='#1a4a54',GradientType=0 ); /* IE6-9 */  
  border-radius: 3px;
  color: #ffffff;
  text-decoration: none;
  display: block;
  width: 100%;
  height: 35px;
  line-height: 35px;
  font-weight: 300;
  font-size: 15px !important;
  font-family: 'Roboto',sans-serif;
}
.dateperfect-comparison-wrapper .site_link img {
   width: 14px !important;
   height: 13px !important;
   margin-left: 5px;
}
.dateperfect-comparison-wrapper .site_link:hover {
  text-decoration: none;
  background: #1a4a54; /* Old browsers */
  background: -moz-linear-gradient(top, #1a4a54 0%, #0e8495 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #1a4a54 0%,#0e8495 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #1a4a54 0%,#0e8495 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1a4a54', endColorstr='#0e8495',GradientType=0 ); /* IE6-9 */  
 
}
.dateperfect-comparison-wrapper td.noboder{
  border:none;
  padding: 0px 1px 0px 0px;
  vertical-align: top;
}
.dateperfect-comparison-wrapper table td.bottom-links {
 /* padding: 0px 0px 0px 8px;*/
}
ul.mobile-tab-links-top {
    display: flex;
    top: 0px;
    z-index: 10;
    list-style-type: none;
}
ul.mobile-tab-links-top li {
    list-style: none;
    flex: 1;
    margin-left: 0px!important;
}
ul.mobile-tab-links-top li.mobile-bg-red{
    border-right: 1px solid #e65f3a;
    font-size: 10px !important;
    clip-path: ellipse(59% 100% at 50% 100%);
    -webkit-clip-path: ellipse(59% 100% at 50% 100%);
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f58364+0,fe6840+100 */
    background: #ec6642; /* Old browsers */
    background: -moz-linear-gradient(top, #ec6642 0%, #d64b21 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ec6642 0%,#d64b21 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ec6642 0%,#d64b21 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ec6642', endColorstr='#d64b21',GradientType=0 ); /* IE6-9 */  
    color: #ffffff;
    font-weight: 300;
    text-align: center;
    font-family: 'Roboto',sans-serif;
    border:none;
}


/* Media Query*/
@media screen and (max-width: 1018px) { 
  .dateperfect-comparison-wrapper img.dp-comparison-icons, 
  .dateperfect-comparison-wrapper img.dp-sexual_orientation-icons, 
  .dateperfect-comparison-wrapper img.dp-miscellaneous-icons, 
  .dateperfect-comparison-wrapper img.dp-fetish_icons, 
  .dateperfect-comparison-wrapper img.dp-religion-icons, 
  .dateperfect-comparison-wrapper img.dp-lifestyle-icons, 
  .dateperfect-comparison-wrapper img.dp-platform-icons {
    width: 25px;
  }
  .bg-red {
    clip-path: ellipse(84% 100% at 50% 100%);
    -webkit-clip-path: ellipse(84% 100% at 50% 100%);
  }
    
}
@media screen and (max-width: 767px) { 
  article.dateperfect-comparison-wrapper .dateperfect-comparison-sitename {
    display: none;
  }
}

@media screen and (max-width: 740px) {
  ul.mobile-tab-links-top li.mobile-bg-red {
      clip-path: ellipse(66% 100% at 50% 100%);
       -webkit-clip-path: ellipse(66% 100% at 50% 100%);
  }
}
@media screen and (max-width: 414px) {
  ul.mobile-tab-links-top li.mobile-bg-red {
      clip-path: ellipse(74% 100% at 50% 100%);
       -webkit-clip-path: ellipse(74% 100% at 50% 100%);
  }
}


@media (min-width: 767px) {
  ul.mobile-tab-links {
    display:none;
  }
  ul.mobile-tab-links-top {
    display:none;
  }
  
  article.dateperfect-comparison-wrapper td, article.dateperfect-comparison-wrapper th {
    display:table-cell !important;
  }
  article.dateperfect-comparison-wrapper td, article.dateperfect-comparison-wrapper th {
    width: 330px;
  
  }
  article.dateperfect-comparison-wrapper td+td, article.dateperfect-comparison-wrapper th+th {
    width: auto;
  }
  
}