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

@font-face {
    font-family: 'texgyreadventorregular';
    src: url('texgyreadventor-regular-webfont.woff2') format('woff2'),
         url('texgyreadventor-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {font-family: "ITC Avant Garde Gothic Extra Light";
  src: url("a49a4209579b19e01b3be35aeb9e5a2f.eot"); /* IE9*/
  src: url("a49a4209579b19e01b3be35aeb9e5a2f.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("a49a4209579b19e01b3be35aeb9e5a2f.woff2") format("woff2"), /* chrome、firefox */
  url("a49a4209579b19e01b3be35aeb9e5a2f.woff") format("woff"), /* chrome、firefox */
  url("a49a4209579b19e01b3be35aeb9e5a2f.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("a49a4209579b19e01b3be35aeb9e5a2f.svg#ITC Avant Garde Gothic Extra Light") format("svg"); /* iOS 4.1- */
}

body {
	background-image: url(../images/inner_bg1.jpg);
	background-repeat: no-repeat;
	background-position:center center;
	background-attachment:fixed;
	background-size:cover;
	background-color:#f4f4f4;
	margin:0;
	font-family: 'texgyreadventorregular';
	font-size : 100%;
	font-weight:400;
	line-height:22px;
	color:#5c5c5c;
}
a img{border:none}
ul, li{margin:0; padding:0}
p{margin:0; padding-bottom:20px;}
.wrapper{width:80%; margin:0 auto;}

 h3, h4 {font-family:"ITC Avant Garde Gothic Extra Light" !important;}

h1{font-weight:400; font-size:250%; line-height:38px; margin:0; padding-bottom:20px;}
h2{font-weight:400; font-size:180%; line-height:32px; margin:0; padding-bottom:20px; }
h3{font-weight:600; font-size:150%; line-height:32px; margin:0; margin-bottom:10px; border-bottom:#e4e4e4 1px solid;}
h4{font-weight:600; font-size:110%; line-height:20px; margin:0; margin-bottom:10px; padding-bottom:8px; border-bottom:#ccc 1px solid;}

#header{width:100%; background:#fcfcfc; float:left; position:fixed; z-index:900; border-bottom:1px #dfdfdf solid;}

.logo{float:left;} .logo img{ width:90%;}

.more{border:2px solid #999; padding:10px; text-decoration:none; color:#333333; font-weight:500}
.side_link{border-bottom:1px solid #ccc; line-height:40px; text-decoration:none; color:#000000; font-weight:400; display:block; font-size:105%}
#header .more{ float:right; margin:15px 10px 0 0; }

#tag{width:100%; float:left; text-align:center;  } 
#tag img{width:100%; float:left;}
#banner{width:100%;  float:left;} #banner img{width:100%; overflow:hidden; float:left; position:relative; z-index:100; margin-top:80px;}
#banner_inner{width:100%;  float:left; margin-bottom:20px} #banner_inner img{width:100%; overflow:hidden; float:left;}

#aap {
    opacity:1;
    transition:opacity 2500ms;
	z-index:500;
	position:absolute;
	width:100%;
	float:left;
}
#aap img{width:100%}
#aap.waa {
    opacity:0;
}

#about, #projects, #services{width:100%; float:left; margin:15px 0; text-align:center; position:relative; z-index:10}

#projects{background:url(../images/pro_bg.jpg); background-repeat:no-repeat; background-position:center top}

#projects img{width:25%; float:left;  -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%); -webkit-transition: all .5s ease-in-out;}
#projects img:hover{-webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */ filter: grayscale(0%); cursor:pointer}
#projects .more{ border-left:0; border-right:0; border-color:#bbbbbb; display:block; border-top:1px solid #ccc; border-bottom:1px solid #ccc; width:100%; float:left; margin-top:10px; padding:10px 0}

#footer1{width:100%; float:left; background:#f7f5f5 }
.footer1{width:50%; float:left; border-top:#ccc solid 1px;}

#footer2{width:100%; float:left; background:#e6e6e6; line-height:60px }
.footer2{width:50%; float:left}

.right{text-align:right}
.social{ padding-top:15px}
.hide{display:none}
.turn{float:left}
.space{letter-spacing:20px}
.home{	
	background-image: url(../images/home.jpg);
	background-repeat: no-repeat;
	background-position:center top;
	background-size:contain;
	background-attachment:scroll;
	background-color:#fff
	}

#content{width:100%; margin:30px 0 15px 0; float:left; margin-top:80px;}

.content{width:100%; float:left;  padding:20px 0 0 0; text-align:center;}
.content_l{width:23%; margin-right:2%; float:left; padding:20px 0 15px 0; position:fixed; z-index:999}
.content_r{width:68%; margin-left:2%; float:right; padding:20px 0 15px 0; text-align:justify;}

#gallery{width:100%; margin:30px 0 15px 0; float:left; margin-top:80px; text-align:center;}
#gallery ul{margin:0; list-style:none}
#gallery li{width:25%;  float:left; background:#fff; margin-bottom:10px; overflow:hidden;} #gallery li img{width:100%; height:220px; max-height:220px; overflow:hidden;} #gallery li h4{border:none; height:30px; padding:10px 0; margin:0;}

#client{width:100%; margin:30px 0 15px 0; float:left; text-align:center;}
#client ul{margin:0; list-style:none}
#client li{width:20%; float:left; background:#fff; margin-bottom:25px; overflow:hidden;} #client li img{width:90%} 





.gall_block{background-color:#000; overflow:hidden;}
.gall_item{display:block;background:#000 url(../images/magnify.png) center -45% no-repeat;-webkit-transition:background-position 0.5s ease;transition:background-position 0.5s ease;}
.gall_item:hover{background-position:center center;}
.gall_item img{transition:0.5s ease;-o-transition:0.5s ease;-webkit-transition:0.5s ease;width:100%;display:block;}
.gall_item:hover img{opacity:0.2;-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}

.list_l{width:30%; float:left} .list_r{width:70%; float:left}

.project_s{width:21%; margin:1%; padding:1%; float:left; background:#fff;} .project_s img{width:100%} .project_s h4{border:none}

#service{width:100%;  float:left; position:relative;  z-index:10} #service img{width:100%}
 #serv {text-align:justify}
 
.content_ls{width:23%; margin-right:2%; float:left; padding:20px 0 15px 0;  }
.content_lf{width:23%; margin-right:2%; float:left; padding:20px 0 15px 0; position:fixed; top:80px; z-index:9; }



.contact_l{width:33%; margin-right:2%; float:left; padding:20px 0 15px 0;}
.contact_r{width:63%; margin-left:2%; float:right; padding:20px 0 15px 0; }

.contact_l p{ margin:0; padding:8px 0;}


.nav {
float : right;
margin : 15px 15px 0 0;
width : 36px;
}
ul.menu {
list-style : none;
margin : 0;
padding : 0;
}
ul.menu * {
margin : 0;
padding : 0;
}
ul.menu a {
text-decoration : none;
}
ul.menu li {
position : relative;
float : left;
}
ul.menu ul {
position : absolute;
top : 45px;
right : 0;
display : none;
opacity : 0;
list-style : none;
width : 230px;
}
ul.menu ul li {
position : relative;
width : 230px;
margin : 0;
}
ul.menu ul li a {
	font-weight:300;
display : block;
padding-right : 15px;
line-height : 40px;
text-align : right;
color : #FFFFFF;
text-decoration : none;
background-color : #000000;
border-top-width : 1px;
border-top-style : solid;
border-top-color : #2C2C2C;
text-transform : uppercase;
}
ul.menu ul li a:hover {
color : #000;
background-color : #efc602;
}




input {
width : 100%;
height : 23px;
color : #333333;
background : url(../img/bg.jpg) repeat;
padding : 4px 0 0 4px;
overflow : hidden;

border : #242424 dashed 1px;
}
textarea {
width : 100%;
height : 60px;
color : #424242;
background : url(../img/bg.jpg) repeat;
padding : 3px 0 0 4px;
overflow : auto;

border : #242424 dashed 1px;
}
.button {
width : 100%px;
height : 40px;

color : #FFF;
border : #242424 dashed 1px;
font-weight : normal;
text-transform : uppercase;
background-color : #3d3d3d;
margin-top : 5px;
margin-right : 0;
margin-bottom : 5px;
margin-left : 0;
padding-top : 3px;
padding-right : 0;
padding-bottom : 0px;
padding-left : 0;
}
.button2 {
width : 200px;
height : 27px;

color : #FFF;
border : #242424 dashed 1px;
font-weight : normal;
text-transform : uppercase;
background-color : #E32527;
margin-top : 0;
margin-right : 7px;
margin-bottom : 0;
margin-left : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 5px;
padding-left : 0;
}

@media (min-width:320px) and (max-width:640px) {
	
	.footer1, .footer2{width:100%; text-align:center} .footer2{line-height:20px;} #footer2{padding:15px 0}
	.wrapper{width:90%}
	#header .more{display:none}
	.hide{display:block}
	.right{ text-align:center}
	.logo{width:80%} .logo img{width:100%}
	.turn img{width:65%}
	.nav {margin : 4px 15px 0 0;}
	.content_l, .content_ls, .content_lf{display:none}
	.content_r{width:100%}
	#content{margin-top:50px }
	.space{letter-spacing:0px}
	.contact_l{width:100%}
	.contact_r{width:100%}
	.inner_bg1, .inner_bg2, .inner_bg3 { background-image:none}
	
	#gallery li{width:50%;  float:left; background:#fff;}

}

@media (min-width:640px) and (max-width:670px) {
	.logo{width:50%} .logo img{width:100%}
	.turn img{width:65%}
	#header .more{display:block; margin-top:15px; font-size:90%; padding:5px}
	.nav {margin : 10px 15px 0 0;}
	.hide{display:none}
	.space{letter-spacing:0px}
}
@media (min-width:370px) and (max-width:490px) {
	.nav {margin : 15px 15px 0 0;}
}

@media (min-width:732px) and (max-width:980px) {
	.wrapper{width:90%}
	.space{letter-spacing:0px}
}
@media (min-width:320px) and (max-width:380px) {
 h2{font-size: 140%;} #gallery li{width:100%;
}