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

   TOC:
  =======

  1. Style - 9

  2. Button Hover Effect

  3. Item Hover Effect

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

/* --------------------------------- */
/* 1. Style - 9
 ----------------------------------- */

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

#pricing-tbl-9 .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-9 .pricing-header{ position:relative; padding:15px 25px 10px; text-transform:uppercase; 
	background:none; }
#pricing-tbl-9 .pricing-header h3{ font-size:1.4em; font-weight:600; }
#pricing-tbl-9 .pricing-header p{ font-size:.95em; padding-top:3px; }

#pricing-tbl-9 .pricing-area{ position:relative; padding:5px 25px; 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-9 .pricing-area:before{ content:''; display:block; position:absolute; top:0; bottom:0;
	left:0; width:0px; background:rgba(0,0,0,.6); z-index:-1; }

#pricing-tbl-9 .pricing-area:after{ content:''; display:block; position:absolute; top:0; bottom:0;
	right:0; width:0px; background:rgba(0,0,0,.6); z-index:-1; }

#pricing-tbl-9 .pricing-area p{ color:#fff; padding:0px; }
#pricing-tbl-9 .pricing-area p .before-price{ font-size:1.4em; text-decoration:line-through;
	position:relative; left:-5px; padding:0px 5px 0px 0px; }

#pricing-tbl-9 .pricing-area p.saving{ font-size:.9em; text-transform:uppercase; padding:0px 0 5px 20px; }
#pricing-tbl-9 .pricing-area p .price-label{ font-size:3em; font-weight:600; line-height:1.2; letter-spacing:.5px; }
#pricing-tbl-9 .pricing-area p .month-label{ font-size:1.2em; }

#pricing-tbl-9 .pricing-body ul{ padding:10px 25px ;  list-style:none; 
	background-color:rgba(40,40,40,.01); }
	
#pricing-tbl-9 .pricing-body ul > li{ color:inherit; padding:7px 10px; margin:7px 0px 7px ;
	min-height:35px; text-transform:capitalize; position:relative; 
	border-bottom:1px solid; border-top:1px solid; border-color:inherit;
	overflow:hidden; }

#pricing-tbl-9 .pricing-body ul > li:before{ content:''; display:block; position:absolute;
	width:20px; height:20px;  bottom:0; left:-10px; 
	transform-origin:bottom right; transform:rotate(-35deg) ;  }
	
#pricing-tbl-9 .pricing-body ul > li:after{ content:''; display:block; position:absolute;
	width:20px; height:20px;  top:0; right:-10px;
	transform-origin:top left; transform:rotate(-35deg);  }
#pricing-tbl-9 .pricing-body ul > li b{ font-size:1.05em; }

#pricing-tbl-9 .pricing-footer{ background:rgba(60,60,60,.6); padding:20px 25px; 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-9 .pricing-item .pricing-area:before{ transition: all .5s; }

#pricing-tbl-9 .pricing-item.active .pricing-area:before,
#pricing-tbl-9 .pricing-item:hover .pricing-area:before{ width:100%; }