@charset "utf-8";

@font-face {
    font-family: 'CantarellRegular';
    src: url('cantarell-regular-webfont.eot');
    src: url('cantarell-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('cantarell-regular-webfont.woff') format('woff'),
         url('cantarell-regular-webfont.ttf') format('truetype'),
         url('cantarell-regular-webfont.svg#CantarellRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
  background: url("../images/wrapper.jpg") repeat-x scroll center 143px transparent;
  font-size: 12px;
}

.wrapper {
  margin: 0 auto;
  position: relative;
  width: 1130px;
}

a, p, li, h1, h2, h3, h4, h5, h6, label, input{font-family: "CantarellRegular","trebuchet MS",verdana,arial; color: #000; margin-bottom: 7px;}

h1{ font-size: 26px;}

h2{ font-size: 20px;}

h3{ font-size: 18px;}

h4{ font-size: 14px;}

h5{ font-size: 12px;}

h6{ font-size: 10px;}

span{}

p {
font-size: 12px;
line-height:120%;
margin-bottom:5px;
}
.clear{clear:both;}
/*-----------------------header-------------------------------*/

.header, header {
  background: none repeat scroll 0 0 #FFFFFF;
  height: 143px;
  margin: 0 auto;
  width: 100%;
}

.logo {
  left: 0;
  position: absolute;
  top: 10px;
}

/*-----------------------navigation---------------------------*/

.menu {
  margin-top: 5px;
  position: absolute;
  right: 0;
  top: 15px;
}

.menu ul{}

.menu li {
  float: left;
  margin-right: 0;
}

.menu li a, .menu li a:visited{ color:#3a3a3a;}

.menu li a:hover{ color:#000000;}

/*-----------------------content------------------------------*/

.content {
  margin-bottom: 50px;
  margin-top: 70px;
  position: relative;
  width: 100%;
}

.content article {
  background: none repeat scroll 0 0 #FFFFFF;
  margin: 0 auto;
  min-height: 576px;
  position: relative;
  width: 504px;
}

.title{color:#3D3D3E;}

.message-box {
  background: none repeat scroll 0 0 #F0F0F0;
  border: 1px solid #CCCCCC;
  font-family: trebuchet MS;
  font-size: 18px;
  margin: 0;
  padding: 10px;
  position: absolute;
  width: 482px;
}

/*-----------------------footer-------------------------------*/

.footer, footer {
  background: none repeat scroll 0 0 #FFFFFF;
  clear: both;
  padding: 20px 0;
  width: 100%;
}

.left_side {
  left: 0;
  position: absolute;
  top: 0;
}

.right_side{float:right;}

.contact-btn{float:right;}

.social{position: relative;}

.social p {
  color: #808080;
  float: left;
  font-family: Verdana,Geneva,sans-serif;
  font-size: 22px;
  text-align: justify;
  width: 342px;
}

#social_icon {
  clear: both;
}

#soc_1{
	position:relative;
	float:left;
	width:45px;
	height:41px;
	background:url(../images/social_icon.jpg) no-repeat;
	
}
#soc_1:hover{background-position:0px -40px;}

#soc_2{
	position:relative;
	float:left;
	width:45px;
	height:41px;
	background:url(../images/social_icon.jpg) no-repeat;
	background-position:-48px 0px;
}
#soc_2:hover{background-position:-48px -40px;}

#soc_3{
	position:relative;
	float:left;
	width:45px;
	height:41px;
	background:url(../images/social_icon.jpg) no-repeat;
	background-position:-96px 0px;
}
#soc_3:hover{background-position:-96px -40px;}

#soc_4{
	position:relative;
	float:left;
	width:45px;
	height:41px;
	background:url(../images/social_icon.jpg) no-repeat;
	background-position:-144px 0px;
}
#soc_4:hover{background-position:-144px -40px;}

#soc_5{
	position:relative;
	float:left;
	width:45px;
	height:41px;
	background:url(../images/social_icon.jpg) no-repeat;
	background-position:-192px 0px;
}
#soc_5:hover{background-position:-192px -40px;}

#soc_6{
	position:relative;
	float:left;
	width:45px;
	height:41px;
	background:url(../images/social_icon.jpg) no-repeat;
	background-position:-240px 0px;
}
#soc_6:hover{background-position:-240px -40px;}

#soc_7{
	position:relative;
	float:left;
	width:45px;
	height:41px;
	background:url(../images/social_icon.jpg) no-repeat;
	background-position:-288px 0px;
}
#soc_7:hover{background-position:-288px -40px;}
/*-----------------------forms-------------------------------*/

.block{display: block;}

