Sid Gifari File Manager

Sid Gifari File Manager

🏠 Root / home / ailwtbdh / superstepsgroup.com / wp-content / themes / reobiz / assets / css /

Editing: price_table.less

/**
 * @package CL Price Table
 * @author ThemeChoice http://www.codesless.com
 * @copyright Copyright (c) 2017 CL Price Table
 * @license http://www.codesless.com or later
*/

/*=======================================*
 *======= 	TABLE OF CONTENT	 ========*
 *=======================================*

01. Common Css	
	02. Price table style1 CSS
	03. Price table style2 CSS
	04. Price table style3 CSS
	05. Price table style4 CSS
	06. Price table style5 CSS
	07. Price table style6 CSS
	08. Price table style7 CSS
	09. Price table style8 CSS
	10. Price table style9 CSS
	11. Price table style10CSS
	12. Price table style11 CSS
	13. Price table style12 CSS
	14. Price table style13 CSS
	15. Price table style14 CSS
	16. Price table style15 CSS
	
=======================================*/

/*=======================================*
 *======= 	Common Css	 ========*
 *=======================================*/
@primary-color: #7F352F;
@underline-color: #d32f2f;
@sevice-bg-color: #ccc;
@a-hover: #222;
@title-color: #7F352F;
@skill_bar_color: #7F352F;
@transition: all 0.4s ease-in-out 0s;

.btn-table{
	border:0px;
	box-shadow: 0 0 0 !important;
}
.hide{
	display: none;
}

.bottom, .featured{
	text-align: center;

}

.bottom p,
.featured
 {
	margin:0px;
	padding: 0;
}

.btn-code{
	padding-top: 15px;
}

.icon-align-right{
	ul{
		li{
			position: relative;
			i{
				position: absolute;
				right: 5px;
				top: 10px;
			}
		}
	}
	
}

/*=======================================*
 *======= Start Pricing Table Css	 ========*
 *=======================================*/
