@charset "UTF-8";
@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700";
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700");
@import "https://fonts.googleapis.com/css?family=Raleway:100,400,700";
@import url("https://fonts.googleapis.com/css?family=Raleway:100,400,700");
@font-face {
  font-weight: normal;
  font-style: normal;
  font-family: "susicons";
  src: url("fonts/susicons.eot");
  src: url("fonts/susicons.eot?#iefix") format("embedded-opentype"), url("fonts/susicons.woff") format("woff"), url("fonts/susicons.ttf") format("truetype"), url("fonts/susicons.svg#susicons") format("svg"); }
*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

body,
html {
  margin: 0;
  padding: 0;
  font-size: 100%;
  -webkit-font-smoothing: antialiased; }

body {
  color: white;
  background: #45b8c9;
  overflow-x: hidden;
  min-width: 310px;
  width: 100%;
  height: 100%;
  font: 20px/1.5 "raleway", "calibri", "helvetica neue", arial, sans-serif;
  -moz-transition: background 0.2s linear;
  -o-transition: background 0.2s linear;
  -webkit-transition: background 0.2s linear;
  transition: background 0.2s linear; }

p {
  font-family: "source sans pro", "helvetica neue", arial, sans-serif; }

small {
  font-size: 0.66em; }

.subheading {
  margin: 0;
  font: 1.5em/1 "raleway", "calibri", "helvetica neue", arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.03em; }

figure {
  margin: 0; }

blockquote {
  margin: 0 1em; }
  blockquote p {
    margin-bottom: 0.25em;
    font-style: italic;
    font-size: 0.9em;
    line-height: 1.4em; }

a {
  color: #112e32;
  text-decoration: none;
  opacity: 1;
  -moz-transition: opacity 0.2s linear;
  -o-transition: opacity 0.2s linear;
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear; }
  a:hover {
    opacity: 0.6; }

cite {
  display: block;
  text-align: right;
  font-style: normal;
  font-size: 0.66em; }

.clear {
  clear: both; }

.floatleft {
  float: left; }

.floatright {
  float: right; }

.displaynone {
  display: none; }

.section {
  width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }
  .section .wrapper {
    max-width: 1024px;
    margin: 0 auto; }

.columns .col-2 {
  width: 404px;
  float: right;
  margin-left: 36px; }

.section {
  position: relative;
  padding: 0 20px;
  background-size: cover;
  background-attachment: fixed;
  border-top: 1px solid white; }
  .section .wrapper {
    position: relative;
    padding: 5em 0;
    min-height: 1080px; }
  .section h1 {
    margin: 0 0 0.66em 0;
    font-weight: 700;
    font-size: 3em;
    line-height: 1em; }

.logos {
  margin-bottom: 0.5em;
  padding-top: 10em;
  padding-bottom: 1em;
  border-bottom: 4px solid white;
  font-size: 1.5em;
  color: white; }
  .logos .conjunctive {
    display: block;
    float: left;
    text-align: center;
    height: 100px;
    line-height: 100px;
    width: 30px; }
  .logos a {
    display: block;
    height: 100px;
    width: 100px;
    overflow: hidden;
    text-indent: -9999px;
    position: relative;
    top: -16px; }
    .logos a.logo-iriss {
      float: left;
      background: url(../css/images/logo-iriss.svg) no-repeat 0 0;
      background-size: 100%; }
    .logos a.logo-suse {
      width: 125px;
      height: 125px;
      background: url(../css/images/logo-suse.svg) no-repeat 0 0;
      background-size: 100%;
      top: -10px; }

#section-start {
  padding-top: 0;
  background-image: url("images/cover-lyn.jpg"); }
  #section-start a {
    color: white; }
  #section-start .logos {
    border-bottom: none;
    padding: 0;
    position: absolute;
    left: 0;
    top: 1.5em; }
  #section-start header {
    position: absolute;
    bottom: 1.5em; }
    #section-start header h1 {
      margin: 0;
      letter-spacing: -1px;
      line-height: 1em;
      font-size: 4em; }
    #section-start header p {
      margin: 0.2em 0 0 0; }

