html,
body {
	background: #ffffff;
	/*font-family: 'Raleway', 'Open Sans' sans-serif;*/
	font-size: 16px;

	-webkit-font-smoothing: subpixel-antialiased !important;
	-moz-font-smoothing: subpixel-antialiased !important;
	-ms-font-smoothing: subpixel-antialiased !important;
	-0-font-smoothing: subpixel-antialiased !important;

	text-rendering: optimizeLegibility !important;

	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%; 

	-webkit-overflow-scrolling: touch;
	-moz-overflow-scrolling: touch;
	-ms-overflow-scrolling: touch;
	-o-overflow-scrolling: touch;
	overflow-scrolling: touch;
}
a {
	text-decoration: none;
	-webkit-transition: all .25s ease-in-out;
	-moz-transition: all .25s ease-in-out;
	-ms-transition: all .25s ease-in-out;
	-o-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
}
a:focus {
	text-decoration: none;
	outline:none;
	outline-offset:0;
}
a:hover {
	color: #f15b5d;
	text-decoration: none;
}
.plan-details p {
	color: #000;
	font-family: 'Open Sans';
	font-size: 1em;
	font-weight: 300;
	line-height: 22px;
}
ul {
	margin: 0px;
	padding: 0px;
}
li {
	display: inline-block;
}
img {
	max-width: 100%;
	height: auto;
}

 
h1 {
	font-size: 2.75em;
}
h2 {
	font-size: 2.18em;
}
h3 {
	font-size: 1.75em;
}
h4 {
	font-size: 1.375em;
}
h5 {
	font-size: 1.125em;
}
h6 {
	font-size: 1em;
}
h1,h2,h3,h4,h5,h6 {
	color: #0d0d0d;
	font-weight: 300;
	margin: 0px;
}

.item-description {
	font-size: 14px;
	padding-top: 14px;
	letter-spacing: 0.115px;
	word-spacing: -0.5px;
}
.pricing-tables {
	padding: 120px 0px;
}
.bottom-style {
	margin: 0 auto;
	position: relative;
	width: 100px;
}
.bottom-style:before {
	content: '';
	position: absolute;
	border-bottom: 1px solid #cccccc;
	width: 60px;
	left: 50%;
	margin-left: -30px;
	bottom: 0px;
}
.bottom-style:after,
.bottom-style span:before {
	content: '';
	position: absolute;
	background: #201a4e;
	height: 5px;
	width: 20px;
	bottom: -2px;
}
.bottom-style:after {
	left: 0;
}
.bottom-style span:before {
	right: 0;
}
.section-title {
	font-family: 'Raleway';
	font-size: 1.625em;
	font-weight: 300;
	text-transform: uppercase;
}
.section-description {
	color: #808080;
	font-size: 1.05em;
	font-weight: 300;
	padding-top: 7px;
	margin: 0px;
	padding-bottom: 22px;
	text-transform: capitalize;
}
.planning-area {
	overflow: auto;
	padding-top: 60px;
}
.plan-name {
	font-size: 1.125em;
	font-weight: 400;
	padding: 17px 0px;
	text-transform: uppercase;
}

/* 3. -------- Pricing Tables Style ---------*/

