/* Design & Integration by Marie-Claude Doyon 
http://www.marieclaudedoyon.com */

/* @group reset */

html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, cite, em,  img,  strong, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, address {
 margin: 0;
 padding: 0;
 border: 0;
 outline: 0;
}

html {
 background-color: #00000A;
 font-family: Helvetica, Arial, sans-serif;
 color: #FFF;
 border-bottom: 1px solid black;
}

body {
 position: relative;
 height: 100%;
}

ol, ul {
 list-style: none;
}

a {
 text-decoration: none;
 color: #994b13;
}
a:hover {
 color: #FF7D19;
}

h1 {
 padding: 24px 10px 12px 10px;	
 color: #FF7D19;
 font-size: 24px;
 font-weight: normal;
 line-height: 24px;
 letter-spacing: -0.06em;
}
h2 {
 padding: 6px 0;	
 font-size: 18px;
 font-weight: normal;
 line-height: 21px;
 color: #7D695F;
}
p, ul {
 padding: 0 0 16px 0;
 font-size: 14px;
 line-height: 18px;
 
}
sup {
 line-height: 0;	
}
object {
	margin-bottom: 18px;
}
#wrapper {
 position: relative;
 width: 950px;
 margin: 0 auto;
 overflow: hidden;
 height: 100%;
}
#content {
 position: relative;	
 min-height: 400px;
}

.no-margin-right {
 margin-right: 0 !important;
 padding-right: 0 !important;
}


/* @end */

/* @group header */

#header {
 position: relative;
 overflow: hidden;
 height: 150px;
 background: url(images/bg-header-anim.gif) no-repeat;
}

#logo {
 position: absolute;
 top: 50px;
 left: 10px;
}

/* @end */

/* @group nav */
#utils {
 position: absolute;
 top: 12px;
 right: 10px;
 font-size: 12px;
 line-height: 18px;
}
#utils li {
 float: left;
 padding: 0 0 0 24px;
 background: url(images/dot.png) 8px 5px no-repeat;
}
#utils li.first {
 background: none;
}
#utils a:link, #utils a:visited {
 color: #994B13;
}
#utils a:hover {
 color: #FF7D19;
}

#nav {
 display: block;
 position: absolute;
 padding: 0;
 margin: 0;
 top: 56px;
 right: 0;
 font-size: 18px;
 line-height: 18px;
}
#nav li {
 float: left;
 padding: 0 3px 0 0;
 letter-spacing: -0.06em;
}
#nav a {
 color: #FF7D19;
 padding: 3px 9px;
 background-color: #00000A;
/* border: 1px solid #00000E;*/
}
#nav a:hover {
 color: #FFF;
}
#nav a:active {
 color: #FFF;
}
#nav a.current-section {
 color: #FFF;
}

#subnav {
 display: block;
 padding: 0;
 font-size: 16px;
}	
#subnav li {
 float: left;
 padding: 0;
 letter-spacing: -0.07em;	
}
#subnav a {
 color: #FF7D19;
 margin-left: -1px;
 padding: 3px 6px;
 background-color: #00000A;
}
#subnav a:hover {
 color: #FFF;
}
#subnav a.current-section {
 color: #FFF;
}

#about #subnav {
 position: absolute;
 top: 85px;
 left: 210px;	
}
#services #subnav {
 position: absolute;
 top: 85px;
 left: 380px;	
}
#media #subnav {
 position: absolute;
 top: 85px;
 left: 710px;	
}
/* @end */

/* @group home */
#intro {
 display: none;
 position: relative;
 margin: 10px 0 30px 0;
 padding: 24px 0 0 0;
 background-color: #16161C;
}
#intro h1 {
 width: 260px;
 position: absolute;
 top: 18px;
 left: 20px;
 padding: 0;
 font-size: 24px;
 font-weight: normal;
 color: #FFF;
 line-height: 27px;
}
#intro p {
 padding: 0 20px 21px 320px;	
 font-size: 18px;
 line-height: 21px;
}
#intro p.first {
 padding-bottom: 0;
}
#quickinfo {
 position: relative;
 margin-top: 30px;
}
#slideshow {
 height: 400px;
 width: 950px;
 margin: auto;
}

