/*------------------------------------------------------------------
[Master Stylesheet]

Theme Name: Start Multipurpose HTML5 Template
Theme URI: http://portiatheme.com/Start/
Author: PortiaTheme
Author URI: http://themeforest.net/user/portiatheme
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: ajax contact form, animation, blog, bootstrap, business, corporate, css3, html5, portfolio, responsive, retina, single page, video background
------------------------------------------------------------------*/

/*------------------------------------------------------------------
[Table of contents]

1. Common Styles
2. Background Styles
3. Caption Styles
4. Nav Styles / nav
5. Homepage Styles / #homepage
6. About Styles / #about
7. Offer Styles / section.offer
8. Team Styles / #team
9. Features Styles / .features
10. Milestones Styles / .milestones
11. Purchase Styles / .purchase
12. Portfolio Styles / #portfolio
13. Blog Styles / #blog
14. Contact Styles / #contact
15. Footer Styles / footer
------------------------------------------------------------------*/

/*------------------------------------------------------------------
# [Color codes]

# DeepPink (Default Color) => #E91061
# Yellow => #FECD32
# Blue => #51A4DC
# Green => #67C5AE
------------------------------------------------------------------*/
/*
@import url("fonts.css");*/

::-moz-selection{ background-color:#e91061; color:#fff; text-shadow:none; }
::selection{ background-color:#e91061; color:#fff; text-shadow:none; }

/*==================================================================
[1. Common Styles]
==================*/
body{
	overflow-y: scroll;
	overflow-x: hidden;
}

#loading{
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 11000;
	background: #fff;
}

#loading img{
	 width:64px;
	 height:64px;
	 position: fixed;
	 left:50%;
	 top:50%;
	 margin: -32px 0 0 -32px;
	 z-index: 11001;
}

#wrapper{
	font-size: 100%;
}

#wrapper, section{
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto;
	overflow: hidden;
	display: block;
}

.wrapper-bg-x{
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 0;
	background: url(../images/1.jpg) no-repeat top center;
}

a,a:hover{
	text-decoration: none;
}

li{
	list-style: none;
}

.no-float{
	float: none;
}

p{
	color: #424242;
	font-family: "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	letter-spacing: 0.05em;
}

.button{
	text-transform: uppercase;
	font-size: 1.0em;
	color: #000;
	z-index: 10;
	text-align: center;
	display: block;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	line-height: 34px;
	border: 1px solid #000;
	overflow: hidden;
	background: none;
	font-family: "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	padding: 3px 20px 3px 40px;
	margin: 60px auto;
	-webkit-transition: all 1s;
	transition: all 1s;
	letter-spacing: 0.06em;
}

button:hover,.button:hover{
	background: #e91061;
	color: #fff;
	border-color: #e91061;
}

.button1{width:180px;text-align:center;}

.yellow button:hover{
	background: #fecd32;
	border-color: #fecd32;
}

.blue button:hover{
	background: #51a4dc;
	border-color: #51a4dc;
}

.green button:hover{
	background: #67c5ae;
	border-color: #67c5ae;
}

.button-inverse{
	background: #e91061;
	color: #fff;
	border-color: #e91061;
}

.yellow .button-inverse{
	background: #fecd32;
	border-color: #fecd32;
}

.blue .button-inverse{
	background: #51a4dc;
	border-color: #51a4dc;
}

.green .button-inverse{
	background: #67c5ae;
	border-color: #67c5ae;
}

button.button-inverse:hover{
	background: none;
	color: #000;
	border-color: #000;
}

button i{
	margin-left: 13px;
}

/*==================================================================
[2. Background Styles]
======================*/
.overlay, .overlay-color{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 0;
	margin: 0;
	padding: 0;
}

.overlay{
	background: url(../images/5.jpg);
}

.overlay-color{
	background:  #000;
}

#homepage .overlay-color,
.offer .overlay-color,
.features .overlay-color,
#contact .overlay-color{
	opacity: .6;
}

/*==================================================================
[3. Caption Styles]
===================*/
.title-big{
	padding-top:50px;
	text-align: center;
}

.decor-title{
	font-family: "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	font-size: 7.5em;
	color: #f7f6f4;
	position: absolute;
	z-index: 0;
	width: 100%;
}

.title-big h1{
	font-family: "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	font-size: 3em;
	color: #000;
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0;
	margin-top: 40px;
}

.title-big h1 span{
	font-family: "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	font-size: 1.5rem;
	color: #e91061;
	vertical-align: middle;
}

.yellow .title-big h1 span{
	color: #fecd32;
}

.blue .title-big h1 span{
	color: #51a4dc;
}

.green .title-big h1 span{
	color: #67c5ae;
}

.subtitle{
	font-family: "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	font-size: 1.375em;
	color: #555555;
	position: relative;
	z-index: 1;
	margin: 0;
}

hr{
	width: 100px;
	margin-top: 30px;
	border: 0;
	border-top: 3px solid #e91061;
	position: relative;
	z-index: 1;	
}

.yellow hr{
	border-color: #fecd32;
}

.blue hr{
	border-color: #51a4dc;
}

.green hr{
	border-color: #67c5ae;
}

h1.title-smooth{
	font-family: "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	font-size: 1.875em;
	color: #fff;
	position: relative;
	z-index: 1;
	letter-spacing: .05em;
	text-align: center;
	padding-top: 120px;
	margin-top: 0
}

h1.title-smooth span{
	color: #e91061;
}

.yellow h1.title-smooth span{
	color: #fecd32;
}

.blue h1.title-smooth span{
	color: #51a4dc;
}

.green h1.title-smooth span{
	color: #67c5ae;
}

.title-desc{
	font: 1.4em/2em "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	letter-spacing: .03em;
	text-align: center;
	width: 810px;
	margin: 0 auto;
	color: #444444;
}

/*==================================================================
[4. Nav Styles]
===============*/
nav{
/*	background: #fff;
	width: 100%;
	height: 80px;
	position: absolute;
	z-index: 1000;
	overflow: hidden;*/
}

.nav-shadow{
	/*box-shadow: 0 1px 3px rgba(0,0,0,.15);*/
}

.blog-page nav{
	top:0;
	position: fixed;
	box-shadow: 0 1px 3px rgba(0,0,0,.15);
}
.blog-page #smBanner{
	background:#f7f6f4
}

nav .row{
	position: relative;
}

.fixed-top{
	top:0;
	position: fixed;
}

.logo{
	/*background: url(../img/logo-pink.png) no-repeat center center;*/
	/*width:89px;
	height: 17px;*/
	/*display: block;*/
	/*margin-top: 31.5px;*/

    /*width:137px;
	height: 48px;
	margin-top: 17px;*/
}

.yellow .logo{
	background: url(../img/logo-yellow.png) no-repeat center center;
}

.blue .logo{
	background: url(../img/logo-blue.png) no-repeat center center;
}

.green .logo{
	background: url(../img/logo-green.png) no-repeat center center;
}

nav ul{
/*	float:right;*/
}

nav ul li{
/*	display: inline-block;
	padding-left: 18px;
	padding-right: 18px;
	position: relative;*/
}

nav ul li:before{
/*	content: "|";
	color: #cccccc;
	font-size: 0.8em;
	vertical-align: text-top;
	position: absolute;
	top: 33px;
	left: -4px;*/
}

nav ul li:first-of-type::before{
	display: none;
}

nav ul li a{
/*	line-height: 82px;
	font-family: "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	font-size: 1em;
	text-transform: uppercase;
	color: #5d5d5d;
	letter-spacing: 0.08em;
	-webkit-transition: all 1s;
	transition: all 1s; */
}

.current .active-border{
	width: 30px;
	border-top: 6px solid #e91061;
	margin: 0 auto;
	margin-top: -8px;
	text-align: center;
}

.yellow .current .active-border{
	border-color: #fecd32;
}

.blue .current .active-border{
	border-color: #51a4dc;
}

.green .current .active-border{
	border-color: #67c5ae;
}

nav ul li a:hover,
li.current>a{	
	 
}

.yellow nav ul li a:hover,
.yellow li.current>a{	
	color: #fecd32;
}

.blue nav ul li a:hover,
.blue li.current>a{	
	color: #51a4dc;
}

.green nav ul li a:hover,
.green li.current>a{	
	color: #67c5ae;
}

.mobile-header{
	width: 100%;
	height: auto;
	position: fixed;
	z-index: 1000;
	overflow: hidden;
	top: 0;
	text-transform: uppercase;
	text-align: left;
	overflow: hidden;
}

