html, body
 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 12px;
	vertical-align: baseline;
	font-family: "΢ÈíÑźÚ";
	}
	
.clear {
	clear: both;
	display: block;
	font-size: 0;
	height: 0;
	line-height: 0;
	width:100%;
	}
	
.clearbig {
	clear: both;
	display: block;
	font-size: 0;
	height: 20px;
	line-height: 0;
	width:100%;
	}
	
	
	
	#menu_wrapper {
	width:100%;
	background-repeat:no-repeat;
	margin-right: 0px;
	margin-left: 0px;
	background-image: url(../../moban/tubiao/banner.jpg);
	background-position: center top;
	height: 478px;
	}
	
	
	
	#slider_wrapper {
	width:100%;
	height:220px;
	background-image:url("../../moban/img/dark_texture.jpg");
	background-repeat:repeat;
	padding-bottom:25px;
	z-index:70;
	}
	
	
	

#breadcrumb_wrapper {
	width:960px;
	margin:0 auto;
	padding-top: 15px;
	}
	
	
	#breadcrumb_wrapper h1 {
	font-size: 16px;
	color: #F7AF37;
	}

#breadcrumb {
	float:left;
	margin-bottom: 15px;
	width: 960px;
	}
	
	
	#breadcrumb_wrapper2 {
	width:100%;
	margin:0 auto;
	padding-top: 15px;
	}
	
	
	#breadcrumb_wrapper2 h1 {
	font-size: 16px;
	color: #F7AF37;
	}


	
	
#breadcrumb ul {
	margin: 0px;
	padding: 0px;
	}

	
#breadcrumb li {
	display: inline;
	font-family:"΢ÈíÑźÚ";
	color:#ffffff;
	font-size:12px;
	padding-right: 5px;
	}
#breadcrumb .te {
	background-color: #FFAF37;
	border-top-color: #FAC976;
	border-right-color: #FAC976;
	border-bottom-color: #FAC976;
	border-left-color: #FAC976;
	font-size: 16px;
	color: #FFFFFF;
}
#breadcrumb .teb {
	color:#FFFFFF;
	text-decoration:none;
	line-height: 25px;
	background-color: #FF9900;
	display: block;
	float: left;
	border: 1px solid #F8AB0D;
	padding-right: 10px;
	padding-left: 10px;
	font-family: "΢ÈíÑźÚ";
	margin-right: 10px;
}


	
#breadcrumb li a {
	color:#000000;
	text-decoration:none;
	line-height: 25px;
	background-color: #E4E4E4;
	display: block;
	float: left;
	border: 1px solid #EBEBEB;
	padding-right: 10px;
	padding-left: 10px;
	font-family: "΢ÈíÑźÚ";
	margin-right: 10px;
	margin-bottom: 5px;
	clear: none;
	}
#breadcrumb .se {
	padding: 0px;
}

#breadcrumb .se:hover {
	padding: 0px;
}
hover {
	padding: 0px;
}
	
#breadcrumb li a:hover {
	color:#FFFFFF;
	text-decoration:none;
	line-height: 25px;
	background-color: #FF9900;
	display: block;
	float: left;
	border: 1px solid #F8AB0D;
	padding-right: 10px;
	padding-left: 10px;
	font-family: "΢ÈíÑźÚ";
	margin-right: 10px;
	}
	

	
::selection {
	background: #FFECC7; 
	color: #333;
	}
	
::-moz-selection {
	background: #FFECC7; 
	color: #333;
	}
	
img { -ms-interpolation-mode: bicubic; }
	
ul {
	margin:0;
	padding:0;
	}
	
ul li {
	margin:0;
	padding:0;
	list-style:inside none;
	color:#6a6a6a;
	font-size: 12px;
	font-family: 'MuliRegular',sans-serif;
	line-height: 1.4em;
	}
	
ul li a, ol li a {
	color:#ED8D23;
	text-decoration:none;
	font-family:'MuliRegular', sans-serif;
	}
	
ul li a:hover, ol li a:hover {
	color:#ed8d23;
	text-decoration:underline;
	}
	
ol {
	margin:0;
	padding:0;
	color:#6a6a6a;
	}
	