.block {
 width: 310px;
 color: #7D695F;
}
.block:hover {
 color: #FFF;	
}
.block:hover a {
 color: #FF7D19;
}
.block:hover p {
 color: #FFF;
}
.block img {
 float: left;
 margin: 0 10px 10px 0;
}

.block p {
 padding: 0;
}
#col1, #col2, #col3 {
 float: left;
}
#col2, #col3 {
 margin-left: 10px;
}
/* @end */

/*group About & Services */
#about h2, #services h2 {
 letter-spacing: -0.06em;
}
#roupi {
 margin-top: 36px;
}
/* @end */

/*group Approach */
#graphic {
 display: block;
 width: 950px;
 height: 175px;
 background-color: #16161C;
}
#graphic li {
 display: block;
 margin: 0;
 padding: 0 13px 0 0;
 font-size: 14px;
 line-height: 16px;
 text-align: center;
 background: url(images/approach-arrow-right.png) no-repeat right;
}
#graphic li#item-01 {
 position: absolute;
 top: 20px;
 left: 20px;
}
#graphic li#item-02 {
 position: absolute;
 top: 20px;
 left: 175px;
}
#graphic li#item-03 {
 position: absolute;
 top: 20px;
 left: 330px;
}
#graphic li#item-04 {
 position: absolute;
 top: 20px;
 left: 485px;
}
#graphic li#item-05 {
 position: absolute;
 top: 20px;
 left: 640px;
}
#graphic li#item-06 {
 position: absolute;
 top: 20px;
 left: 795px;
 padding-right: 0;
 background: none;
}
#graphic li a {
 position: relative;
 display: block;
 padding: 30px 15px 30px 15px;
 width: 106px;
 height: 76px;
 background: url(images/approach-circle.png) no-repeat 0 0;
 color: #FFF;
}

#graphic li#item-01 a span, #graphic li#item-02 a span,
#graphic li#item-03 a span, #graphic li#item-04 a span, 
#graphic li#item-05 a span, #graphic li#item-06 a span {
 position: absolute;
 width: 118px;
 padding: 0 9px;
}

#graphic li#item-01 a span {
 top: 45px;
 left: 0;
}

#graphic li#item-02 a span {
 top: 61px;
 left: 0;
}
#graphic.fr li#item-02 a span {
 top: 50px;
 left: 0;
}

#graphic li#item-03 a span {
 top: 61px;
 left: 0;
}
#graphic.fr li#item-03 a span {
 top: 50px;
 left: 0;
}

#graphic li#item-04 a span {
 top: 50px;
 left: 0;
}
#graphic.fr li#item-04 a span {
 top: 60px;
 left: 0;
}

#graphic li#item-05 a span {
 top: 32px;
 left: 0;
}
#graphic.fr li#item-05 a span {
 top: 50px;
 left: 0;
}

#graphic li#item-06 a span {
 top: 45px;
 left: 0;
}

#graphic li a:hover {
 background: url(images/approach-circle.png) no-repeat center left;
}
#graphic li a:active, #graphic li.current a {
 background: url(images/approach-circle.png) no-repeat bottom left;
}
#graphic-content {
 min-height: 400px;
 margin: 10px 0 0 0;
 background-color: #16161C;
}
#graphic-content img {
 float: left;
 margin: 20px;
}
#graphic-content .text {
 margin-left: 475px;
}
#graphic-content .text h2, #graphic-content .text p {
 margin: 0 20px;
 color: #FFF;
}
#graphic-content .text h2 {
 padding: 24px 0 12px 0;
 color: #FF7D19;
}
#approach-introduction h1 {
	margin-left: 10px;
}
.item-nav {
 position: absolute;
 bottom: 5px;
}
a.previous-step, a.next-step {
 display: block;
 float: left;
 margin: 0;
 width: 90px;
 height: 18px;
 line-height: 19px;
 font-size: 11px;
 font-weight: bold;
 text-transform: uppercase;
 letter-spacing: 0.07em;
 border: 1px solid #673B1C;
}
a.previous-step {
 margin-right: 3px;
 padding: 0 10px 0 0;
 text-align: right;
 background: url(images/previous-arrow.png) no-repeat left top;		
}
a.next-step {
 padding: 0 0 0 10px;
 background: url(images/next-arrow.png) no-repeat 100% top;		
}
a.previous-step:hover {
 border-color: #994B13;
 background: url(images/previous-arrow.png) no-repeat left 100%;
}
a.next-step:hover {
 border-color: #994B13;
 background: url(images/next-arrow.png) no-repeat 100% bottom;
}
/* @end */