.mobile-header .container{
	background: #fff;
	border-bottom: 1px solid #e9e9e9;
	height: 58px;
}

img.logo-mobile{
	width: 70px;
	display: block;
	margin-top: 23px;
	margin-left: -17px;
}

.mobile-switch i.fa-fw{
	height: 36px;
	line-height: 40px;
}

.mobile-switch i{
	position: absolute;
	right: -10px;
	top: 12px;
}

a.mobile-switch{
	cursor: pointer;
	color: #e91061;
}

.yellow a.mobile-switch{
	color: #fecd32;
}

.blue a.mobile-switch{
	color: #51a4dc;
}

.green a.mobile-switch{
	color: #67c5ae;
}

a.mobile-switch.list-group-item{
	border: none;
}

a.mobile-switch.list-group-item:hover{
	background: none;
}

.mobile-header ul{
	padding-left: 0;
}

.mobile-header ul li{
	border-bottom: 1px solid #e9e9e9;
	background: #fff;
	overflow: hidden;
}

.mobile-header ul li:hover{
	background: #e91061;
}

.yellow .mobile-header ul li:hover{
	background: #fecd32;
}

.blue .mobile-header ul li:hover{
	background: #51a4dc;
}

.green .mobile-header ul li:hover{
	background: #67c5ae;
}

.mobile-header ul li a{
	color: #666666;
	font: .9em "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	width: 100%;
	letter-spacing: .08em;
	padding: 13px 0 10px 30px;
	margin: 0;
	display: block;
	position: relative;
	vertical-align: baseline;
}

.mobile-header ul li:hover a{
	color: #fff;
}

.mobile-header ul li a:before{
	content: "\f0da";
	font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    font-size: .9em;
	position: absolute;
	bottom: 13.515px;
	margin-left: -7px;
	color: #e91061;
}

.yellow .mobile-header ul li a:before{
	color: #fecd32;
}

.blue .mobile-header ul li a:before{
	color: #51a4dc;
}

.green .mobile-header ul li a:before{
	color: #67c5ae;
}

.mobile-header ul li:hover a:before{
	color: #fff;
}

/*==================================================================
[5. Homepage Styles]
====================*/

#homepage{
	color: #fff;
	padding: 0;
	height: 732px;
	width: 100%;
	position: relative;
	background-size: cover;
}
.image_bg_homepage{
    background: url(../images/1.jpg) no-repeat top center;
}

.homepage-inner{
	position: relative;
	z-index: 100;
	top:26%;
	text-align: center;
	color: #fff;
	width: 450px;
	margin: 0 auto;
}.desc
.since{
	font: 1.125em "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	margin-top:20px;
	margin-bottom: 10px;
	overflow: hidden;
}

.since span{
  position: relative;
}

.since span:before,
.since span:after{
	content: ""; 
	position: absolute;
	top: 50%; 
	margin-top: -.2em;
	height: .3em;
	border-bottom: 1px solid #fff;
	width: 250px;
}

.since span:before {  
  right: 100%;
  margin-right: 1.5em;
}

.since span:after{  
  left: 100%;
  margin-left: 1.5em;
}

.slogan{
	font-size: 5.5em;
	font-family: "Microsoft YaHei","微软雅黑","宋体",'NovecentosanswideLight', Arial, sans-serif;
	line-height: 68px;
    margin-bottom:10px;
    margin-top:15px;
}

.site-name{
	font-size: 5.5em;
	font-family: "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	letter-spacing: .6em;
	color: #e91061;
	border-bottom: 1px solid #fff;
	line-height: 79px;
	padding-bottom: 10px;
	text-indent: 7px;
}

.yellow .site-name{
	color: #fecd32;
}

.blue .site-name,
.green .site-name{
	color: #fff;
}

.desc{
	font: .9375em "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	letter-spacing: .06em;
	margin-top: 15px;
}

#button-scroll{
	position: absolute;
	bottom: 25px;
	text-align: center;
	width: 76px;
	height: 50px;
	display: block;
	margin-left: -38px;
	left: 50%;
}
	
#button-scroll a{
	font: 1em "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	color: #fff;
	letter-spacing: .08em;
	-webkit-transition: all .4s;
	transition: all .4s;
}

#button-scroll a:hover{
	color: #e91061;
}

.yellow #button-scroll a:hover{
	color: #fecd32;
}

.blue #button-scroll a:hover{
	color: #51a4dc;
}

.green #button-scroll a:hover{
	color: #67c5ae;
}

#button-scroll img{
	margin-top: 10px;
}

#homepage hr{
	position: absolute;
	bottom: 1px;
	width: 100%;
	height: 1px;
	margin: 0;
}

/*==================================================================
[6. About Styles]
=================*/
#about{
	background: #fff;
}

p.history{
	width: 750px;
	margin: 50px auto 50px;
	text-align: center;
	line-height: 28px;
}

.boxes{
	margin: 20px auto 0;
}

.box{
	margin: 30px auto;
}

.box-inner{
	border-top: 1px solid #cdcdcd;
	border-bottom: 1px solid #cdcdcd;
	padding: 35px 20px 30px;
	-webkit-transition: all .4s;
	transition: all .6s;
}

.box-inner:hover{
	background: #fafafa;
	border-color: #fafafa;
}

.box-inner>span.fa-stack{
	background: #e91061;
	width: 80px;
	height: 80px;
	border-radius: 50px;
	margin-bottom: 5px;
}

.yellow .box-inner>span.fa-stack{
	background: #e9e9e8;
}

.blue .box-inner>span.fa-stack{
	background: #51a4dc;
}

.green .box-inner>span.fa-stack{
	background: #67c5ae;
}

.box-inner .fa-fw{
	width: 32px;
	left: 50%;
	top: 50%;
	margin-left: -16px;
	margin-top: -16px;
}

.fa-sitemap{
	font-size: 32px;
}

.boxes h4{
	font: 1.2em/1.5em  "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
}

.boxes p{
	font: 1em/1.75em  "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	padding: 1px 0;
}

.box-inner a{
	font: 0.8125em/1.75em  "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	color: #e91061;
}

.yellow .box-inner a{
	color: gray;
}

.blue .box-inner a{
	color: #51a4dc;
}

.green .box-inner a{
	color: #67c5ae;
}

.box-inner a:hover{
	color: gray;
}

.yellow .box-inner a:hover{
	color: #fecd32;
}

#about button{
	margin-top: 80px;
}

/*==================================================================
[7. Offer Styles]
=================*/
section.offer{
	background-size: cover; 
}
.image_bg_offer {
    background: url(../images/2.jpg) no-repeat top center;
}

.offer p{
	color: #fff2f2;
	line-height: 28px;
	font-size: .9em;
	letter-spacing: .05em;
	padding-top: 5px;
}

.offer span.fa-stack{
	background: #d2195d;
	width: 80px;
	height: 80px;
	border-radius: 50px;
	/*position: absolute;*/
	left: 50%;
	top: 50%;
	margin-left: -40px;
	/*margin-top: -40px;*/
}

.yellow .offer span.fa-stack{
	background: #fecd32;
}

.blue .offer span.fa-stack{
	background: #51a4dc;
}

.green .offer span.fa-stack{
	background: #67c5ae;
}

.offer .col-lg-6:nth-child(odd) .icon-border{
	float:right;
}

.offer .col-lg-9:nth-child(even) p{
	padding-left:18px;
}

.offer .fa-fw{
	width: 32px;
	left: 50%;
	top: 50%;
	margin-left: -16px;
	margin-top: -16px;
}

.offer .fa-cloud-download,
.offer .fa-retweet,
.offer .fa-leaf{
	margin-left: -19px;
}

.offer .container>.row{
	margin-bottom: 40px;
}

.offer .fa{
	color: #000;
}

.icon-border{
	/*border: 3px solid #d2195d;*/
	width: 94px;
	height: 94px;
	border-radius: 50px;
	position: relative;
}

.yellow .icon-border{
	border-color: #fecd32;
}

.blue .icon-border{
	border-color: #51a4dc;
}

.green .icon-border{
	border-color: #67c5ae;
}

.offer .container{
	padding-top: 105px;
	padding-bottom: 90px;
}

/*==================================================================
[8. Team Styles]
=================*/
#team{
	background: #f7f6f4;
}

#team .decor-title{
	color: #ececec;
}

#team .container{
	padding-top: 70px;
	padding-bottom: 100px;
}

.member{
	margin: 10px auto;
	background: #fff;
	overflow: hidden;
	width: 270px;
}

