@font-face {
font-family: 'OfficinaSans';
src: url('officinasans-book.eot');
src: local(' '), url('OfficinaSans-Book.otf');
}

@font-face {
font-family: 'OfficinaSansBold';
src: url('officinasans-bold.eot');
src: local(' '), url('OfficinaSans-Bold.otf');
}

@font-face {
font-family: 'OfficinaSansItalic';
src: url('officinasans-bookitalic.eot');
src: local(' '), url('OfficinaSans-BookItalic.otf');
}

#wrapper{
width:800px;
margin:50px auto 20px;
font-family:Arial, Helvetica, sans-serif;
text-align:center;
position:relative;
}

.logo{
float:left;
margin: 23px 13px 9px 12px;
}

.contact{
padding-top:20px;
color:#0067a0;
font-size:13px;
line-height:20px;
clear:left;
}

.tel,.mail{
margin-left:10px;
color:#0067a0;
text-decoration:none
}

.contact img{
vertical-align:middle
}

/**********************/
#homepage{
width:801px;
height:478px;
overflow:hidden;
position:absolute;
top:109px;
left:0;
}

#homepage .square{
width:126px;
height:113px;
float:left;
border-right:9px solid #fff;
border-bottom:9px solid #fff;
display:block;
cursor:pointer;
}


#homepage #home3,#homepage #home7,#homepage #home16,#homepage #home20{
background: url(nonimage_for_ie.jpg) 0 0;
}

#homepage .last{
border-right:0;
}

#homepage .square a{
text-indent:-9999px;
background:url(../images/sq.gif) 0 0 no-repeat;
width:126px;
height:113px;
display:block;
color:#fff;
text-decoration:none;
position:relative;
}

#homepage .square a span{
font-family:OfficinaSans,Arial,sans-serif;
font-size:25px;
position:absolute;
bottom:5px;
left:10px;
line-height:30px;
width:100px;
text-align:left
}

.home .contact{
display:none
}

.home h1{
color:#007dc3;
float:left;
text-align:right;
padding-top:40px;
width:540px;
font-family:OfficinaSans,Arial,sans-serif;
font-size:24px;
letter-spacing:-1px
}

.home h1 strong{
display:block;
margin-top:5px;
color:#fcb034
}

/*** start primary links ***/
ul.primary {
float:left;
margin-bottom:9px;
}

ul.primary li{
float:left;
font-family:OfficinaSans,Arial,sans-serif;
font-size:20px
}

ul.primary li a{
width:126px;
height:113px;
display:block;
color:#fff;
float:left;
margin-left:9px;
text-decoration:none;
line-height:113px;
text-indent:-9999px;
}

#wrapper ul.primary li a:hover,#wrapper ul.primary li a.selected{
text-indent:0;
background:#fcb034
}

ul.primary li.our_work a{
background:url(../images/work.gif) 0 0 no-repeat;
}

ul.primary li.about a{
background:url(../images/about.gif) 0 0 no-repeat;
}

ul.primary li.big_picture a{
background:url(../images/big.gif) 0 0 no-repeat;
}

ul.primary li.services a{
background:url(../images/services.gif) 0 0 no-repeat;
}
/***************/

/*** start secondary links ***/
ul.secondary{
float:left;
font-family:OfficinaSans,Arial,sans-serif;
font-size:20px;
letter-spacing:-1px;
width:126px
}

ul.secondary li{
float:left;
margin-bottom:9px;
}

ul.secondary li a{
width:126px;
height:113px;
display:block;
background:#007dc3;
color:#fff;
text-decoration:none;
text-align:left;
position:relative;
}

ul.secondary li a span{
position:absolute;
bottom:0;
display:block;
padding:0 0 5px 5px;
line-height:1.1em
}

ul.secondary li a:hover,ul.secondary li a.selected{
background:#fcb034;
}
/******************/
#main{
float:left;
width:665px;
height:479px;
margin-left:9px;
color:#007DC3;
font-size:15px;
line-height:18px;
position:relative
}

#main .content{
padding:14px;
text-align:left;
}

#main .content p{
color:#000;
}

.box1unit{
background:#b2d8ed;
height:113px;
}

.box2units{
background:#b2d8ed;
height:235px;
}

.box3units{
background:#b2d8ed;
height:357px;
}

