/* ==========================================================================
   Main
   ========================================================================== */
@font-face {
  font-family: 'Core Circus';
  src: url("fonts/corecircus/corecircuspierrot1.eot");
  src: url("fonts/corecircus/corecircuspierrot1.eot?#iefix") format('embedded-opentype'), url("fonts/corecircus/corecircuspierrot1.woff2") format('woff2'), url("fonts/corecircus/corecircuspierrot1.woff") format('woff'), url("fonts/corecircus/corecircuspierrot1.ttf") format('truetype'), url("fonts/corecircus/corecircuspierrot1.svg#core_circus_pierrot1regular") format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Montreal';
  src: url("fonts/montreal/montreal-regular.eot");
  src: url("fonts/montreal/montreal-regular.eot?#iefix") format('embedded-opentype'), url("fonts/montreal/montreal-regular.woff2") format('woff2'), url("fonts/montreal/montreal-regular.woff") format('woff'), url("fonts/montreal/montreal-regular.ttf") format('truetype'), url("fonts/montreal/montreal-regular.svg#montrealregular") format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Montreal';
  src: url("fonts/montreal/montreal-demibold.eot");
  src: url("fonts/montreal/montreal-demibold.eot?#iefix") format('embedded-opentype'), url("fonts/montreal/montreal-demibold.woff2") format('woff2'), url("fonts/montreal/montreal-demibold.woff") format('woff'), url("fonts/montreal/montreal-demibold.ttf") format('truetype'), url("fonts/montreal/montreal-demibold.svg#montreal-demiboldregular") format('svg');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Montreal';
  src: url("fonts/montreal/montreal-bold.eot");
  src: url("fonts/montreal/montreal-bold.eot?#iefix") format('embedded-opentype'), url("fonts/montreal/montreal-bold.woff2") format('woff2'), url("fonts/montreal/montreal-bold.woff") format('woff'), url("fonts/montreal/montreal-bold.ttf") format('truetype'), url("fonts/montreal/montreal-bold.svg#montrealbold") format('svg');
  font-weight: bold;
  font-style: normal;
}
/* HTML5 Boilerplate v5.0.0 | MIT License | http://h5bp.com/ */
.hidden {
  display: none !important;
  visibility: hidden;
}
.visuallyhidden,
.close span,
.social [href*="twitter.com/"] span,
.share [href*="twitter.com/"] span,
.social [href*="facebook.com/"] span,
.share [href*="facebook.com/"] span,
.social [href*="linkedin.com/"] span,
.share [href*="linkedin.com/"] span,
.social [href*="youtube.com/"] span,
.share [href*="youtube.com/"] span,
.social [href*="youtu.be/"] span,
.share [href*="youtu.be/"] span,
.social [href^="mailto:"] span,
.share [href^="mailto:"] span,
[href*=".pdf"] span,
[aria-controls*="nav"] span,
.modal .close span {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}
.invisible {
  visibility: hidden;
}
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.notransition {
  -webkit-transition: none !important;
          transition: none !important;
}
.noscroll {
  overflow: hidden;
}
@font-face {
  font-family: 'icon';
  src: url("fonts/icons/icomoon.eot?-a4mfdh");
  src: url("fonts/icons/icomoon.eot?#iefix-a4mfdh") format('embedded-opentype'), url("fonts/icons/icomoon.woff?-a4mfdh") format('woff'), url("fonts/icons/icomoon.ttf?-a4mfdh") format('truetype'), url("fonts/icons/icomoon.svg?-a4mfdh#icomoon") format('svg');
  font-weight: normal;
  font-style: normal;
}
/* HTML5 Boilerplate v5.0.0 | MIT License | http://h5bp.com/ */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}
::selection {
  background: #b3d4fc;
  text-shadow: none;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
textarea {
  resize: vertical;
}
* {
  box-sizing: border-box;
}
html {
  overflow-x: hidden;
  overflow-y: scroll;
/* Breakpoint 1 --------------------------------------------------------- */
}
@media only screen and (min-width: 48em) {
  html.noscroll {
    overflow-x: hidden;
    overflow-y: scroll;
  }
}
body {
  font: 1em/1.2 'Montreal', arial, verdana, sans-serif;
  color: #404040;
}
a {
  color: #404040;
  text-decoration: none;
}
a:focus,
a:hover,
a:active {
  text-decoration: underline;
}
p {
  margin: 0 0 1em;
}
img {
  max-width: 100%;
  height: auto;
}
.download {
  display: inline-block;
  position: relative;
  font-size: 0.687em;
  font-weight: bold;
  color: #e01512;
  text-transform: uppercase;
  line-height: 1;
  padding-right: 3.5em;
  vertical-align: middle;
}
.download:after {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 2em;
  vertical-align: middle;
}
.download strong {
  font-size: 1.182em;
}
.language {
  display: inline-block;
  padding: 0.2em 0.5em;
  font: 0.625em Arial, sans-serif;
  color: #404040;
  background-color: #e7e7e7;
  border-radius: 0.2em;
}
.close {
  border: 0;
  background: none;
  padding: 0;
}
.close:before {
  font-family: 'icon', sans-serif;
  content: "\e602";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
/* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.external:after {
  font-family: 'icon', sans-serif;
  content: "\e605";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
/* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 0.625em;
  margin-left: 0.7em;
}
.social a:focus,
.share a:focus,
.social a:hover,
.share a:hover,
.social a:active,
.share a:active {
  text-decoration: none;
}
.social [href*="twitter.com/"]:before,
.share [href*="twitter.com/"]:before {
  font-family: 'icon', sans-serif;
  content: "\e60b";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
/* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.social [href*="facebook.com/"]:before,
.share [href*="facebook.com/"]:before {
  font-family: 'icon', sans-serif;
  content: "\e606";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
/* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.social [href*="linkedin.com/"]:before,
.share [href*="linkedin.com/"]:before {
  font-family: 'icon', sans-serif;
  content: "\e607";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
/* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.social [href*="youtube.com/"],
.share [href*="youtube.com/"],
.social [href*="youtu.be/"],
.share [href*="youtu.be/"] {
  font-size: 1.2em;
}
.social [href*="youtube.com/"]:before,
.share [href*="youtube.com/"]:before,
.social [href*="youtu.be/"]:before,
.share [href*="youtu.be/"]:before {
  font-family: 'icon', sans-serif;
  content: "\ea99";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
/* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.social [href^="mailto:"]:before,
.share [href^="mailto:"]:before {
  font-family: 'icon', sans-serif;
  content: "\e600";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
/* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[href*=".pdf"]:after {
  font-family: 'icon', sans-serif;
  content: "\e609";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
/* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.social {
  font-size: 0.8em;
}
.social li {
  display: inline-block;
  vertical-align: middle;
}
.social li + li {
  padding-left: 0.7em;
  margin-left: 0.5em;
  border-left: 1px solid #e7e7e7;
}
.social a {
  color: #808080;
  display: inline-block;
  width: 1.5em;
  text-align: center;
}
.social a:focus,
.social a:hover,
.social a:active {
  text-decoration: none;
}
.share {
  padding-top: 1em;
  border-top: 1px solid #e7e7e7;
}
.share > span {
  font-size: 0.785714285714286em;
  text-transform: uppercase;
  font-weight: 600;
  vertical-align: middle;
}
.share ul {
  display: inline;
  vertical-align: middle;
  list-style: none;
  padding: 0;
  margin-left: 1em;
}
.share li {
  display: inline-block;
  margin-left: 0.3em;
  border-left: 1px solid #e7e7e7;
  padding-left: 0.7em;
}
.share li a {
  display: inline-block;
  width: 2em;
  text-align: center;
}
.tags {
  list-style: none;
  padding: 0;
  font-size: 0.785714285714286em;
  color: #404040;
}
.tags li {
  display: inline-block;
  margin: 0.5em 1.3em 0 0;
}
.tags button {
  background-color: #e7e7e7;
  border: 0;
  border-radius: 4px;
  padding: 0.4em 1em 0.2em;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.tags button:focus,
.tags button:hover,
.tags button:active {
  background-color: #dadada;
}
body > header {
  position: fixed;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%;
  max-width: 74em;
  background-color: #fff;
  z-index: 11;
}
.header-top {
  position: relative;
  background-color: #fff;
  padding: 0.5em 0.5em 0.7em;
  border-bottom: 1px solid #e7e7e7;
  text-align: center;
  z-index: 12;
/* Breakpoint 1 --------------------------------------------------------- */
}
@media only screen and (min-width: 48em) {
  .header-top {
    padding: 1.5em;
  }
}
.header-top a {
  display: inline-block;
}
.header-top .logo {
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  width: 50px;
/* Breakpoint 1 ----------------------------------------------------- */
}
@media only screen and (min-width: 48em) {
  .header-top .logo {
    top: 1em;
    left: 1em;
    width: auto;
  }
}
.header-top .title {
  width: 200px;
/* Breakpoint 1 ----------------------------------------------------- */
}
@media only screen and (min-width: 48em) {
  .header-top .title {
    width: auto;
  }
}
[aria-controls*="nav"] {
  display: block;
  position: absolute;
  top: 1.2em;
  right: 1.7em;
  z-index: 12;
/* Breakpoint 1 --------------------------------------------------------- */
}
[aria-controls*="nav"]:before {
  font-family: 'icon', sans-serif;
  content: "\e60c";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
/* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
[aria-controls*="nav"]:focus,
[aria-controls*="nav"]:hover,
[aria-controls*="nav"]:active {
  color: #e01512;
  text-decoration: none;
}
[aria-controls*="nav"][aria-expanded="true"]:before {
  font-family: 'icon', sans-serif;
  content: "\e601";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
/* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media only screen and (min-width: 48em) {
  [aria-controls*="nav"] {
    display: none;
  }
}
.collage-controls {
  background-color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 10;
  visibility: hidden;
  display: none;
  overflow-y: auto;
  -webkit-transition: top 0.3s ease-out, visibility 0s linear 0.3s;
          transition: top 0.3s ease-out, visibility 0s linear 0.3s;
/* Breakpoint 1 --------------------------------------------------------- */
}
.collage-controls[aria-hidden] {
  display: block;
  top: -100%;
}
.collage-controls[aria-hidden="false"] {
  top: 0;
  visibility: visible;
  -webkit-transition: top 0.3s ease-out, visibility 0s linear 0s;
          transition: top 0.3s ease-out, visibility 0s linear 0s;
}
@media only screen and (min-width: 48em) {
  .collage-controls {
    display: block;
    visibility: visible;
    overflow-y: visible;
    padding: 0;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 100%;
    max-width: 74em;
    height: auto;
    z-index: 12;
  }
}
[aria-controls*="menu"],
[aria-controls*="tag"] {
  display: inline-block;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #e7e7e7;
  background-color: #fbfbfb;
  padding: 1em;
  font-weight: bold;
  position: relative;
  font-size: 0.6875em;
  text-transform: uppercase;
  line-height: 2;
/* Breakpoint 1 --------------------------------------------------------- */
}
[aria-controls*="menu"]:after,
[aria-controls*="tag"]:after {
  font-family: 'icon', sans-serif;
  content: "\e604";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
/* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  top: 50%;
  right: 2em;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
[aria-controls*="menu"][aria-expanded="true"]:after,
[aria-controls*="tag"][aria-expanded="true"]:after {
  font-family: 'icon', sans-serif;
  content: "\e603";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
/* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
@media only screen and (min-width: 48em) {
  [aria-controls*="menu"],
  [aria-controls*="tag"] {
    line-height: 1.2;
    border: 0;
  }
}
[class$="-controls"] ul[aria-hidden="true"] {
  display: none;
}
[class$="-controls"] ul button {
  display: inline-block;
  width: 100%;
  border: 0;
  background: none;
  padding: 1em;
  position: relative;
}
[class$="-controls"] ul button[aria-selected="true"] {
  background-color: #e01512;
  color: #fff;
  font-weight: bold;
}
[class$="-controls"] ul button[aria-selected="true"]:after {
  font-family: 'icon', sans-serif;
  content: "\e602";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
/* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 0.8em;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 1.8em;
}
[class$="-controls"] ul button[disabled] {
  display: none;
}
@media only screen and (min-width: 48em) {
  [aria-controls*="menu"] {
    display: none;
  }
}
.section-controls ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}
.section-controls ul li {
  border-bottom: 1px solid #e7e7e7;
}
@media only screen and (min-width: 48em) {
  .section-controls ul {
    font-size: 0.85em;
    padding-right: 13em;
  }
  .section-controls ul li {
    display: inline-block;
    border-bottom: 0;
  }
  .section-controls ul button {
    width: auto;
  }
  .section-controls ul button[aria-selected="true"] {
    background-color: transparent;
    color: #404040;
    font-weight: normal;
  }
  .section-controls ul button[aria-selected="true"]:after {
    content: '';
    display: none;
  }
  .section-controls ul button:focus,
  .section-controls ul button:hover,
  .section-controls ul button:active,
  .section-controls ul button[aria-selected="true"] {
    text-decoration: underline;
  }
}
@media only screen and (min-width: 64em) {
  .section-controls ul {
    font-size: 1em;
    padding-right: 0;
  }
}
@media only screen and (min-width: 48em) {
  [aria-controls*="tags"] {
    position: absolute;
    bottom: 100%;
    right: 0;
    padding: 0 3em 0 2.3em;
    width: auto;
    height: 4em;
    margin-bottom: -1px;
    border-left: 1px solid #e7e7e7;
    letter-spacing: 0.5px;
  }
  [aria-controls*="tags"]:after {
    right: 1em;
  }
  [aria-controls*="tags"][aria-expanded="true"] {
    color: #e01512;
  }
}
@media only screen and (min-width: 64em) {
  [aria-controls*="tags"] {
    height: 4.6em;
  }
}
.tag-controls {
  text-align: center;
/* Breakpoint 1 --------------------------------------------------------- */
}
.tag-controls ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #fff;
}
.tag-controls ul button {
  border-bottom: 1px solid #e7e7e7;
}
@media only screen and (min-width: 48em) {
  .tag-controls {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: -1px;
  }
  .tag-controls ul {
    font-size: 0.6875em;
    padding: 2em 3em 3em;
    border-width: 1px 0;
    border-style: solid;
    border-color: #e7e7e7;
    background-color: #fbfbfb;
  }
  .tag-controls ul li {
    display: inline-block;
    margin: 1em 0.7em 0 0;
  }
  .tag-controls ul button {
    width: auto;
    border: 0;
    letter-spacing: 1px;
    padding: 0.4em 1.2em 0.2em;
    background-color: #e7e7e7;
    text-transform: uppercase;
  }
  .tag-controls ul button:focus,
  .tag-controls ul button:hover,
  .tag-controls ul button:active {
    background-color: #dadada;
  }
  .tag-controls ul button[aria-selected="true"] {
    background-color: #e01512;
  }
  .tag-controls ul button[aria-selected="true"]:after {
    position: static;
    margin-left: 1.5em;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
  }
}
.collage-controls > div:last-child {
  padding: 1em;
  text-align: center;
  position: relative;
/* Breakpoint 1 --------------------------------------------------------- */
}
.collage-controls > div:last-child .social {
  display: none;
}
.collage-controls > div:last-child .language {
  position: absolute;
  top: 2em;
  right: 2em;
}
@media only screen and (min-width: 48em) {
  .collage-controls > div:last-child {
    position: absolute;
    bottom: 100%;
    right: 1em;
    margin-bottom: 2em;
    text-align: right;
    padding: 0;
  }
  .collage-controls > div:last-child .social {
    display: block;
    padding: 0;
    margin: 0 4em 2em 0;
  }
  .collage-controls > div:last-child .language {
    top: 0.2em;
    right: 0;
  }
}
body > footer {
  max-width: 74em;
  margin: 0 auto;
 }