#team figure{
	width: 270px;
	height: 290px;
	position: relative;
	overflow: hidden;
}

.member h4{
	font: 1em "Microsoft YaHei","微软雅黑",Arial, sans-serif;
	letter-spacing: .04em;
	color: #2b2b2b;
	padding: 20px 20px 4px;
	margin-bottom: 0;
}

.member p{
	font: .9em/1.9em "Microsoft YaHei","微软雅黑",Arial, sans-serif;
	letter-spacing: .06em;
	color: #6b6b6b;
	padding: 20px 20px 15px;
	position: relative;
	z-index: 1;
}

.member .job{
	font-size: 1em;
	/*font-family: RalewayLight, Arial, sans-serif;*/
	letter-spacing: .06em;
	padding-left: 20px;
}

.member i.decor{
	font-size: 6em;
	bottom: 50px;
	right: 45px;
}

.member span.fa-stack,
.blog span.fa-stack{
	background: #e91061;
	width: 38px;
	height: 38px;
	border-radius: 40px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -19px;
	margin-top: -19px;
}

.yellow .member span.fa-stack,
.yellow .blog span.fa-stack{
	background: #fecd32;
}

.green .member span.fa-stack,
.green .blog span.fa-stack{
	background: #67c5ae;
}

.blue .member span.fa-stack,
.blue .blog span.fa-stack{
	background: #51a4dc;
}

.member .icon-border,
.blog .icon-border{
	border: 2px solid #e91061;
	width: 46px;
	height: 46px;
	border-radius: 40px;
	position: relative;
}

.yellow .member .icon-border,
.yellow  .blog .icon-border{
	border-color: #fecd32;
}

.blue .member .icon-border,
.blue  .blog .icon-border{
	border-color: #51a4dc;
}

.green .member .icon-border,
.green  .blog .icon-border{
	border-color: #67c5ae;
}

.member .icon-border i{
	-webkit-transition: all .7s;
	transition: all .7s;
}

.icon-border-wrap{
	position: absolute;
	top: -100px;
	left: 50%;
	margin-left: -26px;
	margin-top: -24px;
	opacity: 0;
	-webkit-transition: all .7s;
	transition: all .7s;
}

.member .fa-fw,
.blog .fa-fw{
	width: 20px;
	margin-left: 10px;
	margin-top: 10px;
}

.team-social-icons{
	position: absolute;
	bottom: -40px;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	opacity: 0;
	-webkit-transition: all .7s;
	transition: all .7s;
}

.team-social-icons a{
	color: #aaacac;
	font-size: 1.25em;
	margin-left: 15px;
	-webkit-transition: all .7s;
	transition: all .7s;
}

.team-social-icons a:hover{
	color: #e91061;
}

.yellow .team-social-icons a:hover{
	color: #fecd32;
}

.blue .team-social-icons a:hover{
	color: #51a4dc;
}

.green .team-social-icons a:hover{
	color: #67c5ae;
}

.team-social-icons a:first-child{
	margin-left: 0;
}

.member-mask{
	width: 522px;
	height: 545px;
	-ms-transform:rotate(42.9deg);
	-webkit-transform:rotate(42.9deg);
	transform:rotate(42.9deg);
	margin-left: 111px;
	position: absolute;
	background: #000;
	opacity: 0;
	-webkit-transition: all .7s;
	transition: all .7s;
}

.member:hover{
	cursor: pointer;
}

.member:hover .member-mask{
	opacity: .4;
}

.member:hover .icon-border-wrap{
	opacity: 1;
	top: 50%;
}

.member:hover .team-social-icons{
	opacity: 1;
	bottom: 40px;
}

.member-content{
	position: relative;
	background: #fff;
	margin-top: -10px;
	padding: 0;
	border-bottom: 3px solid #e91061;
}

.yellow .member-content{
	border-color: #fecd32;
}

.blue .member-content{
	border-color: #51a4dc;
}

.green .member-content{
	border-color: #67c5ae;
}

.member:hover .member-content{
	background: #e91061;
	color: #fff !important;
}

.yellow .member:hover .member-content{
	background: #fecd32;
}

.blue .member:hover .member-content{
	background: #51a4dc;
}

.green .member:hover .member-content{
	background: #67c5ae;
}

.member:hover .member-content p,
.member:hover .member-content h4{
	color: #fff !important;
}

.member:hover i.decor{
	opacity: 0;
}

/*==================================================================
[9. Features Styles]
===================*/
.features{
	padding-bottom: 110px; 
	overflow: visible;
	background-size: cover;
}
.image_bg_features{
    background: url(../images/3.jpg) no-repeat top center;
    background-size: cover;
}

.feature-content{
	position: relative;
	z-index: 10; 
}

.features img{
	position: absolute;
	right: 50%;
	z-index: 9;
}

#easy-customization img{
	/*bottom: 90px;*/
	bottom: -100px;
}

#retina-ready img{
	bottom: -85px;
	right: 45%;
	
}

#responsive-design img{
	bottom: 90px;
}

#clean-design img{
	bottom: -70px;
	right: 60%;
	width: 300px;
}
#bootstrap-grids img{
	bottom: -75px;
	right: 45%;
}

.features .container{
	padding-top: 70px; 
}

.features h1{
	font: 1.7em "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	color: #c5c3c3;
	letter-spacing: .06em;
}

.features p{
	font: 1em/1.9em "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	color: #f1ebeb;
}

.features p:last-of-type{
	margin-top: 30px;
}

.feature hr{
	border-width: 2px;
	margin: 45px 0;
	text-align: left;
}

.feature .button{
	border-color: #e91061;
	color: #e91061;
	margin: 0;
}

.yellow .feature .button{
	border-color: #fecd32;
	color: #fecd32;
}

.blue .feature .button{
	border-color: #51a4dc;
	color: #51a4dc;
}

.green .feature .button{
	border-color: #67c5ae;
	color: #67c5ae;
}

.feature .button:hover{
	color: #fff;
}

.feature .button>i{
	vertical-align: middle;
	margin-top: -2px;
}

.feature .button>i.fa-mobile{
	font-size: 1.5em;
	vertical-align: middle;
	margin-top: -2px;
}

.links{
	margin: 30px auto 50px;
	display: block;
	position: relative;
	z-index: 10;
	text-align: center;
}

.links a{
	display: inline-block;
	color: #8d8c8c;
	position: relative;
}

.links hr{
	display: inline-block;
	border-color: #8d8c8c;
	border-width: 1px;
	vertical-align: middle;
	margin: -3px 6px 0 10px;
	width: 178px;
}

.links .fa-circle-o{
	color: #8d8c8c;
	font-size: 16px;
}

.feature-name{
	position: absolute;
	top: -25px;
	font: 1em "微软雅黑", Arial, sans-serif;
	letter-spacing: .06em;
	width: 200px;
	margin-left: -100px;
}

.links .fa-circle{
	color: #e91061;
	position: absolute;
	width: 8px;
	font-size: 8px;
	top: 50%;
	left: 50%;
	margin: -4.55px 0 0 -4px;
}

.yellow .links .fa-circle{
	color: #fecd32;
}

.blue .links .fa-circle{
	color: #51a4dc;
}

.green .links .fa-circle{
	color: #67c5ae;
}

/*==================================================================
[10. Milestones Styles]
======================*/
.milestones{
	min-height: 850px;
	background: #f7f6f4;
	position: relative;
	z-index: 1;
}

.milestones h1.title-smooth{
	color: #444444;
	padding-top: 110px;
}

.man,
.woman{
	border: 3px solid #f7f6f4;
	position: absolute;
	left: 50%;
	top: -63px;
	margin-left: -63px;
	z-index: 10;
}

.customer{
	position: absolute;
}

.customers{
	margin: 0 auto;	
	text-align: center;
}

.customer-wrap{
	display: inline-block;
	padding: 20px 120px;
	position: relative;
}

.customer::before,
.customer5 .customer::after{
	border: 1px solid #d7d7d7;
	content: ""; 
	width: 130px; 
	height: 1px;
	position: absolute;
}

.customer::before{
	left: -130px;
	bottom: -30px;
	-ms-transform:rotate(330deg);
	-webkit-transform:rotate(330deg);
	transform:rotate(330deg);
}

.customer5 .customer::after{
	right: -140px;
	bottom: -10px;
	-ms-transform:rotate(20deg);
	-webkit-transform:rotate(20deg);
	transform:rotate(20deg);
}

