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


body
{
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 150px;
}

a:link, a:visited
{
  color: #76850e;
  text-decoration: none;
}

a:hover, a:active
{
  color: #131313;
  text-decoration: none;
}

p
{
  font-size: 13px;
  line-height: 16px;
  color: #131313;
  margin: 0 0 10px 0;
}

ul
{
  margin: 0 0 10px 17px;
  padding: 0;
}
  li
  {
    margin: 0 0 3px 0;
    padding: 0;
    color: #131313;
    font-size: 13px;
    line-height: 16px;
    font-family: Arial, Helvetica, sans-serif;
  }

h2
{
  color: #76850e;
  font-size: 18px;
  text-transform: uppercase;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  margin: 0 0 10px 0;
}

h3
{
  color: #76850e;
  font-size: 32px;
  text-transform: uppercase;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  margin: 0 0 10px 0;
}

  #services h3, #clients h3
  {
    font-size: 24px;
  }

h4
{
  color: #76850e;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  margin: 0 0 15px 0;
}

h5
{
  color: #76850e;
  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 300;
  margin: 0 0 10px 0;
}

a
{
  outline: none !important;
}


#wrapper
{
  width: 100%;
}




#page-top
{
  position: absolute;
  top: 0;
}


#header
{
  width: 100%;
  height: 100px;
  background-image: url(images/header-bkg-green.jpg);
  background-repeat: repeat-x;
  background-color: #93a108;
  padding: 0;
  position: fixed;
  z-index: 50;
  top: 0;
}

  #logo
  {
    width: 770px;
    display: block;
    margin: 0 auto;
    position: relative;
    padding: 0 100px;
  }
  
    #logo h1
    {
      display: none;
    }
    
    #logo h6
    {
      display: none;
    }
    

    


/** NAVIGATION **/


		#nav {
			width:100%;
			min-width: 980px;
			background-color: #131313;
			position: fixed;
			top: 0;
			margin-top: 100px;
			z-index: 175;
			Xdisplay: none;
			-webkit-transition: all ease-in-out .5s;
		}
		
		#nav #nav-links-wrapper
		{
  		clear:left;
      float:left;
      list-style:none;
      margin:0;
      padding:0;
      position:relative;
      left:50%;
      text-align:center;
		}
		
		#nav #nav-links-wrapper a
		{
  		display:block;
      float:left;
      list-style:none;
      margin:0;
      padding: 10px 25px;
      position:relative;
      right:50%;
      font-family: 'Lato', sans-serif;
      font-weight: 400;
      line-height: 20px;
		}

		#nav a:link,
		#nav a:hover,
		#nav a:visited{
			text-decoration:none;
			color: #FFFFFF;
			padding:3px;
		}


		#nav .active:link,
		#nav .active:hover,
		#nav .active:visited
		{
			background: #e6e6e6;
			color: #131313;
		}




    
.lt-gray
{
  color: #5e5e5e;
}

.green
{
  color: #76850e;
}

.white
{
  color: #FFFFFF;
}

.logo-text
{
  font-size: 18px;
  font-weight: 400;
  color: #FFFFFF;
  text-transform: uppercase;
}
  .logo-text a:link, .logo-text a:visited, .logo-text a:hover, .logo-text a:active
  {
    text-decoration: none;
    color: #FFFFFF;
  }

  #social-media
  {
    position: absolute;
    top: 38px;
    right: 100px;
    display: block;
    min-width: 55px;
    height: 20px;
  }
    
    #social-media a
    {
      display: block;
      width: 21px;
      height: 21px;
      float: right;
      background-image: url(images/social-media-sprite-2.png);
      background-repeat: no-repeat;
    }
    
    /*reinstate this styling instead of what's above when Midge want's Twitter icon back 
    #social-media a
    {
      display: block;
      width: 21px;
      height: 21px;
      float: left;
      margin-right: 11px;
      background-image: url(images/social-media-sprite-2.png);
      background-repeat: no-repeat;
    }
    */
    
    
      #social-media #twitter a /*remove when Midge want's Twitter icon back*/
      {
        display: none;
      }
    
    
      #social-media #twitter a
      {
        margin: 0;
      }
      
      #social-media #pinterest a:link, #social-media #pinterest a:visited
      {
        background-position: 0 0;
      }
      #social-media #pinterest a:hover, #social-media #pinterest a:active
      {
        background-position: 0 -21px;
      }
      
      #social-media #twitter a:link, #social-media #twitter a:visited
      {
        background-position: -31px 0;
      }
      #social-media #twitter a:hover, #social-media #twitter a:active
      {
        background-position: -31px -21px;
      }
      
      #social-media #linked-in a:link, #social-media #linked-in a:visited
      {
        background-position: -62px 0;
      }
      #social-media #linked-in a:hover, #social-media #linked-in a:active
      {
        background-position: -62px -21px;
      }