body > footer .logo {
  display: inline-block;
}
body > footer [role="navigation"] {
  list-style: none;
  display: inline-block;
  vertical-align: top;
  margin-top: 1.5em;
}
body > footer [role="navigation"] ul {
  display: inline-block;
  margin: 0;
  padding: 0;
}
body > footer [role="navigation"] li {
  display: inline;
  margin-left: 1em;
}
body > footer [role="navigation"] li:first-child a {
  color: #e01512;
}
body > footer [role="navigation"] li + li {
  margin-left: 3em;
  font-size: 0.6875em;
}
body > footer .social {
  float: right;
  margin-top: 0;
  width:100%;
  padding-left:20px;
}
body > footer .social > span {
  font-family: Arial, sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 0.75em;
  letter-spacing: 0.5px;
  margin-right: 1em;
}
body > footer .social ul {
  display: inline-block;
  margin: 0;
  padding: 0;
}
body > footer .social a {
  color: #404040;
}
.overlay {
  background-color: rgba(0,0,0,0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  z-index: 30;
  opacity: 1;
  -webkit-transition: opacity 0.3s, visibility 0s 0s;
          transition: opacity 0.3s, visibility 0s 0s;
}
.overlay.invisible {
  opacity: 0;
  -webkit-transition: opacity 0.3s, visibility 0s 0.3s;
          transition: opacity 0.3s, visibility 0s 0.3s;
}
/* .modal {
  position: fixed;
  top: 0.7em;
  left: 0.7em;
  right: 0.7em;
  bottom: 0.7em;
  margin: auto;
  color: grey-3;
  border: 0;
  padding: 0;
  background-color: #fff;
  overflow-y: auto;
  z-index: 31;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.3s, visibility 0s 0.3s;
          transition: opacity 0.3s, visibility 0s 0.3s; */
/* Breakpoint 2 --------------------------------------------------------- */
/* Breakpoint 3 --------------------------------------------------------- */
/* } */
/* .modal[open] {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity 0.3s, visibility 0s 0s;
          transition: opacity 0.3s, visibility 0s 0s;
} 
@media only screen and (min-width: 64em) {
  .modal {
    width: 80%;
    top: 10%;
    left: 0;
    bottom: 0;
    right: 0;
    bottom: auto;
    max-width: 640px;
    max-height: 80%;
  }
}
@media only screen and (break-3) {
  .modal {
    width: 60%;
  }
}
.modal [role="document"] {
  padding: 1em 2em;
}
.modal .close {
  border: 0;
  background-color: transparent;
  padding: 0;
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  width: 2em;
  height: 2em;
}
.modal .close:before {
  font-family: 'icon', sans-serif;
  content: "\e602";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;  */
/* Better Font Rendering =========== */
 /* -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
} */
.collage {
  position: relative;
/* Breakpoint 2 --------------------------------------------------------- */
}
@media only screen and (min-width: 64em) {
  .collage {
    max-width: 74em;
    margin: 0 auto;
  }
}
.collage > ul {
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
 /* overflow: hidden; */
}
.collage .overlay {
  display: none;
/* Breakpoint 1 ----------------------------------------------------- */
}
@media only screen and (min-width: 48em) {
  .collage .overlay {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
  }
}
[data-size] {
  position: absolute;
  visibility: hidden;
  width: 33.334%;
/* Breakpoint 1 --------------------------------------------------------- */
/* Breakpoint 2 --------------------------------------------------------- */
}
@media only screen and (min-width: 48em) {
  [data-size] {
    width: 20%;
  }
}
@media only screen and (min-width: 64em) {
  [data-size] {
    width: 14.286%;
  }
}
.collage > ul > li {
  position: absolute;
  -webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out, top 0.3s ease-in-out, left 0.3s ease-in-out, opacity 0s 0s, visibility 0s 0s;
          transition: width 0.3s ease-in-out, height 0.3s ease-in-out, top 0.3s ease-in-out, left 0.3s ease-in-out, opacity 0s 0s, visibility 0s 0s;
  overflow: hidden;
/**
     * 1. Ghost element technique to vertically center child element.
     */
}
.collage > ul > li.invisible {
  opacity: 0;
  -webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out, top 0.3s ease-in-out, left 0.3s ease-in-out, opacity 0s 0.3s, visibility 0s 0.3s;
          transition: width 0.3s ease-in-out, height 0.3s ease-in-out, top 0.3s ease-in-out, left 0.3s ease-in-out, opacity 0s 0.3s, visibility 0s 0.3s;
}
.collage > ul > li.invisible > a,
.collage > ul > li.invisible > div {
  visibility: hidden;
  -webkit-transition: visibility 0s 0s;
          transition: visibility 0s 0s;
}
.collage > ul > li > a,
.collage > ul > li > div {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  letter-spacing: -0.5em;
  -webkit-transition: visibility 0s 0.3s;
          transition: visibility 0s 0.3s;
}
.collage > ul > li > a:after,
.collage > ul > li > div:after {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.collage > ul > li > a > *,
.collage > ul > li > div > * {
  display: inline-block;
  vertical-align: top;
  letter-spacing: normal;
  width: 100%;
  text-align: center;
}
.collage > ul > li > a {
  text-decoration: none;
}
.collage > ul > li > a:before {
  /*font-family: 'icon', sans-serif;
  content: "\e608";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  right: 0;
  bottom: 0;
  color: #e01512;
  line-height: 1;
  text-align: center;
  padding-right: 0.4em;
  width: 0.6em;
  background-color: #fff;
  z-index: 1;
  -webkit-transition: font-size 0.3s, width 0.3s, padding 0.3s;
          transition: font-size 0.3s, width 0.3s, padding 0.3s;*/
}
.collage > ul > li > a:focus:before,
.collage > ul > li > a:hover:before,
.collage > ul > li > a:active:before {
  font-size: 1.875em;
}
.collage > ul > li > a > div {
  overflow: hidden;
}
.article {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 15;
  -webkit-transition: width 0.3s ease-out 0.2s, height 0.3s ease-out 0.2s, top 0.3s ease-out 0.2s, left 0.3s ease-out 0.2s, opacity 0.3s 0.5s, visibility 0s 0.8s;
          transition: width 0.3s ease-out 0.2s, height 0.3s ease-out 0.2s, top 0.3s ease-out 0.2s, left 0.3s ease-out 0.2s, opacity 0.3s 0.5s, visibility 0s 0.8s;
/* Breakpoint 1 --------------------------------------------------------- */
}
@media only screen and (min-width: 48em) {
  .article {
    position: absolute;
    width: auto;
    height: auto;
    z-index: 6;
  }
}
.article > div {
  height: 100%;
  opacity: 0;
  -webkit-transition: opacity 0.2s;
          transition: opacity 0.2s;
}
.article > div > div {
  height: 100%;
}
.article[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  -webkit-transition: width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out, opacity 0.3s, visibility 0s;
          transition: width 0.3s ease-out, height 0.3s ease-out, top 0.3s ease-out, left 0.3s ease-out, opacity 0.3s, visibility 0s;
}
.article[aria-hidden="false"] > div {
  opacity: 1;
  -webkit-transition: opacity 0.2s 0.3s;
          transition: opacity 0.2s 0.3s;
}
.article.orphan {
  -webkit-transition: opacity 0.3s, visibility 0s 0.3s;
          transition: opacity 0.3s, visibility 0s 0.3s;
}
.article .close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 25px;
  height: 25px;
  z-index: 1;
  text-decoration: none;
}
#cookiewarning {
  width: 100%;
  text-align: center;
  z-index: 999;
  margin: auto;
  position: fixed;
  top: 0;
  left: 0;
}
#cookiewarning div {
  margin: auto;
  border: 6px solid #dedfe1;
  background-color: #fff;
}
#cookiewarning p {
  color: #2a2a2a;
  font-size: 0.9375em;
  margin: 0px;
  padding: 10px;
  text-align: center;
}
#cookiewarning a {
  color: #878583;
  text-decoration: underline;
}
#cookiewarning a.closecookiewarning {
  text-decoration: none;
  padding-left: 10px;
}
#cookiewarning img {
  vertical-align: middle;
}
.popin .main {
  text-align: justify;
}
@media only screen and (min-width: 48em) {
  .collage-controls>div:last-child {
    right: 0em;
  }
  .collage-controls>div:last-child .social {
    margin: 0 40px 2em 0;
  }
}

