/*^
 * 严微工作室
 * @authro      : yanwei
 * @created     : 2017-11-14
 * @url         : http://www.ywcms.com
 * @Page        : 首页
 */

/*banner样式*/
.es-poster { position: relative; background: #fff; margin: 0 auto; max-height: 596px; min-width: 1200px;}
.main-slider { background: #475168; color: #fff; z-index: 1; position: relative; overflow:hidden;}
.slider-colored { z-index: 1; position: relative; border-top: solid 1px #eee; border-bottom: solid 1px #eee;}
.slide_title { font-weight: 300; color:#F77B6F; text-transform: uppercase; font-size:35px;}
.slide_subtitle { font-weight: 400; padding: 5px; color:#fff; text-transform: uppercase; font-size:18px;}
.slide_list_item { font-weight: 400; padding: 5px; color:#fff; text-transform: uppercase; font-size:14px;}
.slide_desc { color:#fff; font-size:14px; line-height:24px; font-weight: lighter;}
.slide_desc_bordered { border-left: 3px solid #ddd !important; padding-left: 5px;}
.slide_btn { font-weight: 300; background:#F77B6F; padding:15px 20px; color:#fff; font-size:14px; text-transform: uppercase; cursor:pointer;}
.slide_btn:hover, .slide_btn:focus { font-weight: 300; background: #e77368; padding:15px 20px; color:#fff; font-size:14px; text-transform: uppercase; cursor:pointer;}
.red-txt { color:#b0400e; font-size:14px; line-height:24px; font-weight: lighter;}
.dark-text { color: #797d87;}
.yellow-txt { color: #ffe582;}

.slide_title2 { color:#fff; font-size:36px; font-weight:bold; line-height:42px; text-transform: uppercase;}
.banner_text{padding:20px 0; font-size:14px; color:#fff; overflow:hidden;}
.banner_text .p1,.banner_text .p2{float:left; width:250px; line-height:24px;}

.index-solution{ width: 100%; margin: 0 auto 35px; overflow: hidden; min-width: 1250px;}

.pro-title {
	text-align: center;
	font-family: PingFangSC-Regular;
	color: #A5A5A5;
	padding-top: 45px
}
.pro-title h3 {
	position: relative;
	font-size: 30px;
	font-weight: 600;
	color: #474e60;
	display: inline-block
}
.pro-title h3.white {
	position: relative;
	font-size: 30px;
	font-weight: 600;
	color: #fff;
	display: inline-block
}
.pro-title h3 i {
	display: inline-block;
	width: 122px;
	height: 5px;
	background: url(../images/index/l_left.png);
	position: relative;
	left: -30px;
	top: -8px
}
.pro-title h3 i.l_right {
	background: url(../images/index/l_right.png);
	left: 30px
}
.pro-title h3 i.l_left1 {
	display: inline-block;
	width: 122px;
	height: 5px;
	background: url(../images/index/l_left1.png);
	position: relative;
	left: -30px;
	top: -8px
}
.pro-title h3 i.l_right1 {
	background: url(../images/index/l_right1.png);
	left: 30px
}

.in_ztfa{ width:96%; margin:35px auto 0; padding-bottom:70px;}
.in_ztfa1{ width:100%;}
.in_ztfa1 .hd{}
.in_ztfa1 .hd ul{ min-height:410px;}
.in_ztfa1 .hd ul li{ float:left; width:20%; min-height:388px; border:1px solid #ddd; margin-right:-1px; text-align:center; transition:all 0.5s ease 0s; cursor:pointer;}
.in_ztfa1 .hd ul li .hdb{ width:100%; height:136px; background:#efefef; padding-top:25px; margin-bottom:20px; transition:all 0.5s ease 0s;}
.in_ztfa1 .hd ul li i{ display:block; width:36px; height:36px; margin:0px auto; background:url(../images/index/sy_cptb1.png) no-repeat;}
.in_ztfa1 .hd ul li h2{ font-size:20px; color:#333; padding-top:8px; font-weight: normal;}
.in_ztfa1 .hd ul li p{ font-size:12px; color:#ccc; line-height:24px;}
.in_ztfa1 .hd ul li span{ display:block; line-height:35px;}
.in_ztfa1 .hd ul li a{ display:block; line-height:35px;}
.in_ztfa1 .hd ul li.on{ height:30px;  background:#fff; border:1px solid #2b912d; width:20%; min-height:400px; position:relative; z-index:10; box-shadow: 0px 5px 5px #2b912d; transition:all 0.5s ease 0s;}
.in_ztfa1 .hd ul li.on .hdb{ background:#2b912d; width:100%; height:150px; padding-top:35px; margin-bottom:20px;  transition:all 0.5s ease 0s;}
.in_ztfa1 .hd ul li.on i{ display:block; width:36px; height:36px; margin:0px auto; background:url(../images/index/sy_cptb1.png) no-repeat;}
.in_ztfa1 .hd ul li.on h2{ font-size:20px; color:#fff; padding-top:8px; font-weight: normal;}
.in_ztfa1 .hd ul li.on p{ font-size:12px; color:#fff; line-height:24px;}

.in_ztfa1 .hd ul li i.cbsj{ background-position:0px -135px;}
.in_ztfa1 .hd ul li.on i.cbsj{ background-position:0px 0px;}

.in_ztfa1 .hd ul li i.cbsy{ background-position:-218px -135px;}
.in_ztfa1 .hd ul li.on i.cbsy{ background-position:-218px 0px;}

.in_ztfa1 .hd ul li i.cbcrm{ background-position:-444px -135px;}
.in_ztfa1 .hd ul li.on i.cbcrm{ background-position:-444px 0px;}

.in_ztfa1 .hd ul li i.cbyx{ background-position:-672px -135px;}
.in_ztfa1 .hd ul li.on i.cbyx{ background-position:-672px 0px;}

.in_ztfa1 .hd ul li i.cbapi{ background-position:-908px -135px;}
.in_ztfa1 .hd ul li.on i.cbapi{ background-position:-908px 0px;}

.index-case{ width: 100%; min-width: 1200px; margin: 0 auto; overflow: hidden; background: url(../images/index/case_bg.jpg) repeat-y center; min-height: 645px; padding-bottom: 50px;}
.index-case-con{
	width: 96%;
	margin: 45px auto 0;
	overflow: hidden;
}
.am-tabs-default .am-tabs-nav{
	background: none;
	width: 100%;
	margin: 0 auto;
}
.am-tabs-default .am-tabs-nav li{
	width: 190px;
	float: left;
	margin: 0px 10px;
}
.am-tabs-default .am-tabs-nav>.am-active a{
	background: #2b912d;
	border-radius: 25px;
}
.am-tabs-default .am-tabs-nav a{
	background: #dcdcde;
	border-radius: 25px;
}
.am-tabs-bd{
	border: none;
	margin-top: 35px;
}
.am-tabs-bd .am-tab-panel{
	width: 100%;
	float: left;
	overflow: hidden;
	padding: 0px;
}
.case-item{
	width: 23.5%;
	border: 1px solid #ddd;
	margin: 0 10px 20px;
	float: left;
	padding: 10px;
	background: #fff;
	display: block;
	box-shadow: 0 0 10px 1px rgba(200,188,188,0.5);
	transition:all 0.2s;
	cursor: pointer;
}
.case-item:hover {
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
.case-item-img{
	width: 100%;
	float: left;
	margin-bottom: 10px;
}
.case-item-img img{
	width: 359px;
	height: 320px;
}
.case-item-txt{
	width: 100%;
	float: left;
	position: relative;
}
.case-item-txt h1{
	width: 100%;
	font-size: 14px;
	color: #333;
	font-weight: bold;
	float: left;
	position: relative;
}
.case-item-txt p{
	width: 80%;
	font-size: 12px;
	color: #999;
	line-height: 24px;
	float: left;
	position: relative;
}
.case-item-txt span{
	width: 38px;
	height: 38px;
	position: absolute;
	top: 20px;
	right:10px;
}

.abmore{display:block; width:180px; height:38px; line-height:36px; font-size:14px; text-align:center; border:1px solid #2b912d; background:#fff; border-radius:100px; margin:auto; color: #333; margin-top: 50px;}
.abmore:hover,.abmore:active{background:#2b912d; color:#FFF; border:1px solid #2b912d;}

.index-ad{ width: 100%; min-width: 1200px; margin: 0 auto; overflow: hidden; height: 169px; background: url(../images/index/ad01.jpg) no-repeat center;}
.index-service{ width: 100%; min-width: 1200px; margin: 0 auto; overflow: hidden; background: url(../images/index/service_bg.jpg) no-repeat center; height: 618px;}
.service-con{ width: 96%; margin: 120px auto 0; overflow: hidden;}
.service-box{ width: 850px; float: right; height: 275px; background: url(../images/index/service_con.png) no-repeat;}
.service-box-wap{ display: none;}
.service-itemA{
  width: 260px;
  height: 65px;
  float: left;
  margin: 12px 0px 0px 5px;
}
.service-itemA h1,.service-itemB h1,.service-itemC h1,.service-itemD h1,.service-itemE h1,.service-itemF h1{
  width: 260px;
  float: left;
  font-size: 18px;
  color: #fff;
  line-height: 24px;
  text-align: center;
}
.service-itemA p,.service-itemB p,.service-itemC p,.service-itemD p,.service-itemE p,.service-itemF p{
  width: 260px;
  float: left;
  font-size: 12px;
  color: #fff;
  line-height: 24px;
  text-align: center;
}
.service-itemB{
  width: 260px;
  height: 65px;
  float: left;
  margin: 12px 0px 0px 320px;
}
.service-itemC{
  width: 260px;
  height: 65px;
  float: left;
  margin: 35px 0px 0px 5px;
}
.service-itemD{
  width: 260px;
  height: 65px;
  float: left;
  margin: 35px 0px 0px 320px;
}
.service-itemE{
  width: 260px;
  height: 65px;
  float: left;
  margin: 35px 0px 0px 5px;
}
.service-itemF{
  width: 260px;
  height: 65px;
  float: left;
  margin: 35px 0px 0px 320px;
}

.index-join{ width: 100%; min-width: 1200px; margin: 0 auto; overflow: hidden; background: url(../images/index/join_bg.jpg) no-repeat center; height: 512px;}
.join-con{ width: 1200px; margin: 50px auto 0; overflow: hidden; text-align: center;}
.index-news{width: 100%; min-width: 1200px; margin: 0 auto; overflow: hidden;}
.news-con{width: 97%; margin: 35px auto 50px; overflow: hidden;}
.news-item{
	box-sizing: border-box;
    position: relative;
    float: left;
    width: 31.8%;
    border: 1px solid #ccc;
		margin: 0 10px;
		transition:all 0.2s;
		cursor: pointer;
}
.news-item:hover {
	-moz-transform: translateY(-5px);
	-ms-transform: translateY(-5px);
	-webkit-transform: translateY(-5px);
	transform: translateY(-5px);
}
.news-item > ul{
	overflow: hidden;
	float: left;
	width: 98%;
	height: 188px;
	position: relative;
	margin: 160px 10px 0 10px;
}
.news-item > ul > li {
    display: block;
    line-height: 24px;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background: url(../images/index/latest.png) 0 50% no-repeat;
    border-bottom: 1px solid #ccc;
    text-align: left;
		float: left;
		width: 100%;
		padding: 10px 0 10px 40px;
		margin-bottom: 0px;
}
.news-item > ul > li > a {
    color: #333;
}
.news-item > .more {
    display: block;
    width: 83px;
    height: 30px;
    margin: 5px auto;
    background: url(../images/index/more.png) no-repeat;
		overflow: hidden;
}
.button-box {
    position: absolute;
    top: 50px;
    left: 36%;
    display: inline-block;
    width: 160px;
    height: 52px;
    border: 1px solid #fff;
    line-height: 52px;
    color: #fff;
    font-size: 24px;
		text-align: center;
}

.latest-news {
    background: url(../images/index/newsbg1.jpg) no-repeat;
}
.industry-news {
    background: url(../images/index/newsbg2.jpg) no-repeat;
}
.recommend-news {
    background: url(../images/index/newsbg3.jpg) no-repeat;
}

.index-link{
	width: 100%;
	margin: 0 auto;
	background: #f6f6f6;
	overflow: hidden;
}
.index-link-box{
	width: 1200px;
	margin: 0 auto;
	overflow: hidden;
}
.news-box{ width:500px; margin-left:50px; padding:50px  0;}
.news-box dt{ color: #333; font-size: 16px; font-weight: normal;}
.news-box dt > span{ font-size:20.5px; margin-right:10px; margin-left:5px;}
.news-box dt > a{ position: absolute; right: 0;top:5px; color: #e9d7af;}
.news-box dd  a.white:hover{color: #fff; text-decoration: underline;}
.news-box dt > a:hover{ text-decoration: underline;}
.news-box dd{ line-height:20px; margin-top:37px; float: left;}

.bank-box{width:440px;}
.bank-box a,.bank-box span,.bank-box em{float:left; display:inline; margin:6px 12px 6px 0;}
.bank-box1 span{margin:8px 17px 8px 0; display: inline-block; height: 30px;}
.bank-box img{
	transition: all 0.2s ease;
}
.bank-box em:hover img,.bank-box span:hover img{
	transform: translateY(-5px);
}
#section01{
	background: #2b912d;
	width: 100%;
	margin: 0 auto;
	padding: 105px 0;
	height: 350px;
	box-sizing: border-box;
}
.section01{
	width: 96%;
	margin: 0 auto;
	overflow: hidden;
}
.section01 ul {
	margin: 0 auto;
	max-width: 1920px;
}
.section01 li {
	width: 33.33%;
	float: left;
	position: relative;
	color: #fff;
	font-size: 18px;
	box-sizing: border-box;
	text-align: center;
}
.section01 li > span {
	margin-bottom: -1px;
	display: block;
	font-family: auto;
	font-size: 82px;
	font-weight:bold;
	line-height: 1.2;
}
.section01 li:nth-child(2) > span {
	margin-left: -10px;
}
.section01 li:nth-child(3) > span {
	margin: 0px 0 0px;
}
.f14{
	font-size:44px;
}
.section02 {
	padding-bottom: 62px;
	background: #F5F5F5;
	width: 100%;
	margin: 0 auto;
	display: flex;
    flex-direction: column;
    position: relative;
    z-index: 9999;
}
.section02 > p {
	margin-bottom: 10px;
	color: #333;
	font-size: 14px;
	text-align: center;
	opacity: 0;
	transform: translateY(20px);
	-webkit-transform: translateY(20px);
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition-delay: 1.2s;
	-webkit-transition-delay: 1.2s;
}
.section02 > .title {
	margin-bottom: 22px;
	width: 100%;
	height: 76px;
	overflow: hidden;
	color: #fff;
	font-size: 30px;
	font-weight: bold;
	line-height: 76px;
	text-align: center;
	background: #f7b52c;
	box-sizing: border-box;
	transition: all 0.5s linear;
	-webkit-transition: all 0.5s linear;
	padding: 25px 0;
	overflow: hidden;
}
.section02.active > .title {
	width: 100%;
}
.section02 > .title p {
	padding: 0 30px;
	opacity: 0;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	transition-delay: 0.8s;
	-webkit-transition-delay: 0.8s;
}
.section02.active > p,
.section02.active > .title p {
	transform: translateY(0);
	-webkit-transform: translateY(0);
	opacity: 1;
}
.section02.active > .section02_desc{
	width:1200px;
	margin: 0 auto;
	text-align: center;
	font-size: 14px;
	line-height: 24px;
}
.section02_item{
	width:95%;
	margin: 0 auto;
	padding-top: 80px;
}
.section02_item > .item-box{
	width:50%;
	height: 400px;
	margin-bottom: 50px;
	float: left;
	position: relative;
	overflow: hidden;
}
.section02_item > .item01,
.section02_item > .item02,
.section02_item > .item03,
.section02_item > .item04{
	padding: 40px;
	cursor: pointer;
}
.section02_item > .item01 h1,
.section02_item > .item02 h1,
.section02_item > .item03 h1,
.section02_item > .item04 h1{
	font-size:20px;
	font-weight: bold;
	line-height: 32px;
	padding-bottom: 20px;
	color: #fff;
}
.section02_item > .item01 p,
.section02_item > .item02 p,
.section02_item > .item03 p,
.section02_item > .item04 p{
	font-size:16px;
	line-height: 24px;
	color: #fff;
}
.section02_item > .item-box > .icon-arrow{
	background: url(../images/index/icon1.png) no-repeat;
	width: 60px;
	height: 7px;
	float: right;
	margin-top: 200px;
}
.section02_item > .item-box:hover > .icon-arrow{
	background: url(../images/index/icon01.png) no-repeat;
}
.section02_item > .item01:before {
	width: 100%;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	background: #2b912d;
	content: "";
	z-index: -2;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}
.section02_item > .item01:after {
	width: 100%;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	left: 40px;
	background: url(../images/index/num1.png) no-repeat left bottom;
	content: "";
	z-index: -1;
	transition: all 0.5s;
}
.section02_item > .item01:hover h1{
	color: #2b912d;
}
.section02_item > .item01:hover p{
	color: #2b912d;
}
.item01:hover:after {
	left: 50px;
	background-image: url(../images/index/num01.png);
}
.section02_item > .item02:before {
	width: 100%;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	background: #f7b52c;
	content: "";
	z-index: -2;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}
.section02_item > .item02:after {
	width: 100%;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	left: 40px;
	background: url(../images/index/num2.png) no-repeat left bottom;
	content: "";
	z-index: -1;
	transition: all 0.5s;
}
.section02_item > .item02:hover:after {
	left: 50px;
	background-image: url(../images/index/num02.png);
}
.section02_item > .item02:hover h1{
	color: #f7b52c;
}
.section02_item > .item02:hover p{
	color: #f7b52c;
}
.section02_item > .item03:before {
	width: 100%;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	background: #f7b52c;
	content: "";
	z-index: -2;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}
.section02_item > .item03:after {
	width: 100%;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	left: 40px;
	background: url(../images/index/num3.png) no-repeat left bottom;
	content: "";
	z-index: -1;
	transition: all 0.5s;
}
.section02_item > .item03:hover h1{
	color: #f7b52c;
}
.section02_item > .item03:hover p{
	color: #f7b52c;
}
.item03:hover:after {
	left: 50px;
	background-image: url(../images/index/num03.png);
}
.section02_item > .item04:before {
	width: 100%;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	background: #2b912d;
	content: "";
	z-index: -2;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}
.section02_item > .item04:after {
	width: 100%;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	left: 40px;
	background: url(../images/index/num4.png) no-repeat left bottom;
	content: "";
	z-index: -1;
	transition: all 0.5s;
}
.section02_item > .item04:hover h1{
	color: #2b912d;
}
.section02_item > .item04:hover p{
	color: #2b912d;
}
.item04:hover:after {
	left: 50px;
	background-image: url(../images/index/num04.png);
}
.item01:hover:before,
.item02:hover:before,
.item03:hover:before,
.item04:hover:before{
	background: #fff;
}

@media screen and (max-width: 768px){
	.in_ztfa,.in_ztfa1,.index-case-con{
		width: 100%;
	}
	.am-tabs-default .am-tabs-nav{
		width: 100%;
	}
	.index-service{
		height: auto;
	}
	.service-con{
		width: 100%;
		margin: 50px auto;
	}
	.service-box{
		display: none;
	}
	.service-box-wap{
		display: flex;
		padding: 0 16px;
	}
	.service-box-wap img{
		width: 100%;
		height: 100%;
	}
	.index-join{
		height: auto;
	}
	.pro-title h3 i.l_left1,
	.pro-title h3 i.l_right1{
		display: none;
	}
	.join-con{
		width: 100%;
		padding: 0 16px;
		margin: 50px auto;
	}
	.news-con{
		width: 100%;
		padding: 0 16px;
	}
	.news-item{
		width: 100%;
		margin: 0 0 20px 0;
	}
	.news-item > ul{
		width: 100%;
	}
	.news-item > ul > li{
		width: 95%;
	}
	.news-item > .more{
		margin: 5px auto 20px;
	}
	.in_ztfa1 .hd ul{
		margin-left: 0;
		min-height:100%;
		padding: 0 16px;
	}
	.in_ztfa1 .hd ul li.on,
	.in_ztfa1 .hd ul li.on .hdb{
		width: 100%;
	}
	.in_ztfa1 .hd ul li{
		margin-bottom: 20px;
	}
	.in_ztfa1 .hd ul li,
	.in_ztfa1 .hd ul li .hdb{
		width: 100%;
	}
	.am-tabs-bd .am-tab-panel{
		width: 100%;
		padding: 0 16px;
	}
	.case-item{
		width: 100%;
		margin: 0 0 20px;
	}
	.case-item-img,.case-item-txt{
		width: 100%;
	}
	.case-item-img img{
		width: 100%;
		height: 100%;
	}
	.join-con img{
		width: 100%;
		height: 100%;
	}
	.pro-title h3 i{
		display: none;
	}
	.es-poster,.index-solution,.in_ztfa,.in_ztfa1,.index-case,.index-ad,.index-service,.index-join,.index-news{
		min-width: 100%;
	}
	
	.section01,.section02.active > .section02_desc,.section02_item,.section02_item > .item-box{
		width: 100%;
	}
	
	.section02.active > .title{
		height: auto;
		font-size: 24px;
	}
	.section02.active > .title p{
		line-height: 36px;
	}
	.section02.active > .section02_desc{
		padding: 10px;
	}
}
@media screen and (max-width: 760px){

}
/* iPhone6+ */
@media screen and (max-width: 414px){

}
/* iPhone6 */
@media screen and (max-width: 375px){
	.new_list .news_all{ width:81%;}
}
/* iPhone5、4 */
@media screen and (max-width: 320px){

}
/* Galaxy S5 */
@media screen and (max-width: 360px){

}
/* iPad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)  {

}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html{
    font-size: 10px;
}

.slideshow{
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.slideshow-item{
    width: inherit;
    height: inherit;
    position: absolute;
    opacity: 0;
    animation: slideanim 31s infinite;
}

.slideshow-item:nth-child(1),
.slideshow-item:nth-child(1) img{
    animation-delay: 0;
}
.slideshow-item:nth-child(2),
.slideshow-item:nth-child(2) img{
    animation-delay: 10s;
}

.slideshow-item:nth-child(3),
.slideshow-item:nth-child(3) img{
    animation-delay: 20s;
}

.slideshow-item:nth-child(4),
.slideshow-item:nth-child(4) img{
    animation-delay: 30s;
}

.slideshow-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: zoom 31s infinite;
}

.slideshow-item-text{
    max-width: 50%;
    position: absolute;
    top: 70%;
    transform: translateY(-50%);
    left: 0;
    background-color: rgba(247,181,44,0.85);
    color: #fff;
    padding: 6rem 5rem;
    font-family: 'Raleway', sans-serif;
}

.slideshow-item-text h5{
    font-size: 2.3rem;
    letter-spacing: 3px;
}

.slideshow-item-text p{
    font-weight: 100;
    font-size: 1.2rem;
    margin-top: 2rem;
}

@keyframes slideanim{
    25%{
        opacity: 1;
    }
    40%{
        opacity: 0;
    }
}

@keyframes zoom{
    100%{
        transform: scale(1.3);
    }
}

@media screen and (max-width: 1100px){
    .slideshow-item-text{
        max-width: 75%;
    }
}

@media screen and (max-width: 768px){
    .slideshow-item-text{
        padding: 3rem 1.5rem;
    }
}

@media screen and (max-width: 456px){
    .slideshow-item-text{
        max-width: 100%;
        top: inherit;
        transform: translateY(0);
        bottom: 0;
    }

    .slideshow-item-text h5{
        font-size: 2rem;
    }

    .slideshow-item-text p{
        font-size: 1rem;
    }
}



@import url(css.css);

@font-face {
    font-family: 'exo_2.0black';
    src: url('../font/exo2.0-black.eot');
    src: url('../font/exo2.0-black.eot') format('embedded-opentype'),
         url('../font/exo2.0-black.woff') format('woff'),
         url('../font/exo2.0-black.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'exo_2.0black_italic';
    src: url('../font/exo2.0-blackitalic.eot');
    src: url('../font/exo2.0-blackitalic.eot') format('embedded-opentype'),
         url('../font/exo2.0-blackitalic.woff') format('woff'),
         url('../font/exo2.0-blackitalic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'exo_2.0bold';
    src: url('../font/exo2.0-bold.eot');
    src: url('../font/exo2.0-bold.eot') format('embedded-opentype'),
         url('../font/exo2.0-bold.woff') format('woff'),
         url('../font/exo2.0-bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'exo_2.0bold_italic';
    src: url('../font/exo2.0-bolditalic.eot');
    src: url('../font/exo2.0-bolditalic.eot') format('embedded-opentype'),
         url('../font/exo2.0-bolditalic.woff') format('woff'),
         url('../font/exo2.0-bolditalic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'exo_2.0extra_bold';
    src: url('../font/exo2.0-extrabold.eot');
    src: url('../font/exo2.0-extrabold.eot') format('embedded-opentype'),
         url('../font/exo2.0-extrabold.woff') format('woff'),
         url('../font/exo2.0-extrabold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'exo_2.0extra_bold_italic';
    src: url('../font/exo2.0-extrabolditalic.eot');
    src: url('../font/exo2.0-extrabolditalic.eot') format('embedded-opentype'),
         url('../font/exo2.0-extrabolditalic.woff') format('woff'),
         url('../font/exo2.0-extrabolditalic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'exo_2.0extra_light';
    src: url('../font/exo2.0-extralight.eot');
    src: url('../font/exo2.0-extralight.eot') format('embedded-opentype'),
         url('../font/exo2.0-extralight.woff') format('woff'),
         url('../font/exo2.0-extralight.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'exo_2.0extra_light_italic';
    src: url('../font/exo2.0-extralightitalic.eot');
    src: url('../font/exo2.0-extralightitalic.eot') format('embedded-opentype'),
         url('../font/exo2.0-extralightitalic.woff') format('woff'),
         url('../font/exo2.0-extralightitalic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'exo_2.0italic';
    src: url('../font/exo2.0-italic.eot');
    src: url('../font/exo2.0-italic.eot') format('embedded-opentype'),
         url('../font/exo2.0-italic.woff') format('woff'),
         url('../font/exo2.0-italic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'exo_2.0light';
    src: url('../font/exo2.0-light.eot');
    src: url('../font/exo2.0-light.eot') format('embedded-opentype'),
         url('../font/exo2.0-light.woff') format('woff'),
         url('../font/exo2.0-light.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'exo_2.0light_italic';
    src: url('../font/exo2.0-lightitalic.eot');
    src: url('../font/exo2.0-lightitalic.eot') format('embedded-opentype'),
         url('../font/exo2.0-lightitalic.woff') format('woff'),
         url('../font/exo2.0-lightitalic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'exo_2.0medium';
    src: url('../font/exo2.0-medium.eot');
    src: url('../font/exo2.0-medium.eot') format('embedded-opentype'),
         url('../font/exo2.0-medium.woff') format('woff'),
         url('../font/exo2.0-medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'exo_2.0medium_italic';
    src: url('../font/exo2.0-mediumitalic.eot');
    src: url('../font/exo2.0-mediumitalic.eot') format('embedded-opentype'),
         url('../font/exo2.0-mediumitalic.woff') format('woff'),
         url('../font/exo2.0-mediumitalic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'exo_2.0regular';
    src: url('../font/exo2.0-regular.eot');
    src: url('../font/exo2.0-regular.eot') format('embedded-opentype'),
         url('../font/exo2.0-regular.woff') format('woff'),
         url('../font/exo2.0-regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'exo_2.0semi_bold';
    src: url('../font/exo2.0-semibold.eot');
    src: url('../font/exo2.0-semibold.eot') format('embedded-opentype'),
         url('../font/exo2.0-semibold.woff') format('woff'),
         url('../font/exo2.0-semibold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'exo_2.0semi_bold_italic';
    src: url('../font/exo2.0-semibolditalic.eot');
    src: url('../font/exo2.0-semibolditalic.eot') format('embedded-opentype'),
         url('../font/exo2.0-semibolditalic.woff') format('woff'),
         url('../font/exo2.0-semibolditalic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'exo_2.0thin';
    src: url('../font/exo2.0-thin.eot');
    src: url('../font/exo2.0-thin.eot') format('embedded-opentype'),
         url('../font/exo2.0-thin.woff') format('woff'),
         url('../font/exo2.0-thin.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'exo_2.0thin_italic';
    src: url('../font/exo2.0-thinitalic.eot');
    src: url('../font/exo2.0-thinitalic.eot') format('embedded-opentype'),
         url('../font/exo2.0-thinitalic.woff') format('woff'),
         url('../font/exo2.0-thinitalic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot') format('embedded-opentype'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('http://bein.pp.ua/demo/html/CPT/fonts/fontawesome-webfont.svg?v=4.1.0') format('svg');
  font-weight: normal;
  font-style: normal;
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
    line-height:1;
    height: 100%;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

.title {
    font-size: 30px;
    font-family: Open Sans;
    color:#474e60;
    text-align: center;
    height:2.8em;
    line-height: 2em;
    font-weight: 600;
    text-transform: uppercase;
}

/* Colorful Pricing Tables*/

.wrapper-colorful {
    position:relative;
    width: 96%;
    height: 100%;
    margin:0em auto;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	overflow:hidden;
	top: 2em;
}

.wrapper-colorful ul {
    position: relative;
    width:25%;
    min-width: 15.25em;
    list-style: none;
    float: left;
    font-family: Open Sans;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -mos-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    overflow:hidden;
	-webkit-animation: start 0.5s ease forwards;
	-moz-animation: start 0.5s ease forwards;
	-mos-animation: start 0.5s ease forwards;
	-o-animation: start 0.5s ease forwards;
	animation: start 0.5s ease forwards;
	-webkit-transform: scale(1,0);
	-moz-transform: scale(1,0);
	-mos-transform: scale(1,0);
	-o-transform: scale(1,0);
	transform: scale(1,0);
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

.wrapper-colorful .basic{
	-webkit-animation-delay:0s;
	-moz-animation-delay:0s;
	-mos-animation-delay:0s;
	-o-animation-delay:0s;
	animation-delay:0s;
	border-right:1px solid #fff;
}

.wrapper-colorful .premium{
	-webkit-animation-delay:0.15s;
	-moz-animation-delay:0.15s;
	-mos-animation-delay:0.15s;
	-o-animation-delay:0.15s;
	animation-delay:0.15s;
	border-right:1px solid #fff;
}

.wrapper-colorful .plus{
	-webkit-animation-delay:0.3s;
	-moz-animation-delay:0.3s;
	-mos-animation-delay:0.3s;
	-o-animation-delay:0.3s;
	animation-delay:0.3s;
	border-right:1px solid #fff;
}

.wrapper-colorful .business{
	-webkit-animation-delay:0.45s;
	-moz-animation-delay:0.45s;
	-mos-animation-delay:0.45s;
	-o-animation-delay:0.45s;
	animation-delay:0.45s;
}
.wrapper-colorful ul li{
	-webkit-animation: start-li 0.5s ease forwards;
	-moz-animation: start-li 0.5s ease forwards;
	-mos-animation: start-li 0.5s ease forwards;
	-o-animation: start-li 0.5s ease forwards;
	animation: start-li 0.5s ease forwards;
	-webkit-transform: translateX(-200%);
	-moz-transform: translateX(-200%);
	-mos-transform: translateX(-200%);
	-o-transform: translateX(-200%);
	transform: translateX(-200%);
}

.wrapper-colorful .basic li:nth-child(1){
	-webkit-animation-delay:0.1s;
	-moz-animation-delay:0.1s;
	-mos-animation-delay:0.1s;
	-o-animation-delay:0.1s;
	animation-delay:0.1s;
}

.wrapper-colorful .basic li:nth-child(2), .wrapper-colorful .premium li:nth-child(1){
	-webkit-animation-delay:0.2s;
	-moz-animation-delay:0.2s;
	-mos-animation-delay:0.2s;
	-o-animation-delay:0.2s;
	animation-delay:0.2s;
}

.wrapper-colorful .basic li:nth-child(3), .wrapper-colorful .premium li:nth-child(2), .wrapper-colorful .plus li:nth-child(1){
	-webkit-animation-delay:0.3s;
	-moz-animation-delay:0.3s;
	-mos-animation-delay:0.3s;
	-o-animation-delay:0.3s;
	animation-delay:0.3s;
}

.wrapper-colorful .basic li:nth-child(4), .wrapper-colorful .premium li:nth-child(3), .wrapper-colorful .plus li:nth-child(2), .wrapper-colorful .business li:nth-child(1){
	-webkit-animation-delay:0.4s;
	-moz-animation-delay:0.4s;
	-mos-animation-delay:0.4s;
	-o-animation-delay:0.4s;
	animation-delay:0.4s;
}

.wrapper-colorful .basic li:nth-child(5), .wrapper-colorful .premium li:nth-child(4), .wrapper-colorful .plus li:nth-child(3), .wrapper-colorful .business li:nth-child(2){
	-webkit-animation-delay:0.5s;
	-moz-animation-delay:0.5s;
	-mos-animation-delay:0.5s;
	-o-animation-delay:0.5s;
	animation-delay:0.5s;
}

.wrapper-colorful .basic li:nth-child(6), .wrapper-colorful .premium li:nth-child(5), .wrapper-colorful .plus li:nth-child(4), .wrapper-colorful .business li:nth-child(3){
	-webkit-animation-delay:0.6s;
	-moz-animation-delay:0.6s;
	-mos-animation-delay:0.6s;
	-o-animation-delay:0.6s;
	animation-delay:0.6s;
}

.wrapper-colorful .basic li:nth-child(7), .wrapper-colorful .premium li:nth-child(6), .wrapper-colorful .plus li:nth-child(5), .wrapper-colorful .business li:nth-child(4){
	-webkit-animation-delay:0.7s;
	-moz-animation-delay:0.7s;
	-mos-animation-delay:0.7s;
	-o-animation-delay:0.7s;
	animation-delay:0.7s;
}

.wrapper-colorful .basic li:nth-child(8), .wrapper-colorful .premium li:nth-child(7), .wrapper-colorful .plus li:nth-child(6), .wrapper-colorful .business li:nth-child(5){
	-webkit-animation-delay:0.8s;
	-moz-animation-delay:0.8s;
	-mos-animation-delay:0.8s;
	-o-animation-delay:0.8s;
	animation-delay:0.8s;
}

.wrapper-colorful .basic li:nth-child(9), .wrapper-colorful .premium li:nth-child(8), .wrapper-colorful .plus li:nth-child(7), .wrapper-colorful .business li:nth-child(6){
	-webkit-animation-delay:0.9s;
	-moz-animation-delay:0.9s;
	-mos-animation-delay:0.9s;
	-o-animation-delay:0.9s;
	animation-delay:0.9s;
}

.wrapper-colorful .basic li:nth-child(10), .wrapper-colorful .premium li:nth-child(9), .wrapper-colorful .plus li:nth-child(8), .wrapper-colorful .business li:nth-child(7){
	-webkit-animation-delay:1s;
	-moz-animation-delay:1s;
	-mos-animation-delay:1s;
	-o-animation-delay:1s;
	animation-delay:1s;
}

.wrapper-colorful .basic li:nth-child(11), .wrapper-colorful .premium li:nth-child(10), .wrapper-colorful .plus li:nth-child(9), .wrapper-colorful .business li:nth-child(8){
	-webkit-animation-delay:1.1s;
	-moz-animation-delay:1.1s;
	-mos-animation-delay:1.1s;
	-o-animation-delay:1.1s;
	animation-delay:1.1s;
}

.wrapper-colorful .basic li:nth-child(12), .wrapper-colorful .premium li:nth-child(11), .wrapper-colorful .plus li:nth-child(10), .wrapper-colorful .business li:nth-child(9){
	-webkit-animation-delay:1.2s;
	-moz-animation-delay:1.2s;
	-mos-animation-delay:1.2s;
	-o-animation-delay:1.2s;
	animation-delay:1.2s;
}

.wrapper-colorful .premium li:nth-child(12), .wrapper-colorful .plus li:nth-child(11), .wrapper-colorful .business li:nth-child(10){
	-webkit-animation-delay:1.3s;
	-moz-animation-delay:1.3s;
	-mos-animation-delay:1.3s;
	-o-animation-delay:1.3s;
	animation-delay:1.3s;
}

.wrapper-colorful .plus li:nth-child(12), .wrapper-colorful .business li:nth-child(11){
	-webkit-animation-delay:1.4s;
	-moz-animation-delay:1.4s;
	-mos-animation-delay:1.4s;
	-o-animation-delay:1.4s;
	animation-delay:1.4s;
}

.wrapper-colorful .business li:nth-child(12){
	-webkit-animation-delay:1.5s;
	-moz-animation-delay:1.5s;
	-mos-animation-delay:1.5s;
	-o-animation-delay:1.5s;
	animation-delay:1.5s;
}

@-webkit-keyframes start{
	0%		{-webkit-transform: scale(1,0);}
	100%	{-webkit-transform: scale(1,1);}
}

@-moz-keyframes start{
	0%		{-moz-transform: scale(1,0);}
	100%	{-moz-transform: scale(1,1);}
}

@-mos-keyframes start{
	0%		{-mos-transform: scale(1,0);}
	100%	{-mos-transform: scale(1,1);}
}

@-o-keyframes start{
	0%		{-o-transform: scale(1,0);}
	100%	{-o-transform: scale(1,1);}
}

@keyframes start{
	0%		{transform: scale(1,0);}
	100%	{transform: scale(1,1);}
}

@-webkit-keyframes start-li{
	0%		{-webkit-transform: translateX(-200%);}
	100%	{-webkit-transform: translateX(0%);}
}

@-moz-keyframes start-li{
	0%		{-moz-transform: translateX(-200%);}
	100%	{-moz-transform: translateX(0%);}
}

@-mos-keyframes start-li{
	0%		{-mos-transform: translateX(-200%);}
	100%	{-mos-transform: translateX(0%);}
}

@-o-keyframes start-li{
	0%		{-o-transform: translateX(-200%);}
	100%	{-o-transform: translateX(0%);}
}

@keyframes start-li{
	0%		{transform: translateX(-200%);}
	100%	{transform: translateX(0%);}
}

.wrapper-colorful ul li{
    color:#eee;
    text-align: center;
    overflow:hidden;
}

/* mobile */
@media screen and (max-width:1100px){
    
.wrapper-colorful {width: 100%;}
    
.wrapper-colorful ul {
    position: relative;
    width:50%;
    min-width: 15.25em;
    list-style: none;
    float: left;
    font-family: Open Sans;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -mos-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
    
}

@media screen and (max-width:560px){
    
.wrapper-colorful {width: 100%;}
    
.wrapper-colorful ul {
    position: relative;
    width:100%;
    min-width: 15.25em;
    list-style: none;
    float: left;
    font-family: Open Sans;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -mos-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.wrapper-colorful ul:hover{
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -mos-transform: scale(1,1);
    -o-transform: scale(1,1);
    transform: scale(1,1);
    -webkit-box-shadow: none;
    -moz-box-shadow:    none;
    box-shadow:         none;
    z-index:5;
}
    
}

.wrapper-colorful .basic{
    position: relative;
    background: #005C5A;
}

.wrapper-colorful .premium{
    position: relative;
    background: #2da22f;
}

.wrapper-colorful .plus{
    position: relative;
    background: #f7b52b;
}

.wrapper-colorful .business{
    position: relative;
    background: #e24b33;
}

.wrapper-colorful ul .icon{
    position: relative;
    height:10em;
    width: 10em;
    background:rgba(255, 255, 255, 0.15);
    margin:1em auto;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    z-index:2;
}

.wrapper-colorful .basic .icon:before{
    position: absolute;
    top: .8em;
    bottom: 0;
    left: -0.15em;
    right: 0;
    margin: auto;
    content:'\f1d8';
    font-family: FontAwesome;
    font-size: 4em;
}

.wrapper-colorful .premium .icon:before{
    position: absolute;
    top: .9em;
    bottom: 0;
    left: 0.05em;
    right: 0;
    margin: auto;
    content:'\f108';
    font-family: FontAwesome;
    font-size: 4em;
}

.wrapper-colorful .plus .icon:before{
    position: absolute;
    top: .75em;
    bottom: 0;
    left: 0em;
    right: 0;
    margin: auto;
    content:'\f087';
    font-family: FontAwesome;
    font-size: 4em;
}

.wrapper-colorful .business .icon:before{
    position: absolute;
    top: .75em;
    bottom: 0;
    left: -0.1em;
    right: 0;
    margin: auto;
    content:'\f135';
    font-family: FontAwesome;
    font-size: 4em;
}

.wrapper-colorful .basic:hover .icon:before{
    color: #005C5A;
}

.wrapper-colorful .premium:hover .icon:before{
    color: #2da22f;
}

.wrapper-colorful .plus:hover .icon:before{
    color: #f7b52b;
}

.wrapper-colorful .business:hover .icon:before{
    color: #e24b33;
}

.wrapper-colorful ul .icon:after{
    position: absolute;
    content: '';
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: #f2f2f2;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -mos-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    -webkit-transform: scale(0,0);
    -moz-transform: scale(0,0);
    -mos-transform: scale(0,0);
    -o-transform: scale(0,0);
    transform: scale(0,0);
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    z-index:-1;
}

.wrapper-colorful ul:hover .icon:after{
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -mos-transform: scale(1,1);
    -o-transform: scale(1,1);
    transform: scale(1,1);
}

.wrapper-colorful ul .name{
    height:2em;
    line-height: 2em;
    -webkit-transition: all 0.25s ease 0.15s;
    -moz-transition: all 0.25s ease 0.15s;
    -mos-transition: all 0.25s ease 0.15s;
    -o-transition: all 0.25s ease 0.15s;
    transition: all 0.25s ease 0.15s;
}

.wrapper-colorful ul:hover .name{
    -webkit-box-shadow: inset 0px -2em 0px 0px rgba(239, 239, 239, 0.25);
    -moz-box-shadow:    inset 0px -2em 0px 0px rgba(239, 239, 239, 0.25);
    box-shadow:         inset 0px -2em 0px 0px rgba(239, 239, 239, 0.25);
}

.wrapper-colorful ul .name h1{
    text-transform: uppercase;
    font-weight: 300;
    font-size: 1.2em;
    color: rgba(255, 255, 255, 0.75);
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -mos-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.wrapper-colorful ul:hover .name h1{
    color: rgba(255, 255, 255, 1);
}

.wrapper-colorful ul .price-col{
    height:1.5em;
    line-height: 1.25em;
    font-size: 2.4em;
    font-family: 'exo_2.0extra_light';
    color: rgba(255, 255, 255, 0.75);
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -mos-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.wrapper-colorful ul .price-col .cost{
    position: relative;
    width: 100%;
    height:100%;
    -webkit-box-shadow: inset 0px -0em 0px 0px rgba(239, 239, 239, 1);
    -moz-box-shadow:    inset 0px -0em 0px 0px rgba(239, 239, 239, 1);
    box-shadow:         inset 0px -0em 0px 0px rgba(239, 239, 239, 1);
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -mos-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.wrapper-colorful ul:hover .price-col .cost{
    position: relative;
    -webkit-box-shadow: inset 0px -1.5em 0px 0px rgba(239, 239, 239, 0.75);
    -moz-box-shadow:    inset 0px -1.5em 0px 0px rgba(239, 239, 239, 0.75);
    box-shadow:         inset 0px -1.5em 0px 0px rgba(239, 239, 239, 0.75);
}

.wrapper-colorful .basic:hover .price-col .cost{
    color: #005C5A;
}

.wrapper-colorful .premium:hover .price-col .cost{
    color: #2da22f;
}

.wrapper-colorful .plus:hover .price-col .cost{
    color: #f7b52b;
}

.wrapper-colorful .business:hover .price-col .cost{
    color: #e24b33;
}

.wrapper-colorful ul .price-col .cost .valuta{
    position:relative;
    font-size: 0.5em;
    font-weight: 400;
    display: inline-table;
    vertical-align: super;
}

.wrapper-colorful ul .price-col .cost .mounthly{
    position:relative;
    font-size: 0.5em;
    font-weight: 300;
    display: inline-table;
    text-transform: uppercase
}

.wrapper-colorful ul .description-range{
    height:2em;
    line-height: 2em;
}

.wrapper-colorful ul .description-range:after{
    position: absolute;
    content: '';
    width: 0%;
    height:32px;
    background: rgba(255, 255, 255, 0.15);
    left:0%;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -mos-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.wrapper-colorful ul .description-range:hover:after{
    width: 100%;
}

.wrapper-colorful .description-range:before{
    position:absolute;
    font-family: FontAwesome;
    font-weight: normal;
    width:2em;
    font-size: 1em;
    left: -1.5em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -mos-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.wrapper-colorful .description-range:hover:before{
    left: 1em;
}

.wrapper-colorful .description-range:nth-child(3):before {
    content: '\f0a0';
}

.wrapper-colorful .description-range:nth-child(4):before {
    content: '\f1d9';
}

.wrapper-colorful .description-range:nth-child(5):before {
    content: '\f003';
}

.wrapper-colorful .description-range:nth-child(6):before {
    content: '\f0ac';
}

.wrapper-colorful .description-range:nth-child(7):before {
    content: '\f023';
}

.wrapper-colorful .description-range:nth-child(8):before {
    content: '\f133';
}

.wrapper-colorful .description-range:nth-child(9):before {
    content: '\f0e8';
}

.wrapper-colorful .description-range:before {
    content: '\f006';
}

.wrapper-colorful ul .purchase{
    height: 3em;
    line-height: 3em;
}

.wrapper-colorful ul .purchase a{
    position: relative;
    padding:0.5em;
    border:4px solid #efefef;
    color: #fff;
    text-decoration: none;
    z-index: 1;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -mos-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -mos-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.wrapper-colorful ul .purchase a{
    color:#fff;
    background:#005C5A;
    -webkit-box-shadow: inset 0px 0px 0px 0px rgba(239, 239, 239, 1);
    -moz-box-shadow:    inset 0px 0px 0px 0px rgba(239, 239, 239, 1);
    box-shadow:         inset 0px 0px 0px 0px rgba(239, 239, 239, 1);
}

.wrapper-colorful .premium .purchase a{
    color:#fff;
    background:#2da22f;
}

.wrapper-colorful .plus .purchase a{
    color:#fff;
    background:#f7b52b;
}

.wrapper-colorful .business .purchase a{
    color:#fff;
    background:#e24b33;
}

.wrapper-colorful ul .purchase a:hover{
    color:#005C5A;
    -webkit-box-shadow: inset 0px -40px 0px 0px rgba(239, 239, 239, 1);
    -moz-box-shadow:    inset 0px -40px 0px 0px rgba(239, 239, 239, 1);
    box-shadow:         inset 0px -40px 0px 0px rgba(239, 239, 239, 1);
}

.wrapper-colorful .premium .purchase a:hover{
    color:#2da22f;
}

.wrapper-colorful .plus .purchase a:hover{
    color:#f7b52b;
}

.wrapper-colorful .business .purchase a:hover{
    color:#e24b33;
}

.wrapper-colorful ul .purchase:before{
    position: absolute;
    content: '';
    background: #efefef;
    width: 50%;
    height:1em;
    bottom:1em;
    left:25%;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -mos-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.wrapper-colorful ul:hover .purchase:before{
    position: absolute;
    content: '';
    background: #efefef;
    width: 90%;
    height:1em;
    left:5%;
}


/* Colorful-2 Pricing Tables with IMG*/

.wrapper-colorful-bg {
    position:relative;
    width:100%;
    height: 100%;
    margin:0em auto;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: url('../image/bg2.jpg') center center no-repeat;
   -moz-background-size: cover; /* Firefox 漕 4.0 */
   -webkit-background-size: cover; /* Safari ?Chrome */
   -o-background-size: cover; /* Opera 漕 忮瘃梃 10.53 */
   background-size: cover; /* CSS3 */
}

.wrapper-colorful-bg ul {
    position: relative;
    width:25%;
    min-width: 15.25em;
    list-style: none;
    float: left;
    font-family: Open Sans;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -mos-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    overflow:hidden;
}

.wrapper-colorful-bg .basic{
	-webkit-animation-delay:0s;
	-moz-animation-delay:0s;
	-mos-animation-delay:0s;
	-o-animation-delay:0s;
	animation-delay:0s;
}

.wrapper-colorful-bg .premium{
	-webkit-animation-delay:0.15s;
	-moz-animation-delay:0.15s;
	-mos-animation-delay:0.15s;
	-o-animation-delay:0.15s;
	animation-delay:0.15s;
}

.wrapper-colorful-bg .plus{
	-webkit-animation-delay:0.3s;
	-moz-animation-delay:0.3s;
	-mos-animation-delay:0.3s;
	-o-animation-delay:0.3s;
	animation-delay:0.3s;
}

.wrapper-colorful-bg .business{
	-webkit-animation-delay:0.45s;
	-moz-animation-delay:0.45s;
	-mos-animation-delay:0.45s;
	-o-animation-delay:0.45s;
	animation-delay:0.45s;
}
.wrapper-colorful-bg ul li{
	-webkit-animation: start-li 0.5s ease forwards;
	-moz-animation: start-li 0.5s ease forwards;
	-mos-animation: start-li 0.5s ease forwards;
	-o-animation: start-li 0.5s ease forwards;
	animation: start-li 0.5s ease forwards;
	-webkit-transform: translateX(-200%);
	-moz-transform: translateX(-200%);
	-mos-transform: translateX(-200%);
	-o-transform: translateX(-200%);
	transform: translateX(-200%);
}

.wrapper-colorful-bg .basic li:nth-child(1){
	-webkit-animation-delay:0.1s;
	-moz-animation-delay:0.1s;
	-mos-animation-delay:0.1s;
	-o-animation-delay:0.1s;
	animation-delay:0.1s;
}

.wrapper-colorful-bg .basic li:nth-child(2), .wrapper-colorful-bg .premium li:nth-child(1){
	-webkit-animation-delay:0.2s;
	-moz-animation-delay:0.2s;
	-mos-animation-delay:0.2s;
	-o-animation-delay:0.2s;
	animation-delay:0.2s;
}

.wrapper-colorful-bg .basic li:nth-child(3), .wrapper-colorful-bg .premium li:nth-child(2), .wrapper-colorful-bg .plus li:nth-child(1){
	-webkit-animation-delay:0.3s;
	-moz-animation-delay:0.3s;
	-mos-animation-delay:0.3s;
	-o-animation-delay:0.3s;
	animation-delay:0.3s;
}

.wrapper-colorful-bg .basic li:nth-child(4), .wrapper-colorful-bg .premium li:nth-child(3), .wrapper-colorful-bg .plus li:nth-child(2), .wrapper-colorful-bg .business li:nth-child(1){
	-webkit-animation-delay:0.4s;
	-moz-animation-delay:0.4s;
	-mos-animation-delay:0.4s;
	-o-animation-delay:0.4s;
	animation-delay:0.4s;
}

.wrapper-colorful-bg .basic li:nth-child(5), .wrapper-colorful-bg .premium li:nth-child(4), .wrapper-colorful-bg .plus li:nth-child(3), .wrapper-colorful-bg .business li:nth-child(2){
	-webkit-animation-delay:0.5s;
	-moz-animation-delay:0.5s;
	-mos-animation-delay:0.5s;
	-o-animation-delay:0.5s;
	animation-delay:0.5s;
}

.wrapper-colorful-bg .basic li:nth-child(6), .wrapper-colorful-bg .premium li:nth-child(5), .wrapper-colorful-bg .plus li:nth-child(4), .wrapper-colorful-bg .business li:nth-child(3){
	-webkit-animation-delay:0.6s;
	-moz-animation-delay:0.6s;
	-mos-animation-delay:0.6s;
	-o-animation-delay:0.6s;
	animation-delay:0.6s;
}

.wrapper-colorful-bg .basic li:nth-child(7), .wrapper-colorful-bg .premium li:nth-child(6), .wrapper-colorful-bg .plus li:nth-child(5), .wrapper-colorful-bg .business li:nth-child(4){
	-webkit-animation-delay:0.7s;
	-moz-animation-delay:0.7s;
	-mos-animation-delay:0.7s;
	-o-animation-delay:0.7s;
	animation-delay:0.7s;
}

.wrapper-colorful-bg .basic li:nth-child(8), .wrapper-colorful-bg .premium li:nth-child(7), .wrapper-colorful-bg .plus li:nth-child(6), .wrapper-colorful-bg .business li:nth-child(5){
	-webkit-animation-delay:0.8s;
	-moz-animation-delay:0.8s;
	-mos-animation-delay:0.8s;
	-o-animation-delay:0.8s;
	animation-delay:0.8s;
}

.wrapper-colorful-bg .basic li:nth-child(9), .wrapper-colorful-bg .premium li:nth-child(8), .wrapper-colorful-bg .plus li:nth-child(7), .wrapper-colorful-bg .business li:nth-child(6){
	-webkit-animation-delay:0.9s;
	-moz-animation-delay:0.9s;
	-mos-animation-delay:0.9s;
	-o-animation-delay:0.9s;
	animation-delay:0.9s;
}

.wrapper-colorful-bg .basic li:nth-child(10), .wrapper-colorful-bg .premium li:nth-child(9), .wrapper-colorful-bg .plus li:nth-child(8), .wrapper-colorful-bg .business li:nth-child(7){
	-webkit-animation-delay:1s;
	-moz-animation-delay:1s;
	-mos-animation-delay:1s;
	-o-animation-delay:1s;
	animation-delay:1s;
}

.wrapper-colorful-bg .basic li:nth-child(11), .wrapper-colorful-bg .premium li:nth-child(10), .wrapper-colorful-bg .plus li:nth-child(9), .wrapper-colorful-bg .business li:nth-child(8){
	-webkit-animation-delay:1.1s;
	-moz-animation-delay:1.1s;
	-mos-animation-delay:1.1s;
	-o-animation-delay:1.1s;
	animation-delay:1.1s;
}

.wrapper-colorful-bg .basic li:nth-child(12), .wrapper-colorful-bg .premium li:nth-child(11), .wrapper-colorful-bg .plus li:nth-child(10), .wrapper-colorful-bg .business li:nth-child(9){
	-webkit-animation-delay:1.2s;
	-moz-animation-delay:1.2s;
	-mos-animation-delay:1.2s;
	-o-animation-delay:1.2s;
	animation-delay:1.2s;
}

.wrapper-colorful-bg .premium li:nth-child(12), .wrapper-colorful-bg .plus li:nth-child(11), .wrapper-colorful-bg .business li:nth-child(10){
	-webkit-animation-delay:1.3s;
	-moz-animation-delay:1.3s;
	-mos-animation-delay:1.3s;
	-o-animation-delay:1.3s;
	animation-delay:1.3s;
}

.wrapper-colorful-bg.plus li:nth-child(12), .wrapper-colorful-bg .business li:nth-child(11){
	-webkit-animation-delay:1.4s;
	-moz-animation-delay:1.4s;
	-mos-animation-delay:1.4s;
	-o-animation-delay:1.4s;
	animation-delay:1.4s;
}

.wrapper-colorful-bg .business li:nth-child(12){
	-webkit-animation-delay:1.5s;
	-moz-animation-delay:1.5s;
	-mos-animation-delay:1.5s;
	-o-animation-delay:1.5s;
	animation-delay:1.5s;
}

@-webkit-keyframes start{
	0%		{-webkit-transform: translateY(-100%);}
	100%	{-webkit-transform: translateY(0%);}
}

@-moz-keyframes start{
	0%		{-moz-transform: translateY(-100%);}
	100%	{-moz-transform: translateY(0%);}
}

@-mos-keyframes start{
	0%		{-mos-transform: translateY(-100%);}
	100%	{-mos-transform: translateY(0%);}
}

@-o-keyframes start{
	0%		{-o-transform: translateY(-100%);}
	100%	{-o-transform: translateY(0%);}
}

@keyframes start{
	0%		{transform: translateY(-100%);}
	100%	{transform: translateY(0%);}
}

@-webkit-keyframes start-li{
	0%		{-webkit-transform: translateX(-200%);}
	100%	{-webkit-transform: translateX(0%);}
}

@-moz-keyframes start-li{
	0%		{-moz-transform: translateX(-200%);}
	100%	{-moz-transform: translateX(0%);}
}

@-mos-keyframes start-li{
	0%		{-mos-transform: translateX(-200%);}
	100%	{-mos-transform: translateX(0%);}
}

@-o-keyframes start-li{
	0%		{-o-transform: translateX(-200%);}
	100%	{-o-transform: translateX(0%);}
}

@keyframes start-li{
	0%		{transform: translateX(-200%);}
	100%	{transform: translateX(0%);}
}

.wrapper-colorful-bg ul li{
    color:#eee;
    text-align: center;
    overflow:hidden;
}

/* mobile */
@media screen and (max-width:1100px){
    
.wrapper-colorful-bg {width: 100%;}
    
.wrapper-colorful-bg ul {
    position: relative;
    width:50%;
    min-width: 15.25em;
    list-style: none;
    float: left;
    font-family: Open Sans;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -mos-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

}

@media screen and (max-width:560px){
    
.wrapper-colorful-bg {width: 100%;}
    
.wrapper-colorful-bg ul {
    position: relative;
    width:100%;
    min-width: 15.25em;
    list-style: none;
    float: left;
    font-family: Open Sans;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -mos-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}
    
}

.wrapper-colorful-bg .basic{
    position: relative;
    background: rgba(0, 92, 90, 0.75);
}

.wrapper-colorful-bg .premium{
    position: relative;
    background: rgba(25, 156, 123, 0.75);
}

.wrapper-colorful-bg .plus{
    position: relative;
    background: rgba(243, 113, 0, 0.75);
}

.wrapper-colorful-bg .business{
    position: relative;
    background: rgba(237, 77, 19, 0.75);
}

.wrapper-colorful-bg ul .icon{
    position: relative;
    height:10em;
    width: 10em;
    background:rgba(255, 255, 255, 0.15);
    margin:1em auto;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    z-index:2;
    color:rgba(255, 255, 255, 0.5);
}

.wrapper-colorful-bg .basic .icon:before{
    position: absolute;
    top: .8em;
    bottom: 0;
    left: -0.15em;
    right: 0;
    margin: auto;
    content:'\f1d8';
    font-family: FontAwesome;
    font-size: 4em;
}

.wrapper-colorful-bg .premium .icon:before{
    position: absolute;
    top: .9em;
    bottom: 0;
    left: 0.05em;
    right: 0;
    margin: auto;
    content:'\f108';
    font-family: FontAwesome;
    font-size: 4em;
}

.wrapper-colorful-bg .plus .icon:before{
    position: absolute;
    top: .75em;
    bottom: 0;
    left: 0em;
    right: 0;
    margin: auto;
    content:'\f087';
    font-family: FontAwesome;
    font-size: 4em;
}

.wrapper-colorful-bg .business .icon:before{
    position: absolute;
    top: .75em;
    bottom: 0;
    left: -0.1em;
    right: 0;
    margin: auto;
    content:'\f135';
    font-family: FontAwesome;
    font-size: 4em;
}

.wrapper-colorful-bg .basic:hover .icon:before{
    color: #005C5A;
}

.wrapper-colorful-bg .premium:hover .icon:before{
    color: #199C7B;
}

.wrapper-colorful-bg .plus:hover .icon:before{
    color: #F37100;
}

.wrapper-colorful-bg .business:hover .icon:before{
    color: #ED4D13;
}

.wrapper-colorful-bg ul .icon:after{
    position: absolute;
    content: '';
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: rgba(242, 242, 242, 0.75);
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -mos-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    -webkit-transform: scale(0,0);
    -moz-transform: scale(0,0);
    -mos-transform: scale(0,0);
    -o-transform: scale(0,0);
    transform: scale(0,0);
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    z-index:-1;
}

.wrapper-colorful-bg ul:hover .icon:after{
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -mos-transform: scale(1,1);
    -o-transform: scale(1,1);
    transform: scale(1,1);
}

.wrapper-colorful-bg ul .name{
    height:2em;
    line-height: 2em;
    -webkit-transition: all 0.25s ease 0.15s;
    -moz-transition: all 0.25s ease 0.15s;
    -mos-transition: all 0.25s ease 0.15s;
    -o-transition: all 0.25s ease 0.15s;
    transition: all 0.25s ease 0.15s;
}

.wrapper-colorful-bg ul:hover .name{
    -webkit-box-shadow: inset 0px -2em 0px 0px rgba(239, 239, 239, 0.25);
    -moz-box-shadow:    inset 0px -2em 0px 0px rgba(239, 239, 239, 0.25);
    box-shadow:         inset 0px -2em 0px 0px rgba(239, 239, 239, 0.25);
}

.wrapper-colorful-bg ul .name h1{
    text-transform: uppercase;
    font-weight: 300;
    font-size: 2em;
    color: rgba(255, 255, 255, 0.75);
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -mos-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.wrapper-colorful-bg ul:hover .name h1{
    color: rgba(255, 255, 255, 1);
}

.wrapper-colorful-bg ul .price-col{
    height:1.5em;
    line-height: 1.25em;
    font-size: 4em;
    font-family: 'exo_2.0extra_light';
    color: rgba(255, 255, 255, 0.75);
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -mos-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.wrapper-colorful-bg ul .price-col .cost{
    position: relative;
    width: 100%;
    height:100%;
    -webkit-box-shadow: inset 0px -0em 0px 0px rgba(239, 239, 239, 1);
    -moz-box-shadow:    inset 0px -0em 0px 0px rgba(239, 239, 239, 1);
    box-shadow:         inset 0px -0em 0px 0px rgba(239, 239, 239, 1);
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -mos-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.wrapper-colorful-bg ul:hover .price-col .cost{
    position: relative;
    -webkit-box-shadow: inset 0px -1.5em 0px 0px rgba(239, 239, 239, 0.75);
    -moz-box-shadow:    inset 0px -1.5em 0px 0px rgba(239, 239, 239, 0.75);
    box-shadow:         inset 0px -1.5em 0px 0px rgba(239, 239, 239, 0.75);
}

.wrapper-colorful-bg .basic:hover .price-col .cost{
    color: #005C5A;
}

.wrapper-colorful-bg .premium:hover .price-col .cost{
    color: #199C7B;
}

.wrapper-colorful-bg .plus:hover .price-col .cost{
    color: #F37100;
}

.wrapper-colorful-bg .business:hover .price-col .cost{
    color: #ED4D13;
}

.wrapper-colorful-bg ul .price-col .cost .valuta{
    position:relative;
    font-size: 0.5em;
    font-weight: 400;
    display: inline-table;
    vertical-align: super;
}

.wrapper-colorful-bg ul .price-col .cost .mounthly{
    position:relative;
    font-size: 0.5em;
    font-weight: 300;
    display: inline-table;
    text-transform: uppercase
}

.wrapper-colorful-bg ul .description-range{
    height:2em;
    line-height: 2em;
}

.wrapper-colorful-bg ul .description-range:after{
    position: absolute;
    content: '';
    width: 0%;
    height:32px;
    background: rgba(255, 255, 255, 0.15);
    left:0%;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -mos-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.wrapper-colorful-bg ul .description-range:hover:after{
    width: 100%;
}

.wrapper-colorful-bg .description-range:before{
    position:absolute;
    font-family: FontAwesome;
    font-weight: normal;
    width:2em;
    font-size: 1em;
    left: -1.5em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -mos-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.wrapper-colorful-bg .description-range:hover:before{
    left: 1em;
}

.wrapper-colorful-bg .description-range:nth-child(3):before {
    content: '\f0a0';
}

.wrapper-colorful-bg .description-range:nth-child(4):before {
    content: '\f1d9';
}

.wrapper-colorful-bg .description-range:nth-child(5):before {
    content: '\f003';
}

.wrapper-colorful-bg .description-range:nth-child(6):before {
    content: '\f0ac';
}

.wrapper-colorful-bg .description-range:nth-child(7):before {
    content: '\f023';
}

.wrapper-colorful-bg .description-range:nth-child(8):before {
    content: '\f133';
}

.wrapper-colorful-bg .description-range:nth-child(9):before {
    content: '\f0e8';
}

.wrapper-colorful-bg .description-range:before {
    content: '\f006';
}

.wrapper-colorful-bg ul .purchase{
    height: 3em;
    line-height: 3em;
}

.wrapper-colorful-bg ul .purchase a{
    position: relative;
    padding:0.5em;
    border:4px solid rgba(239, 239, 239, 0.5);;
    color: #fff;
    text-decoration: none;
    z-index: 1;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -mos-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -mos-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.wrapper-colorful-bg .basic .purchase a{
    color:#fff;
    background:#005C5A;
    -webkit-box-shadow: inset 0px 0px 0px 0px rgba(239, 239, 239, 1);
    -moz-box-shadow:    inset 0px 0px 0px 0px rgba(239, 239, 239, 1);
    box-shadow:         inset 0px 0px 0px 0px rgba(239, 239, 239, 1);
}

.wrapper-colorful-bg .premium .purchase a{
    color:#fff;
    background:#199C7B;
}

.wrapper-colorful-bg .plus .purchase a{
    color:#fff;
    background:#F37100;
}

.wrapper-colorful-bg .business .purchase a{
    color:#fff;
    background:#ED4D13;
}

.wrapper-colorful-bg ul .purchase a:hover{
    color:#005C5A;
    -webkit-box-shadow: inset 0px -40px 0px 0px rgba(239, 239, 239, 1);
    -moz-box-shadow:    inset 0px -40px 0px 0px rgba(239, 239, 239, 1);
    box-shadow:         inset 0px -40px 0px 0px rgba(239, 239, 239, 1);
}

.wrapper-colorful-bg .premium .purchase a:hover{
    color:#199C7B;
}

.wrapper-colorful-bg .plus .purchase a:hover{
    color:#F37100;
}

.wrapper-colorful-bg .business .purchase a:hover{
    color:#ED4D13;
}

.wrapper-colorful-bg ul .purchase:before{
    position: absolute;
    content: '';
    background: rgba(239, 239, 239, 0.5);;
    width: 50%;
    height:1em;
    bottom:1em;
    left:25%;
    -webkit-transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -mos-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.wrapper-colorful-bg ul:hover .purchase:before{
    position: absolute;
    content: '';
    width: 90%;
    height:1em;
    left:5%;
}