.sidebar{float: left; width: 30%;}

label{display: block; margin: 5px 0;}

input[type="text"]{display: block; margin: 5px 0; border: 1px solid #ccc; height: 20px; background: #CCCCCC;}

input[type="checkbox"]{}

input[type="radio"]{}

input[type="submit"]{display: block; margin: 5px 0; border: 1px solid #71B7DB; background: #71B7DB; padding: 5px; color: #fff;}

textarea{display: block; margin: 5px 0; border: 1px solid #ccc; background: #CCCCCC;}

#menu1 {
  background: url("../images/top_buttons.jpg") no-repeat scroll 0 0 transparent;
  float: left;
  height: 97px;
  position: relative;
  width: 128px;
}
#menu1:hover{background: url("../images/top_buttons.jpg") no-repeat scroll 0 -98px transparent;}

#menu2 {
  background: url("../images/top_buttons.jpg") no-repeat scroll -128px 0 transparent;
  float: left;
  height: 97px;
  position: relative;
  width: 128px;
}
#menu2:hover{background: url("../images/top_buttons.jpg") no-repeat scroll -128px -98px transparent;}

#menu3 {
  background: url("../images/top_buttons.jpg") no-repeat scroll -260px 0 transparent;
  float: left;
  height: 97px;
  position: relative;
  width: 128px;
}
#menu3:hover{background: url("../images/top_buttons.jpg") no-repeat scroll -260px -98px transparent;}

#menu4 {
  background: url("../images/top_buttons.jpg") no-repeat scroll -391px 0 transparent;
  float: left;
  height: 97px;
  position: relative;
  width: 128px;
}
#menu4:hover{background: url("../images/top_buttons.jpg") no-repeat scroll -391px -98px transparent;}

.box{}

.box a {
  display: block;
  height: 100%;
  width: 100%;
}

#box1 {
  background: url("../images/box1.png") no-repeat scroll 0 0 transparent;
  height: 234px;
  left: -118px;
  position: absolute;
  top: 30px;
  width: 108px;
}
#box1:hover{
background: url("../images/box1.png") no-repeat scroll -108px 0 transparent;
}

#box2 {
  background: url("../images/box2.png") no-repeat scroll 0 0 transparent;
  height: 198px;
  position: absolute;
  right: -262px;
  top: 20px;
  width: 252px;
}
#box2:hover{
background: url("../images/box2.png") no-repeat scroll -252px 0 transparent;
}

#box3 {
  background: url("../images/box3.png") no-repeat scroll 0 0 transparent;
  height: 198px;
  left: -262px;
  position: absolute;
  top: 330px;
  width: 252px;
}
#box3:hover{
background: url("../images/box3.png") no-repeat scroll -252px 0 transparent;
}

#box4 {
  background: url("../images/box4.png") no-repeat scroll 0 0 transparent;
  height: 234px;
  position: absolute;
  right: -118px;
  top: 290px;
  width: 108px;
}

#box4:hover{
background: url("../images/box4.png") no-repeat scroll -108px 0 transparent;
}

.case-tumbs a {
  float: left;
  margin-bottom: 10px;
  margin-left: 10px;
  position: relative;
}

.case-tumbs .desc {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
  color: #FFFFFF;
  display: none;
  height: 100%;
  position: absolute;
  width: 100%;
}

.case-tumbs .desc p {
  color: #FFFFFF;
  font-size: 14px;
  padding: 4px;
  text-align: right;
}

.case-tumbs a:hover .desc{display: block;}

.our-team #box1{background: url("../images/box1.png") no-repeat scroll -108px 0 transparent;}
.our-work #box2, .ow #box2{background: url("../images/box2.png") no-repeat scroll -252px 0 transparent;}
.how-we-do-it #box3{background: url("../images/box3.png") no-repeat scroll -252px 0 transparent;}
.our-story #box4{background: url("../images/box4.png") no-repeat scroll -108px 0 transparent;}

.team-item {
  background: none repeat scroll 0 0 #CCCCCC;
  float: left;
  position: relative;
  width: 252px;
  overflow: hidden;
}

.team-item h2 {
  color: #FFFFFF;
  padding-right: 10px;
  text-align: right;
}

.social-icons{float: right; padding-right: 10px;}

.social-icons a{float: left; display: block; margin-left: 10px;}

.social-icons a img{display: block;}

.team-item .desc {
  background: none repeat scroll 0 0 rgba(204, 204, 204, 0.9);
  display: none;
  font-size: 10px;
  height: 281px;
  left: 0;
  padding: 4px;
  position: absolute;
  top: 0;
}

.team-item:hover .desc{display: block;}