.box4units{
background:#b2d8ed;
height:479px;
}


h1{
font-size:18px;
font-weight:normal
}

.content ul a{
color:#939598;
text-decoration:none;
font-weight:bold;
line-height:23px;
font-family:OfficinaSansBold,Arial,sans-serif;
font-size:20px;
}

.content ul a:hover,.content ul a.selected{
color:#000;
}

.spaced{
line-height:24px
}

/*************/
/*** services comunication section ***/

.communication .content p{
width:350px;
float:left
}

.communication .content ul{
float:left;
margin-right:65px
}

.communication img,.branding img{
margin:9px 0;
display:block
}

.interpersonal_insight img{
margin-top:9px
}

.interpersonal_insight h1{
position:absolute;
color:#fff;
bottom:87px;
left:14px
}

.interpersonal_insight p,.branding p{
width:95%
}

.branding h1{
position:absolute;
color:#fff;
top:140px;
left:170px;
color:#007DC3
}

.intelligence img{
margin-bottom:9px;
display:block
}

.intelligence h1{
position:absolute;
color:#fff;
top:14px;
left:14px;
color:#007DC3
}

.services-pages .intelligence h1,.services-pages .branding h1{
color:#fff;
}

.intelligence h2,.branding h2{
font-family:OfficinaSansBold,Arial,sans-serif;
font-size:20px;  
margin-bottom:14px;
margin-top:3px;
color:#000;
font-weight:normal;
text-align:left
}

.services-pages .branding h2{
padding:14px 0 0 14px;
margin:0
}

.services-pages .branding p{
width:97%
}

/***/
.services-section{
background:url(../images/services.jpg) 0 1px no-repeat;
}

.services-section h1{
font-family:OfficinaSansItalic,Arial,sans-serif;
font-size:75px;
position:absolute;
top:121px;
left:17px;
color:#fff;
letter-spacing:-1px;
line-height:75px
}

.services-section .blockquote cite{
font-size:18px;
font-style:normal;
line-height:20px;
width:97%;
display:block;
font-weight:normal
}

.services-section .blockquote span{
font-size:18px;  
text-align:right;
display:block;
line-height:34px
}

.services-section .box1unit{
background:#fff;
filter:alpha(opacity=87);
opacity: 0.87;
-moz-opacity:0.87;
}
/**************************************/
/***big-picture-section***/
.big-picture-section,.from30000feet{
background:url(../images/big_picture.jpg) 0 1px no-repeat;  
}

#wrapper .big-picture-section .content p{
width:360px;
color:rgb(37,64,143);
font-size:18px;
line-height:20px;
margin:5px
}

.big-picture-section h1{
font-family:OfficinaSansItalic,Arial,sans-serif;
font-size:75px;
position:absolute;
top:251px;
left:210px;
color:#fff;
letter-spacing:-1px;
line-height:75px;
}

.from30000feet .box3units{
margin-top:122px;
overflow:auto
}

.embeed{
background:#B2D8ED;
}
/*****************************/
/*** about section ***/
.about-section,.our_value_proposition{
background:url(../images/about.jpg) 0 0px no-repeat;  
}

.about-section h1{
font-family:OfficinaSansItalic,Arial,sans-serif;
font-size:75px;
position:absolute;
top:28px;
left:32px;
color:#fff;
letter-spacing:-1px;
line-height:75px;
}

.about-section .box1unit{
background:#fff;
filter:alpha(opacity=87);
opacity: 0.87;
-moz-opacity:0.87;
font-size:18px;
line-height:20px;
top:244px;
position:relative;
color:rgb(37,64,143);
}

#wrapper .about-section .box1unit .content{
padding-top:16px
}

/******************/
.ben_glass .box3units{
margin-top:121px
}

.ben_glass .box3units p{
margin-top:15px;  
height:235px;  
overflow:auto;
padding-right:120px
}

.our_value_proposition .box2units{
margin-top:131px
}

#wrapper .our_value_proposition .box1unit p{
color:#007DC3;
font-size:18px;
line-height:20px
}

#wrapper .our_value_proposition h1 a{
font-family:OfficinaSansBold,Arial,sans-serif;
font-size:20px;  
color:#939598;
font-weight:normal;
text-decoration:none;
}

