.first-row{
	min-height: 780px;
}

.holder{
	width: 120px;
	height: 120px;
	margin: 10px 0;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	position: relative;
}

.firm-title:after{
	background: rgba(218,146,251,1);
}

.holder.firmplan{
	border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
	animation: morph 6s linear infinite;
	animation-delay: 200ms;
}

.holder svg{
	animation: hovering 2s ease-in-out infinite alternate;
}

.holder.firmplan{
	background: rgba(218,146,251, 0.05);
}

.holder.firmplan svg{
	width: 70px;
}

.holder.goldplan svg{
	width: 140px;
}

.holder.silverplan svg{
	width: 100px;
}

.holder.bronzeplan svg{
	width: 83px;
}

.holder.faqplan svg{
	width: 80px;
}

@keyframes hovering {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(0, -5px, 0);
	}
}

.holder.firmplan .line{
	fill:none;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-width:10px;
	fill-rule:evenodd;
}

.holder.firmplan .line1,.holder.firmplan .line2, .holder.firmplan .line3{
	stroke:#c096c5;
	stroke-dasharray: 45;
	stroke-dashoffset: 45;
	animation: dash 1000ms infinite linear forwards;
}

.holder.firmplan .line1{
	animation-delay: 1.4s;
}

.holder.firmplan .line2{
	animation-delay: 1.1s;
}

.holder.firmplan .line3{
	animation-delay: 1.4s;
}


.holder.firmplan .wing, .holder.firmplan .body, .holder.firmplan .head, .holder.firmplan .engine{
	stroke:#6868af;
}

.holder.firmplan .body{
	stroke-dasharray: 200;
	stroke-dashoffset: 200;
	animation: drawline 1500ms cubic-bezier(0.24, 0.85, 0.37, 0.99) forwards;
	animation-delay: 0.4s;
}

.holder.firmplan .engine{
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	animation: drawline 1000ms cubic-bezier(0.24, 0.85, 0.37, 0.99) forwards;
	animation-delay: 1s;
}

.holder.firmplan .wing{
	stroke-dasharray: 200;
	stroke-dashoffset: 200;
	animation: drawline 1500ms cubic-bezier(0.24, 0.85, 0.37, 0.99) forwards;
	animation-delay: 1s;
}

.holder.goldplan .border, .holder.goldplan .arc, .holder.goldplan .tail, .holder.goldplan .basket, .holder.goldplan .line{
	fill:none;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-width:10px;
	fill-rule:evenodd;
	stroke: #6868af;
}

.holder.goldplan .border{
	stroke-dasharray: 360;
	stroke-dashoffset: 360;
	animation: drawline 1500ms cubic-bezier(0.24, 0.85, 0.37, 0.99) forwards;
	animation-delay: 1s;
}

.holder.goldplan .tail, .holder.goldplan .basket, .holder.goldplan .arc{
	stroke-dasharray: 80;
	stroke-dashoffset: 80;
	animation: drawline 1500ms cubic-bezier(0.24, 0.85, 0.37, 0.99) forwards;
}

.holder.goldplan .tail1{
	animation-delay: 1500ms;
}

.holder.goldplan .tail2{
	animation-delay: 1700ms;
}

.holder.goldplan .basket{
	animation-delay: 1300ms;
}

.holder.goldplan .arc{
	stroke-dasharray: 170;
	stroke-dashoffset: 170;
}

.holder.goldplan .arc1{
	animation-delay: 1500ms;
}

.holder.goldplan .arc2{
	animation-delay: 1700ms;
}

.holder.goldplan .line{
	stroke: #ffcf4c;
	opacity: 0.5;
	stroke-dasharray: 45;
	stroke-dashoffset: 45;
	animation: dashbackward 1000ms infinite linear forwards;
}

.holder.goldplan .line1{
	animation-delay: 1.4s;
}

.holder.goldplan .line2{
	animation-delay: 1.1s;
}

.holder.goldplan .line3{
	animation-delay: 1.4s;
}

.holder.silverplan .basket, .holder.silverplan .balloon, .holder.silverplan .basketedge, .holder.silverplan .rope{
	fill:none;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-width:10px;
	fill-rule:evenodd;
	stroke:#6868af;
}

