@media screen and (max-width: 768px){
    /*手机屏幕*/
    #home h1 {color:#fff; font-size:30px;}
    #navbar-main .navbar-nav>li a {
        line-height:28px;
        padding: 10px 5px;
    }
    #portfolio .img-title {
        font-size:1.2em;
    }
}
@media screen and (min-width: 768px){
    /*电脑屏幕*/
    #home h1 {color:#fff; font-size:36px;}
    #navbar-main .navbar-nav>li a {
        line-height:28px;
        padding: 10px 15px;
    }
    #portfolio .img-title {
        font-size:1.4em;
    }
}

#navbar-main .navbar-collapse.collapse {
    display: block! important;
}

#navbar-main .navbar-nav>li, .navbar-nav {
    float: left !important;
}

#navbar-main .navbar-nav.navbar-right:last-child {
    margin-right: -15px !important;
}

#navbar-main .navbar-right {
    float: right !important;
}

#navbar-main .navbar-nav {
    margin-top: 1px;
    margin-bottom: 0px;
}

#navbar-main .navbar-header {
    float:left;
}
.navbar-header a {
    padding-left: 5px;
}
#navbar-main .navbar-header a {
    color:#d9d9d9;
}
#navbar-main .navbar-header a:hover {
    color:#ffffff;
}

html {
	color: rgb(34, 34, 34);
}
button {
	color: rgb(34, 34, 34);
}
input {
	color: rgb(34, 34, 34);
}
select {
	color: rgb(34, 34, 34);
}
textarea {
	color: rgb(34, 34, 34);
}
body {
	line-height: 1.4; font-size: 1em;
}
::selection {
	background: rgb(22, 160, 133); color: rgb(164, 0, 58); text-shadow: none;
}
hr {
	margin: 3em 0px; padding: 0px; border: currentColor; border-image: none; left: 25%; width: 50%; height: 1px; display: block; position: relative; background-image: -ms-linear-gradient(left, rgb(255, 255, 255), rgb(204, 204, 204), rgb(255, 255, 255));
}
img {
	vertical-align: middle;
}
textarea {
	resize: vertical;
}
html {
	height: 100%;
}
body {
	height: 100%;
}
body {
	color: rgb(85, 85, 85); font-family: 'Source Sans Pro','Helvetica Neue',Helvetica,Arial,sans-serif,"Lucida Grande",Verdana,"Microsoft YaHei"; font-size: 16px; font-weight: 300; -webkit-overflow-scrolling: touch; -webkit-font-smoothing: antialiased;
}

.margin-b-5 {
    margin-bottom: 5px;
}

.padding-b-20 {
    margin-bottom: 20px;
}
.margin-lr-40 {
    margin-left: 40px;
    margin-right: 40px;
}

#home .carousel-caption {left:1%;right:1%;}
#home .carousel-control {width:8%}

#home .btn-danger {background-color:#ff7800; border:#ff7800 solid 1px;}

.modal-header {
	background: rgb(255, 191, 0);
}
.modal-header h4 {
	color: white; letter-spacing: 1px; font-weight: 700;
}
.modal-footer {
	background: rgb(43, 43, 43);
}
.navbar-default {
	border-color: transparent; background-color: rgb(218, 218, 218);
}
.navbar-inverse .navbar-brand {
	font-size: 20px; font-weight: 500;
}
.navbar-toggle {
	border: 0px solid transparent; border-image: none;
}
.navbar-default .navbar-nav > li > a:hover {
	color: white; background-color: rgb(22, 160, 133);
}
.navbar-default .navbar-nav > li > a:focus {
	color: white; background-color: rgb(22, 160, 133);
}
a img {
	background: white;
}
.odd a img {
	background: rgb(245, 245, 245);
}
ul {
	list-style: none;
}
ol {
	list-style: none;
}
h1 {
	color: rgb(51, 51, 51);  font-weight: 200;
}
h2 {
	color: rgb(51, 51, 51); font-weight: 200;
}
h3 {
	color: rgb(51, 51, 51); font-weight: 200;
}
h4 {
	color: rgb(51, 51, 51);  font-weight: 200;
}
h5 {
	color: rgb(51, 51, 51);  font-weight: 200;
}
h6 {
	color: rgb(51, 51, 51);  font-weight: 200;
}
h2 {
	color: rgb(119, 119, 119); font-size: 36px;
}
h3 {
	font-size: 26px;
}
p {
	line-height: 28px; margin-bottom: 20px;
}
p.large {
	font-size: 20px; margin-bottom: 50px;
}
.centered {
	text-align: center;
}
strong {
	font-weight: 700;
}
em {
	font-weight: 300;
}
pre {
	background: rgb(235, 235, 235); padding: 20px; border: currentColor; border-image: none; color: rgb(102, 102, 102); line-height: 28px; font-family: "Monaco"; font-size: 16px;
}
small {
	font-size: 12px;
}
blockquote {
	color: rgb(153, 153, 153); line-height: 28px; font-style: italic; font-weight: 300;
}
blockquote p {
	color: rgb(153, 153, 153); line-height: 28px; font-style: italic; font-weight: 300;
}
blockquote {
	margin: 0px 0px 40px -30px; padding-left: 30px; border-left-color: rgb(52, 152, 219); border-left-width: 5px; border-left-style: solid; position: relative;
}
blockquote cite {
	right: 0px; bottom: -25px; color: rgb(51, 51, 51); font-size: 12px; font-style: italic; font-weight: 300; position: absolute;
}
blockquote cite::before {
	content: "-- ";
}
.overflow-image {
	margin-top: -65px;
}
a.whitea {
	color: white;
}
a {
	transition:color 0.1s ease-in, background 0.1s ease-in; color: rgb(74, 188, 197); -ms-word-wrap: break-word; -webkit-transition: color 0.1s ease-in, background 0.1s ease-in; -moz-transition: color 0.1s ease-in, background 0.1s ease-in; -o-transition: color 0.1s ease-in, background 0.1s ease-in;
}
a:hover {
	outline: 0px; color: rgb(192, 57, 43); text-decoration: none;
}
a:focus {
	outline: 0px; color: rgb(192, 57, 43); text-decoration: none;
}
a::before {
	transition:color 0.1s ease-in, background 0.1s ease-in; -webkit-transition: color 0.1s ease-in, background 0.1s ease-in; -moz-transition: color 0.1s ease-in, background 0.1s ease-in; -o-transition: color 0.1s ease-in, background 0.1s ease-in;
}
a::after {
	transition:color 0.1s ease-in, background 0.1s ease-in; -webkit-transition: color 0.1s ease-in, background 0.1s ease-in; -moz-transition: color 0.1s ease-in, background 0.1s ease-in; -o-transition: color 0.1s ease-in, background 0.1s ease-in;
}