.customer2 .customer::before{
	left: -145px;
	bottom: 70px;
	-ms-transform:rotate(20deg);
	-webkit-transform:rotate(20deg);
	transform:rotate(20deg);
}

.customer4 .customer::before{
	left: -125px;
	bottom: 145px;
	-ms-transform:rotate(40deg);
	-webkit-transform:rotate(40deg);
	transform:rotate(40deg);
}

.customer-wrap:first-of-type{
	padding-left: 0;
}

.customer .img-circle{
	border: 2px solid #000;
}

.customer1 .img-circle{
	border-color: #f7c262;
}

.customer2 .img-circle{
	border-color: #63c6ae;
}

.customer3 .img-circle{
	border-color: #ea6153;
}

.customer4 .img-circle{
	border-color: #4aa3df;
}

.customer5 .img-circle{
	border-color: #ec005f;
}

.customer1{
	top: 190px;
}

.customer2{
	top: 260px;
	padding-right: 110px;
	padding-left: 140px;
}

.customer3{
	top: 100px;
}

.customer4{
	top: 300px;
}

.customer5{
	top: 160px;
}

.data{
	-webkit-border-radius: 6px;
	border-radius: 6px;
	width: 134px;
	height: 30px;
	color: #fff;
	font: .85em/2.7em "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	letter-spacing: .02em;
	text-align: center;
	margin-left: -67px;
	margin-bottom: -55px;
	position: absolute;
	bottom: 0;
	left: 50%;
}

.customer1 .data{
	background: #f7c262;
}

.customer2 .data{
	background: #63c6ae;
}

.customer3 .data{
	background: #ea6153;
}

.customer4 .data{
	background: #4aa3df;
}

.customer5 .data{
	background: #ec005f;
}

.arrow-up{
	width: 0; 
	height: 0; 
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	position: absolute;
	top: -5px;
	left: 50%;
	margin-left: -6px;
	border-bottom: 6px solid #f7c262;
}

.arrow-down{
	width: 0; 
	height: 0; 
	border-left: 15px solid transparent;
	position: absolute;
	bottom: -12px;
	right: 0;
	border-top: 15px solid #e91061;
}

.yellow .arrow-down{
	border-top-color: #fecd32;
}

.blue .arrow-down{
	border-top-color: #51a4dc;
}

.green .arrow-down{
	border-top-color: #67c5ae;
}

.customer1 .arrow-up{
	border-bottom-color: #f7c262;
}

.customer2 .arrow-up{
	border-bottom-color: #63c6ae;
}

.customer3 .arrow-up{
	border-bottom-color: #ea6153;
}

.customer4 .arrow-up{
	border-bottom-color: #4aa3df;
}

.customer5 .arrow-up{
	border-bottom-color: #ec005f;
}

/*==================================================================
[11. Purchase Styles]
======================*/
.purchase{
	height: auto;
	padding-top: 80px;
	background: #fff;
}

.iphones img{
	cursor: pointer;
	position: relative;	
	-webkit-transition: all .6s;
	transition: all .6s;
	display: block;
	margin-top: 100px; 
}

.iphones .col-lg-4:nth-child(2) img{
	margin-top: 40px;
}

.iphones img:hover{
	margin-top: 40px;
}

.purchase-footer{
	width: 100%;
	position: absolute;
	bottom: 0;
	background: #f7f6f4;
	padding: 60px 0;
}

.purchase-footer p{
	font: 1.7em "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	color: #444444;
	text-align: center;
}

.purchase-footer .button{
	display: inline-block;
}

.buttons{
	margin: 0 auto;
	width: 372px;
}

.buttons .button{
	margin: 30px auto 0;
}

.buttons button:last-of-type{
	margin-left: 20px;
}

/*==================================================================
[12. Portfolio Styles]
======================*/
#portfolio{
	height: auto;
	background: #fff;
}

#Grid .mix{
    opacity: 0;
    display: none;
}

.categories ul{
	display: block; 
	text-align:center;
	-webkit-padding-start: 0px;
	-moz-padding-start: 0px;
	margin: 40px auto 30px;
}

.categories ul li{
	display: inline-block;
	color: #000;	
	padding:8px 15px;
	margin-left: 3px;
	-webkit-transition: all .3s;
	transition: all .3s;
	font-size: .9em;
	font-family: "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	background: none;
	-webkit-border-radius: 4px; 
	border-radius: 4px;
	letter-spacing: .5px;
	cursor: pointer;
	border: 1px solid #000;
}

.categories ul li:first-of-type{
	margin-left: 0;
}

.categories ul li:hover{
	border: 1px solid #e91061;
    background: #e91061;
	color: #fff;
}

.yellow .categories ul li:hover{
	border-color: #fecd32;
}

.blue .categories ul li:hover{
	border-color: #51a4dc;
}

.green .categories ul li:hover{
	border-color: #67c5ae;
}

.categories ul li.active{
	color: #fff;	
	background: #e91061;
	border: 1px solid #e91061;
}

.yellow .categories ul li.active{	
	background: #fecd32;
	border-color: #fecd32;
}

.blue .categories ul li.active{	
	background: #51a4dc;
	border-color: #51a4dc;
}

.green .categories ul li.active{	
	background: #67c5ae;
	border-color: #67c5ae;
}

.categories i.fa-th-large{
	padding-right: 5px;
}

.pics{
	height: auto;
	position: relative;
	margin: 20px auto;
	padding: 0;
}

.pics ul{
	width: 100%;
	height: inherit;
	display: block;
	padding-left: 0;
}

.pics ul li{
	margin: 15px auto;
	text-align: center;
}

.pics .row{
	margin-bottom: 30px;
}

.pics .row:last-of-type{
	margin-bottom: 0;
}

.pics figure{
	position: relative;
	overflow: hidden;
	background: #000;
}

.pics figure img{
	width: 100%;
	/*height: 100%;*/
}

.pics figure:hover .cover,
.pics figure:hover .cover-inner,
.pics figure:hover .cover a{
	opacity: 1;
}

.pics figure:hover{
	cursor: pointer;
}

.cover{
	text-align: center;
	background: #000;
	opacity: 0;
	-webkit-transition: all 1s;
	transition: all 1s;
}

.cover-inner{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 142px;
	height: 142px;
	border-radius: 72px;
	margin: -71px 0 0 -71px;
	background: rgba(255,255,255,0.17);
	padding-top: 15.5%;
	z-index: 11;
	opacity: 0;
	-webkit-transition: all 1s;
	transition: all 1s;
}

.photo-name{
	font: 1.05em "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	letter-spacing: .04em;
	color: #fff;
	margin: 0;
    padding-bottom:10px;
}

.photo-cat{
	font: .85em "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	letter-spacing: .04em;
	color: #e91061;
	margin-top: -3px;
}

.yellow .photo-cat{
	color: #fecd32;
}

.blue .photo-cat{
	color: #51a4dc;
}

.green .photo-cat{
	color: #67c5ae;
}

.cover a.zoom{
	font: 3.75em "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	letter-spacing: .04em;
	color: #c6c4c4;
	position: absolute;
	bottom: 20px;
	right: 20px;
	padding: 0px 10px;
	width: 50px;
	height: 50px;
	border-radius: 70px;
	background: rgba(255,255,255,0.20);
	z-index: 11;
	line-height: 50px;
	opacity: 0;
	-webkit-transition: all 1s;
	transition: all 1s;
}

.cover a.zoom:hover{
	color: #e91061;
}

.yellow .cover a.zoom:hover{
	color: #fecd32;
}

.blue .cover a.zoom:hover{
	color: #51a4dc;
}

.green .cover a.zoom:hover{
	color: #67c5ae;
}

#portfolio .button:last-of-type{
	margin: 105px auto 120px;
}

