/* colors */
/* #F5F2ED */
/* #F5F2ED */
/* #D8D4CE */
/* #D8D4C3 */
/* #E7E3DE */
/* #EEEBE5 */
/* #E1DDD7 */
/* #6a6a6a */
/* 615F61 */
/* #2B292B */
/* #2B292B */
/* 474647*/
/* B2B2B2 */
/* 252523 */
/* 868688 */
/* #00B7E4 */
/* #C29D52 */
/* #C29D52 */
/* E2CDAC */
/* D8D4CE */
/* 191919 */
/* site-wide fonts */
.clearfix, .container {
  zoom: 1; }
  .clearfix:after, .container:after {
    height: 0;
    clear: both;
    content: ".";
    display: block;
    line-height: 0;
    visibility: hidden; }

.flat-list {
  list-style: none;
  margin: 0;
  padding: 0; }

/* mixins and helpers */
/*
  media query support
*/
/*
  em to px conversion
*/
/*
  @font-face support
  requires all of {eot, woff, ttf, svg} exist
*/
/* desktop grid size */
.container {
  max-width: 97em;
  margin: 0 auto; }

.one, .two {
  float: left; }
  .one:last-of-type, .two:last-of-type {
    margin: 0; }

.one {
  width: 30em;
  margin-right: 3.5em; }

.two {
  width: 63.5em;
  margin-right: 3.5em; }

.three {
  width: 97em; }

/* master styles for 320 devices */
@media only screen and (min-width: 320px) and (max-width: 480px) {
  body {
    font-size: 50%; }

  .container {
    width: auto; }

  .one, .two, .three {
    width: auto;
    margin: 0 auto;
    float: none; }

  .ad-unit {
    border: 0; }

  .ad-container {
    float: none;
    width: 100%;
    background: #2b292b;
    padding: 0;
    border-bottom: 0; }
    .ad-container *:first-child {
      width: 33.33333em;
      margin: 0 auto; } }
