@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Lato:100&text=CSSOFF);
@import url(http://fonts.googleapis.com/css?family=Lora:700italic&text=FEATURMBodelx%20);
@import url(http://fonts.googleapis.com/css?family=Merriweather:900?text=GRoutergy%20);
@import url(http://fonts.googleapis.com/css?family=Lora:400italic);
@import url(http://fonts.googleapis.com/css?family=Oswald:400|Merriweather:300,400|Lato:400);
/**
 * www.KNACSS.com V2.9 @author: Raphael Goetter, Alsacreations
 * Licence CC-BY http://creativecommons.org/licenses/by/3.0/fr/
 *
 * Sass version maintained by @HugoGiraudel
 * https://github.com/HugoGiraudel/KNACSS-Sass
 */
/**
 * 1. Enable support for old browsers (IE8-, Firefox 3.6)
 * 2. Enable print stylesheet
 * 3. Gutter value for grid layouts
 * 4. Base font size: must be unitless
 * 5. Font stacks
 */
/* 1 */
/* 1 */
/* 2 */
/* 3 */
/* 4 */
/* 5 */
/* Colors replaced by opacity apply */
/* $color-taupe-darker : #524741; */
/* Colors replaced by opacity apply */
/* $color-frank-blue-light : #88AED1; */
/* $color-frank-blue-lighter : #619CC9; */
/*----------------------------*\
 * Mixins                     *
\*----------------------------*/
/**
 * Mixin to handle media queries and retina
 */
/**
 * Mixin to handle REM font sizing with PX fallback
 */
/**
 * Compass-like inline-block mixin
 */
/**
 * Mixin to prefix properties
 */
/*----------------------------*\
 * Soft reset                 *
\*----------------------------*/
html, body {
  margin: 0;
  padding: 0;
}

ul, ol {
  padding-left: 2em;
}
ul.unstyled, ol.unstyled {
  list-style: none;
}

code, pre, samp, kbd {
  white-space: pre-wrap;
  font-family: "Consolas", "DejaVu Sans Mono", "Courier", monospace;
  line-height: 1em;
}

code, kbd, mark {
  border-radius: 2px;
}

em {
  font-style: italic;
}

strong {
  font-weight: bold;
}

kbd {
  padding: 0 2px;
  border: 1px solid #999;
}

code {
  padding: 2px 4px;
  background: rgba(0, 0, 0, 0.04);
  color: #b11;
}

mark {
  padding: 2px 4px;
  background: #ff0;
}

sup, sub {
  vertical-align: 0;
  position: relative;
}

sup {
  bottom: 1ex;
}

sub {
  top: .5ex;
}

/**
 * Avoid top margins on first content element 
 */
p:first-child, ul:first-child, ol dl:first-child,
blockquote:first-child, pre:first-child,
h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {
  margin-top: 0;
}

/**
 * Avoid margins on nested elements 
 */
li p, li ul, li ol {
  margin-top: 0;
  margin-bottom: 0;
}

/**
 * Prevents those to break out of their container
 */
img, table, td,
blockquote, code, pre,
textarea, input, video {
  max-width: 100%;
}

/**
 * Pictures
 * 1. Bugfix for IE8
 * 2. Bugfix for Gmap3 
 * 3. Remove blue border on IE
 */
img {
  vertical-align: middle;
  width: auto;
  /* 1 */
}
img :not(.gm-style),
img :not(.gmnoscreen),
img :not(.gmnoprint) {
  height: auto !important;
  /* 2 */
}
img .gm-style,
img .gmnoscreen,
img .gmnoprint {
  max-width: none !important;
  /* 2 */
}
a img {
  border: 0;
  /* 3 */
}

/**
 * Hide script and style tags in case of table mode
 */
body > script,
body > style {
  display: none !important;
}

/**
 * Force word wrapping on small screens
 */
@media (max-width: 768px) {
  div, textarea,
  table, td, th,
  code, pre, samp {
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
  }
}
/*----------------------------*\
 * IE Fix                     *
\*----------------------------*/
/**
 * HasLayout for IE6/IE7 
 */
.row, .col {
  *zoom: 1;
}

/**
 * Warning: .col needs a width on IE6/IE7 
 */
.col {
  *display: inline;
  *zoom: 1;
}

/**
 * Add a slash at the end of this comment
 * If you want to enable box-sizing for IE6/IE7
 * with a polyfill 
 * Source: https://github.com/Schepp/box-sizing-polyfill *  
* {
  behavior: url(/js/boxsizing.htc);
}
/**/
/* ----------------------------- */
/* ==typography                  */
/* ----------------------------- */
/* CSSOFF */
/* FEATURE|Model Box */
/* Route Gregory */
/**
 * 1. Put the base font-size at 14px
 */
body {
  font-size: 14px;
  font-size: 1rem;
  /* 1 */
  background: white;
}

/**
 * Font-sizing for content
 * Preserves vertical-rythm
 * Source: http://soqr.fr/vertical-rhythm/
 */
p, ul, ol, dl,
blockquote, pre,
td, th,
label, textarea,
caption, figure {
  line-height: 1.5;
  margin: .75em 0 0;
}

/**
 * 1. Orientation iOS font-size fix
 */
html {
  font-family: "Lato", sans-serif;
  line-height: 1.5;
  color: #000;
}
@media (orientation: landscape) and (max-device-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
    /* 1 */
  }
}

h1, h2, h3, h4, h5, h6 {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* mod-header */
.mod-header:before, .mod-header > .mod-box:before {
  display: block;
  position: absolute;
  content: "";
  width: 10000em;
}
.mod-header:before {
  background: #cfcbde;
  top: 0;
  z-index: -35;
}
.mod-header > .mod-box:before {
  background: #d9d5e5;
  /* Old browsers */
  background: -moz-linear-gradient(top, #d9d5e5 0%, #cfcbde 100%);
  /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d5e5), color-stop(100%, #cfcbde));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #d9d5e5 0%, #cfcbde 100%);
  /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #d9d5e5 0%, #cfcbde 100%);
  /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #d9d5e5 0%, #cfcbde 100%);
  /* IE10+ */
  background: linear-gradient(to bottom, #d9d5e5 0%, #cfcbde 100%);
  /* W3C */
  top: 117%;
  bottom: -68.2%;
  z-index: -30;
  right: 0;
}
.mod-header > .site-title {
  z-index: -5;
  color: #FFF;
  font-size: 17.45em;
  margin-left: 9%;
  padding: 0.125em 0 0 0.035em;
  max-width: 500px;
  margin-bottom: 0.165em;
  font-family: "Lato", sans-serif;
  font-weight: 100;
  letter-spacing: -0.04em;
  line-height: 0.805;
  z-index: 10;
  position: relative;
}
.mod-header > .site-title:first-line {
  letter-spacing: 0.038em;
}
.mod-header > .subtitle {
  float: right;
  color: #b0aeb8;
  font-family: "Lora", serif;
  font-style: italic;
  font-size: 0.8em;
  margin-top: -393px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* mod-box */
.mod-box {
  text-align: center;
  color: #5f5d66;
  max-width: 440px;
  margin-bottom: 3em;
  margin-left: 11%;
}
.mod-box .mod-box-title {
  margin: 0.29em 0 -.5em;
  font-family: "Lora", serif;
  font-weight: 700;
  font-style: italic;
  font-size: 2.25em;
}
.mod-box .mod-box-content {
  font-size: 1.25em;
  margin-top: 1.1em;
  letter-spacing: -0.037em;
  line-height: 1.36em;
  margin-left: 40px;
  margin-right: 40px;
}
.mod-box .mod-box-figure {
  position: relative;
  display: inline-block;
  padding-right: 11px;
}
.mod-box .mod-box-figure img, .mod-box .mod-box-figure:before {
  box-shadow: 0 21px 9px -15px #7A6D64, 23px -23px 8px -20px #D9D5E5;
}
.mod-box .mod-box-figure img {
  position: inherit;
  z-index: 35;
}
.mod-box .mod-box-figure:before {
  position: absolute;
  background: url("../img/box-cover.jpg");
  width: 193px;
  height: 289px;
  content: "";
  left: -151px;
  top: -16px;
  z-index: 30;
}
.mod-box:hover .mod-box-figure:before {
  -webkit-transition: -webkit-transform .5s;
  transition: transform .5s;
  -webkit-transform: rotate(-2.5deg) translateY(10px) translateX(-30px);
  -webkit-transform-origin: 0% 85%;
  -ms-transform: rotate(-2.5deg) translateY(10px) translateX(-30px);
  -ms-transform-origin: 0% 85%;
  transform: rotate(-2.5deg) translateY(10px) translateX(-30px);
  transform-origin: 0% 85%;
}

/* mod-feature */
.mod-feature {
  position: relative;
  margin-left: 45.5%;
  padding-left: 2em;
}
.mod-feature > * {
  max-width: 506px;
}
.mod-feature > header {
  position: relative;
}
.mod-feature > header > * {
  z-index: 40;
  position: relative;
}
.mod-feature > header:before {
  content: "";
  display: block;
  position: absolute;
  left: -10.5em;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgd2lkdGg9IjQyMCIKICAgaGVpZ2h0PSIyNiI+CiAgPGRlZnMKICAgICBpZD0iZGVmczM5NzEiPgogICAgPGxpbmVhckdyYWRpZW50CiAgICAgICBpZD0ibGluZWFyR3JhZGllbnQ0NjUwIj4KICAgICAgPHN0b3AKICAgICAgICAgc3R5bGU9InN0b3AtY29sb3I6IzVlNWU1ZTtzdG9wLW9wYWNpdHk6MDsiCiAgICAgICAgIG9mZnNldD0iMCIKICAgICAgICAgaWQ9InN0b3A0NjUyIiAvPgogICAgICA8c3RvcAogICAgICAgICBpZD0ic3RvcDQ2NjAiCiAgICAgICAgIG9mZnNldD0iMC41IgogICAgICAgICBzdHlsZT0ic3RvcC1jb2xvcjojNWU1ZTVlO3N0b3Atb3BhY2l0eToxOyIgLz4KICAgICAgPHN0b3AKICAgICAgICAgc3R5bGU9InN0b3AtY29sb3I6IzVlNWU1ZTtzdG9wLW9wYWNpdHk6MDsiCiAgICAgICAgIG9mZnNldD0iMSIKICAgICAgICAgaWQ9InN0b3A0NjU0IiAvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxsaW5lYXJHcmFkaWVudAogICAgICAgaWQ9ImxpbmVhckdyYWRpZW50NDUyMiI+CiAgICAgIDxzdG9wCiAgICAgICAgIGlkPSJzdG9wNDUyNCIKICAgICAgICAgb2Zmc2V0PSIwIgogICAgICAgICBzdHlsZT0ic3RvcC1jb2xvcjojNWU1ZTVlO3N0b3Atb3BhY2l0eToxOyIgLz4KICAgICAgPHN0b3AKICAgICAgICAgaWQ9InN0b3A0NTI2IgogICAgICAgICBvZmZzZXQ9IjEiCiAgICAgICAgIHN0eWxlPSJzdG9wLWNvbG9yOiM1ZTVlNWU7c3RvcC1vcGFjaXR5OjA7IiAvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICAgIDxyYWRpYWxHcmFkaWVudAogICAgICAgaW5rc2NhcGU6Y29sbGVjdD0iYWx3YXlzIgogICAgICAgeGxpbms6aHJlZj0iI2xpbmVhckdyYWRpZW50NDUyMiIKICAgICAgIGlkPSJyYWRpYWxHcmFkaWVudDQ1MjAiCiAgICAgICBjeD0iNDk0IgogICAgICAgY3k9IjcwMyIKICAgICAgIGZ4PSI0OTQiCiAgICAgICBmeT0iNzAzIgogICAgICAgcj0iODgiCiAgICAgICBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLDAuNDA3NTU0NjQsMCw0ODcuMzgwNTkpIgogICAgICAgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiCiAgICAgICBzcHJlYWRNZXRob2Q9InBhZCIgLz4KICAgIDxyYWRpYWxHcmFkaWVudAogICAgICAgaW5rc2NhcGU6Y29sbGVjdD0iYWx3YXlzIgogICAgICAgeGxpbms6aHJlZj0iI2xpbmVhckdyYWRpZW50NDUyMi02IgogICAgICAgaWQ9InJhZGlhbEdyYWRpZW50NDUyMC01IgogICAgICAgY3g9IjQ5NCIKICAgICAgIGN5PSI3MDMiCiAgICAgICBmeD0iNDk0IgogICAgICAgZnk9IjcwMyIKICAgICAgIHI9Ijg4IgogICAgICAgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwwLjQwNzU1NDY0LDAsNDg3LjM4MDU5KSIKICAgICAgIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIgogICAgICAgc3ByZWFkTWV0aG9kPSJwYWQiIC8+CiAgICA8bGluZWFyR3JhZGllbnQKICAgICAgIGlua3NjYXBlOmNvbGxlY3Q9ImFsd2F5cyIKICAgICAgIHhsaW5rOmhyZWY9IiNsaW5lYXJHcmFkaWVudDQ2NTAiCiAgICAgICBpZD0ibGluZWFyR3JhZGllbnQ0NjU4IgogICAgICAgeDE9IjYzLjc4Mjg0NSIKICAgICAgIHkxPSIxMi45MTg4ODIiCiAgICAgICB4Mj0iMTI1Ljg0MzMxIgogICAgICAgeTI9IjEyLjkxODg4MiIKICAgICAgIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIgogICAgICAgc3ByZWFkTWV0aG9kPSJwYWQiCiAgICAgICBncmFkaWVudFRyYW5zZm9ybT0ibWF0cml4KDAuNDEzNzQ3OTMsMCwwLDIuNDE2OTMwNCwtMjYuMzA5ODMzLC0xMjYuMDM3MTIpIiAvPgogIDwvZGVmcz4KICA8ZwogICAgIGlkPSJsYXllcjEiID4KICAgIDxwYXRoCiAgICAgICBzb2RpcG9kaTp0eXBlPSJhcmMiCiAgICAgICBzdHlsZT0iZmlsbDp1cmwoI3JhZGlhbEdyYWRpZW50NDUyMCk7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICBpZD0icGF0aDM5MTctNyIKICAgICAgIHNvZGlwb2RpOmN4PSI0OTQiCiAgICAgICBzb2RpcG9kaTpjeT0iNzc0IgogICAgICAgc29kaXBvZGk6cng9Ijg4IgogICAgICAgc29kaXBvZGk6cnk9IjM1IgogICAgICAgZD0ibSA1ODEuNzkxNzQsNzc0IGEgODgsMzUgMCAxIDEgLTE3NiwwIgogICAgICAgc29kaXBvZGk6c3RhcnQ9IjAiCiAgICAgICBzb2RpcG9kaTplbmQ9IjMuMTQxNTkyNyIKICAgICAgIHNvZGlwb2RpOm9wZW49InRydWUiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgwLC0wLjE0NjIyODExLDguNDcyNDIzNSwwLC02NDMxLjQwODYsODUuMTU0NDkxKSIgLz4KICAgIDxwYXRoCiAgICAgICBzb2RpcG9kaTp0eXBlPSJhcmMiCiAgICAgICBzdHlsZT0iZmlsbDp1cmwoI3JhZGlhbEdyYWRpZW50NDUyMCk7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgICBpZD0icGF0aDM5MTctNy01IgogICAgICAgc29kaXBvZGk6Y3g9IjQ5NCIKICAgICAgIHNvZGlwb2RpOmN5PSI3NzQiCiAgICAgICBzb2RpcG9kaTpyeD0iODgiCiAgICAgICBzb2RpcG9kaTpyeT0iMzUiCiAgICAgICBkPSJtIDU4MS43OTE3NCw3NzQgYSA4OCwzNSAwIDEgMSAtMTc2LDAiCiAgICAgICBzb2RpcG9kaTpzdGFydD0iMCIKICAgICAgIHNvZGlwb2RpOmVuZD0iMy4xNDE1OTI3IgogICAgICAgc29kaXBvZGk6b3Blbj0idHJ1ZSIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDAsMC4xNDYyMjgxMiwtMS44NjgwMTk5LDAsMTUwOS41NDEyLC01OS4zMTY3MzIpIiAvPgogICAgPHJlY3QKICAgICAgIHN0eWxlPSJmaWxsOnVybCgjbGluZWFyR3JhZGllbnQ0NjU4KTtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgIGlkPSJyZWN0NDY0NiIKICAgICAgIHdpZHRoPSIyNiIKICAgICAgIGhlaWdodD0iNjMiCiAgICAgICB4PSIwIgogICAgICAgeT0iLTEyNi40IgogICAgICAgcnk9IjAiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgwLDEsLTEsMCwwLDApIiAvPgogIDwvZz4KPC9zdmc+);
  background-size: contain;
  background-repeat: no-repeat;
  bottom: -0.7em;
  height: 2em;
  width: 60em;
  z-index: -5;
}
.mod-feature .mod-feature-subtitle {
  font-family: "Lora", serif;
  font-weight: 700;
  font-style: italic;
  color: #c3b19a;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.mod-feature .mod-feature-title {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 4.5em;
  line-height: 1.1em;
  color: #fdcd84;
  margin: 0;
  text-transform: uppercase;
}
.mod-feature .mod-feature-content {
  font-family: "Merriweather", serif;
  font-size: 1.5em;
  line-height: 1.4;
  margin-top: -0.37em;
}
.mod-feature > img {
  transform: rotate(-3.8deg);
  -webkit-transform: rotate(-3.8deg);
  -ms-transform: rotate(-3.8deg);
  max-width: 794px;
  margin-left: -7.4em;
  margin-top: -36.5em;
  z-index: 5;
}
.mod-feature:hover > img {
  -webkit-transition: -webkit-transform .5s;
  transition: transform .5s;
  transform: rotate(-1deg);
  -webkit-transform: rotate(-1deg);
  -ms-transform: rotate(-1deg);
}
.mod-feature:hover > header:before {
  -webkit-transition: -webkit-transform .5s;
  transition: transform .5s;
  transform: translateX(250px) scaleX(1.5) scaleY(0.65);
  -webkit-transform: translateX(250px) scaleX(1.5) scaleY(0.65);
  -ms-transform: translateX(250px) scaleX(1.5) scaleY(0.65);
}

.mod-afloat {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  text-align: right;
}
.mod-afloat h2 {
  color: #24795a;
  font-size: 1.3125rem;
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: 0;
}
.mod-afloat p {
  font-family: "Lato", sans-serif;
  font-size: .84em;
  line-height: 1.5;
  word-spacing: -1px;
  letter-spacing: -.01em;
  padding-bottom: 1.3em;
  margin-top: .25em;
}

/* mod-bullets */
.mod-bullets {
  margin-bottom: 1.1em;
}
.mod-bullets header {
  overflow: hidden;
  border: 1px solid #e5e5e5;
  border-width: 1px 0;
  padding: .75rem 0;
  width: 100%;
}
.mod-bullets header > * {
  text-transform: uppercase;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
}
.mod-bullets h2 {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 1rem;
  font-weight: 300;
  color: #a97d35;
  width: 40%;
  text-align: right;
}
.mod-bullets p {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-size: .75rem;
  width: 58%;
  color: #e0c167;
}
.mod-bullets ul {
  padding-left: 0;
}
.mod-bullets li {
  width: 20%;
  display: table-cell;
  font-size: 2rem;
  color: #e0e0e0;
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  text-align: justify;
}
.mod-bullets figure {
  margin-top: 0;
}
.mod-bullets figcaption {
  -webkit-transform: translateY(-1.6em);
  -ms-transform: translateY(-1.6em);
  transform: translateY(-1.6em);
}
.mod-bullets li + li {
  border-left: 1px solid;
}

/* mod-famous */
.mod-famous {
  font-family: "Merriweather", serif;
  color: #fff;
  clear: both;
  background: #71625a;
}
.mod-famous footer a {
  color: #fff;
  opacity: .5;
  display: inline-block;
  padding: 1em;
  font-size: 1.1em;
  text-decoration: none;
  padding: 1.2em 2.5% 1.65em;
}
.mod-famous footer a:hover {
  text-decoration: underline;
  opacity: 1;
}
.mod-famous p {
  font-size: 1.7em;
  letter-spacing: -0.04em;
  line-height: 1.3em;
  margin: 0;
  padding: 0.73em 2.5% 0;
}

.mod-famous-title {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  font-size: 3.1em;
  margin: 0;
  padding: 0.5em 0.35em 0.35em 0;
  background: rgba(0, 0, 0, 0.3333);
  text-indent: .6em;
  letter-spacing: -0.055em;
  word-spacing: 4px;
  text-align: center;
  padding-right: 0.4em;
}

#news h2 {
  font-weight: normal;
}

/* mod-bottom-aside */
.mod-bottom-aside {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  margin-top: .9em;
  color: #fff;
  opacity: .99;
}
.mod-bottom-aside h2 {
  margin: 0;
}
.mod-bottom-aside > article {
  border: #234f70 dashed;
  background: #3a83bb;
  border-width: 2px 0;
  width: 225px;
}
.mod-bottom-aside > article:nth-child(2n) {
  border: #3476a8 solid;
  border-width: 5px 0;
}
.mod-bottom-aside > article:last-child {
  border-bottom: 0;
}
.mod-bottom-aside > article:first-child {
  border-top: 0;
}
.mod-bottom-aside > article > * {
  margin: 0 12px;
}
.mod-bottom-aside .mod-bottom-aside-content {
  font-family: "Lora", serif;
  font-style: italic;
  text-transform: none;
  font-size: 1.07em;
  letter-spacing: -0.045em;
  margin-bottom: 22px;
  line-height: 1.4em;
}
.mod-bottom-aside .progress-bar {
  clear: both;
  width: 95.5%;
  margin: 7px 0 16px;
}
.mod-bottom-aside:hover > .mod-event {
  -webkit-transition: -webkit-transform .5s;
  transition: transform .5s;
  -webkit-transform: rotate(-2.5deg) translateY(3px);
  -webkit-transform-origin: 70% 5%;
  -ms-transform: rotate(-2.5deg) translateY(3px);
  -ms-transform-origin: 70% 5%;
  transform: rotate(-2.5deg) translateY(3px);
  transform-origin: 70% 5%;
}

.mod-bluray header > * {
  font-size: 1.32em;
  margin-top: 0;
  margin-bottom: 11px;
}
.mod-bluray h2 {
  font-size: 1.8em;
  margin-bottom: -.03em;
}
.mod-bluray img {
  width: 298px;
  max-width: 298px;
  margin: -66px 0 -84px -33px;
}

.mod-rating {
  padding: .5em 0;
}
.mod-rating h2 {
  opacity: .35;
  float: left;
  width: 46%;
  font-size: 1.88em;
  margin-top: 0;
  line-height: .9em;
}
.mod-rating h2:first-line {
  font-size: .8rem;
}
.mod-rating p {
  margin-top: 0;
  font-size: 3.1em;
  line-height: 1.2;
}

.mod-event {
  padding-top: 1em;
  padding-bottom: 2em;
  position: relative;
}
.mod-event p:first-child:before {
  content: "";
  border: #FFF solid;
  border-width: 0 2.8em;
  width: 100%;
  height: .9em;
  display: block;
  top: 5px;
  position: absolute;
  opacity: .6;
}
.mod-event *:nth-child(2n+1) {
  opacity: .35;
}
.mod-event p:first-child {
  position: relative;
  text-align: center;
  font-size: .91em;
}
.mod-event .location {
  font-size: 1.65em;
  margin-top: -0.17em;
}
.mod-event .name {
  font-size: 1.7em;
  font-weight: normal;
  margin-top: -0.24em;
}
.mod-event time {
  display: block;
  font-size: 2.4em;
  line-height: 0.85em;
}
.mod-event:after {
  margin: 0 auto;
  content: "";
  height: 14px;
  width: 28px;
  border-radius: 14px 14px 0 0;
  background: #fff;
  position: absolute;
  bottom: -2px;
  left: 44%;
}

.progress-bar {
  display: block;
  background: rgba(255, 255, 255, 0.2);
  height: 7px;
}
.progress-bar:before {
  content: "";
  display: block;
  height: inherit;
  background: #fff;
}
.progress-bar.p20:before {
  width: 20%;
}
.progress-bar.p0:before {
  width: 0;
}

.mod-quotes {
  clear: both;
}
.mod-quotes .mod-quotes-title {
  height: 307px;
  background: url("../img/overflow.jpg");
  white-space: nowrap;
  overflow: hidden;
  text-indent: 110%;
  margin-bottom: -5.5em;
}
.mod-quotes blockquote {
  font-family: "Lora", serif;
  font-style: italic;
  line-height: 1.65em;
  font-style: italic;
  letter-spacing: -0.021em;
  opacity: 0.7;
  width: 75%;
  clear: both;
  margin-top: 0.5em;
  float: right;
  text-align: right;
  -webkit-transform: rotate(2deg) translateX(-0.85em) skewX(3deg);
  -ms-transform: rotate(2deg) translateX(-0.85em) skewX(3deg);
  transform: rotate(2deg) translateX(-0.85em) skewX(3deg);
}
.mod-quotes blockquote + blockquote {
  float: none;
  text-align: left;
  width: 70%;
  -webkit-transform: rotate(-0.7deg) translateX(0.5em) translateY(-0.4em);
  -ms-transform: rotate(-0.7deg) translateX(0.5em) translateY(-0.4em);
  transform: rotate(-0.7deg) translateX(0.5em) translateY(-0.4em);
}
.mod-quotes blockquote + blockquote + blockquote {
  width: 73%;
  margin: 0 auto;
  -webkit-transform: rotate(0.9deg) translateX(-0.45em) translateY(1.4em);
  -ms-transform: rotate(0.9deg) translateX(-0.45em) translateY(1.4em);
  transform: rotate(0.9deg) translateX(-0.45em) translateY(1.4em);
}

body > footer {
  font-family: "Lato", sans-serif;
  border-top: #E5E5E5 solid 1px;
  padding: 1.15em 0 5.7em;
  margin: 5.7em auto 3.2em;
}
body > footer h2 {
  float: left;
  font-size: .9em;
  opacity: .6;
}
body > footer h2 em {
  opacity: .6;
}
body > footer .vcard {
  font-family: "Merriweather", serif;
  float: right;
  line-height: 1.55em;
  margin-top: 0.15em;
  text-align: right;
  font-size: 0.8em;
  opacity: .4;
}
body > footer .vcard .name {
  font-family: "Merriweather", serif;
  font-weight: 900;
}

.mod-bottom-aside + article {
  overflow: hidden;
  border-right: 1px solid #e5e5e5;
}

[id="news-title"] {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  background: url("../img/heads.jpg") no-repeat 0 0;
  background-size: 100%;
  padding: 0;
  padding-top: 152px;
  font-size: 5.125em;
  margin-bottom: 0;
  border-bottom: .2em solid;
  text-transform: uppercase;
}
[id="news-title"] + h3 {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
  font-size: 2.4375em;
  border-bottom: .1em solid;
  margin: 0;
  padding: .25em 0;
}
[id="news-title"] li {
  font-family: "Merriweather", serif;
  font-weight: 300;
  display: inline;
  font-size: 1.375em;
}
[id="news-title"] li + li:before {
  content: '•';
  font-family: "Merriweather", serif;
  font-weight: 900;
}
[id="news-title"] strong {
  font-family: "Merriweather", serif;
  font-weight: 900;
}

*,
*:after,
*:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#page {
  max-width: 1280px;
  margin: 0 auto;
}

#skiplink {
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  position: absolute;
}

main, body > footer {
  clear: both;
  max-width: 960px;
  margin: 2em auto;
}

/* Responsive */
/* level 1 only (over 1200) */
@media screen and (min-width: 1200px) {
  .mod-header > .subtitle {
    margin-right: 12.66%;
  }
  .mod-header:before, .mod-header > .mod-box:before {
    right: 54.5%;
  }
  .mod-header:before {
    bottom: -5em;
  }
  .mod-header > .mod-box:before {
    bottom: -5em;
    top: 43.6em;
  }

  .mod-afloat {
    float: left;
    margin-bottom: -1.5em;
    padding: 0 2% 200px;
    overflow: hidden;
    width: 16.5%;
    background: url("../img/float.png") no-repeat bottom center;
  }

  .mod-box {
    float: left;
  }
  .mod-box .mod-box-content {
    max-width: 360px;
  }

  .mod-bullets {
    width: 83%;
  }
}
/* level 1 to 3 (over 680) */
@media screen and (min-width: 680px) {
  .mod-box {
    margin-top: -4.9em;
  }

  .mod-bottom-aside {
    float: right;
  }
  .mod-bottom-aside + article {
    margin-right: 15em;
    padding-right: .75em;
  }
}
/* level 2 and 3 (1200 < 680) */
@media screen and (max-width: 1200px) and (min-width: 680px) {
  .mod-box h2 {
    padding-left: 4em;
  }
  .mod-box .mod-box-content {
    max-width: 80%;
    text-align: left;
    padding-left: 242px;
  }
}
/* level 2 to 5 (under 1200) */
@media screen and (max-width: 1200px) {
  .mod-header:before, .mod-header > .mod-box:before {
    left: 0;
    width: 545px;
  }
  .mod-header:before {
    bottom: 21em;
  }
  .mod-header > .mod-box:before {
    top: 53%;
    bottom: 8%;
  }

  .mod-box {
    max-width: 90%;
  }
  .mod-box .mod-box-figure {
    float: left;
  }
  .mod-box .mod-box-figure img, .mod-box .mod-box-figure:before {
    margin-left: 4em;
  }

  .mod-feature {
    clear: both;
    margin-top: 31em;
    margin-left: 10%;
  }
  .mod-feature .mod-feature-content {
    max-width: 90%;
  }

  .mod-afloat {
    padding-right: 147px;
    background-position: 100% 0;
    position: relative;
  }
  .mod-afloat:after {
    position: absolute;
    top: 0;
    right: 0;
    height: 200px;
    width: 147px;
    background: url("../img/float.png") no-repeat;
    content: "";
  }

  body > footer {
    margin: 2em .5em;
  }
}
/* level 3 to 5 (under 880) */
@media screen and (max-width: 880px) {
  [id="news-title"] {
    font-size: 3em;
    padding-top: 130px;
  }

  .mod-feature {
    margin-top: 25em;
  }

  .subtitle time {
    display: block;
  }
}
/* level 4 and 5 (under 680) */
@media screen and (max-width: 680px) {
  .mod-header > .site-title {
    font-size: 11em;
  }
  .mod-header:before, .mod-header > .mod-box:before {
    width: 100%;
  }

  .mod-box .mod-box-figure {
    float: none;
    margin-top: -2em;
  }

  .mod-feature {
    margin-top: 16em;
  }
  .mod-feature img {
    margin-top: -29em;
    max-width: 140%;
  }

  .mod-bottom-aside {
    margin: .9em auto;
  }

  .mod-bluray img {
    margin-top: -42px;
  }

  .mod-bullets header {
    padding-right: 7.5rem;
  }

  .mod-bottom-aside > article {
    float: right;
  }
  .mod-bottom-aside article + article {
    margin-right: 3px;
  }
  .mod-bottom-aside + article {
    clear: right;
  }
}
/* level 5 only (under 470) */
@media screen and (max-width: 470px) {
  .mod-bottom-aside > article {
    width: 49%;
    margin-right: 0;
  }
}
.knacss-debug {
  background: pink;
  outline: 3px solid maroon;
}

#overlay {
  display: none;
  height: 4040px;
  position: absolute;
  opacity: .5;
  width: 100%;
  max-width: 100%;
  z-index: 999;
  pointer-events: none;
}

#overlay:after {
  content: "";
  display: block;
  background-image: url(../2013CSSOffDesign/cssoff-2013.png);
  max-width: 1280px;
  height: 4040px;
  margin: 0 auto;
  width: 100%;
  z-index: 999;
}

#overlay.active {
  display: block;
}

#overlay.active2 {
  display: block;
  opacity: 1;
}

.devtools {
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1000;
  padding: 0 0 1em 1em;
  background: rgba(128, 128, 128, 0.5);
  border-radius: 0 0 0 1em;
}

.oswald {
  font-family: "Oswald", sans-serif;
  font-weight: 300;
}

.merriweather {
  font-family: "Merriweather", serif;
}

.merriweather-light {
  font-family: "Merriweather", serif;
  font-weight: 300;
}

.merriweather-heavy {
  font-family: "Merriweather", serif;
  font-weight: 900;
}

.lato {
  font-family: "Lato", sans-serif;
}

.lato-hairline {
  font-family: "Lato", sans-serif;
  font-weight: 100;
}

.lora {
  font-family: "Lora", serif;
  font-style: italic;
}

.lora-bold {
  font-family: "Lora", serif;
  font-weight: 700;
  font-style: italic;
}