#wrapper .our_value_proposition h1 a:hover,#wrapper .our_value_proposition h1.selected a{
color:#000;
}

#wrapper .our_value_proposition h1{ 
margin-bottom:12px;
}

/************************/
.construction .msg{
background:#007dc3;
color:#fff;
padding:50px 0px;
margin:8px 0;
}

.construction h1{
float:left;
width:425px;
text-align:left;
padding-left:2px;
margin-bottom:20px
}

.construction h2{
color:#007dc3;
float:left;
text-align:left;
padding-top:25px
}

.construction h2 span{
display:block;
margin-top:10px;
color:#fcb034
}

/*********************/
.concept_map{
background:url(../images/concept_map.jpg) 0 1px no-repeat;  
}

.concept_map .control{
font-size:24px;
color:rgb(37,64,143);
position:absolute;
font-family:"Comic Sans MS", cursive;
}

.step1{
left:29px;
bottom:16px
}

.step2{
right:95px;
top:198px
}  

.step3{
left:63px;
top:77px
}

.concept_map h1{
font-family:OfficinaSansBold,Arial,sans-serif;
font-size:20px;  
font-weight:normal;
margin-bottom:4px;
}

.concept_map ol{
font-family:OfficinaSansItalic,Arial,sans-serif;
font-size:20px;  
foont-style:italic;
}

.concept_map ol li{
list-style-position:inside;
list-style-type:decimal;
line-height:24px
}

.concept_map #need{
position:absolute;
left:13px;
top:215px;
}

.concept_map #develop{
position:absolute;
right:46px;
bottom:37px;
color:#fff;
}

.concept_map #goal{
position:absolute;
top:10px;
left:256px
}

.concept_map div div{
display:none
}

.concept_map .control{
cursor:pointer;
display:block;
line-height:40px;
padding:0 20px
}

/*****/
.collaborators ul{ 
color:#939598;
text-decoration:none;
font-weight:bold;
line-height:28px;
font-family:OfficinaSansBold,Arial,sans-serif;
font-size:20px;  
margin-top:170px
}

.collaborators ul strong{
color:#000
}

#wrapper .collaborators p{
color:#007DC3;
font-size:18px;
line-height:20px
}

/******/
.work-section{
background:url(../images/our_work.jpg) 0 1px no-repeat;  
}

.work-section h1{
font-family:OfficinaSansItalic,Arial,sans-serif;
font-size:75px;
position:absolute;
top:19px;
right:80px;
color:#fff;
letter-spacing:-1px;
line-height:75px
}

#wrapper .work-section p{
color:#007DC3;
font-size:22px;
line-height:30px;
position:absolute;
top:91px;
right:78px;
width:250px;
text-align:left
}

.intelligence .communication cite{
font-style:normal
}

/***/
.thumbs_list ul{
border-bottom:9px solid #fff;
overflow:hidden
}

.thumbs_list ul li{
float:left;
height:113px;
width:126px;
display:block;
border-right:8px solid #fff;
text-align:center
}

.thumbs_list ul li a img{
margin:0
}

.thumbs_list ul li a img{
height:113px;
width:126px;
margin:0
}

.thumbs_list ul li.last{
border-right:0
}

.thumbs_list ul li span{
display:block;
text-align:right;
position:relative;
top:85px
}

.thumbs_list ul li.last_img img{
border-right:3px solid #fff
}

/***/
.branding_client h1{
font-weight:bold;
font-size:15px;
color:#000;
padding-bottom:10px;
}

.branding_client a{
color:#007DC3;
text-decoration:none
}

.branding_client .box1unit{
text-align:left;
}

.branding_client .back{
float:right;
position:relative;
top:-30px
}

.branding_client .prev{
position:absolute;
left:20px;
top:290px
}

.branding_client .next{
position:absolute;
right:20px;
top:290px
}

.branding_client img{
margin-left:20px;
margin-top:9px;
}

#wrapper .our_work_communication h1{
position:absolute;
top:260px;
left:175px;
color:#fff
}

#wrapper .clients .content div{
color:#007DC3;
width:43%;
float:left;
padding-left:4px
}

#wrapper .clients .content div strong{
display:block;
color:#000;
padding-right:40px
}

#wrapper .clients .content div h2{
font-weight:normal;
margin-top:1.1em;
line-height:1.5em
}