.sections {
  margin-top: 3.6em;
  border: solid 2px #2b292b;
  border-width: 2px 0 0 0;
  font-family: "TabletGothic-SemiBold"; }
  .sections ul a {
    -webkit-transition: color 0.125s;
    -moz-transition: color 0.125s;
    -ms-transition: color 0.125s;
    transition: color 0.125s;
    color: #d8d4c3; }
    .sections ul a:hover {
      color: #000; }
    .sections ul a li {
      padding: 0.9em 0 0.9em 0.9em;
      border: solid 1px #FFF;
      border-width: 0 0 1px 0;
      text-transform: uppercase;
      letter-spacing: .1em; }
    .sections ul a.current {
      color: #000; }
      .sections ul a.current li {
        background-color: #FFF;
        border-color: #d8d4c3; }

.feature-type {
  display: table;
  border: solid 1px #FFF;
  border-width: 0 0 1px 0;
  text-align: center;
  min-height: 10em;
  width: 100%; }
  .feature-type .logo {
    width: 16em;
    float: left;
    margin-bottom: -1.8em;
    margin-top: 1.8em; }
  .feature-type .abstract {
    font-family: "TabletGothic-SemiBold";
    font-size: 1.2em;
    display: table-cell;
    vertical-align: middle;
    text-transform: uppercase;
    padding: 2.7em;
    letter-spacing: 0.08333em;
    line-height: 1.5em; }
    .feature-type .abstract b, .feature-type .abstract strong {
      color: #c29d52;
      font-family: "TabletGothic-Bold"; }
    .feature-type .abstract em {
      font-family: "TabletGothic-SemiBoldOblique";
      font-style: normal; }
    .feature-type .abstract p {
      margin: 0; }
  .feature-type .logo + .abstract {
    text-align: left; }

.list {
  min-height: 30em;
  background: #f5f2ed;
  padding-top: 3.5em; }
  .list .list-topper {
    position: relative;
    background: #fff;
    margin-bottom: 3.6em;
    font-family: "HarrietDisplay"; }
    .list .list-topper .topper-title {
      display: none; }
    .list .list-topper .topper-details {
      padding: 1.8em 3.6em;
      text-align: center;
      background-color: #FFF; }
    .list .list-topper .pic.primary {
      display: block;
      width: 63.5em;
      height: 39em;
      background-size: 63.5em 39em; }
    .list .list-topper h1 {
      font-size: 3.6em;
      font-weight: 100;
      margin-top: 0.5em;
      margin-bottom: 0.5em;
      font-family: "HarrietDisplay";
      font-weight: bold; }
      .list .list-topper h1 a {
        color: #2b292b; }
        .list .list-topper h1 a:hover {
          color: #00b7e4; }
    .list .list-topper .mono-header {
      margin-bottom: 2.7em; }
    .list .list-topper .byline {
      display: inline-block;
      font-size: 1.8em;
      margin-bottom: 1.5em;
      font-family: "TabletGothic"; }
      .list .list-topper .byline .by {
        color: #2b292b;
        font-style: italic; }
      .list .list-topper .byline a {
        color: #2b292b; }
        .list .list-topper .byline a:hover {
          color: #00b7e4; }
    .list .list-topper .abstract {
      display: none;
      font-family: "HarrietDisplay";
      font-size: 1.8em;
      line-height: 1.44444em;
      margin-bottom: 1.8em; }
      .list .list-topper .abstract p {
        margin-right: 2em; }
      .list .list-topper .abstract > * {
        display: inline; }
  .list ul .item {
    float: left;
    margin-right: 3.5em;
    margin-bottom: 3.5em;
    width: 30em;
    position: relative;
    display: block;
    text-align: center; }
    .list ul .item:nth-child(even) {
      margin-right: 0; }
    .list ul .item:hover .cat-and-time .time {
      opacity: 1;
      -webkit-transition: opacity 0.2s;
      -moz-transition: opacity 0.2s;
      -ms-transition: opacity 0.2s;
      transition: opacity 0.2s; }
    .list ul .item .lazy {
      width: 30em;
      height: 18.6em; }
    .list ul .item .pic {
      display: block;
      width: 30em;
      height: 18.6em;
      background: url(../images/img-placeholder.png); }
    .list ul .item .slide-section {
      position: relative;
      overflow: hidden;
      width: 30em; }
      .list ul .item .slide-section .abstract {
        -webkit-transition: top 0.3s ease-in-out, left 0.3s ease-in-out, opacity 0.3s ease-in-out;
        -moz-transition: top 0.3s ease-in-out, left 0.3s ease-in-out, opacity 0.3s ease-in-out;
        -ms-transition: top 0.3s ease-in-out, left 0.3s ease-in-out, opacity 0.3s ease-in-out;
        transition: top 0.3s ease-in-out, left 0.3s ease-in-out, opacity 0.3s ease-in-out;
        position: absolute;
        font-size: 1.3em;
        line-height: 1.5em;
        color: #2b292b;
        background-color: #FFF;
        padding: 1.53846em;
        width: 20.07692em;
        top: 14.38462em;
        opacity: 0; }
        .list ul .item .slide-section .abstract > * {
          display: inline; }
        .list ul .item .slide-section .abstract p:last-of-type {
          margin: 0; }
        .list ul .item .slide-section .abstract.open {
          opacity: 1; }
    .list ul .item .info {
      margin-top: 1.8em;
      bottom: 0;
      left: 0;
      background: #f5f2ed; }
      .list ul .item .info .mono-header a:hover {
        color: #2b292b; }
      .list ul .item .info h2 {
        font-family: "HarrietDisplay";
        font-size: 2.4em;
        font-weight: 600;
        line-height: 1.125em;
        margin: 0 0 0.375em 0;
        color: #2b292b; }
        .list ul .item .info h2:hover {
          color: #00b7e4; }
      .list ul .item .info .content-block {
        display: block; }
      .list ul .item .info .byline {
        font-family: "TabletGothic";
        font-size: 1.2em;
        color: #2b292b; }
        .list ul .item .info .byline .author {
          color: #2b292b; }
        .list ul .item .info .byline a.author:hover {
          color: #00b7e4; }

.global-header#interior-header.with-subnav .subnav ul {
  text-align: center;
  padding: 1em 6em 1em; }
.global-header#interior-header.with-subnav .subnav a {
  line-height: 2.5em; }

@media only screen and (min-width: 320px) and (max-width: 480px) {
  .sections {
    display: none; }

  .list .list-topper {
    margin: 0;
    font-size: .8em;
    background: transparent; }
    .list .list-topper .topper-title {
      display: block;
      text-align: center;
      color: #6a6a6a;
      margin: 1em 0 1em; }
    .list .list-topper .topper-details {
      padding: 1em 2em .5em; }
      .list .list-topper .topper-details .category {
        float: left;
        color: #6a6a6a; }
      .list .list-topper .topper-details p.time {
        overflow: hidden;
        margin-bottom: 1.2em; }
      .list .list-topper .topper-details span.time {
        float: right;
        margin: 0; }
    .list .list-topper h1 {
      margin-bottom: .25em; }
    .list .list-topper .abstract {
      margin-bottom: 1em; }
      .list .list-topper .abstract > * {
        display: block; }
      .list .list-topper .abstract p {
        line-height: 1.6em;
        margin-bottom: .5em; }
    .list .list-topper .pic.primary {
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      width: 100%;
      height: auto;
      padding: 0 2em; }
  .list ul {
    margin-bottom: 2em; }
    .list ul .item {
      width: 100%;
      margin-bottom: 0;
      border-top: 1px solid #b2b2b2;
      display: table-row;
      table-layout: fixed;
      direction: rtl;
      /* need to make images on the right, fix text in .info style */
      text-align: left; }
      .list ul .item .lazy {
        width: auto;
        height: 100%; }
      .list ul .item .slide-section {
        display: table-cell;
        overflow: hidden;
        position: relative; }
        .list ul .item .slide-section .pic {
          width: 12.22222em;
          min-width: 12.22222em;
          max-width: 12.22222em;
          height: auto;
          vertical-align: middle; }
          .list ul .item .slide-section .pic img {
            visibility: hidden;
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%); }
      .list ul .item .info {
        display: table-cell;
        direction: ltr;
        width: 100%;
        padding: 2em 2em; }
        .list ul .item .info h2 {
          font-weight: bold;
          font-size: 1.5em;
          line-height: 1.2em; }
        .list ul .item .info .type-link {
          font-size: .75em; }
        .list ul .item .info .abstract {
          display: none; }
      .list ul .item .essential {
        top: .5em;
        right: .5em;
        font-size: .8em; } }