ol li {
	margin:0;
	padding:0;
	list-style:inside decimal;
	font-size: 12px;
	font-family: 'MuliRegular',sans-serif;
	line-height: 1.4em;
	}
	
#header, #logo_menu_wrapper, #social_bar, #wrapper, #footer, #bottom_footer {
	width:960px;
	margin:0 auto;
	}
	
#filter a::after {
	content: " /";
	}

.image-grid.grid li {
	height:280px;
	background-image:url("../../moban/img/feat_img_shadow.png");
	background-repeat:no-repeat;
	background-position:5px 196px;
	text-align:center;
	}
	
.image-grid.grid li a:hover {
	text-decoration:none;
	}
	
.image-grid.grid h5 {
	margin-top: 15px;
	}

.image-grid:after {
	content:"";
	display:block;
	height:0;
	overflow:hidden;
	clear:both;
	}

.image-grid {
	width:980px;
	float:left;
	list-style:none;
	padding-top:30px;
	}

.grid li {
	float:left;
	width:305px;
	overflow:hidden;
	padding-right:20px;
	}



.view {
	width: 305px;
	height: 227px;
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
	cursor: default;
	font-family: "΢ÈíÑźÚ";
	}

.view h5 {
	display: block;
	background-color: #333333 !important;
	color: #fff;
	padding: 10px 0 10px 0;
	margin-bottom: 20px;
	font-family: "΢ÈíÑźÚ";
	font-size: 16px;
	}

.view .mask,.view .content {
   width: 305px;
   height: 227px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
	}

.view img {
   display: block;
   position: relative;
	}

.view h2 {
	text-transform: none;
	color: #fff;
	text-align: center;
	position: relative;
	font-size: 18px;
	padding: 10px;
	background: rgba(0, 0, 0, 0.8);
	margin: 20px 0 0 0;
	}
	
.view p {
	font-style: normal;
	font-size: 16px;
	position: relative;
	color: #FFFFFF;
	padding: 10px 20px 20px;
	text-align: center;
	font-family: "΢ÈíÑźÚ";
	}
	
.view a.info {
	display: inline-block;
	text-decoration: none;
	padding: 7px 14px;
	background: #333333;
	color: #fff;
	text-transform: uppercase;
	position:absolute;
	left: 30%;
	top: 75%;
	border: 1px solid #3C3C3C;
	font-size: 14px;
	font-family: "΢ÈíÑźÚ";
	}
	
.view a.info:hover {
	-webkit-box-shadow: 0 0 5px #bc730f;
	-moz-box-shadow: 0 0 5px #bc730f;
	box-shadow: 0 0 5px #bc730f;
	background-color: #ED8D23 !important;
	color: #FFFFFF;
	border:1px solid #bc730f;
	font-size: 14px;
	}

.view-first img {
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
	}
	
.view-first .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   background-color: rgba(219,127,8, 0.9);
   -webkit-transition: all 0.4s ease-in-out;
   -moz-transition: all 0.4s ease-in-out;
   -o-transition: all 0.4s ease-in-out;
   -ms-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
	}

.view-first h2 {
   -webkit-transform: translateY(-100px);
   -moz-transform: translateY(-100px);
   -o-transform: translateY(-100px);
   -ms-transform: translateY(-100px);
   transform: translateY(-100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
	}

.view-first p {
   -webkit-transform: translateY(100px);
   -moz-transform: translateY(100px);
   -o-transform: translateY(100px);
   -ms-transform: translateY(100px);
   transform: translateY(100px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   -ms-transition: all 0.2s linear;
   transition: all 0.2s linear;
	}

.view-first:hover img {
   -webkit-transform: scale(1.3,1.3);
   -moz-transform: scale(1.3,1.3);
   -o-transform: scale(1.3,1.3);
   -ms-transform: scale(1.3,1.3);
   transform: scale(1.3,1.3);
	}

.view-first a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
	}

.view-first:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
	}

.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
	}

.view-first:hover p {
   -webkit-transition-delay: 0.1s;
   -moz-transition-delay: 0.1s;
   -o-transition-delay: 0.1s;
   -ms-transition-delay: 0.1s;
   transition-delay: 0.1s;
	}

.view-first:hover a.info {
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
	}