.clpricing-table  {
		.water-mark{
			position: absolute;
			left: 50%;
			top: 35%;
			transform: translate(-50%, -65%);
			max-width: 120px;
			img{
				opacity: 0.12;
			}
		}
		.cl-pricetable-wrap .bottom{
			position: relative;
		}
		.pricing-title{
			margin-bottom: 20px;
		}

h6{
			font-weight: normal;
			padding: 0 34px
		}
		ul{
			padding: 0;
			margin: 0;
			list-style: none;
		}
		a{
			&:hover{
				text-decoration:none;
			}
		}
		.cl-pricetable-wrap{			  		
    		@media screen and (max-width: 767px){
    			margin-bottom: 30px;
    			margin-top: 30px;
    		}
		}
		.main-header{
			padding: 55px 0 40px;

h2{
				font-size: 48px;
				color: #000;
				font-weight: 500;
				text-transform: uppercase;
				padding-bottom: 30px;
				line-height: 48px;
			}
		}
		h3,
        h4{			
			font-size: 20px;			
			font-weight: 600 !important;
			margin: 0 0 5px;
		}
		h5{		
			font-size: 15px;
			font-weight: normal;
			margin: 0 0 5px;			
			padding:0;
		}
		a.btn-table{
			text-decoration: none;
		}

/*=======================================*
 *======= Price table style1 CSS	 ========*
 *=======================================*/
  	.cl-pricetable-wrap,
  	.price-table{
  		position: relative;
  	}
	.price-table.style1{
		background: #fff;
		border: 1px solid #ebebeb;
		.pricing-title{
		    font-size: 30px;
		    font-weight: 600;
		    padding-bottom: 18px;
		    text-transform: uppercase;
		}
		.cl-pricetable-wrap{
			position: relative;
			overflow: hidden;
			background-size: cover !important;
			.top{
				text-align: center;
				padding: 0 8px;
				.cl-header{
					.price-title{
						margin-bottom: 20px;
						margin-top: 0;
						padding: 0px 0 0;
						font-size: 20px;
						line-height: 35px !important;
					}
				}
				.price-icon{
					display: block;
					padding-bottom: 25px;
				}
				h3{
					margin: 15px 0 0px;
    				display: inline-block;
				    font-size: 65px;
				    font-weight: 600 !important;
				    line-height: 70px !important;
					.dolar{
						bottom: 24px;
					    font-size: 30px;
					    font-weight: 300;
					    padding-right: 3px;
					    position: relative;
					}
				}
				h6{
					margin-top: 10px;
					padding-top: 0px;
					font-weight: normal !important;
					color: #898989;
					font-size: 13px;
					margin: 0 0 10px;
				}
				h5{
					font-size: 18px;
				    font-weight: 300 !important;
				    text-transform: lowercase;
				    display: inline-block;
				}
               .cl-subheader{
					.short-desc{
						font-size: 18px;
					    padding-bottom: 38px;
					    text-transform: initial;
					    font-weight: 400;
					}
				}
				.popular{
					background: #101010;
					color: #fff;
					font-size: 12px;
					left: -46px;
					padding: 28px 36px 6px;
					position: absolute;
					text-transform: lowercase;
					top: -14px;
					transform: rotate(-50deg);
					box-shadow: 0px 5px 40px 0px rgba(230, 230, 230, 0.2);
			    }				
				&:after{
					content:'';
				    position:absolute;
				    bottom:0;
				    left:0;
				}				
			}
			.bottom{
				padding-top: 25px;

display: block;
				margin: 0 auto;
				ul{
					text-align: center;
					padding-bottom: 30px;
					li{
						font-weight: 400;
						padding: 6px 12px;
						position: relative;
						strong{
							font-weight: 400;
						}
						.highlight{
							color: #000;
						}
						
						.feature_icon{
							margin-left: 10px;
							margin-right: 10px;
						}
						.tooltip{
							position: relative !important;
						    display: inline-block;
						    opacity: 1 !important;
						    z-index: auto !important;
						}
						.tooltip:after {
							font-family:'FontAwesome';
							font-size: 13px;
						    content: "\f059";
						    position: absolute;
						    top: -20px;
						}
						.tooltip .tooltiptext {
						    background-color: #555555;
							border-radius: 6px;
							color: #ffffff;
							font-size: 11px;
							left: -102px;
							line-height: 18px;
							overflow: visible;
							padding: 10px;
							position: absolute;
							text-align: center;
							top: 0;
							visibility: hidden;
							width: 114px;
							z-index: 1;
						}
						.tooltip:hover .tooltiptext {
						    visibility: visible;
						}
					}

}
				.btn-table{
				    margin: 12px auto 0;				   
				    width: 100%;
				    max-width: 150px;
				    height: 48px;
				    line-height: 48px;	
				    display: block;
				    font-size: 15px;
				    font-weight: 600;
				    text-align: center;	
				    border-radius: 30px;
				    text-transform: uppercase;	
				    border: 1px solid #7069cf;	    
				}
				p{
						margin-bottom: 0px;
				}
			}
			&.featured{
				position: relative;
			}
		}
		.price-1{
			background: #f9f9f9;
			.top{
				color: #f44336;
				h4, h5, h3{
					color: #f44336;
				}
				.cl-subheader{
					color: #ffffff;
				}
			}
			.bottom{
				background: #eeeeee; 
   				color: #ffffff;
			}
			.btn-table{
				
				color: #ffffff !important;
				background: #f44336;
			}
		}
		.price-style2{
			background: #f9f9f9;
			.top{
				color: #e91e63;
				h4, h5, h3{
					color: #e91e63;
				}
				.cl-subheader{
					color: #eeeeee;
				}
			}
			.bottom{
				background: #eeeeee; 
   				color: #ffffff;
			}
			.btn-table{
				
				color: #ffffff !important;
				background: #e91e63;
			}
		}
		.price-3{
			background: #f9f9f9;
			.top{
				color: #9c27b0;
				h4, h5, h3{
					color: #9c27b0;
				}
				.cl-subheader{
					color: #ffffff;
				}
			}
			.bottom{
				background: #eeeeee; 
   				color: #ffffff;
			}
			.btn-table{
				
				color: #ffffff !important;
				background: #9c27b0;
			}
		}
	}

/*=======================================*
 *======= Price table style2 CSS	 ========*
 *=======================================*/
	.price-table.style2{
		.pricing-title{
		    font-size: 30px;
		    font-weight: 600;
		    padding-bottom: 18px;
		    text-transform: uppercase;
		}
		.cl-pricetable-wrap{
		    text-align: center;
		    background: #ffffff none repeat scroll 0 0;
		    color: #333333;
		    margin-right: 0;
		    padding: 20px;
		    position: relative;
		    box-shadow: 0px 5px 40px 0px rgba(230, 230, 230, 0.5);
		    padding-bottom: 20px !important;
		    overflow: hidden;
		    border: none !important;
		    .popular{
				background: #d32f2f;
				color: #ffffff;
				font-size: 12px;
				left: -42px;
				padding: 28px 34px 6px;
				position: absolute;
				text-transform: lowercase;
				top: -12px;
				transform: rotate(-50deg);
		    }
		    &:hover{
				.dolar{
					transform:rotate(360deg);
					transition: all 1s !important;
				}
			}
			.top{
				padding-bottom: 20px;
				.cl-header{
					h3{
					    font-size: 20px;
					    font-weight: 600;
					    margin: -20px -20px 85px;
					    padding: 65px 20px 40px;
					    line-height: 24px;
					    background-size: cover !important;
					    .dolar{
						    border-radius: 100px;
						    box-shadow: 0 5px 20px #dddddd inset, 0 3px 0 #999999 inset;
						    display: block;
						    font: bold 30px/100px Georgia,serif;
						    height: 100px;
						    margin: 60px auto -100px;
						    width: 100px;
						    transition: all .5s;
						    line-height: 85px;
					    }
					}
				}
				.btn-table{
					border-radius: 35px;
					display: block;
					font-size: 15px;
					font-weight: 600;
					margin: 0 auto;
					max-width: 150px;
					height: 48px;
					line-height: 48px;
					text-shadow: none;
					border: none;
				    &:before{
    					border-radius: 5px;
				    }
				    &:hover{
				    	color: #fff !important;
				    }
				}			
			}
			.bottom{
				ul{
					text-align: center;
					li.show{						
				    	border-radius: 8px;
				    	outline: none;
				    	padding: 12px 20px 12px 10px;
				    	background: #f4f4f4;
				    	width: 100%;				    	
				    	margin-bottom: 15px;
				    	&:before{
				    		-moz-border-bottom-colors: none;
						    -moz-border-left-colors: none;
						    -moz-border-right-colors: none;
						    -moz-border-top-colors: none;
						    border-bottom: 9px solid rgba(0, 0, 0, 0);
						    border-image: none;
						    border-left-color: inherit;
						    border-right: 9px solid rgba(0, 0, 0, 0);
						    border-style: solid;
						    border-top: 9px solid rgba(0, 0, 0, 0);
						    border-width: 9px;
						    content: "";
						    margin-top: 2px;
						    position: absolute;
						    right: 24px;
						    transition:all .38s ease;
				    	}
					}
					li.open{
					    	&:before{
					    		margin-top: 8px;
							    position: absolute;
							    right: 32px;
							    transform: rotate(90deg) !important;
					    	}
					    }
					li{
					    line-height: 24px;
    					font-weight: 400;
					    padding: 8px 0;
					    overflow: hidden;
					}
				}
			}
		}
		.price-1{
			background: #ffffff;
			border: 1px solid #26a69a;
			.top{
				color: #ffffff;
				h4, h5, h3{
					color: #ffffff;
				}
				.cl-header{
					h4{
						background: #26a69a;
					}
					.dolar{
						background: #ffffff;
						border: 5px solid #ffffff;
						color: #26a69a;
					}
				}
			}
			.bottom{
   				color: #777777;
   				li{
   					button{
   						border-left:  5px solid #26a69a !important; 
   					}
   				}
			}
			.btn-table{				
	   			color: #1d2127;
				background: #0c1f28;
				&:before{
					background: #26a69a !important;
				}
			}
		}
		.price-style2{
			background: #ffffff;
			border: 1px solid #f9a825;
			.top{
				color: #ffffff;
				h4, h5, h3{
					color: #ffffff;
				}
				.cl-header{
					h4{
						background: #f9a825;						
					}
					.dolar{
						background: #ffffff;
						border: 5px solid #ffffff;
						color: #f9a825;
					}
				}
			}
			.bottom{
   				color: #777777;
   				li{
   					button{
   						border-left:  5px solid #f9a825 !important; 
   					}
   				}
			}
			
		}
		.price-3{
			background: #ffffff;
			border: 1px solid #795548;
			.top{
				color: #ffffff;
				h4, h5, h3{
					color: #ffffff;
				}
				.cl-header{
					h4{
						background: #795548;
					}
					.dolar{
						background: #ffffff;
						border: 5px solid #ffffff;
						color: #795548;
					}
				}
			}
			.bottom{
   				color: #777777;
   				li{
   					button{
   						border-left:  5px solid #795548 !important; 
   					}
   				}
			}
			.btn-table{
				
	   			color: #1d2127;
				&:before{
					background: #795548 !important;
				}
			}
		}

}

/*=======================================*
 *======= Price table style3 CSS	 ========*
 *=======================================*/
	.price-table.style3{
		.pricing-title{
		    font-size: 30px;
		    font-weight: 600;
		    padding-bottom: 18px;
		    text-transform: uppercase;
		}
		 .price-style3{
		    	margin-bottom: 35px !important;
		    }
		.featured p{
			display: none;
		}
		.col-md-12, .col-sm-6{
			-moz-box-direction: normal;
    		display: flex;
    		padding: 0;
    		width: 100%;
    		margin-top: 40px;
    		@media screen and (max-width: 1000px){
		    	display:block;
		    	width: 100%;
		    }
		}

.cl-pricetable-wrap{
		    text-align: center;
		    color: #333333;
		    margin-bottom: 0px;
		    margin-right: 0;
		    position: relative;
		    border-radius: 0;
		    transition: all 0.4s ease-in-out 0s;
		    width: 100%;
		    overflow: hidden;

.popular{
				background: #d32f2f;
			    color: #ffffff;
			    font-size: 12px;
			    left: -42px;
			    padding: 28px 34px 6px;
			    position: absolute;
			    text-transform: lowercase;
			    top: -12px;
			    transform: rotate(-50deg);
		    }
		    @media screen and (max-width: 1000px){
		    	max-width:500px;
		    	margin: 0 auto;
		    	padding: 0;
		    }
			.top{
				display: table;
			    float: left;
			    height: 100%;
			    padding-bottom: 0;
			    width: 33.33%;
			    @media screen and (max-width: 1000px){
			    	display:block;
			    	width: 100%;
			    	float:none;
			    	padding: 30px 10px;
			    }
				.cl-header{
					display: table-cell;
					vertical-align: middle;
					@media screen and (min-width: 1001px){
						height: 291px
					}
					@media screen and (max-width: 1000px){
						display:block;
					}
					h4{
					    border-radius: 2px 2px 0 0;
					    font-size: 22px;
					    font-weight: normal;
					    line-height: 30px;
					}
				}
						
			}
			.featured{
				width: 33.33%;
				float: left;
				padding: 50px 0 50px 80px;
				background: #eeeeee;
				@media screen and (max-width: 1000px){
			    	width: 100%;
			    	float:none;
			    }
				ul{
					text-align: left;
					li{
					    line-height: 24px;
					    font-size: 15px;
    					font-weight: 400;
					    padding: 4px 0;
					    color: #363636; 
					    .feature_icon{
							margin-left: 0px;
							margin-right: 10px;
						}
						.tooltip{
							position: relative !important;
						    display: inline-block;
						    opacity: 1 !important;
						    z-index: auto !important;
						}
						.tooltip:after {
							font-family:'FontAwesome';
							font-size: 13px;
						    content: "\f059";
						    position: absolute;
						    top: -20px;
						}
						.tooltip .tooltiptext {
						    background-color: #555555;
							border-radius: 6px;
							color: #ffffff;
							font-size: 11px;
							left: -0;
							line-height: 18px;
							overflow: visible;
							padding: 10px;
							position: absolute;
							text-align: center;
							top: 0;
							visibility: hidden;
							width: 114px;
							z-index: 1;
						}
						.tooltip:hover .tooltiptext {
						    visibility: visible;
						}
					}
				}
			}
			.bottom{
				width: 33.33%;
				float: left;
				height: 100%;
				display: table;
				@media screen and (max-width: 1000px){
			    	width: 100%;
			    	float:none;
			    	display: block;
			    	padding: 0 0 31px;
			    }
				.cl-footer{
					display: table-cell;
					vertical-align: middle;
					@media screen and (min-width: 1001px){
						height: 291px;
					}
					@media screen and (max-width: 1000px){
				    	display:block;
				    }
					.dolar {
						font: 700 35px/74px Georgia,serif;
					}
					.btn-table{
					    border-radius: 5px;
					    display: block;
					    font-size: 16px;
					    font-weight: 600;
					    margin: 0 auto;
					    padding: 8px 0;
					    text-transform: uppercase;
					    max-width: 150px;
					    //border: 2px solid #ffffff !important;
	   					color: #ffffff;	
					    &:before{
					    	background: #ffffff;
					    	border-radius: 0 !important;
					    }
					    &:hover{
					    	color: #000000 !important;
					    }
					}
				}
			}
			&:hover{
				-webkit-transform: scale(1.1);
				    transform: scale(1.1);
				@media screen and (max-width: 1000px){
					margin: 0 auto;
				}
			   
			}	
		}
		.price-1{
			.top{
				color: #EEEEEE;
				background:#3873b3;
				.cl-header{
					h4{
						background: #3873b3;
					}
				}
				
			}
			.featured{
				color: #363636;
				background:#eeeeee;
				.fa{
					color:#3873b3;
				}
			}
			.bottom{
				color: #363636;
	   			background:#3873b3;
	   			.dolar{
	   				color: #ffffff;
	   			}
			}
		}
		.price-style2{
			.top{
				color: #EEEEEE;
				background:#36cccb;
				.cl-header{
					h4{
						background: #36cccb;
					}
				}
				
			}
			.featured{
				color: #363636;
				background:#eeeeee;
				.fa{
					color:#36cccb;
				}
			}
			.bottom{
				color: #363636;
	   			background:#36cccb;
	   			.dolar{
	   				color: #ffffff;
	   			}
			}
		}
		.price-3{
			.top{
				color: #EEEEEE;
				background:#32a144;
				.cl-header{
					h4{
						background: #32a144;
					}
				}
				
			}
			.featured{
				color: #363636;
				background:#eeeeee;
				.fa{
					color:#32a144;
				}
			}
			.bottom{
				color: #363636;
	   			background:#32a144;
	   			.dolar{
	   				color: #ffffff;
	   			}
			}
		}
	}

/*=======================================*
 *======= Price table style4 CSS	 ========*
 *=======================================*/
	.price-table.style4{
		border-radius: 3px 3px 40px 40px;
		.pricing-title{
		    font-size: 30px;
		    font-weight: 600;
		    padding-bottom: 18px;
		    text-transform: uppercase;
		    margin-top:  55px;
		}
		.cl-col-md-4{
			padding: 0;
			&:nth-child(odd){
				.cl-pricetable-wrap{
					border: 3px solid #e97d68;
					padding-bottom: 35px;
				}
			}
			@media screen and (max-width: 991px){
				padding: 0 10px;
			}
		}
		.cl-pricetable-wrap{
		    border-radius: 0;
		    padding-bottom: 40px;
		    position: relative;
		    overflow: hidden;
		    box-shadow: 0px 5px 40px 0px rgba(230, 230, 230, 0.5);
		    padding: 10px 0 5px !important;
		    margin-top: 20px;
		    transition: @transition;		    
		    &.featured,
		    &:hover{
		    	padding: 30px 0 25px !important;
		    	margin-top: 0px;
		    }
		    &.featured{
		    	border-radius: 3px 3px 40px 40px;
		    }
			.top{
				text-align: center;
				padding-bottom: 0px;
				transition: @transition;
				.cl-header{
					.price-title{
					    font-size: 20px;
					    margin-bottom: 0;
					    margin-top: 0;
					    padding: 10px 0 0px;
					    transition: @transition;
					}
				}
				.price-icon{
					padding: 20px;
					max-width: 90px;
					border-radius: 100%;
					height: 90px;
					margin: 30px auto 0;
				}
				h3{
					margin: 4px 0 0px;
    				display: inline-block;
				    font-size: 65px;
				    font-weight: 600;
				    line-height: 70px !important;
					.dolar{
						bottom: 24px;
					    font-size: 22px;
					    font-weight: 800;
					    padding-right: 3px;
					    position: relative;
					}
				}
				h5{
					font-size: 18px;
				    font-weight: 600;
				    text-transform: lowercase;
				    display: inline-block;
				}
				h6{
					margin-top: 10px;
					font-weight: normal;
					padding-top: 0;
				}
               .cl-subheader{
					.short-desc{
						font-size: 18px;
					    padding-bottom: 38px;
					    text-transform: initial;
					    font-weight: 400;
					}
				}
				.popular{
					background: #d32f2f;
					color: #ffffff;
					font-size: 15px;
					left: -62px;
					padding: 10px 70px 10px;
					position: absolute;
					text-transform: none;
					top: 44px;
					transform: rotate(-50deg);
			    }			
				&:after{
					content:'';
				    position:absolute;
				    bottom:0;
				    left:0;
				}			
			}
			.bottom{
	   			color: #eeeeee;
				ul{
					text-align: center;
					li{
						//text-transform: uppercase;
						padding: 8px 0;
						.highlight{
							color: #000;
						}
					}
				}
				.feature_icon{
					margin-left: 0px;
					margin-right: 10px;
				}
				.tooltip{
					position: relative !important;
				    display: inline-block;
				    opacity: 1 !important;
				    z-index: auto !important;
				}
				.tooltip:after {
					font-family:'FontAwesome';
					font-size: 13px;
				    content: "\f059";
				    position: absolute;
				    top: -20px;
				}
				.tooltip .tooltiptext {
				    background-color: #555555;
					border-radius: 6px;
					color: #ffffff;
					font-size: 11px;
					left: -100px;
					line-height: 18px;
					overflow: visible;
					padding: 10px;
					position: absolute;
					text-align: center;
					top: 0;
					visibility: hidden;
					width: 114px;
					z-index: 1;
				}
				.tooltip:hover .tooltiptext {
				    visibility: visible;
				}
				.btn-table{
					background: #0c1f28;
					color: #ffffff;
					display: block;
					font-size: 15px;
					font-weight: 600;
					margin: 30px auto 40px;
					padding: 0px 35px;
					text-align: center;
					text-transform: uppercase;
					width: 150px;
					height: 48px;
					line-height: 51px;
				    &:before{
				    	background: #d32f2f;
				    	border-radius: 8px;
				    }
				}
			}
		}
		.price-1{
			.top{
				color: #000000;
				h3, h4, h5{
					color: #000000;
				}
			}
			.btn-table{
				
				background: #000000 !important;
			}
		}
		.price-style2{
			.top{
				color: #e97d68;
				h3, h4, h5{
					color: #e97d68;
				}
			}
			.btn-table{
				
				background: #e24747 !important;
			}
		}
		.price-3{
			.top{
				color: #9c56b8;
				h3, h4, h5{
					color: #9c56b8;
				}
			}
			.btn-table{
				
				background: #9c56b8 !important;
			}
		}
	}

/*=======================================*
 *======= Price table style5 CSS	 ========*
 *=======================================*/
	.price-table.style5{
		.pricing-title{
		    font-size: 30px;
		    font-weight: 600;
		    padding-bottom: 18px;
		    text-transform: uppercase;
		}
		.cl-col-md-4{
			padding: 0;
			@media screen and (max-width: 991px){
				padding: 0 10px;
			}
		}
		.cl-pricetable-wrap{
		    border-radius: 0;
		    padding-bottom: 0px;
		    position: relative;
		    overflow: hidden;
		    .popular{
				background: #d32f2f;
			    color: #ffffff;
			    font-size: 12px;
			    left: -42px;
			    padding: 28px 34px 6px;
			    position: absolute;
			    text-transform: lowercase;
			    top: -12px;
			    transform: rotate(-50deg);
		    }
			.top{
				text-align: center;
				.cl-header{
					h4{
					    font-size: 22px;
					    margin-bottom: 0;
					    margin-top: 0;
					    padding: 34px 0 0;
					}
				}
				h3{
					margin: 4px 0 0px;
    				display: inline-block;
				    font-size: 60px;
				    font-weight: 300;
				    line-height: 60px;
					.dolar{
						bottom: 24px;
					    
					    font-size: 22px;
					    font-weight: 800;
					    padding-right: 3px;
					    position: relative;
					}
				}
				h5{
					font-size: 18px;
				    font-weight: 600;
				    text-transform: lowercase;
				    display: inline-block;
				}			
				&:after{
					content:'';
				    position:absolute;
				    bottom:0;
				    left:0;
				}
				h6{
					font-weight: normal;
					margin-top: 10px;
					padding-top: 0px;
				}				
			}
			.bottom{
				padding-bottom: 40px;
				ul{
					text-align: center;
					li{
						font-size: 15px;
						font-weight: 600;
						text-transform: uppercase;
						padding: 10px 5px;
						color: #ffffff;
						.highlight{
							color: #000;
						}
					}
				}
				.feature_icon{
					margin-left: 0px;
					margin-right: 10px;
				}
				.tooltip{
					position: relative !important;
				    display: inline-block;
				    opacity: 1 !important;
				    z-index: auto !important;
				}
				.tooltip:after {
					font-family:'FontAwesome';
					font-size: 13px;
				    content: "\f059";
				    position: absolute;
				    top: -20px;
				}
				.tooltip .tooltiptext {
				    background-color: #555555;
					border-radius: 6px;
					color: #ffffff;
					font-size: 11px;
					left: -100px;
					line-height: 18px;
					overflow: visible;
					padding: 10px;
					position: absolute;
					text-align: center;
					top: 0;
					visibility: hidden;
					width: 114px;
					z-index: 1;
				}
				.tooltip:hover .tooltiptext {
				    visibility: visible;
				}
				.btn-table{
					background: #0c1f28;				   
				    border-radius: 8px;
				    color: #ffffff;
				    display: block;
				    font-size: 15px;
				    font-weight: 400;
				    margin: 35px auto 0;
				    padding: 11px 0;
				    text-align: center;
				    text-transform: uppercase;
				    width: 140px;				    
				    &:before{
				    	background: #d32f2f;
				    	border-radius: 8px;
				    }
				}
			}
		}
		.price-1{
			background: #3aa4d1;
		}
		.price-style2{
			background: #e98168;
		}
		.price-3{
			background: #ae68ca;
		}
	}

.clpricing-table .price-table.style5 .cl-pricetable-wrap .bottom .btn-table:before{
		border-radius: 8px !important;
	}
	.style1 .cl-pricetable-wrap{
		padding-bottom: 50px !important;
	}

/*=======================================*
 *======= Price table style6 CSS	 ========*
 *=======================================*/
	.price-table.style6{

.pricing-title{
			font-size: 30px;
			//color: #fff;
			
			font-weight: 600;
			text-transform: uppercase;
			padding-bottom: 18px;
		}

.cl-pricetable-wrap{
			background: #fff;
			border-radius: 4px;
			position: relative;
			&:hover{
				.btn-table{
					-webkit-transform: scale(1.1) !important;
					transform: scale(1.1) !important;
				}
			}
			.top{
				padding: 35px 0 25px;
				text-align: center;
				border-top-left-radius: 4px;
				border-top-right-radius: 4px;
				position: relative;
				overflow: hidden;
				.popular{
					background: #d32f2f;
				    color: #ffffff;
				    font-size: 12px;
				    left: -42px;
				    padding: 28px 34px 6px;
				    position: absolute;
				    text-transform: lowercase;
				    top: -12px;
				    transform: rotate(-50deg);
			    }
               .cl-subheader{
					.short-desc{
						padding: 10px 15px;
						text-transform: none !important;
					}
				}				
				&:after{
					content:'';
				    position:absolute;
				    bottom:0; left:0;
				}				
			}

ul{
				text-align: center;
				list-style: none;
				li{
					padding: 10px 0;
				list-style: none;
				 &:nth-child(odd){
				 	background: #ccc;

}
				
			   }
			}

.bottom{
				padding-top: 42px;
				p{
					color: #365260;
					font-size: 14px;
					font-weight: 500;
					margin: 0;
					padding: 0px 15px !important;
					text-align: center;
					text-transform: uppercase;
					.highlight{
						color: #000;
					}
					
				}
				.feature_icon{
					margin-left: 10px;
					margin-right: 10px;
				}
				/* Tooltip container */
				.tooltip{
					position: relative !important;
				    display: inline-block;
				    opacity: 1 !important;
				    z-index: auto !important;
				}
				.tooltip:after {
					font-family:'FontAwesome';
					font-size: 13px;
				    content: "\f059";
				    position: absolute;
				    top: -20px;
				}

/* Tooltip text */
				.tooltip .tooltiptext {
				    background-color: #555555;
				    border-radius: 6px;
				    color: #ffffff;
				    font-size: 11px;
				    left: -45px;
				    padding: 10px;
				    position: absolute;
				    text-align: center;
				    top: 20px;
				    visibility: hidden;
				    width: 114px;
				    z-index: 1;
				    line-height: 18px;
				}
				.tooltip:hover .tooltiptext {
				    visibility: visible;
				}
				.btn-table{
				    border-top-left-radius: 4px;
					border-top-right-radius: 4px;
				    color: #ffffff;
				    display: block;
				    margin: 42px auto 0;
				    padding: 10px 20px;
				    text-align: center;
				    text-transform: uppercase;
				    max-width: 230px;
				    width: 80%;				    
				    font-weight: 600;
				    font-size: 16px;
				    cursor: pointer;
				    -webkit-transform: perspective(1px) translateZ(0);
				    transform: perspective(1px) translateZ(0);
				    box-shadow: 0 0 1px transparent;
				    -webkit-transition-duration: 0.3s;
				    transition-duration: 0.3s;
				    -webkit-transition-property: transform;
				    transition-property: transform;

&:hover{
				    	-webkit-transform: scale(1.1);
						transform: scale(1.1);
				    }
				}
			}
		}
		.price-1{
			.top{
				background: #5343a3;
				color: #ffffff;
			}
			.bottom{
				background: #eeeeee;
			}
			.btn-table{
				background: #5343a3;
				border: #5343a3;
				color: #ffffff;
			}
		}
		.price-style2{
			.top{
				background: #00796b;
				color: #ffffff;
			}
			.bottom{
				background: #eeeeee;
			}
			.btn-table{
				background: #00796b;
				border: #00796b;
				color: #ffffff;
			}
		}
		.price-3{
			.top{
				background: #7a002b;
				color: #ffffff;
			}
			.bottom{
				background: #eeeeee;
			}
			.btn-table{
				background: #7a002b;
				border: #7a002b;
				color: #ffffff;
			}
		}
		h6{
			font-weight: normal;

}
	}

/*=======================================*
 *======= Price table style7 CSS	 ========*
 *=======================================*/
	.price-table.style7{

.pricing-title{
			
		    font-size: 30px;
		    font-weight: 600;
		    padding-bottom: 18px;
		    text-transform: uppercase;
		}
		.cl-pricetable-wrap{
		    background: #ffffff none repeat scroll 0 0;
			box-shadow: 0 6px 25px 7px #e5e5e5;
			color: #333333;
			margin-right: 0;
			padding: 20px 20px 1px;
			position: relative;
			text-align: center;
			text-shadow: 0 1px rgba(255, 255, 255, 0.8);
			overflow: hidden;
			.top{
				padding-bottom: 30px;
				.cl-header{
					h4{
					    border-radius: 2px 2px 0 0;
						font-size: 22px;
						margin: -20px -20px 64px;
						padding: 20px;
						line-height: 20px;
					    .dolar{
						    border-radius: 100px;
						    box-shadow: 0 5px 20px #dddddd inset, 0 3px 0 #999999 inset;
						    display: block;
						    font: bold 25px/100px Georgia,serif;
						    height: 100px;
						    margin: 20px auto -65px;
						    width: 100px;
					    }
					}
				}
				.popular{
					background: #d32f2f;
				    color: #ffffff;
				    font-size: 12px;
				    left: -42px;
				    padding: 28px 34px 6px;
				    position: absolute;
				    text-transform: lowercase;
				    top: -12px;
				    transform: rotate(-50deg);
			    }
				.btn-table{
				    border-radius: 10px;
				    display: block;
				    
				    font-size: 16px;
				    font-weight: 600;
				    margin: 0 auto;
				    padding: 8px 0;
				    max-width: 150px;
				    background: transparent !important;
				    text-transform: uppercase;
				    &:before{
    					border-radius: 5px;
				    }
				    &:hover{
				    	color: #fff !important;
				    }
				}			
			}
			.bottom{
				ul{
					text-align: center;
					li{
						border-top: 1px solid #dddddd;
					    padding: 10px 0;
					    line-height: 24px;
					    font-size: 15px;
    					font-weight: 400;
					    
					}
				}
				.feature_icon{
					margin-left: 10px;
					margin-right: 10px;
				}
				.tooltip{
					position: relative !important;
				    display: inline-block;
				    opacity: 1 !important;
				    z-index: auto !important;
				}
				.tooltip:after {
					font-family:'FontAwesome';
					font-size: 13px;
				    content: "\f059";
				    position: absolute;
				    top: -20px;
				}
				.tooltip .tooltiptext {
				    background-color: #555555;
					border-radius: 6px;
					color: #ffffff;
					font-size: 11px;
					left: -100px;
					line-height: 18px;
					overflow: visible;
					padding: 10px;
					position: absolute;
					text-align: center;
					top: 0;
					visibility: hidden;
					width: 114px;
					z-index: 1;
				}
				.tooltip:hover .tooltiptext {
				    visibility: visible;
				}
			}
		}
		.price-style7{
			.top{
				.cl-header{
					h4{
						background: #26a69a;
					}
				}
				.dolar{
					color: #26a69a;
					background: #ffffff;
					border: 5px solid #ffffff;
				}
			}
			.btn-table{
				border: 2px solid #26a69a !important;
				&:before{
					background: #26a69a !important;
				}
			}
		}
		.price-style2{
			.top{
				.cl-header{
					h4{
						background: #f9a825;
					}
				}
				.dolar{
					color: #f9a825;
					background: #ffffff;
					border: 5px solid #ffffff;
				}
			}
			.btn-table{
				border: 2px solid #f9a825 !important;
				&:before{
					background: #f9a825 !important;
				}
			}
		}
		.price-3{
			.top{
				.cl-header{
					h4{
						background: #9c56b8;
					}
				}
				.dolar{
					color: #9c56b8;
					background: #ffffff;
					border: 5px solid #ffffff;
				}
			}
			.btn-table{
				border: 2px solid #9c56b8 !important;
				&:before{
					background: #9c56b8 !important;
				}
			}
		}
	}

/*=======================================*
 *======= Price table style8 CSS	 ========*
 *=======================================*/
	.price-table.style8{
		.pricing-title{
			font-size: 30px;			
			font-weight: 600;
			text-transform: uppercase;
			padding-bottom: 18px;
		}
		.cl-pricetable-wrap{
		    border-radius: 0;
		    padding-bottom: 40px;
		    position: relative;
		    overflow: hidden;
		    &:hover{
				.btn-table{
					-webkit-transform: scale(1.03) !important;
					transform: scale(1.03) !important;
				}
			}
			.top{
				padding: 47px 0 22px;
				text-align: center;
				position: relative;
				overflow: hidden;
				color: #ffffff;

h3{
					margin: 18px 0 14px;
					font-size: 20px;
					font-weight: 600;
					small{
						font-size: 20px;
					}
				}
               .cl-subheader{
					.short-desc{
						padding: 10px 15px;
						text-transform: none !important;
					}
					h5,
					h6{
						font-weight: 600 !important;
					}
				}
				.popular{
					background: #d32f2f;
				    color: #ffffff;
				    font-size: 12px;
				    left: -42px;
				    padding: 28px 34px 6px;
				    position: absolute;
				    text-transform: lowercase;
				    top: -12px;
				    transform: rotate(-50deg);
			    }
				&:after{
					content:'';
				    position:absolute;
				    bottom:0; left:0;		   
				}				
			}
			.bottom{
				padding-top: 42px;
				background: #5c5c5c;
				padding-bottom: 50px;
				.inner{
					margin: 0 auto;
					padding: 0 20px;
				}

li{
					text-align: center;
					font-weight: normal;
					font-size: 15px;					
					margin-bottom: 18px;
				}
				.feature_icon{
					margin-left: 10px;
					margin-right: 10px;
				}
				/* Tooltip container */
				.tooltip{
					position: relative !important;
				    display: inline-block;
				    opacity: 1 !important;
				    z-index: auto !important;
				}
				.tooltip:after {
					font-family:'FontAwesome';
					font-size: 13px;
				    content: "\f059";
				    position: absolute;
				    top: -20px;
				}
				.tooltip .tooltiptext {
				    background-color: #555555;
				    border-radius: 6px;
				    color: #ffffff;
				    font-size: 11px;
				    left: -70px;
				    padding: 10px;
				    position: absolute;
				    text-align: center;
				    top: 10px;
				    visibility: hidden;
				    width: 114px;
				    z-index: 1;
				    line-height: 18px;
				}
				.tooltip:hover .tooltiptext {
				    visibility: visible;
				}
				.btn-table{
				    color: #ffffff;
				    display: block;
				    text-align: center;
				    text-transform: uppercase;
				    font-size: 15px;
				    cursor: pointer;
				    border-radius: 30px;
				    font-weight: 600;
				    margin: 56px auto 0;
				    padding: 0px 30px;
				    max-width: 150px;
				    -webkit-transform: perspective(1px) translateZ(0);
				    transform: perspective(1px) translateZ(0);
				    box-shadow: 0 0 1px transparent;
				    -webkit-transition-duration: 0.3s;
				    transition-duration: 0.3s;
				    -webkit-transition-property: transform;
				    transition-property: transform;
				    height: 48px;
				    line-height: 48px;
				    &:before{
				    	border-radius: 8px;
				    }
				}
			}
		}
		.price-1{
			background: #5c5c5c;
			border-bottom: 4px solid #00a185;
			.top{
				background: #00a185;
			}
			.btn-table{
				background: #00a185;
			}
		}
		.price-style2{
			background: #5c5c5c;
			border-bottom: 4px solid #e87e03;
			.top{
				background: #e87e03;
			}
			.btn-table{
				background: #e87e03;
			}
		}
		.price-3{
			background: #5c5c5c;
			border-bottom: 4px solid #9c56b8;
			.top{
				background: #9c56b8;
			}
			.btn-table{
				background: #9c56b8;
			}
		}
	}

/*=======================================*
 *======= Price table style9 CSS	 ========*
 *=======================================*/
	.price-table.style9{
		.pricing-title{
			font-size: 30px;			
			font-weight: 600;
			text-transform: uppercase;
			padding-bottom: 18px;
		}
		.cl-pricetable-wrap{
		    border-radius: 0;
		    box-shadow: 0px 5px 40px 0px rgba(230, 230, 230, 0.5);
		    border-bottom: 3px solid #f2f2f2;
			.top{
				padding: 0 0 22px;
				text-align: center;
				position: relative;
				overflow: hidden;
				.cl-header{
					h3{
						padding: 20px 15px;
						border-top-right-radius: 5px;
						border-top-left-radius: 5px;
					}
				}
				.cl-subheader{
					padding: 20px 10px 0;
				}
				.cl-subheader{
					h3{
	    				padding: 12px 0 5px 0;
	    				display: inline-block;
						.dolar{
							bottom: 13px;
						    font-size: 36px;
						    font-weight: 400;
						    position: relative;
						}
						small{
							font-size: 20px;
						}
					}
				}

h5{
					font-size: 18px;
				    font-weight: 600;
				    text-transform: lowercase;
				    display: inline-block;
				    margin-bottom: 10px;
				}
				h6{
					font-weight: 500 !important;
					padding-top: 0px;
				}
               .cl-subheader{
					.short-desc{
						font-size: 18px;
						font-weight: 400;
						line-height: 20px;
						padding-bottom: 20px;
						padding-top: 8px;
						text-transform: initial;
					}
				}
				.popular{
					background: #d32f2f;
				    color: #ffffff;
				    font-size: 12px;
				    left: -46px;
				    padding: 28px 34px 1px;
				    position: absolute;
				    text-transform: lowercase;
				    top: -15px;
				    transform: rotate(-50deg);
			    }				
				&:after{
					content:'';
				    position:absolute;
				    bottom:0; left:0;   
				}
				.btn-table{
					border: 2px solid #ffffff;
				    border-radius: 30px;
				    color: #ffffff;
				    display: block;				    
				    font-size: 15px;
				    height: 48px;
				    line-height: 48px;
				    font-weight: 600;
				    margin: 0 auto;
				    padding: 0px 30px;
				    width: 150px;
				    transition: all .3s;
				    border: none;
				    text-transform: uppercase;
				}				
			}
			.bottom{
				padding-top: 20px;
				padding-bottom: 10px;
				ul{
					list-style: outside none none;
				    margin: 0 25px;
				    padding: 0 0 30px;
				    text-align: center;
					li{
						font-size: 15px;
						color:#666666;
						border: 1px dotted #e6e6e6;
						padding: 10px;
						border-bottom: 0;
						font-weight: 400;
						&:last-child{
							border: 1px dotted  #e6e6e6;
						}
						.fa{
							bottom: 2px;
						    color: #26a69a;
						    left: 3px;
						    position: relative;
						}
					}
				}
				.feature_icon{
					margin-left: 0px;
					margin-right: 10px;
				}
				.tooltip{
					position: relative !important;
				    display: inline-block;
				    opacity: 1 !important;
				    z-index: auto !important;
				}
				.tooltip:after {
					font-family:'FontAwesome';
					font-size: 13px;
				    content: "\f059";
				    position: absolute;
				    top: -20px;
				}
				.tooltip .tooltiptext {
				    background-color: #555555;
					border-radius: 6px;
					color: #ffffff;
					font-size: 11px;
					left: -100px;
					line-height: 18px;
					overflow: visible;
					padding: 10px;
					position: absolute;
					text-align: center;
					top: 0;
					visibility: hidden;
					width: 114px;
					z-index: 1;
				}
				.tooltip:hover .tooltiptext {
				    visibility: visible;
				}
			}
		}
		.price-1{
			.top{
				background: #26a69a;
				color: #ffffff;
				.cl-header{
					h4{
						background: #009688;
					}
				}
			}
			.bottom{
				.feature_icon{
					color: #009688 !important;
				}
			}
		}
		.price-style2{
			.top{
				background: #fbc02d;
				color: #ffffff;
				.cl-header{
					h4{
						background: #f9a825;
					}
				}
			}
			.bottom{
				.feature_icon{
					color: #f9a825 !important;
				}
			}
		}
		.price-3{
			.top{
				background: #ae68ca;
				color: #ffffff;
				.cl-header{
					h4{
						background: #9c56b8;
					}
				}
			}
			.bottom{
				.feature_icon{
					color: #9c56b8 !important;
				}
			}
		}
	}

/*=======================================*
 *======= Price table style10 CSS	 ========*
 *=======================================*/
	.price-table.style10{
		margin-bottom: 45px;

.pricing-title{
			
		    font-size: 30px;
		    font-weight: 600;
		    padding-bottom: 18px;
		    text-transform: uppercase;
		}
		.price-des{
			margin-bottom: 40px;
		}
		.cl-col-lg-4{
			padding: 0;
			@media screen and (max-width: 1000px){
				padding: 0 10px;
			}
		}
		.cl-pricetable-wrap{
		    text-align: center;
		    color: #333333;
		    margin-bottom: 0px;
		    margin-right: 0;
		    position: relative;
		    border-radius: 0;
		    transition: all 0.4s ease-in-out 0s;
		    width: 100%;
		    margin: 0px;
		    background-color: #232f39;
		    padding-bottom: 40px;
		    margin-top: 20px;
		    margin-bottom: 20px;
		    padding-left: 15px;
    		padding-right: 15px;
			.top{
				padding: 25px 10px;
				.cl-header{
					@media screen and (max-width: 1000px){
						display:block;
					}
					h4{
					    border-radius: 2px 2px 0 0;
					    font-size: 30px;
					    font-weight: normal;
					}
					h5{
						opacity: .8;
						margin-top: 10px;
					}
				}			
			}
			.featured{
				ul{
					text-align: center;
					li{
					    
					    font-size: 17px;
					    font-weight: 400;
					    line-height: 24px;
					    padding: 8px 0;
					    border-bottom: none;
					}
				}
				.feature_icon{
					margin-left: 0px;
					margin-right: 10px;
				}
				.tooltip{
					position: relative !important;
				    display: inline-block;
				    opacity: 1 !important;
				    z-index: auto !important;
				}
				.tooltip:after {
					font-family:'FontAwesome';
					font-size: 13px;
				    content: "\f059";
				    position: absolute;
				    top: -20px;
				}
				.tooltip .tooltiptext {
				    background-color: #555555;
					border-radius: 6px;
					color: #ffffff;
					font-size: 11px;
					left: -100px;
					line-height: 18px;
					overflow: visible;
					padding: 10px;
					position: absolute;
					text-align: center;
					top: 0;
					visibility: hidden;
					width: 114px;
					z-index: 1;
				}
				.tooltip:hover .tooltiptext {
				    visibility: visible;
				}
			}
			.bottom{
				
					.dolar {
						font: 700 35px/74px Georgia,serif;
					}
					.btn-table{
					    border-radius: 5px;
					    display: block;					    
					    font-size: 16px;
					    font-weight: 600;
					    margin: 0 auto;
					    padding: 8px 0;
					    text-transform: uppercase;
					    max-width: 150px;
					    &:before{
					    	background: #ffffff;
					    	border-radius: 0 !important;
					    }
					}
				
			}
			&:hover{
			    border-radius: 20px;
			    box-shadow: 0 20px 50px 0 rgba(54, 54, 54, 0.3);
			    margin-bottom: 0;
			    margin-top: 0;
			    padding-top: 40px;
			    transition: all 0.2s ease-in-out 0s;
			    z-index: 1;
			    h4, h5, .fa{
			    	color: #fff !important;
			    }
			}
			&.popular_plan{
				border-radius: 20px;
			    box-shadow: 0 20px 50px 0 rgba(54, 54, 54, 0.3);
			    margin-bottom: 0;
			    margin-top: 0;
			    padding-top: 40px;
			    transition: all 0.2s ease-in-out 0s;
			    z-index: 1;
			    overflow: hidden;
			    h4, h5, .fa{
			    	color: #fff !important;
			    }
			    .top{
			    	.popular{
			    		background: #ffffff none repeat scroll 0 0;
					    color: #d32f2f;
					    
					    font-size: 14px;
					    left: -39px;
					    padding: 4px 10px;
					    position: absolute;
					    text-transform: lowercase;
					    top: 19px;
					    transform: rotate(-54deg);
					    width: 130px;
					    font-weight: 500;
			    	}
			    }
			}
		}
		.price-1{
			border-bottom: 7px solid #bfc946;
			.top{
				color: #bfc946;

h3, h4, h5{
					color: #bfc946;
				}
			}
			.featured{
				color: #ffffff;
				.fa{
					color: #bfc946;
				}
			}
			.bottom{
				color: #ffffff;
				.btn-table{
					border: 2px solid #bfc946;
    				color: #ffffff;
    				&:hover{
    					color: #bfc946 !important;
    				}
				}
			}
			&:hover{
				background: #bfc946;
				.btn-table{
					border: 2px solid #ffffff;
				}
			}
		}
		.popular_plan{
			border-bottom: 7px solid #36cccb;
			background: #36cccb;
			.top{
				color: #36cccb;

h3, h4, h5{
					color: #36cccb;
				}
			}
			.featured{
				color: #ffffff;
				.fa{
					color: #36cccb;
				}
			}
			.bottom{
				color: #ffffff;
				.btn-table{
					border: 2px solid #ffffff;
    				color: #ffffff;
    				&:hover{
    					color: #36cccb !important;
    				}
				}
			}
			&:hover{
				background: #36cccb;
				.btn-table{
					border: 2px solid #ffffff;
				}
			}
		}
		.price-3{
			border-bottom: 7px solid #d17f06;
			.top{
				color: #d17f06;

h3, h4, h5{
					color: #d17f06;
				}
			}
			.featured{
				color: #ffffff;
				.fa{
					color: #d17f06;
				}
			}
			.bottom{
				color: #ffffff;
				.btn-table{
					border: 2px solid #d17f06;
    				color: #ffffff;
    				&:hover{
    					color: #d17f06 !important;
    				}
				}
			}
			&:hover{
				background: #d17f06;
				.btn-table{
					border: 2px solid #ffffff;
				}
			}
		}
		.price-style10{
			border-radius: 20px !important;
		}
		.category30{
			border-radius: 20px !important;
		}
	}

/*=======================================*
 *======= Price table style11 CSS	 ========*
 *=======================================*/
	.price-table.style11{
		margin-bottom: 45px;
		.pricing-title{
			
		    font-size: 30px;
		    font-weight: 600;
		    padding-bottom: 18px;
		    text-transform: uppercase;
		}
		.price-des{
			margin-bottom: 40px;
		}
		.cl-col-lg-4{
			padding: 0;
		}
		.cl-pricetable-wrap{
		    text-align: center;
		    color: #333333;
		    margin-bottom: 0px;
		    margin-right: 0;
		    position: relative;
		    transition: all 0.4s ease-in-out 0s;
		    width: 100%;
		    margin: 0px;
		    padding: 15px;
		    margin-top: 20px;
		    margin-bottom: 20px;
		    border-radius: 20px;
		    .inner-box{
			    border-radius: 10px;
			    padding: 20px 5px;
			    transition: all 0.4s ease-in-out 0s;

&:hover{
			    	box-shadow: 0 8px 19px 0 rgba(54, 54, 54, 0.5);
			    }
		    }
			.top{
				padding:0 10px 20px;
				.cl-header{
					@media screen and (max-width: 1000px){
						display:block;
					}
					h4{
					    border-radius: 2px 2px 0 0;
					    font-size: 22px;
					    font-weight: normal;
					    @media screen and (max-width: 767px){
							font-size: 20px;
						}
					}
					h5{
						opacity: .8;
						margin-top: 10px;
					}
				}			
			}
			.featured{
				ul{
					text-align: center;
					li{
					    
					    font-size: 15px;
					    font-weight: 400;
					    line-height: 22px;
					    padding: 4px 0;
					    border-bottom: none;
					    color: #ffffff;
					}
				}
				.feature_icon{
					margin-left: 0px;
					margin-right: 0px;
				}
				.tooltip{
					position: relative !important;
				    display: inline-block;
				    opacity: 1 !important;
				    z-index: auto !important;
				}
				.tooltip:after {
					font-family:'FontAwesome';
					font-size: 13px;
				    content: "\f059";
				    position: absolute;
				    top: -20px;
				}
				.tooltip .tooltiptext {
				    background-color: #555555;
					border-radius: 6px;
					color: #ffffff;
					font-size: 11px;
					left: -100px;
					line-height: 18px;
					overflow: visible;
					padding: 10px;
					position: absolute;
					text-align: center;
					top: 0;
					visibility: hidden;
					width: 114px;
					z-index: 1;
				}
				.tooltip:hover .tooltiptext {
				    visibility: visible;
				}
			}
			.bottom{
				.dolar {
					font: 700 35px/74px Georgia,serif;
					color: #ffffff;
				}
				.btn-table{
				    border-radius: 5px;
				    display: block;
				    
				    font-size: 16px;
				    font-weight: 600;
				    margin: 0 auto;
				    padding: 8px 0;
				    text-transform: uppercase;
				    max-width: 150px;
				    &:before{
				    	background: #d32f2f;
				    	border-radius: 0 !important;
				    }
					@media screen and (max-width: 767px){
						width: auto;
					} 
				}
			}
			&:hover{
			    border-radius: 20px;
			    transition: all 0.2s ease-in-out 0s;
			    z-index: 1;
			    h4, h5, .fa{
			    	color: #fff !important;
			    }
			}
			&.popular_plan{
			    margin-bottom: 0;
			    margin-top: 0;
			    padding-top: 35px;
			    transition: all 0.2s ease-in-out 0s;
			    z-index: 1;
			    overflow: hidden;
			    padding-bottom: 35px;
			    .inner-box{
			    	box-shadow: 0 8px 19px 0 rgba(54, 54, 54, 0.5);
			    }
			    h4, h5, .fa{
			    	color: #fff !important;
			    }
			    .top{
			    	.popular{
			    		background: #ffffff none repeat scroll 0 0;
					    color: #d32f2f;
					    
					    font-size: 14px;
					    left: -39px;
					    padding: 4px 10px;
					    position: absolute;
					    text-transform: lowercase;
					    top: 19px;
					    transform: rotate(-54deg);
					    width: 130px;
					    font-weight: 500;
			    	}
			    }
			}
		}
		.price-1{
			background: #bfc946;
			&:hover{
				.inner-box{
					background: #232f39;
    				border: 1px solid #232f39;
				}
				.btn-table{
					border: 2px solid #9ea72f !important;
				}
			}
			.inner-box{
				border: 1px solid #009688;
			}
			.btn-table{
			 	border: 2px solid #ffffff !important;
			   color: #ffffff;
			   transition: all .7s;
			   &:before{
					background: #9ea72f !important;
			   }   
		   }
		}
		.price-style2{
			background: #36cccb;
			&:hover{
				.inner-box{
					background: #232f39;
    				border: 1px solid #232f39;
				}
				.btn-table{
					border: 2px solid #36cccb !important;
				}
			}
			.inner-box{
				background: #232f39;
    			border: 1px solid #232f39;
			}
			.btn-table{
			 	border: 2px solid #ffffff !important;
			   color: #ffffff;
			   transition: all .7s;
			   &:before{
					background: #36cccb !important;
			   }   
		   }
		}
		.price-3{
			background: #009688;
			&:hover{
				.inner-box{
					background: #232f39;
    				border: 1px solid #232f39;
				}
				.btn-table{
					border: 2px solid #009688 !important;
				}
			}
			.inner-box{
				border: 1px solid #6fc7b3;
			}
			.btn-table{
			 	border: 2px solid #ffffff !important;
			   color: #ffffff;
			   transition: all .7s;
			   &:before{
					background: #009688 !important;
			   }   
		   }
		}
		.category28{
			border-radius: 20px !important;
		}
		.category30{
			border-radius: 20px !important;
		}
	}

/*=======================================*
*======= Price table style12 CSS	 ========*
*=======================================*/
	.price-table.style12{
		margin-bottom: 45px;
		.pricing-title{
			
		    font-size: 30px;
		    font-weight: 600;
		    padding-bottom: 18px;
		    text-transform: uppercase;
		}
		.price-des{
			margin-bottom: 40px;
		}
		.cl-pricetable-wrap{
		    text-align: center;
		    color: #333333;
		    margin-bottom: 0px;
		    margin-right: 0;
		    position: relative;
		    transition: all 0.4s ease-in-out 0s;
		    width: 100%;
		    margin: 0px;
		    padding: 30px 15px;
		    margin-top: 20px;
		    margin-bottom: 20px;
		    border-radius: 20px;
		    .inner-box{
			    border-radius: 10px;
			    padding: 20px 5px;
			    transition: @transition;
			    &:hover{
			    	box-shadow: 0 8px 19px 0 rgba(54, 54, 54, 0.5);
			    	margin-top: -10px;
			    }
		    }
			.top{
				padding:0 10px 20px;
				.cl-header{
					@media screen and (max-width: 1000px){
						display:block;
					}
					h4{
					    border-radius: 2px 2px 0 0;
					    font-size: 22px;
					    text-transform: uppercase;
					    line-height: 26px;
					}
					h5{
						opacity: .8;
						margin-top: 10px;
					}
				}			
			}
			.featured{
				ul{
					text-align: center;
					li{
					    
					    font-size: 16px;
					    font-weight: 400;
					    line-height: 24px;
					    padding: 4px 0;
					    border-bottom: none;
					    color: #ffffff;
					}
				}
				.feature_icon{
					margin-left: 0px;
					margin-right: 0px;
				}
				.tooltip{
					position: relative !important;
				    display: inline-block;
				    opacity: 1 !important;
				    z-index: auto !important;
				}
				.tooltip:after {
					font-family:'FontAwesome';
					font-size: 13px;
				    content: "\f059";
				    position: absolute;
				    top: -20px;
				}
				.tooltip .tooltiptext {
				    background-color: #555555;
					border-radius: 6px;
					color: #ffffff;
					font-size: 11px;
					left: -100px;
					line-height: 18px;
					overflow: visible;
					padding: 10px;
					position: absolute;
					text-align: center;
					top: 0;
					visibility: hidden;
					width: 114px;
					z-index: 1;
				}
				.tooltip:hover .tooltiptext {
				    visibility: visible;
				}
			}
			.bottom{
				
					.dolar {
						font: 700 35px/74px Georgia,serif;
						color: #ffffff;
					}
					.btn-table{
					    border-radius: 5px;
					    display: block;
					    
					    font-size: 16px;
					    font-weight: 600;
					    margin: 0 auto;
					    padding: 8px 0;
					    text-transform: uppercase;
					    max-width: 150px;
					    color: #ffffff;
					    border: 2px solid #ffffff;
					    &:before{
					    	background: #d32f2f;
					    	border-radius: 0 !important;
					    }
					    @media screen and (max-width: 767px){
							width: auto;
						} 
					}
				
			}
			&:hover{
			    border-radius: 20px;
			    transition: all 0.2s ease-in-out 0s;
			    z-index: 1;
			    h4, h5, .fa{
			    	color: #fff !important;
			    }
			}
			&.popular_plan{
			    margin-bottom: 0;
			    margin-top: 0;
			    padding-top: 35px;
			    transition: all 0.2s ease-in-out 0s;
			    z-index: 1;
			    overflow: hidden;
			    padding-bottom: 35px;
			    .inner-box{
			    	box-shadow: 0 8px 19px 0 rgba(54, 54, 54, 0.5);
			    }
			    h4, h5, .fa{
			    	color: #fff !important;
			    }
			    .top{
			    	.popular{
			    		background: #ffffff;
					    color: #d32f2f;
					    
					    font-size: 14px;
					    font-weight: 500;
					    padding: 4px 10px;
					    position: absolute;
					    right: -34px;
					    text-transform: lowercase;
					    top: 16px;
					    transform: rotate(45deg);
					    width: 130px;
			    	}
			    }
			}
		}
		.price-1{
			background: #bfc946;
			.inner-box{
				&:hover{
					box-shadow: 0 8px 19px 0 rgba(54, 54, 54, 0.5);
    				margin-top: -10px;
				}
			}
			.btn-table{
				&:hover{
					border: 2px solid #9ea72f !important;
				}
				&:before{
					background: #9ea72f !important;
				}
			}
		}
		.price-style2{
			background: #36cccb;
			.inner-box{
				&:hover{
					box-shadow: 0 8px 19px 0 rgba(54, 54, 54, 0.5);
    				margin-top: -10px;
				}
			}
			.btn-table{
				&:hover{
					border: 2px solid #169c9b !important;
				}
				&:before{
					background: #169c9b !important;
				}
			}
		}
		.price-3{
			background: #e78900;
			.inner-box{
				&:hover{
					box-shadow: 0 8px 19px 0 rgba(54, 54, 54, 0.5);
    				margin-top: -10px;
				}
			}
			.btn-table{
				&:hover{
					border: 2px solid #c77a09 !important;
				}
				&:before{
					background: #c77a09 !important;
				}
			}
		}
		.category28{
			border-radius: 20px !important;
		}
		.category30{
			border-radius: 20px !important;
		}
	}

/*=======================================*
*======= Price table style13 CSS	 ========*
*=======================================*/
	.price-table.style13{
		.bottom{
		p{
			margin: 0;
			padding: 0;
		}
	}
		.pricing-title{
			
		    font-size: 30px;
		    font-weight: 600;
		    padding-bottom: 18px;
		    text-transform: uppercase;
		}
		.price-des{
			margin-bottom: 40px;
		}
		.cl-pricetable-wrap{
		    border-radius: 5px;
		    &:hover{
				.dolar{
					top: -40px !important;
					transition: all 1s !important;
				}
			}
			.top{
				text-align: center;
				.cl-header{
					h4{
						font-size: 22px;
						margin-bottom: 0;
						margin-top: 0;
						padding: 20px 0;
					}
				}
				.cl-subheader{
					min-height: 90px;
    				position: relative;
					h3{
						margin: 0;
						.dolar{
							border-radius: 100px;
						    box-shadow: 0 8px 19px 0 rgba(54, 54, 54, 0.5);
						    display: block;
						    font: 700 25px/100px Georgia,serif;
						    height: 100px;
						    left: 50%;
						    margin: 0 auto;
						    position: absolute;
						    top: -52px;
						    width: 100px;
						    transition: all .5s !important;
						    transition: @transition;
						    transform: translate(-50%);
						}
					}
				}
				h5{
					font-size: 18px;
				    font-weight: 600;
				    text-transform: lowercase;
				    display: inline-block;
				}
				.popular{
			    	background: #d32f2f;
					color: #ffffff;					
					font-size: 14px;
					left: -14px;
					padding: 6px 19px;
					position: absolute;
					text-transform: lowercase;
					top: 28px;
					transform: rotate(-90deg);
					z-index: 1;
			    }				
				&:after{
					content:'';
				    position:absolute;
				    bottom:0;
				    left:0;
				}				
			}
			.bottom{
				background: #eeeeee;
				ul{
					text-align: center;
					margin: 0;
					li{
						color: #365260;
						font-size: 14px;
						font-weight: 600;
						text-transform: uppercase;
						padding: 12px 10px;
						line-height: 23px;
						.fa{
							bottom: 3px;
							color: #0078f0;
							margin-left: 4px;
							position: relative;
						}
						.highlight{
							color: #000;
						}
						&:nth-child(odd){
							background: #ccc;
							padding: 10px 12px;
						}
					}
				}
				.btn-table{
				    margin: 0 auto;
				    padding: 20px 0;
				    width: 100%;
				    //background: #0c1f28 none repeat scroll 0 0;
				    border: 0px solid #0c1f28;
				    //color: #ffffff;
				    display: block;
				    
				    font-size: 18px;
				    font-weight: 600;
				    text-align: center;
				    text-transform: uppercase;
				   
				    &:before{
				    	background: #d32f2f;
				    	border-radius: 0 !important;
				    }
				}
				.feature_icon{
					margin-right: 10px;
				}
				.tooltip{
					position: relative !important;
				    display: inline-block;
				    opacity: 1 !important;
				    z-index: auto !important;
				}
				.tooltip:after {
					font-family:'FontAwesome';
					font-size: 13px;
				    content: "\f059";
				    position: absolute;
				    top: -20px;
				}
				.tooltip .tooltiptext {
				    background-color: #555555;
				    border-radius: 6px;
				    color: #ffffff;
				    font-size: 11px;
				    left: -45px;
				    padding: 10px;
				    position: absolute;
				    text-align: center;
				    top: 20px;
				    visibility: hidden;
				    width: 114px;
				    z-index: 1;
				    line-height: 18px;
				}
				.tooltip:hover .tooltiptext {
				    visibility: visible;
				}
			}
			&:hover{
				.dolar{
					margin-top: -10px;
				}
			}
		}
		.price-1{
			.top{
				.cl-subheader{
					background: #3399ff;
					.dolar{
						background: #0078f0;
					}
				}
				.cl-header{
					background: #0078f0;
				}
			}
			.bottom{
				.fa{
					color: #0078f0 !important;
				}
			}
			.btn-table{
				background: #0078f0;
			    border: 2px solid #0078f0 !important;
			    color: #ffffff;
			}
		}
		.price-style2{
			.top{
				.cl-subheader{
					background: #93c230;
					.dolar{
						background: #7ba428;
					}
				}
				.cl-header{
					background: #7ba428;
				}
			}
			.bottom{
				.fa{
					color: #7ba428 !important;
				}
			}
			.btn-table{
				background: #7ba428;
			    border: 2px solid #7ba428 !important;
			    color: #ffffff;
			}
		}
		.price-3{
			.top{
				.cl-subheader{
					background: #e040fb;
					.dolar{
						background: #9918ad;
					}
				}
				.cl-header{
					background: #9918ad;
				}
			}
			.bottom{
				.fa{
					color: #9918ad !important;
				}
			}
			.btn-table{
				background: #9918ad;
			    border: 2px solid #9918ad !important;
			    color: #ffffff;
			}
		}
		.price-4{
			.top{
				.cl-subheader{
					background: #40d6d5;
					.dolar{
						background: #1fb5b4;
					}
				}
				.cl-header{
					background: #1fb5b4;
				}
			}
			.bottom{
				.fa{
					color: #1fb5b4 !important;
				}
			}
			.btn-table{
				background: #1fb5b4;
			    border: 2px solid #1fb5b4 !important;
			    color: #ffffff;
			}
		}
	}

/*=======================================*
*======= Price table style14 CSS	 ========*
*=======================================*/
	.price-table.style14{
		.pricing-title{
			font-size: 30px;
			//color: #fff;
			
			font-weight: 600;
			text-transform: uppercase;
			padding-bottom: 18px;
		}

.cl-pricetable-wrap{
			background: #fff;
			border-radius: 4px;
			&:hover{
				.btn-table{
					-webkit-transform: scale(1.1) !important;
					transform: scale(1.1) !important;
				}
			}
			.top{
				padding: 35px 0 25px;
				text-align: center;
				text-transform: uppercase;
				position: relative;
				overflow: hidden;
				.cl-header{
					h4{
						color: #ffffff;
						font-size: 22px;
						font-weight: 400;
						line-height: 27px;
						margin: 0 0 5px;
						padding: 0 10px;
					}
				}
               .cl-subheader{
					.short-desc{
						padding: 10px 15px;
						text-transform: none !important;
					}
					h5{
						small{
							color: #ffffff;
						}
					}
				}
				.popular{
			    	background: #d32f2f;
					color: #ffffff;
					
					font-size: 11px;
					left: -43px;
					padding: 18px 34px 6px;
					position: absolute;
					text-transform: lowercase;
					top: -6px;
					transform: rotate(-50deg);
			    }				
				&:after{
					content:'';
				    position:absolute;
				    bottom:0; 
				    left:0;
				    border-right: 80vw solid #eeeeee;
    				border-top: 100px solid rgba(0, 0, 0, 0);
				}				
			}
			.bottom{
				padding: 42px 10px 30px;
				background: #eeeeee;
				li{
					color: #365260;
					font-size: 14px;
					font-weight: 500;
					margin: 0;
					padding: 10px 0;
					text-align: center;
					text-transform: uppercase;
					list-style: none;
				}
				.feature_icon{
					margin-left: 0px;
					margin-right: 10px;
				}
				.tooltip{
					position: relative !important;
				    display: inline-block;
				    opacity: 1 !important;
				    z-index: auto !important;
				}
				.tooltip:after {
					font-family:'FontAwesome';
					font-size: 13px;
				    content: "\f059";
				    position: absolute;
				    top: -20px;
				}
				.tooltip .tooltiptext {
				    background-color: #555555;
				    border-radius: 6px;
				    color: #ffffff;
				    font-size: 11px;
				    left: -45px;
				    padding: 10px;
				    position: absolute;
				    text-align: center;
				    top: 20px;
				    visibility: hidden;
				    width: 114px;
				    z-index: 1;
				    line-height: 18px;
				}
				.tooltip:hover .tooltiptext {
				    visibility: visible;
				}
				.btn-table{
				    border-radius: 0px;
				    color: #ffffff;
				    display: block;
				    margin: 35px auto 0;
				    padding: 10px 20px;
				    text-align: center;
				    text-transform: uppercase;
				    max-width: 230px;
				    
				    font-weight: 600;
				    font-size: 16px;
				    cursor: pointer;
				    -webkit-transform: perspective(1px) translateZ(0);
				    transform: perspective(1px) translateZ(0);
				    box-shadow: 0 0 1px transparent;
				    -webkit-transition-duration: 0.3s;
				    transition-duration: 0.3s;
				    -webkit-transition-property: transform;
				    transition-property: transform;

&:hover{
				    	-webkit-transform: scale(1.1);
						transform: scale(1.1);
				    }
				}
			}
		}
		.price-1{
			.top{
				background: #00796b;
			}
			.btn-table{
				background: #00796b;
			}
		}
		.price-style2{
			.top{
				background: #447ab6;
			}
			.btn-table{
				background: #447ab6;
			}
		}
		.price-3{
			.top{
				background: #36cccb;
			}
			.btn-table{
				background: #36cccb;
			}
		}
		.price-4{
			.top{
				background: #ff9e80;
			}
			.btn-table{
				background: #ff9e80;
			}
		}
		.price-5{
			.top{
				background: #8d6e63;
			}
			.btn-table{
				background: #8d6e63;
			}
		}
		.price-6{
			.top{
				background: #9e9d24;
			}
			.btn-table{
				background: #9e9d24;
			}
		}
	}

/*=======================================*
*======= Price table style15 CSS	 ========*
*=======================================*/
	.price-table.style15{
		.pricing-title{
			font-size: 30px;
			
			font-weight: 600;
			text-transform: uppercase;
			padding-bottom: 18px;
		}

.cl-pricetable-wrap{
			background: #fff;
			border-radius: 4px;
			-webkit-box-shadow: 0px 5px 40px 0px rgba(230, 230, 230, 0.5);
			-moz-box-shadow: 0px 5px 40px 0px rgba(230, 230, 230, 0.5);
			box-shadow: 0px 5px 40px 0px rgba(230, 230, 230, 0.5);
			&:hover{
				.btn-table{
					-webkit-transform: scale(1.03) !important;
					transform: scale(1.03) !important;
				}
			}
			.top{
				padding: 35px 15px 2px;
				text-align: center;
				text-transform: uppercase;
				position: relative;
				overflow: hidden;
				.price-icon{
					margin: 0 auto 22px;
				}
				h3, h4, h5{
					color: #3c4857;
				}
				.cl-subheader{
					margin: 20px 0 10px;
					h3, h5{
						display: inline-block;
					}
					small{
						font-size: 20px;
						text-transform: capitalize;
					}
				}
				.popular{
					background: #d32f2f;
				    color: #ffffff;
				    font-size: 12px;
				    left: -42px;
				    padding: 28px 34px 6px;
				    position: absolute;
				    text-transform: lowercase;
				    top: -12px;
				    transform: rotate(-50deg);
			    }				
				&:after{
					content:'';
				    position:absolute;
				    bottom:0; left:0;

@media screen and (max-width: 767px){
				    	border-right: 150vw solid #fff;
				    }
				}				
			}
			.bottom{
				padding:0 20px 20px;
				li{
					font-weight: 500;
					margin: 0;
					padding: 10px 0;
					text-align: center;
					text-transform: uppercase;
					border-bottom: 1px solid #efefef;
					&:last-child{
						border-bottom: none;
					}
				}
				.feature_icon{
					margin-left: 10px;
					margin-right: 10px;
				}
				.tooltip{
					position: relative !important;
				    display: inline-block;
				    opacity: 1 !important;
				    z-index: auto !important;
				}
				.tooltip:after {
					font-family:'FontAwesome';
					font-size: 13px;
				    content: "\f059";
				    position: absolute;
				    top: -20px;
				}
				.tooltip .tooltiptext {
				    background-color: #555555;
				    border-radius: 6px;
				    color: #ffffff;
				    font-size: 11px;
				    left: -45px;
				    padding: 10px;
				    position: absolute;
				    text-align: center;
				    top: 20px;
				    visibility: hidden;
				    width: 114px;
				    z-index: 1;
				    line-height: 18px;
				}
				.tooltip:hover .tooltiptext {
				    visibility: visible;
				}
				.btn-table{
				    border-radius: 0px;
				    color: #ffffff;
				    display: block;
				    margin: 20px auto 20px;
				    padding: 0 20px;
				    height: 48px;
				    line-height: 48px;
				    text-align: center;
				    text-transform: uppercase;
				    max-width: 150px;				    
				    font-weight: 600;
				    font-size: 15px;
				    border-radius: 30px;
				    cursor: pointer;
				    -webkit-transform: perspective(1px) translateZ(0);
				    transform: perspective(1px) translateZ(0);
				    box-shadow: 0 0 1px transparent;
				    -webkit-transition-duration: 0.3s;
				    transition-duration: 0.3s;
				    -webkit-transition-property: transform;
				    transition-property: transform;
				    @media screen and (max-width: 767px){
						width: auto;
					} 
				}
			}
		}
		.price-1{
			.btn-table{
				background: #447ab6;
			}
		}
		.price-style2{
			.btn-table{
				background: #36cccb;
			}
		}
		.price-3{
			.btn-table{
				background: #9c56b8;
			}
		}
	}
	
}