@charset "UTF-8";
html {
  box-sizing: border-box; }

*, *::after, *::before {
  box-sizing: inherit; }

/*doc
---
title: Breakpoints
name: breakpoints
category: Base - Breakpoints
---

http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries/

Rather than try to target @media rules at specific devices, it is arguably more practical to base them on your particular layout instead. That is, gradually narrow your desktop browser window and observe the natural breakpoints for your content. It's different for every site.
As long as the design flows well at each browser width, it should work pretty reliably on any screen size (and there are lots and lots of them out there.)

1000px max width is 52% of the screen width,
and almost all users will reach the "€œmax-width"€ breakpoint, making visible white space along the left and right of their screen.
1200px max width is 62.5% of the screen width,
and overall most users will reach the "max-width"€breakpoint.
1400px max width is 73% of the screen width, and ~84% of overall users will never reach the "max-width"€ breakpoint.
1600px max width is 83% of the screen width, and over 90% of overall users never reach the "€œmax-width"€ breakpoint.
*/
/*doc
---
title: Typography
name: typography
category: Base - Typography
---

The typography will be loaded in the child theme.

*/
@font-face {
  font-family: 'MuseoSansRounded-100';
  src: url("../fonts/museo/museosansrounded-100-webfont.woff") format("woff2"), url("../fonts/museo/museosansrounded-100-webfont.woff") format("woff"); }
@font-face {
  font-family: 'MuseoSansRounded-300';
  src: url("../fonts/museo/museosansrounded-300-webfont.woff") format("woff2"), url("../fonts/museo/museosansrounded-300-webfont.woff") format("woff"); }
@font-face {
  font-family: 'MuseoSansRounded-500';
  src: url("../fonts/museo/museosansrounded-500-webfont.woff") format("woff2"), url("../fonts/museo/museosansrounded-500-webfont.woff") format("woff"); }