.holder.silverplan .cloud, .holder.silverplan .arc{
	fill:none;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-width:10px;
	fill-rule:evenodd;
	stroke:#c8cbd3;
}

.holder.silverplan .cloud{
	stroke: #5C9AF9;
	opacity: 0.5;
}


.holder.silverplan .balloon{
	stroke-dasharray: 280;
	stroke-dashoffset: 280;
	animation: drawline 1500ms cubic-bezier(0.24, 0.85, 0.37, 0.99) forwards;
	animation-delay: 1s;
}

.holder.silverplan .arc, .holder.silverplan .rope, .holder.silverplan .basket, .holder.silverplan .basketedge{
	stroke-dasharray: 120;
	stroke-dashoffset: 120;
	animation: drawline 1000ms cubic-bezier(0.24, 0.85, 0.37, 0.99) forwards;
}

.holder.silverplan .arc3{
	animation-delay: 1.5s;
}

.holder.silverplan .arc2{
	animation-delay: 1.6s;
}

.holder.silverplan .arc1{
	animation-delay: 1.7s;
}

.holder.silverplan .rope3{
	animation-delay: 1.5s;
}

.holder.silverplan .rope2{
	animation-delay: 1.6s;
}

.holder.silverplan .rope1{
	animation-delay: 1.7s;
}

.holder.silverplan .basket{
	animation-delay: 1.7s;
}

.holder.silverplan .basketedge{
	animation-delay: 1.7s;
}

.holder.silverplan .cloud{
	stroke-dasharray: 120;
	stroke-dashoffset: 120;
	animation: cloud 2200ms infinite linear forwards;
}

.holder.silverplan .cloud1{
	animation-delay: 1.8s;
}

.holder.silverplan .cloud2{
	animation-delay: 1.9s;
}

.holder.bronzeplan .balloon, .holder.bronzeplan .tail, .holder.bronzeplan .rope{
	fill:none;
	stroke: #6868af;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-width:10px;
	fill-rule:evenodd;
}

.holder.bronzeplan .sparkle{
	fill:none;
	stroke:#e48964;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-width:10px;
	fill-rule:evenodd;
}

.holder.bronzeplan .balloon{
	stroke-dasharray: 315;
	stroke-dashoffset: 315;
	animation: drawline 1500ms cubic-bezier(0.24, 0.85, 0.37, 0.99) forwards;
	animation-delay: 1s;
}

.holder.bronzeplan .tail{
	stroke-dasharray: 50;
	stroke-dashoffset: 50;
	animation: drawline 1500ms cubic-bezier(0.24, 0.85, 0.37, 0.99) forwards;
	animation-delay: 1100ms;
}

.holder.bronzeplan .rope{
	stroke-dasharray: 85;
	stroke-dashoffset: 85;
	animation: drawline 1500ms cubic-bezier(0.24, 0.85, 0.37, 0.99) forwards;
	animation-delay: 1500ms;
}

.holder.bronzeplan .sparkle{
	stroke-dasharray: 80;
	stroke-dashoffset: 80;
	animation: sparkle 1200ms infinite linear forwards;
}

.holder.bronzeplan .dot1{
	animation-delay: 1200ms;
}

.holder.bronzeplan .dot2{
	animation-delay: 1300ms;
}

.holder.bronzeplan .dot3{
	animation-delay: 1400ms;
}

.holder.bronzeplan .rect{
	animation-delay: 1500ms;
}

.holder.faqplan .line{
	stroke: #6496cf;
	fill:none;
	stroke-linecap:round;
	stroke-linejoin:round;
	stroke-width: 10px;
}

.holder.faqplan .bubble{
	fill: #ffffff;
	stroke: #6868af;
	stroke-width:10px;
	stroke-linejoin:round;
	stroke-linecap:round;
	stroke-dasharray: 400;
	stroke-dashoffset: 400;
	animation: drawline 2s linear forwards;
	animation-delay: .2s;
	animation-iteration-count: 1;
}

.holder.faqplan .shadow{
	fill: none;
	stroke: #6868af;
	stroke-width:10px;
	stroke-linejoin:round;
	stroke-linecap:round;
	stroke-dasharray: 150;
	stroke-dashoffset: 150;
	animation: drawline 2s linear forwards;
	animation-delay: .9s;
	animation-iteration-count: 1;
	opacity: 0.2;
}

.holder.faqplan #line3{
	fill: none;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	animation: dash-line 2s linear infinite forwards;
	animation-delay: .9s;
}

.holder.faqplan #line2{
	fill: none;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	animation: dash-line 2s linear infinite forwards;
	animation-delay: .7s;
}

.holder.faqplan #line1{
	fill: none;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	animation: dash-line 2s linear infinite forwards;
	animation-delay: .5s;
}

@keyframes dash-line {
	50% { stroke-dashoffset: 0; }
	100% { opacity: 0; }
}

@keyframes sparkle {
	100% { stroke-dashoffset: 0; opacity: 0}
}

@keyframes cloud {
	50% { stroke-dashoffset: 0; }
	100% { opacity: 0; }
}

@keyframes dash {
	to{
		stroke-dashoffset: -45;
	}
}

@keyframes dashbackward {
	to{
		stroke-dashoffset: 135;
	}
}

@keyframes drawline {
	to{
		stroke-dashoffset: 0;
	}
}


.gold-title:after{
	background: rgba(254,206,76,1);
}

.holder.goldplan{
	border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
	animation: morph 6s linear infinite;
	animation-delay: 200ms;
}

.holder.goldplan{
	background: rgba(254,206,76, 0.05);
}

.silver-title:after{
	background: rgba(201,204,212,1);
}

.holder.silverplan{
	border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
	animation: morph 6s linear infinite;
	animation-delay: 200ms;
}

.holder.silverplan{
	background: rgba(201,204,212, 0.05);
}

.bronze-title:after{
	background: rgba(228,137,100,1);
}

.holder.bronzeplan{
	border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
	animation: morph 6s linear infinite;
	animation-delay: 200ms;
}

.holder.bronzeplan{
	background: rgba(228,137,100, 0.05);
}

.faq-title:after{
	background: rgba(142,162,218,1);
}

.holder.faqplan{
	border-radius: 42% 58% 70% 30% / 45% 45% 55% 55%;
	animation: morph 6s linear infinite;
	animation-delay: 200ms;
}

.holder.faqplan{
	background: rgba(142,162,218, 0.05);
}

.title-holder{
	align-items: center;
	justify-content: center;
}

.title-holder span{
	text-align: center;
	display: block;
}

.subtitle{
	letter-spacing: 0px;
}

.subtitle:before{
	display: none;
}

.table-holder{
	display: flex;
	flex-direction: row;
	cursor: pointer;
}

.table-holder>div{
	margin: 0 10px;
}
.table-holder>div:first-child{
	margin-left: 0;
}

.table-holder>div:last-child{
	margin-right: 0;
}

.price-plan{
	border-radius: 8px;
	box-shadow: 0 1px 3px 1px rgba(160, 161, 188, 0.14), 0 25px 40px -20px rgba(217,222,228,0);
	transition: box-shadow .3s ease-in-out;
	position: relative;
	padding-bottom: 35px;
}

.price-plan:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 5px;
	background: #3db797;
	transition: width .3s ease-in-out;
	border-radius: 0 0 8px 8px;
}

.price-plan:hover{
	box-shadow: 0 30px 75px -15px rgba(217,222,228,1), 0 25px 40px -20px rgba(217,222,228,1);
}

.price-plan:hover:after{
	width: 100%;
}

.price-plan h2{
	padding: 35px 0;
	text-align: center;
}

.price-plan .knob{
	align-self: center;
	border-radius: 5px;
	font: 600 16px/1.2 vazir,sans-serif;
	padding: 20px 10px;
	text-align: center;
	margin: 0 auto;
}

.outline{
	background: transparent;
	border: 2px solid #1868fb;
	color: #1868fb;
}

.solid{
	background: #1868fb;
	border: 2px solid #1868fb;
	color: #ffffff;
	box-shadow: 0 8px 24px rgba(55, 56, 60, 0.25);
}