.pics figure img{ 
    -webkit-transform: scaleY(1);
	-moz-transform: scaleY(1);
	-o-transform: scaleY(1);
	-ms-transform: scaleY(1);
	transform: scaleY(1);
    -webkit-transition: all 0.7s ease-in-out;
	-moz-transition: all 0.7s ease-in-out;
	-o-transition: all 0.7s ease-in-out;
	-ms-transition: all 0.7s ease-in-out;
	transition: all 0.7s ease-in-out;
}
.pics .cover{  
    -webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	transition: all 0.5s linear;
    -moz-opacity: 0.00;
	opacity: 0.00;
}   
.photo-name{
    -webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
    -webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	transition: all 0.5s linear;
    -moz-opacity: 0.00;
	opacity: 0.00;
}
.photo-cat{
    -moz-opacity: 0.00;
	opacity: 0.00;
    -webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
    -webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	transition: all 0.5s linear;
}
.pics .cover a.zoom{ 
    -moz-opacity: 0.00;
	opacity: 0.00;
    -webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
    -webkit-transition: all 0.5s linear;
	-moz-transition: all 0.5s linear;
	-o-transition: all 0.5s linear;
	-ms-transition: all 0.5s linear;
	transition: all 0.5s linear;
}
.pics figure:hover img { 
    /* -webkit-transform: scale(2) rotate(45deg);
	-moz-transform: scale(2) rotate(45deg);
	-o-transform: scale(2) rotate(45deg);
	-ms-transform: scale(2) rotate(45deg);
	transform: scale(2) rotate(45deg); */
	 -webkit-transform: scale(1.2);
	-moz-transform: scale(1.2);
	-o-transform: scale(1.2);
	-ms-transform: scale(1.2);
	transform: scale(1.2); 
	opacity: .3;
}
.pics figure:hover .cover { 
    -moz-opacity: 1;
	opacity: 1;
}                                                                            
.pics figure:hover .photo-name,
.pics figure:hover .photo-cat,
.pics figure:hover a.zoom{ 
    -webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
    -moz-opacity: 1;
	opacity: 1;
}

/*==================================================================
[13. Blog Styles]
=================*/
#blog{
	background: #f7f6f4;
	overflow: visible;
	padding-bottom: 80px;
}

.woman{
	border: 5px solid #fff;
	top: -65px;
	margin-left: -65px;
}

#blog h1.title-smooth{
	color: #444444;
	padding-top: 110px;
}

#blog .container{
	margin-top: 50px;
}

.blog{
	margin: 40px auto;
	background: #fff;
	overflow: hidden;
	cursor: pointer;
	width: 95%;
	position: relative;
}

.blog figure{
	position: relative;
}

.blog figure img{
	width: 100%;
	 
}

.blog-title{
    font-size:18px;
    font-family:"Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	letter-spacing: .02em;
	color: #2b2b2b;
	padding-top: 10px;
	padding-left: 25px;
}
.blog-title a{color: #2b2b2b;}

.blog-content{
	position: relative;
	z-index: 10;
	background: #fff;
	border-bottom: 3px solid #e91061;
}

.yellow .blog-content{
	border-bottom-color: #fecd32;
}

.blue .blog-content{
	border-bottom-color: #51a4dc;
}

.green .blog-content{
	border-bottom-color: #67c5ae;
}

.blog p{
	font-size:14px;
    font-family:"Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
    line-height:26px;
	/*letter-spacing: .04em;*/
	color: #333;
	padding: 10px 25px;
	position: relative;
	z-index: 1;
}

i.decor{
	position: absolute;
	color: #f7f6f4;
	z-index: 0;
}

.blog i.decor{
	font-size: 8.5em;
	bottom: 70px;
	right: 45px;
}

.col-lg-4:last-of-type .blog i.decor{
	font-size: 6.8em;
	bottom: 85px;
}

ul.datas{
	padding: 0 0 20px 5px;
}

ul.datas li{
	display: inline-block;
	font: .75em "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	letter-spacing: .02em;
	color: #969593;
	padding-left: 20px;
}

.like i{
	padding-right: 5px;
	color: #e91061;
}

.yellow .like i{
	color: #fecd32;
}

.blue .like i{
	color: #51a4dc;
}

.green .like i{
	color: #67c5ae;
}

.blog figure{
	position: relative;
}

a.blog-icon-border-wrap{
	position: absolute;
	bottom: -23px;
	left: 50%;
	margin-left: -23.5px;
	z-index: 15;
	-webkit-transition: all .4s linear;
	transition: all .4s linear;
}

.blog:hover a.blog-icon-border-wrap{
	bottom: 50%;
	margin-bottom: -23px;
}

.blog .icon-border span i:hover{
	color: #000;
}

.blog:hover .mask{
	-ms-transform:rotate(142deg);
	-webkit-transform:rotate(142deg);
	transform:rotate(142deg);
	right: -288px;
	top: 132px;
	opacity: .4;
}

.mask{
	opacity: 0;
	position: absolute;
	z-index: 10;
	width: 0; 
	height: 0; 
	border-left: 390px solid transparent;
	border-right: 390px solid transparent;
	border-bottom: 390px solid #000;
	-webkit-transition: all .4s ease-in;
	transition: all .4s ease-in;
}

.blog-single .blog{
	cursor: auto;
	margin: 0 auto;
	overflow: visible;
	width: 100%;
}

.blog-single{
	padding-top: 30px;
}

.blog-single .blog-content p{
	font: 1em/1.9em "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	letter-spacing: .04em;
	padding: 10px 35px;
}

.blog-single-title{
	font-size: 1.2em;
	letter-spacing: .03em;
	padding-top: 50px;
	padding-left: 35px;
	font-family: "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
}

.blog-single .blog p:first-of-type{
	padding-top: 30px;
}

.blog-single .blog p:last-of-type{
	padding-bottom: 50px;
}

.blog-single-title hr{
	text-align: left;
	margin-left: 0;
}

.blog-single .blog ul.datas{
	padding-bottom: 30px;
}

.blog-single .blog ul.datas li{
	font-size: 1em;
	letter-spacing: .03em;
	padding-left: 35px;
}

.blog-single .blog cite{
	font-style: italic;
}

.blog-single .blog i.decor{
	font-size: 28.5em;
	bottom: 20%;
	right: 12%;
	opacity: .6;
}

.corner-date{
	position: absolute;
	left: -15px;
	top: 50px;
	width: 120px;
	height: 90px;
	background: #e91061;
	z-index: 10;
	font: 2.1em/.9em "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	text-align: center;
	color: #fff;
	letter-spacing: -.03em;
	padding-top: 18px;
	border-bottom-left-radius: 6px;
	border-top-right-radius: 6px;
}

.yellow .corner-date{
	background: #fecd32;
}

.blue .corner-date{
	background: #51a4dc;
}

.green .corner-date{
	background: #67c5ae;
}

.corner-date span{
	font-family: "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	font-size: 2.1rem;
	letter-spacing: 0;
}

.boxtitle{
	color: #5A6168;
	font: 1em "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.boxtitle+hr{
	width: 30px;
	text-align: left;
	margin: 0;
	padding: 0;
	margin-bottom: 30px;
}

aside{
	padding-left: 20px;
}

.side-box,
.blog-author{
	background: #fff;
	padding: 20px 35px 30px;
	margin-bottom: 30px;
	border-top-left-radius: 14px;
	border-bottom-right-radius: 14px;
	position: relative;
}

.side-box ul{
	margin: 0;
	padding: 0;
}

.side-box ul li{
	position: relative;
	font-family: "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	padding-top: 4px;
	padding-bottom: 4px;
	border-bottom: 1px dotted #dfdfdf;
	-webkit-transition: all .2s ease-in;
	transition: all .2s ease-in;
}

.side-box ul li:hover{
	background: #f7f6f4;
	text-indent: 5px;
}

.side-box ul li a{
	color: #868585;
	-webkit-transition: all .2s ease-in;
	transition: all .2s ease-in;
}

.side-box ul li a:hover{
	color: #1b1b1b;
}

.side-box ul li:before{
	content: "\f105";
	font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    font-size: .8em;
    padding-right: 0.5em;
	vertical-align: text-bottom;
	opacity: .7;
}

.archives span{
	color: #e91061;
}

.yellow .archives span{
	color: #fecd32;
}

.blue .archives span{
	color: #51a4dc;
}

.green .archives span{
	color: #67c5ae;
}

.side-box p{
	font-size: 1em;
	color: #868585;
	line-height: 1.6em;
}

.side-box .button{
	margin: 30px auto 5px 0;
	width: 70px;
	height: 26px;
	padding: 0;
	font-size: .7em;
	line-height: 26px;
}

.tags .button{
	margin: 5px auto 5px 0;
	width: auto;
	height: 26px;
	padding: 0 10px;
	font-size: .7em;
	line-height: 26px;
	display: inline-block;
}

aside .form-control{
	height: 46px;
	padding: 5px 30px;
	font-size: 1em;
	color: #868585;
	background: #fff;
	border-radius: 0;
	box-shadow: none;
	border: none;
	font-family: "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	letter-spacing: .02em;
	margin-bottom: 20px;
	border-left: 2px solid #e91061;
}

.yellow aside .form-control{
	border-color: #fecd32;
}

.blue aside .form-control{
	border-color: #51a4dc;
}

.green aside .form-control{
	border-color: #67c5ae;
}

.input-group-addon {
	color: #CEC8C8;
	background-color: #FFFFFF;
	border: 0;
	border-radius: 0;
}

aside .input-group{
	margin-bottom: 20px;
}

aside .form-control:focus{
  border: none;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-left: 2px solid #e91061;
}

.yellow aside .form-control:focus{
  border-color: #fecd32;
}

.blue aside .form-control:focus{
  border-color: #51a4dc;
}

.green aside .form-control:focus{
  border-color: #67c5ae;
}

button.button:focus{
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.flickr-photos figure{
	display: inline-block;
	margin: 0 auto 4px 4px;
	padding: 0;
	width: 17.3379%;
	position: relative;
	overflow: hidden;
	border: none;
	background: #000;
}

.flickr-photos figure img{
	-webkit-transition: opacity .6s ease-in-out;
	transition: opacity .6s ease-in-out;
	width: 100%;
	height: 100%;
}

.flickr-photos figure:hover img{
	opacity: .5;
}

.flickr-photos figure:hover i.fa-plus{
	opacity: 1;
	top: 50%;
}

i.fa-plus{
	position: absolute;
	top: 20%;
	left: 50%;
	color: #e91061;
	z-index: 11;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	opacity: 0;
	-webkit-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
	-webkit-transition: top .2s ease-in-out;
	transition: top .2s ease-in-out;
}

.yellow i.fa-plus{
	color: #fecd32;
}

.blue i.fa-plus{
	color: #51a4dc;
}

.green i.fa-plus{
	color: #67c5ae;
}

.text-widget i.decor{
	font-size: 8.5em;
	right: 50px;
	top: 74px;
	opacity: .6;
}

.text-widget p{
	position: relative;
	z-index: 1;
}

.blog-author{
	margin: 30px 0 0;
	padding-top: 40px;
	padding-left: 25px;
	border-radius: 0;
}

.blog-author img{
	width: 95%;
}

.blog-author h4, 
.blog-author h5{
	margin: 0px;
	padding-bottom: 5px;
}

.blog-author h4{
	font-size: 1.1em;
}

 .blog-author h5{
	font-size: 1em;
}

.blog-author hr{
	width: 30px;
	text-align: left;
	margin: 10px 0 20px;
	padding: 0;
}

.blog-author .arrow-left,
.blog-author .arrow-right{
	width: 0; 
	height: 0; 
	position: absolute;
}

.blog-author .arrow-left{
	border-right: 15px solid transparent;
	bottom: 5px;
	left: 5px;
	border-bottom: 15px solid #e91061;
}

.blog-author .arrow-right{
	border-left: 15px solid transparent;
	right: 5px;
	top: 5px;
	border-top: 15px solid #e91061;
}

.yellow .blog-author .arrow-left,
.yellow .blog-author .arrow-right{
	border-bottom-color: #fecd32;
	border-top-color: #fecd32;
}

.blue .blog-author .arrow-left,
.blue .blog-author .arrow-right{
	border-bottom-color: #51a4dc;
	border-top-color: #51a4dc;
}

.green .blog-author .arrow-left,
.green .blog-author .arrow-right{
	border-bottom-color: #67c5ae;
	border-top-color: #67c5ae;
}

.comments{
	background: #fff;
	margin: 30px 0 0;
	padding: 20px 10px 60px 20px;
}

.comment hr{
	border-width: 1px;
	border-color: #696969;
	text-align: left;
	margin: 10px 0;
	width: 100%;
}

.comment img{
	width: 55px;
	height: 55px;
	margin: 10px 0 20px 20px;
}

.comments h3{
	font: 1.8em "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	margin-bottom: 40px;
}

.comments h5{
	margin-bottom: 3px;
}

hr.comment-end{
	display: none;
}

.blog-time{
	font: .8em "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	padding: 0;
}

.blog-time a{
	color: #e91061;
}

.yellow .blog-time a{
	color: #fecd32;
}

.blue .blog-time a{
	color: #51a4dc;
}

.green .blog-time a{
	color: #67c5ae;
}

.comment{
	padding-bottom: 20px;
}

.comment-form form{
	margin-top: 110px;
	position: relative;
	z-index: 1;
}

.comment-form h4.boxtitle{
	background: #f7f7f7;
	margin-right: 15px;
	margin-top: 80px;
}

.comment-form i.decor{
	font-size: 28em;
	bottom: 70px;
	right: -30px;
	opacity: .4;
}

.comment-form h4.boxtitle::first-letter{
	color: #e91061;
}

.yellow .comment-form h4.boxtitle::first-letter{
	color: #fecd32;
}

.blue .comment-form h4.boxtitle::first-letter{
	color: #51a4dc;
}

.green .comment-form h4.boxtitle::first-letter{
	color: #67c5ae;
}

.comment-form h4.boxtitle span{
	background: #fff;
	padding-right: 25px;
}

.comment-form input.form-control,
.comment-form textarea.form-control{
	margin-bottom: 8px;
	font-size: .9em;
	color: #696969;
	background: none;
	box-shadow: none;
	border-color: #696969;
	font-family: "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	letter-spacing: .02em;
}

.comment-form input.form-control{
	height: 40px;
}

.comment-form form p{
	padding-bottom: 5px;
	font-size: .9em;
	color: #e91061;
}

.yellow .comment-form form p{
	color: #fecd32;
}

.blue .comment-form form p{
	color: #51a4dc;
}

.green .comment-form form p{
	color: #67c5ae;
}

.comment-form form .button{
	width: 100%;
	margin: 0 auto 80px;
	height: 40px;
	line-height: 40px;
	padding: 0;
	font-size: .8em;
}

.comment-form textarea{
	font-family: "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	font-size: .9em;
	padding-top: 15px;
}

.comment-form .form-control::-moz-placeholder {
  color: #696969;
  opacity: 1;
}

.comment-form .form-control:-ms-input-placeholder {
  color: #696969;
}

.comment-form .form-control::-webkit-input-placeholder {
  color: #696969;
}

.comment-form .form-control:focus {
  border-color: #e91061;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.yellow .comment-form .form-control:focus {
  border-color: #fecd32;
}

.blue .comment-form .form-control:focus {
  border-color: #51a4dc;
}

.green .comment-form .form-control:focus {
  border-color: #67c5ae;
}

/*==================================================================
[14. Contact Styles]
===================*/
#contact{
	height: auto;
	background-size: cover;
}

.image_bg_contact{
    background: url(../images/4.jpg) no-repeat top center;
	background-size: cover;
}

#contact hr+p{
	color: #fff;
	font-family: "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	margin-bottom: 120px;
}