/*3.1 ------- Format-1 -------*/
.format-1 .item {
	background: #ffffff;
	overflow: auto;

	-webkit-transition: all .35s  ease-out;
	-moz-transition: all .35s  ease-out;
	-ms-transition: all .35s  ease-out;
	-o-transition: all .35s  ease-out;
	transition: all .35s  ease-out;
}
.format-1 .item .plan-name {
	color: #ffffff;
}
.format-1 .item-1 .plan-name {
	background: #55c4da;
}
.format-1 .item-2 .plan-name {
	background: #d9a255;
}
.format-1 .item-3 .plan-name {
	background: #97d955;
}
.format-1 .item-4 .plan-name {
	background: #c355d9;
}
.format-1 .item-5 .plan-name {
	background: #808080;
}
.format-1 .plan-cost {
	color: #ffffff;
	padding-bottom: 13px;
}
.format-1 .item-1 .plan-cost {
	background: #69d2e7;
}
.format-1 .item-2 .plan-cost {
	background: #e8b368;
}
.format-1 .item-3 .plan-cost {
	background: #a8e868;
}
.format-1 .item-4 .plan-cost {
	background: #d368e8;
}
.format-1 .item-5 .plan-cost {
	background: #8c8c8c;
}
.format-1 .cost {
	font-size: 3.43em;
	font-weight: 600;
}
.cent,
.duration {
	position: relative;
}
.duration {
	padding-left: 15px;
	text-transform: lowercase;
}
.cent:before,
.duration:before {
	position: absolute;
	left: 0px;
	top: 0px;
}
.cent:before {
	content: '.';
	left: -5px;
}
.duration:before {
	content: "/";

	-webkit-transform: rotate(-55deg);
	-moz-transform: rotate(-55deg);
	-ms-transform: rotate(-55deg);
	-o-transform: rotate(-55deg);
	transform: rotate(-55deg);
}
.plan-details li {
	display: block;
	padding: 15px 25px;
	position: relative;
    border-right: 1px solid #ecf0f1;
}
.plan-details li:before {
	content: '';
	width: 100%;
	height: 1px;
	background: #ecf0f1;
	bottom: 0px;
	left: 0;
	/*margin-left: -72px;*/
	position: absolute;
}
.plan-details p {
	display: inline-block;
	margin: 0px;
}
.plan-bottom {
	padding: 30px;
}
.plan-bottom .btn {
	margin: 0px;
}

/*3.2 ------ Format-2 -------*/

.pricing-tables .format-2 {
	background: #ecf0f1;
	overflow: auto;
	text-align: center;
	padding: 60px;
}
.format-2 .item {
	background: #ffffff;

	-webkit-transition: all .35s  ease-out;
	-moz-transition: all .35s  ease-out;
	-ms-transition: all .35s  ease-out;
	-o-transition: all .35s  ease-out;
	transition: all .35s  ease-out;
}
.format-2 .plan-name,
.format-3 .plan-name {
	font-size: 1em;
	font-weight: 700;
	/*text-transform: uppercase;*/
	padding-top: 55px;
}
.format-2 .plan-description {
	font-size: .93em;
	font-weight: 400;
	padding-bottom: 23px;
	padding-top: 10px;
}
.format-2 .plan-cost  {
	background: #201a4e;
	border: 5px solid #201a4e;
	border-radius: 50%;
	color: #ffffff;
	font-family: 'Open Sans';
	margin: 0 auto;
	width: 150px;
	height: 150px;
	padding-top: 20px;

	-webkit-transition: all .35s  ease-out;
	-moz-transition: all .35s  ease-out;
	-ms-transition: all .35s  ease-out;
	-o-transition: all .35s  ease-out;
	transition: all .35s  ease-out;
}
.format-2 .item:hover .plan-cost {
	background: #ffffff;
	border: 3px solid #201a4e;
	color: #201a4e;
}
.format-2 .currency {
	font-size: 1.43em;
	font-weight: 800;
}
.format-2 .cost {
	font-size: 2.43em;
	font-weight: 800;
}
.format-2 .duration {
	padding-left: 0px;
	text-transform: capitalize;
}
.format-2 .duration:before {
	content: '';
}
.format-2 .plan-details {
	padding-top: 20px;
}
.format-2 .plan-details li {
	padding: 8px 20px;
}
.offer-limit {
	display: inline-block;
	font-size: .875em;
	color: #737373;
}
.format-2 .btn,
.format-3 .btn {
	background: #201a4e;
	border-color: #201a4e;
	color: #ffffff;
	font-size: 1em;
	padding: 13px 40px;
}
.format-2 .btn:hover,
.format-3 .btn:hover {
	background: #ffffff;
	color: #201a4e;
} 

