/**** Base styles ****/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, section {
  display: block;
}

body {
	background: #FFF url(../img/graphics/bg.png) repeat scroll;
  	padding: 20px;
	font-family: 'PT Sans Narrow', Arial Narrow lighter, sans-serif;
	font-style: normal;
	font-weight: 400;
	font-size: 15px;
	text-transform: none;
	text-align:justify;
	text-decoration: none;
	letter-spacing: 0em;
	word-spacing: 0em;
	line-height: 1.5;
	color: #000;
}

h3, p, ul, ol, pre, dl {
  margin-bottom: 1.0em;
}



h1 {
	font-family: 'Open Sans Condensed', Arial Narrow lighter, sans-serif;
	font-size: 40px;
 	line-height: 1.1em;
	letter-spacing: -0.05em;

}

h2 {
	font-family: 'PT Sans Narrow', Arial Narrow lighter, sans-serif;
  display: block;
  margin-top:22px;
  margin-bottom:28px;
  padding: 11px 24px;
  background-color: #e8e8e8;
  color: #000;
  font-weight: bold;
  
}

h3 {
	font-family: 'PT Sans Narrow', Arial Narrow lighter, sans-serif;
  display: block;
  width:100px;
  padding: 11px 24px;
  background-color: #e8e8e8;
  color: #000;
  text-align:center;
  font-weight: bold;
  margin-bottom:0px;
  
}


h4 {
	font-family: 'PT Sans Narrow', Arial Narrow lighter, sans-serif;
  color: #000;
  text-align:left;
  font-weight: bold;
  
}

.marginh1 {margin-bottom:17px;}

ul, ol {
  margin-left: 1.5em;
}

a,
a code {
  color: #000;
  text-decoration: none;
}

a:hover,
a:hover code { 
  color: #000; 
}

a:active,
a:active code {
  color: #000;
}

a img { border: none; }

em { font-style: italic; }
strong { font-weight: bold; }

blockquote {
  padding-left: 1.0em;
  margin-left: 1.0em;
  border-left: 1px solid #333;
  font-style: italic;
}

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}
/****LOGO****/

#logo {
	margin-bottom:22px;

}

/***Navigation***/

.anchor {padding-top:49px; margin-top:-49px;}
#navspacer{ position:absolute; margin-left:-443px; left:50%; height:auto; width:900px; position:absolute; margin-top:157px; overflow:visible; z-index: 10000;}
#sticky {
  background-color: #e8e8e8;  
  width: 900px;
  height:44px;
  border-bottom:5px solid #FFF;

  }
#sticky.stick {
 
  position: fixed;
  top: 0px;
  z-index: 10000;
  }
  
 #nav {
  }

#nav ul {
  margin: 0;
  list-style: none;
}


#nav li {
  float: left;
}

#nav li a {
  display: block;
  height:22px;
  padding: 11px 24px;
  background-color: #e8e8e8;
  color: #000;
  font-weight: bold;
 
}

#nav li a:hover {
  background-color: #d7d7d7;
}

#nav li a:active {
  background-color: #ff0000;
 }

#nav li a {

}

#nav li:first-child a {
  border-left: none;
}

#nav li:last-child a {
}

#nav li a.selected {
  background-color: #ff0000;
  text-shadow: none;
  color: white;
}

.pagetopnav { text-align:right; float:right; right:0px; position:absolute;}
  
/***INTRO***/


#intro {margin-top:28px; padding-bottom:16px; width:900px;}

/****Our process***/

#ourapproach { height:24px; width: 900px; background:url(../img/dots.png) no-repeat bottom left; margin-top:-24px; padding-top:0px;}
#ourprocess {
	background:url(../img/dots.png) no-repeat bottom left;
	margin-top:25px;
	height:635px;
}

#tea { position:static; width:286px; float:left; margin-top:27px; padding-right:21px; }
#lightbulb {position:static; width:286px; float:left; margin-top:50px; padding-right:21px}
#robot {position:static; width:286px; float:left; margin-top:40px;}


/***who we are***/

#about {margin-top:17px; height:291px; background:url(../img/dots.png) no-repeat bottom left; margin-bottom:25px;}
#who {position:static; width:300px; padding-right:24px; float:left; padding-top:8px; height:100%;}
#what{position:static; width:552px; padding-left:24px; float:left; padding-top:8px;}
#whatleft{width:173px; position:static; float:left;}
#whatright{width:379px; position:static; float:left; padding-top:5px;}

/***contact****/
#contactdots {width:900px; height:24px; background:url(../img/dots.png) no-repeat top left; margin-bottom:6px;}
#contact { width:792px; margin-top:0px; padding:68px 54px 0px 54px; height:470px; background: url(../img/footerbg.png) top left repeat-x #e8e8e8;}