/*group Range of Services */
#range-of-services {
 display: block;
 width: 950px;
 height: 175px;
 background-color: #16161C;
}
#range-of-services li {
 float: left;
}
#range-of-services li a {
 display: block;
 float: left;
 margin: 10px 0 0 10px;
 padding: 10px;
 width: 205px;
 height: 52px;
 font-size: 16px;
 line-height: 18px;
 color: #FFF;
 overflow: hidden;
 background: url(images/range-rectangle.png) no-repeat top left;
}
#range-of-services li a:hover {
 background-position: center left;
}
#range-of-services li a:active, #range-of-services li.current a {
 background-position: bottom left;
}
#range-content {
 min-height: 400px;
 margin: 10px 0 0 0;
 background-color: #16161C;
}
#range-content img {
 float: left;
 margin: 20px;
}
#range-content .text {
 margin-left: 475px;
}
#range-content .text h2, #range-content .text p {
 margin: 0 20px;
 color: #FFF;
}
#range-content .text h2 {
 padding: 24px 0 12px 0;
 color: #FF7D19;
}
#range-introduction h1 {
	margin-left: 10px;
}
/* @end */

/* @group Clients & Projects */
#project-filter {
 position: relative;
 float: left;
 margin: 0 15px 10px 0;
 width: 225px;
 height: 300px;
 background-color: #16161C;
}
#project-filter p {
 padding: 12px 10px;
}
#project-filter a {
 display: block;
 margin: 3px 10px;
 padding: 0 5px;
 line-height: 21px;
 background: #00000A url(images/dropdown.png) no-repeat 100% -21px;
}
#project-filter a:hover, #project-filter a.active {
 background: #00000A url(images/dropdown.png) no-repeat 100% top;
}
#project-filter #view-all a {
 position: absolute;
 left: 0;
 top: 176px;
 font-size: 12px;
 background: none;
}
#project-filter #current-filter {
 position: absolute;
 left: 5px;
 top: 140px;
}
#project-filter #current-filter p {
 font-size: 12px;
 line-height: 15px;
}

#filters {
 position: relative;
 font-size: 12px;	
 z-index: 10000;
}
#years, #locations, #types, #sectors {
 margin: -3px 0 0 0;
 padding: 0;
 width: 100%;
 font-size: 12px;	
}

#years a, #locations a, #types a, #sectors a {
 margin: 0 10px;
 color: #FFF;
 background-color: #BF5E15;
 background-image: none;
 border-bottom: 1px solid #00000A;
}

#years a:hover, #locations a:hover, #types a:hover, #sectors a:hover {
 background-color: #FF7D19;
 background-image: none;
}

.project-resume {
 float: left;
 margin: 0 10px 10px 0;
 width: 230px;
 height: 300px;
 color: #7D695F;
}
.project-resume img {
 opacity: 0.4;
}
.project-resume:hover img {
 opacity: 1;
}
.project-resume ul {
 font-size: 12px;
 line-height: 15px;
}
.project-resume:hover ul {
 color: #FFF;
}
.project-resume h2 {
 padding: 6px 0;
}
.project-resume:hover {
 color: #FFF;
}
.project-resume:hover a {
 color: #FF7D19;
}

#project-images {
 position: relative;
 float: left;
 width: 630px;
 height: 420px;
 text-align: center;
 background-color: #16161C;
 overflow: hidden;
}

.project-image {
 display: block;
 width: 100%;
 position: absolute;
 top: 0;
 left: 0;
}

#project-images p {
 position: absolute;
 top: 436px;
 left: 0;
 padding: 0;
 margin: 0;
 width: 630px;
 font-size: 12px;
 line-height: 18px;
 text-align: center;
}