/*3.3 ------ Format-3 ------*/

.planning-area .format-3 {
	background: #ecf0f1;
	overflow: hidden;
	padding: 30px 30px;
}
.format-3 .item {
	background: #ffffff;
}
.format-3 .col-sm-3, .format-3 .col-sm-2, .format-3 .col-sm-4{
	padding: 0px;
}
.format-3 .item-1 .plan-top {
	background: #ecf0f1;
}
.format-3 .item-1 .title {
	background: #f5f9fa;
	color: #201a4e;
	font-size: 1em;
	font-weight: 700;
	/*margin-top: 25px;*/
	padding: 7px 25px;
	text-transform: uppercase;
}
.format-3 .item-1 li {
	padding: 15px 25px;
}
.format-3 .item-1 li:before {
	left: 25px;
	margin-left: 0px;
} 
.format-3 .plan-name {
	padding: 25px 0px;
}
.format-3 .plan-cost {
	background: #f5f9fa;
	color: #201a4e;
	font-family: 'Open Sans';
	padding-bottom:15px;
}
.format-3 .currency {
	font-size: 1.43em;
	font-weight: 800;
}
.format-3 .cost {
	font-size: 3em;
	font-weight: 800;
}
.format-3 .duration:before {
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
}
.format-3 .has-ability .ability-icon {
	/*color: #4fe168;*/
}
.format-3 .has-not-ability .ability-icon {
	/*color: #ff0000;*/
}
/*.format-3 .has-not-ability i {
	color: #201a4e;

	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}*/
.format-3 .plan-bottom {
	/*padding-top: 60px;*/
}
.format-3 .item-1 .plan-bottom {
	padding: 55px 0px;
}









/* 4 ======= RESPONSIVE STYLES ==========*/