#contact .container{
	position: relative;
	z-index: 10;
}

#contact input.form-control,
#contact textarea.form-control{
	padding: 20px;
	font-size: 1.125em;
	color: #fff;
	background: none;
	border-radius: 0;
	box-shadow: none;
	border: none;
	border-bottom: 1px solid #fff;
	font-family: "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	letter-spacing: .02em;
}

#contact input.form-control{
	height: 56px;
}

#contact .button{
	/*border-radius: 0;*/
	width: 100%;
	border-color: #fff;
	color: #e91061;
	margin: 70px auto;

    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.yellow #contact .button{
	color: #fecd32;
}

.blue #contact .button{
	color: #51a4dc;
}

.green #contact .button{
	color: #67c5ae;
}

#contact .button:hover{
	border-color: #e91061;
	/*background: none;*/
    background: #e91061;
	color: #fff;
}

.yellow #contact .button:hover{
	border-color: #fecd32;
}

.blue #contact .button:hover{
	border-color: #51a4dc;
}

.green #contact .button:hover{
	border-color: #67c5ae;
}

#contact textarea{
	margin-top: 20px;
	font-family: 'Microsoft YaHei','微软雅黑', Arial, sans-serif;
	font-size: 1.125em;
}

#contact .form-control::-moz-placeholder {
	color: #fff;
	opacity: 1;
}

#contact .form-control:-ms-input-placeholder {
	color: #fff;
}

#contact .form-control::-webkit-input-placeholder {
	color: #fff;
}

#contact .form-control:focus {
	border-color: #e91061;
	outline: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.yellow #contact .form-control:focus {
	border-color: #fecd32;
}

.blue #contact .form-control:focus {
	border-color: #51a4dc;
}

.green #contact .form-control:focus {
	border-color: #67c5ae;
}

.clients{
	margin: 90px auto 150px;
}