/* Articles (classes general)
   ========================================================================== */
.title {
  text-transform: uppercase;
}
.txt-font-core {
  font-family: 'Core Circus', 'Montreal', arial, sans-serif;
  font-size: 2.1875em;
  line-height: 1.1;
  margin-left: -0.175em;
  letter-spacing: -0.125em;
}
@media only screen and (min-width: 48em) {
  .txt-font-core {
    font-size: 2.5em;
  }
}
@media only screen and (min-width: 64em) {
  .txt-font-core {
    font-size: 3.125em;
  }
}
.txt-font-mdb {
  font-weight: 600;
}
.txt-font-mb {
  font-weight: bold;
}
.txt-size-50 {
  font-size: 3.125em;
  line-height: 0.8;
}
.txt-size-45 {
  font-size: 2em;
}
@media only screen and (min-width: 48em) {
  .txt-size-45 {
    font-size: 2.8125em;
  }
}
.txt-size-42 {
  font-size: 1.875em;
}
@media only screen and (min-width: 48em) {
  .txt-size-42 {
    font-size: 2.625em;
  }
}
.txt-size-40 {
  font-size: 1.875em;
}
@media only screen and (min-width: 48em) {
  .txt-size-40 {
    font-size: 2.5em;
  }
}
.txt-size-33 {
  font-size: 1.375em;
}
@media only screen and (min-width: 48em) {
  .txt-size-33 {
    font-size: 2.0625em;
  }
}
.txt-size-30 {
  font-size: 1.375em;
  line-height: 1.1;
}
@media only screen and (min-width: 48em) {
  .txt-size-30 {
    font-size: 1.875em;
  }
}
.txt-size-28 {
  font-size: 1.3125em;
}
@media only screen and (min-width: 48em) {
  .txt-size-28 {
    font-size: 1.75em;
  }
}
.txt-size-26 {
  font-size: 1.25em;
  text-transform: uppercase;
  line-height: 1;
}
strong.txt-size-26 {
  font-weight: bold;
}
.txt-size-26.txt-font-mdb {
  font-weight: 600;
}
@media only screen and (min-width: 48em) {
  .txt-size-26 {
    font-size: 1.625em;
  }
}
.txt-size-24 {
  font-size: 1.125em;
  line-height: 1.1;
}
@media only screen and (min-width: 48em) {
  .txt-size-24 {
    font-size: 1.5em;
  }
}
.txt-size-22 {
  font-weight: 600;
  font-size: 1em;
  text-transform: uppercase;
  line-height: 1.1;
}
@media only screen and (min-width: 48em) {
  .txt-size-22 {
    font-size: 1.25em;
  }
}
@media only screen and (min-width: 64em) {
  .txt-size-22 {
    font-size: 1.375em;
  }
}
.txt-size-20 {
  font-size: 0.9375em;
}
.txt-size-20 strong {
  font-weight: bold;
}
@media only screen and (min-width: 48em) {
  .txt-size-20 {
    font-size: 1.25em;
  }
}
.mobile-txt-size-14 {
  font-size: 0.875em;
  line-height: 1.1;
}
@media only screen and (min-width: 48em) {
  .mobile-txt-size-14 {
    font-size: 1em;
    line-height: 1.2;
  }
}
.txt-size-12 {
  font-size: 0.75em;
}
.txt-no-maj {
  text-transform: none;
}
.txt-color-red {
  color: #e01512;
}
.txt-color-red a {
  color: #e01512;
}
.txt-color-dark-blue {
  color: #0c69ae;
}
.txt-color-dark-blue a {
  color: #0c69ae;
}
.txt-color-white {
  color: #fff;
}
.txt-color-white a {
  color: #fff;
}
.bloc-beige {
  background-color: #fcf9ed;
}
.bloc-beige-fonce {
  background-color: #fffbe5;
}
.bloc-blue {
  background-color: #c7e3fe;
}
.bloc-dark-blue {
  background-color: #0c69ae;
  color: #fff;
}
.bloc-dark-blue a {
  color: #fff;
}
.bloc-brown {
  background-color: #a89b8a;
}
.bloc-green {
  background-color: #99bd29;
}
.bloc-pink {
  background-color: #ee92b9;
/*bloc a rayures*/
}
.bloc-rayure-beige {
  background-color: #f0ebd7;
}
.bloc-rayure-blue {
  background-color: #c7e4ff;
}
.bloc-rayure-brown {
  background-color: #9a8a76;
}
.bloc-rayure-green {
  background-color: #99bd29;
}
.bloc-rayure-pink {
  background-color: #ee92b9;
}
.bloc-arrow {
  position: relative;
  z-index: 0;
}
.bloc-arrow:before {
  content: "";
  position: absolute;
  height: 34px;
  width: 34px;
  top: -17px;
  left: 30px;
  z-index: -1;
  -webkit-transform: skewY(-44.6deg);
      -ms-transform: skewY(-44.6deg);
          transform: skewY(-44.6deg);
  background-color: #fff;
}
.bloc-arrow.bloc-arrow-left:before {
  left: -17px;
  top: 30px;
  -webkit-transform: skewX(44.6deg);
      -ms-transform: skewX(44.6deg);
          transform: skewX(44.6deg);
}
.bloc-arrow.bloc-arrow-left-top:before {
  top: 0px;
}
.bloc-arrow.bloc-beige:before {
  background-color: #fcf9ed;
}
.bloc-arrow.bloc-blue:before {
  background-color: #c7e3fe;
}
.bloc-arrow.bloc-dark-blue:before {
  background-color: #0c69ae;
}
.bloc-arrow.bloc-brown:before {
  background-color: #a89b8a;
}
.bloc-arrow.bloc-green:before {
  background-color: #99bd29;
}
.bloc-arrow.bloc-pink:before {
  background-color: #ee92b9;
}
#main .txt-align-left {
  text-align: left;
}
#main .txt-align-right {
  text-align: right;
}
#main .txt-align-center {
  text-align: center;
}
#main .txt-align-bottom {
  vertical-align: bottom;
}
#main .txt-align-top {
  vertical-align: top;
}
.col {
  display: inline-block;
  vertical-align: middle;
}
.back-line {
  display: block;
}
.mobile-back-line {
  display: inline;
}
@media only screen and (min-width: 48em) {
  .mobile-back-line {
    display: block;
  }
}
.br-hidden br {
  display: none;
}
@media only screen and (min-width: 48em) {
  .br-hidden br {
    display: block;
  }
}
.mobile-padding-4-20 {
  padding: 4px;
}
@media only screen and (min-width: 48em) {
  .mobile-padding-4-20 {
    padding: 15px;
  }
}
@media only screen and (min-width: 64em) {
  .mobile-padding-4-20 {
    padding: 20px;
  }
}
.padding10 {
  padding: 6px;
}
@media only screen and (min-width: 48em) {
  .padding10 {
    padding: 10px;
  }
}
.padding15 {
  padding: 6px;
}
@media only screen and (min-width: 48em) {
  .padding15 {
    padding: 15px;
  }
}
.padding20 {
  padding: 10px;
}
@media only screen and (min-width: 48em) {
  .padding20 {
    padding: 20px;
  }
}
.col.w50 .padding20,
.col.w50.padding20 {
  padding: 5px;
}
@media only screen and (min-width: 48em) {
  .col.w50 .padding20,
  .col.w50.padding20 {
    padding: 20px;
  }
}
.padding25 {
  padding: 10px;
}
@media only screen and (min-width: 48em) {
  .padding25 {
    padding: 25px;
  }
}
.padding30 {
  padding: 10px;
}
@media only screen and (min-width: 48em) {
  .padding30 {
    padding: 20px;
  }
}
@media only screen and (min-width: 64em) {
  .padding30 {
    padding: 30px;
  }
}
.padding40 {
  padding: 10px;
}
@media only screen and (min-width: 48em) {
  .padding40 {
    padding: 30px;
  }
}
@media only screen and (min-width: 64em) {
  .padding40 {
    padding: 40px;
  }
}
.padding0-25 {
  padding: 0 5px;
}
@media only screen and (min-width: 48em) {
  .padding0-25 {
    padding: 0 25px;
  }
}
.padding0-30 {
  padding: 0px;
}
@media only screen and (min-width: 48em) {
  .padding0-30 {
    padding: 0 15px;
  }
}
@media only screen and (min-width: 64em) {
  .padding0-30 {
    padding: 0 30px;
  }
}
.padding-right10 {
  padding-right: 8px;
}
@media only screen and (min-width: 48em) {
  .padding-right10 {
    padding-right: 10px;
  }
}
.padding-right20 {
  padding-right: 8px;
}
@media only screen and (min-width: 48em) {
  .padding-right20 {
    padding-right: 20px;
  }
}
/*padding top*/
.padding-top15 {
  padding-top: 10px;
}
@media only screen and (min-width: 48em) {
  .padding-top15 {
    padding-top: 15px;
  }
}
.padding-top20 {
  padding-top: 10px;
}
@media only screen and (min-width: 48em) {
  .padding-top20 {
    padding-top: 20px;
  }
}
.padding-top35 {
  padding-top: 20px;
}
@media only screen and (min-width: 48em) {
  .padding-top35 {
    padding-top: 35px;
  }
}
.padding-top45 {
  padding-top: 10px;
}
@media only screen and (min-width: 48em) {
  .padding-top45 {
    padding-top: 45px;
  }
}
.padding-top75 {
  padding-top: 30px;
}
@media only screen and (min-width: 48em) {
  .padding-top75 {
    padding-top: 75px;
  }
}
.padding-25p0 {
  padding: 25% 0;
}
/*marge*/
.margin0 {
  margin-top: 0;
  margin-bottom: 0;
}
.marginB5 {
  margin-bottom: 5px;
}
/*dimensions*/
.w50 {
  width: 47.5%;
}
.w50:first-child {
  width: 50%;
}
@media only screen and (min-width: 48em) {
  .w50 {
    width: 48%;
  }
}
.w2col3 {
  width: 66.77%;
}
.w1col3 {
  width: 32%;
  margin-left: -4px;
}
@media only screen and (min-width: 64em) {
  .w1col3 {
    width: 32.8%;
  }
}
.h50 {
  height: 50%;
}
.max-w30 {
  max-width: 30%;
}
.max-w34 {
  max-width: 34%;
}
@media only screen and (min-width: 64em) {
  .max-w34 {
    max-width: 100%;
  }
}
.max-w50 {
  max-width: 50%;
}
.max-w75 {
  max-width: 75%;
}
@media only screen and (min-width: 48em) {
  .max-w30,
  .max-w50,
  .max-w75 {
    max-width: 100%;
  }
}
/* Articles ferme
   ========================================================================== */