@media screen and (min-width: 1024px) and (max-width: 1169px) { 
    .format-3 .item-1 .title {
        font-size: 1.25em;
        padding: 27px 25px 27px 25px;
    }
    .pricing-tables .format-2 {
        padding: 30px;
    }
    .format-3 .item-1 li { padding: 20px 10px }
}
@media screen and (min-width: 993px) and (max-width: 1024px) { 

    .format-3 .item-1 .title {
        font-size: 1.15em;
        padding: 29px 25px 29px 25px;
    }
    .format-3 .item-1 li { padding: 20px 10px }
}
@media screen and (min-width: 901px) and (max-width: 992px) { 
    .plan-details p {
        letter-spacing: 0px;
        line-height: 23px;
    }
    .format-3 .item-1 .plan-details li:before {
        left: 0px;
    }
    .plan-details li { padding: 5px }
    .format-1 .cost { font-size: 2.35em }
    .format-2 .cost,
    .format-3 .cost { font-size: 2.5em }
    .pricing-tables .format-2 { padding: 20px }
    .format-2 .plan-cost {
        width: 120px;
        height: 120px;
    }
    .pricing-tables .format-2 .btn { padding: 12px 35px }
    .planning-area .format-3 { padding: 15px 25px }
    .format-3 .item-1 .title {
        font-size: 1.15em;
        padding: 19px 15px 18px 15px;
    }
    .format-2 .plan-name, .format-3 .plan-name {
        font-size: 1.25em;
    }
    .format-3 .item-1 li { padding: 4px 5px }
    .format-2 .btn,
    .format-3 .btn { 
        font-size: .875em;
        padding: 10px 20px 
    }
    .format-3 .item-1 .plan-bottom { padding: 70px 0px }
}
@media screen and (min-width: 861px) and (max-width: 900px) { 
    .plan-details p {
        letter-spacing: 0px;
        line-height: 23px;
    }
    .format-3 .item-1 .plan-details li:before {
        left: 0px;
    }
    .plan-details li { padding: 5px }
    .format-1 .cost { font-size: 2.35em }
    .format-2 .cost,
    .format-3 .cost { font-size: 2.5em }
    .pricing-tables .format-2 { padding: 20px }
    .format-2 .plan-cost {
        width: 120px;
        height: 120px;
    }
    .pricing-tables .format-2 .btn { padding: 12px 35px }
    .planning-area .format-3 { padding: 15px 25px }
    .format-3 .item-1 .title {
        font-size: 1.15em;
        padding: 19px 15px 18px 15px;
    }
    .format-2 .plan-name, .format-3 .plan-name {
        font-size: 1.25em;
    }
    .format-3 .item-1 li { padding: 4px 5px }
    .format-2 .btn,
    .format-3 .btn { 
        font-size: .875em;
        padding: 10px 20px 
    }
    .format-3 .item-1 .plan-bottom { padding: 70px 0px }
}
@media screen and (min-width: 768px) and (max-width: 860px) { 
    .plan-details p {
        letter-spacing: 0px;
        line-height: 23px;
    }
    .format-3 .item-1 .plan-details li:before {
        left: 0px;
    }
    .plan-details li { padding: 5px }
    .format-1 .cost { font-size: 2.35em }
    .format-2 .cost,
    .format-3 .cost { font-size: 2.5em }
    .pricing-tables .format-2 { padding: 20px }
    .format-2 .plan-cost {
        width: 120px;
        height: 120px;
    }
    .pricing-tables .format-2 .btn { padding: 12px 35px }
    .planning-area .format-3 { padding: 15px 25px }
    .format-3 .item-1 .title {
        font-size: 1.15em;
        padding: 19px 15px 18px 15px;
    }
    .format-2 .plan-name, .format-3 .plan-name {
        font-size: 1.25em;
    }
    .format-3 .item-1 li { padding: 4px 5px }
    .format-2 .btn,
    .format-3 .btn { 
        font-size: .875em;
        padding: 10px 20px 
    }
    .format-3 .item-1 .plan-bottom { padding: 70px 0px }
    
}
@media screen and (min-width: 721px) and (max-width: 767px) { 

    .pricing-tables .format-2 { padding: 15px 30px }
    .planning-area .format-2 .item { margin: 15px 0px }
    .pricing-tables .format-3 { padding: 15px 30px }
    .planning-area .item {
        margin: 15px 0px;
        vertical-align: text-top;
    }
    .format-3 .item-1 .plan-bottom { display: none }
    .format-3 .item-1 .title { padding: 22px 25px }
    .format-3 .col-sm-3 {
        padding: 0px 15px;
    }

}

@media screen and (min-width: 641px) and (max-width: 720px) { 

    .pricing-tables .format-2 { padding: 15px 30px }
    .planning-area .format-2 .item { margin: 15px 0px }
    .pricing-tables .format-3 { padding: 15px 30px }
    .planning-area .format-3 .item {
        margin: 15px 0px;
        vertical-align: text-top;
    }
    .format-3 .item-1 .plan-bottom { display: none }
    .format-3 .item-1 .title { padding: 22px 25px }
    .format-3 .col-sm-3 {
        padding: 0px 15px;
    }
}

@media screen and (max-width: 640px) { 
    .section-description {
        font-size: .93em;
        padding: 0px 15px 22px 15px;
    }
    .pricing-tables .format-2 {
        padding: 30px 0px;
    }
    .pricing-tables .item {
        margin: 15px 0px;
        text-align: center;
    }
    .pricing-tables .col-sm-3,
    .pricing-tables .col-xs-6 {
        width: 100%;
        padding: 0px 15px;
    }
    .format-3 .item-1 li:before {
        left: inherit;
        margin-left: -72px;
    }
    .format-3 .item-1 .plan-name {
        display: none;
    }
    .format-3 .item-1 .plan-bottom {
        padding: 45px 0px;
    }
    .planning-area .format-3 {
        padding: 20px;
    }
}