/*
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
*/
 /* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
ol,ul{list-style:none;margin:0;padding:0;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}
/* start editing from here */
a{text-decoration:none;}
.txt-rt{text-align:right;}/* text align right */
.txt-lt{text-align:left;}/* text align left */
.txt-center{text-align:center;}/* text align center */
.float-rt{float:right;}/* float right */
.float-lt{float:left;}/* float left */
.clear{clear:both;}/* clear float */
.pos-relative{position:relative;}/* Position Relative */
.pos-absolute{position:absolute;}/* Position Absolute */
.vertical-base{	vertical-align:baseline;}/* vertical align baseline */
.vertical-top{	vertical-align:top;}/* vertical align top */
.underline{	padding-bottom:5px;	border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */
nav.vertical ul li{	display:block;}/* vertical menu */
nav.horizontal ul li{	display: inline-block;}/* horizontal menu */
img{max-width:100%;}
/*end reset*/
body{
	font-family: 'Raleway', sans-serif;
	background:#1f253d;
	position:relative;
	 background:url('/newmoban/_external/demo.mobanwang.com/mb/lo201414/201414085/html/web/images/bg.jpg') no-repeat center fixed;
    -webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	 background-size: cover;
	 background-position: center;
}
.wrap{
	width:90%;
	margin:0 auto;
	transition:all .2s linear;
	-moz-transition:all .2s linear;/* firefox */
	-webkit-transition:all .2s linear; /* safari and chrome */
	-o-transition:all .2s linear; /* opera */
	-ms-transition:all .2s linear;
}

/********* Main ************/
.main{
	padding:50px 0;
}
.grid1,.grid2,.grid3,.grid4 {
	float:left;
	margin-left:2%;
	-webkit-box-shadow:0px 3px rgba(1, 1, 1, 0.03);
	   -moz-box-shadow:0px 3px rgba(1, 1, 1, 0.03);
	     -o-box-shadow:0px 3px rgba(1, 1, 1, 0.03);
	        box-shadow:0px 3px rgba(1, 1, 1, 0.03);
}
.grid1{
	width:20%;
	margin-left:0;
	background:#eff9f6;
}
.grid2{
	width:29%;
}
.grid3{
	width:25%;
}
.grid4{
	width:20%;
}
/** Logo **/
.logo{
	padding:80px 20px 20px;
	background:#7CDD4E url('/newmoban/_external/demo.mobanwang.com/mb/lo201414/201414085/html/web/images/quotes.png') no-repeat 170px -32px;
}
.logo hr{
	display: inline-block;
	padding: 0px 25px;
	color: #FFF;
	border: 2px solid #DFF5D4;
}
.logo h1{
	font-size:2.8em;
	font-weight:100;
	color:#FFF;
	text-transform:uppercase;
}
.logo-desc{
	padding:15px;
	background:#eff9f6;
}
.logo-desc h2{
	color:#a7a7a7;
	font-size:14px;
	font-weight:600;
}
.logo-desc p{
	color:#888888;
	font-size:13px;
	text-align:right;
	padding-top:20px;
	line-height:1.5em;
}
/** Project **/
.project{
	background:#FFF;
}
.project img{
	width:100%;
}
.project-details{
	padding:20px 25px 20px 25px;
}
.project-desc{
	float:left;
}
.project-desc h3{
	font-size:0.95em;
	color:#666666;
	text-transform:uppercase;
	line-height:1.6em;
}
.project-desc h3 span{
	font-weight:800;
}
.project-articles{
	float:right;
}
.project-articles li{
	display:inline-block;
	margin-left:5px;
}
.project-articles li:first-child{
	margin-left:0;
}
.project-articles li a{
	width:38px;
	height:38px;
	display:block;
	background:url('/newmoban/_external/demo.mobanwang.com/mb/lo201414/201414085/html/web/images/sprite-img.png') no-repeat;
}
.project-articles li.likes a{
	background-position:-7px 0px;
}
.project-articles li.likes a:hover{
	background-position:-10px -42px;
}
.project-articles li.comments-icon a{
	background-position:-58px -2px;
}
.project-articles li.comments-icon a:hover{
	background-position:-58px -43px;
}
/********** Sign In to your account *********/
.grid4{
	background:#fffffe;
	text-align:center;
}
 .heading{
 	margin-bottom:20px;
 	padding:20px;
 	border-bottom:1px solid #c8e3e0;
 }
.sign_in h3{
	float:left;
	color:#888888;
	font-size:20px;
	text-transform: uppercase;
	font-weight:700;
}
.sign_in input[type="reset"]{
	float:right;
	color:#80c65e;
	font-size:13px;
	text-transform: uppercase;
	font-weight:700;
	background:none;
	border:none;
	outline:none;
	margin: 0;
    padding: 0;
    font-family: 'Raleway', sans-serif;
    cursor:pointer;
}
.sign_in span{
	margin:15px 20px;
    display:block;   
 }
.sign_in input[type="text"],.sign_in input[type="password"]{
	padding:20px;
    color:#afafaf;
    font-size:0.85em;
    background:#FFF;   
    outline:none;
    border:1px solid #c8e3e0;
    margin:0px auto;
    width:83%;  
    -webkit-apperance:none;
    font-family: 'Raleway', sans-serif;
     transition: border-color 0.2s;
	-o-transition: border-color 0.2s;
	-ms-transition: border-color 0.2s;
	-moz-transition: border-color 0.2s;
	-webkit-transition: border-color 0.2s;
	text-transform:uppercase;
}
.sign_in input[type="text"]:hover,.sign_in input[type="text"]:focus,.sign_in input[type="password"]:hover,.sign_in input[type="password"]:focus{
	border-color:#AAE7DF;
}
.sign_in input[type="submit"]{
	padding:15px 0;
	display:block;
	width:100%;
	color:#FFF;
	font-size:15px;
	font-weight:600;
	text-transform:uppercase;
	cursor:pointer;
	border:none;
	outline:none;
    background:#97e272;    
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	-webkit-apperance:none;
	font-family: 'Raleway', sans-serif;
}
.sign_in input[type="submit"]:hover{
        background:#82DD55;
}
.sign_in p{
	margin-top:20px;
	color:#999;
	font-size:13px;
	text-transform:uppercase;
	padding-bottom:20px;
}
.sign_in p a{
	font-size:1em;
	font-weight:600;
	color:#97e272;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.sign_in p a:hover{
	color;#82DD55;
	text-decoration:underline;
}
/** Main Bottom **/
.main-bottom{
	margin-top:30px;
}
.profile-grid{
 float:left;
 width:63%;	
}
.profile{
	background: #e2f5f4;
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI0NiUiIHN0b3AtY29sb3I9IiNlMmY1ZjQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZjRmN2YzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
	background: -moz-linear-gradient(left,  #e2f5f4 46%, #f4f7f3 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(46%,#e2f5f4), color-stop(100%,#f4f7f3));
	background: -webkit-linear-gradient(left,  #e2f5f4 46%,#f4f7f3 100%);
	background: -o-linear-gradient(left,  #e2f5f4 46%,#f4f7f3 100%);
	background: -ms-linear-gradient(left,  #e2f5f4 46%,#f4f7f3 100%);
	background: linear-gradient(to right,  #e2f5f4 46%,#f4f7f3 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2f5f4', endColorstr='#f4f7f3',GradientType=1 );
	-webkit-box-shadow:0px 3px rgba(1, 1, 1, 0.03);
	   -moz-box-shadow:0px 3px rgba(1, 1, 1, 0.03);
	     -o-box-shadow:0px 3px rgba(1, 1, 1, 0.03);
	        box-shadow:0px 3px rgba(1, 1, 1, 0.03);
}
.profile-img img{
	display:block;
	width:100%;
}
.profile-details{
	padding:0 30px 30px 30px;
}
.profile-desc{
	float:left;
	position:relative;
	width:65%;
}
.profile-pic{
	margin-top:-40px;
	 float:left;
}
.profile-pic img{
	display:inline-block;
	padding:8%;
	background:#eaf5f3;		
}
.user-details{
	float:left;
	margin-left:5%;
	margin-top:25px;
}
.user-details h2{
	font-size:1.3em;
	color:#666;
	text-transform:uppercase;
	font-weight:700;
}
.user-details p{
	font-size:12px;
	color:#888888;
	padding:3px 0;
}
.user-details p span{
	font-size:13px;
}
.user-followers{
	float:right;
	margin-top:40px;
}
.user-followers li{
	display:inline-block;
	margin-left:30px;
	font-size:13px;
	color:#888;
	line-height:1.6em;
	text-align:center;
}
.user-followers li span{
	font-weight:600;
	color:#666;
	font-size:1.5em;
	font-family: 'Open Sans', sans-serif;
}
.user-followers li:first-child{
	margin-left:0;
}
.profile-bottom{
	margin-top:40px;
}
/*  GRID OF THREE   ============================================================================= */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}
.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1;
}
.col_1_of_3{
	display: block;
	float:left;
	margin:0% 0 0% 1.6%;
	background: #e1f5f3;
}
.col_1_of_3:first-child { margin-left: 0; }

.span_1_of_3 {
	width:32.2%;
	padding:5.6% 0;
	text-transform:uppercase;
	text-align:center; 
	-webkit-box-shadow:0px 3px rgba(1, 1, 1, 0.03);
	   -moz-box-shadow:0px 3px rgba(1, 1, 1, 0.03);
	     -o-box-shadow:0px 3px rgba(1, 1, 1, 0.03);
	        box-shadow:0px 3px rgba(1, 1, 1, 0.03);
}
.span_1_of_3  h3{
	color:#666;
	font-size:14px;
	font-weight:700;
	font-family:'Open Sans', sans-serif;
}
.span_1_of_3  p  {
	font-size:0.85em;
	color: #888;
	padding:5px 0;
	margin-top:26px;
}

/** Comments Section **/
.comments{
	float:left;
	width:35%;
	margin-left:2%;
	background:#FFF;
	-webkit-box-shadow:0px 3px rgba(1, 1, 1, 0.03);
	   -moz-box-shadow:0px 3px rgba(1, 1, 1, 0.03);
	     -o-box-shadow:0px 3px rgba(1, 1, 1, 0.03);
	        box-shadow:0px 3px rgba(1, 1, 1, 0.03);
}
.comments h2{
	color: #888;
	font-size:18px;
	text-transform: uppercase;
	font-weight: 700;
	padding:20px;
}
.comment-area{
	background:#fcfaf5;
	padding:0 20px 20px 50px;
	border-top:1px solid #c6e2df;
}
.comment-area li {
	display:block;
	padding:15px 0;
	border-bottom:1px solid #c6e2df;
	background:url('/newmoban/_external/demo.mobanwang.com/mb/lo201414/201414085/html/web/images/line.png') repeat-y ;
}
.comment-area li.subchild {
	border-bottom:none;
	padding-bottom:0;
}
.commnet-user{
	float:left;
	width:14%;
	margin-left:-30px;
}
.commnet-user img{
	display:block;
}
.commnet-desc{
	float:left;
	margin-left:3%;
	width:89%;
}
.commnet-desc h3{
	font-size:15px;
	color:#666;
	text-transform:uppercase;
	font-weight:700;
	display:inline-block;	
}
.commnet-desc span.time{
	font-size:12px;
	color:#888;
	padding-left:10px;
}
.commnet-desc p{
	font-size:12px;
	color:#666666;
	line-height:1.6em;
	padding:8px 0;
	font-weight:500;
}
.reply-links li{
	display:inline-block;
	margin-left:10px;
	padding:0;
	border:none;
	background:none;
}
.reply-links li:first-child{
	margin-left:0;
}
.reply-links li a{
	color:#1e73b5;
	font-size:11px;
	font-weight:600;
	text-transform:uppercase;
}
.reply-links li a:hover{
	text-decoration:underline;
}
.subchilds{
	padding-left:10%;
	border-top:1px solid #c6e2df;
	margin-top:20px;
}
.subchilds li{
	background:none;
}
.subchilds .commnet-user{
	margin-left:0;
}
.subchilds .commnet-desc{
	width:83%;
}
.reply{
	display:block;
	padding:20px;
	background:#FCFAF5;
	padding-top:0;
}
.reply a{
   	border:1px solid #c6e2df;
   	padding:14px;
   	font-size:13px;
   	color:#666;
   	text-transform:uppercase;
   	font-weight:700;
   	text-align:center;
   	display:block;
   	background:#FFF;
   	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.reply a:hover{
	background:#C6E2DF;
	color:#619992;
}
/*----copy-right-----*/
.copy-right{
	text-align:center;
	padding:15px 0;
}
.copy-right p{
	color:#FFF;
	font-size:1em;
	font-weight:700;
}
.copy-right p a{
	color:#038191;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	
}
.copy-right p a:hover{
	color:#222;
	text-decoration:underline;
}

/**** Responsice Layout *****/
@media only screen and (max-width: 1366px){
	.wrap{
		width:95%;
	}
	.logo{
		background-position:138px -30px;
	}
	.sign_in input[type="text"], .sign_in input[type="password"]{
		width:80%;
	}
}
@media only screen and (max-width: 1280px) {
	.wrap{
		width:95%;
	}
	.logo h1{
		font-size:2.5em;
	}
}
@media all and (max-width: 1024px) {
	.wrap {
		width:95%;
	}
	.profile-grid,.comments{
		float:none;
		width:100%;
	}
	.comments{
		margin-left:0;
		margin-top:30px;
	}
	.commnet-user{
		width:7%;
	}
	.grid1{
		width:45%;
	}
	.grid2{
		width:53%;
	}
	.grid3{
		margin-left:0;
		width:42%;
		margin-top:20px;
	}
	.grid4{
		width:56%;
		margin-top:20px;
	}
	.project-details{
		padding:5px 25px 7px 25px;
	}
	.logo {
       background-position: 308px -30px;
    }
}
@media all and (max-width:800px) {
	.wrap {
		width:95%;
	}
	.logo {
		background-position: 215px -30px;
	}
	.grid3{
		width:48%;
	}
	.grid4{
		width:50%;
	}
	.project-details{
		padding:15px 25px 27px 25px;
	}
	.logo-desc p{
		padding-top:32px;
	}
}
@media all and (max-width:640px) {
	.wrap{
		width:95%;
	}
	.logo {
		background-position: 145px -30px;
	}
	.profile-details{
		padding:0 15px 20px 15px;
	}
	.user-followers{
		margin-top:25px;
	}
	.profile-pic{
		width:25%;
	}
	.user-details{
		margin-top:15px;
	}
	.user-details{
		margin-left:10%;
	}
	.user-followers li{
		margin-left:10px;
	}
	.span_1_of_3{
		width:100%;
	}
	.col_1_of_3{
		margin-left:0;
		margin-top:20px;
	}
	.profile-bottom{
		margin-top:0;
	}
	.commnet-user{
		margin-left:-20px;
	}
	.main{
		padding:30px 0;
	}
}
@media all and (max-width:480px) {
	.wrap{
		width:95%;
	}
	.grid1,.grid2,.grid3,.grid4{
		width:100%;
		margin-left:0;
		margin-bottom:20px;
	}
	.logo {
		background-position: 315px -30px;
	}
	.profile-desc{
		width:100%;
	}
	.comment-area{
		padding:0 15px 20px 30px;
	}
	.commnet-user{
		width:12%;
	}
 }
@media all and (max-width:320px) {
	.wrap{
		width:95%;
	}
	.logo {
		background-position: 215px -30px;
		padding:50px 20px 10px;
	}
	.profile-pic{
		margin-top:-10px;
	}
	.user-details{
		margin-left:-6px;
	}
	.user-details{
		margin-top:10px;
	}
	.profile-details{
		padding:0 10px 20px 10px;
	}
	.user-details{
		margin-left:5%;
	}
	.user-details h2{
		font-size:1em;
	}
	.profile-pic img{
		padding:5%;
	}
	.profile-pic{
		width:15%;
	}
}