.note {
  position: absolute;
  left: 5px;
  bottom: -10px;
  font-size: 0.75em;
  text-align: left;
}
.col-right .note {
  left: 48%;
  bottom: -7px;
}
@media only screen and (min-width: 48em) {
  .col-right .note {
    left: 49%;
  }
}
.play {
  position: relative;
}
.play:after {
  font-family: 'icon', sans-serif;
  content: "\e60a";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
/* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #e01512;
  text-align: center;
  background-color: #fff;
  display: block;
  margin-top: 18px;
  border-radius: 4px;
  padding-top: 7px;
  height: 16px;
  width: 38px;
  font-size: 0.625em;
}
@media only screen and (min-width: 48em) {
  .play:after {
    height: 32px;
    width: 76px;
    font-size: 0.875em;
    padding-top: 18px;
  }
}
.play-img-txt:after {
  position: absolute;
  top: 21%;
  left: 39%;
}
.play-img-txt2:after {
  position: absolute;
  top: 13%;
  left: 28%;
}
.play-img-txt-carre:after {
  position: absolute;
  top: 27%;
  left: 39%;
}
.play-img-carre:after {
  position: absolute;
  top: 27%;
  left: 27%;
}
.play-img-carre2:after {
  position: absolute;
  top: 38%;
  left: 38%;
}
.mapmonde {
  width: 64%;
  max-width: 186px;
  height: auto;
  padding: 14px;
  margin: 0 auto;
  color: #e01512;
}
.mapmonde p {
  margin: 0;
  font-size: 1em;
}
@media only screen and (min-width: 48em) {
  .mapmonde {
    width: 186px;
    height: 185px;
    padding: 30px 0;
  }
  .mapmonde p {
    font-size: 1.25em;
  }
}
.big-mapmonde {
  max-width: 229px;
}
@media only screen and (min-width: 48em) {
  .big-mapmonde {
    width: 229px;
    height: 230px;
    padding: 50px 20px;
  }
}
#bloc10 .bloc-arrow,
#bloc82 .bloc-arrow {
  margin-top: -17px;
}
@media only screen and (min-width: 48em) {
  #bloc10 .bloc-arrow,
  #bloc82 .bloc-arrow {
    margin-top: 0;
  }
}
#bloc18 .txt-font-core {
  font-size: 1.625em;
}
@media only screen and (min-width: 48em) {
  #bloc18 .txt-font-core {
    font-size: 1.875em;
  }
}
@media only screen and (min-width: 64em) {
  #bloc18 .txt-font-core {
    font-size: 3.125em;
  }
}
#bloc31 .w50:first-child {
  width: 43%;
}
#bloc61 .w50,
#bloc81 .w50 {
  width: 63.5%;
}
#bloc61 .w50:first-child,
#bloc81 .w50:first-child {
  width: 34%;
}
@media only screen and (min-width: 48em) {
  #bloc61 .w50,
  #bloc81 .w50 {
    width: 48%;
  }
  #bloc61 .w50:first-child,
  #bloc81 .w50:first-child {
    width: 50%;
  }
}
#bloc76 .padding20 {
  padding: 0;
}
@media only screen and (min-width: 48em) {
  #bloc76 .padding20 {
    padding: 20px;
  }
}
#bloc83 .txt-font-core {
  line-height: 0.7;
}
/* Articles ouvert
   ========================================================================== */
.popin {
  font-size: 0.875em;
/* structure / fond*/
/* titre popin*/
/* contenu popin*/
}
.popin table {
  margin-bottom: 1em;
}
.popin th,
.popin td {
  border: solid 1px #404040;
  padding: 5px 10px;
  text-align: left;
}
.popin.bloc-dark-blue .main {
  color: #fff;
}
.popin.bloc-dark-blue .main a {
  color: #fff;
}
.popin.padding10 {
  padding: 5% 10%;
}
.popin .w50.col {
  width: 100%;
}
@media only screen and (min-width: 48em) {
  .popin .w50.col {
    width: 49%;
  }
}
.popin .title,
.popin h1 {
  font-size: 1.571em;
  line-height: 1.2;
  font-weight: bold;
  text-transform: uppercase;
}
.popin .main {
  color: #404040;
}
.popin .main li {
  margin-bottom: 0.5em;
}
.popin .main img {
  display: block;
  margin: 0 auto 1em;
  text-align: center;
}
.popin .main a {
  color: #404040;
}
.popin .main .video {
  margin-bottom: 1em;
}
.popin footer.padding10 {
  padding: 0 10% 5%;
}
/* TAC
   ========================================================================== */
.tac h1,
.tac h2 {
  color: #e01512;
  text-transform: uppercase;
}
.tac a {
  font-weight: bold;
  text-decoration: underline;
  color: #000;
}
/* Print
   ========================================================================== */
/* HTML5 Boilerplate v5.0.0 | MIT License | http://h5bp.com/ */
@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}
.chart {
  position: relative;
  display: inline-block;
  width: 110px;
  height: 110px;
  /* margin-top: 50px; */
  margin-bottom: 50px;
  text-align: center;
}
.chart canvas {
  position: absolute;
  top: 0;
  left: 0;
}
.percent {
  display: inline-block;
  line-height: 110px;
  z-index: 2;
}
.percent:after {
  content: '%';
  margin-left: 0.1em;
  font-size: .8em;
}

.popup {
    width:100%;
    height:100%;
    display:none;
    position:fixed;
    top:0px;
    left:0px;
    background:rgba(0,0,0,0.75);
}
 
/* Inner */
.popup-inner {
    max-width:700px;
    width:90%;
    padding:40px;
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%, -50%);
    transform:translate(-50%, -50%);
    box-shadow:0px 2px 6px rgba(0,0,0,1);
    border-radius:3px;
    background:#fff;
}
 
/* Close Button */
.popup-close {
    width:30px;
    height:30px;
    padding-top:4px;
    display:inline-block;
    position:absolute;
    top:0px;
    right:0px;
    transition:ease 0.25s all;
    -webkit-transform:translate(50%, -50%);
    transform:translate(50%, -50%);
    border-radius:1000px;
    background:rgba(0,0,0,0.8);
    font-family:Arial, Sans-Serif;
    font-size:20px;
    text-align:center;
    line-height:100%;
    color:#fff;
}
 
.popup-close:hover {
    -webkit-transform:translate(50%, -50%) rotate(180deg);
    transform:translate(50%, -50%) rotate(180deg);
    background:rgba(0,0,0,1);
    text-decoration:none;
}