.view-first a.info:hover {
   -webkit-box-shadow: 0 0 5px #bc730f;
   -moz-box-shadow: 0 0 5px #bc730f;
   box-shadow: 0 0 5px #bc730f;
	}

.tiny a {
	font-size: 14px;
	color: ##ED8D23;
	letter-spacing: -0.04em;
	line-height: 37px;
	font-family: "΢ÈíÑźÚ";
	}

.tiny a:hover {
	text-decoration: underline !important;
	}

.gallery_image {
	float:left;
	margin-right:22px;
	}
	
.gallery_image_last {
	float:left;
	}





@media only screen and (max-width: 768px) {
	
	.embed-container {
		position: relative;
		padding-bottom: 52.25%; /* 16/9 ratio */
		padding-top: 30px; 
		height: 0;
		overflow: hidden;
		}

	.embed-container iframe,
	.embed-container object,
	.embed-container embed {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		}
	
	img {
		max-width:100%;
		height:auto;
		}
	
	img {
		-ms-interpolation-mode:bicubic;
		}
		
	#slider, #header, #logo_menu_wrapper, #social_bar, #wrapper, #footer, #bottom_footer, #slider_caption_wrapper, .image-grid, #breadcrumb_wrapper, #slider_caption, .blog_excerpt {
		width:95%;
		}
		
	#slider_caption p {
		width:55%;
		line-height:1.2em;
		}
		
	#slider_caption_wrapper {
		background-image:url("../../moban/img/feat_img_shadow.png");
		background-repeat:no-repeat;
		background-position:440px 55px;
		width:100%;
		}
		
	.sf-menu li:hover ul, .sf-menu li.sfHover ul {
		top:6.2em;
		}
		
	#top_menu {
		width:75%;
		}
		
	#top_menu a {
		font-size:12px;
		}
		
	#top_menu ul li a span, #top_menu li ul li a {
		font-size:10px;
		}
		
	.flex-caption {
		width:62%;
		}
		
	p {
		font-size:12px;
		}
		
	.featured_image_portfolio {
		background-image:url("../../moban/img/feat_img_shadow3.png");
		background-position:72px 160px;
		background-repeat:no-repeat;
		height:184px;
		}
		
	.featured_content_portfolio {
		width:auto;
		}
		
	#portfolio-bg {
		width:785px;
		}
		
	.image-grid.grid li {
		background-image:url("../../moban/img/feat_img_shadow3.png");
		background-position:57px 140px;
		background-repeat:no-repeat;
		height:auto;
		}
		
	.grid li {
		padding-right:44px;
		width:204px;
		}
		
	.view {
		width:204px;
		height:auto;
		}
		
	.view .mask, .view .content {
		width:204px;
		}
		
	.image-grid.grid h5 {
		margin-top:15px;
		}
		
	.view h5 {
		margin-bottom:10px;
		padding:10px 0;
		}
		
	.view p {
		padding:0 20px;
		}
		
	.view a.info {
		left:20%;
		top:43%;
		}
		
	#contact_form textarea {
		width:428px;
		}
		
	.full_width {
		padding:0;
		}
		
	.gallery_image {
		float:left;
		margin-right:35px;
		width:30%;
		}
	
	.gallery_image_last {
		float:left;
		width:30%;
		}
		
	.left_content_wrapper, .right_wrapper {
		width:68%;
		}
		
	.other_post_details_wrapper {
		width:79%;
		}
		
	.right_content_wrapper, .left_wrapper {
		width:25%;
		}
		
	#portfolio_wrapper, #client_wrapper, #recent_post_wrapper {
		width:98%;
		}
		
	.flex-direction-nav {
		display:none;
		}
	
	h5, h5 a {
		font-size: 15px;
		}
	
	h6 {
		font-size: 14px;
		}
	
	#breadcrumb_wrapper h1 {
    	font-size: 16px;
		}
	
	.post_details_date_wrapper {
		width:15%;
		}
		
	
	}