.pg
{
  padding: 50px 100px;
  margin: 0 auto;
  width: 780px;
  display: block;
  clear: both;
  position: relative;
  background-color: #FFFFFF;
}

/*
.showing
{
	margin-top: 100px !important;
}
*/

.pg-end
{
	clear: both;
}
  
.pg.active
{
	background-color: green;
}  

#home-page
{
	Xmargin-top: -50px;
}

  .tile
  {
    display: block;
    width: 260px;
    height: 260px;
    float: left;
    position: relative;
  }
  
  #services.tile, #clients.tile, #contact.tile
  {
    width: 225px;
    height: 225px;
  }
  
  #services.tile
  {
    background-color: #f8f8f8;
  }
    #services.tile:hover, #clients.tile:hover
    {
      background-color: #ededed;
    }
    
    #contact.tile:hover
    {
      background-color: #93A108;
    }
    
  #clients.tile
    {
      background-color: #fcfcfc;
    }

  #services, #clients, #contact.tile
  {
    padding: 35px 0 0 35px;
  }
  
  #services.tile a, #clients.tile a, #contact.tile a.scroll, #events.tile a, #corporate-interiors.tile a, #photo-styling.tile a, #visual-standards.tile a, #retail-stores.tile a, #trade-shows.tile a
  {
    width: 260px;
    height: 260px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  
  #home-page .tile a
  {
    background-image: url("about:blank"); /*IE 8 & 9 hack */
  }
  
  #events.tile a
  {
    z-index: 20;
  }
  
  #corporate-interiors.tile a
  {
    z-index: 21;
  }
  
  #photo-styling.tile a
  {
    z-index: 22;
  }
  
  #visual-standards.tile a
  {
    z-index: 23;
  }
  
  #retail-stores.tile a
  {
    z-index: 24;
  }
  
  #trade-shows.tile a
  {
    z-index: 25;
  }
  
  
  
  
  a:link #services, a:visited #services
  {
    background-color: #f8f8f8;
  }
  
  a:hover #services, a:active #services
  {
    background-color: #ededed;
  }
  .row-2, .row-3
  {
    clear: both;
  }
  
    #clients ul
    {
      margin: 0;
    }
      #clients ul li
      {
        margin: 0 0 3px 0;
        list-style-type: none;
        pointer-events: none;
      }
      
  a:link #clients, a:visited #clients
  {
    background-color: #fcfcfc;
  }
  
  a:hover #clients, a:active #clients
  {
    background-color: #ededed;
  }
  
  #contact
  {
    background-color: #76850E;
  }
  
    a:link #contact, a:visited #contact
    {
      background-color: #76850e;
    }
    
    a:hover #contact, a:visited #active
    {
      background-color: #76850E;
    }
    
    #contact h2
    {
      color: #FFFFFF;
      font-size: 24px;
      margin: 0 0 3px 0;
    }
    
    #contact p
    {
      margin: 0 0 3px 0;
    }
    
    #contact table
    {
      margin-top: 20px;
    }
    
    #contact table tr td
    {
      font-family: 'Lato';
      font-size: 13px;
      line-height: 16px;
      color: #FFFFFF;
      font-weight: 300;
      text-transform: uppercase;
      vertical-align: top;
    }
    
    td.text-url
    {
      padding-top: 3px;
    }
    
    #contact table tr td a:link, #contact table tr td a:visited, #contact table tr td a:hover, #contact table tr td a:active
    {
      text-decoration: none;
      color: #FFFFFF;
    }
    
    #contact table tr td p.pinterest-2,
    #contact table tr td p.twitter-2, 
    #contact table tr td p.linked-in-2
    {
      display: block;
      width: 21px;
      height: 21px;
      background-image: url(images/social-media-sprite-2.png);
      background-repeat: no-repeat;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    
    #contact table tr td p.pinterest-2
    {
      background-position: 0 0;
    }
    
    #contact table tr td p.twitter-2
    {
      background-position: -31px 0;
    }
    
    #contact table tr td p.linked-in-2
    {
      background-position: -62px 0;
    }
    
      
  
#services-page
{

}

.services-row
{
  clear:both;
  padding: 12px 0;
  border-bottom: 1px solid #efefef;
  display: block;
  height: 80px;
}
  .services-tile
  {
    width: 260px;
    height: 80px;
    float: left;
  }
  
  .services-row.last
  {
    border-bottom: none;
  }


  .jump-to-portfolio
  {
    text-align: right;
    width: auto;
    float: right;
    display: block;
  }
  
  .jump-to-portfolio a:link, .jump-to-portfolio a:visited
  {
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    color: #76850e;
    text-transform: uppercase;
    font-size: 16px;
    background-image: url(images/arrows.jpg);
    background-repeat: no-repeat;
    background-position: 212px 3px;
    padding-right: 25px;
    margin-top: 20px;
  }
  
  .jump-to-portfolio a:hover, .jump-to-portfolio a:active
  {
    color: #131313;
    /* background-position: 212px -34px; */
  }
  
  
  


  #clients-page .left-column
  {
    padding-top: 20px;
    padding-right: 15px;
    display: block;
    width: 245px;
    float: left;
    min-height: 500px;
  }
  
  #clients-page .clients-tile
  {
    display: block;
    width: 128px;
    height: 128px;
    float: left;
  }
  
  
  
  
  
#portfolio-page
{

}
  #clients-page .jump-to-portfolio
  {
    margin-top: 50px;
  }
  
  
  
  
  




/* PORTFOLIO PAGE */


#portfolio-nav
{
  width: 100%;
  display: block;
  margin: 25px auto 0 auto;
  height: 31px;
  border-bottom: 1px solid #202020;
}

  table#filterOptions
  {
    margin: 0;
    padding: 0;
    cursor: pointer;
    table-layout: auto;
  }
  
  table#filterOptions, table#filterOptions tbody, table#filterOptions tr
  {
    width: 780px !important;
  }
    
    table#filterOptions td
    {
      margin: 0px;
      text-transform: uppercase;
      font-family: 'Lato', sans-serif;
      font-weight: 400;
      font-size: 13px;
      height: 40px;
      text-align: center;
      vertical-align: top;
    }
    

    
      table#filterOptions td a:link, table#filterOptions td a:visited
      {
        text-decoration: none;
        color: #202020;
      }
      
      table#filterOptions td:hover, table#filterOptions td:active, 
      table#filterOptions td.active:link, table#filterOptions td.active:visited 
      {
        color: #76850E;
      }
      
      table#filterOptions td.active
      {
        background-image: url(images/portfolio-nav.jpg);
        background-repeat: no-repeat;
        background-position: center -2px;
        color: #FFFFFF;
      }
      
      
      table#filterOptions td#show-events
      {
      }
      
      table#filterOptions td#show-corporate
      {
        
      }
      
      table#filterOptions td#show-photo
      {
        
      }
      
      table#filterOptions td#show-visual
      {
        
      }
      
      table#filterOptions td#show-retail
      {
        
      }
      
      table#filterOptions td#show-trade
      {
        
      }
      
ul.gallery
{
  margin: 30px 0 0 0;
  padding: 0;
}
  ul.gallery li.item
  {
    list-style-type: none;
    width: 195px;
    height: 195px;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    background-color: #000000;
    position: relative;
  }
  
  ul.gallery li.item img:hover
  {
    opacity:0.3;
    filter:alpha(opacity=30); /* For IE8 and earlier */
  }
  
  ul.gallery li.item
  {
    
  }







/* FLIP CSS */
div.flip
{
  position:relative;
  width: 260px; /* Set default width of flip */
  height: 260px; /* Set default height */
  -webkit-perspective: 600px; /* larger the value, the less pronounced the 3D effect */
  -moz-perspective: 600px;
  -o-perspective: 600px;
  perspective: 600px;
}


div.flip div.rotate
{
  width: 100%;
  height: 100%;
  pointer-events: none;
  -moz-transform-style: preserve-3d; /* Specify all child elements inside this DIV maintain the same perspective */
  -webkit-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -moz-transition: all 0.6s ease-in-out 0.3s; /* final 0.3s specifies delay before effect kicks in */
  -webkit-transition: all 0.6s ease-in-out 0.3s;
  -o-transition: all 0.6s ease-in-out 0.3s;
  transition: all 0.6s ease-in-out 0.3s;
}

div.flip div.rotate > *
{ /* Target all children elements */
  position:absolute;
  width: 100%;
  height: 100%;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

div.rotate.x *:nth-child(2)
{ /* X Axis rotate specific CSS. Rotate 2nd child DIV 180deg in the X axis */
  -moz-transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

div.rotate.y *:nth-child(2)
{ /* Y Axis rotate specific CSS. Rotate 2nd child DIV 180deg in the Y axis so it mirrors the first */
  -moz-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}


div.flip:hover > div.rotate.y, div.flip.flipped > div.rotate.y
{ /* Y Axis rotate specific CSS. Rotate div.rotate.y when mouse rolls over container */
  -moz-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg); 
}

div.flip:hover > div.rotate.y
{
  -moz-box-shadow: inset 0 0 5px #000000;
  -webkit-box-shadow: inset 0 0 5px #000000;
  box-shadow: inner 0 0 5px #000000;
  transition: all 0.6s ease-in-out 0s; /* Makes hovering more instaneous */
}


/* BIO SECTION */

#bio-page h3
{
  margin-bottom: 20px;
}

#midge-photo
{
  display: block;
  float: right;
  width: 200px;
  height: 200px;
  margin-left: 50px;
  margin-bottom: 20px;
  border: 1px solid #131313;
  background-color: #CCCCCC;
}

#bio-page h4
{
  margin-top: 30px;
}

#midge-photo h4
{
  display: block;
  text-align: center;
  color: #131313;
  margin-top: 85px;
}




/* CONTACT SECTION */

#contact-page h3
{
  margin-bottom: 20px;
}

#contact-page .email a:link, #contact-page .email a:visited
{
  color: #131313;
  text-decoration: none;
}

#contact-page .email a:hover, #contact-page .email a:active
{
  color: #76850e;
}


#contact-page table
    {
      margin-top: 20px;
    }
    
    #contact-page table tr td
    {
      font-family: 'Lato';
      font-size: 13px;
      line-height: 16px;
      color: #76850e;
      font-weight: 400;
      text-transform: uppercase;
      vertical-align: middle;
      height: 30px;
    }
    
    #contact-page table tr td p
    {
      margin: 0 !important;
    }
    
    #contact-page td.text-url
    {
      padding: 0 0 0 10px;
    }
    
    #contact-page table tr td a:link,
    #contact-page table tr td a:visited,
    {
      text-decoration: none;
      color: #76850e;
    }
    
    #contact-page table tr td a:hover,
    #contact-page table tr td a:active
    {
      text-decoration: none;
      color: #131313;
    }
    
    #contact-page table tr td p.pinterest-2,
    #contact-page table tr td p.twitter-2, 
    #contact-page table tr td p.linked-in-2
    {
      display: block;
      width: 21px;
      height: 21px;
      background-image: url(images/social-media-sprite-2.png);
      background-repeat: no-repeat;
      margin-right: 10px;
      margin-bottom: 10px;
    }
    
    #contact-page table tr td p.pinterest-2
    {
      background-position: 0 0;
    }
    
    #contact-page table tr td p.twitter-2
    {
      background-position: -31px 0;
    }
    
    #contact-page table tr td p.linked-in-2
    {
      background-position: -62px 0;
    }
    
    
#contact-info-block
{
  display: block;
  float: left;
  width: 310px;
  height: 300px;
}

#contact-page h4
{
  color: #131313;
  text-transform: uppercase;
  margin: 0 0 5px 0;
  font-size: 16px;
}

#contact-page h5
{
  font-size: 15px;
  margin: 0 0 15px 0;
  padding-bottom: 15px;
  border-bottom: 1px solid #CCCCCC;
  font-weight: 400;
}
  
#contact-portfolio-blocks
{
  display: block;
  width: 384px;
  float: right;
}

  #contact-portfolio-blocks table
  {
    margin: 0;
  }
  
  #contact-portfolio-blocks table td p 
  {
    text-align: center;
    margin: 0;
  }
  
  #contact-portfolio-blocks table td p a:link,
  #contact-portfolio-blocks table td p a:visited,
  #contact-portfolio-blocks table td p a:hover,
  #contact-portfolio-blocks table td p a:active
  {
    display: table-cell;
    width: 128px;
    height: 128px;
    vertical-align: middle;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 300;
    line-height: 115%;
  }
  
  

  #contact-portfolio-blocks #block-2 p a:link,
  #contact-portfolio-blocks #block-2 p a:visited,
  #contact-portfolio-blocks #block-4 p a:link,
  #contact-portfolio-blocks #block-4 p a:visited,
  #contact-portfolio-blocks #block-6 p a:link,
  #contact-portfolio-blocks #block-6 p a:visited
  {
    background-color: #93A108;
  }
  
  #contact-portfolio-blocks #block-2 p a:hover,
  #contact-portfolio-blocks #block-2 p a:active,
  #contact-portfolio-blocks #block-4 p a:hover,
  #contact-portfolio-blocks #block-4 p a:active,
  #contact-portfolio-blocks #block-6 p a:hover,
  #contact-portfolio-blocks #block-6 p a:active
  {
    background-color: #76850e;
  }
  
  #contact-portfolio-blocks #block-1 p a:link,
  #contact-portfolio-blocks #block-1 p a:visited,
  #contact-portfolio-blocks #block-3 p a:link,
  #contact-portfolio-blocks #block-3 p a:visited,
  #contact-portfolio-blocks #block-5 p a:link,
  #contact-portfolio-blocks #block-5 p a:visited
  {
    background-color: #222222;
  }
  
  #contact-portfolio-blocks #block-1 p a:hover,
  #contact-portfolio-blocks #block-1 p a:active,
  #contact-portfolio-blocks #block-3 p a:hover,
  #contact-portfolio-blocks #block-3 p a:active,
  #contact-portfolio-blocks #block-5 p a:hover,
  #contact-portfolio-blocks #block-5 p a:active
  {
    background-color: #000000;
  }
  
  .yes
  {
	  background: red;
  }