@font-face { font-family: 'Gotham'; src: url("/assets/fonts/Gotham-Medium.otf"); font-weight: bold; font-style: normal; }
@font-face { font-family: 'Gotham'; src: url("/assets/fonts/Gotham-Book.otf"); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Gotham'; src: url("/assets/fonts/Gotham-Light.otf"); font-weight: 300; font-style: normal; }
@font-face { font-family: 'footable'; src: url("fonts/footable.eot"); src: url("fonts/footable.eot?#iefix") format("embedded-opentype"), url("fonts/footable.woff") format("woff"), url("fonts/footable.ttf") format("truetype"), url("fonts/footable.svg#footable") format("svg"); font-weight: normal; font-style: normal; }
@media screen and (-webkit-min-device-pixel-ratio: 0) { @font-face { font-family: 'footable'; src: url("fonts/footable.svg#footable") format("svg"); font-weight: normal; font-style: normal; } }
.theme-psilabs.with-leaderboard-ad .sidebar { padding-top: 137px !important; }
.theme-psilabs.with-leaderboard-ad .sidebar-toggle { margin-top: 98px; }
.theme-psilabs.with-leaderboard-ad .wrap { padding-top: 98px; }
.theme-psilabs .ad { display: block !important; }
.theme-psilabs .ad.leaderboard { position: fixed; z-index: 1000; top: 0; background-color: #002423; height: 98px; width: 100%; background-image: url(/assets/images/psi-ph-banner@2x.png); background-size: 728px 90px; background-repeat: no-repeat; background-position: center 4px; }
.theme-psilabs .sidebar { background-color: #002423; }
.theme-psilabs .sidebar-toggle:active, .theme-psilabs #sidebar-checkbox:checked ~ .sidebar-toggle { border-top: 30px solid #002423; }
.theme-psilabs .container a, .theme-psilabs .related-posts li a:hover { color: #2f8e8a; }
.theme-psilabs .sidebar-toggle { color: #cdefed; cursor: pointer; }

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) { /* Retina-specific stuff here */
  .leaderboard { background-image: url(/assets/images/psi-ph-banner@3x.png); } }
/* Wrapper  The wrapper is used to position site content when the sidebar is toggled. We use an outter wrap to position the sidebar without interferring with the regular page content. */
.wrap { position: relative; width: 100%; }

/* Container  Center the page content. */
.container { max-width: 28rem; padding-left: 1rem; padding-right: 1rem; margin-left: auto; margin-right: auto; }

@media (min-width: 38rem) { .container { max-width: 32rem; } }
@media (min-width: 56rem) { .container { max-width: 30rem; } }
@media (min-width: 74rem) { .container { max-width: 38rem; } }
/* Masthead  Super small header above the content for site name and short description. */
.masthead { padding-top: 1rem; padding-bottom: 1rem; margin-bottom: 1.5rem; border-bottom: 2px solid #D3D3D3; }

.masthead-title { margin-top: 0; margin-bottom: 0; color: #505050; }
.masthead-title a { color: #505050; }
.masthead-title small { font-size: 75%; font-weight: 400; color: #c0c0c0; letter-spacing: 0; }

@media (max-width: 48rem) { .masthead-title { text-align: center; }
  .masthead-title small { display: none; } }
/* Sidebar  The sidebar is the drawer, the item we are toggling with our handy hamburger button in the corner of the page.  This particular sidebar implementation was inspired by Chris Coyier's "Offcanvas Menu with CSS Target" article, and the checkbox variation from the comments by a reader. It modifies both implementations to continue using the checkbox (no change in URL means no polluted browser history), but this uses `position` for the menu to avoid some potential content reflow issues.  Source: http://css-tricks.com/off-canvas-menu-with-css-target/#comment-207504 */
/* Style and "hide" the sidebar */
.sidebar { position: fixed; top: 0; bottom: 0; left: -14rem; width: 14rem; visibility: hidden; overflow-y: auto; font-family: "Gotham", Helvetica sans-serif; font-size: .875rem; text-transform: uppercase; letter-spacing: 1px; /* 15px */ color: rgba(255, 255, 255, 0.6); background-color: #202020; -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.sidebar a { font-weight: normal; color: white; }

@media (min-width: 30rem) { .sidebar { font-size: .75rem; /* 14px */ } }
/* Sidebar content */
.sidebar-item { padding: 1rem; }
.sidebar-item p:last-child { font-familY: Gotham; font-size: .5rem; color: silver; margin-bottom: 0; }

/* Sidebar nav */
.sidebar-nav-item { display: block; padding: .5rem 1rem; }
.sidebar-nav-item.active { text-decoration: none; background-color: rgba(255, 255, 255, 0.1); border-color: transparent; }

a.sidebar-nav-item:hover, a.sidebar-nav-item:focus { text-decoration: none; background-color: rgba(255, 255, 255, 0.1); border-color: transparent; }

a.sidebar-nav-item.client-login-link { color: #86b2b1; }

div.sidebar-nav-item { color: silver; padding-bottom: 0; }

.sidebar-nav-item.subitem { padding-left: 3.5em; margin-top: 0; }

@media (min-width: 48rem) { .sidebar-item { padding: 1.75rem; }
  .sidebar-nav-item { padding-left: 1.5rem; padding-right: 1.5rem; } }
/* Hide the sidebar checkbox that we toggle with `.sidebar-toggle` */
.sidebar-checkbox { display: none; }

/* Style the `label` that we use to target the `.sidebar-checkbox` */
.sidebar-toggle { position: absolute; display: block; top: 0; left: 0; padding: 0; font-size: 0px; line-height: 0%; width: 0px; border-top: 30px solid black; border-right: 30px solid transparent; }

#sidebar-checkbox:checked ~ .sidebar-toggle { border-top: 30px solid gray; border-right: 30px solid transparent; }

@media (min-width: 30.1rem) { .sidebar-toggle { position: fixed; } }
/* Slide effect  Handle the sliding effects of the sidebar and content in one spot, seperate from the default styles.  As an a heads up, we don't use `transform: translate3d()` here because when mixed with `position: fixed;` for the sidebar toggle, it creates a new containing block. Put simply, the fixed sidebar toggle behaves like `position: absolute;` when transformed.  Read more about it at http://meyerweb.com/eric/thoughts/2011/09/12/. */
.wrap, .sidebar, .sidebar-toggle { -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; }

.wrap, .sidebar-toggle { -webkit-transition: -webkit-transform .3s ease-in-out; transition: transform .3s ease-in-out; }

#sidebar-checkbox:checked + .sidebar { visibility: visible; }
#sidebar-checkbox:checked ~ .sidebar, #sidebar-checkbox:checked ~ .wrap, #sidebar-checkbox:checked ~ .sidebar-toggle { -webkit-transform: translateX(14rem); -ms-transform: translateX(14rem); transform: translateX(14rem); }

@media (min-width: 56rem) { body:not(.permamobile) #sidebar-checkbox + .sidebar { visibility: visible; }
  body:not(.permamobile) #sidebar-checkbox ~ .sidebar, body:not(.permamobile) #sidebar-checkbox ~ .wrap, body:not(.permamobile) #sidebar-checkbox ~ .sidebar-toggle { -webkit-transform: translateX(14rem); -ms-transform: translateX(14rem); transform: translateX(14rem); }
  body:not(.permamobile) .sidebar-toggle { display: none; }
  body:not(.permamobile) #sidebar { color: #002423; }
  body:not(.permamobile) .theme-psilabs .sidebar, body:not(.permamobile) .theme-psilabs .sidebar-toggle:active, body:not(.permamobile) .theme-psilabs #sidebar-checkbox:checked ~ .sidebar-toggle { background-color: white; }
  body:not(.permamobile) .theme-psilabs .sidebar a, body:not(.permamobile) .theme-psilabs .container a, body:not(.permamobile) .theme-psilabs .sidebar-toggle, body:not(.permamobile) .theme-psilabs .related-posts li a:hover { color: #2f8e8a; }
  body:not(.permamobile) .container { margin-left: 1rem; }
  body:not(.permamobile) .ad.leaderboard { background-position: 280px 4px; } }
/* Posts and pages  Each post is wrapped in `.post` and is used on default and post layouts. Each page is wrapped in `.page` and is only used on the page layout. */
.page { margin-bottom: 4em; }

.post { margin-bottom: 1.5em; }
.post p > a { top: 0; }

.page p > img, .post p > img { max-width: 100%; }

/* Blog post or page title */
.page-title { color: #303030; }

.post-title { color: #303030; }
.post-title a { color: #303030; }

.page-title, .post-title { margin-top: 0; }

/* Meta data line below post title */
/* Related posts */
.related { padding-top: 1rem; padding-bottom: 2rem; }

.related-posts { padding-left: 0; list-style: none; }
.related-posts h3 { margin-top: 0; }
.related-posts li small { font-size: 75%; color: #999; }
.related-posts li a:hover { color: #268bd2; text-decoration: none; }
.related-posts li a:hover small { color: inherit; }

/* Pagination  Super lightweight (HTML-wise) blog pagination. `span`s are provide for when there are no more previous or next posts to show. */
.pagination { overflow: hidden; /* clearfix */ margin-left: -1rem; margin-right: -1rem; font-family: "Gotham", Helvetica, sans-serif; color: #ccc; text-align: center; text-transform: uppercase; }

/* Pagination items can be `span`s or `a`s */
.pagination-item { display: block; padding: 1rem; border: 1px solid #eee; }
.pagination-item:first-child { margin-bottom: -1px; }

/* Only provide a hover state for linked pagination items */
a.pagination-item:hover { background-color: #f5f5f5; }

@media (min-width: 30rem) { .pagination { margin: 3rem 0; }
  .pagination-item { position: static; float: left; width: 50%; }
  .pagination-item:before, .pagination-item:after { position: static; transition: none; }
  .pagination-item:first-child { margin-bottom: 0; border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
  .pagination-item:last-child { margin-left: -1px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

::selection { background: #2f8e8a; color: white; /* WebKit/Blink Browsers */ }

html, body { overflow-x: hidden; margin: 0; padding: 0; }

html { font-family: "Georgia", serif; font-size: 12px; line-height: 1.5; }

body { color: #002423; background-color: white; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

@media (min-width: 38rem) { html { font-size: 20px; } }
h1, h2, h3, h4, h5, h6 { /* font-family: "Gotham", Helvetica, sans-serif; */ font-weight: normal; color: #313131; font-size: 100%; /* letter-spacing: -.025rem; */ margin-bottom: .5rem; line-height: 1.25; text-rendering: optimizeLegibility; }

h1 { font-family: Gotham; font-size: 1.75rem; }

h2 { font-family: Gotham; margin-top: 1rem; font-size: 1.15rem; }

h3 { font-family: Gotham; margin-top: 1.5rem; font-size: 1rem; }

h4, h5, h6 { font-family: Gotham; font-weight: bold; margin-top: 1rem; font-size: .75rem; }

blockquote { padding: .5rem 1rem; margin: .8rem 0; color: #002423; border-left: 0.25rem solid #2f8e8a; }
blockquote p:last-child { margin-bottom: 0; }

@media (min-width: 30rem) { blockquote { padding-right: 5rem; padding-left: 1.25rem; } }
/* Headings */
a { color: #268bd2; text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

p { font-family: "Georgia", serif; font-size: .8rem; margin-top: 0; margin-bottom: 1rem; }

ul, ol, dl { margin-top: 0; margin-bottom: 1rem; font-size: .75rem; }

dt { font-weight: bold; }

dd { margin-bottom: .5rem; }

hr { position: relative; border: 0; border-top: 1px solid white; border-bottom: 1px solid white; }

abbr { font-size: 85%; font-weight: bold; color: #555; text-transform: uppercase; }
abbr[title] { cursor: help; border-bottom: 1px dotted #e5e5e5; }

.highlight { margin-bottom: 1rem; border-radius: 4px; }
.highlight pre { margin-bottom: 0; }

img { display: block; margin: 0 0 1rem; }

/* Tables */
table { margin-bottom: 1rem; width: 100%; border: 1px solid #e5e5e5; border-collapse: collapse; }
table ul, table ol, table dl { margin-top: 0; margin-bottom: 0; font-size: .6rem; }

td, th { padding: .25rem .5rem; border: 1px solid #e5e5e5; font-size: .6rem; }

tbody tr:nth-child(odd) td, tbody tr:nth-child(odd) th { background-color: #f9f9f9; }

/* Meta data line below post title */
/* Masthead */
.masthead-title a { position: relative; top: 0; display: block; width: 311px; height: 33px; overflow: hidden; text-indent: -999px; background: white url(/assets/images/psilabs_logo-33h300w.svg) no-repeat top center; }
.masthead-title a:before, .masthead-title a:after { display: none; }

.pagination { overflow: hidden; /* clearfix */ margin-left: -1rem; margin-right: -1rem; font-family: "Gotham", Helvetica, sans-serif; color: #ccc; text-align: center; }

.posts .post > a, .post-date, .post-tags { font-size: .8rem; text-transform: uppercase; font-family: "Gotham", sans-serif; font-size: .7rem; margin-top: .5rem; margin-bottom: 1rem; color: #86b2b1; }

@media (min-width: 56rem) { a { display: inline-block; position: relative; top: .35rem; overflow: hidden; }
  a, a:hover { text-decoration: none !important; }
  a:before, a:after { content: ''; position: absolute; transition: transform .5s ease; }
  a:before { left: 0; bottom: 0; width: 100%; height: 2px; background: #2f8e8a; transform: translateX(-100%); }
  a:hover:before { transform: translateX(0); }
  body:not(.permamobile) .wrap, body:not(.permamobile) .sidebar-toggle, body:not(.permamobile) .sidebar { -webkit-transition: none; transition: none; }
  body:not(.permamobile) #sidebar-checkbox ~ .sidebar, body:not(.permamobile) #sidebar-checkbox ~ .wrap, body:not(.permamobile) #sidebar-checkbox ~ .sidebar-toggle { -webkit-transform: translateX(14rem); -ms-transform: translateX(14rem); transform: translateX(14rem); }
  body:not(.permamobile) .sidebar-toggle { display: none; }
  body:not(.permamobile) #sidebar { color: #002423; }
  body:not(.permamobile) .theme-psilabs .sidebar, body:not(.permamobile) .theme-psilabs .sidebar-toggle:active, body:not(.permamobile) .theme-psilabs #sidebar-checkbox:checked ~ .sidebar-toggle { background-color: white; }
  body:not(.permamobile) .theme-psilabs .sidebar a, body:not(.permamobile) .theme-psilabs .container a, body:not(.permamobile) .theme-psilabs .sidebar-toggle, body:not(.permamobile) .theme-psilabs .related-posts li a:hover { color: #2f8e8a; }
  body:not(.permamobile) .container { margin-left: 1rem; } }
/* MAILCHIMP AND TWEETS SIDE BY SIDE*/
@media (min-width: 48.1rem) { .grid-halves-container { width: 100%; clear: both; border-bottom: 2px solid #D3D3D3; }
  .grid-halves-container .grid-halves-half { width: 48%; float: left; }
  .grid-halves-container .grid-halves-half.right { float: right; } }
.grid-halves-container.contact { font-family: "Gotham", Helvetica, sans-serif; border-bottom: none; }
.grid-halves-container.contact .detail { margin-left: 42px; }
.grid-halves-container.contact .detail.social { text-align: center; clear: left; margin-left: 0; }
.grid-halves-container.contact .detail p { margin-bottom: .60rem; line-height: normal; }
.grid-halves-container.contact .detail p a { top: 0; }
.grid-halves-container.contact .detail small { font-size: .75rem; }
.grid-halves-container.contact .detail > i { float: left; margin-left: -36px; margin-top: 8px; color: #666; }
.grid-halves-container.contact .detail .fab.lg { font-size: 2rem; color: #333; margin: 8px; }

.map-container { clear: left; }

#map { height: 100%; height: 240px; }

#copyright-n-accreditations a { top: 0; display: inline; position: static; }

#contact_form { padding-right: 16px; margin-top: 16px; }
#contact_form .row { margin-bottom: 8px; clear: both; content: ""; display: table; }
#contact_form .form-control { width: 49%; }
#contact_form .form-control.left { float: left; }
#contact_form .form-control.right { float: right; }
#contact_form textarea { margin-top: 8px; height: 100px; }
#contact_form input, #contact_form textarea { font-size: .8rem; width: 100%; border: none; background-color: #EEE; border-radius: 4px; padding: 6px; }
#contact_form .btn { width: 100%; border-radius: 4px; border: none; background-color: #268bd2; padding: 8px; font-size: .75rem; color: #fff; text-transform: uppercase; font-family: "Gotham", Helvetica sans-serif; }

/* footable customization */
.footable-row-detail-value { padding-bottom: 1em; }
.footable-row-detail-value ol { padding-left: 1em; }

body.permamobile .sidebar-toggle { display: block; }
body.permamobile #sidebar-checkbox:checked + .sidebar { visibility: visible; }
body.permamobile #sidebar-checkbox:checked ~ .sidebar, body.permamobile #sidebar-checkbox:checked ~ .wrap, body.permamobile #sidebar-checkbox:checked ~ .sidebar-toggle { -webkit-transform: translateX(14rem); -ms-transform: translateX(14rem); transform: translateX(14rem); }
body.permamobile .container { max-width: 100%; }

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 728px) { .ad.leaderboard { background-image: url(/assets/images/psi-ph-banner-mobile@3x.png) !important; background-size: 350px 90px !important; } }
