/*
====================================================
  Name : Osthir
  Version    :  1.1
  Author     :  Roman Ahmed
  Author URI :  https://codecanyon.net/user/desroman
====================================================

   TOC:
  =======

  1. Style - 7

  2. Button Hover Effect

  3. Item Hover Effect

===================================================== */

/* --------------------------------- */
/* 1. Style - 7
 ----------------------------------- */

#pricing-tbl-7 h3,
#pricing-tbl-7 ul,
#pricing-tbl-7 li,
#pricing-tbl-7 a,
#pricing-tbl-7 p{ margin:0; }
#pricing-tbl-7 h3{ word-wrap: break-word;color: white;}
#pricing-tbl-7 li,
#pricing-tbl-7 h3, 
#pricing-tbl-7 a{ font-family: 'Roboto', sans-serif; }
#pricing-tbl-7 p{ font-family: 'Fira Sans', sans-serif; }

#pricing-tbl-7 .pricing-item{ position:relative; margin-top:40px; margin-bottom:40px;
	text-align:center; z-index:0; border-radius:2px 2px 0 0; box-shadow:0px 0px 5px 1px rgba(0,0,0,.1); }

#pricing-tbl-7 .pricing-header{ position:relative;  padding:15px 20px 10px; text-transform:uppercase; 
	background:none; }
#pricing-tbl-7 .pricing-header h3{ font-size:1.4em; font-weight:600; }
#pricing-tbl-7 .pricing-header p{ font-size:.9em; padding-top:3px; }

#pricing-tbl-7 .pricing-area{ position:relative; padding:10px 5px; border:20px solid rgba(0,0,0,.4);
	border-top:0; border-bottom:0; background:rgba(100,100,100,.5); 
	background-image:linear-gradient(65deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,.3) 100%); }

#pricing-tbl-7 .pricing-area p{ color:#fff; padding:0px; }
#pricing-tbl-7 .pricing-area p .before-price{ font-size:1.4em; text-decoration:line-through;
	position:relative; left:-5px; padding:0px 5px 0px 0px; }
	
#pricing-tbl-7 .pricing-area p.saving{ font-size:.9em; text-transform:uppercase; padding:3px 0 3px 20px; }
#pricing-tbl-7 .pricing-area p .price-label{ font-size:2.14em; font-weight:600; line-height:1.2; letter-spacing:.5px; }
#pricing-tbl-7 .pricing-area p .month-label{ font-size:1.2em; }

#pricing-tbl-7 .pricing-body ul{ padding:10px 0px ; list-style:none; background-color:rgba(10,10,10,.01); }
#pricing-tbl-7 .pricing-body ul > li{ color:#fff; padding:8px 25px; margin:7px 0px;
	text-transform:capitalize; position:relative; background:rgba(0,0,0,.3); }
	
#pricing-tbl-7 .pricing-body ul > li:before{ content:''; display:block; position:absolute; z-index:-1;
	left:0; top:0; bottom:0; width:20px; background:rgba(0,0,0,.4); border-radius:0 2px 2px 0; }

#pricing-tbl-7 .pricing-body ul > li:after{ content:''; display:block; position:absolute; z-index:-1;
	right:0; top:0; bottom:0; width:20px; background:rgba(0,0,0,.4); 
	border-radius: 2px 0 0 2px; }
	
#pricing-tbl-7 .pricing-body ul > li b{ font-size:1.05em; }
    
#pricing-tbl-7 .pricing-footer{ background:rgba(60,60,60,.6); padding:20px; text-transform:uppercase; }


/* --------------------------------- */
/* 2. Button Hover Effect
 ----------------------------------- */

a.btn-5{ color:#fff; font-size:1.1em; position:relative; padding:8px; text-decoration:none; border-radius:1px;  
	display:block; z-index:1; box-shadow:1px 1px 5px 1px rgba(0,0,0,.1); transition:all .1s; }

a.btn-5:hover{ box-shadow:2px 3px 5px 1px rgba(0,0,0,.4); letter-spacing:.5px; }


/* --------------------------------- */
/* 3. Item Hover Effect
 ----------------------------------- */

#pricing-tbl-7 .pricing-item .pricing-body ul > li:after,
#pricing-tbl-7 .pricing-item .pricing-body ul > li:before{ transition: width .5s, height .5s;  }

#pricing-tbl-7 .pricing-item.active .pricing-body ul > li:nth-child(even):before,
#pricing-tbl-7 .pricing-item:hover .pricing-body ul > li:nth-child(even):before,
#pricing-tbl-7 .pricing-item.active .pricing-body ul > li:nth-child(odd):after,
#pricing-tbl-7 .pricing-item:hover .pricing-body ul > li:nth-child(odd):after{  width:100%; border-color: #FF3466; }