@import url(stylesheet.css);

*//*common */
body { padding:0px; margin:0px; color:#000; font-size:12px;}
a:focus{outline:none;}

/*home page*/
.border{background:url(../images/background.png) repeat left top; display:inline-block; padding:8px 8px 4px 8px; margin-top:130px; width:100%;}
.main{background:#fff; display:inline-block; width:100%;}

.header {position:relative; width:100%; float:left;  height:190px;}
.header .brand {left:50%; margin-left:-130px; position:absolute; top:-60px; z-index:1;}
.header .logo {}
.header .logo  a img{margin-right:30px;}

.header .rightSide{width:300px; right:19px; position:absolute; top:25px;}
.header .rightSide .social_icon{ width:100px; padding-left:9px;float:left; margin-left:100px;}
.header .rightSide .social_icon ul{ list-style:none; padding:0px; margin:0px;}
.header .rightSide .social_icon ul li {padding-left:14px; float:left; line-height:14px; margin-bottom:7px;}
.header .rightSide .social_icon ul li a img{width:25px; height:25px; line-height:25px;}
.header .rightSide .social_icon ul li a img:hover{opacity:.8;}
.header .rightSide .sayCiao{width:83px; padding-left:2px; float:left; }
.header .rightSide .sayCiao a{font-size:32px; text-align:center; color:#2c9a42; line-height:26px; font-family:'Tahoma-Regular'; font-style: italic; }
.header .rightSide .sayCiao a:hover{text-decoration:none; color:#dabc71;}
.header .rightSide .blog-text a:hover{text-decoration:none; color:#dabc71;}
.header .rightSide .blog-text{width: auto;}
.header .rightSide .blog-text a{font-size:26px; text-align:center; color:#12B258; line-height:26px; font-family:'Tahoma-Regular'; font-style: italic; float: right; padding-right: 8px; padding-top: 15px;}
.header .searchBox{float:left; width:100%; padding-right:9px; position:relative;}
.header .searchBox input.submit{ border:1px solid #40cc75; height:20px;  margin-top:5px;}
.header .searchBox button{position:absolute; right:14px; top:6px; background:none; border:none; text-transform:uppercase; font-size:12px; color:#2c9a42; font-family:'Tahoma-Regular';}
.header .rightSide label{font-size:13px; float:left; width:36%; text-align:right;  padding-top:3px; line-height:22px; font-family: 'Futura'; font-style:italic; color:#999;  font-weight: normal;}
.mailingGroup{float:left; width:100%;}
.header .searchBox input{font-size:12px; width:60%; float:right; padding:2px 10px;  font-family: 'Futura'; font-style:italic; color:#999;  font-weight: normal;}


.imgContent {float:left; position:relative; width:100%;}
.imgContent .menu_bg{background:url(../images/main_menu_bg.png) repeat left top; width:100%; float:left; top:40px; position:absolute; height:100px; z-index:99; padding:6px 0px;}
.imgContent .imginner{ padding:0px 28px;}
.imgContent .borderBox{height:88px; }
.imgContent .greenBor {border-top:6px solid #40cc75; border-bottom:6px solid #40cc75; padding-bottom:4px; display:inline-block;  float:left; width:100%;}
.imgContent .coll_1{float:left; position:relative;}
.imgContent .coll_2{float:left; position:relative;}
.imgContent .coll_3{float:left; position:relative;}
.coll_1 img, .coll_2 img, .coll_3 img{width:100%;}
.imgContent .coll_1 a{float:left; width:100%;}
.imgContent .coll_1 a:hover p{color:#000;}
.imgContent .coll_2 a{float:left; width:100%;}
.imgContent .coll_2 a:hover p{color:#000;}
.imgContent .coll_3 a{float:left; width:100%;}
.imgContent .coll_3 a:hover p{color:#000;}
.imgContent .coll_1:hover a img{opacity:.8;  -webkit-transition: width 2s; transition: width 2s;}
.imgContent .coll_2:hover a img{opacity:.8;  -webkit-transition: width 2s; transition: width 2s;}
.imgContent .coll_3:hover a img{opacity:.8;  -webkit-transition: width 2s; transition: width 2s;}

.menu{width:100%; padding:6px 0px; float:left; position:absolute; top:7px; left:0px; z-index:999;}
.menu p{color:#dabc71; font-size:36px; font-family: 'arsenalregular';  font-weight: normal;
    font-style: normal; line-height:140px;   float:left; text-align:center; width:100%; margin:0px; text-transform:uppercase;}


/*inner page*/
.mainMenu{ float:left; width:100%; border-bottom:3px solid #dabc71;  border-top:3px solid #dabc71; margin-top:17px;}
.content{/*height:297px; overflow-y:scroll;*/ float:left; padding:0px 17px; width:100%; min-height:400px;}
.content.inner{/*height:337px; overflow-y:scroll;*/ float:left; padding:0px 30px;  min-height:400px;}
.content h3{color:#dabc71; font-size:18px; line-height:24px; margin-top:4px; margin-bottom:18px;}
ol li{ list-style-position: inside;}





/*about us*/
.myStory{padding-bottom:8px;}
.myStory_txt{margin-top:10px;}
.story{width:80%;}

.afiLogo ul{padding:0px; margin:0px; list-style:none;}
.afiLogo ul li{float:left; margin:0px;}
.afiLogo ul li img{width:50%;}
.afiLogo {width:50%; margin:0px auto; padding-top:0px;}
.afiLogo .roomHints{padding-top:45px;}
.afiLogo .col-md-7{padding:0px;}
.logoBox{width:160px; height:160px; float:left;}
.logoBox img{width:100%;}

.room-hints{width:100%;}
.roomBox{padding-bottom:100px; position:relative;}
.room-hints{position:absolute; /*bottom:-20px;*/}
.room-hints img{width:20%;}


.CLexp{padding-top:26px;}

/*contact us*/
.contpage{width:100%; float:left; display:inline-block;}
.contColl1{float:left; }
.contColl2{float:left; }
.contColl3{float:left; }

.contColl1 .Contact img{width:100%; height:30%;}
.contColl3 .rowGroup{width:100%; float:left;}
.contColl3 .contGroup{float:left; width:47%;margin-right:3%;  margin-bottom:5px;}
.contColl3 .contGroup label{text-transform:uppercase; color:#666;}
.contColl3 .contGroup input{width:100%; background:#f8f8f8; border:1px solid #e3e3e3;}
.contColl3 .GroupAll textarea{width:97%; background:#f8f8f8; border:1px solid #e3e3e3;}
.contColl3 .GroupAll{width:100%; float:left;}
.contColl3 .GroupAll input{width:97%; float:left; background:#f8f8f8; border:1px solid #e3e3e3; margin-top:10px;}

.contGroup.last{}
.contColl3 p{margin-right:3%; margin-top:10px;}
.rowGroup .wpcf7-submit{ background: url("../images/submit.png"); border: medium none; float: right; height: 27px; margin: 0 0 0 10px; text-indent: -5000px; width: 88px; }
.letter-box{float:left; width:100%; margin-top:50px;}


/*project*/
.colorStories{width:80%; margin:0px auto;}
.colorStories img{margin-bottom:10px; border:1px solid #000; width:100%;}
.diyStories img{width:100%; margin-bottom:5px; border:1px solid #000;}


/*commercial*/
.commercial{width:100%; float:left; display:inline-block;}
.commercial .CallImg ul{list-style:none; padding:0px; margin:0px;}
.commercial .CallImg ul li{display:inline; margin:1px;}
.commercial .CallImg img{border:1px solid #000;}


/*residental*/
.residental{width:100%; float:left; display:inline-block;}
.residental img{border:1px solid #000;}
.residental .resi_1{width:298px; float:left;}
.residental .resi_2{width:287px; float:left;}

.residental .resi_1 .row2 p{width:100%; text-align:center;}
.residental .resi_1 .row1{float:left; width:100%;}
.residental .resi_1 .row2{float:left; width:100%;}

.residental .resi_2 .row2 p{width:100%; text-align:center;}
.residental .resi_2 .row1{float:left; width:100%;}
.residental .resi_2 .row2{float:left; width:100%;}

.residental ul{list-style:none; padding:0px; margin:0px;}
.residental ul li{display:inline;}



/*all page*/

.footer{width:100%; float:left; margin:20px 0 10px; }

.footer .Ftext{font-size:21px; color:#000; padding-bottom:30px; font-family: 'Futura'; font-weight:normal;}
.footer h3{font-size:18px; color:#3ab769; margin-top:0px;}
.footer h3 a{font-size:18px; color:#3ab769; margin-top:0px;}
.outer{float:left; text-align:center; width:100%; padding:10px 0px 20px 0px;}
.outer a{text-decoration:none; color: #000; font-size:12px; padding:0px 3px; }
.main .footer a:hover, a:focus h3{ color: #DABC71;}
.main .footer a:hover h3{ color: #DABC71;}
section #huge_it_gallery{background:#fff !important; box-shadow:none !important;}
div.wpcf7-validation-errors {
    border: 2px solid #F7E700;
    display: inline-block;
}
.page-image > img { width: 100%; }
.letter-box .searchBox{float:left; width:100%; padding-right:9px; margin-top:-2px;  position:relative;}
.letter-box .searchBox input.submit{width:100%; border:2px solid #40cc75; border-bottom:3px solid #40cc75; height:20px; padding-right:45px;}
.letter-box .searchBox button{position:absolute; right:6px; top:0px; background:none; border:none; text-transform:uppercase; font-size:12px; color:#2c9a42; font-family:'Tahoma-Regular';}
.wplightbox > img { max-height:145px; width:80%; }
#html5-loading {border:5px solid #000 !important; padding:0px !important; }


.gallery {
	margin-bottom: 20px;
	margin-left: -4px;
	margin-top:30px;
}
	
.gallery-item {
	float: left;
	margin: 0 57px 35px 0;
	overflow: hidden;
	position: relative;
	
}
.gallery-item img{border: 1px solid black;}
.gallery-columns-1.gallery-size-medium,
.gallery-columns-1.gallery-size-thumbnail,
.gallery-columns-2.gallery-size-thumbnail,
.gallery-columns-3.gallery-size-thumbnail {
	display: table;
	margin: 30px auto 20px;
}

.gallery-columns-1 .gallery-item,
.gallery-columns-2 .gallery-item,
.gallery-columns-3 .gallery-item {
	text-align: center;
}

.gallery-columns-4 .gallery-item {
	max-width: 23%;
	max-width: -webkit-calc(25% - 4px);
	max-width:         calc(25% - 4px);
}

.gallery-columns-5 .gallery-item {
	max-width: 19%;
	max-width: -webkit-calc(20% - 4px);
	max-width:         calc(20% - 4px);
}

.gallery-columns-6 .gallery-item {
	max-width: 15%;
	max-width: -webkit-calc(16.7% - 4px);
	max-width:         calc(16.7% - 4px);
}

.gallery-columns-7 .gallery-item {
	max-width: 13%;
	max-width: -webkit-calc(14.28% - 4px);
	max-width:         calc(14.28% - 4px);
}

.gallery-columns-8 .gallery-item {
	max-width: 11%;
	max-width: -webkit-calc(12.5% - 4px);
	max-width:         calc(12.5% - 4px);
}

.gallery-columns-9 .gallery-item {
	max-width: 9%;
	max-width: -webkit-calc(11.1% - 4px);
	max-width:         calc(11.1% - 4px);
}

#colorbox { border:2px solid #666666; }

.gallery-columns-1 .gallery-item:nth-of-type(1n),
.gallery-columns-2 .gallery-item:nth-of-type(2n),
.gallery-columns-3 .gallery-item:nth-of-type(3n),
.gallery-columns-4 .gallery-item:nth-of-type(4n),
.gallery-columns-5 .gallery-item:nth-of-type(5n),
.gallery-columns-6 .gallery-item:nth-of-type(6n),
.gallery-columns-7 .gallery-item:nth-of-type(7n),
.gallery-columns-8 .gallery-item:nth-of-type(8n),
.gallery-columns-9 .gallery-item:nth-of-type(9n) {
	margin-right: 0;
}

.gallery-columns-1.gallery-size-medium figure.gallery-item:nth-of-type(1n+1),
.gallery-columns-1.gallery-size-thumbnail figure.gallery-item:nth-of-type(1n+1),
.gallery-columns-2.gallery-size-thumbnail figure.gallery-item:nth-of-type(2n+1),
.gallery-columns-3.gallery-size-thumbnail figure.gallery-item:nth-of-type(3n+1) {
	clear: left;
}

.gallery-caption {
	background-color: rgba(0, 0, 0, 0.7);
	box-sizing: border-box;
	color: #fff;
	font-size: 14px;
	line-height: 1.3;
	margin: 0;
	max-height: 50%;
	opacity: 0;
	padding: 2px 8px;
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: left;
	-webkit-transition: opacity 400ms ease;
	transition:         opacity 400ms ease;
	width: 100%;
}

.gallery-caption:before {
	box-shadow: 0 -10px 15px #000 inset;
	content: "";
	height: 100%;
	min-height: 49px;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}

.gallery-item:hover .gallery-caption { opacity: 1; }

.gallery-columns-7 .gallery-caption,
.gallery-columns-8 .gallery-caption,
.gallery-columns-9 .gallery-caption {
	display: none;
}
.gallery-size-medium{width:69%; margin:0px auto !important; overflow:hidden !important; height:315px; display:block !important;}
.gallery-size-image-thumb{width:69%; margin:0px auto !important;  display:block !important;}
.gallery-size-image-thumb .gallery-item{width:32%; 	float: left; margin: 0 0px 35px 0; overflow: hidden; position: relative;}
.attachment-medium {
    height: 132px;
}

.content a{ color: #12B258; }

.content a:hover { color: #DABC71; text-decoration: none; }

.gallery-columns-2 .gallery-item{ width:45%; }


.group1.cboxElement{
    position: relative;
    display: inline-block;
}

.group1.cboxElement:hover .watermark {
    display: block;
}

div.watermark {
	background:rgba(256, 256, 256, .8);
    position: absolute;
    bottom: 0;
    right: 0;
	width:100%;
	height:100%;
    padding-top:50px;
	color:#DABC71;	
	display:none;
	font-weight:bold;
	text-decoration:underline;
}

.group1.cboxElement:hover div.watermark{display:block;}



/*responsive*/

@media(max-width:1200px){.gallery-size-medium{width:85%; margin:0px auto !important; }}
@media(max-width:1200px){.gallery-size-image-thumb{width:85%; margin:0px auto !important; }}
@media(max-width:992px){
	.gallery-size-medium{width:100%; margin:0px auto !important; }
	.gallery-size-medium .gallery-item { margin: 0 19px 35px 0;  }
	.gallery-size-image-thumb .gallery-item{width:47%; }
}


@media (min-width:769px) and (max-width:1024px){
  .wplightbox > img{width:100%; height:120px;}
}
@media (max-width:768px){
	.wplightbox > img{width:100%; min-height:130px;}	
}

@media(max-width:767px){
	
	.container {width:100%;}
	.coll_1, .coll_2, .coll_3{width:100% !important; float:left; margin-bottom:10px;}
	.coll_1 img, .coll_2 img, .coll_3 img{width:100%;}
	.imgContent .menu_bg{display:none;}
	.menu{  left:0px; z-index:999;}
	.menu p{font-size:24px; line-height:72px; background:rgba(255, 255, 255, .85); width:100%; padding:6px 0px; float:left;}
	.nav li{border-top:1px solid #ccc;}
	
	.header{height:auto; }
	.header .logo {float:left;  width:100%;}
	.header .rightSide{margin-top:120px; }
	.header .rightSide .social_icon{ width:180px; margin:0px auto; float:none !important; padding:0px !important;}
	.header .rightSide .sayCiao{width:100%;}
	.header .rightSide{position:static; display:inline-block; width:100%; text-align:center;}
	.header .searchBox{padding-right:0px;}
	.contpage .contColl1{width:46%; float:left;}
	.contpage .contColl2{width:46%; float:left; margin:0px;}
	.commercial .CallImg img{margin:10px;}
	
	
	.residental .resi_1{width:100%; text-align:center;}
	.residental .resi_1{width:100%; float:left; text-align:center;}
	.residental .resi_2{width:100%; text-align:center;}
	.residental .resi_2{width:100%; float:left; text-align:center;}
	.coll_1 img, .coll_2 img, .coll_3 img{width:100%;}
	.header .logo a img{width:70%; height:70%; margin:0px;}
	.header .searchBox input{width:210px; float:left; margin-left:10px;}
	.afiLogo {width:100%; margin:0px auto;}
	.wplightbox > img{width:80%; height:auto;}
	.header .rightSide .blog-text{width: auto;}
    .header .rightSide .blog-text a{width: 100%;padding-left: 6%;}
	
	.gallery-size-medium{width:100%; height: 329px; margin:0px auto !important;  display: block !important; }
	.gallery-size-image-thumb{width:100%; margin:0px auto !important; }
	.attachment-medium { height: 140px; }
	
   
    
	
}

@media (max-width:675px){
		.gallery-size-medium{width:100%; margin:0px auto !important; height:1105px; }
		.gallery-size-image-thumb{width:100%; margin:0px auto !important; }
		.gallery-item {margin:0px 20px 20px 0px;}
		.attachment-medium { height: 153px; }
	}
@media (max-width:600px){
		figure{width:100%;}
	}	
@media(max-width:480px){

	.header .logo {float:left;  width:100%;}
	.header .rightSide{margin-top:120px;}
	.header .rightSide{position:static; display:inline-block; width:100%; text-align:center;}
	.social_icon{width:100% !important; float:left; margin-right:0px !important;}
	.sayCiao{width:100% !important;}
	.header .rightSide .social_icon{padding-left:0px;}
	.header .rightSide .sayCiao{padding-left:0px; line-height:30px;}
	.searchBox{width:100% !important; float:left; padding:0px 28px !important;}
	.header .rightSide .social_icon ul{width:180px; margin:0px auto;}
	.header .searchBox button{right:30px;}
	.header .searchBox input.submit{padding-right:60px;}
	
	/*contact page*/
	.contpage .contColl1{width:100%; float:left;}
	.contpage .contColl2{width:100%; float:left;}
	.contpage .contColl3 {width:100%; float:left;}
	.contpage .contColl3 label, .contpage .contColl3 input{width:100%; float:left;}
	.contColl3 .contGroup{width:100%;}
	.contGroup.last{margin:0px;}
	.commercial .comm_1{width:100%; float:left;}
	.commercial .comm_2{width:100%; float:left;}

	.commercial p img{width:100%; margin-bottom:10px;}
	.header .rightSide{margin-top:106px;}
	.menu{border:none;}
	.header .logo a img{width:70%; height:70%; margin:0px;}
	.header .rightSide{margin-top:125px !important;}
	.header .searchBox input{width:160px; float:left; margin-left:10px;}
	.content .rowGroup .wpcf7-submit { background: url("../images/submit.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); float:right; }
	.letter-box .searchBox button{right:30px;}
	.letter-box .searchBox input.submit{padding-right:60px;}
	.header .rightSide .blog-text a{line-height: 140%;}
	.gallery-size-image-thumb .gallery-item{width:100%; }
	.gallery-size-medium{width:100%; margin:0px auto !important; height:1105px; }
}


@media(max-width:320px){
	.commercial p img{width:80%; margin:0px auto 5px auto; }
	.commercial .comm_1 .row1{margin:0px;}
	.residental img{width:80%; margin:0px auto 5px auto; }
	.header .searchBox input{width:120px; float:left;}
	.afiLogo{margin:0px auto; width:70%;  background:#ccc;}
	.logoBox{height:auto;}
	.logoBox p{text-align:center; width:100%;}
	.wplightbox > img { min-height:100px; width:100%; }
	.gallery-size-medium{width:100%; height:960px; overflow:hidden; }
	.gallery-size-image-thumb{width:100%; }
	.attachment-medium { height: 129px; }

}

.home .border { margin-top: 60px; }