body{
    font-family: 'PTSansRegular', Helvetica, Arial, sans-serif;
    background: #fff;

}
			
body{
	-webkit-animation: 'fade' 1.5s alternate;
     -moz-animation: 'fade' 1.5s alternate;
      -ms-animation: 'fade' 1.5s alternate;
       -o-animation: 'fade' 1.5s alternate;
	        animation: 'fade' 1.5s alternate;
}
@-webkit-keyframes 'fade'{
	0%  {opacity: 0;}
	50% {opacity: 0;}
	100%{opacity: 1;}
}
@-moz-keyframes 'fade'{
	0%  {opacity: 0;}
	50% {opacity: 0;}
	100%{opacity: 1;}
}
@-ms-keyframes 'fade'{
	0%  {opacity: 0;}
	50% {opacity: 0;}
	100%{opacity: 1;}
}
@-o-keyframes 'fade'{
	0%  {opacity: 0;}
	50% {opacity: 0;}
	100%{opacity: 1;}
}
@keyframes 'fade'{
	0%  {opacity: 0;}
	50% {opacity: 0;}
	100%{opacity: 1;}
}


section#article, section#jobs, section#events, section#about, section#archive {width:720px;margin:0px auto 0px auto;}

section#content {
  background:#fbfaf9;
  margin: auto;
  /*max-width: 960px;*/
  overflow: hidden; }
  @media only screen and (min-width: 769px) {
    section#content {
      position: relative;
      top: 0;
      right: 0;
      left: 0;
      z-index: 999; 
    } 
  }
  
  section#capabilities {
  border-top:1px solid #eee;
  /*max-width: 960px;*/
  overflow: hidden; }
  @media only screen and (min-width: 769px) {
    section#content {
      position: relative;
      top: 0;
      right: 0;
      left: 0;
      z-index: 999; 
    } 
  }

/* Header */
body>header {margin:0px auto;text-align:center;}
section#archive header {width:720px;text-align:center;}
body>header img {width:150px;height:151px;margin: 10px 0 0}
body>header div.menu {font-size:10pt;text-transform:uppercase;margin-top:30px;}

header.main {
  background:#222;
  
  margin: auto;
  /*max-width: 960px;*/
  overflow: hidden; }
  
  header.main strong {color:#fff}
  
  @media only screen and (min-width: 769px) {
    header.main {
      position: relative;
      top: 0;
      right: 0;
      left: 0;
      z-index: 999; 
    } 
  }
  header.main .inner {
    overflow: hidden; }
    @media only screen and (min-width: 769px) {
      header.main .inner {
        margin: auto;
        max-width: 960px; 
      } 
  }
  header.main h1#logo {
    background-size: 34px;
    color:#888;
    margin: 15px 20px 0px;
    background-repeat: no-repeat;
    font: 22px/1.75 'MerriweatherRegular', Georgia, serif;
    letter-spacing: 1px;
    text-align: center; 
  }
    @media only screen and (min-width: 769px) {
      header.main h1#logo {
        background-size: 46px;
        font-size: 26px;
        line-height: 46px;
        margin: 30px 0 0;
        position: relative;
        top: 0; 
      } 
    }
    @media only screen and (-moz-min-device-pixel-ratio: 2), 
    only screen and (-o-min-device-pixel-ratio: 2 / 1), 
    only screen and (-webkit-min-device-pixel-ratio: 2), 
    only screen and (min-device-pixel-ratio: 2) {
      header.main h1#logo {
         
      } 
    }
      @media only screen and (-moz-min-device-pixel-ratio: 2) and (min-width: 769px), 
      only screen and (-o-min-device-pixel-ratio: 2 / 1) and (min-width: 769px), 
      only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 769px), 
      only screen and (min-device-pixel-ratio: 2) and (min-width: 769px) {
        header.main h1#logo {
          
        } 
      }
    header.main h1#logo a {
      color: #666; 
    }
    header.main h1#logo a:hover {
      color: #4594ff; 
    }
    
    header.main h2 {
    margin: 0px auto 34px;
    padding: 5px 0 15px;
    width: 80%;
    background-repeat: no-repeat;
    font: normal 400 20px/26px "PTSansNarrowRegular", sans-serif;
    letter-spacing: 0.009em;
    text-align: center; 
    color:#999;
    border-bottom: 1px solid #333;
  }
  
  header.main p.intro {
        font-size: 1.8rem;
        line-height:1.2em;
        margin: 15px auto;
        width: 85%;
        color: #f2f2f2;
      }
      
      header.main p {
        font-size: 1.2rem;
        line-height:1.5em;
        margin: 15px auto 34px;
        width: 90%;
        color: #888;
      }
    @media only screen and (min-width: 769px) {
      header.main h2 {
        background-size: 46px;
        font-size: 24px;
        line-height: 46px;
        margin: 0px auto 34px;
        padding:0;
        position: relative;
        top: 0; 
      } 
      header.main p.intro {
        font-size: 2.8rem;
        line-height:1.2em;
        margin: 15px auto 34px;
        width: 75%;
      }
      
      header.main p {
        font-size: 1.3rem;
        line-height:1.4em;
        margin: 15px auto 34px;
        width: 80%;
      }
    }
  header.main #menu-toggle {
    float: right;
    background-image: url("../images/toggle.png");
    background-size: 16px;
    cursor: pointer;
    margin: 22px 21px 0 0;
    width: 16px;
    height: 16px; }
    @media only screen and (min-width: 769px) {
      header.main #menu-toggle {
        display: none; 
      } 
    }
    @media only screen and (-moz-min-device-pixel-ratio: 2), 
    only screen and (-o-min-device-pixel-ratio: 2 / 1), 
    only screen and (-webkit-min-device-pixel-ratio: 2), 
    only screen and (min-device-pixel-ratio: 2) {
      header.main #menu-toggle {
        background-image: url("../images/toggle@2x.png"); 
      } 
    }
	header.main nav {
	    clear: both;
	    display: none;
	    font-family: "PTSansBold",sans-serif;
	    letter-spacing: 1px;
	    font-size: 24px;
	    line-height: 1;
	    margin: 0;
	    text-align: right;
	    
	    -webkit-transition:all 0.2s ease;
       -moz-transition:all 0.2s ease;
       -o-transition:all 0.2s ease;
        transition:all 0.2s ease; 
	}
    header.main nav.active {
      display: block; 
      border-bottom:1px solid #ccc;
    }
    @media only screen and (min-width: 769px) {
      header.main nav {
        clear: none;
        display: block;
        font-family: "PTSansRegular",sans-serif;
        font-size: 16px;
        margin: 30px 0 30px; 
      } 
    }
    header.main nav a {
    	background: #eee;
      border-top: 1px solid #ddd;
      color: #231f20;
      display: block;
      padding: 18px 19px;
      text-align: center;
      text-decoration: none;
      text-transform: uppercase; 
    }
    header.main nav a:hover, header nav a.current {
      color: #4594ff; 
    }
      @media only screen and (min-width: 769px) {
        header.main nav a {
        	background: #fff;
          border-top: none;
          display: inline-block;
          text-align: left; 
        } 
      }
      
