﻿



.pricingdiv{
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  justify-content: center;
 
}
   

.border-none{border: none !important;}

.pricingdiv ul.theplan{
  list-style: none;
  margin: 0;
  border-radius: 14px;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  color: #5d5d5d;
  width: 100%;
  margin-right: 20px; /* spacing between tables */
  margin-bottom: 1em;
  border: 1px solid rgb(200, 200, 200);
  transition: all .5s;
}

.pricingdiv ul.theplan:hover{ /* when mouse hover over pricing table */
 
  transition: all .5s;
  z-index: 100;
 /* box-shadow: 0 0 10px rgb(200, 200, 200);*/
  top: -5px;
}

.beforespan::before{
  color: green;
  content: "✓";
  margin-right: 10px;
}

}

.pricingdiv ul.theplan .center{
  margin: 0 auto;
  text-align: center;
}

.paddingstyle{
  padding: 3px 0px !important;
}

.textstyle{
  font-size: 14px;
  color: #6c6c6c;
  padding: 2px 0px 1px 0px !important;
}


.colr{
  color: #ff9700;
  font-weight: 500;
  font-size: 14px;
}
 
.nav .ul_lI{
  width: 48% !important;
  text-align: center;
  font-weight: 700;
  }


  .nav-pills .nav-link.active, .nav-pills .show>.nav-link {
 
    white-space: inherit !important;
}

.pricingdiv ul.theplan img{
  max-width: 80%;
  height: auto;
}

.pricingdiv ul.theplan li{
  padding:  10px 10px;
  position: relative;
  border-bottom: 1px solid #eee;
}

.bm-none{
  border-bottom: none !important;
}

.fSize{font-size: 34px;}

.pricingdiv ul.theplan li.title{
  font-weight: bold;
  text-align: center;
      margin: 0px 14px;
    top: -14px;
  
    position: absolute;

  background: linear-gradient(180deg,#f57a1a 0,#e35802);
  color: white;
  box-shadow: 0 -10px 5px rgba(0,0,0,.1) inset;
  text-transform: uppercase;
  border-radius: 10px;
  border: none;
}

.pricingdiv ul.theplan:nth-of-type(2) li.title_package{
  background: rgb(249, 111, 118);
  color: white;
  position:absolute;
}
    
.pricingdiv ul.theplan:nth-of-type(3) li.title_package{
  background: rgb(210, 117, 251);
  color: white;
}
 
.pricingdiv ul.theplan li.title_package b{
  font-size: 250%;
}

.pricingdiv ul.theplan:last-of-type{ 
  margin-right: 0;
}

/*very last LI within each pricing UL */
.pricingdiv ul.theplan li:last-of-type{
  text-align: center;
  margin-top: auto;  
}  

.pricingdiv a.pricebutton{
  letter-spacing: 1px;
    text-decoration: none;
    display: inline-block;
    margin: 10px auto;
    color: white;
    border-radius: 5px;

    box-shadow: inset 0 1px 0 hsla(0,0%,100%,.2);
    width: 100%;
   
  
  padding: 10px;
 
}



@media only screen and (max-width: 600px) {
  .pricingdiv ul.theplan{
    border-radius: 0;
    width: 100%;
    margin-right: 0;
  }
  
  .pricingdiv ul.theplan:hover{
    transform: none;
    box-shadow: none;
  }
  
  .pricingdiv a.pricebutton{
    display: block;
  }
}



.theplan{background: #fff;}


@media(max-width: 768px){
  .p-custom{
        padding: 0px !important;
  }

.Cumb{position: relative !important;}
}

  .p-custom{
        padding: 0 30px;
  }

  .beforespan_close::before{

 color: red;
  content: "✕";
  margin-right: 10px;

}


.tab_4{
      background: #fff;
    padding: 10px 5px;
        border-radius: 15px;
}


.dfault_bg{
/*box-shadow: 0px 5px 5px #ccc;*/
      border-radius: 15px;
}

.Cumb{    position: absolute;
    padding: 5px 10px;
    color: #888;}

    .pricingdiv ul.theplan li.title_package{

      font-weight: bold;
    text-align: center;
    margin: 0px 14px;
    
    position: absolute;
    background: #ff9700;
    color: white;
    box-shadow: 0 -10px 5px rgb(0 0 0 / 10%) inset;
    text-transform: uppercase;
    border-radius: 10px;
    border: none;
    }



    @media only screen and (max-width: 600px){
.pricingdiv ul.theplan {
    border-radius: 10px;
    width: 100%;
    margin-right: 0;
}}

 
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
  40% {-webkit-transform: translateY(-15px);}
  60% {-webkit-transform: translateY(-15px);}
}
 
@-moz-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
  40% {-moz-transform: translateY(-15px);}
  60% {-moz-transform: translateY(-15px);}
}
 
@-o-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
  40% {-o-transform: translateY(-30px);}
  60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
  40% {transform: translateY(-15px);}
  60% {transform: translateY(-15px);}
}


.bounce {
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  -ms-border-radius:50%;
  border-radius:50%;

}

.theplan:hover .bounce{

	
    animation: bounce 2s;
-webkit-animation: bounce 2s;
-moz-animation: bounce 2s;
 -o-animation: bounce 2;
 /* -webkit-animation: bounce 2s infinite;
  -moz-animation: bounce 2s infinite;
  -o-animation: bounce 2s infinite;
animation: bounce 2s infinite;*/
}

.starFree_package{
      color: #626262 !important;
    border: 2px solid #5d5d5d !important;
    padding: 7px 30px !important;
    border-radius: 36px !important;
}


}


.lidisc{
  
  list-style: disc;
  margin-left: 23px;

}