#project-description {
 margin-left: 645px;
}
#project-description h1 {
 padding: 12px 0 0 0;
 font-size: 24px;
 color: #FFF;
 letter-spacing: -0.06em;	
}
#project-description h2 {
 padding: 3px 0 9px 0;
 font-size: 16px;
 color: #7D695F;
 letter-spacing: -0.06em;	
}
#project-description p {
 font-size: 12px;
 line-height: 15px;
}
#project-description dl {
 font-size: 14px;
 line-height: 15px;
 width: 145px;
}
#project-description dl dt {
 font-size: 11px;
 font-weight: bold;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: #7D695F;
}
#project-description dl dd {
 padding-bottom: 9px;
 font-size: 12px;
}
#project-description dl.project-info-01, #project-description dl.project-info-02 {
 float: left;
}
#project-description dl.project-info-01 {
 margin-right: 10px;
}
#project-description ul li {
 line-height: 15px;
}
p.photo-description {
 position: absolute;
 top: 3px;
 left: 160px;
 width: 310px;
 color: #7D695F;
 font-size: 12px;
 text-align: center;
}
.download-pdf, .video-link {
 display: block; 
 width: 190px;
 margin: 0;
 padding: 0;
}

#showreel {
  /*display: none;*/
  position: absolute;
  left: 10px;
  top: 265px;
  text-align: center;
}
#showreel p {
	font-size: 13px;
}
#showreel a {
  display: block;
  padding: 3px 0;
  width: 205px;
  border: 1px solid #994b13;
}
#showreel a:hover {
 border-color: #FF7D19;
}
/* @end */

/* @group General Pages */
p.intro {
 margin-left: 10px;
 margin-right: 340px;
 font-size: 21px;
 line-height: 24px;
 letter-spacing: -0.06em;
 color: #FFF;
}
.half {
 float: left;
 width: 470px;
}
.half p, .half h2, .third p, .third h2 {
 margin-left: 10px;
 margin-right: 10px;
}
.half img {
 float: left;
 margin: 0 15px 10px 10px;
}
.third {
 float: left;
 width: 310px;
}
.third p.intro {
 margin-right: 10px;	
}
.third p {
 margin-left: 10px;
 margin-right: 10px;
}
.two-thirds {
 float: left;
 width: 630px;
 margin-right: 10px;
}
.note {
 font-size: 11px;
 line-height: 15px;	
}
/* @end */

/* @group Blog */
#blog h1 {
 margin: 0 320px 10px 0;
 border-bottom: 1px solid #401F0D;	
}
#blog-posts img {
 margin: 10px 10px 24px 0;
}
#blog-posts {
 float: left; 
 width: 630px;
}
.blog-post {
 margin-bottom: 10px; 
 border-bottom: 1px solid #401F0D;	
}
.blog-post h2 {
 font-size: 24px;
 line-height: 27px;
 letter-spacing: -0.06em;
}
.post-content {
 margin-left: 160px;
}
.post-content p, .post-content ul {
 clear: left;
}
.meta {
 float: left;
 width: 150px;
 margin-top: 12px;
}
.meta p {
 padding: 0;
 margin-left: 10px;
}
#blog-stuff {
 margin: 60px 160px 0 640px;
}
#blog-stuff h2, #cm-form h2, #socialmedia h2 {
 color: #7D695F;
 border-top: 1px solid #401F0D;
}
#blog-stuff ul {
 font-size: 12px;
 line-height: 15px;
 margin-bottom: 12px;
}
#post-titles li {
 padding-bottom: 6px;
}
#cm-form {
 position: absolute;
 top: 0;
 right: 0;
 width: 150px;
 margin-top: 60px;
}
#cm-form input {
 display: block;
}
#cm-form p {
 font-size: 12px;
 line-height: 15px;
}
#cm-form label {
 display: block;
 font-size: 12px;
 font-weight: bold;
 padding-bottom: 3px;
}
#cm-form #submit {
 font-family: Helvetica, Arial, sans-serif;
 font-size: 12px;
 color: #994B13;
 background-color: #00000A;
 border: 1px solid #401F0D;
 margin: 6px 0 12px 0;
 padding: 3px;
}
#cm-form #submit:hover {
 color: #FF7D19;
 border: 1px solid #994B13;
 cursor: pointer;
}
#cm-form #submit:active {
 color: #00000A;
 background-color: #FF7D19;
 border: 1px solid #FF7D19;
 cursor: pointer;
}
#socialmedia {
 position: absolute;
 top: 280px;
 right: 0;
 width: 150px;
}
#socialmedia img {
 margin-bottom: 10px;
}
/* @end */