.scroll-to-start {
  display: inline-block;
  margin-top: 4em;
  padding-top: 0.5em;
  width: auto;
  border-top: 4px solid white;
  font-family: "source sans pro", "helvetica neue", arial, sans-serif;
  font-size: 1.25em;
  line-height: 1em; }
  .scroll-to-start:before {
    margin-right: 10px;
    content: "↓";
    font-size: 0.5em;
    font-family: "susicons";
    opacity: 0.5; }

#section-intro dl {
  margin-top: 0.5em; }
  #section-intro dl dt {
    margin-bottom: 1em;
    padding-top: 0.5em;
    border-top: 4px solid white;
    font: 0.75em/1.5 "raleway", "calibri", "helvetica neue", arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em; }
  #section-intro dl dd {
    position: relative;
    margin-bottom: 2em;
    margin-left: 0;
    font-family: "source sans pro", "helvetica neue", arial, sans-serif; }

.caption {
  font-size: 0.8em; }

#section-lyn {
  background-image: url("images/gm-lyn.jpg"); }
  #section-lyn a {
    color: white; }

#section-liz {
  background-image: url("images/gm-liz.jpg"); }
  #section-liz a {
    color: white; }

#section-jul {
  background-image: url("images/gm-jul.jpg"); }
  #section-jul a {
    color: white; }

#section-vic {
  background-image: url("images/gm-vic.jpg"); }
  #section-vic a {
    color: white; }

#section-summary {
  background-image: url("images/gm-kat.jpg"); }
  #section-summary a {
    color: white; }

#section-credits .copy-statement {
  font-size: 0.6em; }
#section-credits .cc {
  position: relative;
  bottom: -0.2em;
  margin-right: 0.2em;
  font-size: 1.5em;
  font-family: "susicons"; }

.site-nav {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 10;
  height: 100%; }
  .site-nav .nav-container {
    position: relative;
    top: 50%;
    -moz-transform: perspective(1px) translateY(-50%);
    -ms-transform: perspective(1px) translateY(-50%);
    -webkit-transform: perspective(1px) translateY(-50%);
    transform: perspective(1px) translateY(-50%); }
  .site-nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    font-weight: 700;
    font-size: 0.75em;
    padding-left: 15px;
    width: 150px; }
    .site-nav ul li {
      margin: 0;
      line-height: 1.1em; }
      .site-nav ul li a {
        color: white;
        padding: 5px;
        display: inline-block; }
      .site-nav ul li.selected a {
        background-color: white;
        color: #112e32; }

.in-employment {
  position: relative;
  height: 210px; }
  .in-employment .total {
    visibility: hidden; }
  .in-employment .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 180px;
    text-align: center; }
    .in-employment .caption.cap-disabled {
      right: 0;
      left: auto; }
      .in-employment .caption.cap-disabled:after {
        content: "["; }
    .in-employment .caption:after {
      position: absolute;
      bottom: 30px;
      left: 0;
      display: block;
      height: 1em;
      content: "]";
      font-weight: normal;
      font-size: 180px;
      font-family: "susicons";
      line-height: 180px; }

