/**
 * Reset.
 */
@import url("//cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

* {
  box-sizing: border-box;
}

/**
 * The site.
 */
html {
  position: relative;
  overflow-x: hidden;
}

body {
  max-width: 1310px;
  overflow-x: inherit;
  font-size: 14px;
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * Clear-fix.
 */
.grid:after {
  content: "";
  display: table;
  clear: both;
}

/**
 * General classes.
 */
.right {
  float: right !important;
}

.v-space {
  margin-top: 2em;
}

.v-space.larger {
  margin-top: 3em;
}

.v-space:first-child {
  margin-top: 0;
}

.hidden {
  display: none;
}

/**
 * Toggle on/off.
 */
.max-small {
  display: none;
}

/**
 * Font definitions.
 */
@font-face {
  font-family: icons;
  src:
    url("/fonts/icons.ttf") format("truetype"),
    url("/fonts/icons.woff") format("woff"),
    url("/fonts/icons.eot") format("embedded-opentype")
  ;
}

[data-icon]:after {
  text-transform: none;
  font-family: icons;
  content: attr(data-icon);
  font-weight: normal;
}

/**
 * Typography.
 */
a,
p,
li,
input,
label,
h1,
h2,
h3,
h4,
h5,
time,
figcaption,
th,
td {
  font-family: "open sans", sans-serif;
  color: #32353a;
  text-decoration: none;
}

li.selected > a {
  color: #fc8259;
}

p {
  line-height: 1.6em;
  margin: 1.6em 0;
  max-width: 800px;
}

.larger p {
  font-size: 1.15em;
}

i {
  color: #888;
  font-style: italic;
}

strong {
  font-weight: 600;
}

.subtle {
  color: #888;
}

span.highlight {
  background-color: #fff9c9;
}

a.text[data-icon]:after {
  margin-left: 10px;
}

/**
 * Typography, headings.
 */
h1 {
  font-size: 3.2em;
  line-height: 1.2em;
  margin: 0.5em 0;
  font-weight: 800;
}

h2 {
  font-size: 1.8em;
  line-height: 1.2em;
  margin: 0.5em 0;
  font-weight: 800;
}

h3,
h5 {
  font-size: 1.4em;
  line-height: 1.3em;
  margin: 0.5em 0;
  font-weight: 800;
}

h4 {
  margin: 0 0 1.5em 0;
  font-weight: 800;
  text-transform: uppercase;
}

h4 + h1 {
  margin-top: 0.25em;
}

h1.orange,
h4 {
  color: #fc8259;
}

h4.dark {
  color: #32353a;
}

h5.subtle {
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
}

/**
 * Typography, time.
 */
time,
span.author,
p.date {
  display: block;
  margin: 0.5em 0;
  color: #888;
  font-size: 12px;
  text-transform: uppercase;
}

/**
 * Typography, label.
 */
h4.label {
  margin: 1.5em 0 0 0;
}

/**
 * Lists.
 */
li {
  line-height: 1.5em;
}

ol.horizontal li {
  float: left;
}

ul p {
  margin: 0 0 2em 0;
}

/**
 * Lists, section.
 */
.list ol > li {
  margin-bottom: 1em;
}

.list ol > li time,
.list ol > li span.author {
  margin-bottom: 0;
}

.list ol > li a {
  font-weight: 600;
}

/**
 * Forms and inputs.
 */
input[type=text],
input[type=email],
input[type=password],
input[type=submit],
select {
  -webkit-appearance: none;
  -webkit-font-smoothing: antialiased;
  border-radius: 0;
}

input[type=text],
input[type=email],
input[type=password],
select {
  border: none;
  outline: none;
  color: #888;
  font-size: 1em;
  width: 100%;
  max-width: 300px;
}

form {
  height: 100%;
}

input[type=submit],
.button {
  display: inline-block;
  padding: 1em 2em;
  font-size: 14px;
  background-color: #fc8259;
  color: white;
  border: 1px solid #fc8259;
}

.button.white {
  background-color: white;
  color: #fc8259;
  border: 1px solid #fc8259;
}

/**
 * Multimedia.
 */
img {
  display: block;
  width: 100%;
  height: auto;
}

img.auto {
  display: inline-block;
  width: auto;
  max-width: 100%;
}

.video div {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video iframe {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

/**
 * Multimedia, caption.
 */
figcaption {
  margin: 1em 0;
  line-height: 1.5em;
  color: #888;
}

figcaption a {
  color: #888;
  text-decoration: underline;
}

/**
 * Top.
 */
.top {
  height: 90px;
  margin: 10px 0 10px 180px;
  white-space: nowrap;
}

.top div {
  display: inline-block;
  margin-right: 10px;
}

/**
 * Header.
 */
header {
  position: relative;
  height: 90px;
  background-color: #f0f0ef;
}

header a {
  color: #aaa;
}

header > * {
  position: absolute;
  height: 90px;
}

/**
 * Header + nav, typography.
 */
header li,
nav li,
header p {
  font-size: 12px;
}

/**
 * Header, time.
 */
header > .time {
  width: 150px;
  padding: 20px 0 0 15px;
  background-color: #1d2732;
}

header > .time p {
  margin: 0.2em;
  color: #ddd;
}

/**
 * Header, logo.
 */
header > .logo {
  left: 180px;
  line-height: 90px;
  font-size: 25px;
}

header > .logo a {
  color: #fc8259;
}

header > .logo img {
  width: 180px;
  margin-top: 30px;
}

/**
 * Header, my-nav.
 */
header > .my-nav {
  right: 30px;
}

header > .my-nav > ol {
  float: left;
  height: 50px;
  margin: 20px 0;
}

header > .my-nav > ol li {
  height: 100%;
  line-height: 50px;
}

header > .my-nav > ol > li + li {
  padding-left: 10px;
}

/**
 * Header, my-nav, social.
 */
header > .my-nav > ol.social {
  margin-right: 20px;
}

header > .my-nav > ol.social > li a {
  font-size: 28px;
}

/**
 * Header, my-nav, login.
 */
header > .my-nav > ol.login {
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  padding: 0 20px;
}

/**
 * Header, my-nav, search.
 */
header > .my-nav > ol.search {
  margin-left: 20px;
  background-color: white;
}

header > .my-nav > ol.search > li:first-child {
  font-size: 28px;
  width: 40px;
  text-align: center;
}

header > .my-nav > ol.search > li input {
  float: left;
  width: 150px;
  height: 100%;
  padding: 10px 10px 10px 0;
}

/**
 * Navigation.
 */
nav {
  position: absolute;
  width: 150px;
  min-height: 100%;
  background-color: #27303f;
  padding-bottom: 100px;
}

nav a {
  color: #ddd;
}

nav ol {
  padding: 20px 0;
}

nav ol > li {
  padding: 10px 15px;
  text-transform: uppercase;
}

nav > ol + ol {
  border-top: 1px solid #1d2732;
}

/* Navigation, promoted. */

nav ol.promoted {
  background-color: #323b49;
}

nav ol.promoted li:first-child {
  font-size: 11px;
  color: white;
  font-weight: 600;
}

/**
 * Navigation, social.
 */
nav ol.social {
  padding: 30px 0 0 15px;
}

nav ol.social > li {
  width: 33%;
  font-size: 28px;
  padding: 0;
}

/**
 * Navigation, expands/expanded.
 */
nav > ol > li > ol {
  position: absolute;
  top: 0;
  left: -150px;
  width: 150px;
  min-height: 100%;
  background-color: #3d4756;
}

nav ol > li.expands > a {
  display: inline-block;
  width: 100%;
}

nav ol > li.expands a[data-icon]:after {
  position: absolute;
  line-height: 16px;
  right: 15px;
}

nav ol > li.expanded {
  background-color: #3d4756;
}

nav > ol > li.expanded > ol {
  left: 150px;
}

nav ol > li.expanded a[data-icon]:after {
  content: "B";
}

/**
 * Breadcrumbs.
 */
ol.breadcrumbs {
  margin: -15px 0 30px 0;
  border-bottom: 1px solid #eee;
  padding: 0 0 10px 0;
}

ol.breadcrumbs li {
  font-size: 12px;
  color: #888;
  text-transform: uppercase;
  display: inline-block;
}

ol.breadcrumbs li:after {
  content: "/";
  padding: 0 10px 0 10px;
}

ol.breadcrumbs li:last-child:after {
  content: normal;
}

/**
 * Main.
 */
main {
  position: relative;
  margin: 30px 30px 0 180px;
  min-height: 600px;
  display: block; /* IE. */
}

/**
 * Main, navigation expanded.
 */
.expanded main {
  left: 150px;
}

/**
 * Section.
 */
section h1:first-child {
  margin-top: 0;
}

/**
 * Article.
 */
article h1:first-child,
article h2:first-child,
article h3:first-child,
article > h4:first-child,
div.banner h5:first-child {
  margin-top: 0;
}

article p:first-child {
  margin: 0;
}

section p a,
article p a,
.links a {
  color: #2782ed;
}

/**
 * Article, stand-alone.
 */
article.stand-alone time {
  font-size: 1em;
}

article.stand-alone div.body {
  padding: 20px 0 0 0;
  margin: 25px 0;
  border-top: 1px solid #ddd;
}

article.stand-alone figure {
  margin: 20px 0;
}

/**
 * OSM layer.
 */
.osm-layer {
  display: none;
  position: relative;
  background-color: white;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 20%);
  margin-top: -150px;
  padding-top: 150px;
  text-align: center;
}

.osm-layer .close.button {
  margin-right: 4em;
}

ol.benefits > li {
  margin: 0.6em 0;
}

ol.benefits > li > span {
  font-size: 26px;
  margin-right: 10px;
  color: #fc8259;
  vertical-align: middle;
}

.osm-layer p:last-child {
  margin-top: 3em;
  font-size: 1em;
}

/**
 * By-line.
 */
p.by-line {
  margin-bottom: 0.8em;
}

p.by-line > span,
p.by-line a {
  text-transform: uppercase;
  color: #fc8259;
  font-weight: 800;
}

p.by-line > a {
  font-size: 26px;
  vertical-align: middle;
  margin: 0 5px;
}

/**
 * Image list.
 */
article .image-list figure {
  margin: 0;
}

div.body .image-list {
  float: right;
  margin-left: 20px;
  width: 50%;
}

/**
 * Links.
 */
.links li {
  margin: 0.5em 0;
}

.links h4 {
  color: #32353a;
  margin: 2em 0 1em 0;
}

/**
 * Banners.
 */
.banner {
  text-align: center;
}

.banner > div {
  overflow: hidden;
}

#dfp-in-article {
  float: right;
  clear: right;
  margin: 0 0 20px 20px;
}

/**
 * Fixed box.
 */
div.fixed-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  opacity: 0.9;
  z-index: 4;
  padding: 0.5em 1em;
  background-color: #eff0fb;
}

div.fixed-box p {
  max-width: none;
  margin: 1em 0;
}

div.fixed-box a {
  text-decoration: underline;
}

/**
 * About us.
 */
.staff {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  justify-content: center;
  -webkit-justify-content: center;
}

.member {
  width: 240px;
  margin: 10px;
  text-align: center;
}

.member img {
  margin: 0 auto;
  border-radius: 115px;
  max-width: 115px;
}

.member h5 {
  font-weight: normal;
  margin-bottom: 0;
}

.member h5 a {
  color: #2782ed;
}

.member p {
  margin: 0;
}

.member p:last-child {
  font-size: 12px;
  color: #888;
  margin-top: 10px;
}

/**
 * Band.
 */
.band {
  margin: 30px 0;
}

.band div:first-child {
  position: relative;
  overflow: hidden;
  height: 300px;
  /* http://colorzilla.com/gradient-editor/#27303f+0,27303f+100&0+20,1+50 */
  background: -moz-linear-gradient(left, rgba(39,48,63,0) 0%, rgba(39,48,63,0) 20%, rgba(39,48,63,1) 50%, rgba(39,48,63,1) 100%); /* FF3.6+ */
  background: -webkit-linear-gradient(left, rgba(39,48,63,0) 0%, rgba(39,48,63,0) 20%, rgba(39,48,63,1) 50%, rgba(39,48,63,1) 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(left, rgba(39,48,63,0) 0%, rgba(39,48,63,0) 20%, rgba(39,48,63,1) 50%, rgba(39,48,63,1) 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(left, rgba(39,48,63,0) 0%, rgba(39,48,63,0) 20%, rgba(39,48,63,1) 50%, rgba(39,48,63,1) 100%); /* IE10+ */
  background: linear-gradient(to right, rgba(39,48,63,0) 0%, rgba(39,48,63,0) 20%, rgba(39,48,63,1) 50%, rgba(39,48,63,1) 100%); /* W3C */
  filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#0027303f', endColorstr='#27303f', GradientType=1)"; /* IE6-9 */
}

.band h2 {
  color: white;
  font-family: "Bitter";
  font-size: 2.5em;
  text-shadow: 1px 1px #1d2732;
  max-width: 800px;
  margin: 0.2em auto 0.5em auto;
}

.band h4 {
  font-family: "Bitter";
  font-size: 1.2em;
  line-height: 1.2em;
  text-transform: none;
  margin: 0;
}

.band p {
  color: white;
  margin: 0 auto;
  text-shadow: 1px 1px #1d2732;
}

.band img {
  position: relative;
  z-index: -1;
  height: 100%;
  min-width: 50%;
  width: auto;
}

.band div div {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  padding: 30px;
}

/**
 * Line content separator.
 */
.line-sep:after {
  content: "";
  display: block;
  margin-top: 2em;
  background-color: #ddd;
  height: 1px;
}

.line-sep:last-child:not(:first-child):after {
  background-color: transparent;
}

/**
 * Wide.
 */
.stand-alone .wide img {
  margin-left: -30px;
  width: calc(100% + 30px);
}

/**
 * Grid.
 */
.grid {
  margin: 0 -15px;
}

.grid + .grid {
  margin-top: 30px;
}

/**
 * Grid, column.
 */
[class*='col-'] {
  float: left;
  padding: 0 15px;
}

/**
 * Grid, widths.
 *
 * IE does not like 100%.
 */
.col-7 {
  width: calc(7/24 * 99.99%);
}

.col-8 {
  width: calc(8/24 * 99.99%);
}

.col-12 {
  width: calc(12/24 * 99.99%);
}

.col-16 {
  width: calc(16/24 * 100%);
}

.col-17 {
  width: calc(17/24 * 100%);
}

.col-24 {
  width: 100%;
}

/**
 * Grid layouts.
 */
.layout-compact .grid > div {
  width: 100%;
}

.layout-compact h4:first-child {
  margin-top: 1em;
}