.price-plan .list{
	margin: 20px 0 0 0;
	list-style: none;
	text-align: center;
	display: inline-block;
	vertical-align: top;
	padding: 10px;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.price-plan .list li{
	padding: 15px;
	font-size: 13px;
	text-align: center;
}

.price-plan .list li + li{
	border-top: 1px solid #eef2f8;
}

.features-link{
	display: flex;
	margin: 50px;
}

.features-link a{
	color: #1681dc;
}

.features-link a:hover{
	color: #1868fb;
}

.features-holder{
	margin-bottom: 100px;
}

.features{
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 3px 1px rgba(160, 161, 188, 0.14), 0 25px 40px -20px rgba(217,222,228,0);
}

.features:after{
	background: rgba(254,206,76,1);
}

.features>div>h2{
	text-align: right;
	margin-top: 50px;
}

.features>div>p{
	margin-bottom: 75px;
}

.anchor{
	width: 1px;
	height: 25px;
}

.light-separator{
	margin-bottom: 15px;
}

.one-col-table{
	margin: 0;
	padding: 0;
	list-style: none;
	margin-bottom: 50px;
}

.one-col-table > li{
	padding: 10px 22px;
	display: flex;
	position: relative;
	transition: padding-left 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
	pointer-events: none;
}

.one-col-table > li:nth-child(even){
	background: #f8f9fc;
}

.one-col-table .title{
	color: #082137;
	width: 30%;
	font-weight: normal;
	display: flex;
	align-items: center;
	padding-left: 20px;
	transition: color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.one-col-table .content{
	display: block;
	font: normal 14px/1.2px vazir, sans-serif;
	flex: 1;
	line-height: 1.51;
	padding-top: 7px;
	color: #6b7c93;
}

.tabbar{display: none;}

table{
	border-collapse: collapse;
	border-spacing: 0;
	margin-bottom: 75px;
}

.table-stripe{
	width: 100%;
	line-height: 1.24;
	color: #082137;
}

.table-stripe td:nth-child(2), .table-stripe td:nth-child(3), .table-stripe td:nth-child(4){
	display: table-cell;
}

.table-stripe td, .table-stripe th{
	text-align: center;
	padding: 29px 15px;
}

.table-stripe td:first-child, .table-stripe th:first-child{
	text-align: right;
	padding-right: 22px;
}

.table-stripe th{
	font-weight: bold;
	font-size: 1.5em;
	border-bottom: 2px solid #eef2f8;
}

.table-stripe td > span {
	display: inline-block;
	max-width: 500px;
	line-height: 1.51;
}

.table-stripe td > span.small{
	font: normal 14px vazir, sans-serif;
	color: #6b7c93;
}

.table-stripe tbody tr:nth-child(even) td {
	background: #f8f9fc;
}

.table-stripe td > span .circle.green{
	background: #1ABC9C;
}

.table-stripe td > span .circle.red{
	background: #E74C3C;
}

.table-stripe td > span .circle{
	position: relative;
	width: 12px;
	height: 12px;
	border-radius: 50%;
}

.table-stripe tbody tr td .circle:after{
	content: '';
	border-radius: 50%;
	position: absolute;
	top: 3px;
	left: 3px;
	width: 6px;
	height: 6px;
}

.table-stripe tbody tr:nth-child(odd) td .circle:after{
	background: #ffffff;
}
.table-stripe tbody tr:nth-child(even) td .circle:after{
	background: #f8f9fc;	
}

/* Smartphones (portrait) ----------- */
@media only screen and (min-width: 320px) and (max-width: 479px){

	.first-row{min-height: 500px;}
	.title-holder h1{text-align: center;}

	.anchor{height: 125px;}
	.table-holder{flex-wrap: wrap;}
	.table-holder>div:nth-child(1), .table-holder>div:nth-child(2), .table-holder>div:nth-child(3){display: none;}
	.price-plan{box-shadow: none;}
	.price-plan:hover{box-shadow: none;}
	.price-plan:hover:after{width: 0;}
	.features-link{margin: 25px 50px 50px 50px;}
	.sec-two{margin-top: 0;}
	.table-holder div>h2{display: none;}

	.table-holder[data-active-plan='golden-plan'] div:nth-child(2){display: block;}
	.table-holder[data-active-plan='silver-plan'] div:nth-child(3){display: block;}
	.table-holder[data-active-plan='bronze-plan'] div:nth-child(1){display: block;}

	.table-holder>div{margin: 15px 0;}
	.title-holder span{display: inline;}

	.features-holder{margin-bottom: 0px; }

	.one-col-table > li{padding: 22px 22px 10px 22px; flex-direction: column;}
	.one-col-table .title{width: auto;display: block;line-height: 1.28}
	.one-col-table .content{margin-top: 0}

	.tabbar{display: flex;height: 64px;position: relative;margin-bottom: 25px;}
	.tabbar input{display: none;outline: none;box-shadow: none;}
	.tabbar input:active{outline: none;}
	.tabbar input:nth-of-type(1):checked + label + input + label + input + label + span {transform: translateX(200%)}
	.tabbar input:nth-of-type(2):checked + label + input + label + span {transform: translateX(100%)}
	.tabbar input:nth-of-type(3):checked + label + span {transform: translateX(0)}
	.tabbar input:checked + label span {transform: translateY(-14px); opacity: 1;}
	.tabbar label{flex: 0 0 33.33%; display: flex;justify-content: center;align-items: center;position: relative; cursor: pointer;z-index: 1;}
	.tabbar label span{font: bold 1.2rem vazir, sans-serif;color: #082137;display: block;-webkit-backface-visibility: hidden;transition: transform .4s cubic-bezier(.2, .64, .48, 1.12), opacity .4s ease, color .4s ease;transform: translateY(-8px) scale(1);position: absolute;left: 0;right: 0;bottom: 0;text-align: center;opacity: 0.5;transform-origin: 50% 0;}
	.tabbar > span{display: block;position: absolute;left: 0;top: 0;bottom: 0;width: 33.33%;transition: -webkit-transform 0.4s cubic-bezier(0.2, 0.64, 0.48, 1.12);transition: transform 0.4s cubic-bezier(0.2, 0.64, 0.48, 1.12);transition: transform 0.4s cubic-bezier(0.2, 0.64, 0.48, 1.12), -webkit-transform 0.4s cubic-bezier(0.2, 0.64, 0.48, 1.12);-webkit-transform: translateX(0);transform: translateX(0);-webkit-backface-visibility: hidden;}
	.tabbar > span:after{content: ''; width: 94px; height: 2px; display: block; background: #037ef3; position: absolute; bottom: 0; left: 50%;margin: -14px 0 0 -47px;}

	.table-stripe thead.cols{display: none !important;}
	.table-stripe td:nth-child(1){width: 60%;}
	.table-stripe-wrap tbody td:nth-child(2), .table-stripe-wrap tbody td:nth-child(3), .table-stripe-wrap tbody td:nth-child(4){display: none;}
	.table-stripe-wrap[data-active-plan='golden'] tbody td:nth-child(4){display: table-cell;}
	.table-stripe-wrap[data-active-plan='silver'] tbody td:nth-child(3){display: table-cell;}
	.table-stripe-wrap[data-active-plan='bronze'] tbody td:nth-child(2){display: table-cell;}
	
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 480px) and (max-width: 767px){

	.main-title{text-align: center;}
	.main-text{text-align-last: center;}
	.first-row{min-height: 500px;}

	.table-holder>div{max-width: 33.333%;}
	.table-holder>div:first-child, .table-holder>div:last-child{margin: 0;}
	.title-holder p{text-align: center;}
	.title-holder span{display: inline;}

	.table-stripe td:nth-child(1){width: 35%;}
	.table-stripe td > span.small span{display: block;}	
}

/* Tablets ----------- */
@media only screen and (min-width: 768px) and (max-width: 991px){
	.widgets{display: none;}

	.main-title{text-align: center;}
	.main-text{text-align-last: center;}
	.first-row{min-height: 500px;}

	.title-holder p{text-align: center;}
	.title-holder span{display: inline;}

	.table-holder>div{max-width: 41.667%;}
	.table-holder>div:first-child, .table-holder>div:last-child{margin: 0;}

	.features-holder{padding: 0}
	.features-holder>a{box-shadow: none;}
	.features-holder>a h2{font-size: 1.2rem;}

	.table-stripe td > span.small span{display: block;}	

}

/* Desktops and laptops and Tablets (landscape) ----------- */
@media only screen and (min-width: 992px) and (max-width: 1140px){
	.features-holder>a:first-child, .features-holder>a:last-child{margin-left: 0; margin-right: 0}	
}