.user{
	background: url("../img/header_bg.jpg") no-repeat center / cover;
}

.biz{
	background: url("../img/header_bg_b.jpg") no-repeat center / cover;
}


#headerwrap {
	width: 100%; text-align: center; padding-top: 120px; padding-bottom: 100px; margin-top: -50px; min-height: 650px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;
}

#headerwrap h2 {
	text-align: center; color: rgb(255, 255, 255); letter-spacing: 3px; font-size: 50px; font-weight: 400;
}
#headerwrap p {
	text-align: center; color: rgb(255, 255, 255); letter-spacing: 1px; font-size: 22px; font-weight: 300;
}
#headerwrap .icon {
	color: rgb(255, 255, 255); letter-spacing: 8px; padding-bottom: 30px; font-size: 100px; font-weight: bold; margin-top: 90px; text-shadow: 0px 20px 7px #3da8ae;
}

#about {
	background: rgb(255, 255, 255); padding: 60px 0px;
}
#about img {
	margin-top: 65px;
}
#services {
	padding: 60px 0px; text-align: center;
}
#services .fa {
	color: rgb(255, 191, 0);
}
#services p {
	text-align: center;
}
#team {
	background: rgb(255, 255, 255); padding: 60px 0px;
}
#team h4 {
	padding-top: 10px;
}
#team p.large {
    margin: 60px 10px 40px 10px;
}
#team .fa {
	margin: 0px 3px; outline: 0px; border-radius: 100%; transition:0.3s; width: 30px; height: 30px; color: rgb(255, 255, 255); line-height: 30px; font-size: 15px; background-color: rgb(196, 196, 196); -webkit-transition: all .3s; -moz-transition: all .3s;
}
#team .fa:hover {
	background-color: rgb(255, 191, 0);
}

#team .sub {color:rgb(255, 191, 0); font-weight:bold;}

#portfolio {
	background: rgb(245, 245, 245); padding: 60px 0px;
}
#portfolio .btn-default {
	border: 0px currentColor; border-image: none;
}
#portfolio .img-title { position:absolute; width:40%; padding:15px 10px; color:#fff; opacity: 0.9;  filter: alpha(opacity=90);}
#portfolio .c1 {background-color:#d4550b;  }
#portfolio .c2 {background-color:#0a98da;  }
#portfolio .c3 {background-color:#fdc819;  }
#portfolio .c4 {background-color:#764dbe;  }
#portfolio .c5 {background-color:#4fb25a;  }
#portfolio .c6 {background-color:#44bdcc;  }


#contact {
	background: rgb(255, 255, 255) url("../img/footer_bg.jpg") no-repeat center / cover; padding: 60px 0px; text-align: center;
	color:#fff;
}

#contact h2 {color:#fff;}

#contact .form {
	padding: 30px 0px;
}
#contact .fa {
	color: rgb(255, 255, 255); margin-bottom: 10px;
}
#contact .text-danger {
	margin: 0px; text-align: left; color: rgb(231, 76, 60);
}
#contact .btn {
	border: 0px currentColor; border-image: none; color: rgb(255, 255, 255); font-size: 18px; font-weight: 500; margin-top: 30px; background-color: rgb(255, 191, 0);
}
#contact .btn:hover {
	outline: 0px; background-color: rgb(233, 175, 3);
}
#contact .btn:focus {
	outline: 0px; background-color: rgb(233, 175, 3);
}
#contact .left-line { border-left:#fff solid 1px;}


#greywrap {
	background: rgb(245, 245, 245); padding: 50px 0px; text-align: center; margin-top: 0px; border-bottom-color: rgb(238, 238, 238); border-bottom-width: 1px; border-bottom-style: solid;
}
#greywrap .btn {
	border-color: rgb(226, 226, 226) rgb(226, 226, 226) currentColor; margin: 0px 25px; color: rgb(136, 136, 136); letter-spacing: 1px;  font-size: 20px; font-weight: 300; border-bottom-width: 0px; border-bottom-style: none; background-color: rgb(255, 255, 255);
}
#greywrap .btn:hover {
	border-color: rgb(165, 205, 213) rgb(165, 205, 213) currentColor; margin: 0px 25px; outline: 0px; color: rgb(165, 205, 213); border-bottom-width: 0px; border-bottom-style: none; background-color: rgb(255, 255, 255);
}
#greywrap .btn:focus {
	border-color: rgb(165, 205, 213) rgb(165, 205, 213) currentColor; margin: 0px 25px; outline: 0px; color: rgb(165, 205, 213); border-bottom-width: 0px; border-bottom-style: none; background-color: rgb(255, 255, 255);
}
#greywrap h2 {
	font-size: 30px;
}
#greywrap .callout {
	margin-bottom: 20px;
}
#greywrap p {
	font-size: 30px;
}
#greywrap .fa {
	font-size: 18px; margin-right: 4px;
}
#footerwrap {
	background: rgb(43, 43, 43); padding: 25px 10px 15px 10px; text-align: center;
}
#footerwrap span.copyright {
	color: rgb(136, 136, 136); line-height: 30px; font-weight: 400;
}
#footerwrap span.copyright a {
	color: rgb(136, 136, 136); border-bottom-color: currentColor; border-bottom-width: 1px; border-bottom-style: dotted;
}
#footerwrap span.copyright a:hover {
	color: rgb(255, 191, 0); text-decoration: none;
}
#footerwrap h4 {
	color: white;
}

#footerwrap .line { border-top:#514f4f solid 1px; padding-top:20px;}

ul.social-buttons {
	margin: 0px;
}
ul.social-buttons li a {
	outline: 0px; color: rgb(153, 153, 153); font-size: 24px;
}
ul.social-buttons li a:hover {
	color: rgb(255, 191, 0);
}
ul.social-buttons li a:focus {
	color: rgb(255, 191, 0);
}
ul.social-buttons li a:active {
	color: rgb(255, 191, 0);
}
.white h1 {
	color: rgb(153, 153, 153);
}
.white p {
	padding-top: 25px;
}
.grid figure {
	margin: 0px; border: 1px solid rgb(238, 238, 238); border-image: none; position: relative;
}
.grid img {
	width: 100%; display: block;
}
.grid figcaption {
	padding: 20px; left: 0px; top: 0px; color: rgb(255, 255, 255); position: absolute; background-color: rgb(255, 191, 0);
}
.grid figcaption h5 {
	margin: 0px; text-align: left; color: rgb(255, 255, 255); letter-spacing: 1px; padding-top: 0px; padding-bottom: 5px; padding-left: 20px; font-weight: 700;
}
.grid figcaption a {
	background: rgb(47, 47, 47); padding: 5px 10px; text-align: left; color: rgb(255, 255, 255); font-size: 13px; margin-left: 20px; display: inline-block;
}
.mask figure {
	overflow: hidden;
}
.mask figure img {
	transition:transform 0.4s; -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s;
}
.no-touch .mask figure:hover img {
	transform: translateY(-30px); -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px);
}
.mask figure.cs-hover img {
	transform: translateY(-30px); -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px);
}
.mask figcaption {
	transition:transform 0.4s, opacity 0.1s 0.3s; top: auto; width: 100%; height: 50px; bottom: 0px; opacity: 0; transform: translateY(100%); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s; -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s; -webkit-transform: translateY(100%); -moz-transform: translateY(100%);
}
.no-touch .mask figure:hover figcaption {
	transition:transform 0.4s, opacity 0.1s; opacity: 1; transform: translateY(0px); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s; -moz-transition: -moz-transform 0.4s, opacity 0.1s; -webkit-transform: translateY(0px); -moz-transform: translateY(0px);
}
.mask figure.cs-hover figcaption {
	transition:transform 0.4s, opacity 0.1s; opacity: 1; transform: translateY(0px); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s; -moz-transition: -moz-transform 0.4s, opacity 0.1s; -webkit-transform: translateY(0px); -moz-transform: translateY(0px);
}
.mask figcaption a {
	top: 10px; right: 30px; bottom: 10px; position: absolute;
}
@media screen and (max-width:1050px), screen and (max-device-width:1050px)
{
body .header {
	background-attachment: scroll;
}
}
@media only screen and (orientation:portrait) and (max-device-width:1024px) and (min-device-width:768px)
{
.header {
	background-attachment: scroll;
}
}
@media screen and (max-width:769px)
{
#headerwrap h2 {
	font-size: 60px;
}
#headerwrap p {
	line-height: 32px; font-size: 30px;
}
}

.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
}