/*
* 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
================================================== */

/* Basic */
	.menu-overlay { display:none; position:fixed; top:0; left:0; height:100%; width:100%; background-color:#70CDE3; z-index:20; }
	.nav-out	{width:100%; height:100%; }
	.navi	{ height:100%; }
	
	.fadeWhite	{ position:absolute; display:inline; width:100%; height:100%; top:0; left:0; background-color:#FFFFFF; }
	.fadeInBlock,
	.fadeInFirst,
	.fadeInFirstHome { opacity:0; padding-top:100px; }
	
	.desktop { display:inline; }
	.mobile { display:none; }
	
	.text-right	{ text-align:right; }
	.text-left	{ text-align:left; }
	.text-center { text-align:center; }
	
	.magrin-40	{ margin:40px; }
	
	.padding-100	{  padding: 100px 0; }
	.padding-120	{  padding: 120px 0; }
	.padding-40	{  padding: 40px 0; }
	.padding-top-40	{ padding:40px 0 0 0; }
	.padding-top-60	{ padding:60px 0 0 0; }
	
	.outer					{ display: table; position: static; }
	.inner					{ display: table-cell; vertical-align: middle; position: static; }

	.wrap-center			{ position:relative; width: 100%; height:100%; margin:0 auto; }
	
	.border-bottom			{ border-bottom:1px solid #d1d3d4; }
	.border-top				{  border-top:1px solid #CCC; }
	.border-bottom-dark			{ border-bottom:1px solid #5a5a5a; }
	
	.page-top-spacer	{ position:relative; width:100%; height:120px; }
	.page-40-spacer		{ position:relative; width:100%; height:40px; }
	
/* Windows */

	.full-window 	        { position: relative; height:100%; width: 100%; padding: 0; }
	.full-window-overflow 	{ position: relative; height:100%; width: 100%; padding: 0; }
	.auto-window 	        { position: relative; width: 100%; }
	.logo-window			{ position:absolute; display:inline; width:100%; height:100%; top:0; left:0; z-index:10; pointer-events:none; }
	.window-open			{ position:relative; height:100%; width:100%; }
	.one-forth				{ position:relative; display:inline; float:left; width:50%; height:50%; }
	
	.window-blk				{ background:#000; }
	
/* Quote */
	
	.bottom-quote			{ position:relative; width:100%; padding:60px 0; background:#fff url(/assets/img/black-line.png) repeat-x center center; }
	
/* Headers */
	
	.large-header			{ position:relative; width:100%; padding:60px 0; }
	.large-header-wht,
	.small-header-wht		{  background:#fff url(/assets/img/black-line.png) repeat-x center center; }
	.large-header-blk		{  background:#000 url(/assets/img/white-line.png) repeat-x center center; }
	.small-header			{ position:relative; width:100%; padding:0; margin:0 0 20px 0; }
	
/* Content */	
	.three-up ul    { margin: 0; padding: 0; }
	.three-up li    { display:inline-block; margin: 0 25px; padding: 0; width:260px; vertical-align:top; }
	.four-up ul     { margin: 0; padding: 0; }
	.four-up li     { display:inline-block; margin: 10px 10px; padding: 0; width:220px; vertical-align:top; }
	
	.lets-talk		{ position: relative; width: 620px; margin: 0 auto; padding: 0; }
	
	.page-holder	{ position:relative; width:940px; margin:0 auto; padding:0; }
	.page-section	{ padding:20px 0; }
	
	.page-header-copy	{ position:relative; width:680px; margin: 0 auto; padding:20px; font-size: 18px; line-height: 1.5;}
	.page-contact-header	{ position:relative; width:720px; margin:0 auto; padding:20px; }
	.page-contact-header p {font-size: 18px; line-height: 1.5;}
	.home-finish {background :#70CDE3;}
	.home-finish p {font-size: 20px; line-height: 1.7;}
	
	.quote	{ position:relative; width:680px; margin:0 auto 20px auto; padding:100px 20px 60px 20px; }
	.services-enlisted 	{ position:relative; width:680px; margin:0 auto; padding:50px 20px 40px 20px; }
	
	.date-left	{ float: left; display: inline; width:150px; }
	.link-right { float: left; display: inline; }
	
	.subscribe-checkbox { float:left; width:20px; margin-right:30px; }
	.subscribe-copy	{ float:left;  width:670px; }
	
	
/* Clients */
	.clients-holder	{ position:relative; width:920px; margin:0 auto; }
	.client-box		{ position:relative; float: left; display: inline; width:284px; height:216px; margin:10px; border:1px solid #d1d3d4; } 


/* Blog  */
	.blog-search	{ position:relative; width:670px; margin:0 auto; }
	.blog-left		{ float: left; display: inline; width:600px; padding:0 0 0 30px; margin-right:30px; }
	.blog-right		{ float: left; display: inline; width:280px; height:280px; }
	.blog-height	{ height:280px; }
	.blog-body		{ position:relative; width:720px; margin:30px auto; }
	.blog-tags		{ margin-top:20px; }
	
	.author-holder	{ position:relative; width:680px; margin:0 auto 40px auto; padding:20px; border-top:1px solid #CCC; border-bottom:1px solid #CCC; }
	
	.related-section	{ padding:20px 0 60px 0; }
	.related-holder		{ position:relative; width:680px; margin:0 auto; padding:20px 0; border-bottom:1px solid #CCC; }

	
/* Pagination  */
	.pagination-pad								{ padding:40px 0 40px 0; }
	.pagination-box								{ width:33.3%;  }
	.pagonation-left							{ float:left; }
	.pagonation-right							{ float:right; }
	.paginagtion-numbers						{ padding-top:5px; }
	
	
/* Bio Pop-up */
	.bio-overlay	{ display:none; position:fixed; top:0; left:0; height:100%; width:100%; background-color:#70CDE3; z-index:30; overflow-y: auto; }
	.bio-window     { position: relative; width: 950px; margin: 40px auto; padding: 0; background-color:#FFFFFF; }
	.bio-photo-col   { float: left; display: inline; margin:40px; width:220px; }
	.bio-text-col   { float: left; display: inline; margin:40px 0 40px; width:600px; }
	.close-button-hold { display:none; }
   
	
/* footer */
	.footer-window 	        { position: relative; width: 100%; padding: 80px 0; background-color:#000; }
	.footer-address			{ position:relative; display:inline; float:left; width:50%; height:220px; }
	.footeraddress-margin	{ margin-left:60px; }
	.footer-social-wrap			{ position:relative; display:inline; float:left; width:50%; height:220px; }
	.footer-social          {float: right; margin-right: 60px;}
	
	.newsletter				{ margin-top:30px; }
	

    .container                                  { position: relative; width: 960px; margin: 0 auto; padding: 0; }
    .container .column,
    .container .columns                         { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
    .row                                        { margin-bottom: 20px; }

    /* Nested Column Classes */
    .column.alpha, .columns.alpha               { margin-left: 0; }
    .column.omega, .columns.omega               { margin-right: 0; }

    /* Base Grid */
    .container .one.column,
    .container .one.columns                     { width: 40px;  }
    .container .two.columns                     { width: 100px; }
    .container .three.columns                   { width: 160px; }
    .container .four.columns                    { width: 220px; }
    .container .five.columns                    { width: 280px; }
    .container .six.columns                     { width: 340px; }
    .container .seven.columns                   { width: 400px; }
    .container .eight.columns                   { width: 460px; }
    .container .nine.columns                    { width: 520px; }
    .container .ten.columns                     { width: 580px; }
    .container .eleven.columns                  { width: 640px; }
    .container .twelve.columns                  { width: 700px; }
    .container .thirteen.columns                { width: 760px; }
    .container .fourteen.columns                { width: 820px; }
    .container .fifteen.columns                 { width: 880px; }
    .container .sixteen.columns                 { width: 940px; }

    .container .one-third.column                { width: 300px; }
    .container .two-thirds.column               { width: 620px; }



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

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

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .container                                  { width: 768px; }
        .container .column,
        .container .columns                         { margin-left: 10px; margin-right: 10px;  }
        .column.alpha, .columns.alpha               { margin-left: 0; margin-right: 10px; }
        .column.omega, .columns.omega               { margin-right: 0; margin-left: 10px; }
        .alpha.omega                                { margin-left: 0; margin-right: 0; }

        .container .one.column,
        .container .one.columns                     { width: 28px; }
        .container .two.columns                     { width: 76px; }
        .container .three.columns                   { width: 124px; }
        .container .four.columns                    { width: 172px; }
        .container .five.columns                    { width: 220px; }
        .container .six.columns                     { width: 268px; }
        .container .seven.columns                   { width: 316px; }
        .container .eight.columns                   { width: 364px; }
        .container .nine.columns                    { width: 412px; }
        .container .ten.columns                     { width: 460px; }
        .container .eleven.columns                  { width: 508px; }
        .container .twelve.columns                  { width: 556px; }
        .container .thirteen.columns                { width: 604px; }
        .container .fourteen.columns                { width: 652px; }
        .container .fifteen.columns                 { width: 700px; }
        .container .sixteen.columns                 { width: 748px; }

        .container .one-third.column                { width: 236px; }
        .container .two-thirds.column               { width: 492px; }
		
		
/* #Typography
================================================== */	
	h2 { font-size: 28px; line-height: 32px; }
		
	.window-open h1 { font-size:80px; line-height:65px; }
	.window-open h2 { font-size:32px; line-height:33px;  }
	
	.large-header h1 { font-size:60px; line-height:60px; }
	
/* #Button Nav
================================================== */

	.button-nav li a  {  height: 50px; width:160px; font-size: 18px; line-height: 50px; margin:28px 20px; }
	

/* Windows */

	.full-window-overflow 	{ height:auto; padding:100px 0; }
	

/* Content */
	.page-holder	{ position:relative; width:760px; margin:0 auto; }
	
	
/* Clients */
	.clients-holder	{ width:690px; }
	.client-box		{ width:208px; height:158px }
	
	
	
/* Blog  */
	.blog-left		{ float: left; display: inline; width:420px; }


/* Bio Pop-up */
	.bio-window     { width: 700px; }
	.bio-photo-col   { margin:20px; width:160px; }
	.bio-text-col   { margin:20px 0 20px; width:480px;}
	
	.close { top:10px; right:10px; }
	
	
/* footer */
	.footer-address			{ width:100%; text-align:center; }
	.footeraddress-margin	{ margin-left:0; }
	.footer-social-wrap, .footer-social			{  width:100%; }
	.footer-social {float: none; margin-right: 0;}
	.copyright				{ width:100%; text-align:center; }


    }


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

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

    @media only screen and (max-width: 767px) {
        .container { width: 300px; }
        .container .columns,
        .container .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column  { width: 300px; }
		
		
/* #Typography
================================================== */	
	h1 { font-size: 28px; line-height: 30px; }
	h2 { font-size: 22px; line-height: 28px; }
	
	
	
	.small-header h1 { font-size:32px; line-height:32px;  }
	
	.quote h2 { font-size:22px; line-height:24px; }
	
	.window-open h1.email-link	{ font-size:24px; letter-spacing:0; }
	
	.window-open h1 { font-size:52px; line-height:50px; margin-bottom:20px; }
	.window-open h2 { font-size:32px; line-height:33px;  }
	.large-header h1 { font-size:48px; line-height:52px;  }
		
		
/* Basic */
	.desktop { display:none; }
	.mobile { display:inline; }
	
	.home-button { position:absolute; top:15px; left:10px; width:200px; height:55px; }
		
/* Windows */

	.logo-window			{ display:none; }
	.full-window-overflow 	{ height:auto; padding:0 0 80px 0; }
	.one-forth				{ width:100%; height:50%; }
	
	
/* Headers */
	
	.large-header			{ position:relative; width:100%; padding:40px 0 20px 0; }
	
	
/* Content */
	.lets-talk		{ width: 100%; }
	
	.page-holder	{ width:300px; margin:0 auto; }
	
	.page-header-copy	{ position:relative; width:280px; }
	
	.quote	{ width:260px; }
	
	.date-left	{ width:100%; }
	
	.page-contact-header	{ width:280px; }
	
	.subscribe-checkbox { float:left; width:20px; margin-right:10px; }
	.subscribe-copy	{ float:left;  width:270px; }
	
	
/* Clients */
	.clients-holder	{ width:300px; }
	.client-box		{ width:278px; height:211px; }
	
	
/* Blog  */
	.blog-search	{ position:relative; width:300px; margin:0 auto; }
	.blog-left		{ float: left; display: inline; width:300px;  margin-right:0; padding:0 0 0 0; }
	.blog-right		{ display:none; }
	.blog-height	{ height:auto; }
	.blog-body		{ width:300px; }
	
	.author-holder	{ width:300px; padding:20px 0; }
	.related-holder	{ width:260px; }
	
/* #Search  */
	input[type="text"].search { width: 220px; }
		
	input[type="submit"].search-btn { margin-left:0; width:50px; padding:0; }
	
	
/* Bio Pop-up */
	.bio-window     { width: 260px; margin: 20px auto; }
	.bio-photo-col   { margin:20px; width:160px; }
	.bio-text-col   { margin:20px; width:220px;}
	
	.close { top:20px; right:20px; }
	
	.bio-text-col h1 { font-size:18px; line-height:32px; letter-spacing:0; margin-bottom:10px; }
	

	
/* #Navigation
================================================== */
	.menu-button, a.menu-button:visited { position:absolute; top:30px; right:0; font-size:22px; line-height:40px; width:80px; height:40px; }
	
	.navi ul   { margin: 0; padding:0 0 0 0; list-style:none; }
	
	.navi li a { font-size:40px; display:inline; line-height: 45px; }
	
	
/* #Button Nav
================================================== */
	#menu-home-buttons li,
	.button-nav li    { display:block; margin: 0; padding: 0; }
	#menu-home-buttons li a,
	.button-nav li a  {  height: 50px; width:160px; font-size: 18px; line-height: 50px; margin:10px 20px; }
	

			

/* footer */
	.footer-address			{ width:100%; text-align:center; }
	.footeraddress-margin	{ margin-left:0; }
	.footer-social-wrap, .footer-social			{  width:100%; }
	.footer-social {float: none; margin-right: 0;}
	.copyright				{ width:100%; text-align:center; }
	

/* #Newsletter Footer
================================================== */
	input[type="text"].newsletter-footer-field
	 {
		width: 160px;
		display: inline-block;
		margin-bottom: 0;
		background: #58595b;
		-webkit-appearance: none;
  		-webkit-border-radius: 0;
		vertical-align: bottom; }
		
	input[type="submit"].newsletter-footer-button {
	  font-size:16px;
	  padding: 0 10px 0 10px; }
	  
	  
/* #Map
================================================== */

.Flexible-container {
    padding-bottom: 220px;
}


    }


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

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

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }
        .container .columns,
        .container .column { margin: 0; }

        .container .one.column,
        .container .one.columns,
        .container .two.columns,
        .container .three.columns,
        .container .four.columns,
        .container .five.columns,
        .container .six.columns,
        .container .seven.columns,
        .container .eight.columns,
        .container .nine.columns,
        .container .ten.columns,
        .container .eleven.columns,
        .container .twelve.columns,
        .container .thirteen.columns,
        .container .fourteen.columns,
        .container .fifteen.columns,
        .container .sixteen.columns,
        .container .one-third.column,
        .container .two-thirds.column { width: 420px; }
		
		
/* Content */		
	.page-holder	{ width:420px; margin:0 auto; }
	
	.page-header-copy	{  width:400px; }
	
	
/* Clients */
	.clients-holder	{ width:420px; }
	.client-box		{ width:188px; height:143px; } 
	
	
/* Blog  */
	.blog-search	{ position:relative; width:420px; margin:0 auto; }
	.blog-left		{ float: left; display: inline; width:420px;  margin-right:0; padding:0 0 0 0; }
	.blog-right		{ display:none; }
	.blog-body		{ width:420px; }
	
	.author-holder	{ width:380px; }
	.related-holder	{ width:380px; }
	
/* #Search  */
	input[type="text"].search { width: 340px; }
		
	input[type="submit"].search-btn { margin-left:0; width:50px; padding:0; }

    }


/* #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;
    }


	.bio-block { max-width: 729px; margin: 0 auto; text-align: left;}

	.auto-window ul li p { text-align: center;}


@media (max-width:729px){

	.bio-block { text-align: center; }

}