.bars .bar {
  position: relative;
  top: 0;
  float: left;
  margin-right: 1%;
  width: 8.1%;
  height: 120px;
  background: white;
  font-size: 0.6em;
  opacity: 0.4;
  color: #112e32; }
  .bars .bar span {
    position: absolute;
    bottom: 1px;
    left: 0;
    display: block;
    width: 100%;
    text-align: center; }
  .bars .bar.year-2002 {
    top: 0;
    height: 145px; }
  .bars .bar.year-2003 {
    top: 4px;
    height: 141px; }
  .bars .bar.year-2004 {
    top: 10px;
    height: 135px; }
  .bars .bar.year-2005 {
    top: 11px;
    height: 134px; }
  .bars .bar.year-2006 {
    top: 14px;
    height: 131px; }
  .bars .bar.year-2007 {
    top: 14px;
    height: 131px; }
  .bars .bar.year-2008 {
    top: 18px;
    height: 127px; }
  .bars .bar.year-2009 {
    top: 24px;
    height: 121px; }
  .bars .bar.year-2010 {
    top: 29px;
    height: 116px; }
  .bars .bar.year-2011 {
    top: 30px;
    height: 115px; }
  .bars .bar.year-2012 {
    top: 25px;
    height: 120px;
    margin-right: 0;
    opacity: 1;
    color: #235c65; }

.years div {
  float: left;
  padding-top: 2px;
  width: 50%;
  font-weight: bold;
  font-size: 0.8em; }
  .years div.date-last {
    text-align: right; }

.employment dd h2 {
  margin: -35px 0 -5px 0;
  font-weight: bold;
  font-size: 5em;
  line-height: 1em; }
.employment sup {
  font-weight: normal;
  font-size: 0.5em; }

.fellas span {
  font-family: "susicons";
  opacity: 0.5; }
  .fellas span.fel-disabled {
    opacity: 1; }

.population cite {
  padding-top: 3em;
  text-align: left; }

.vid-container {
  position: relative;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 56.25%;
  height: 0;
  border: 1px solid white; }
  .vid-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

.vid-info {
  display: table;
  margin-top: 1em; }
  .vid-info p {
    display: table-cell;
    padding-right: 20px;
    border-right: 4px solid white; }
  .vid-info .downloads {
    display: table-cell;
    margin-left: 0;
    padding-left: 20px;
    width: auto;
    list-style: none;
    white-space: nowrap;
    font-weight: bold;
    font-size: 0.55em; }
    .vid-info .downloads li a:before {
      position: relative;
      bottom: -3px;
      margin-right: 5px;
      content: "!";
      font-size: 1.45em;
      font-family: "susicons"; }
    .vid-info .downloads .vid-download a:before {
      content: "#"; }

@media screen and (max-width: 1280px) {
  body {
    font-size: 16px; }

  .downloads {
    font-size: 0.65em; }
    .downloads li:before {
      font-size: 1.6em; }

  .site-nav ul {
    padding-left: 5px;
    width: 130px; }

  .section .wrapper {
    max-width: 844px;
    min-height: 834px; } }
@media screen and (max-width: 1111px) {
  .site-nav {
    display: none !important; }

  .section .wrapper {
    max-width: 900px;
    min-height: 768px;
    padding: 3em 0; }

  .fellas span {
    font-size: 0.96em; } }
@media only screen and (min-device-width: 834px) and (max-device-width: 1112px) and (orientation: portrait) {
  .site-nav {
    display: none !important; } }
@media screen and (max-width: 720px) {
  .section {
    background-attachment: scroll;
    background-position: 50% 50%; }
    .section .wrapper {
      min-height: 608px;
      padding: 4em 0; }
    .section header h1 {
      font-size: 2.25em; }
    .section#section-start h1 {
      font-size: 3em; }
    .section#section-start .logos {
      top: 1em; }

  .logos .conjunctive {
    height: 64px;
    width: 20px; }
  .logos a.logo-iriss {
    height: 64px;
    width: 64px;
    top: 5px; }
  .logos a.logo-suse {
    width: 80px;
    height: 80px;
    top: 9px; }

  .columns .col-2 {
    float: none;
    width: auto;
    margin-left: 0; }

  .fellas span {
    font-size: 1.2em; }

  .vid-info {
    display: block; }
    .vid-info p {
      display: block;
      padding-right: 0;
      border-right: none; }
    .vid-info .downloads {
      display: block;
      margin-left: 0;
      padding-left: 0;
      padding-top: 0.25em;
      font-size: 0.6em;
      border-top: 1px solid white; }
      .vid-info .downloads li a:before {
        bottom: -3px;
        margin-right: 5px;
        font-size: 1.45em; }

  .logos {
    padding-top: 1em;
    padding-bottom: 0.25em; } }
@media screen and (max-width: 375px) {
  .in-employment {
    height: 190px; }
    .in-employment .caption {
      width: 150px; }
      .in-employment .caption:after {
        font-size: 150px;
        line-height: 150px; }

  .fellas span {
    font-size: 1.1em; }

  .scroll-to-start {
    margin-top: 2em; } }
@media screen and (max-width: 320px) {
  .in-employment {
    height: 170px; }
    .in-employment .caption {
      width: 130px; }
      .in-employment .caption:after {
        font-size: 130px;
        line-height: 130px; }

  .fellas span {
    font-size: 1em; }

  .section .wrapper {
    min-height: 512px;
    padding: 3em 0; }
  .section header h1 {
    font-size: 2.25em; }
  .section#section-start h1 {
    font-size: 2.25em; } }