.logos{
	width: 100%;
	height: auto;
	position: relative;
	display: block;
	overflow: hidden;
	padding-top:90px;
	padding-bottom:160px;
	z-index: 100;
}

.logos img{
	text-align: center;
	display: inline-block;
	margin-left: 70px;
}

.logos img:first-of-type{
	margin-left: 0;
}

.img-wrap{
	margin: 0 auto;
	text-align: center;
}

#alert-message{
	text-align: center;
	margin-bottom: 40px;
	font: 1.3em "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
}

.error-color{
	color: #E91061; 
}

.success-color{
	color: #19950f; 
}

/*==================================================================
[15. Footer Styles]
===================*/
footer{
	width: 100%;
	
	background: #333;
	position: relative;
}

footer .container{
	padding-top: 105px;
}

a.back{
	position: absolute;
	left: 50%;
	top: -22.5px;
	z-index: 11;
	font: .85em "Microsoft YaHei","微软雅黑","宋体",Arial, sans-serif;
	color: #e91061;
	text-align: center;
	width: 86px;
	height: 86px;
	margin-left: -43px;
	-webkit-transition: all .2s ease-in;
	transition: all .2s ease-in;
}

.yellow a.back{
	color: #fecd32;
}

.blue a.back{
	color: #51a4dc;
}

.green a.back{
	color: #67c5ae;
}

a.back.single{
	top: 35px;
}

.back img{
	margin-bottom: 26px;
}

.no-image{
	top: 32px !important;
}

a.back:hover{
	margin-top: 5px;
	color: #efefef;
}

ul.contacts{
	color: #45464c;
	font-family: 1em OpenSans, arial, helvetica, sans-serif;
	margin-top: 40px;
}

ul.contacts li{
	display: inline-block;
	padding-left: 25px;
	position: relative;
	word-break:break-all;
	text-align:center;
	
}

ul.contacts li:before{
    font-family: FontAwesome;
    padding-bottom: 0.5em;
    position: absolute;
    top: -58px;
    left: 50%;
    font-size: 2.5em;
    margin-left: -5px;
}

ul.contacts li.tel:before{
	content: "\f095";
}

ul.contacts li.email:before{
	content: "\f003";
}