/*doc
---
title: Colors
name: colors
category: Base - Colors
---

## Supported Color names
All modern browsers support 140 color names we picked three base colors for the default pagebuilder accompanied with a couple of shade colors for wireframing.
The full list of HTML colors you can find here:http://www.w3schools.com/colors/colors_names.asp


## Open Colors

As base colors we should check the open color scheme https://yeun.github.io/open-color/
It contains a gray and twelve colors that are tested on deuteranopia and protanopia mode.
Visit the website for more information about the colorscheme


### Colors

The ideal model is 60-30-10, where 60% of all website design go to a dominant color, 30% of web space can be filled with the subdominant color(s),
and 10% should be accentuated with an extra color (accent).
You don’t need to stick to this pattern, if you need more colors on your site.

You can add a few of subdominant, i.e. secondary colors,
but keep them all just 30% of the whole space.

Reference: <br/>
http://htmlcolorcodes.com/

#### Base colors

Each project has two or three main colors that are added in the system:
These are colors used everywhere and can include brand colors, neutrals, and a typically interactive digital blue.

Primary color:
This will be used for 60% of the website

Secondary color:
This will be used for accents (30% of the website)

Accent color:
Are used to stress details like links, call to actions, navigation etc....

<div class="color-container">
<div class="color-item">
  <div class="swatch primary-color"></div><pre>$primary-color </pre>
  </div>
<div class="color-item">
  <div class="swatch secondary-color"></div><pre> $secondary-color </pre>
  </div>
<div class="color-item">
  <div class="swatch accent-color"></div><pre> $accent-color </pre>
  </div>
</div>

#### Base colors shades

To get more options we create shades for our primary, secondary and accent color, this will be 20%, darker and 20%, lighter get down the intensity and have a more neutral shade.


<div class="color-container">

  <div class="color-item">
    <div class="swatch primary-color-30"></div><pre>primary-color-30</pre>
  </div>
  <div class="color-item">
    <div class="swatch primary-color"></div><pre>primary-color</pre>
  </div>
  <div class="color-item">
    <div class="swatch primary-color-70"></div><pre>primary-color-70</pre>
  </div>
</div>

<div class="color-container">
<div class="color-item">
  <div class="swatch secondary-color-30"></div><pre>secondary-color-30</pre>
  </div>
<div class="color-item">
  <div class="swatch secondary-color"></div><pre>secondary-color</pre>
  </div>
<div class="color-item">
  <div class="swatch secondary-color-70"></div><pre>secondary-color-70</pre>
  </div>
</div>


<div class="color-container">
<div class="color-item">
  <div class="swatch accent-color-30"></div><pre>accent-color-30</pre>
  </div>
<div class="color-item">
  <div class="swatch accent-color"></div><pre>accent-color</pre>
  </div>
<div class="color-item">
  <div class="swatch accent-color-70"></div><pre>accent-color-70</pre>
  </div>
</div>

#### Neutrals

A selection of grayscale colors for background or text use
The gray colors are named based on brightness relative to the white, so color-gray-80 is a white color that has 80% darkness
The scale reflects a familiar range from dark to light, allows for injecting new options between.


<div class="color-container">
<div class="color-item">
  <div class="swatch shade-black"></div><pre>$black </pre>
  </div>
<div class="color-item">
  <div class="swatch shade-color-gray-80"></div><pre>color-gray-80 </pre>
  </div>
<div class="color-item">
  <div class="swatch shade-color-gray-60"></div><pre> color-gray-60 </pre>
  </div>
  <div class="color-item">
  <div class="swatch shade-color-gray-40"></div><pre> color-gray-40 </pre>
  </div>
  <div class="color-item">
  <div class="swatch shade-color-gray-20"></div><pre> color-gray-20 </pre>
  </div>
  <div class="color-item">
  <div class="swatch shade-color-gray-10"></div><pre> color-gray-10 </pre>
  </div>
</div>

#### Color Schemes

In the website we use background colors  in different places they are activated by adding [data-background-color] to the block.

```html_example


<div class="color-container">

  <div data-background-color="primary" style="width:500px; height:200px;padding:24px;">
  <p class="section-title">This is the primary color scheme</p>
  <div class="button-content">
    <a href="#" class="button" data-link-style="bordered">I'm a bordered button</a>
</div>

   </div>

  <div data-background-color="secondary" style="width:500px; height:200px;padding:24px;">
  <p class="section-title">This is the secondary color scheme</p>
  <div class="button-content">
    <a href="#" class="button" data-link-style="bordered">I'm a bordered button</a>
</div>

  </div>

</div>


```

*/
/***************************************
*
*  Base Colors
*  Add them in clear colour names.
*
*****************************************/
/***************************************
*
*  Base colour variables
*  Add the three colours most used in the site as primary, secondary and accent colour
*
*****************************************/
[data-background-color="primary"] {
  background-color: #D51317; }

[data-background-color="secondary"] {
  background-color: #999999; }

[data-background-color="white"] {
  background-color: white; }

[data-background-color="black"] {
  background-color: black; }

[data-background-color="transparent"] {
  background-color: transparent; }

[data-text-color="primary"] {
  color: #D51317; }

[data-text-color="secondary"] {
  color: #999999; }

[data-text-color="black"] {
  color: black; }

[data-text-color="white"] {
  color: white; }

[data-text-color="invert"] {
  color: white; }

.block-introduction[data-text-color="primary"] .introduction-title {
  color: #D51317; }
.block-introduction[data-text-color="primary"] .introduction-description {
  color: black; }

@font-face {
  font-family: 'MuseoSansRounded-700';
  src: url("../fonts/museo/museosansrounded-700-webfont.woff") format("woff2"), url("../fonts/museo/museosansrounded-700-webfont.woff") format("woff"); }
[data-height="small"] {
  height: 350px; }
  [data-height="small"] .hero-content,
  [data-height="small"] .video-content {
    height: 350px; }
    [data-height="small"] .hero-content .video-effect,
    [data-height="small"] .video-content .video-effect {
      height: 350px; }

.card-publication {
  display: flex;
  min-height: 250px;
  border-top: 1px solid #D51317; }
  @media screen and (min-width: 320px) {
    .card-publication {
      padding: 16px 0; } }
  @media screen and (min-width: 768px) {
    .card-publication {
      padding: 32px 22px; } }
  @media screen and (min-width: 768px) {
    .card-publication .card-image,
    .card-publication .card-content,
    .card-publication .card-downloads {
      flex: 1; } }
  .card-publication .card-image {
    line-height: 0;
    height: 100%; }
    .card-publication .card-image img {
      width: 320px;
      height: 100%;
      object-fit: cover;
      border: 1px solid #ccc; }
      @media screen and (min-width: 320px) and (max-width: 480px) {
        .card-publication .card-image img {
          max-width: none;
          width: 120px; } }
  .card-publication .card-title {
    color: #D51317;
    font-family: "MuseoSansRounded-700", sans-serif; }
  .card-publication .card-content {
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    font-size: 1rem; }
    @media screen and (min-width: 320px) {
      .card-publication .card-content {
        padding-left: 16px; } }
    @media screen and (min-width: 768px) {
      .card-publication .card-content {
        padding-left: 32px;
        padding-right: 4em;
        flex: 2; } }
    .card-publication .card-content p {
      color: black; }
  .card-publication .card-downloads {
    position: relative; }
    @media screen and (min-width: 320px) {
      .card-publication .card-downloads {
        font-size: 0.9rem; } }
    @media screen and (min-width: 768px) {
      .card-publication .card-downloads {
        font-size: 1rem; } }
    .card-publication .card-downloads p {
      position: absolute;
      top: 0;
      margin: 0; }
    .card-publication .card-downloads a {
      text-decoration: none;
      text-transform: uppercase;
      color: #D51317;
      font-family: "MuseoSansRounded-700", sans-serif; }
      .card-publication .card-downloads a:before {
        content: '';
        display: inline-block;
        vertical-align: baseline;
        margin-right: 4px;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url(../img/download-button.png);
        width: 26px;
        height: 22px;
        background-size: contain; }
  .card-publication .card-meta p {
    margin: 4px; }
  .card-publication strong {
    font-family: "MuseoSansRounded-500", sans-serif; }

.card-publication .publication-file {
  display: none; }

.card-publication .publication-file-in-overview {
  display: none;
  cursor: pointer; }

.single-publication .card-publication {
  border-top: 1px solid #D51317;
  border-bottom: 1px solid #D51317; }
  .single-publication .card-publication .card-image {
    min-height: 200px; }
    @media screen and (min-width: 768px) {
      .single-publication .card-publication .card-image {
        margin-right: 32px; } }
  .single-publication .card-publication .card-image,
  .single-publication .card-publication .card-content {
    flex-basis: auto; }

@media screen and (min-width: 320px) and (max-width: 480px) {
  .filter-container .card-description,
  .filter-container .card-meta,
  .filter-container .card-downloads {
    display: none; } }

.blue-publication-wrap {
  max-width: none; }
  .blue-publication-wrap table {
    max-width: 840px;
    margin: 0 auto;
    border: 0; }

.inner-description {
  display: none; }

.socials li {
  display: inline-block; }
  .socials li img {
    width: 50px; }

.drop-toggle {
  position: absolute;
  top: 16px;
  right: 12px;
  display: inline-block;
  vertical-align: middle;
  color: #666;
  box-sizing: border-box;
  transition: transform .4s ease;
  width: 7px;
  height: 7px;
  border-width: 1px 1px 0 0;
  border-style: solid;
  margin: 0;
  transform: rotate(135deg); }
  .drop-toggle:after, .drop-toggle:before {
    content: "";
    box-sizing: border-box; }
  .drop-toggle:before {
    right: 0;
    top: -1px;
    position: absolute;
    height: 1px;
    box-shadow: inset 0 0 0 32px;
    transform: rotate(-45deg);
    width: 10px;
    transform-origin: right top; }

.cool-dropdowns.active .drop-toggle {
  transform: rotate(-45deg);
  color: #D51317; }

.page-template-content-publication .background-hero-block,
.page-template-_content-publications .background-hero-block {
  position: relative; }
  .page-template-content-publication .background-hero-block .image-content,
  .page-template-_content-publications .background-hero-block .image-content {
    height: 400px; }
  .page-template-content-publication .background-hero-block .hero-text-container,
  .page-template-_content-publications .background-hero-block .hero-text-container {
    position: initial; }
  .page-template-content-publication .background-hero-block .introduction-title,
  .page-template-_content-publications .background-hero-block .introduction-title {
    bottom: 32px;
    position: absolute;
    left: 32px; }
    .page-template-content-publication .background-hero-block .introduction-title h2,
    .page-template-_content-publications .background-hero-block .introduction-title h2 {
      display: inline-block;
      font-size: 2.5rem;
      margin-bottom: 16px;
      line-height: 1.1;
      color: white; }
      .page-template-content-publication .background-hero-block .introduction-title h2 span,
      .page-template-_content-publications .background-hero-block .introduction-title h2 span {
        background-color: #D51317;
        padding: 4px 8px;
        box-shadow: none; }
.page-template-content-publication .aws-filter-dropdown,
.page-template-_content-publications .aws-filter-dropdown {
  padding: 16px 0;
  background: #cccccc; }
.page-template-content-publication .apl-filter-block,
.page-template-_content-publications .apl-filter-block {
  margin-left: 32px; }
.page-template-content-publication .multi-select, .page-template-content-publication .multi-select-plugin,
.page-template-_content-publications .multi-select,
.page-template-_content-publications .multi-select-plugin {
  margin-bottom: 0;
  background-color: white; }
  .page-template-content-publication .multi-select .toggle, .page-template-content-publication .multi-select-plugin .toggle,
  .page-template-_content-publications .multi-select .toggle,
  .page-template-_content-publications .multi-select-plugin .toggle {
    border: 0;
    padding: 8px 64px 0 8px;
    max-height: 36px;
    text-transform: uppercase; }
.page-template-content-publication .filter-labels,
.page-template-_content-publications .filter-labels {
  margin-left: 32px; }
  .page-template-content-publication .filter-labels li .filter-label,
  .page-template-_content-publications .filter-labels li .filter-label {
    background-color: #D51317; }

.entry-publication {
  max-width: 840px;
  margin: 0 auto; }

[data-filter] {
  display: block !important;
  height: auto !important; }

.filter-container {
  background: #cccccc; }
  .filter-container ul {
    list-style-type: none;
    padding: 0; }
  @media screen and (min-width: 768px) {
    .filter-container {
      padding: 32px 0;
      min-height: 100px; } }

.filter-top {
  position: relative;
  background: #cccccc;
  margin: 0 auto 16px;
  background: #e6e6e6;
  padding: 16px;
  display: none; }

.filter-bar {
  z-index: 2; }
  @media screen and (min-width: 768px) {
    .filter-bar {
      position: absolute; } }

.filter-select {
  display: inline-block;
  vertical-align: top;
  margin-right: 16px;
  min-width: 200px; }
  .filter-select ul {
    max-height: 38px;
    overflow: hidden;
    padding: 8px 8px 10px;
    background: white; }
    @media screen and (min-width: 320px) {
      .filter-select ul {
        margin: 0 0 16px; } }
    @media screen and (min-width: 768px) {
      .filter-select ul {
        margin: 16px 0; } }
  .filter-select.active ul {
    max-height: 100%; }
    .filter-select.active ul li:first-of-type {
      color: #D51317; }
      .filter-select.active ul li:first-of-type:after {
        transform: rotate(-180deg);
        transition: all 0.45s ease;
        background: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIxLjgyNSAyMS44MjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDIxLjgyNSAyMS44MjU7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4KPHBhdGggZD0iTTE2Ljc5MSwxMy4yNTRjMC40NDQtMC40NDQsMS4xNDMtMC40NDQsMS41ODcsMGMwLjQyOSwwLjQ0NCwwLjQyOSwxLjE0MywwLDEuNTg3bC02LjY1LDYuNjUxICBjLTAuMjA2LDAuMjA2LTAuNDkyLDAuMzMzLTAuODA5LDAuMzMzYy0wLjMxNywwLTAuNjAzLTAuMTI3LTAuODEtMC4zMzNsLTYuNjUtNi42NTFjLTAuNDQ0LTAuNDQ0LTAuNDQ0LTEuMTQzLDAtMS41ODcgIHMxLjE0My0wLjQ0NCwxLjU4NywwbDQuNzQ2LDQuNzYyVjEuMTExQzkuNzkxLDAuNDkyLDEwLjI5OSwwLDEwLjkxOCwwYzAuNjE5LDAsMS4xMTEsMC40OTIsMS4xMTEsMS4xMTF2MTYuOTA0TDE2Ljc5MSwxMy4yNTR6IiBmaWxsPSIjZDUxMzE3Ii8+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat;
        background-size: contain; }
  .filter-select li {
    position: relative;
    cursor: pointer;
    line-height: 1.8; }
    .filter-select li:first-of-type {
      padding-right: 24px; }
      .filter-select li:first-of-type:after {
        content: '';
        background: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMS4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIxLjgyNSAyMS44MjUiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDIxLjgyNSAyMS44MjU7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4KPHBhdGggZD0iTTE2Ljc5MSwxMy4yNTRjMC40NDQtMC40NDQsMS4xNDMtMC40NDQsMS41ODcsMGMwLjQyOSwwLjQ0NCwwLjQyOSwxLjE0MywwLDEuNTg3bC02LjY1LDYuNjUxICBjLTAuMjA2LDAuMjA2LTAuNDkyLDAuMzMzLTAuODA5LDAuMzMzYy0wLjMxNywwLTAuNjAzLTAuMTI3LTAuODEtMC4zMzNsLTYuNjUtNi42NTFjLTAuNDQ0LTAuNDQ0LTAuNDQ0LTEuMTQzLDAtMS41ODcgIHMxLjE0My0wLjQ0NCwxLjU4NywwbDQuNzQ2LDQuNzYyVjEuMTExQzkuNzkxLDAuNDkyLDEwLjI5OSwwLDEwLjkxOCwwYzAuNjE5LDAsMS4xMTEsMC40OTIsMS4xMTEsMS4xMTF2MTYuOTA0TDE2Ljc5MSwxMy4yNTR6IiBmaWxsPSIjMDAwMDAwIi8+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=) no-repeat;
        background-size: contain;
        position: absolute;
        top: 8px;
        right: 8px;
        width: 10px;
        height: 10px;
        transition: all 0.45s ease; }

.filter-tags {
  padding-bottom: 16px; }
  @media screen and (min-width: 768px) {
    .filter-tags {
      padding-top: 72px; } }
  .filter-tags li {
    display: inline-block;
    padding: 4px 12px;
    background: #D51317;
    color: white; }
  .filter-tags .remove-tag {
    display: inline-block;
    cursor: pointer;
    margin-left: 10px; }
    .filter-tags .remove-tag:after {
      content: '';
      background: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTguMS4xLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDIxMi45ODIgMjEyLjk4MiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjEyLjk4MiAyMTIuOTgyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjE2cHgiIGhlaWdodD0iMTZweCI+CjxnIGlkPSJDbG9zZSI+Cgk8cGF0aCBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7IiBkPSJNMTMxLjgwNCwxMDYuNDkxbDc1LjkzNi03NS45MzZjNi45OS02Ljk5LDYuOTktMTguMzIzLDAtMjUuMzEyICAgYy02Ljk5LTYuOTktMTguMzIyLTYuOTktMjUuMzEyLDBsLTc1LjkzNyw3NS45MzdMMzAuNTU0LDUuMjQyYy02Ljk5LTYuOTktMTguMzIyLTYuOTktMjUuMzEyLDBjLTYuOTg5LDYuOTktNi45ODksMTguMzIzLDAsMjUuMzEyICAgbDc1LjkzNyw3NS45MzZMNS4yNDIsMTgyLjQyN2MtNi45ODksNi45OS02Ljk4OSwxOC4zMjMsMCwyNS4zMTJjNi45OSw2Ljk5LDE4LjMyMiw2Ljk5LDI1LjMxMiwwbDc1LjkzNy03NS45MzdsNzUuOTM3LDc1LjkzNyAgIGM2Ljk4OSw2Ljk5LDE4LjMyMiw2Ljk5LDI1LjMxMiwwYzYuOTktNi45OSw2Ljk5LTE4LjMyMiwwLTI1LjMxMkwxMzEuODA0LDEwNi40OTF6IiBmaWxsPSIjRkZGRkZGIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==) no-repeat;
      background-size: contain;
      width: 10px;
      height: 10px;
      display: block; }

.filter-tags ul,
.filter-results ul {
  padding: 0;
  margin: 0; }

@media screen and (min-width: 320px) and (max-width: 480px) {
  .filter-results {
    padding: 0 16px; } }

.single.single-publication .featured-image {
  height: auto; }

.filter-wrapper {
  max-width: 1280px;
  margin: 0 auto; }

.filter-buttons {
  margin-bottom: 32px;
  padding: 0; }
  .filter-buttons li {
    display: inline-block;
    padding-right: 16px; }

.filters-data-block {
  display: inline-block;
  width: 250px;
  vertical-align: top; }
  .filters-data-block.hidden {
    display: none; }

.filter-pagination {
  list-style: none; }
  .filter-pagination li {
    display: inline-block;
    margin-right: 5px; }
    .filter-pagination li a {
      padding: 7px 14px;
      text-decoration: none;
      background-color: white;
      color: #D51317;
      font-weight: bold; }
    .filter-pagination li.active a {
      background-color: #D51317;
      color: white; }

.filters-bar-element {
  padding: 16px 0; }

.filters-bar-element {
  margin-bottom: 16px;
  display: none; }
  .filters-bar-element .tabs-selector {
    max-width: 824px;
    margin: 0 auto;
    text-align: left; }
    .filters-bar-element .tabs-selector ul {
      padding: 0; }

/* SUPER ULTRA COOL DROPDOWNS */
.filters-dropdown-element {
  position: absolute;
  z-index: 1;
  left: 22px; }
  @media screen and (min-width: 320px) and (max-width: 480px) {
    .filters-dropdown-element {
      position: relative; } }
  .filters-dropdown-element ul.filters-data-block > li {
    display: inline-block; }
  .filters-dropdown-element input {
    vertical-align: top;
    border: 0;
    padding: 8px;
    font-size: 16px;
    height: 36px; }
    @media screen and (min-width: 320px) and (max-width: 480px) {
      .filters-dropdown-element input {
        width: 100%; } }

.cool-dropdowns {
  position: relative;
  background-color: white;
  display: inline-block;
  padding: 8px 0;
  max-height: 36px;
  overflow: hidden;
  vertical-align: top;
  font-family: "MuseoSansRounded-500", sans-serif; }
  @media screen and (min-width: 320px) and (max-width: 480px) {
    .cool-dropdowns {
      width: 100%;
      margin-bottom: 4px; } }
  .cool-dropdowns .drop-title {
    text-transform: uppercase;
    padding: 0 40px 0 20px;
    cursor: pointer; }
  .cool-dropdowns.active {
    max-height: 100%; }
    .cool-dropdowns.active .drop-title {
      color: #D51317; }
  .cool-dropdowns.hidden {
    display: none; }
  .cool-dropdowns ul {
    padding: 8px 40px 0 20px;
    list-style: none;
    margin-left: 0 !important;
    margin-right: 0 !important; }
    @media screen and (min-width: 320px) and (max-width: 480px) {
      .cool-dropdowns ul {
        padding: 0 20px !important; } }
    .cool-dropdowns ul li {
      cursor: pointer;
      color: black;
      margin-bottom: 8px !important;
      width: auto;
      float: none !important;
      margin-left: 0 !important;
      margin-right: 16px;
      margin-top: 8px;
      padding: 0; }
      .cool-dropdowns ul li.hidden {
        display: none; }
  .cool-dropdowns span.remove {
    display: none; }

.cool-dropdowns-tags-container {
  padding-top: 48px; }
  @media screen and (min-width: 320px) and (max-width: 480px) {
    .cool-dropdowns-tags-container {
      padding-top: 0; } }
  .cool-dropdowns-tags-container.hidden {
    display: none; }
  .cool-dropdowns-tags-container ul {
    padding: 16px 0 0;
    margin: 0;
    list-style: none; }
    @media screen and (min-width: 768px) {
      .cool-dropdowns-tags-container ul {
        padding: 0 !important; } }
    .cool-dropdowns-tags-container ul li {
      display: inline-block;
      padding: 5px 10px;
      margin-right: 8px;
      margin-bottom: 8px;
      background-color: #D51317;
      color: white;
      font-size: 16px;
      width: auto !important; }
      .cool-dropdowns-tags-container ul li span.remove {
        cursor: pointer;
        margin-left: 10px; }

.clear-all-tags {
  cursor: pointer;
  text-transform: none;
  font-family: "MuseoSansRounded-500", sans-serif;
  font-size: 16px; }
  .clear-all-tags.active {
    margin-left: 16px; }

/**** SEARCH UGLY CSS    can this be removed ? **/
.search-form-container {
  background-color: #D51317;
  padding: 48px; }

.button-container {
  text-align: center;
  padding: 0 0 16px; }
  @media screen and (min-width: 768px) {
    .button-container {
      padding: 32px 0; } }

.drop-title {
  font-size: 16px; }

.filters-dropdown-element li {
  font-size: 16px; }
  @media screen and (min-width: 768px) {
    .filters-dropdown-element li {
      font-size: 12px; } }
  @media screen and (min-width: 1024px) {
    .filters-dropdown-element li {
      font-size: 16px; } }

/*# sourceMappingURL=skin.css.map */