/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/


/* Table of Contents
==================================================
    #Base 960 Grid
    #Tablet (Portrait)
    #Mobile (Portrait)
    #Mobile (Landscape)
    #Clearing */



/* #Base 960 Grid
================================================== */
	.desktop				{ display:inline; }
	.mobile					{ display:none;}
	
	.outer					{ display: table; position: static; }
	.inner					{ display: table-cell; vertical-align: middle; position: static; }
	
	.wrap-center			{ position:relative; width: 100%; height:100%; max-width:1400px; margin:0 auto; background-color:#fff; }
	
	/* Header */
	.logo-box				{ float: left; display: inline; padding:30px 50px; }
	.nav-box				{ float: right; display: inline; padding:30px 50px 30px 0; }
	a.expander				{ width:100%; text-align:center; background-color:#000; display:none; color:#FFFFFF; text-decoration:none; }
	
	/* Hero banner */
	.hero-banner     	{ position: relative; margin:5px 0 0 0; z-index:1; padding:0 50px; }
	.hero-banner-height	{ position: relative; height:700px; width:100%; max-width:1400px; }
	.hero-banner-height-work	{ position: relative; height:700px; width:100%; max-width:1400px; }
	.hero-banner-caption-box	{ position: relative; width:100%; padding:0; }
	
	/* Work Body */
	.work-holder { padding:0 50px 30px 50px; }
	.work-item-large { float:left; width:100%; display:block; margin-bottom:20px; }
	.work-item-caption-large { padding: 30px 150px; text-align:center; }
	.work-item-small { float:left; width:50%; display:block; margin-bottom:20px; }
	.work-item-caption-small { padding: 30px 50px; height:100px; text-align:center; }
	.more-work-holder { width:100%; text-align:center; margin-bottom:40px; }
	
	.work-text-holder { width:100%; }
	.work-text-box { padding:70px 350px 70px 40px; }
	
	.service-list { padding:10px 20px; margin:20px 0 0 0; display:inline-block; background-color:#000000; }
	.pagination-holder { padding:60px 0 30px 0; }
	
	/* approach */
	.approach-item-small { float:left; width:50%; display:block; }
	
	.approach-list { padding:10px 20px; margin:0 0 30px 0; display:inline-block; background-color:#000000; }
	
	.info-box { padding:40px 40px 40px 40px; }
	.info-box-2 { padding:40px 40px 40px 40px; }

	/* insta */
	.insta-holder	{ background-color: aqua; }
	.insta-box		{ float: left; display: inline; width: 33%;}
	.insta-margin	{  margin: 20px; }
	
	/* footer */
	.footer-holder			{ position:relative; width: 100%; height:100%; padding:50px 0; max-width:1400px; margin:0 auto; text-align:center; }




/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
    
	
	.hero-banner-caption-box { font-size:100px; line-height:90px; }
	
	.work-item-caption-large,
	.work-item-caption-small { font-size:14px; line-height:16px; height:80px; }
	
	.hero-banner-caption-box-work { font-size:72px; line-height:60px;}
	
	h1.large { font-size:100px; line-height:90px; }

	/* Hero banner */
	.hero-banner-height	{ height:400px; }
	.hero-banner-height-work	{ height:400px; }
	
	/* Work Body */
	.work-text-box { padding:70px 40px 70px 40px; }
	
	/* approach */
	.approach-item-small { width:100%; }
	
	.info-box-2 { padding:0 40px 40px 40px; }
		
	.insta-margin	{  margin: 10px; }

    }


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
		
	body { font-size: 14px; line-height: 18px; }
	
	h1 { font-size: 22px; line-height: 24px; margin-bottom: 14px; text-transform:uppercase; }
	
	h2 { font-size: 18px; line-height: 22px; margin-bottom: 10px; }
	
	p { margin: 0 0 10px 0; }

	.hero-banner-caption-box { font-size:48px; line-height:40px; }
	
	h1.large { font-size:48px; line-height:40px; }

	.work-item-caption-large,
	.work-item-caption-small { font-size:14px; line-height:18px; height:80px; }
	
	.hero-banner-caption-box-work { font-size:52px; line-height:44px;}
	
	.footer-holder p { font-size:14px; line-height:14px; }
	
	img.phone { width: 100%; float:none;}
	

/* Header */
	.logo-box { padding:30px 0; width:100%; text-align:center; }
	.nav-box { padding:0 0 30px 0; width:100%; text-align:center; }

/* Hero banner */
	.hero-banner  { padding:0 30px; }
	.hero-banner-height	{ height:160px; }
	.hero-banner-height-work	{ height:240px; }
		
/* Work Body */
	.work-holder { padding:0 30px; }
	.work-item-caption-large { padding: 20px 20px; }
	.work-item-small { width:100%;}
	.work-item-caption-small { padding: 20px 20px; }
	.work-text-box { padding:40px 20px 40px 20px; }
	
	.approach-text-box { padding:40px 20px 40px 20px; }
	
	
/* approach */
	.approach-item-small { width:100%; }
	
	.info-box { padding:40px 20px 40px 20px; }
	.info-box-2 { padding:0 20px 40px 20px; }
		
	/* insta */
	.insta-box		{ float: left; display: inline; width: 50%;}
	.insta-margin	{  margin: 10px; }
		
    }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {

.hero-banner-caption-box { font-size:48px; line-height:42px; }


    }


/* #Clearing
================================================== */

    /* Self Clearing Goodness */
    .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; }

    /* Use clearfix class on parent to clear nested columns,
    or wrap each row of columns in a <div class="row"> */
    .clearfix:before,
    .clearfix:after,
    .row:before,
    .row:after {
      content: '\0020';
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0; }
    .row:after,
    .clearfix:after {
      clear: both; }
    .row,
    .clearfix {
      zoom: 1; }

    /* You can also use a <br class="clear" /> to clear columns */
    .clear {
      clear: both;
      display: block;
      overflow: hidden;
      visibility: hidden;
      width: 0;
      height: 0;
    }