@media only screen and (max-width: 480px) {

	div#toggleMe{
		display: none;
		}
	
	a.tog{
		display: none;
		}
		
	#top_menu ul {
		display:none;
		}
		
	#top_menu select {
		visibility:visible;
		width:100%;
		float:none;
		background-color: #fff;
		padding: 5px;
		font-size: 13px;
		border: 1px solid #ccc;
		height: 34px;
		margin:0 auto 20px;
		}
		
	.full_width2 {
		padding:0 12px 0 0;
		}
		
	
		
	.left_content_wrapper, .right_content_wrapper {
		width:100%;
		margin-top: 20px;
		}
		
	#contact_form textarea {
		width:386px;
		}
		
	#contact_form li {
		margin-bottom:5px;
		margin-top:10px;
		}
		
	#contact_form input.submit {
		margin-top:0;
		}
		
	.right_content_wrapper {
		margin-top:0;
		}
		
	#footer_widget, #footer_tweet, .footer_right {
		float:none;
		width:100%;
		}
		
	#footer_wrapper h5, .footer_right ul, .footer_right ol {
		text-align:left;
		float:none;
		}
		
	#footer_tweet ul.tweet_list li {
		padding-left:0;
		}
	
	#header {
		margin-top:-10px;
		}
		
	#contact_form input, textarea {
		width:286px;
		}
		
	#portfolio-bg {
		width:auto;
		}
		
	.image-grid.grid li {
		width:106%;
		}
		
	.grid li {
		padding-right:0;
		}
		
	.view, .view .mask, .view .content {
		width:100%;
		height:100%;
		}
		
	.image-grid.grid h5 {
		margin-bottom:20px;
		margin-top:40px;
		}
		
	.view a.info {
		left:34%;
		top:70%;
		}
		
	.view p {
		padding:20px 20px;
		}
		
	.view img {
		width:100%;
		}
		
	.image-grid.grid li {
		margin-bottom:20px;
		background-position:288px 312px;
		}
		
	.gallery_image {
		margin-right:20px;
		}
		
	.portfolio_right_content_wrapper {
		width:24%;
		}
		
	.portfolio_left_content_wrapper {
		width:70%;
		}
		
	#commentform textarea {
		width:400px;
		}
		
	.left_content_wrapper, .right_wrapper, .right_content_wrapper, .left_wrapper {
		width:100%;
		}
		
	#slider_caption_wrapper {
		display:none;
		}
		
	.one_half, .one_half_first, .two_third, .two_third_first, .one_fourth, .one_fourth_first, .three_fourth, .three_fourth_first, .one_fifth, .one_fifth_first, .two_fifth, .two_fifth_first, .three_fifth, .three_fifth_first, .four_fifth, .four_fifth_first, .one_sixth, .one_sixth_first {
		width:98%;
		clear:both;
		float:none;
		margin-left:0;
		}
		
	.featured_image_portfolio {
		background-image:url("../../moban/img/feat_img_shadow3.png");
		background-position:-14px 95px;
		background-repeat:no-repeat;
		height:118px;
		}
		
	#slider_wrapper2 {
		padding-bottom:0px !important;
		}
		
	#footer_tweet {
		padding:0;
		}
		
	ul.tweet_list li {
		margin-top:0;
		}
		
	#footer_wrapper h5 {
		padding:15px 0 10px;
		}
		
	.comment_wrapper_main {
		width:100%;
		}
		
	.right_wrapper {
		margin-top: 20px;
		}
		
	h6 {
		font-size: 12px;
		}
	
	h2, h2 a {
		font-size: 17px;
		padding: 10px 0 5px
		}
		
	.post_details_date_wrapper {
		width:17%;
		margin-top:17px;
		}
		
	.other_post_details_wrapper {
		width:77%;
		}
		
	#top_logo {
		text-align:center;
		width:100%;
		}
		
	#top_menu {
		width:100%;
		float:none;
		}

	}
	

@media only screen and (max-width: 320px) {

	.featured_image_portfolio {
		background-image:url("../../moban/img/feat_img_shadow3.png");
		background-position:-55px 55px;
		background-repeat:no-repeat;
		height:85px;
		}
		
	.full_width2 {
		padding:0 8px 0 0;
		}
		
	.gallery_image, .gallery_image_last {
		width:28%;
		}
		
	.portfolio_left_content_wrapper {
		padding-bottom:20px;
		margin-top:20px;
		width: 100%;
		}
		
	.left_content_wrapper {
		margin-top:20px;
		}
		
	.portfolio_right_content_wrapper {
		width:100%;
		float:none;
		}
		
	.portfolio_details_info, .portfolio_details_skills, .portfolio_details_client {
		line-height:1.2em;
		margin-bottom:0;
		}
		
	.accordionButton {
		width:93%;
		}
		
	#commentform input[type="text"], #commentform textarea, #contact_form input, textarea, #contact_form textarea, #contact_form {
		width:275px;
		}
		
	#contact_form {
		padding:25px 0 0;
		}
		
	.commentlist, #commentform label {
		width:100%;
		} 
		
	h2, h2 a {
		font-size: 17px;
		padding: 10px 0 5px
		}
		
	h6 {
		font-size: 12px;
		}
		
	.post_details_date_wrapper {
		width:100%;
		margin:17px 0 0 0;
		padding:0;
		text-align:left;
		}
		
	.other_post_details_wrapper {
		width:100%;
		margin:0;
		}
		
	.post_date {
		font-size: 10px;
		display:block;
		margin-bottom: 10px;
		margin-top: 5px;
		float:left;
		margin-right:10px;
		}
	
	.post_comments {
		font-size: 10px;
		display:block;
		margin-bottom: 10px;
		margin-top: 5px;
		float:left;
		margin-right:10px;
		}
	
	.post_tags {
		font-size: 10px;
		display:block;
		margin-bottom: 10px;
		margin-top: 5px;
		}
	
	.post_author {
		font-size: 10px;
		display:block;
		margin-bottom: 10px;
		margin-top: 5px;
		}
	
	.post_cats {
		font-size: 10px;
		display:block;
		margin-bottom: 10px;
		margin-top: 5px;
		}

	}
	


#social_bar_wrapper, #bottom_footer_wrapper {
	background-image:url("../../moban/img/topbar_bg.jpg");
	background-repeat:repeat;
	height:47px;
	width:100%;
	}




	
	
#footer_wrapper {
	width:100%;
	background-image:url("../../moban/img/dark_texture.jpg");
	background-repeat:repeat;
	margin-top: 0px
	}
	
#footer_wrapper h5 {
	font-size: 14px;
	font-family: "΢ÈíÑźÚ";
	color: #ffffff;
	text-transform:uppercase;
	padding: 24px 0 10px 0;
	text-align:right;
	clear: both;
	}
	
#footer_widget {
	width:35%;
	float:left;
	padding:5% 2% 5% 0;
	}
	
#footer_widget img {
	margin-bottom:20px;
	}
	
#footer_widget p {
	color:#ababab;
	font-size:10px;
	font-family:"΢ÈíÑźÚ";
	font-weight:normal;
	}
	
.footer_right {
	padding: 3% 2% 5% 0;
    width: 25%;
	float:right;
	}
	
.footer_right p {
	margin-top: 23px;
	padding-left: 30px;
	color:#ababab;
	text-align: right;
	}
	
.footer_right ul {
	margin:0;
	padding:0;
	color:#ababab;
	text-align: right;
	float: right;
	}
	
.footer_right ul li {
	margin:0;
	padding:0;
	list-style:inside none;
	color:#ABABAB;
	line-height: 1.4em;
	}
	
.footer_right ul li a, ol li a {
	color:#ED8D23;
	text-decoration:none;
	}
	
.footer_right ul li a:hover, ol li a:hover {
	color:#ed8d23;
	text-decoration:underline;
	}
	
.footer_right ol {
	margin:0;
	padding:0;
	color:#ababab;
	text-align: right;
	float: right;
	}
	
.footer_right ol li {
	margin:0;
	padding:0;
	list-style:inside decimal;
	line-height: 1.4em;
	}
	
#footer_tweet {
	float: left;
    padding: 3% 2% 5% 0;
    width: 33%;
	}
	





	
#bottom_footer {
	padding-top:10px;
	}
	
#bottom_footer img {
	float:left;
	}
	
#bottom_footer p {
	color:#646464;
	float:left;
	padding-top:7px;
	padding-left:10px;
	}
	
#bottom_footer a {
	color:#646464;
	text-decoration:underline;
	}

#bottom_footer a:hover {
	color:#a1a0a0;
	text-decoration:underline;
	}