#contact-area {width: 450px; float:left; position:static;}
#contact-iframe {width: 450px; margin-top:30px; float:left; position:static; background: #e8e8e8;}
#contact-postbox {width: 143px; margin-top: 53px; float:left; position:static; padding-left:110px;}



/***TILE CONTENTS***/
.tile {z-index:999; position:absolute;}
.ztile {z-index:1000;}
.ipadtop { position: absolute;  margin: 0; top:93px; left:109px;}
.ipadizzy { position: absolute;  margin: 0; top:460px; left:109px;}
.bottom {padding-bottom:54px;}
.projectsizzytours { position:absolute; height:3850px; width:562px; padding: 44px 54px;}
.projectscecily { position:absolute; height:859px; width:562px; padding: 44px 54px;}
.projectscoh { position:absolute; height:859px; width:562px; padding: 44px 54px;}
.projectsyands { position:absolute; height:1629px; width:562px; padding: 44px 54px;}
.projectsfarma { position:absolute; height:1849px; width:562px; padding: 44px 54px;}
.projectslecca { position:absolute; height:1167px; width:562px; padding: 44px 54px;}
.projectspromo { position:absolute; height:2156px; width:562px; padding: 44px 54px;}


.content465 { position:absolute; padding-top:520px; width:508px; height:240px; }
.link { font-weight:700;}
.date {font-size:12px; color:#666; padding-top:24px;}


.ipadfix * {
  position: absolute;
  margin: 0;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 1s;
     -moz-transition-duration: 1s;
          transition-duration: 1s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}



/**** Isotope styles ****/

/* required for containers to inherit vertical size from window */
html,


#container {
  margin-bottom: 20px;
  margin-top:20px;
  
}

#content {
	margin-top:1px;
}
/**this is to resize the small squares -james **/
.element {
	width: 210px;
	height: 199px;
	margin-bottom: 21px;
	float: left;
	overflow: hidden;
	background: #888;
	color: #222;
}


.element.branding          { background: #dcdcdc; }
.element.document  { background: #ededed; }
.element.web      { background: #f3f3f3;}
.element.print        { background: #e8e8e8;}




.variable-sizes .element.width2 { width: 230px; }


.variable-sizes .element.height2 { height: 230px; }

.variable-sizes .element.width2.height2 {
  font-size: 2.0em;
}
/**these are for the large squares**/
.element.large,
.variable-sizes .element.large,
.variable-sizes .element.large.width2.height2 {
  width: 670px;
  z-index: 100;
}

/**izzytours**/
.izzytoursheight.large,
.variable-sizes .izzytoursheight.large,
.variable-sizes .izzytoursheight.large.width2.height2 {
	height:3850px;
	
}

/**cecily tattersall**/

.cecilytattersallheight.large,
.variable-sizes .cecilytattersallheight.large,
.variable-sizes .cecilytattersallheight.large.width2.height2 {
	height:859px;
	
}

/**coh**/

.cohheight.large,
.variable-sizes .cohheight.large,
.variable-sizes .cohheight.large.width2.height2 {
	height:859px;
	
}

/**yands**/

.yandsheight.large,
.variable-sizes .yandsheight.large,
.variable-sizes .yandsheight.large.width2.height2 {
	height:1629px;
	
}

/**bananafarma**/

.farmaheight.large,
.variable-sizes .farmaheight.large,
.variable-sizes .farmaheight.large.width2.height2 {
	height:1849px;
	
}

/**leccacafe**/

.leccaheight.large,
.variable-sizes .leccaheight.large,
.variable-sizes .leccaheight.large.width2.height2 {
	height:1167px;
	
}

/**promo**/

.promoheight.large,
.variable-sizes .promoheight.large,
.variable-sizes .promoheight.large.width2.height2 {
	height:2156px;
	
}


.clickable .element:hover {
  cursor: pointer;
  background:#CCC;
  
}

.clickable .element:hover h3 {
  color:#333333;
}

.clickable .element:hover h2 {
  color: white;
}

/**** Filtering styles ****/

#isotopecontainer {
	position:absolute;
	width:920px;
	left:50%;
	margin-left:-443px;
	
	}

#options {
  padding-top:16px;
  }

#options ul {
  margin: 0;
  list-style: none;
}


#options li {
  float: left;
  margin-bottom: 1px;
}

#options li a {
  display: block;
  height:23px;
  padding: 11px 24px;
  background-color: #e8e8e8;
  color: #000;
  font-weight: bold;
 
}

#options li a:hover {
  background-color: #d7d7d7;
}

#options li a:active {
  background-color: #ff0000;
 }

#options li a {

}

#options li:first-child a {
  border-left: none;
}

#options li:last-child a {
}

#options li a.selected {
  background-color: #ff0000;
  text-shadow: none;
  color: white;
}

/* Combination filter options*/






/* The Magnificent Clearfix: nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }