/**** switcher ****************/

.cd-pricing-switcher {
  text-align: center;
  height:70px;
}
.cd-pricing-switcher .fieldset {
  display: inline-block;
  position: relative;
  padding: 2px;
  border-radius: 50em;
  border: 1px solid #225b78;
  height:46px;
}
.cd-pricing-switcher input[type="radio"] {
  position: absolute;
  opacity: 0;
}
.cd-pricing-switcher label {
  position: relative;
  z-index: 1;
  display: inline-block;
  float: left;
  width: 90px;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  font-size: 1.4rem;
  color: #404040;
}
.cd-pricing-switcher .cd-switch {
  /* floating background */
  position: absolute;
  top: 2px;
  left: 2px;
  height: 40px;
  width: 90px;
  background-color: #ed78a6;
  border-radius: 50em;
  -webkit-transition: -webkit-transform 0.5s;
  -moz-transition: -moz-transform 0.5s;
  transition: transform 0.5s;
}
.cd-pricing-switcher input[type="radio"]:checked + label + .cd-switch,
.cd-pricing-switcher input[type="radio"]:checked + label:nth-of-type(n) + .cd-switch {
  /* use label:nth-of-type(n) to fix a bug on safari with multiple adjacent-sibling selectors*/
  -webkit-transform: translateX(90px);
  -moz-transform: translateX(90px);
  -ms-transform: translateX(90px);
  -o-transform: translateX(90px);
  transform: translateX(90px);
}

/***********************************/

.pricingTable{
    background-color: #f2f2f2;
    font-family: 'Krub', sans-serif;
    text-align: center;
    padding: 0 30px 10px;
    margin: 0 30px;
    border-radius: 5px 5px 200px 200px;
    border: 1px solid rgba(0,0,0,0.03);
    position: relative;
    z-index: 1;
    transition: all 0.3s;
}
.pricingTable:hover{ box-shadow: 0 0 15px rgba(0,0,0,0.2); }
.pricingTable:before,
.pricingTable:after{
    content: '';
    background: linear-gradient(-45deg, #2a9926 49%, transparent 50%);
    width: 14px;
    height: 14px;
    position: absolute;
    left: 16px;
    top: -15px;
    z-index: -1;
}
.pricingTable:after{
    background: linear-gradient(45deg, #2a9926 49%, transparent 50%) ;
    left: auto;
    right: 16px;
}
.pricingTable .pricingTable-header{
    color: var(--white);
    background: linear-gradient(135deg,#53BD50 25%,#68c950 26%,#68c950 40%,
              #53BD50 41%,#53BD50 47%,#68c950 48%, #68c950 60%, #53BD50 61%);
    padding: 15px 0 50px;
    margin: -15px 0 0;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 50% 80%, 0 100%, 0 0);
    clip-path: polygon(100% 0, 100% 100%, 50% 80%, 0 100%, 0 0);
    transition: all 0.3s;
}
.pricingTable:hover .pricingTable-header{ text-shadow: 0 0 2px var(--black); }
.pricingTable .title{
    font-size: 30px;
    text-transform: uppercase;
    margin: 0 0 5px;
}
.pricingTable .currency{
    display: inline-block;
    font-size: 30px;
    vertical-align: top;
}
.pricingTable .amount{
    display: inline-block;
    font-size: 45px;
    font-weight: 600;
    line-height: 40px;
}
.pricingTable .amount-sm{
    display: inline-block;
    font-size: 25px;
    margin-left: -3px;
}
.pricingTable .pricing-icon{
    color: #606060;
    font-size: 55px;
    line-height: 60px;
    transition: all 0.3s;
}
.pricingTable:hover .pricing-icon{ transform: rotateY(360deg) rotate(360deg); }
.pricingTable .pricing-content{
    padding: 0;
    margin:0 0 20px;
    list-style: none;
    display: inline-block;
}
.pricingTable .pricing-content li{
    color: #505050;
    font-size: 11px;
    font-weight: 600;
    line-height: 38px;
    text-transform: capitalize;
    letter-spacing: 1px;
    border-bottom: 2px solid #d1d1d1;
}

.pricingTable .pricing-content li .gratuit{
    color: #50F050;
    background-color: yellow;
}
.pricingTable .pricing-content li .renew{
    color: #F05050;
    font-size: 10px;
}

.pricingTable .pricingTable-signup{
    color: var(--white);
    background: linear-gradient(135deg,#53BD50 25%,#68c950 26%,#68c950 40%,
              #53BD50 41%,#53BD50 47%,#68c950 48%, #68c950 60%, #53BD50 61%);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
    line-height: 95px;
    height: 100px;
    width: 100px;
    margin: 0 auto;
    border-radius: 50%;
    border: 3px solid var(--white);
    display: block;
    transition: all 0.3s;
}
.pricingTable .pricingTable-signup:hover{
    box-shadow: 0 0 10px var(--black);
    text-shadow: 0 0 5px var(--black);
}
.pricingTable.blue:before{
    background: linear-gradient(-45deg, #097da0 49%, transparent 50%) ;
}
.pricingTable.blue:after{
    background: linear-gradient(45deg, #097da0 49%, transparent 50%) ;
}
.pricingTable.blue .pricingTable-header,
.pricingTable.blue .pricingTable-signup{
    background: linear-gradient(135deg,#00A7E8 25%,#28baef 26%,#28baef 40%,
               #00A7E8 41%,#00A7E8 47%,#28baef 48%, #28baef 60%, #00A7E8 61%);
}
.pricingTable.red:before{
    background: linear-gradient(-45deg, #b53117 49%, transparent 50%) ;
}
.pricingTable.red:after{
    background: linear-gradient(45deg, #b53117 49%, transparent 50%) ;
}
.pricingTable.red .pricingTable-header,
.pricingTable.red .pricingTable-signup{
    background: linear-gradient(135deg,#FC5430 25%,#f96852 26%,#f96852 40%,
              #FC5430 41%,#FC5430 47%,#f96852 48%, #f96852 60%, #FC5430 61%);
}
@media only screen and (max-width: 990px){
    .pricingTable{ margin: 0 0 30px; }
}
@media only screen and (max-width: 576px){
    .pricingTable{ padding: 0 15px 10px; }
    .pricingTable:before{ left: 1px; }
    .pricingTable:after{ right: 1px; }
    .pricingTable .pricing-content li{
        font-size: 15px;
        padding: 0;
    }
}