@charset "utf-8";
/* CSS Document */

body,table,div,dl,dt,dd,ul,ol,li,a,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
	text-decoration:none;
	list-style:none;
	font-family: "San Francisco";
	background-position:center;
}

.wpage-full{width: 1260px;margin:0px auto;}

.wpage{
	width:970px;
	margin:0px auto;
	display:table;
	text-align:center;
}

.clearFloat{
	clear: both;
	padding: 0px;
	margin: 0px;
}

#banner{
	background-image:url(../imgs/gallery_banner.jpg);
   display: block;
   width: 100%;
   height: 360px;
   color:#fff;
   background-position:center;
   background-size:cover;
}

.typo{
	text-align:center;
	position:relative;
	top:185px;
}

.typo h1{
	font-size:48px;
	letter-spacing:1px;
	color:#FFFFFF;
}
.typo p{
	font-size:14px;
	width:650px;
	margin:10px auto;
	color:#FFFFFF;
	font-weight: 350;
}

.img-about{
	float:right;
}

.text-about{
	float:left;
	font-size:14px;
	width:555px;
	text-align:left;
	margin-top:10px;	
}

.text-about p{
	margin-bottom:20px;
	color:#4d4959;
}

.trust{
	background-image:url(imgs/Service_decor1.jpg);
	display: block;
	background-position:center;
	width: 100%;
    height: 397px;
	background-size:cover;
	margin-top:100px;
}

#tile h1{
	font-family: 'No_SevenRegular';
	text-align:center;
	color:#fff;;
	font-weight:400;
	letter-spacing: 2px;
	font-size: 48px;
	margin-top:50px;
}

.text .button{
	margin-top:30px;}
.text .button a{
	background:#f4a48f;
	color:#fff;
	padding: 8px 18px 8px 18px;
	font-size:14px;
	letter-spacing:1px;
	height:35px;
	width:110px;
	cursor:pointer;
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
}

.text .button a:hover{
	background:#4d4959;
	color:#fff;
}

#pic1 {
	background-image:url(../imgs/gallery-prj1.jpg);
	float: left;
	height: 340px;
	width: 484px;
	background-repeat: no-repeat;
}

#prj-info {
	height: 400px;
	width: 450px;
	float:left;
}

.text {
	margin-left: 50px;
	margin-top: 40px;
}

.text h3 {
	margin-top:10px;
	font-size: 30px;
	color: #4d4959;
}
.text p {
	font-size: 14px;
	margin-bottom:10px;
	text-align:center;
	color: #4d4959;
	line-height: 25px;
	margin-top:20px;
}

.text span{
	font-size:12px;
	color:#8F8F8F;
	font-weight:normal;
	}
	
.text div{
	font-size:14px;
	color:#8F8F8F;
	font-weight:normal;
}
		
#pic2 {
	background-image:url(../imgs/gallery-prj2.jpg);
	float: right;
	height: 340px;
	width: 484px;
	background-repeat: no-repeat;
}

/*----*/

.galleries{
	background-color:#f1f1f1;
	display: block;
	width: 100%;
    height: 900px;
}


.gal{
    width: 25%;
    float: left;
	height:100%;
}

.gal h3{
	font-size:24px;}

.project{
    cursor: pointer;
    padding: 10px;
}



.project .img-over:hover{
	opacity:1;
}


.project .img-over{
	padding: 98px 0px;
    margin: 0px;
	background:rgba(255,149,150,0.5);
	opacity:0;
	transition:all 1s ease;
    text-align: center;
    color: #fff;
}

.gal-long .project .img-over{
    padding: 260px 0px;
}

.img-over .button{margin-top:20px;}

.img-over .button a{
	border:2px solid #fff;
	color:#fff;
	padding: 8px 18px 8px 18px;
	font-size:14px;
	letter-spacing:1px;
	transition: 0.5s all;
	-webkit-transition: 0.5s all;
	-moz-transition: 0.5s all;
	-o-transition: 0.5s all;
	-ms-transition: 0.5s all;
}

.img-over .button a:hover{
	border:2px solid #4d4959;
	background:#4d4959;
	color:#fff;
}