/* @group Media */
#media .two-thirds {
 padding-bottom: 10px;
}
#media h1 {
 margin-bottom: 10px;
 border-bottom: 1px solid #401F0D;	
}
#media img {
 margin: 0 0 24px 0;
}
#media .article img {
 float: left;
 margin: 0 10px 18px 0;
}
#press-releases, #press-release-content {
 float: left; 
 width: 470px;
}
#latest-press-releases {
 width: 470px;
}
#press-complement {
 margin: 0 0 0 10px;
 float: left;
 width: 310px;
 background-color: #16161C;
}
#press-complement h3, #press-complement p {
 margin: 0 10px;
}
#press-complement h3 {
 padding: 18px 0 9px 0;
 font-size: 12px;
 text-transform: uppercase;
}
#press-complement p {
 font-size: 12px;
}
#press-images {
 clear: left;
}
#press-images div {
 clear: left;
}
#press-images img {
 float: left;
 margin: 0 10px 10px 0;
}
#press-images p {
 margin: 18px 0 0 10px;
}
.press-release h2 {
 margin: 0 10px 9px 10px;
 font-size: 24px;
 line-height: 24px;
 letter-spacing: -0.06em;
}
.press-release p {
 clear: left;
 margin-left: 10px;
 margin-right: 10px;
}
.press-release .date {
 padding: 0;
 color: #7D695F;
}
.press-release, .article {
 margin-bottom: 10px;
 border-bottom: 1px solid #401F0D;
}
.article {
 height: 220px;
}
#press-release-content .press-release {
 border-bottom: none;
}


#press-stuff {
 margin-top: 60px;
 margin-left: 640px;
}
#press-stuff h2 {
 color: #7D695F;
 border-top: 1px solid #401F0D;
}
#press-stuff ul {
 margin-bottom: 24px;
 font-size: 12px;
}
#press-stuff ul#latest-titles li {
 line-height: 15px;
 padding: 6px 0;
 border-top: 1px solid #401F0D;
}
#press-stuff ul#latest-titles li .date {
 display: block;
 color: #7D695F;
}
.press-release-page #press-stuff {
 position: absolute;
 top: 90px;
 right: 0;
 width: 150px;	
}

#articles {
 padding-bottom: 10px;
}
#year-filter {
 position: absolute;
 top: 24px;
 right: 0;
 margin: 0;
 width: 170px;
 background-color: #16161C;
}
#year-filter a {
 display: block;
 margin: 3px 10px;
 padding: 0 5px;
 line-height: 21px;
 background: #00000A url(images/dropdown.png) no-repeat 100% -21px;
}
#year-filter a:hover {
 background: #00000A url(images/dropdown.png) no-repeat 100% top;
}
.article {
 float: left;
 width: 310px;
 padding-right: 10px;
 color: #7D695F;	
}
.article img {
 opacity: 0.4;	
}
.article:hover img {
 opacity: 1;	
}
.article:hover a {
 color: #ff7d19;
}
.article p.article-content {
 font-size: 12px;
 line-height: 15px;
}
.article:hover p.article-content {
 color: #FFF;
}
.article h2 {
 padding: 6px 0 0 0;	
}
.article .date {
 margin: 0 0 9px 160px;
 padding-bottom: 9px;
 font-size: 12px;
 background: url(images/dot-mark.png) no-repeat bottom left;
}

a.more-press-releases, a.more-articles {
 clear: both;
 margin: 0;
 padding: 3px 24px 3px 10px;
 line-height: 24px;
 border: 1px solid #401F0D;
 background: url(images/more-arrow.png) no-repeat 100% top;	
}
a.more-press-releases:hover, a.more-articles:hover {
 border-color: #994B13;
 background: url(images/more-arrow.png) no-repeat 100% center;
}

/* @end */


/* @group Contact */

p.telephone {
 padding: 0;
}
p.cv a {
	padding: 3px 6px;
	border: 1px solid #401F0D;
}
p.cv a:hover {
	border-color: #994B13;
}
#map {
 position: absolute;
 top: 420px;
 right: 0;	
}
#map p {
 padding-top: 6px;	
}
/* @end */