ul.contacts li.location:before{
	content: "\f041";
}
ul.contacts{}
ul.contacts li.tel{ width:23%; float:left; padding:0;}
ul.contacts li.email{ width:42%; float:left; padding:0}
ul.contacts li.location{ width:35%; float:left; padding:0}
ul.contacts li a{color:#45464c;}

ul.contacts li:first-of-type{
	padding-left: 0;
}

.social-icons{
	float: right;
}

.icon-wrap{
	margin-left: 10px;
	position: relative;
	display: inline-block;
	width: 48px;
	height: 48px;
	background: #232427;
}

.icon-wrap a.facebook,
.icon-wrap a.twitter,
.icon-wrap a.linkedin,
.icon-wrap a.tumblr,
.icon-wrap a.flickr,
.icon-wrap a.qq,
.icon-wrap a.pinterest{
	text-align: center;
	-webkit-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
	width: 36px;
	height: 36px;
	background-position: 0 0;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -18px;
	margin-top: -18px;
	overflow: hidden;
	display: block;
}

.icon-wrap a.facebook{
	background:  url(../img/social-icons/facebook.png) no-repeat;
}

.icon-wrap a.twitter{
	background:  url(../img/social-icons/twitter.png) no-repeat;
}

.icon-wrap a.linkedin{
	background:  url(../img/social-icons/linkedin.png) no-repeat;
}

.icon-wrap a.tumblr{
	background:  url(../img/social-icons/tumblr.png) no-repeat;
}

.icon-wrap a.flickr{
	background:  url(../img/social-icons/flickr.png) no-repeat;
}

.icon-wrap a.pinterest{
	background:  url(../img/social-icons/pinterest.png) no-repeat;
}
.icon-wrap a.qq{
	background:  url(../img/social-icons/qq.png) no-repeat;
}

.icon-wrap a.facebook:hover{
	background:  url(../img/social-icons/facebook-pink-hover.png) no-repeat;
}

.icon-wrap a.twitter:hover{
	background:  url(../img/social-icons/twitter-pink-hover.png) no-repeat;
}

.icon-wrap a.linkedin:hover{
	background:  url(../img/social-icons/linkedin-pink-hover.png) no-repeat;
}

.icon-wrap a.tumblr:hover{
	background:  url(../img/social-icons/tumblr-pink-hover.png) no-repeat;
}

.icon-wrap a.flickr:hover{
	background:  url(../img/social-icons/flickr-pink-hover.png) no-repeat;
}

.icon-wrap a.pinterest:hover{
	background:  url(../img/social-icons/pinterest-pink-hover.png) no-repeat;
}

.icon-wrap a.qq:hover{
	background:  url(../img/social-icons/qq-hover.png) no-repeat;
}

.yellow .icon-wrap a.facebook:hover{
	background:  url(../img/social-icons/facebook-yellow-hover.png) no-repeat;
}

.yellow .icon-wrap a.twitter:hover{
	background:  url(../img/social-icons/twitter-yellow-hover.png) no-repeat;
}

.yellow .icon-wrap a.linkedin:hover{
	background:  url(../img/social-icons/linkedin-yellow-hover.png) no-repeat;
}

.yellow .icon-wrap a.tumblr:hover{
	background:  url(../img/social-icons/tumblr-yellow-hover.png) no-repeat;
}

.yellow .icon-wrap a.flickr:hover{
	background:  url(../img/social-icons/flickr-yellow-hover.png) no-repeat;
}

.yellow .icon-wrap a.pinterest:hover{
	background:  url(../img/social-icons/pinterest-yellow-hover.png) no-repeat;
}

.blue .icon-wrap a.facebook:hover{
	background:  url(../img/social-icons/facebook-blue-hover.png) no-repeat;
}

.blue .icon-wrap a.twitter:hover{
	background:  url(../img/social-icons/twitter-blue-hover.png) no-repeat;
}

.blue .icon-wrap a.linkedin:hover{
	background:  url(../img/social-icons/linkedin-blue-hover.png) no-repeat;
}

.blue .icon-wrap a.tumblr:hover{
	background:  url(../img/social-icons/tumblr-blue-hover.png) no-repeat;
}

.blue .icon-wrap a.flickr:hover{
	background:  url(../img/social-icons/flickr-blue-hover.png) no-repeat;
}

.blue .icon-wrap a.pinterest:hover{
	background:  url(../img/social-icons/pinterest-blue-hover.png) no-repeat;
}

.green .icon-wrap a.facebook:hover{
	background:  url(../img/social-icons/facebook-green-hover.png) no-repeat;
}

.green .icon-wrap a.twitter:hover{
	background:  url(../img/social-icons/twitter-green-hover.png) no-repeat;
}

.green .icon-wrap a.linkedin:hover{
	background:  url(../img/social-icons/linkedin-green-hover.png) no-repeat;
}

.green .icon-wrap a.tumblr:hover{
	background:  url(../img/social-icons/tumblr-green-hover.png) no-repeat;
}

.green .icon-wrap a.flickr:hover{
	background:  url(../img/social-icons/flickr-green-hover.png) no-repeat;
}

.green .icon-wrap a.pinterest:hover{
	background:  url(../img/social-icons/pinterest-green-hover.png) no-repeat;
}

.copyright{
	color: #fff;
	font-size: .9em;
	/*position: absolute;
	z-index: 50;
	bottom:2px;*/
	width: 100%;
	text-align: center;
}

.copyright a{
	color: #e91061;
}

.yellow .copyright a{
	color: #fecd32;
}

.blue .copyright a{
	color: #51a4dc;
}

.green .copyright a{
	color: #67c5ae;
}

/*2015-8*/
#homepage .caseInfo{ width:1000px; left:50%; margin-left:-500px; position:absolute; line-height:30px; top:100%;}
#homepage .caseInfo em{ font-style:normal; display:block}
.homeBannerCont{ width:120px; position:absolute; right:0px; top:50%; margin-top:-180px; z-index:999;position:fixed;background-color:#333;opacity:0.6}
.homeBannerCont a{ display:block; width:120px; height:120px; background-position:center center; background-repeat:no-repeat; transition:ease .6s;line-height:120px;text-align:center}
/*.homeBannerCont a.a-prev{ background-image:url(../img/web-icons/ico-1.png);}
.homeBannerCont a.a-next{ background-image:url(../img/web-icons/ico-2.png);}

.homeBannerCont a.a-menu{ background-image:url(../img/web-icons/ico-3.png);}*/
.homeBannerCont a:hover,.homeBannerCont a.act{ background-color:#e91061;}

#case,#case-List,#case-aritle{ width:100%; background:#fff; text-align:center; display:table; padding-top:5em;}
.caseTitle{ text-align:center; font-size:14px; color:#000; padding:10px 0;}
.caseAbstractTxt{ padding-bottom:80px;}
.caseAbstractTxt img{}

@media screen and (min-width:300px) and (max-width:1006px) {
	.caseAbstractImg img,#case-List img,#case-aritle img,.caseAbstractTxt img{ max-width:1200px; width:100% !important;}	
}

@media screen and (min-width:300px) and (max-width:1006px) {
    .homeBannerCont{ width:80px;}
	.homeBannerCont a{ width:80px;}
    
}

#case-List{ background:#f5f5f5; padding:5em 0;}
.imgBox{ padding:3px; border:1px solid #ebebeb; background:#fff; display:inline-block; max-width:1200px; box-shadow:8px 8px 0px #eeeeee}
.imgBox img{ width:100%; height:auto;}
#case-aritle{background:#fff; padding:5em 0;}

#smBanner{ width:100%; background-repeat:no-repeat; background-position:center center;margin-top:80px;}
.i-showType{ width:9px; height:9px; display:inline-block; background:url(../img/web-icons/ico-4.gif) no-repeat; vertical-align:middle; margin-right:6px;}

#path{max-width:1140px; margin:10px auto; padding:0 10px}
#path strong{ float:right; font-weight:normal; color:#666666; font-size:18px;}
#path strong b{ color:#333;}


#project{ max-width:1150px; margin:20px auto;}
#project .projLeft{}
.projectList{ margin-left:0; padding-left:0}
.projectList li{ border:1px solid #e6e6e6; padding:30px; margin-bottom:25px;}
.projectList li img{ width:100%;}
#project .Industry{}
#project .Industry .Industrylist{ border:1px solid #e6e6e6;}
#project .Industry .Industrylist ul{ margin:0; padding:0;}
#project .Industry .Industrylist li{ border-bottom:1px solid #e6e6e6;text-align:left}
#project .Industry .Industrylist li a{ color:#000; padding:10px 0 10px 13px;  display:block}
.showtype{ font-size:12px;}
.showtype a{ display:inline-block; padding:0 10px; color:#666}
.showtype .act,.showtype a:hover{ background:#f0f0f0;}
.projectList li h3{ margin-top:0px; font-size:18px; font-weight:bold}
.projectList li h3 a{ color:#000}
.projectList li h4{ font-size:12px; color:#666; margin:15px 0;}
.projectList li h6{ margin-top:30px}
.projectList li h6 a{ color:#666}
.IndustryTitle{ margin-top:0; font-size:14px; color:#000}
.i-redArr{ width:10px; height:10px; display:inline-block; background:url(../img/web-icons/ico-5.gif) no-repeat; vertical-align:middle; margin-left:5px;}
.i-arr{ width:5px; height:9px; display:inline-block; background:url(../img/web-icons/ico-7.gif) no-repeat; vertical-align:middle; margin-right:5px;}
.i-arr2{ width:12px; height:7px; display:inline-block; background:url(../img/web-icons/ico-6.gif) no-repeat; vertical-align:middle; margin-left:10px;}
.fr{ float:right;}
.fl{ float:left;}
.i-more{ width:22px; height:26px; display:inline-block; background:url(../img/web-icons/ico-8.gif) no-repeat; vertical-align:middle; margin-right:10px;}
.loadMore{text-align:center; font-size:16px; padding:15px;}
.loadMore a{ color:#999}

.brandBox{ border:1px solid #e6e6e6; margin-bottom:25px; padding:30px; overflow:hidden}
.brandBox h3{ margin-top:0; font-weight:bold; color:#000; font-size:18px;}
.brandBox ul{ padding:0; width:105%}
.brandBox ul li{ border:1px solid #e6e6e6; float:left; margin:0 15px 15px 0;}
.brandBox ul li img{ width:180px; height:98px;}

#masonryList{ max-width:1140px; margin:15px auto; padding:10px;}
.grid-item {  width: 346px;  float: left;  background: #fff; border:1px solid #e6e6e6;  box-shadow:8px 8px 0px #f5f5f5; margin:0 0px 30px 0;}
.grid-item h4{ margin-top:0; padding:17px 17px 0px 17px;}

.grid-item h5,.grid-item h6{ margin-top:0; padding:5px 17px 5px 17px;}
.grid-item h4 a{ color:#000; font-weight:bold; font-size:16px;}
.grid-item h4 a:hover{ color:#e91061}
.grid-item h6{ color:#999}
.infoTxt{ background:#fafafa; line-height:22px; padding:10px;}
.i-more2{ width:16px; height:14px; display:inline-block; background-image:url(../img/web-icons/ico-9.gif); background-position:0 0; background-repeat:no-repeat; vertical-align:middle;}
a:hover .i-more2{ background-position:0 -14px;}
.infoTxt .i-more2{ float:right;}

#hotKey{max-width:1140px; margin:0px auto; padding:0 10px;}
#hotKey ul{ padding:0}
#hotKey .hotKeyList{ padding:5px 0; overflow:hidden}
#hotKey .hotKeyList li{ float:left; margin-right:3px; margin-bottom:5px;line-height:36px;height:36px;}
#hotKey .hotKeyList li a{display:inline-block; border:1px solid #666666; padding:0 6px; color:#333; font-size:18px; line-height:24px; font-weight:bold}
#hotKey .hotKeyList li.act a,#hotKey .hotKeyList li a:hover{ border:1px solid #e91061; background-color:#e91061; color:#fff;}
#hotKey .hotKeyList li a.hk-12{ font-size:12px; line-height:20px;}
#hotKey .hotKeyList li a.hk-14{ font-size:14px; line-height:22px;}
#hotKey .hotKeyList li a.hk-16{ font-size:16px; line-height:24px;}
#hotKey .hotKeyList li a.hk-18{ font-size:18px; line-height:26px;}
#hotKey .hotKeyList li a.hk-20{ font-size:20px; line-height:28px;}
#hotKey .hotKeyList li a.hk-22{ font-size:22px; line-height:30px;}
#hotKey .hotKeyList li a.hk-24{ font-size:24px; line-height:32px;}


.newlist dl{padding:20px;border-bottom:1px dotted #E8E8EA;overflow:hidden;}
.newlist dl dt{padding:4px 0;text-indent:15px;background:url(../img/web-icons/ico-4.gif) 0 10px no-repeat;overflow:hidden;}
.newlist dl dt a{padding:2px 4px;font-size:14px;font-weight:bold;color:#e91061}
.newlist dl dt a:hover{color:#FFF;text-decoration:none;background:#e91061;color:#fff}

.newlist dl dd{line-height:22px;color:#666;}
.newlist dl dd span{color:#999;line-height:32px;}
.newlist dl dd a{color:#e91061;}


.pager{padding:20px;clear:both;margin-bottom:30px;text-align:left}
.pager li{float:left;}
.pager a{color:#e91061;padding:0 5px;}
.pager a.hover02{background:#e91061;color:#fff}
.pager a:hover{color:#FFF;text-decoration:none;background:#e91061;color:#fff}


/*联系我们*/
.ctBox{position:relative; background:#333; clear:both; zoom:1; margin-bottom:20px;}
.ctTxt{ background:#333333; color:#fff; padding:30px;}
.ctTxt h2{ font-size:24px; margin:0}
.ctTxt h3{ font-size:18px; margin-bottom:20px; margin-top:10px; padding-right:40px; position:relative}
.ctTxt h3 i{ width:20px; height:25px; display:inline-block; background:url(../img/web-icons/ico-10.png) no-repeat; position:absolute; right:0px; top:0px;}
.ctTxt h4{ font-size:14px; line-height:20px; margin-bottom:10px;}
.ctMap{ margin:0 0 0 0%;overflow:hidden; position:relative; z-index:1;}
.lookMap{ display:inline-block; background:#e91061; color:#fff; width:120px; height:37px; text-align:center; line-height:37px; font-size:14px; position:absolute; left:35px; bottom:20px;}
a.lookMap:hover{ color:#fff;}


/*友情链接*/
.linklist{padding:20px 0;font-size:14px;color:#45464c;}
.linklist a{margin:0 5px 0 0;color:#45464c;font-size:14px}

.clear{clear:both}

.copyright a{color:#fff}