.banner {
	background: url(../images/mobile-banner.png) center center no-repeat;
  border-bottom: 1px solid #ebebeb;
  margin: auto;
  max-width: 960px;
  overflow: hidden;
  
  min-height:100px; 
    height:auto !important; 
    height:100px; 
  }
  @media only screen and (min-width: 769px) {
    .banner {
      background: url(../images/banner.png) center center no-repeat;
      position: relative;
      top: 0;
      right: 0;
      left: 0;
      margin: auto;
  	  max-width: 960px;
      z-index: 999;
      
      min-height:300px; 
      height:auto !important; 
      height:300px; 
    } 
  }
  .banner .inner {
    overflow: hidden; }
    @media only screen and (min-width: 769px) {
      .banner .inner {
        margin: auto;
        max-width: 960px; 
      } 
  }
  
    @media only screen and (-moz-min-device-pixel-ratio: 2), 
    only screen and (-o-min-device-pixel-ratio: 2 / 1), 
    only screen and (-webkit-min-device-pixel-ratio: 2), 
    only screen and (min-device-pixel-ratio: 2) {
      .banner {
         background: url(../images/mobile-banner@2x.png) center center no-repeat;
      } 
    }
      @media only screen and (-moz-min-device-pixel-ratio: 2) and (min-width: 769px), 
      only screen and (-o-min-device-pixel-ratio: 2 / 1) and (min-width: 769px), 
      only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 769px), 
      only screen and (min-device-pixel-ratio: 2) and (min-width: 769px) {
        .banner h1#logo {
         	background: url(../images/banner@2x.png) center center no-repeat;
        } 
      }
    
.btnGrp {
   margin:10px 0 20px; 
}
.btnGrp a.spots {
    display:block;
    margin:0px 0 20px;
    color:#eee;
}  
a.btn {
    background:#008C8C;
    color:#fff;
    font-family: 'PTSansBold', Arial, sans-serif;
    padding:20px 40px;
    margin:10px 0 10px;
    display:inline-block;
}

a.btn:hover,
    a.btn:active {
        background:#39f;
    }
    a.btn:link, a.btn:visited, a.btn:hover {
       -webkit-transition:all 0.2s ease;
       -moz-transition:all 0.2s ease;
       -o-transition:all 0.2s ease;
        transition:all 0.2s ease;
    }
    a.btn:active {
        color:#03c;
        border-bottom:1px solid rgba(0,51,204,0.25);
       -webkit-transition:none;
       -moz-transition:none;
       -o-transition:none;
        transition:none;
    }	

/* Archive */
section#archive-listing h2 {font-family:'PTSansBold', Arial, sans-serif; color:#999;font-size:12pt;}
section#archive-listing ul {list-style:none;}
section#archive-listing ul li time,section#archive-listing ul li p {display:inline;}
section#archive-listing ul li time {width:40px;position:relative;float:left;padding-right:10px;text-align:right;}
section#archive-listing ul li {margin:20px 0 20px 0;}
section#archive-listing ul li a {
	color:#272423;
    font-family: 'PTSansBold', Arial, sans-serif;
    font-weight:normal;
    font-size:1.5em; /* 24px */
    line-height:1; /* 24px */
    margin:0.6667em 0;/* 32px 0 */
    padding: 0.6667em 0; /* 16px 0 */
	display:block;
}

section#archive-listing ul li a:hover {
	background:#ebebeb;
}

section#capabilities div { 
    padding:0px; 
    width:90%; 
    margin:0 0 .5em; 
    vertical-align:top
}
section#capabilities div p {width:75%}


/*  
 * Article Styling 
 */
article p {-webkit-hyphens:auto;-moz-hyphens:auto;hyphens:auto; margin-bottom:2em; font-size: 1.5rem}
article h1>span {color:#999;}

article header {text-align:center;}
article header h1 {position:relative; margin: 0.5em auto 0.2em}
article header h4 {margin: 0 0 1.3334em;}
article header h1 a {position:absolute; display:none; right:-8px; top:4px}
article header h1:hover a {position:absolute; display:block}
article header h1 span {display:block; font-size:0.45em; letter-spacing:-0.08em}
article header div.details {font-size:.9em;}
article header div.details time {color:#999;}
article header div.author {font-size:12pt;color:#333;text-transform:uppercase;letter-spacing:0.5em;margin:12px 0px 0px 0px;}

article p.alert {padding:5px 10px;color:#FFF;background-color:#E83405;}
article p.alert a {text-decoration:underline;color:#FFF;}
article pre>code {overflow:auto;width:100%;display:block;padding:10px 5px;}
article sup {margin:0px;padding:0px;line-height:0px;} /* Fixes odd line height in paragraph lines with <sup> tags. */

article img {width:990px}
article img.nostyle {margin-left:0px;border-radius:0px;}

article div.footnotes {border-top: 1px dashed #CCC;}
article div.footnotes ol li {line-height:16pt;font-size:11pt;color:#666;}

#article article p:last-child:after {
    font:18px/1.75 'icons', Menlo, Monaco, Courier, monospace;
    content: '\2712';
    margin:0 9px;
}

blockquote p {font-size: 1.8rem}

/* Arcicle Tables */
article table {width:100%;margin:auto auto;border:1px solid #CCC;border-collapse:collapse;}
article table thead {border-bottom:2px solid #CCC;text-align:left;}
article table thead tr th {padding:8px;} 
article table tr {height:26px;}
article table td {padding:8px;border:1px solid #CCC;} 

/* Article selection styles */
article ::selection {background:#FFFC7F;color:#333;}
article ::-moz-selection {background:#FFFC7F;color:#333;}
article ::-webkit-selection {background:#FFFC7F;color:#333;}



/* Footer */
footer {
	background:#2e3133; 
	color:#9c9c9c; 
	padding: 50px 0 30px 0; 
	margin:0 auto;
	/*max-width: 960px;*/
	font-size:.90em;
	text-align:left;
}

footer section {width:900px;margin:0px auto 0px auto; text-align:left}

footer h5 {font-size:.75em; text-transform:uppercase; color:#777e83; margin:1em 0 .5em;}

footer div small {text-transform:none; width:80%}

footer nav:first-child {display:inline-block; padding:0; width:600px; margin:0 0 .5em; vertical-align:top}
footer nav {display:inline-block; padding:0; width:120px; margin:0 0 .5em; vertical-align:top}
footer nav ul, footer nav ul li {list-style:none; margin:0}
footer nav a {color:#e2e3e4; letter-spacing:0;}
footer nav span {font-size:.75em; margin:0 .5em}
footer div.menu {text-transform:uppercase;margin:0;}
footer img {
	width:200px;
	height:42px;
	margin:0px 0px 30px 0px;
	border:none !important; 
	background: none !important; 
	padding:0 !important;
	box-shadow: none !important
}
footer p {border-top: 1px solid #3a3e40; padding: 10px 0 0; margin:30px 0px 0;}

#worktogether {
	background:#fff;
	left:0;
	margin:0;
	position:fixed;
	bottom:-800px;
	width:100%;
	padding:40px 40px 0;
	min-height:200px; 
    height:auto !important; 
    height:200px;
	box-shadow:3px 3px 7px rgba(0,0,0,.25);
	-moz-box-shadow:3px 3px 7px rgba(0,0,0,.25);
	-webkit-box-shadow:3px 3px 7px rgba(0,0,0,.25);
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	z-index:9999;
}

#worktogether:target {
	bottom:0;
	transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
}
#worktogether h1 {margin: 0 0 10px}
#worktogether .close {
    font-family: 'PTSansBold', Helvetica, Arial, sans-serif;
    font-size: 32px;
	position: absolute;
	top:20px;
	right: 20px;
}