/* @group pagination */
#page-nav {
 text-align: center;
 width: 100%;
}
#image-nav  {
 position: absolute;
 top: 475px;
 left: 0;
}
#page-nav ul {
 margin: 0 auto;
 padding-top: 36px;
 width: 180px;
}
#page-nav ul, #image-nav ul {
 font-size: 12px;
 text-align: center;
 line-height: 18px;
}
#image-nav ul {
 position: relative;
 margin: 0;
 padding: 0;
 width: 136px;
 color: #7D695F;
}
#page-nav ul li, #image-nav ul li {
 float: left;
 display: block;
 padding: 0;
 margin: 0 2px;
 line-height: 18px;
}
#page-nav a, #image-nav a {
 display: block;
 min-width: 18px;
 height: 18px;
 color: #803f12;
 border: 1px solid #401f0d;
}
#page-nav a:hover, #image-nav a:hover {
 color: #ff7d19;
 border: 1px solid #994B13;
}
#page-nav a:active {
 color: #00000E;
 background-color: #ff7d19;
 border: 1px solid #ff7d19;
}
#page-nav li.current-page {
 color: #ff7d19;
 height: 18px;
 min-width: 18px;
 padding: 0px;
 border: 1px solid #994B13;
}
#previous, #next {
 display: block;
 text-indent: -2000px;
}
#previous a {
 padding: 0;
 margin-right: 12px;
 width: 18px;
 height: 18px;
 background: url(images/pagenav-arrows-18.png) no-repeat 0 0;	
}
#previous.disabled a, #previous.disabled a:hover, #previous.disabled a:active {
 background: url(images/pagenav-arrows-18.png) no-repeat 0 0;
 opacity: 0.5;
 border-color: #452204;
 cursor: default;
}
#previous a:hover {
  background-position: 0 -18px;	
}
#previous a:active {
 background-position: 0 -36px;
 border-color: #FF7D19;
}
#next a {
 padding: 0;
 margin-left: 12px;
 width: 18px;
 height: 18px;
 background: url(images/pagenav-arrows-18.png) no-repeat -18px 0;	
}
#next a:hover {
  background-position: -18px -18px;	
}
#next a:active {
  background-position: -18px -36px;
  border-color: #FF7D19;
}
#next.disabled a, #next.disabled a:hover, #next.disabled a:active {
 background: url(images/pagenav-arrows-18.png) no-repeat -18px 0;
 opacity: 0.5;
 border-color: #452204;
 cursor: default;
}
#image-nav a.view-slideshow {
 display: block;
 position: absolute;
 top: 0;
 right: 0;
 width: 18px;
 height: 18px;
 text-indent: -2000px;
 background: url(images/slideshow.png) no-repeat left top;
}
#image-nav a.view-slideshow:hover {
 background-position: left center;
}
#image-nav a.view-slideshow:active {
 background-position: left bottom;
}
/* @end */

/* @group more & back links */
p.back-to-list {
 clear: both;
 width: 630px;
 padding: 0;
 margin: 0;
 text-align: center;
}
p.back-to-list a {
 display: block;
 margin: 0 auto;
 width: 150px;
 height: 18px;
 line-height: 19px;
 font-size: 11px;
 font-weight: bold;
 text-transform: uppercase;
 letter-spacing: 0.07em;
 background: url(images/previous-arrow.png) no-repeat left top;
 border: 1px solid #401f0d;
}
p.back-to-list a:hover {
 border-color: #994b13;
 background-position: left bottom;
}
a.more {
 padding: 0 12px 0 0;
 background: url(images/dot.png) no-repeat 100% 2px;	
 font-size: 11px;
 font-weight: bold;
 text-transform: uppercase;
 letter-spacing: 0.1em;
}
a:hover.more {
 background: url(images/dot.png) no-repeat 100% -14px;	
}
/* @end */

/* @group footer */

#footer p {
 clear: both;
 padding-top: 96px;
 font-size: 12px;
 text-align: center;
 color: #483b37;
}

/* @end */

/* @group carousel */
.carousel {
 position: relative;
 float: left;
 width: 630px;
 height: 500px;
 text-align: center;
 background-color: #16161C;
 overflow: hidden;
}

.carousel_item {

}


/* @end */