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

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

/*doc
---
title: Scripts
name: scripts
category: Framework - Scripts
---
*/
/*

A method of using psuedo elements to maintain an elements aspect ratio, even as it scales.
The mixin assumes you'll be nesting an <a> element inside your initial block that has a background image.

*/
/*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.
*/
.js-header-layout-columns {
  background-color: white;
  border: 1px solid #cccccc;
  float: left;
  padding: 10px;
  width: 90%; }

.header-first-column {
  border-right: 2px solid red; }

.header-first-column, .header-second-column {
  margin: 10px;
  text-align: center; }

.js-footer-layout-columns {
  background-color: white;
  border: 1px solid #cccccc;
  float: left;
  padding: 10px;
  width: 90%; }

.footer-first-column {
  border-right: 2px solid red; }

.footer-first-column, .footer-second-column {
  margin: 10px;
  text-align: center; }

.js-logo-opener {
  display: inline-block;
  width: 75%; }

.wbb-background-side-modal {
  display: none; }

.column-one-over-two {
  text-align: center;
  float: left;
  width: 49%; }

.column-one-over-three {
  text-align: center;
  float: left;
  width: 33%; }

.column-two-over-three {
  text-align: center;
  float: left;
  width: 66%; }

.settings-input-container div:first-child {
  border-right: 2px solid red; }

.wbb-wide-label {
  display: inline-block;
  width: 100%;
  margin: 10px; }

.info-span {
  width: 100px;
  display: inline-block;
  font-weight: bold; }

.column_1_item, .column_2_item {
  margin-top: 20px; }

.add_new_column_1_item, .add_new_column_2_item {
  margin-top: 40px !important; }

.set-logo, .set-logo-2, .button-remove-logo-item, .button-remove-logo-item-2 {
  margin-top: 10px !important; }

img.js-placeholder {
  max-width: 350px; }

.desktop:before,
.mobile:before,
.tablet:before {
  display: none; }

/*doc
---
title: Space
name: space
category: Base - Space
---

Color, Type and icons are the base of the visual language. All UI elements are built with them. But equally important is space.

https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62#.u3hb0lh2q
https://www.sitepoint.com/set-css-margins-padding-cool-layout-tricks/

#### What is Space?

Space is everywhere. CSS uses properties like padding, margin, and absolute positioning’s left, right, top and bottom to separate objects.
A grid layout is not the same as space, grid is a framework using space but space is much more than that. Space is padding, margin, left, right, top and bottom.
Space is part of every element.

#### Proximity

When several items are in close proximity to each other, they become one visual unit rather than several separate units. Otherwise, their distance should be larger and look more like several visual units.
The basic purpose of proximity is to organize. To give an apparent view of the page structure and the hierarchy of information to users.

#### spatial values

as a default base size we set 16 because it's a factor of all screen resolutions. (320, 768, 1024) and it has multiples (32,64) and less (8,4,2)

2 - xxs <br/>
4 - xs <br/>
8 - s <br/>
16 - m <br/>
32 - l <br/>
64 - xl <br/>
*/
/*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; }

/*doc
---
title: Media
name: media
category: Elements - Media
---


#### Using media as links

https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H2
https://bitsofco.de/alternative-text-and-images/
https://responsiveimages.org/demos/
https://cloudfour.com/thinks/responsive-images-101-part-5-sizes/



#### Informative Images

Informative images are images that, as you would guess, provide some information. This information can be anything from a label, to supplementary information, to just an impression.

For informative images, the alternative text should convey the same information that the image does. This might be as simple as one word saying what the image is. For example, in the image below, images are used to label each section.

#### Functional images

Functional images are those that represent an action to be taken. Unlike informative images, which purely provide information for the user, functional images are used convey something actionable. These images are also typically tied to interactive elements such as links or buttons. For functional images, the alternative text should clearly communicate the action that is to be taken.


#### Decorative images

Decorative images are images that don’t convey any actual/actionable information to the viewer. Their purpose is purely styling. For example, a background pattern on an element does not provide any informative value to the user.

In these cases, an empty alt attribute should be provided. This allows the image to be simply skipped by the screenreader since it is of no use to a user with visual impairments.

#### complex images

Complex images, a type of informative image, are those that contain a very detailed and substantial amount of information. For example bar charts or graphs. For these images, it is suggested that we provide both short and long descriptions.

The short description should be provided via the alt attribute. The long description can be defined in some other element, and simply referenced using the longdesc/ aria-labelledby attributes, or by using the <figure> and <figcaption> elements.



*/
/*doc
---
title: Logo
name: logo
parent: media
---
*/
.site-logo a,
.site-logo img {
  display: block; }
@media screen and (min-width: 320px) {
  .site-logo img {
    width: 100%; } }
@media screen and (min-width: 768px) {
  .site-logo img {
    max-width: 100%; } }

.logos-container[data-logo-align="left"] .logo-widget {
  float: left;
  padding-right: 16px; }
.logos-container[data-logo-align="right"] .logo-widget {
  float: right;
  padding-left: 16px; }
.logos-container .logo-widget a {
  display: block; }
  .logos-container .logo-widget a:hover {
    background-color: transparent; }
.logos-container .logo-widget img {
  height: 50px; }

.header-hivos .logos-container {
  padding-top: 16px; }
  .header-hivos .logos-container .logo-widget img {
    height: 60px; }

/*doc
---
title: Image Background Position
name: image-background-position
parent: media
---

We use data attributes to set content and image alignments.
We need to explain more what we find here



*/
[data-image-position="left-top"] {
  background-position: left top; }

[data-image-position="left-center"] {
  background-position: left center; }

[data-image-position="left-bottom"] {
  background-position: left bottom; }

[data-image-position="center-top"] {
  background-position: center top; }

[data-image-position="center-center"] {
  background-position: center; }

[data-image-position="center-bottom"] {
  background-position: center bottom; }

[data-image-position="right-top"] {
  background-position: right top; }

[data-image-position="right-center"] {
  background-position: right center; }

[data-image-position="right-bottom"] {
  background-position: right bottom; }

[data-vertical-position="top"] {
  background-position-y: top; }

[data-vertical-position="center"] {
  background-position-y: center; }

[data-vertical-position="bottom"] {
  background-position-y: bottom; }

[data-horizontal-position="left"] {
  background-position-x: left; }

[data-horizontal-position="center"] {
  background-position-x: center; }

[data-horizontal-position="right"] {
  background-position-x: right; }

/*doc
---
title: Image Style
name: image-style
parent: media
---

Here we set the style of all image variations




*/
[image-layout="rounded"] {
  height: auto;
  background-size: contain;
  background-position: top left;
  background-repeat: no-repeat;
  border-radius: 50%;
  width: 10%;
  padding-top: 10%; }

.card-image[data-image-variation="image-rounded"] {
  width: 250px;
  height: 250px;
  border-radius: 150px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat; }
.card-image[data-image-ratio="small"] div {
  background-size: contain !important;
  background-repeat: no-repeat; }
.card-image[data-image-ratio="large"] div {
  background-size: cover; }

/*doc
---
title: Image Effect
name: image-effect
parent: media
---

Here we set the main image effects used in our pagebuilder

#### Zoom
The zoom attribute can be used in the cards

*/
[data-hover-effect="zoom"] .card-image img {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease; }
  [data-hover-effect="zoom"] .card-image img:hover {
    transform: scale(1.17); }

img[data-effect="grey-scale"] {
  filter: grayscale(100%);
  filter: gray;
  -webkit-filter: grayscale(100%); }
  img[data-effect="grey-scale"]:hover {
    filter: grayscale(0);
    filter: none;
    -webkit-filter: grayscale(0);
    transition: all 0.5s ease; }

img {
  margin: 0;
  max-width: 100%;
  height: auto; }

.gallery-block .gallery li img {
  display: block; }
.gallery-block .gallery li .gallery-image {
  padding-top: 100%;
  background-size: cover;
  background-position: center center; }
.gallery-block .gallery li:hover {
  cursor: pointer;
  z-index: 2; }

.cortana-container {
  max-width: 100% !important; }

.wide-container {
  width: 1200px; }

.desktop-container {
  width: 992px; }

.tablet-container {
  width: 768px; }

.mobile-container {
  width: 320px; }

/*doc
---
title: Icons
name: icons
category: Elements - Icons
---

Here you can add icons that are used in the website.
The icons should be added in the sub folder elements/icons

```
*/
/* MaterialDesignIcons.com */
@font-face {
  font-family: "Material Design Icons";
  src: url("../fonts/materialicons/materialdesignicons-webfont_v-1.7.22.eot");
  src: url("../fonts/materialicons/materialdesignicons-webfont.eot") format("embedded-opentype"), url("../fonts/materialicons/materialdesignicons-webfont.woff") format("woff2"), url("../fonts/materialicons/materialdesignicons-webfont_v-1.7.22.woff") format("woff"), url("../fonts/materialicons/materialdesignicons-webfont_v-1.7.22.ttf") format("truetype"), url("../fonts/materialicons/materialdesignicons-webfont_v-1.7.22-materialdesigniconsregular.svg") format("svg");
  font-weight: normal;
  font-style: normal; }
.mdi:before,
.mdi-set {
  display: inline-block;
  font: normal normal normal 24px/1 "Material Design Icons";
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0); }

.mdi-access-point:before {
  content: "\F002"; }

.mdi-access-point-network:before {
  content: "\F003"; }

.mdi-account:before {
  content: "\F004"; }

.mdi-account-alert:before {
  content: "\F005"; }

.mdi-account-box:before {
  content: "\F006"; }

.mdi-account-box-outline:before {
  content: "\F007"; }

.mdi-account-card-details:before {
  content: "\F5D2"; }

.mdi-account-check:before {
  content: "\F008"; }

.mdi-account-circle:before {
  content: "\F009"; }

.mdi-account-convert:before {
  content: "\F00A"; }

.mdi-account-key:before {
  content: "\F00B"; }

.mdi-account-location:before {
  content: "\F00C"; }

.mdi-account-minus:before {
  content: "\F00D"; }

.mdi-account-multiple:before {
  content: "\F00E"; }

.mdi-account-multiple-minus:before {
  content: "\F5D3"; }

.mdi-account-multiple-outline:before {
  content: "\F00F"; }

.mdi-account-multiple-plus:before {
  content: "\F010"; }

.mdi-account-network:before {
  content: "\F011"; }

.mdi-account-off:before {
  content: "\F012"; }

.mdi-account-outline:before {
  content: "\F013"; }

.mdi-account-plus:before {
  content: "\F014"; }

.mdi-account-remove:before {
  content: "\F015"; }

.mdi-account-search:before {
  content: "\F016"; }

.mdi-account-settings:before {
  content: "\F630"; }

.mdi-account-settings-variant:before {
  content: "\F631"; }

.mdi-account-star:before {
  content: "\F017"; }

.mdi-account-star-variant:before {
  content: "\F018"; }

.mdi-account-switch:before {
  content: "\F019"; }

.mdi-adjust:before {
  content: "\F01A"; }

.mdi-air-conditioner:before {
  content: "\F01B"; }

.mdi-airballoon:before {
  content: "\F01C"; }

.mdi-airplane:before {
  content: "\F01D"; }

.mdi-airplane-landing:before {
  content: "\F5D4"; }

.mdi-airplane-off:before {
  content: "\F01E"; }

.mdi-airplane-takeoff:before {
  content: "\F5D5"; }

.mdi-airplay:before {
  content: "\F01F"; }

.mdi-alarm:before {
  content: "\F020"; }

.mdi-alarm-check:before {
  content: "\F021"; }

.mdi-alarm-multiple:before {
  content: "\F022"; }

.mdi-alarm-off:before {
  content: "\F023"; }

.mdi-alarm-plus:before {
  content: "\F024"; }

.mdi-alarm-snooze:before {
  content: "\F68D"; }

.mdi-album:before {
  content: "\F025"; }

.mdi-alert:before {
  content: "\F026"; }

.mdi-alert-box:before {
  content: "\F027"; }

.mdi-alert-circle:before {
  content: "\F028"; }

.mdi-alert-circle-outline:before {
  content: "\F5D6"; }

.mdi-alert-octagon:before {
  content: "\F029"; }

.mdi-alert-outline:before {
  content: "\F02A"; }

.mdi-alpha:before {
  content: "\F02B"; }

.mdi-alphabetical:before {
  content: "\F02C"; }

.mdi-altimeter:before {
  content: "\F5D7"; }

.mdi-amazon:before {
  content: "\F02D"; }

.mdi-amazon-clouddrive:before {
  content: "\F02E"; }

.mdi-ambulance:before {
  content: "\F02F"; }

.mdi-amplifier:before {
  content: "\F030"; }

.mdi-anchor:before {
  content: "\F031"; }

.mdi-android:before {
  content: "\F032"; }

.mdi-android-debug-bridge:before {
  content: "\F033"; }

.mdi-android-studio:before {
  content: "\F034"; }

.mdi-angular:before {
  content: "\F6B1"; }

.mdi-animation:before {
  content: "\F5D8"; }

.mdi-apple:before {
  content: "\F035"; }

.mdi-apple-finder:before {
  content: "\F036"; }

.mdi-apple-ios:before {
  content: "\F037"; }

.mdi-apple-keyboard-caps:before {
  content: "\F632"; }

.mdi-apple-keyboard-command:before {
  content: "\F633"; }

.mdi-apple-keyboard-control:before {
  content: "\F634"; }

.mdi-apple-keyboard-option:before {
  content: "\F635"; }

.mdi-apple-keyboard-shift:before {
  content: "\F636"; }

.mdi-apple-mobileme:before {
  content: "\F038"; }

.mdi-apple-safari:before {
  content: "\F039"; }

.mdi-application:before {
  content: "\F614"; }

.mdi-appnet:before {
  content: "\F03A"; }

.mdi-apps:before {
  content: "\F03B"; }

.mdi-archive:before {
  content: "\F03C"; }

.mdi-arrange-bring-forward:before {
  content: "\F03D"; }

.mdi-arrange-bring-to-front:before {
  content: "\F03E"; }

.mdi-arrange-send-backward:before {
  content: "\F03F"; }

.mdi-arrange-send-to-back:before {
  content: "\F040"; }

.mdi-arrow-all:before {
  content: "\F041"; }

.mdi-arrow-bottom-left:before {
  content: "\F042"; }

.mdi-arrow-bottom-right:before {
  content: "\F043"; }

.mdi-arrow-compress:before {
  content: "\F615"; }

.mdi-arrow-compress-all:before {
  content: "\F044"; }

.mdi-arrow-down:before {
  content: "\F045"; }

.mdi-arrow-down-bold:before {
  content: "\F046"; }

.mdi-arrow-down-bold-circle:before {
  content: "\F047"; }

.mdi-arrow-down-bold-circle-outline:before {
  content: "\F048"; }

.mdi-arrow-down-bold-hexagon-outline:before {
  content: "\F049"; }

.mdi-arrow-down-drop-circle:before {
  content: "\F04A"; }

.mdi-arrow-down-drop-circle-outline:before {
  content: "\F04B"; }

.mdi-arrow-expand:before {
  content: "\F616"; }

.mdi-arrow-expand-all:before {
  content: "\F04C"; }

.mdi-arrow-left:before {
  content: "\F04D"; }

.mdi-arrow-left-bold:before {
  content: "\F04E"; }

.mdi-arrow-left-bold-circle:before {
  content: "\F04F"; }

.mdi-arrow-left-bold-circle-outline:before {
  content: "\F050"; }

.mdi-arrow-left-bold-hexagon-outline:before {
  content: "\F051"; }

.mdi-arrow-left-drop-circle:before {
  content: "\F052"; }

.mdi-arrow-left-drop-circle-outline:before {
  content: "\F053"; }

.mdi-arrow-right:before {
  content: "\F054"; }

.mdi-arrow-right-bold:before {
  content: "\F055"; }

.mdi-arrow-right-bold-circle:before {
  content: "\F056"; }

.mdi-arrow-right-bold-circle-outline:before {
  content: "\F057"; }

.mdi-arrow-right-bold-hexagon-outline:before {
  content: "\F058"; }

.mdi-arrow-right-drop-circle:before {
  content: "\F059"; }

.mdi-arrow-right-drop-circle-outline:before {
  content: "\F05A"; }

.mdi-arrow-top-left:before {
  content: "\F05B"; }

.mdi-arrow-top-right:before {
  content: "\F05C"; }

.mdi-arrow-up:before {
  content: "\F05D"; }

.mdi-arrow-up-bold:before {
  content: "\F05E"; }

.mdi-arrow-up-bold-circle:before {
  content: "\F05F"; }

.mdi-arrow-up-bold-circle-outline:before {
  content: "\F060"; }

.mdi-arrow-up-bold-hexagon-outline:before {
  content: "\F061"; }

.mdi-arrow-up-drop-circle:before {
  content: "\F062"; }

.mdi-arrow-up-drop-circle-outline:before {
  content: "\F063"; }

.mdi-assistant:before {
  content: "\F064"; }

.mdi-at:before {
  content: "\F065"; }

.mdi-attachment:before {
  content: "\F066"; }

.mdi-audiobook:before {
  content: "\F067"; }

.mdi-auto-fix:before {
  content: "\F068"; }

.mdi-auto-upload:before {
  content: "\F069"; }

.mdi-autorenew:before {
  content: "\F06A"; }

.mdi-av-timer:before {
  content: "\F06B"; }

.mdi-baby:before {
  content: "\F06C"; }

.mdi-baby-buggy:before {
  content: "\F68E"; }

.mdi-backburger:before {
  content: "\F06D"; }

.mdi-backspace:before {
  content: "\F06E"; }

.mdi-backup-restore:before {
  content: "\F06F"; }

.mdi-bandcamp:before {
  content: "\F674"; }

.mdi-bank:before {
  content: "\F070"; }

.mdi-barcode:before {
  content: "\F071"; }

.mdi-barcode-scan:before {
  content: "\F072"; }

.mdi-barley:before {
  content: "\F073"; }

.mdi-barrel:before {
  content: "\F074"; }

.mdi-basecamp:before {
  content: "\F075"; }

.mdi-basket:before {
  content: "\F076"; }

.mdi-basket-fill:before {
  content: "\F077"; }

.mdi-basket-unfill:before {
  content: "\F078"; }

.mdi-battery:before {
  content: "\F079"; }

.mdi-battery-10:before {
  content: "\F07A"; }

.mdi-battery-20:before {
  content: "\F07B"; }

.mdi-battery-30:before {
  content: "\F07C"; }

.mdi-battery-40:before {
  content: "\F07D"; }

.mdi-battery-50:before {
  content: "\F07E"; }

.mdi-battery-60:before {
  content: "\F07F"; }

.mdi-battery-70:before {
  content: "\F080"; }

.mdi-battery-80:before {
  content: "\F081"; }

.mdi-battery-90:before {
  content: "\F082"; }

.mdi-battery-alert:before {
  content: "\F083"; }

.mdi-battery-charging:before {
  content: "\F084"; }

.mdi-battery-charging-100:before {
  content: "\F085"; }

.mdi-battery-charging-20:before {
  content: "\F086"; }

.mdi-battery-charging-30:before {
  content: "\F087"; }

.mdi-battery-charging-40:before {
  content: "\F088"; }

.mdi-battery-charging-60:before {
  content: "\F089"; }

.mdi-battery-charging-80:before {
  content: "\F08A"; }

.mdi-battery-charging-90:before {
  content: "\F08B"; }

.mdi-battery-minus:before {
  content: "\F08C"; }

.mdi-battery-negative:before {
  content: "\F08D"; }

.mdi-battery-outline:before {
  content: "\F08E"; }

.mdi-battery-plus:before {
  content: "\F08F"; }

.mdi-battery-positive:before {
  content: "\F090"; }

.mdi-battery-unknown:before {
  content: "\F091"; }

.mdi-beach:before {
  content: "\F092"; }

.mdi-beaker:before {
  content: "\F68F"; }

.mdi-beats:before {
  content: "\F097"; }

.mdi-beer:before {
  content: "\F098"; }

.mdi-behance:before {
  content: "\F099"; }

.mdi-bell:before {
  content: "\F09A"; }

.mdi-bell-off:before {
  content: "\F09B"; }

.mdi-bell-outline:before {
  content: "\F09C"; }

.mdi-bell-plus:before {
  content: "\F09D"; }

.mdi-bell-ring:before {
  content: "\F09E"; }

.mdi-bell-ring-outline:before {
  content: "\F09F"; }

.mdi-bell-sleep:before {
  content: "\F0A0"; }

.mdi-beta:before {
  content: "\F0A1"; }

.mdi-bible:before {
  content: "\F0A2"; }

.mdi-bike:before {
  content: "\F0A3"; }

.mdi-bing:before {
  content: "\F0A4"; }

.mdi-binoculars:before {
  content: "\F0A5"; }

.mdi-bio:before {
  content: "\F0A6"; }

.mdi-biohazard:before {
  content: "\F0A7"; }

.mdi-bitbucket:before {
  content: "\F0A8"; }

.mdi-black-mesa:before {
  content: "\F0A9"; }

.mdi-blackberry:before {
  content: "\F0AA"; }

.mdi-blender:before {
  content: "\F0AB"; }

.mdi-blinds:before {
  content: "\F0AC"; }

.mdi-block-helper:before {
  content: "\F0AD"; }

.mdi-blogger:before {
  content: "\F0AE"; }

.mdi-bluetooth:before {
  content: "\F0AF"; }

.mdi-bluetooth-audio:before {
  content: "\F0B0"; }

.mdi-bluetooth-connect:before {
  content: "\F0B1"; }

.mdi-bluetooth-off:before {
  content: "\F0B2"; }

.mdi-bluetooth-settings:before {
  content: "\F0B3"; }

.mdi-bluetooth-transfer:before {
  content: "\F0B4"; }

.mdi-blur:before {
  content: "\F0B5"; }

.mdi-blur-linear:before {
  content: "\F0B6"; }

.mdi-blur-off:before {
  content: "\F0B7"; }

.mdi-blur-radial:before {
  content: "\F0B8"; }

.mdi-bomb:before {
  content: "\F690"; }

.mdi-bone:before {
  content: "\F0B9"; }

.mdi-book:before {
  content: "\F0BA"; }

.mdi-book-minus:before {
  content: "\F5D9"; }

.mdi-book-multiple:before {
  content: "\F0BB"; }

.mdi-book-multiple-variant:before {
  content: "\F0BC"; }

.mdi-book-open:before {
  content: "\F0BD"; }

.mdi-book-open-page-variant:before {
  content: "\F5DA"; }

.mdi-book-open-variant:before {
  content: "\F0BE"; }

.mdi-book-plus:before {
  content: "\F5DB"; }

.mdi-book-variant:before {
  content: "\F0BF"; }

.mdi-bookmark:before {
  content: "\F0C0"; }

.mdi-bookmark-check:before {
  content: "\F0C1"; }

.mdi-bookmark-music:before {
  content: "\F0C2"; }

.mdi-bookmark-outline:before {
  content: "\F0C3"; }

.mdi-bookmark-plus:before {
  content: "\F0C5"; }

.mdi-bookmark-plus-outline:before {
  content: "\F0C4"; }

.mdi-bookmark-remove:before {
  content: "\F0C6"; }

.mdi-boombox:before {
  content: "\F5DC"; }

.mdi-border-all:before {
  content: "\F0C7"; }

.mdi-border-bottom:before {
  content: "\F0C8"; }

.mdi-border-color:before {
  content: "\F0C9"; }

.mdi-border-horizontal:before {
  content: "\F0CA"; }

.mdi-border-inside:before {
  content: "\F0CB"; }

.mdi-border-left:before {
  content: "\F0CC"; }

.mdi-border-none:before {
  content: "\F0CD"; }

.mdi-border-outside:before {
  content: "\F0CE"; }

.mdi-border-right:before {
  content: "\F0CF"; }

.mdi-border-style:before {
  content: "\F0D0"; }

.mdi-border-top:before {
  content: "\F0D1"; }

.mdi-border-vertical:before {
  content: "\F0D2"; }

.mdi-bow-tie:before {
  content: "\F677"; }

.mdi-bowl:before {
  content: "\F617"; }

.mdi-bowling:before {
  content: "\F0D3"; }

.mdi-box:before {
  content: "\F0D4"; }

.mdi-box-cutter:before {
  content: "\F0D5"; }

.mdi-box-shadow:before {
  content: "\F637"; }

.mdi-bridge:before {
  content: "\F618"; }

.mdi-briefcase:before {
  content: "\F0D6"; }

.mdi-briefcase-check:before {
  content: "\F0D7"; }

.mdi-briefcase-download:before {
  content: "\F0D8"; }

.mdi-briefcase-upload:before {
  content: "\F0D9"; }

.mdi-brightness-1:before {
  content: "\F0DA"; }

.mdi-brightness-2:before {
  content: "\F0DB"; }

.mdi-brightness-3:before {
  content: "\F0DC"; }

.mdi-brightness-4:before {
  content: "\F0DD"; }

.mdi-brightness-5:before {
  content: "\F0DE"; }

.mdi-brightness-6:before {
  content: "\F0DF"; }

.mdi-brightness-7:before {
  content: "\F0E0"; }

.mdi-brightness-auto:before {
  content: "\F0E1"; }

.mdi-broom:before {
  content: "\F0E2"; }

.mdi-brush:before {
  content: "\F0E3"; }

.mdi-buffer:before {
  content: "\F619"; }

.mdi-bug:before {
  content: "\F0E4"; }

.mdi-bulletin-board:before {
  content: "\F0E5"; }

.mdi-bullhorn:before {
  content: "\F0E6"; }

.mdi-bullseye:before {
  content: "\F5DD"; }

.mdi-burst-mode:before {
  content: "\F5DE"; }

.mdi-bus:before {
  content: "\F0E7"; }

.mdi-cached:before {
  content: "\F0E8"; }

.mdi-cake:before {
  content: "\F0E9"; }

.mdi-cake-layered:before {
  content: "\F0EA"; }

.mdi-cake-variant:before {
  content: "\F0EB"; }

.mdi-calculator:before {
  content: "\F0EC"; }

.mdi-calendar:before {
  content: "\F0ED"; }

.mdi-calendar-blank:before {
  content: "\F0EE"; }

.mdi-calendar-check:before {
  content: "\F0EF"; }

.mdi-calendar-clock:before {
  content: "\F0F0"; }

.mdi-calendar-multiple:before {
  content: "\F0F1"; }

.mdi-calendar-multiple-check:before {
  content: "\F0F2"; }

.mdi-calendar-plus:before {
  content: "\F0F3"; }

.mdi-calendar-question:before {
  content: "\F691"; }

.mdi-calendar-range:before {
  content: "\F678"; }

.mdi-calendar-remove:before {
  content: "\F0F4"; }

.mdi-calendar-text:before {
  content: "\F0F5"; }

.mdi-calendar-today:before {
  content: "\F0F6"; }

.mdi-call-made:before {
  content: "\F0F7"; }

.mdi-call-merge:before {
  content: "\F0F8"; }

.mdi-call-missed:before {
  content: "\F0F9"; }

.mdi-call-received:before {
  content: "\F0FA"; }

.mdi-call-split:before {
  content: "\F0FB"; }

.mdi-camcorder:before {
  content: "\F0FC"; }

.mdi-camcorder-box:before {
  content: "\F0FD"; }

.mdi-camcorder-box-off:before {
  content: "\F0FE"; }

.mdi-camcorder-off:before {
  content: "\F0FF"; }

.mdi-camera:before {
  content: "\F100"; }

.mdi-camera-burst:before {
  content: "\F692"; }

.mdi-camera-enhance:before {
  content: "\F101"; }

.mdi-camera-front:before {
  content: "\F102"; }

.mdi-camera-front-variant:before {
  content: "\F103"; }

.mdi-camera-iris:before {
  content: "\F104"; }

.mdi-camera-off:before {
  content: "\F5DF"; }

.mdi-camera-party-mode:before {
  content: "\F105"; }

.mdi-camera-rear:before {
  content: "\F106"; }

.mdi-camera-rear-variant:before {
  content: "\F107"; }

.mdi-camera-switch:before {
  content: "\F108"; }

.mdi-camera-timer:before {
  content: "\F109"; }

.mdi-candle:before {
  content: "\F5E2"; }

.mdi-candycane:before {
  content: "\F10A"; }

.mdi-car:before {
  content: "\F10B"; }

.mdi-car-battery:before {
  content: "\F10C"; }

.mdi-car-connected:before {
  content: "\F10D"; }

.mdi-car-wash:before {
  content: "\F10E"; }

.mdi-cards:before {
  content: "\F638"; }

.mdi-cards-outline:before {
  content: "\F639"; }

.mdi-cards-playing-outline:before {
  content: "\F63A"; }

.mdi-carrot:before {
  content: "\F10F"; }

.mdi-cart:before {
  content: "\F110"; }

.mdi-cart-off:before {
  content: "\F66B"; }

.mdi-cart-outline:before {
  content: "\F111"; }

.mdi-cart-plus:before {
  content: "\F112"; }

.mdi-case-sensitive-alt:before {
  content: "\F113"; }

.mdi-cash:before {
  content: "\F114"; }

.mdi-cash-100:before {
  content: "\F115"; }

.mdi-cash-multiple:before {
  content: "\F116"; }

.mdi-cash-usd:before {
  content: "\F117"; }

.mdi-cast:before {
  content: "\F118"; }

.mdi-cast-connected:before {
  content: "\F119"; }

.mdi-castle:before {
  content: "\F11A"; }

.mdi-cat:before {
  content: "\F11B"; }

.mdi-cellphone:before {
  content: "\F11C"; }

.mdi-cellphone-android:before {
  content: "\F11D"; }

.mdi-cellphone-basic:before {
  content: "\F11E"; }

.mdi-cellphone-dock:before {
  content: "\F11F"; }

.mdi-cellphone-iphone:before {
  content: "\F120"; }

.mdi-cellphone-link:before {
  content: "\F121"; }

.mdi-cellphone-link-off:before {
  content: "\F122"; }

.mdi-cellphone-settings:before {
  content: "\F123"; }

.mdi-certificate:before {
  content: "\F124"; }

.mdi-chair-school:before {
  content: "\F125"; }

.mdi-chart-arc:before {
  content: "\F126"; }

.mdi-chart-areaspline:before {
  content: "\F127"; }

.mdi-chart-bar:before {
  content: "\F128"; }

.mdi-chart-bubble:before {
  content: "\F5E3"; }

.mdi-chart-gantt:before {
  content: "\F66C"; }

.mdi-chart-histogram:before {
  content: "\F129"; }

.mdi-chart-line:before {
  content: "\F12A"; }

.mdi-chart-pie:before {
  content: "\F12B"; }

.mdi-chart-scatterplot-hexbin:before {
  content: "\F66D"; }

.mdi-chart-timeline:before {
  content: "\F66E"; }

.mdi-check:before {
  content: "\F12C"; }

.mdi-check-all:before {
  content: "\F12D"; }

.mdi-check-circle:before {
  content: "\F5E0"; }

.mdi-check-circle-outline:before {
  content: "\F5E1"; }

.mdi-checkbox-blank:before {
  content: "\F12E"; }

.mdi-checkbox-blank-circle:before {
  content: "\F12F"; }

.mdi-checkbox-blank-circle-outline:before {
  content: "\F130"; }

.mdi-checkbox-blank-outline:before {
  content: "\F131"; }

.mdi-checkbox-marked:before {
  content: "\F132"; }

.mdi-checkbox-marked-circle:before {
  content: "\F133"; }

.mdi-checkbox-marked-circle-outline:before {
  content: "\F134"; }

.mdi-checkbox-marked-outline:before {
  content: "\F135"; }

.mdi-checkbox-multiple-blank:before {
  content: "\F136"; }

.mdi-checkbox-multiple-blank-circle:before {
  content: "\F63B"; }

.mdi-checkbox-multiple-blank-circle-outline:before {
  content: "\F63C"; }

.mdi-checkbox-multiple-blank-outline:before {
  content: "\F137"; }

.mdi-checkbox-multiple-marked:before {
  content: "\F138"; }

.mdi-checkbox-multiple-marked-circle:before {
  content: "\F63D"; }

.mdi-checkbox-multiple-marked-circle-outline:before {
  content: "\F63E"; }

.mdi-checkbox-multiple-marked-outline:before {
  content: "\F139"; }

.mdi-checkerboard:before {
  content: "\F13A"; }

.mdi-chemical-weapon:before {
  content: "\F13B"; }

.mdi-chevron-double-down:before {
  content: "\F13C"; }

.mdi-chevron-double-left:before {
  content: "\F13D"; }

.mdi-chevron-double-right:before {
  content: "\F13E"; }

.mdi-chevron-double-up:before {
  content: "\F13F"; }

.mdi-chevron-down:before {
  content: "\F140"; }

.mdi-chevron-left:before {
  content: "\F141"; }

.mdi-chevron-right:before {
  content: "\F142"; }

.mdi-chevron-up:before {
  content: "\F143"; }

.mdi-chip:before {
  content: "\F61A"; }

.mdi-church:before {
  content: "\F144"; }

.mdi-cisco-webex:before {
  content: "\F145"; }

.mdi-city:before {
  content: "\F146"; }

.mdi-clipboard:before {
  content: "\F147"; }

.mdi-clipboard-account:before {
  content: "\F148"; }

.mdi-clipboard-alert:before {
  content: "\F149"; }

.mdi-clipboard-arrow-down:before {
  content: "\F14A"; }

.mdi-clipboard-arrow-left:before {
  content: "\F14B"; }

.mdi-clipboard-check:before {
  content: "\F14C"; }

.mdi-clipboard-outline:before {
  content: "\F14D"; }

.mdi-clipboard-text:before {
  content: "\F14E"; }

.mdi-clippy:before {
  content: "\F14F"; }

.mdi-clock:before {
  content: "\F150"; }

.mdi-clock-alert:before {
  content: "\F5CE"; }

.mdi-clock-end:before {
  content: "\F151"; }

.mdi-clock-fast:before {
  content: "\F152"; }

.mdi-clock-in:before {
  content: "\F153"; }

.mdi-clock-out:before {
  content: "\F154"; }

.mdi-clock-start:before {
  content: "\F155"; }

.mdi-close:before {
  content: "\F156"; }

.mdi-close-box:before {
  content: "\F157"; }

.mdi-close-box-outline:before {
  content: "\F158"; }

.mdi-close-circle:before {
  content: "\F159"; }

.mdi-close-circle-outline:before {
  content: "\F15A"; }

.mdi-close-network:before {
  content: "\F15B"; }

.mdi-close-octagon:before {
  content: "\F15C"; }

.mdi-close-octagon-outline:before {
  content: "\F15D"; }

.mdi-closed-caption:before {
  content: "\F15E"; }

.mdi-cloud:before {
  content: "\F15F"; }

.mdi-cloud-check:before {
  content: "\F160"; }

.mdi-cloud-circle:before {
  content: "\F161"; }

.mdi-cloud-download:before {
  content: "\F162"; }

.mdi-cloud-outline:before {
  content: "\F163"; }

.mdi-cloud-outline-off:before {
  content: "\F164"; }

.mdi-cloud-print:before {
  content: "\F165"; }

.mdi-cloud-print-outline:before {
  content: "\F166"; }

.mdi-cloud-sync:before {
  content: "\F63F"; }

.mdi-cloud-upload:before {
  content: "\F167"; }

.mdi-code-array:before {
  content: "\F168"; }

.mdi-code-braces:before {
  content: "\F169"; }

.mdi-code-brackets:before {
  content: "\F16A"; }

.mdi-code-equal:before {
  content: "\F16B"; }

.mdi-code-greater-than:before {
  content: "\F16C"; }

.mdi-code-greater-than-or-equal:before {
  content: "\F16D"; }

.mdi-code-less-than:before {
  content: "\F16E"; }

.mdi-code-less-than-or-equal:before {
  content: "\F16F"; }

.mdi-code-not-equal:before {
  content: "\F170"; }

.mdi-code-not-equal-variant:before {
  content: "\F171"; }

.mdi-code-parentheses:before {
  content: "\F172"; }

.mdi-code-string:before {
  content: "\F173"; }

.mdi-code-tags:before {
  content: "\F174"; }

.mdi-code-tags-check:before {
  content: "\F693"; }

.mdi-codepen:before {
  content: "\F175"; }

.mdi-coffee:before {
  content: "\F176"; }

.mdi-coffee-to-go:before {
  content: "\F177"; }

.mdi-coin:before {
  content: "\F178"; }

.mdi-coins:before {
  content: "\F694"; }

.mdi-collage:before {
  content: "\F640"; }

.mdi-color-helper:before {
  content: "\F179"; }

.mdi-comment:before {
  content: "\F17A"; }

.mdi-comment-account:before {
  content: "\F17B"; }

.mdi-comment-account-outline:before {
  content: "\F17C"; }

.mdi-comment-alert:before {
  content: "\F17D"; }

.mdi-comment-alert-outline:before {
  content: "\F17E"; }

.mdi-comment-check:before {
  content: "\F17F"; }

.mdi-comment-check-outline:before {
  content: "\F180"; }

.mdi-comment-multiple-outline:before {
  content: "\F181"; }

.mdi-comment-outline:before {
  content: "\F182"; }

.mdi-comment-plus-outline:before {
  content: "\F183"; }

.mdi-comment-processing:before {
  content: "\F184"; }

.mdi-comment-processing-outline:before {
  content: "\F185"; }

.mdi-comment-question-outline:before {
  content: "\F186"; }

.mdi-comment-remove-outline:before {
  content: "\F187"; }

.mdi-comment-text:before {
  content: "\F188"; }

.mdi-comment-text-outline:before {
  content: "\F189"; }

.mdi-compare:before {
  content: "\F18A"; }

.mdi-compass:before {
  content: "\F18B"; }

.mdi-compass-outline:before {
  content: "\F18C"; }

.mdi-console:before {
  content: "\F18D"; }

.mdi-contact-mail:before {
  content: "\F18E"; }

.mdi-content-copy:before {
  content: "\F18F"; }

.mdi-content-cut:before {
  content: "\F190"; }

.mdi-content-duplicate:before {
  content: "\F191"; }

.mdi-content-paste:before {
  content: "\F192"; }

.mdi-content-save:before {
  content: "\F193"; }

.mdi-content-save-all:before {
  content: "\F194"; }

.mdi-content-save-settings:before {
  content: "\F61B"; }

.mdi-contrast:before {
  content: "\F195"; }

.mdi-contrast-box:before {
  content: "\F196"; }

.mdi-contrast-circle:before {
  content: "\F197"; }

.mdi-cookie:before {
  content: "\F198"; }

.mdi-copyright:before {
  content: "\F5E6"; }

.mdi-counter:before {
  content: "\F199"; }

.mdi-cow:before {
  content: "\F19A"; }

.mdi-creation:before {
  content: "\F1C9"; }

.mdi-credit-card:before {
  content: "\F19B"; }

.mdi-credit-card-multiple:before {
  content: "\F19C"; }

.mdi-credit-card-off:before {
  content: "\F5E4"; }

.mdi-credit-card-plus:before {
  content: "\F675"; }

.mdi-credit-card-scan:before {
  content: "\F19D"; }

.mdi-crop:before {
  content: "\F19E"; }

.mdi-crop-free:before {
  content: "\F19F"; }

.mdi-crop-landscape:before {
  content: "\F1A0"; }

.mdi-crop-portrait:before {
  content: "\F1A1"; }

.mdi-crop-rotate:before {
  content: "\F695"; }

.mdi-crop-square:before {
  content: "\F1A2"; }

.mdi-crosshairs:before {
  content: "\F1A3"; }

.mdi-crosshairs-gps:before {
  content: "\F1A4"; }

.mdi-crown:before {
  content: "\F1A5"; }

.mdi-cube:before {
  content: "\F1A6"; }

.mdi-cube-outline:before {
  content: "\F1A7"; }

.mdi-cube-send:before {
  content: "\F1A8"; }

.mdi-cube-unfolded:before {
  content: "\F1A9"; }

.mdi-cup:before {
  content: "\F1AA"; }

.mdi-cup-off:before {
  content: "\F5E5"; }

.mdi-cup-water:before {
  content: "\F1AB"; }

.mdi-currency-btc:before {
  content: "\F1AC"; }

.mdi-currency-eur:before {
  content: "\F1AD"; }

.mdi-currency-gbp:before {
  content: "\F1AE"; }

.mdi-currency-inr:before {
  content: "\F1AF"; }

.mdi-currency-ngn:before {
  content: "\F1B0"; }

.mdi-currency-rub:before {
  content: "\F1B1"; }

.mdi-currency-try:before {
  content: "\F1B2"; }

.mdi-currency-usd:before {
  content: "\F1B3"; }

.mdi-currency-usd-off:before {
  content: "\F679"; }

.mdi-cursor-default:before {
  content: "\F1B4"; }

.mdi-cursor-default-outline:before {
  content: "\F1B5"; }

.mdi-cursor-move:before {
  content: "\F1B6"; }

.mdi-cursor-pointer:before {
  content: "\F1B7"; }

.mdi-cursor-text:before {
  content: "\F5E7"; }

.mdi-database:before {
  content: "\F1B8"; }

.mdi-database-minus:before {
  content: "\F1B9"; }

.mdi-database-plus:before {
  content: "\F1BA"; }

.mdi-debug-step-into:before {
  content: "\F1BB"; }

.mdi-debug-step-out:before {
  content: "\F1BC"; }

.mdi-debug-step-over:before {
  content: "\F1BD"; }

.mdi-decimal-decrease:before {
  content: "\F1BE"; }

.mdi-decimal-increase:before {
  content: "\F1BF"; }

.mdi-delete:before {
  content: "\F1C0"; }

.mdi-delete-circle:before {
  content: "\F682"; }

.mdi-delete-forever:before {
  content: "\F5E8"; }

.mdi-delete-sweep:before {
  content: "\F5E9"; }

.mdi-delete-variant:before {
  content: "\F1C1"; }

.mdi-delta:before {
  content: "\F1C2"; }

.mdi-deskphone:before {
  content: "\F1C3"; }

.mdi-desktop-mac:before {
  content: "\F1C4"; }

.mdi-desktop-tower:before {
  content: "\F1C5"; }

.mdi-details:before {
  content: "\F1C6"; }

.mdi-developer-board:before {
  content: "\F696"; }

.mdi-deviantart:before {
  content: "\F1C7"; }

.mdi-dialpad:before {
  content: "\F61C"; }

.mdi-diamond:before {
  content: "\F1C8"; }

.mdi-dice-1:before {
  content: "\F1CA"; }

.mdi-dice-2:before {
  content: "\F1CB"; }

.mdi-dice-3:before {
  content: "\F1CC"; }

.mdi-dice-4:before {
  content: "\F1CD"; }

.mdi-dice-5:before {
  content: "\F1CE"; }

.mdi-dice-6:before {
  content: "\F1CF"; }

.mdi-dice-d20:before {
  content: "\F5EA"; }

.mdi-dice-d4:before {
  content: "\F5EB"; }

.mdi-dice-d6:before {
  content: "\F5EC"; }

.mdi-dice-d8:before {
  content: "\F5ED"; }

.mdi-dictionary:before {
  content: "\F61D"; }

.mdi-directions:before {
  content: "\F1D0"; }

.mdi-directions-fork:before {
  content: "\F641"; }

.mdi-discord:before {
  content: "\F66F"; }

.mdi-disk:before {
  content: "\F5EE"; }

.mdi-disk-alert:before {
  content: "\F1D1"; }

.mdi-disqus:before {
  content: "\F1D2"; }

.mdi-disqus-outline:before {
  content: "\F1D3"; }

.mdi-division:before {
  content: "\F1D4"; }

.mdi-division-box:before {
  content: "\F1D5"; }

.mdi-dna:before {
  content: "\F683"; }

.mdi-dns:before {
  content: "\F1D6"; }

.mdi-do-not-disturb:before {
  content: "\F697"; }

.mdi-do-not-disturb-off:before {
  content: "\F698"; }

.mdi-dolby:before {
  content: "\F6B2"; }

.mdi-domain:before {
  content: "\F1D7"; }

.mdi-dots-horizontal:before {
  content: "\F1D8"; }

.mdi-dots-vertical:before {
  content: "\F1D9"; }

.mdi-douban:before {
  content: "\F699"; }

.mdi-download:before {
  content: "\F1DA"; }

.mdi-drag:before {
  content: "\F1DB"; }

.mdi-drag-horizontal:before {
  content: "\F1DC"; }

.mdi-drag-vertical:before {
  content: "\F1DD"; }

.mdi-drawing:before {
  content: "\F1DE"; }

.mdi-drawing-box:before {
  content: "\F1DF"; }

.mdi-dribbble:before {
  content: "\F1E0"; }

.mdi-dribbble-box:before {
  content: "\F1E1"; }

.mdi-drone:before {
  content: "\F1E2"; }

.mdi-dropbox:before {
  content: "\F1E3"; }

.mdi-drupal:before {
  content: "\F1E4"; }

.mdi-duck:before {
  content: "\F1E5"; }

.mdi-dumbbell:before {
  content: "\F1E6"; }

.mdi-earth:before {
  content: "\F1E7"; }

.mdi-earth-off:before {
  content: "\F1E8"; }

.mdi-edge:before {
  content: "\F1E9"; }

.mdi-eject:before {
  content: "\F1EA"; }

.mdi-elevation-decline:before {
  content: "\F1EB"; }

.mdi-elevation-rise:before {
  content: "\F1EC"; }

.mdi-elevator:before {
  content: "\F1ED"; }

.mdi-email:before {
  content: "\F1EE"; }

.mdi-email-open:before {
  content: "\F1EF"; }

.mdi-email-open-outline:before {
  content: "\F5EF"; }

.mdi-email-outline:before {
  content: "\F1F0"; }

.mdi-email-secure:before {
  content: "\F1F1"; }

.mdi-email-variant:before {
  content: "\F5F0"; }

.mdi-emby:before {
  content: "\F6B3"; }

.mdi-emoticon:before {
  content: "\F1F2"; }

.mdi-emoticon-cool:before {
  content: "\F1F3"; }

.mdi-emoticon-dead:before {
  content: "\F69A"; }

.mdi-emoticon-devil:before {
  content: "\F1F4"; }

.mdi-emoticon-excited:before {
  content: "\F69B"; }

.mdi-emoticon-happy:before {
  content: "\F1F5"; }

.mdi-emoticon-neutral:before {
  content: "\F1F6"; }

.mdi-emoticon-poop:before {
  content: "\F1F7"; }

.mdi-emoticon-sad:before {
  content: "\F1F8"; }

.mdi-emoticon-tongue:before {
  content: "\F1F9"; }

.mdi-engine:before {
  content: "\F1FA"; }

.mdi-engine-outline:before {
  content: "\F1FB"; }

.mdi-equal:before {
  content: "\F1FC"; }

.mdi-equal-box:before {
  content: "\F1FD"; }

.mdi-eraser:before {
  content: "\F1FE"; }

.mdi-eraser-variant:before {
  content: "\F642"; }

.mdi-escalator:before {
  content: "\F1FF"; }

.mdi-ethernet:before {
  content: "\F200"; }

.mdi-ethernet-cable:before {
  content: "\F201"; }

.mdi-ethernet-cable-off:before {
  content: "\F202"; }

.mdi-etsy:before {
  content: "\F203"; }

.mdi-ev-station:before {
  content: "\F5F1"; }

.mdi-evernote:before {
  content: "\F204"; }

.mdi-exclamation:before {
  content: "\F205"; }

.mdi-exit-to-app:before {
  content: "\F206"; }

.mdi-export:before {
  content: "\F207"; }

.mdi-eye:before {
  content: "\F208"; }

.mdi-eye-off:before {
  content: "\F209"; }

.mdi-eyedropper:before {
  content: "\F20A"; }

.mdi-eyedropper-variant:before {
  content: "\F20B"; }

.mdi-face:before {
  content: "\F643"; }

.mdi-face-profile:before {
  content: "\F644"; }

.mdi-facebook:before {
  content: "\F20C"; }

.mdi-facebook-box:before {
  content: "\F20D"; }

.mdi-facebook-messenger:before {
  content: "\F20E"; }

.mdi-factory:before {
  content: "\F20F"; }

.mdi-fan:before {
  content: "\F210"; }

.mdi-fast-forward:before {
  content: "\F211"; }

.mdi-fax:before {
  content: "\F212"; }

.mdi-ferry:before {
  content: "\F213"; }

.mdi-file:before {
  content: "\F214"; }

.mdi-file-chart:before {
  content: "\F215"; }

.mdi-file-check:before {
  content: "\F216"; }

.mdi-file-cloud:before {
  content: "\F217"; }

.mdi-file-delimited:before {
  content: "\F218"; }

.mdi-file-document:before {
  content: "\F219"; }

.mdi-file-document-box:before {
  content: "\F21A"; }

.mdi-file-excel:before {
  content: "\F21B"; }

.mdi-file-excel-box:before {
  content: "\F21C"; }

.mdi-file-export:before {
  content: "\F21D"; }

.mdi-file-find:before {
  content: "\F21E"; }

.mdi-file-hidden:before {
  content: "\F613"; }

.mdi-file-image:before {
  content: "\F21F"; }

.mdi-file-import:before {
  content: "\F220"; }

.mdi-file-lock:before {
  content: "\F221"; }

.mdi-file-multiple:before {
  content: "\F222"; }

.mdi-file-music:before {
  content: "\F223"; }

.mdi-file-outline:before {
  content: "\F224"; }

.mdi-file-pdf:before {
  content: "\F225"; }

.mdi-file-pdf-box:before {
  content: "\F226"; }

.mdi-file-powerpoint:before {
  content: "\F227"; }

.mdi-file-powerpoint-box:before {
  content: "\F228"; }

.mdi-file-presentation-box:before {
  content: "\F229"; }

.mdi-file-restore:before {
  content: "\F670"; }

.mdi-file-send:before {
  content: "\F22A"; }

.mdi-file-tree:before {
  content: "\F645"; }

.mdi-file-video:before {
  content: "\F22B"; }

.mdi-file-word:before {
  content: "\F22C"; }

.mdi-file-word-box:before {
  content: "\F22D"; }

.mdi-file-xml:before {
  content: "\F22E"; }

.mdi-film:before {
  content: "\F22F"; }

.mdi-filmstrip:before {
  content: "\F230"; }

.mdi-filmstrip-off:before {
  content: "\F231"; }

.mdi-filter:before {
  content: "\F232"; }

.mdi-filter-outline:before {
  content: "\F233"; }

.mdi-filter-remove:before {
  content: "\F234"; }

.mdi-filter-remove-outline:before {
  content: "\F235"; }

.mdi-filter-variant:before {
  content: "\F236"; }

.mdi-fingerprint:before {
  content: "\F237"; }

.mdi-fire:before {
  content: "\F238"; }

.mdi-firefox:before {
  content: "\F239"; }

.mdi-fish:before {
  content: "\F23A"; }

.mdi-flag:before {
  content: "\F23B"; }

.mdi-flag-checkered:before {
  content: "\F23C"; }

.mdi-flag-outline:before {
  content: "\F23D"; }

.mdi-flag-outline-variant:before {
  content: "\F23E"; }

.mdi-flag-triangle:before {
  content: "\F23F"; }

.mdi-flag-variant:before {
  content: "\F240"; }

.mdi-flash:before {
  content: "\F241"; }

.mdi-flash-auto:before {
  content: "\F242"; }

.mdi-flash-off:before {
  content: "\F243"; }

.mdi-flash-red-eye:before {
  content: "\F67A"; }

.mdi-flashlight:before {
  content: "\F244"; }

.mdi-flashlight-off:before {
  content: "\F245"; }

.mdi-flask:before {
  content: "\F093"; }

.mdi-flask-empty:before {
  content: "\F094"; }

.mdi-flask-empty-outline:before {
  content: "\F095"; }

.mdi-flask-outline:before {
  content: "\F096"; }

.mdi-flattr:before {
  content: "\F246"; }

.mdi-flip-to-back:before {
  content: "\F247"; }

.mdi-flip-to-front:before {
  content: "\F248"; }

.mdi-floppy:before {
  content: "\F249"; }

.mdi-flower:before {
  content: "\F24A"; }

.mdi-folder:before {
  content: "\F24B"; }

.mdi-folder-account:before {
  content: "\F24C"; }

.mdi-folder-download:before {
  content: "\F24D"; }

.mdi-folder-google-drive:before {
  content: "\F24E"; }

.mdi-folder-image:before {
  content: "\F24F"; }

.mdi-folder-lock:before {
  content: "\F250"; }

.mdi-folder-lock-open:before {
  content: "\F251"; }

.mdi-folder-move:before {
  content: "\F252"; }

.mdi-folder-multiple:before {
  content: "\F253"; }

.mdi-folder-multiple-image:before {
  content: "\F254"; }

.mdi-folder-multiple-outline:before {
  content: "\F255"; }

.mdi-folder-outline:before {
  content: "\F256"; }

.mdi-folder-plus:before {
  content: "\F257"; }

.mdi-folder-remove:before {
  content: "\F258"; }

.mdi-folder-star:before {
  content: "\F69C"; }

.mdi-folder-upload:before {
  content: "\F259"; }

.mdi-food:before {
  content: "\F25A"; }

.mdi-food-apple:before {
  content: "\F25B"; }

.mdi-food-fork-drink:before {
  content: "\F5F2"; }

.mdi-food-off:before {
  content: "\F5F3"; }

.mdi-food-variant:before {
  content: "\F25C"; }

.mdi-football:before {
  content: "\F25D"; }

.mdi-football-australian:before {
  content: "\F25E"; }

.mdi-football-helmet:before {
  content: "\F25F"; }

.mdi-format-align-center:before {
  content: "\F260"; }

.mdi-format-align-justify:before {
  content: "\F261"; }

.mdi-format-align-left:before {
  content: "\F262"; }

.mdi-format-align-right:before {
  content: "\F263"; }

.mdi-format-annotation-plus:before {
  content: "\F646"; }

.mdi-format-bold:before {
  content: "\F264"; }

.mdi-format-clear:before {
  content: "\F265"; }

.mdi-format-color-fill:before {
  content: "\F266"; }

.mdi-format-color-text:before {
  content: "\F69D"; }

.mdi-format-float-center:before {
  content: "\F267"; }

.mdi-format-float-left:before {
  content: "\F268"; }

.mdi-format-float-none:before {
  content: "\F269"; }

.mdi-format-float-right:before {
  content: "\F26A"; }

.mdi-format-header-1:before {
  content: "\F26B"; }

.mdi-format-header-2:before {
  content: "\F26C"; }

.mdi-format-header-3:before {
  content: "\F26D"; }

.mdi-format-header-4:before {
  content: "\F26E"; }

.mdi-format-header-5:before {
  content: "\F26F"; }

.mdi-format-header-6:before {
  content: "\F270"; }

.mdi-format-header-decrease:before {
  content: "\F271"; }

.mdi-format-header-equal:before {
  content: "\F272"; }

.mdi-format-header-increase:before {
  content: "\F273"; }

.mdi-format-header-pound:before {
  content: "\F274"; }

.mdi-format-horizontal-align-center:before {
  content: "\F61E"; }

.mdi-format-horizontal-align-left:before {
  content: "\F61F"; }

.mdi-format-horizontal-align-right:before {
  content: "\F620"; }

.mdi-format-indent-decrease:before {
  content: "\F275"; }

.mdi-format-indent-increase:before {
  content: "\F276"; }

.mdi-format-italic:before {
  content: "\F277"; }

.mdi-format-line-spacing:before {
  content: "\F278"; }

.mdi-format-line-style:before {
  content: "\F5C8"; }

.mdi-format-line-weight:before {
  content: "\F5C9"; }

.mdi-format-list-bulleted:before {
  content: "\F279"; }

.mdi-format-list-bulleted-type:before {
  content: "\F27A"; }

.mdi-format-list-numbers:before {
  content: "\F27B"; }

.mdi-format-paint:before {
  content: "\F27C"; }

.mdi-format-paragraph:before {
  content: "\F27D"; }

.mdi-format-quote:before {
  content: "\F27E"; }

.mdi-format-section:before {
  content: "\F69E"; }

.mdi-format-size:before {
  content: "\F27F"; }

.mdi-format-strikethrough:before {
  content: "\F280"; }

.mdi-format-strikethrough-variant:before {
  content: "\F281"; }

.mdi-format-subscript:before {
  content: "\F282"; }

.mdi-format-superscript:before {
  content: "\F283"; }

.mdi-format-text:before {
  content: "\F284"; }

.mdi-format-textdirection-l-to-r:before {
  content: "\F285"; }

.mdi-format-textdirection-r-to-l:before {
  content: "\F286"; }

.mdi-format-title:before {
  content: "\F5F4"; }

.mdi-format-underline:before {
  content: "\F287"; }

.mdi-format-vertical-align-bottom:before {
  content: "\F621"; }

.mdi-format-vertical-align-center:before {
  content: "\F622"; }

.mdi-format-vertical-align-top:before {
  content: "\F623"; }

.mdi-format-wrap-inline:before {
  content: "\F288"; }

.mdi-format-wrap-square:before {
  content: "\F289"; }

.mdi-format-wrap-tight:before {
  content: "\F28A"; }

.mdi-format-wrap-top-bottom:before {
  content: "\F28B"; }

.mdi-forum:before {
  content: "\F28C"; }

.mdi-forward:before {
  content: "\F28D"; }

.mdi-foursquare:before {
  content: "\F28E"; }

.mdi-fridge:before {
  content: "\F28F"; }

.mdi-fridge-filled:before {
  content: "\F290"; }

.mdi-fridge-filled-bottom:before {
  content: "\F291"; }

.mdi-fridge-filled-top:before {
  content: "\F292"; }

.mdi-fullscreen:before {
  content: "\F293"; }

.mdi-fullscreen-exit:before {
  content: "\F294"; }

.mdi-function:before {
  content: "\F295"; }

.mdi-gamepad:before {
  content: "\F296"; }

.mdi-gamepad-variant:before {
  content: "\F297"; }

.mdi-gas-cylinder:before {
  content: "\F647"; }

.mdi-gas-station:before {
  content: "\F298"; }

.mdi-gate:before {
  content: "\F299"; }

.mdi-gauge:before {
  content: "\F29A"; }

.mdi-gavel:before {
  content: "\F29B"; }

.mdi-gender-female:before {
  content: "\F29C"; }

.mdi-gender-male:before {
  content: "\F29D"; }

.mdi-gender-male-female:before {
  content: "\F29E"; }

.mdi-gender-transgender:before {
  content: "\F29F"; }

.mdi-ghost:before {
  content: "\F2A0"; }

.mdi-gift:before {
  content: "\F2A1"; }

.mdi-git:before {
  content: "\F2A2"; }

.mdi-github-box:before {
  content: "\F2A3"; }

.mdi-github-circle:before {
  content: "\F2A4"; }

.mdi-glass-flute:before {
  content: "\F2A5"; }

.mdi-glass-mug:before {
  content: "\F2A6"; }

.mdi-glass-stange:before {
  content: "\F2A7"; }

.mdi-glass-tulip:before {
  content: "\F2A8"; }

.mdi-glassdoor:before {
  content: "\F2A9"; }

.mdi-glasses:before {
  content: "\F2AA"; }

.mdi-gmail:before {
  content: "\F2AB"; }

.mdi-gnome:before {
  content: "\F2AC"; }

.mdi-gondola:before {
  content: "\F685"; }

.mdi-google:before {
  content: "\F2AD"; }

.mdi-google-cardboard:before {
  content: "\F2AE"; }

.mdi-google-chrome:before {
  content: "\F2AF"; }

.mdi-google-circles:before {
  content: "\F2B0"; }

.mdi-google-circles-communities:before {
  content: "\F2B1"; }

.mdi-google-circles-extended:before {
  content: "\F2B2"; }

.mdi-google-circles-group:before {
  content: "\F2B3"; }

.mdi-google-controller:before {
  content: "\F2B4"; }

.mdi-google-controller-off:before {
  content: "\F2B5"; }

.mdi-google-drive:before {
  content: "\F2B6"; }

.mdi-google-earth:before {
  content: "\F2B7"; }

.mdi-google-glass:before {
  content: "\F2B8"; }

.mdi-google-maps:before {
  content: "\F5F5"; }

.mdi-google-nearby:before {
  content: "\F2B9"; }

.mdi-google-pages:before {
  content: "\F2BA"; }

.mdi-google-physical-web:before {
  content: "\F2BB"; }

.mdi-google-play:before {
  content: "\F2BC"; }

.mdi-google-plus:before {
  content: "\F2BD"; }

.mdi-google-plus-box:before {
  content: "\F2BE"; }

.mdi-google-translate:before {
  content: "\F2BF"; }

.mdi-google-wallet:before {
  content: "\F2C0"; }

.mdi-gradient:before {
  content: "\F69F"; }

.mdi-grease-pencil:before {
  content: "\F648"; }

.mdi-grid:before {
  content: "\F2C1"; }

.mdi-grid-off:before {
  content: "\F2C2"; }

.mdi-group:before {
  content: "\F2C3"; }

.mdi-guitar-electric:before {
  content: "\F2C4"; }

.mdi-guitar-pick:before {
  content: "\F2C5"; }

.mdi-guitar-pick-outline:before {
  content: "\F2C6"; }

.mdi-hackernews:before {
  content: "\F624"; }

.mdi-hamburger:before {
  content: "\F684"; }

.mdi-hand-pointing-right:before {
  content: "\F2C7"; }

.mdi-hanger:before {
  content: "\F2C8"; }

.mdi-hangouts:before {
  content: "\F2C9"; }

.mdi-harddisk:before {
  content: "\F2CA"; }

.mdi-headphones:before {
  content: "\F2CB"; }

.mdi-headphones-box:before {
  content: "\F2CC"; }

.mdi-headphones-settings:before {
  content: "\F2CD"; }

.mdi-headset:before {
  content: "\F2CE"; }

.mdi-headset-dock:before {
  content: "\F2CF"; }

.mdi-headset-off:before {
  content: "\F2D0"; }

.mdi-heart:before {
  content: "\F2D1"; }

.mdi-heart-box:before {
  content: "\F2D2"; }

.mdi-heart-box-outline:before {
  content: "\F2D3"; }

.mdi-heart-broken:before {
  content: "\F2D4"; }

.mdi-heart-outline:before {
  content: "\F2D5"; }

.mdi-heart-pulse:before {
  content: "\F5F6"; }

.mdi-help:before {
  content: "\F2D6"; }

.mdi-help-circle:before {
  content: "\F2D7"; }

.mdi-help-circle-outline:before {
  content: "\F625"; }

.mdi-hexagon:before {
  content: "\F2D8"; }

.mdi-hexagon-outline:before {
  content: "\F2D9"; }

.mdi-highway:before {
  content: "\F5F7"; }

.mdi-history:before {
  content: "\F2DA"; }

.mdi-hololens:before {
  content: "\F2DB"; }

.mdi-home:before {
  content: "\F2DC"; }

.mdi-home-map-marker:before {
  content: "\F5F8"; }

.mdi-home-modern:before {
  content: "\F2DD"; }

.mdi-home-outline:before {
  content: "\F6A0"; }

.mdi-home-variant:before {
  content: "\F2DE"; }

.mdi-hops:before {
  content: "\F2DF"; }

.mdi-hospital:before {
  content: "\F2E0"; }

.mdi-hospital-building:before {
  content: "\F2E1"; }

.mdi-hospital-marker:before {
  content: "\F2E2"; }

.mdi-hotel:before {
  content: "\F2E3"; }

.mdi-houzz:before {
  content: "\F2E4"; }

.mdi-houzz-box:before {
  content: "\F2E5"; }

.mdi-human:before {
  content: "\F2E6"; }

.mdi-human-child:before {
  content: "\F2E7"; }

.mdi-human-female:before {
  content: "\F649"; }

.mdi-human-greeting:before {
  content: "\F64A"; }

.mdi-human-handsdown:before {
  content: "\F64B"; }

.mdi-human-handsup:before {
  content: "\F64C"; }

.mdi-human-male:before {
  content: "\F64D"; }

.mdi-human-male-female:before {
  content: "\F2E8"; }

.mdi-human-pregnant:before {
  content: "\F5CF"; }

.mdi-image:before {
  content: "\F2E9"; }

.mdi-image-album:before {
  content: "\F2EA"; }

.mdi-image-area:before {
  content: "\F2EB"; }

.mdi-image-area-close:before {
  content: "\F2EC"; }

.mdi-image-broken:before {
  content: "\F2ED"; }

.mdi-image-broken-variant:before {
  content: "\F2EE"; }

.mdi-image-filter:before {
  content: "\F2EF"; }

.mdi-image-filter-black-white:before {
  content: "\F2F0"; }

.mdi-image-filter-center-focus:before {
  content: "\F2F1"; }

.mdi-image-filter-center-focus-weak:before {
  content: "\F2F2"; }

.mdi-image-filter-drama:before {
  content: "\F2F3"; }

.mdi-image-filter-frames:before {
  content: "\F2F4"; }

.mdi-image-filter-hdr:before {
  content: "\F2F5"; }

.mdi-image-filter-none:before {
  content: "\F2F6"; }

.mdi-image-filter-tilt-shift:before {
  content: "\F2F7"; }

.mdi-image-filter-vintage:before {
  content: "\F2F8"; }

.mdi-image-multiple:before {
  content: "\F2F9"; }

.mdi-import:before {
  content: "\F2FA"; }

.mdi-inbox:before {
  content: "\F686"; }

.mdi-inbox-arrow-down:before {
  content: "\F2FB"; }

.mdi-inbox-arrow-up:before {
  content: "\F3D1"; }

.mdi-incognito:before {
  content: "\F5F9"; }

.mdi-information:before {
  content: "\F2FC"; }

.mdi-information-outline:before {
  content: "\F2FD"; }

.mdi-information-variant:before {
  content: "\F64E"; }

.mdi-instagram:before {
  content: "\F2FE"; }

.mdi-instapaper:before {
  content: "\F2FF"; }

.mdi-internet-explorer:before {
  content: "\F300"; }

.mdi-invert-colors:before {
  content: "\F301"; }

.mdi-itunes:before {
  content: "\F676"; }

.mdi-jeepney:before {
  content: "\F302"; }

.mdi-jira:before {
  content: "\F303"; }

.mdi-jsfiddle:before {
  content: "\F304"; }

.mdi-json:before {
  content: "\F626"; }

.mdi-keg:before {
  content: "\F305"; }

.mdi-kettle:before {
  content: "\F5FA"; }

.mdi-key:before {
  content: "\F306"; }

.mdi-key-change:before {
  content: "\F307"; }

.mdi-key-minus:before {
  content: "\F308"; }

.mdi-key-plus:before {
  content: "\F309"; }

.mdi-key-remove:before {
  content: "\F30A"; }

.mdi-key-variant:before {
  content: "\F30B"; }

.mdi-keyboard:before {
  content: "\F30C"; }

.mdi-keyboard-backspace:before {
  content: "\F30D"; }

.mdi-keyboard-caps:before {
  content: "\F30E"; }

.mdi-keyboard-close:before {
  content: "\F30F"; }

.mdi-keyboard-off:before {
  content: "\F310"; }

.mdi-keyboard-return:before {
  content: "\F311"; }

.mdi-keyboard-tab:before {
  content: "\F312"; }

.mdi-keyboard-variant:before {
  content: "\F313"; }

.mdi-kodi:before {
  content: "\F314"; }

.mdi-label:before {
  content: "\F315"; }

.mdi-label-outline:before {
  content: "\F316"; }

.mdi-lambda:before {
  content: "\F627"; }

.mdi-lamp:before {
  content: "\F6B4"; }

.mdi-lan:before {
  content: "\F317"; }

.mdi-lan-connect:before {
  content: "\F318"; }

.mdi-lan-disconnect:before {
  content: "\F319"; }

.mdi-lan-pending:before {
  content: "\F31A"; }

.mdi-language-c:before {
  content: "\F671"; }

.mdi-language-cpp:before {
  content: "\F672"; }

.mdi-language-csharp:before {
  content: "\F31B"; }

.mdi-language-css3:before {
  content: "\F31C"; }

.mdi-language-html5:before {
  content: "\F31D"; }

.mdi-language-javascript:before {
  content: "\F31E"; }

.mdi-language-php:before {
  content: "\F31F"; }

.mdi-language-python:before {
  content: "\F320"; }

.mdi-language-python-text:before {
  content: "\F321"; }

.mdi-laptop:before {
  content: "\F322"; }

.mdi-laptop-chromebook:before {
  content: "\F323"; }

.mdi-laptop-mac:before {
  content: "\F324"; }

.mdi-laptop-windows:before {
  content: "\F325"; }

.mdi-lastfm:before {
  content: "\F326"; }

.mdi-launch:before {
  content: "\F327"; }

.mdi-layers:before {
  content: "\F328"; }

.mdi-layers-off:before {
  content: "\F329"; }

.mdi-lead-pencil:before {
  content: "\F64F"; }

.mdi-leaf:before {
  content: "\F32A"; }

.mdi-led-off:before {
  content: "\F32B"; }

.mdi-led-on:before {
  content: "\F32C"; }

.mdi-led-outline:before {
  content: "\F32D"; }

.mdi-led-variant-off:before {
  content: "\F32E"; }

.mdi-led-variant-on:before {
  content: "\F32F"; }

.mdi-led-variant-outline:before {
  content: "\F330"; }

.mdi-library:before {
  content: "\F331"; }

.mdi-library-books:before {
  content: "\F332"; }

.mdi-library-music:before {
  content: "\F333"; }

.mdi-library-plus:before {
  content: "\F334"; }

.mdi-lightbulb:before {
  content: "\F335"; }

.mdi-lightbulb-outline:before {
  content: "\F336"; }

.mdi-link:before {
  content: "\F337"; }

.mdi-link-off:before {
  content: "\F338"; }

.mdi-link-variant:before {
  content: "\F339"; }

.mdi-link-variant-off:before {
  content: "\F33A"; }

.mdi-linkedin:before {
  content: "\F33B"; }

.mdi-linkedin-box:before {
  content: "\F33C"; }

.mdi-linux:before {
  content: "\F33D"; }

.mdi-lock:before {
  content: "\F33E"; }

.mdi-lock-open:before {
  content: "\F33F"; }

.mdi-lock-open-outline:before {
  content: "\F340"; }

.mdi-lock-outline:before {
  content: "\F341"; }

.mdi-lock-plus:before {
  content: "\F5FB"; }

.mdi-login:before {
  content: "\F342"; }

.mdi-login-variant:before {
  content: "\F5FC"; }

.mdi-logout:before {
  content: "\F343"; }

.mdi-logout-variant:before {
  content: "\F5FD"; }

.mdi-looks:before {
  content: "\F344"; }

.mdi-loupe:before {
  content: "\F345"; }

.mdi-lumx:before {
  content: "\F346"; }

.mdi-magnet:before {
  content: "\F347"; }

.mdi-magnet-on:before {
  content: "\F348"; }

.mdi-magnify:before {
  content: "\F349"; }

.mdi-magnify-minus:before {
  content: "\F34A"; }

.mdi-magnify-plus:before {
  content: "\F34B"; }

.mdi-mail-ru:before {
  content: "\F34C"; }

.mdi-map:before {
  content: "\F34D"; }

.mdi-map-marker:before {
  content: "\F34E"; }

.mdi-map-marker-circle:before {
  content: "\F34F"; }

.mdi-map-marker-minus:before {
  content: "\F650"; }

.mdi-map-marker-multiple:before {
  content: "\F350"; }

.mdi-map-marker-off:before {
  content: "\F351"; }

.mdi-map-marker-plus:before {
  content: "\F651"; }

.mdi-map-marker-radius:before {
  content: "\F352"; }

.mdi-margin:before {
  content: "\F353"; }

.mdi-markdown:before {
  content: "\F354"; }

.mdi-marker:before {
  content: "\F652"; }

.mdi-marker-check:before {
  content: "\F355"; }

.mdi-martini:before {
  content: "\F356"; }

.mdi-material-ui:before {
  content: "\F357"; }

.mdi-math-compass:before {
  content: "\F358"; }

.mdi-matrix:before {
  content: "\F628"; }

.mdi-maxcdn:before {
  content: "\F359"; }

.mdi-medium:before {
  content: "\F35A"; }

.mdi-memory:before {
  content: "\F35B"; }

.mdi-menu:before {
  content: "\F35C"; }

.mdi-menu-down:before {
  content: "\F35D"; }

.mdi-menu-down-outline:before {
  content: "\F6B5"; }

.mdi-menu-left:before {
  content: "\F35E"; }

.mdi-menu-right:before {
  content: "\F35F"; }

.mdi-menu-up:before {
  content: "\F360"; }

.mdi-menu-up-outline:before {
  content: "\F6B6"; }

.mdi-message:before {
  content: "\F361"; }

.mdi-message-alert:before {
  content: "\F362"; }

.mdi-message-bulleted:before {
  content: "\F6A1"; }

.mdi-message-bulleted-off:before {
  content: "\F6A2"; }

.mdi-message-draw:before {
  content: "\F363"; }

.mdi-message-image:before {
  content: "\F364"; }

.mdi-message-outline:before {
  content: "\F365"; }

.mdi-message-plus:before {
  content: "\F653"; }

.mdi-message-processing:before {
  content: "\F366"; }

.mdi-message-reply:before {
  content: "\F367"; }

.mdi-message-reply-text:before {
  content: "\F368"; }

.mdi-message-text:before {
  content: "\F369"; }

.mdi-message-text-outline:before {
  content: "\F36A"; }

.mdi-message-video:before {
  content: "\F36B"; }

.mdi-meteor:before {
  content: "\F629"; }

.mdi-microphone:before {
  content: "\F36C"; }

.mdi-microphone-off:before {
  content: "\F36D"; }

.mdi-microphone-outline:before {
  content: "\F36E"; }

.mdi-microphone-settings:before {
  content: "\F36F"; }

.mdi-microphone-variant:before {
  content: "\F370"; }

.mdi-microphone-variant-off:before {
  content: "\F371"; }

.mdi-microscope:before {
  content: "\F654"; }

.mdi-microsoft:before {
  content: "\F372"; }

.mdi-minecraft:before {
  content: "\F373"; }

.mdi-minus:before {
  content: "\F374"; }

.mdi-minus-box:before {
  content: "\F375"; }

.mdi-minus-circle:before {
  content: "\F376"; }

.mdi-minus-circle-outline:before {
  content: "\F377"; }

.mdi-minus-network:before {
  content: "\F378"; }

.mdi-mixcloud:before {
  content: "\F62A"; }

.mdi-monitor:before {
  content: "\F379"; }

.mdi-monitor-multiple:before {
  content: "\F37A"; }

.mdi-more:before {
  content: "\F37B"; }

.mdi-motorbike:before {
  content: "\F37C"; }

.mdi-mouse:before {
  content: "\F37D"; }

.mdi-mouse-off:before {
  content: "\F37E"; }

.mdi-mouse-variant:before {
  content: "\F37F"; }

.mdi-mouse-variant-off:before {
  content: "\F380"; }

.mdi-move-resize:before {
  content: "\F655"; }

.mdi-move-resize-variant:before {
  content: "\F656"; }

.mdi-movie:before {
  content: "\F381"; }

.mdi-multiplication:before {
  content: "\F382"; }

.mdi-multiplication-box:before {
  content: "\F383"; }

.mdi-music-box:before {
  content: "\F384"; }

.mdi-music-box-outline:before {
  content: "\F385"; }

.mdi-music-circle:before {
  content: "\F386"; }

.mdi-music-note:before {
  content: "\F387"; }

.mdi-music-note-bluetooth:before {
  content: "\F5FE"; }

.mdi-music-note-bluetooth-off:before {
  content: "\F5FF"; }

.mdi-music-note-eighth:before {
  content: "\F388"; }

.mdi-music-note-half:before {
  content: "\F389"; }

.mdi-music-note-off:before {
  content: "\F38A"; }

.mdi-music-note-quarter:before {
  content: "\F38B"; }

.mdi-music-note-sixteenth:before {
  content: "\F38C"; }

.mdi-music-note-whole:before {
  content: "\F38D"; }

.mdi-nature:before {
  content: "\F38E"; }

.mdi-nature-people:before {
  content: "\F38F"; }

.mdi-navigation:before {
  content: "\F390"; }

.mdi-near-me:before {
  content: "\F5CD"; }

.mdi-needle:before {
  content: "\F391"; }

.mdi-nest-protect:before {
  content: "\F392"; }

.mdi-nest-thermostat:before {
  content: "\F393"; }

.mdi-new-box:before {
  content: "\F394"; }

.mdi-newspaper:before {
  content: "\F395"; }

.mdi-nfc:before {
  content: "\F396"; }

.mdi-nfc-tap:before {
  content: "\F397"; }

.mdi-nfc-variant:before {
  content: "\F398"; }

.mdi-nodejs:before {
  content: "\F399"; }

.mdi-note:before {
  content: "\F39A"; }

.mdi-note-multiple:before {
  content: "\F6B7"; }

.mdi-note-multiple-outline:before {
  content: "\F6B8"; }

.mdi-note-outline:before {
  content: "\F39B"; }

.mdi-note-plus:before {
  content: "\F39C"; }

.mdi-note-plus-outline:before {
  content: "\F39D"; }

.mdi-note-text:before {
  content: "\F39E"; }

.mdi-notification-clear-all:before {
  content: "\F39F"; }

.mdi-nuke:before {
  content: "\F6A3"; }

.mdi-numeric:before {
  content: "\F3A0"; }

.mdi-numeric-0-box:before {
  content: "\F3A1"; }

.mdi-numeric-0-box-multiple-outline:before {
  content: "\F3A2"; }

.mdi-numeric-0-box-outline:before {
  content: "\F3A3"; }

.mdi-numeric-1-box:before {
  content: "\F3A4"; }

.mdi-numeric-1-box-multiple-outline:before {
  content: "\F3A5"; }

.mdi-numeric-1-box-outline:before {
  content: "\F3A6"; }

.mdi-numeric-2-box:before {
  content: "\F3A7"; }

.mdi-numeric-2-box-multiple-outline:before {
  content: "\F3A8"; }

.mdi-numeric-2-box-outline:before {
  content: "\F3A9"; }

.mdi-numeric-3-box:before {
  content: "\F3AA"; }

.mdi-numeric-3-box-multiple-outline:before {
  content: "\F3AB"; }

.mdi-numeric-3-box-outline:before {
  content: "\F3AC"; }

.mdi-numeric-4-box:before {
  content: "\F3AD"; }

.mdi-numeric-4-box-multiple-outline:before {
  content: "\F3AE"; }

.mdi-numeric-4-box-outline:before {
  content: "\F3AF"; }

.mdi-numeric-5-box:before {
  content: "\F3B0"; }

.mdi-numeric-5-box-multiple-outline:before {
  content: "\F3B1"; }

.mdi-numeric-5-box-outline:before {
  content: "\F3B2"; }

.mdi-numeric-6-box:before {
  content: "\F3B3"; }

.mdi-numeric-6-box-multiple-outline:before {
  content: "\F3B4"; }

.mdi-numeric-6-box-outline:before {
  content: "\F3B5"; }

.mdi-numeric-7-box:before {
  content: "\F3B6"; }

.mdi-numeric-7-box-multiple-outline:before {
  content: "\F3B7"; }

.mdi-numeric-7-box-outline:before {
  content: "\F3B8"; }

.mdi-numeric-8-box:before {
  content: "\F3B9"; }

.mdi-numeric-8-box-multiple-outline:before {
  content: "\F3BA"; }

.mdi-numeric-8-box-outline:before {
  content: "\F3BB"; }

.mdi-numeric-9-box:before {
  content: "\F3BC"; }

.mdi-numeric-9-box-multiple-outline:before {
  content: "\F3BD"; }

.mdi-numeric-9-box-outline:before {
  content: "\F3BE"; }

.mdi-numeric-9-plus-box:before {
  content: "\F3BF"; }

.mdi-numeric-9-plus-box-multiple-outline:before {
  content: "\F3C0"; }

.mdi-numeric-9-plus-box-outline:before {
  content: "\F3C1"; }

.mdi-nutrition:before {
  content: "\F3C2"; }

.mdi-oar:before {
  content: "\F67B"; }

.mdi-octagon:before {
  content: "\F3C3"; }

.mdi-octagon-outline:before {
  content: "\F3C4"; }

.mdi-odnoklassniki:before {
  content: "\F3C5"; }

.mdi-office:before {
  content: "\F3C6"; }

.mdi-oil:before {
  content: "\F3C7"; }

.mdi-oil-temperature:before {
  content: "\F3C8"; }

.mdi-omega:before {
  content: "\F3C9"; }

.mdi-onedrive:before {
  content: "\F3CA"; }

.mdi-opacity:before {
  content: "\F5CC"; }

.mdi-open-in-app:before {
  content: "\F3CB"; }

.mdi-open-in-new:before {
  content: "\F3CC"; }

.mdi-openid:before {
  content: "\F3CD"; }

.mdi-opera:before {
  content: "\F3CE"; }

.mdi-ornament:before {
  content: "\F3CF"; }

.mdi-ornament-variant:before {
  content: "\F3D0"; }

.mdi-owl:before {
  content: "\F3D2"; }

.mdi-package:before {
  content: "\F3D3"; }

.mdi-package-down:before {
  content: "\F3D4"; }

.mdi-package-up:before {
  content: "\F3D5"; }

.mdi-package-variant:before {
  content: "\F3D6"; }

.mdi-package-variant-closed:before {
  content: "\F3D7"; }

.mdi-page-first:before {
  content: "\F600"; }

.mdi-page-last:before {
  content: "\F601"; }

.mdi-palette:before {
  content: "\F3D8"; }

.mdi-palette-advanced:before {
  content: "\F3D9"; }

.mdi-panda:before {
  content: "\F3DA"; }

.mdi-pandora:before {
  content: "\F3DB"; }

.mdi-panorama:before {
  content: "\F3DC"; }

.mdi-panorama-fisheye:before {
  content: "\F3DD"; }

.mdi-panorama-horizontal:before {
  content: "\F3DE"; }

.mdi-panorama-vertical:before {
  content: "\F3DF"; }

.mdi-panorama-wide-angle:before {
  content: "\F3E0"; }

.mdi-paper-cut-vertical:before {
  content: "\F3E1"; }

.mdi-paperclip:before {
  content: "\F3E2"; }

.mdi-parking:before {
  content: "\F3E3"; }

.mdi-pause:before {
  content: "\F3E4"; }

.mdi-pause-circle:before {
  content: "\F3E5"; }

.mdi-pause-circle-outline:before {
  content: "\F3E6"; }

.mdi-pause-octagon:before {
  content: "\F3E7"; }

.mdi-pause-octagon-outline:before {
  content: "\F3E8"; }

.mdi-paw:before {
  content: "\F3E9"; }

.mdi-paw-off:before {
  content: "\F657"; }

.mdi-pen:before {
  content: "\F3EA"; }

.mdi-pencil:before {
  content: "\F3EB"; }

.mdi-pencil-box:before {
  content: "\F3EC"; }

.mdi-pencil-box-outline:before {
  content: "\F3ED"; }

.mdi-pencil-lock:before {
  content: "\F3EE"; }

.mdi-pencil-off:before {
  content: "\F3EF"; }

.mdi-percent:before {
  content: "\F3F0"; }

.mdi-pharmacy:before {
  content: "\F3F1"; }

.mdi-phone:before {
  content: "\F3F2"; }

.mdi-phone-bluetooth:before {
  content: "\F3F3"; }

.mdi-phone-classic:before {
  content: "\F602"; }

.mdi-phone-forward:before {
  content: "\F3F4"; }

.mdi-phone-hangup:before {
  content: "\F3F5"; }

.mdi-phone-in-talk:before {
  content: "\F3F6"; }

.mdi-phone-incoming:before {
  content: "\F3F7"; }

.mdi-phone-locked:before {
  content: "\F3F8"; }

.mdi-phone-log:before {
  content: "\F3F9"; }

.mdi-phone-minus:before {
  content: "\F658"; }

.mdi-phone-missed:before {
  content: "\F3FA"; }

.mdi-phone-outgoing:before {
  content: "\F3FB"; }

.mdi-phone-paused:before {
  content: "\F3FC"; }

.mdi-phone-plus:before {
  content: "\F659"; }

.mdi-phone-settings:before {
  content: "\F3FD"; }

.mdi-phone-voip:before {
  content: "\F3FE"; }

.mdi-pi:before {
  content: "\F3FF"; }

.mdi-pi-box:before {
  content: "\F400"; }

.mdi-piano:before {
  content: "\F67C"; }

.mdi-pig:before {
  content: "\F401"; }

.mdi-pill:before {
  content: "\F402"; }

.mdi-pin:before {
  content: "\F403"; }

.mdi-pin-off:before {
  content: "\F404"; }

.mdi-pine-tree:before {
  content: "\F405"; }

.mdi-pine-tree-box:before {
  content: "\F406"; }

.mdi-pinterest:before {
  content: "\F407"; }

.mdi-pinterest-box:before {
  content: "\F408"; }

.mdi-pizza:before {
  content: "\F409"; }

.mdi-plane-shield:before {
  content: "\F6BA"; }

.mdi-play:before {
  content: "\F40A"; }

.mdi-play-box-outline:before {
  content: "\F40B"; }

.mdi-play-circle:before {
  content: "\F40C"; }

.mdi-play-circle-outline:before {
  content: "\F40D"; }

.mdi-play-pause:before {
  content: "\F40E"; }

.mdi-play-protected-content:before {
  content: "\F40F"; }

.mdi-playlist-check:before {
  content: "\F5C7"; }

.mdi-playlist-minus:before {
  content: "\F410"; }

.mdi-playlist-play:before {
  content: "\F411"; }

.mdi-playlist-plus:before {
  content: "\F412"; }

.mdi-playlist-remove:before {
  content: "\F413"; }

.mdi-playstation:before {
  content: "\F414"; }

.mdi-plex:before {
  content: "\F6B9"; }

.mdi-plus:before {
  content: "\F415"; }

.mdi-plus-box:before {
  content: "\F416"; }

.mdi-plus-circle:before {
  content: "\F417"; }

.mdi-plus-circle-multiple-outline:before {
  content: "\F418"; }

.mdi-plus-circle-outline:before {
  content: "\F419"; }

.mdi-plus-network:before {
  content: "\F41A"; }

.mdi-plus-one:before {
  content: "\F41B"; }

.mdi-pocket:before {
  content: "\F41C"; }

.mdi-pokeball:before {
  content: "\F41D"; }

.mdi-polaroid:before {
  content: "\F41E"; }

.mdi-poll:before {
  content: "\F41F"; }

.mdi-poll-box:before {
  content: "\F420"; }

.mdi-polymer:before {
  content: "\F421"; }

.mdi-pool:before {
  content: "\F606"; }

.mdi-popcorn:before {
  content: "\F422"; }

.mdi-pot:before {
  content: "\F65A"; }

.mdi-pot-mix:before {
  content: "\F65B"; }

.mdi-pound:before {
  content: "\F423"; }

.mdi-pound-box:before {
  content: "\F424"; }

.mdi-power:before {
  content: "\F425"; }

.mdi-power-plug:before {
  content: "\F6A4"; }

.mdi-power-plug-off:before {
  content: "\F6A5"; }

.mdi-power-settings:before {
  content: "\F426"; }

.mdi-power-socket:before {
  content: "\F427"; }

.mdi-presentation:before {
  content: "\F428"; }

.mdi-presentation-play:before {
  content: "\F429"; }

.mdi-printer:before {
  content: "\F42A"; }

.mdi-printer-3d:before {
  content: "\F42B"; }

.mdi-printer-alert:before {
  content: "\F42C"; }

.mdi-priority-high:before {
  content: "\F603"; }

.mdi-priority-low:before {
  content: "\F604"; }

.mdi-professional-hexagon:before {
  content: "\F42D"; }

.mdi-projector:before {
  content: "\F42E"; }

.mdi-projector-screen:before {
  content: "\F42F"; }

.mdi-publish:before {
  content: "\F6A6"; }

.mdi-pulse:before {
  content: "\F430"; }

.mdi-puzzle:before {
  content: "\F431"; }

.mdi-qqchat:before {
  content: "\F605"; }

.mdi-qrcode:before {
  content: "\F432"; }

.mdi-qrcode-scan:before {
  content: "\F433"; }

.mdi-quadcopter:before {
  content: "\F434"; }

.mdi-quality-high:before {
  content: "\F435"; }

.mdi-quicktime:before {
  content: "\F436"; }

.mdi-radar:before {
  content: "\F437"; }

.mdi-radiator:before {
  content: "\F438"; }

.mdi-radio:before {
  content: "\F439"; }

.mdi-radio-handheld:before {
  content: "\F43A"; }

.mdi-radio-tower:before {
  content: "\F43B"; }

.mdi-radioactive:before {
  content: "\F43C"; }

.mdi-radiobox-blank:before {
  content: "\F43D"; }

.mdi-radiobox-marked:before {
  content: "\F43E"; }

.mdi-raspberrypi:before {
  content: "\F43F"; }

.mdi-ray-end:before {
  content: "\F440"; }

.mdi-ray-end-arrow:before {
  content: "\F441"; }

.mdi-ray-start:before {
  content: "\F442"; }

.mdi-ray-start-arrow:before {
  content: "\F443"; }

.mdi-ray-start-end:before {
  content: "\F444"; }

.mdi-ray-vertex:before {
  content: "\F445"; }

.mdi-rdio:before {
  content: "\F446"; }

.mdi-read:before {
  content: "\F447"; }

.mdi-readability:before {
  content: "\F448"; }

.mdi-receipt:before {
  content: "\F449"; }

.mdi-record:before {
  content: "\F44A"; }

.mdi-record-rec:before {
  content: "\F44B"; }

.mdi-recycle:before {
  content: "\F44C"; }

.mdi-reddit:before {
  content: "\F44D"; }

.mdi-redo:before {
  content: "\F44E"; }

.mdi-redo-variant:before {
  content: "\F44F"; }

.mdi-refresh:before {
  content: "\F450"; }

.mdi-regex:before {
  content: "\F451"; }

.mdi-relative-scale:before {
  content: "\F452"; }

.mdi-reload:before {
  content: "\F453"; }

.mdi-remote:before {
  content: "\F454"; }

.mdi-rename-box:before {
  content: "\F455"; }

.mdi-reorder-horizontal:before {
  content: "\F687"; }

.mdi-reorder-vertical:before {
  content: "\F688"; }

.mdi-repeat:before {
  content: "\F456"; }

.mdi-repeat-off:before {
  content: "\F457"; }

.mdi-repeat-once:before {
  content: "\F458"; }

.mdi-replay:before {
  content: "\F459"; }

.mdi-reply:before {
  content: "\F45A"; }

.mdi-reply-all:before {
  content: "\F45B"; }

.mdi-reproduction:before {
  content: "\F45C"; }

.mdi-resize-bottom-right:before {
  content: "\F45D"; }

.mdi-responsive:before {
  content: "\F45E"; }

.mdi-restore:before {
  content: "\F6A7"; }

.mdi-rewind:before {
  content: "\F45F"; }

.mdi-ribbon:before {
  content: "\F460"; }

.mdi-road:before {
  content: "\F461"; }

.mdi-road-variant:before {
  content: "\F462"; }

.mdi-robot:before {
  content: "\F6A8"; }

.mdi-rocket:before {
  content: "\F463"; }

.mdi-rotate-3d:before {
  content: "\F464"; }

.mdi-rotate-90:before {
  content: "\F6A9"; }

.mdi-rotate-left:before {
  content: "\F465"; }

.mdi-rotate-left-variant:before {
  content: "\F466"; }

.mdi-rotate-right:before {
  content: "\F467"; }

.mdi-rotate-right-variant:before {
  content: "\F468"; }

.mdi-rounded-corner:before {
  content: "\F607"; }

.mdi-router-wireless:before {
  content: "\F469"; }

.mdi-routes:before {
  content: "\F46A"; }

.mdi-rowing:before {
  content: "\F608"; }

.mdi-rss:before {
  content: "\F46B"; }

.mdi-rss-box:before {
  content: "\F46C"; }

.mdi-ruler:before {
  content: "\F46D"; }

.mdi-run:before {
  content: "\F46E"; }

.mdi-sale:before {
  content: "\F46F"; }

.mdi-satellite:before {
  content: "\F470"; }

.mdi-satellite-variant:before {
  content: "\F471"; }

.mdi-saxophone:before {
  content: "\F609"; }

.mdi-scale:before {
  content: "\F472"; }

.mdi-scale-balance:before {
  content: "\F5D1"; }

.mdi-scale-bathroom:before {
  content: "\F473"; }

.mdi-scanner:before {
  content: "\F6AA"; }

.mdi-school:before {
  content: "\F474"; }

.mdi-screen-rotation:before {
  content: "\F475"; }

.mdi-screen-rotation-lock:before {
  content: "\F476"; }

.mdi-screwdriver:before {
  content: "\F477"; }

.mdi-script:before {
  content: "\F478"; }

.mdi-sd:before {
  content: "\F479"; }

.mdi-seal:before {
  content: "\F47A"; }

.mdi-seat-flat:before {
  content: "\F47B"; }

.mdi-seat-flat-angled:before {
  content: "\F47C"; }

.mdi-seat-individual-suite:before {
  content: "\F47D"; }

.mdi-seat-legroom-extra:before {
  content: "\F47E"; }

.mdi-seat-legroom-normal:before {
  content: "\F47F"; }

.mdi-seat-legroom-reduced:before {
  content: "\F480"; }

.mdi-seat-recline-extra:before {
  content: "\F481"; }

.mdi-seat-recline-normal:before {
  content: "\F482"; }

.mdi-security:before {
  content: "\F483"; }

.mdi-security-home:before {
  content: "\F689"; }

.mdi-security-network:before {
  content: "\F484"; }

.mdi-select:before {
  content: "\F485"; }

.mdi-select-all:before {
  content: "\F486"; }

.mdi-select-inverse:before {
  content: "\F487"; }

.mdi-select-off:before {
  content: "\F488"; }

.mdi-selection:before {
  content: "\F489"; }

.mdi-send:before {
  content: "\F48A"; }

.mdi-serial-port:before {
  content: "\F65C"; }

.mdi-server:before {
  content: "\F48B"; }

.mdi-server-minus:before {
  content: "\F48C"; }

.mdi-server-network:before {
  content: "\F48D"; }

.mdi-server-network-off:before {
  content: "\F48E"; }

.mdi-server-off:before {
  content: "\F48F"; }

.mdi-server-plus:before {
  content: "\F490"; }

.mdi-server-remove:before {
  content: "\F491"; }

.mdi-server-security:before {
  content: "\F492"; }

.mdi-settings:before {
  content: "\F493"; }

.mdi-settings-box:before {
  content: "\F494"; }

.mdi-shape-circle-plus:before {
  content: "\F65D"; }

.mdi-shape-plus:before {
  content: "\F495"; }

.mdi-shape-polygon-plus:before {
  content: "\F65E"; }

.mdi-shape-rectangle-plus:before {
  content: "\F65F"; }

.mdi-shape-square-plus:before {
  content: "\F660"; }

.mdi-share:before {
  content: "\F496"; }

.mdi-share-variant:before {
  content: "\F497"; }

.mdi-shield:before {
  content: "\F498"; }

.mdi-shield-outline:before {
  content: "\F499"; }

.mdi-shopping:before {
  content: "\F49A"; }

.mdi-shopping-music:before {
  content: "\F49B"; }

.mdi-shredder:before {
  content: "\F49C"; }

.mdi-shuffle:before {
  content: "\F49D"; }

.mdi-shuffle-disabled:before {
  content: "\F49E"; }

.mdi-shuffle-variant:before {
  content: "\F49F"; }

.mdi-sigma:before {
  content: "\F4A0"; }

.mdi-sigma-lower:before {
  content: "\F62B"; }

.mdi-sign-caution:before {
  content: "\F4A1"; }

.mdi-signal:before {
  content: "\F4A2"; }

.mdi-signal-variant:before {
  content: "\F60A"; }

.mdi-silverware:before {
  content: "\F4A3"; }

.mdi-silverware-fork:before {
  content: "\F4A4"; }

.mdi-silverware-spoon:before {
  content: "\F4A5"; }

.mdi-silverware-variant:before {
  content: "\F4A6"; }

.mdi-sim:before {
  content: "\F4A7"; }

.mdi-sim-alert:before {
  content: "\F4A8"; }

.mdi-sim-off:before {
  content: "\F4A9"; }

.mdi-sitemap:before {
  content: "\F4AA"; }

.mdi-skip-backward:before {
  content: "\F4AB"; }

.mdi-skip-forward:before {
  content: "\F4AC"; }

.mdi-skip-next:before {
  content: "\F4AD"; }

.mdi-skip-next-circle:before {
  content: "\F661"; }

.mdi-skip-next-circle-outline:before {
  content: "\F662"; }

.mdi-skip-previous:before {
  content: "\F4AE"; }

.mdi-skip-previous-circle:before {
  content: "\F663"; }

.mdi-skip-previous-circle-outline:before {
  content: "\F664"; }

.mdi-skull:before {
  content: "\F68B"; }

.mdi-skype:before {
  content: "\F4AF"; }

.mdi-skype-business:before {
  content: "\F4B0"; }

.mdi-slack:before {
  content: "\F4B1"; }

.mdi-sleep:before {
  content: "\F4B2"; }

.mdi-sleep-off:before {
  content: "\F4B3"; }

.mdi-smoking:before {
  content: "\F4B4"; }

.mdi-smoking-off:before {
  content: "\F4B5"; }

.mdi-snapchat:before {
  content: "\F4B6"; }

.mdi-snowman:before {
  content: "\F4B7"; }

.mdi-soccer:before {
  content: "\F4B8"; }

.mdi-sofa:before {
  content: "\F4B9"; }

.mdi-solid:before {
  content: "\F68C"; }

.mdi-sort:before {
  content: "\F4BA"; }

.mdi-sort-alphabetical:before {
  content: "\F4BB"; }

.mdi-sort-ascending:before {
  content: "\F4BC"; }

.mdi-sort-descending:before {
  content: "\F4BD"; }

.mdi-sort-numeric:before {
  content: "\F4BE"; }

.mdi-sort-variant:before {
  content: "\F4BF"; }

.mdi-soundcloud:before {
  content: "\F4C0"; }

.mdi-source-branch:before {
  content: "\F62C"; }

.mdi-source-fork:before {
  content: "\F4C1"; }

.mdi-source-merge:before {
  content: "\F62D"; }

.mdi-source-pull:before {
  content: "\F4C2"; }

.mdi-speaker:before {
  content: "\F4C3"; }

.mdi-speaker-off:before {
  content: "\F4C4"; }

.mdi-speedometer:before {
  content: "\F4C5"; }

.mdi-spellcheck:before {
  content: "\F4C6"; }

.mdi-spotify:before {
  content: "\F4C7"; }

.mdi-spotlight:before {
  content: "\F4C8"; }

.mdi-spotlight-beam:before {
  content: "\F4C9"; }

.mdi-spray:before {
  content: "\F665"; }

.mdi-square-inc:before {
  content: "\F4CA"; }

.mdi-square-inc-cash:before {
  content: "\F4CB"; }

.mdi-stackexchange:before {
  content: "\F60B"; }

.mdi-stackoverflow:before {
  content: "\F4CC"; }

.mdi-stairs:before {
  content: "\F4CD"; }

.mdi-star:before {
  content: "\F4CE"; }

.mdi-star-circle:before {
  content: "\F4CF"; }

.mdi-star-half:before {
  content: "\F4D0"; }

.mdi-star-off:before {
  content: "\F4D1"; }

.mdi-star-outline:before {
  content: "\F4D2"; }

.mdi-steam:before {
  content: "\F4D3"; }

.mdi-steering:before {
  content: "\F4D4"; }

.mdi-step-backward:before {
  content: "\F4D5"; }

.mdi-step-backward-2:before {
  content: "\F4D6"; }

.mdi-step-forward:before {
  content: "\F4D7"; }

.mdi-step-forward-2:before {
  content: "\F4D8"; }

.mdi-stethoscope:before {
  content: "\F4D9"; }

.mdi-sticker:before {
  content: "\F5D0"; }

.mdi-stocking:before {
  content: "\F4DA"; }

.mdi-stop:before {
  content: "\F4DB"; }

.mdi-stop-circle:before {
  content: "\F666"; }

.mdi-stop-circle-outline:before {
  content: "\F667"; }

.mdi-store:before {
  content: "\F4DC"; }

.mdi-store-24-hour:before {
  content: "\F4DD"; }

.mdi-stove:before {
  content: "\F4DE"; }

.mdi-subdirectory-arrow-left:before {
  content: "\F60C"; }

.mdi-subdirectory-arrow-right:before {
  content: "\F60D"; }

.mdi-subway:before {
  content: "\F6AB"; }

.mdi-subway-variant:before {
  content: "\F4DF"; }

.mdi-sunglasses:before {
  content: "\F4E0"; }

.mdi-surround-sound:before {
  content: "\F5C5"; }

.mdi-swap-horizontal:before {
  content: "\F4E1"; }

.mdi-swap-vertical:before {
  content: "\F4E2"; }

.mdi-swim:before {
  content: "\F4E3"; }

.mdi-switch:before {
  content: "\F4E4"; }

.mdi-sword:before {
  content: "\F4E5"; }

.mdi-sync:before {
  content: "\F4E6"; }

.mdi-sync-alert:before {
  content: "\F4E7"; }

.mdi-sync-off:before {
  content: "\F4E8"; }

.mdi-tab:before {
  content: "\F4E9"; }

.mdi-tab-unselected:before {
  content: "\F4EA"; }

.mdi-table:before {
  content: "\F4EB"; }

.mdi-table-column-plus-after:before {
  content: "\F4EC"; }

.mdi-table-column-plus-before:before {
  content: "\F4ED"; }

.mdi-table-column-remove:before {
  content: "\F4EE"; }

.mdi-table-column-width:before {
  content: "\F4EF"; }

.mdi-table-edit:before {
  content: "\F4F0"; }

.mdi-table-large:before {
  content: "\F4F1"; }

.mdi-table-row-height:before {
  content: "\F4F2"; }

.mdi-table-row-plus-after:before {
  content: "\F4F3"; }

.mdi-table-row-plus-before:before {
  content: "\F4F4"; }

.mdi-table-row-remove:before {
  content: "\F4F5"; }

.mdi-tablet:before {
  content: "\F4F6"; }

.mdi-tablet-android:before {
  content: "\F4F7"; }

.mdi-tablet-ipad:before {
  content: "\F4F8"; }

.mdi-tag:before {
  content: "\F4F9"; }

.mdi-tag-faces:before {
  content: "\F4FA"; }

.mdi-tag-heart:before {
  content: "\F68A"; }

.mdi-tag-multiple:before {
  content: "\F4FB"; }

.mdi-tag-outline:before {
  content: "\F4FC"; }

.mdi-tag-text-outline:before {
  content: "\F4FD"; }

.mdi-target:before {
  content: "\F4FE"; }

.mdi-taxi:before {
  content: "\F4FF"; }

.mdi-teamviewer:before {
  content: "\F500"; }

.mdi-telegram:before {
  content: "\F501"; }

.mdi-television:before {
  content: "\F502"; }

.mdi-television-guide:before {
  content: "\F503"; }

.mdi-temperature-celsius:before {
  content: "\F504"; }

.mdi-temperature-fahrenheit:before {
  content: "\F505"; }

.mdi-temperature-kelvin:before {
  content: "\F506"; }

.mdi-tennis:before {
  content: "\F507"; }

.mdi-tent:before {
  content: "\F508"; }

.mdi-terrain:before {
  content: "\F509"; }

.mdi-test-tube:before {
  content: "\F668"; }

.mdi-text-shadow:before {
  content: "\F669"; }

.mdi-text-to-speech:before {
  content: "\F50A"; }

.mdi-text-to-speech-off:before {
  content: "\F50B"; }

.mdi-textbox:before {
  content: "\F60E"; }

.mdi-texture:before {
  content: "\F50C"; }

.mdi-theater:before {
  content: "\F50D"; }

.mdi-theme-light-dark:before {
  content: "\F50E"; }

.mdi-thermometer:before {
  content: "\F50F"; }

.mdi-thermometer-lines:before {
  content: "\F510"; }

.mdi-thumb-down:before {
  content: "\F511"; }

.mdi-thumb-down-outline:before {
  content: "\F512"; }

.mdi-thumb-up:before {
  content: "\F513"; }

.mdi-thumb-up-outline:before {
  content: "\F514"; }

.mdi-thumbs-up-down:before {
  content: "\F515"; }

.mdi-ticket:before {
  content: "\F516"; }

.mdi-ticket-account:before {
  content: "\F517"; }

.mdi-ticket-confirmation:before {
  content: "\F518"; }

.mdi-tie:before {
  content: "\F519"; }

.mdi-timelapse:before {
  content: "\F51A"; }

.mdi-timer:before {
  content: "\F51B"; }

.mdi-timer-10:before {
  content: "\F51C"; }

.mdi-timer-3:before {
  content: "\F51D"; }

.mdi-timer-off:before {
  content: "\F51E"; }

.mdi-timer-sand:before {
  content: "\F51F"; }

.mdi-timer-sand-empty:before {
  content: "\F6AC"; }

.mdi-timetable:before {
  content: "\F520"; }

.mdi-toggle-switch:before {
  content: "\F521"; }

.mdi-toggle-switch-off:before {
  content: "\F522"; }

.mdi-tooltip:before {
  content: "\F523"; }

.mdi-tooltip-edit:before {
  content: "\F524"; }

.mdi-tooltip-image:before {
  content: "\F525"; }

.mdi-tooltip-outline:before {
  content: "\F526"; }

.mdi-tooltip-outline-plus:before {
  content: "\F527"; }

.mdi-tooltip-text:before {
  content: "\F528"; }

.mdi-tooth:before {
  content: "\F529"; }

.mdi-tor:before {
  content: "\F52A"; }

.mdi-tower-beach:before {
  content: "\F680"; }

.mdi-tower-fire:before {
  content: "\F681"; }

.mdi-traffic-light:before {
  content: "\F52B"; }

.mdi-train:before {
  content: "\F52C"; }

.mdi-tram:before {
  content: "\F52D"; }

.mdi-transcribe:before {
  content: "\F52E"; }

.mdi-transcribe-close:before {
  content: "\F52F"; }

.mdi-transfer:before {
  content: "\F530"; }

.mdi-transit-transfer:before {
  content: "\F6AD"; }

.mdi-translate:before {
  content: "\F5CA"; }

.mdi-tree:before {
  content: "\F531"; }

.mdi-trello:before {
  content: "\F532"; }

.mdi-trending-down:before {
  content: "\F533"; }

.mdi-trending-neutral:before {
  content: "\F534"; }

.mdi-trending-up:before {
  content: "\F535"; }

.mdi-triangle:before {
  content: "\F536"; }

.mdi-triangle-outline:before {
  content: "\F537"; }

.mdi-trophy:before {
  content: "\F538"; }

.mdi-trophy-award:before {
  content: "\F539"; }

.mdi-trophy-outline:before {
  content: "\F53A"; }

.mdi-trophy-variant:before {
  content: "\F53B"; }

.mdi-trophy-variant-outline:before {
  content: "\F53C"; }

.mdi-truck:before {
  content: "\F53D"; }

.mdi-truck-delivery:before {
  content: "\F53E"; }

.mdi-tshirt-crew:before {
  content: "\F53F"; }

.mdi-tshirt-v:before {
  content: "\F540"; }

.mdi-tumblr:before {
  content: "\F541"; }

.mdi-tumblr-reblog:before {
  content: "\F542"; }

.mdi-tune:before {
  content: "\F62E"; }

.mdi-tune-vertical:before {
  content: "\F66A"; }

.mdi-twitch:before {
  content: "\F543"; }

.mdi-twitter:before {
  content: "\F544"; }

.mdi-twitter-box:before {
  content: "\F545"; }

.mdi-twitter-circle:before {
  content: "\F546"; }

.mdi-twitter-retweet:before {
  content: "\F547"; }

.mdi-ubuntu:before {
  content: "\F548"; }

.mdi-umbraco:before {
  content: "\F549"; }

.mdi-umbrella:before {
  content: "\F54A"; }

.mdi-umbrella-outline:before {
  content: "\F54B"; }

.mdi-undo:before {
  content: "\F54C"; }

.mdi-undo-variant:before {
  content: "\F54D"; }

.mdi-unfold-less:before {
  content: "\F54E"; }

.mdi-unfold-more:before {
  content: "\F54F"; }

.mdi-ungroup:before {
  content: "\F550"; }

.mdi-unity:before {
  content: "\F6AE"; }

.mdi-untappd:before {
  content: "\F551"; }

.mdi-update:before {
  content: "\F6AF"; }

.mdi-upload:before {
  content: "\F552"; }

.mdi-usb:before {
  content: "\F553"; }

.mdi-vector-arrange-above:before {
  content: "\F554"; }

.mdi-vector-arrange-below:before {
  content: "\F555"; }

.mdi-vector-circle:before {
  content: "\F556"; }

.mdi-vector-circle-variant:before {
  content: "\F557"; }

.mdi-vector-combine:before {
  content: "\F558"; }

.mdi-vector-curve:before {
  content: "\F559"; }

.mdi-vector-difference:before {
  content: "\F55A"; }

.mdi-vector-difference-ab:before {
  content: "\F55B"; }

.mdi-vector-difference-ba:before {
  content: "\F55C"; }

.mdi-vector-intersection:before {
  content: "\F55D"; }

.mdi-vector-line:before {
  content: "\F55E"; }

.mdi-vector-point:before {
  content: "\F55F"; }

.mdi-vector-polygon:before {
  content: "\F560"; }

.mdi-vector-polyline:before {
  content: "\F561"; }

.mdi-vector-rectangle:before {
  content: "\F5C6"; }

.mdi-vector-selection:before {
  content: "\F562"; }

.mdi-vector-square:before {
  content: "\F001"; }

.mdi-vector-triangle:before {
  content: "\F563"; }

.mdi-vector-union:before {
  content: "\F564"; }

.mdi-verified:before {
  content: "\F565"; }

.mdi-vibrate:before {
  content: "\F566"; }

.mdi-video:before {
  content: "\F567"; }

.mdi-video-off:before {
  content: "\F568"; }

.mdi-video-switch:before {
  content: "\F569"; }

.mdi-view-agenda:before {
  content: "\F56A"; }

.mdi-view-array:before {
  content: "\F56B"; }

.mdi-view-carousel:before {
  content: "\F56C"; }

.mdi-view-column:before {
  content: "\F56D"; }

.mdi-view-dashboard:before {
  content: "\F56E"; }

.mdi-view-day:before {
  content: "\F56F"; }

.mdi-view-grid:before {
  content: "\F570"; }

.mdi-view-headline:before {
  content: "\F571"; }

.mdi-view-list:before {
  content: "\F572"; }

.mdi-view-module:before {
  content: "\F573"; }

.mdi-view-quilt:before {
  content: "\F574"; }

.mdi-view-stream:before {
  content: "\F575"; }

.mdi-view-week:before {
  content: "\F576"; }

.mdi-vimeo:before {
  content: "\F577"; }

.mdi-vine:before {
  content: "\F578"; }

.mdi-violin:before {
  content: "\F60F"; }

.mdi-visualstudio:before {
  content: "\F610"; }

.mdi-vk:before {
  content: "\F579"; }

.mdi-vk-box:before {
  content: "\F57A"; }

.mdi-vk-circle:before {
  content: "\F57B"; }

.mdi-vlc:before {
  content: "\F57C"; }

.mdi-voice:before {
  content: "\F5CB"; }

.mdi-voicemail:before {
  content: "\F57D"; }

.mdi-volume-high:before {
  content: "\F57E"; }

.mdi-volume-low:before {
  content: "\F57F"; }

.mdi-volume-medium:before {
  content: "\F580"; }

.mdi-volume-off:before {
  content: "\F581"; }

.mdi-vpn:before {
  content: "\F582"; }

.mdi-walk:before {
  content: "\F583"; }

.mdi-wallet:before {
  content: "\F584"; }

.mdi-wallet-giftcard:before {
  content: "\F585"; }

.mdi-wallet-membership:before {
  content: "\F586"; }

.mdi-wallet-travel:before {
  content: "\F587"; }

.mdi-wan:before {
  content: "\F588"; }

.mdi-watch:before {
  content: "\F589"; }

.mdi-watch-export:before {
  content: "\F58A"; }

.mdi-watch-import:before {
  content: "\F58B"; }

.mdi-watch-vibrate:before {
  content: "\F6B0"; }

.mdi-water:before {
  content: "\F58C"; }

.mdi-water-off:before {
  content: "\F58D"; }

.mdi-water-percent:before {
  content: "\F58E"; }

.mdi-water-pump:before {
  content: "\F58F"; }

.mdi-watermark:before {
  content: "\F612"; }

.mdi-weather-cloudy:before {
  content: "\F590"; }

.mdi-weather-fog:before {
  content: "\F591"; }

.mdi-weather-hail:before {
  content: "\F592"; }

.mdi-weather-lightning:before {
  content: "\F593"; }

.mdi-weather-lightning-rainy:before {
  content: "\F67D"; }

.mdi-weather-night:before {
  content: "\F594"; }

.mdi-weather-partlycloudy:before {
  content: "\F595"; }

.mdi-weather-pouring:before {
  content: "\F596"; }

.mdi-weather-rainy:before {
  content: "\F597"; }

.mdi-weather-snowy:before {
  content: "\F598"; }

.mdi-weather-snowy-rainy:before {
  content: "\F67E"; }

.mdi-weather-sunny:before {
  content: "\F599"; }

.mdi-weather-sunset:before {
  content: "\F59A"; }

.mdi-weather-sunset-down:before {
  content: "\F59B"; }

.mdi-weather-sunset-up:before {
  content: "\F59C"; }

.mdi-weather-windy:before {
  content: "\F59D"; }

.mdi-weather-windy-variant:before {
  content: "\F59E"; }

.mdi-web:before {
  content: "\F59F"; }

.mdi-webcam:before {
  content: "\F5A0"; }

.mdi-webhook:before {
  content: "\F62F"; }

.mdi-wechat:before {
  content: "\F611"; }

.mdi-weight:before {
  content: "\F5A1"; }

.mdi-weight-kilogram:before {
  content: "\F5A2"; }

.mdi-whatsapp:before {
  content: "\F5A3"; }

.mdi-wheelchair-accessibility:before {
  content: "\F5A4"; }

.mdi-white-balance-auto:before {
  content: "\F5A5"; }

.mdi-white-balance-incandescent:before {
  content: "\F5A6"; }

.mdi-white-balance-iridescent:before {
  content: "\F5A7"; }

.mdi-white-balance-sunny:before {
  content: "\F5A8"; }

.mdi-wifi:before {
  content: "\F5A9"; }

.mdi-wifi-off:before {
  content: "\F5AA"; }

.mdi-wii:before {
  content: "\F5AB"; }

.mdi-wikipedia:before {
  content: "\F5AC"; }

.mdi-window-close:before {
  content: "\F5AD"; }

.mdi-window-closed:before {
  content: "\F5AE"; }

.mdi-window-maximize:before {
  content: "\F5AF"; }

.mdi-window-minimize:before {
  content: "\F5B0"; }

.mdi-window-open:before {
  content: "\F5B1"; }

.mdi-window-restore:before {
  content: "\F5B2"; }

.mdi-windows:before {
  content: "\F5B3"; }

.mdi-wordpress:before {
  content: "\F5B4"; }

.mdi-worker:before {
  content: "\F5B5"; }

.mdi-wrap:before {
  content: "\F5B6"; }

.mdi-wrench:before {
  content: "\F5B7"; }

.mdi-wunderlist:before {
  content: "\F5B8"; }

.mdi-xaml:before {
  content: "\F673"; }

.mdi-xbox:before {
  content: "\F5B9"; }

.mdi-xbox-controller:before {
  content: "\F5BA"; }

.mdi-xbox-controller-off:before {
  content: "\F5BB"; }

.mdi-xda:before {
  content: "\F5BC"; }

.mdi-xing:before {
  content: "\F5BD"; }

.mdi-xing-box:before {
  content: "\F5BE"; }

.mdi-xing-circle:before {
  content: "\F5BF"; }

.mdi-xml:before {
  content: "\F5C0"; }

.mdi-yeast:before {
  content: "\F5C1"; }

.mdi-yelp:before {
  content: "\F5C2"; }

.mdi-yin-yang:before {
  content: "\F67F"; }

.mdi-youtube-play:before {
  content: "\F5C3"; }

.mdi-zip-box:before {
  content: "\F5C4"; }

.mdi-blank:before {
  content: "\F68C";
  visibility: hidden; }

.mdi-18px.mdi-set, .mdi-18px.mdi:before {
  font-size: 18px; }

.mdi-24px.mdi-set, .mdi-24px.mdi:before {
  font-size: 24px; }

.mdi-36px.mdi-set, .mdi-36px.mdi:before {
  font-size: 36px; }

.mdi-48px.mdi-set, .mdi-48px.mdi:before {
  font-size: 48px; }

.mdi-dark {
  color: rgba(0, 0, 0, 0.54); }
  .mdi-dark.mdi-inactive {
    color: rgba(0, 0, 0, 0.26); }

.mdi-light {
  color: white; }
  .mdi-light.mdi-inactive {
    color: rgba(255, 255, 255, 0.3); }

.mdi-rotate-45 {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg); }

.mdi-rotate-90 {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg); }

.mdi-rotate-135 {
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg); }

.mdi-rotate-180 {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg); }

.mdi-rotate-225 {
  -webkit-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg); }

.mdi-rotate-270 {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg); }

.mdi-rotate-315 {
  -webkit-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  transform: rotate(315deg); }

.mdi-flip-horizontal {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH"; }

.mdi-flip-vertical {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  filter: FlipV;
  -ms-filter: "FlipV"; }

.tooltip-container .tooltip-content:before {
  position: absolute;
  top: 5px;
  left: 7px;
  font-family: "Material Design Icons";
  content: '\f64e';
  font-size: 1em; }

.labels-block li:before {
  position: absolute;
  top: 8px;
  right: 5px;
  content: '\f156';
  font-family: "Material Design Icons"; }

.filter-dropdown li {
  position: relative;
  background-image: none !important; }
  .filter-dropdown li:first-child:before {
    content: ''; }
  .filter-dropdown li:first-child:after {
    position: absolute;
    font-family: "Material Design Icons";
    content: '\f35d';
    font-size: 2em;
    top: -10px;
    right: 0;
    color: black;
    z-index: 1; }
  .filter-dropdown li:before {
    font-family: "Material Design Icons";
    font-size: 1.5em;
    content: '\f43d';
    position: absolute;
    top: -5px;
    left: 5px; }
  .filter-dropdown li.active {
    background-image: none !important; }
    .filter-dropdown li.active:before {
      content: '\f43e'; }

.card[data-card-type="card-partner"] .card-title:before {
  content: '';
  background-size: contain;
  position: absolute;
  top: 8px;
  left: 8px;
  width: 64px;
  height: 64px; }

[data-icon-taxonomy] {
  display: table-cell; }
  [data-icon-taxonomy]:before {
    content: '';
    display: block;
    height: 50px;
    width: 100%;
    text-align: center;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 0 !important;
    font-family: "Material Design Icons"; }

[data-card-taxonomy="agriculture"] .card-title:before {
  background-image: url(../img/AGRICULTURE.png); }

[data-card-taxonomy="construction"] .card-title:before {
  background-image: url(../img/CONSTRUCTIONS.png); }

[data-card-taxonomy="data-analysis"] .card-title:before {
  background-image: url(../img/DATA-ANALYSES.png); }

[data-card-taxonomy="education"] .card-title:before {
  background-image: url(../img/EDUCATION.png); }

[data-card-taxonomy="energy-climate"] .card-title:before {
  background-image: url(../img/ENERGY-CLIMATE.png); }

[data-card-taxonomy="extractives"] .card-title:before {
  background-image: url(../img/EXTRACTIVES.png); }

[data-card-taxonomy="health"] .card-title:before {
  background-image: url(../img/HEALTH.png); }

[data-card-taxonomy="media"] .card-title:before {
  background-image: url(../img/INVESTIGATIVE-JOURNALISM.png); }

[data-card-taxonomy="public-services"] .card-title:before {
  background-image: url(../img/PUBLIC-SERVICES.png); }

[data-card-taxonomy="research"] .card-title:before,
[data-icon-taxonomy="research"]:before {
  background-image: url(../img/RESEARCH.png); }

[data-card-taxonomy="policy"] .card-title:before {
  background-image: url(../img/POLICY-ARGUMENTS.png); }

[data-icon-taxonomy="website"]:before {
  content: "" !important; }

[data-icon-taxonomy="tool"]:before {
  content: "" !important; }

[data-icon-taxonomy="publication"]:before {
  content: "" !important; }

.owl-dots {
  position: absolute;
  bottom: 20px;
  right: 64px;
  z-index: 1; }
  .owl-dots .owl-dot {
    display: inline-block;
    margin-right: 5px; }
    .owl-dots .owl-dot span {
      display: block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.7); }
    .owl-dots .owl-dot.active span {
      background-color: white; }

.link, .link[data-link-style="primary"], .link[data-link-style="secondary"], .link[data-link-style="bordered"],
button {
  cursor: pointer; }

[data-link-style="normal"] {
  background-color: transparent;
  color: white !important;
  border-color: transparent;
  text-decoration: underline;
  padding: 0.5em !important; }
  [data-link-style="normal"]:hover {
    background-color: #D51317 !important;
    color: white; }

.button-primary {
  background-color: #D51317;
  color: white !important;
  border-color: #770b0d; }

.button-action {
  background-color: #999999;
  color: white !important;
  border-color: #666666; }

[data-link-style="primary"] {
  background-color: #D51317;
  color: white !important;
  border-color: #f15d60; }
  [data-link-style="primary"]:hover {
    background-color: #f15d60 !important;
    color: white; }

[data-link-style="secondary"] {
  background-color: #999999;
  color: white !important;
  border-color: #cccccc; }
  [data-link-style="secondary"]:hover {
    background-color: #cccccc !important; }

[data-link-style="bordered"] {
  background-color: transparent;
  color: white;
  border: 1px solid white;
  line-height: 46px; }
  [data-link-style="bordered"]:hover {
    color: #D51317 !important; }
  [data-link-style="bordered"]:visited {
    color: white !important; }

.link, .link[data-link-style="primary"], .link[data-link-style="secondary"], .link[data-link-style="bordered"],
.button,
.column-link,
button {
  border: 1px solid #f15d60;
  border-radius: 0;
  color: white;
  font-family: "MuseoSansRounded-300", sans-serif;
  display: inline-block;
  font-size: inherit;
  max-width: 400px;
  background-color: #D51317;
  padding: 1rem;
  text-decoration: none;
  -webkit-appearance: none;
  transition: all 0.6s ease; }
  .link:hover,
  .button:hover,
  .column-link:hover,
  button:hover {
    color: #D51317;
    background-color: #999999;
    border: 1px solid #999999; }
  .link:active, .link:focus,
  .button:active,
  .button:focus,
  .column-link:active,
  .column-link:focus,
  button:active,
  button:focus {
    color: white;
    background-color: #D51317;
    border: 1px solid #D51317; }

.link[data-link-style="secondary"] {
  border: 1px solid #999999;
  color: #D51317;
  background-color: #999999; }
  .link[data-link-style="secondary"]:hover, .link[data-link-style="secondary"]:active, .link[data-link-style="secondary"]:focus {
    color: #999999;
    background-color: #f15d60;
    border: 1px solid #f15d60; }

.link[data-link-style="bordered"] {
  border: 1px solid #999999;
  color: #999999;
  background-color: transparent; }
  .link[data-link-style="bordered"]:hover, .link[data-link-style="bordered"]:active, .link[data-link-style="bordered"]:focus {
    color: #D51317;
    background-color: #999999;
    border: 1px solid #999999; }

button.js-toogle-comments {
  margin-bottom: 16px;
  max-width: none;
  width: 60%; }

.pagination-block {
  position: absolute;
  top: calc(100% - 60px);
  left: calc(50% - 50px); }

/*doc
---
title: Text
name: text
category: Elements - Text
---
Text is heading, paragraphs, lists etc used in the website, in the parent we load browser defaults but in child we have set some default styling.
The parent theme sets the data-attributes that are used in our pagebuilder.

#### Text Helpers

Text-alignment <br/>
Text-size

*/
/*doc
---
title: Text-alignment
name: text-alignment
parent: text
---

We use data attributes to set content and image alignments.
The default attributes are set in this file
*/
[data-text-alignment="left"] {
  text-align: left; }
  @media screen and (min-width: 320px) {
    [data-text-alignment="left"] {
      padding: 16px; } }
  @media screen and (min-width: 768px) {
    [data-text-alignment="left"] {
      padding: 0 0 0 32px; } }

[data-text-alignment="center"] {
  text-align: center; }
  @media screen and (min-width: 320px) {
    [data-text-alignment="center"] {
      padding-left: 32px;
      padding-right: 32px; } }

[data-text-alignment="right"] {
  text-align: right; }
  @media screen and (min-width: 320px) {
    [data-text-alignment="right"] {
      padding-left: 32px;
      padding-right: 32px; } }

[data-text-alignment="justify"] {
  text-align: justify; }

[data-vertical-align="top"] {
  vertical-align: top; }
  @media screen and (min-width: 320px) {
    [data-vertical-align="top"] {
      padding-top: 16px; } }
  @media screen and (min-width: 768px) {
    [data-vertical-align="top"] {
      padding-top: 32px; } }

[data-vertical-align="center"] {
  vertical-align: middle; }

[data-vertical-align="bottom"] {
  vertical-align: bottom; }
  @media screen and (min-width: 768px) {
    [data-vertical-align="bottom"] {
      padding-bottom: 64px; } }

@media screen and (min-width: 320px) {
  .block-introduction {
    padding: 16px 0; } }
@media screen and (min-width: 768px) {
  .block-introduction {
    padding: 32px 0; } }
.block-introduction[data-text-alignment="left"] {
  text-align: left;
  margin-left: 0;
  padding-left: 32px; }
.block-introduction[data-text-alignment="right"] {
  text-align: right;
  margin-right: 0;
  padding-right: 32px; }

/*doc
---
title: Text-size
name: text-size
parent: text
---

We use data attributes to set content and image alignments.
The default attributes are set in this file
*/
@media screen and (min-width: 320px) {
  [data-text-size="small"] h1, [data-text-size="small"] h2, [data-text-size="small"] h3, [data-text-size="small"] h4, [data-text-size="small"] h5, [data-text-size="small"] h6,
  [data-text-size="medium"] h1,
  [data-text-size="medium"] h2,
  [data-text-size="medium"] h3,
  [data-text-size="medium"] h4,
  [data-text-size="medium"] h5,
  [data-text-size="medium"] h6,
  [data-text-size="large"] h1,
  [data-text-size="large"] h2,
  [data-text-size="large"] h3,
  [data-text-size="large"] h4,
  [data-text-size="large"] h5,
  [data-text-size="large"] h6 {
    font-size: 1.5rem;
    margin-bottom: 16px;
    line-height: 1.1; } }
@media screen and (min-width: 320px) {
  [data-text-size="small"] p,
  [data-text-size="medium"] p,
  [data-text-size="large"] p {
    font-size: 1rem; } }

@media screen and (min-width: 1024px) {
  [data-text-size="medium"] h1, [data-text-size="medium"] h2, [data-text-size="medium"] h3, [data-text-size="medium"] h4, [data-text-size="medium"] h5, [data-text-size="medium"] h6 {
    font-size: 2.5rem;
    margin-bottom: 16px;
    line-height: 1.1; }
  [data-text-size="medium"] p {
    font-size: 1.35rem; } }

@media screen and (min-width: tablet) {
  [data-text-size="large"] h1, [data-text-size="large"] h2, [data-text-size="large"] h3, [data-text-size="large"] h4, [data-text-size="large"] h5, [data-text-size="large"] h6 {
    font-size: 2rem;
    margin-bottom: 32px;
    line-height: 1.1; }
  [data-text-size="large"] p {
    font-size: 1.15rem; } }
@media screen and (min-width: 1024px) {
  [data-text-size="large"] h1, [data-text-size="large"] h2, [data-text-size="large"] h3, [data-text-size="large"] h4, [data-text-size="large"] h5, [data-text-size="large"] h6 {
    font-size: 2.5rem;
    line-height: 1.2; }
  [data-text-size="large"] p {
    font-size: 2rem;
    line-height: 1.2; } }

/*doc
---
title: Paragraph
name: paragraph
parent: text
---


Paragraphs are preset with a body font size and a primary font, line height and spacing to match the overall vertical rhythm.


#### Default Text

```html_example

<p>
   A paragraph (from the Ancient Greek παράγραφος paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea.
   A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

</p>

<p>
  The oldest classical Greek and Latin writing had little or no space between words, and could be written in boustrophedon (alternating directions).
  Over time, text direction (left to right) became standardized, and word dividers and terminal punctuation became common. The first way to divide sentences into groups was the original paragraphos,
  similar to an underscore at the beginning of the new group.
  The Greek paragraphos evolved into the pilcrow (¶), which in English manuscripts in the Middle Ages can be seen inserted inline between sentences. The hedera leaf (e.g. ☙) has also been used in the same way.
</p>

```
#### Introduction & Column Text sizes

These are the three text sizes generated by the introduction and column sections of the blocks; small, medium and large.

```html_example

<div class="block-introduction" data-text-size="small">
    <div class="introduction-description js-introduction-description-public">
		<p>This is the small introduction text A paragraph (from the Ancient Greek παράγραφος paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. </p>
	</div>
</div>
<div class="block-introduction" data-text-size="medium">
    <div class="introduction-description js-introduction-description-public">
		<p>This is the medium introduction text A paragraph (from the Ancient Greek παράγραφος paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. </p>
	</div>
</div>
<div class="block-introduction" data-text-size="large">
    <div class="introduction-description js-introduction-description-public">
		<p>This is the large introduction text A paragraph (from the Ancient Greek παράγραφος paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. </p>
	</div>
</div>
```
*/
body {
  color: black;
  font-family: "MuseoSansRounded-300", sans-serif;
  font-size: 1em;
  line-height: 1.6; }
  @media screen and (min-width: 320px) and (max-width: 480px) {
    body {
      font-size: 0.9rem; } }

.entry-content {
  font-size: 1.1em;
  margin: 0 0 1.5em; }

.content[data-text-size="small"] p, .content[data-text-size="medium"] p, .content[data-text-size="large"] p,
.column-text[data-text-size="small"] p,
.column-text[data-text-size="medium"] p,
.column-text[data-text-size="large"] p,
.block-introduction[data-text-size="small"] p,
.block-introduction[data-text-size="medium"] p,
.block-introduction[data-text-size="large"] p {
  font-size: 0.75em; }
.content[data-text-size="small"],
.column-text[data-text-size="small"],
.block-introduction[data-text-size="small"] {
  font-size: 1.5em; }
.content[data-text-size="medium"],
.column-text[data-text-size="medium"],
.block-introduction[data-text-size="medium"] {
  font-size: 2em; }
.content[data-text-size="large"],
.column-text[data-text-size="large"],
.block-introduction[data-text-size="large"] {
  font-size: 2.5em; }

/*doc
---
title: Inline text (Text-level Semantics)
name: inline
parent: text
---

#### Links and anchors

The a element is used to hyperlink text, be that to another page, a named fragment on the current page or any other location on the web.

According to WCAG 2.0, color isn’t sufficient for a link to be accessible. For general usability they suggest using underlines on links as a best practice.
Some rules to apply using text links

<strong>Reference:</strong><br/>
<a href="https://www.w3.org/WAI/WCAG20/quickref/20140916/#visual-audio-contrast-without-color">https://www.w3.org/WAI/WCAG20/quickref/20140916/#visual-audio-contrast-without-color</a><br/>
<a href="https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/working-examples/G183/link-contrast.html">https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/working-examples/G183/link-contrast.html</a><br/>
<a href="https://www.sitepoint.com/15-rules-making-accessible-links/">https://www.sitepoint.com/15-rules-making-accessible-links/</a><br/>


```html_example

<a href="#">this is a text link </a> <br/><br/>

<a href="#" target="_blank">This is a reference to an external page that opens a new tab  <span class="sr-only">Opens in new window</span><i aria-hidden="true" class="fa fa-edit fa-external-link"></i></a>


```

#### Stressed emphasis

The em element is used to denote text with stressed emphasis, i.e., something you’d pronounce differently. Where italicizing is required for stylistic differentiation, the i element may be preferable.

```html_example

<p>this is some text with one <em>emphased </em> element as an example

```

#### Strong importance

The strong element is used to denote text with strong importance. Where bolding is used for stylistic differentiation, the b element may be preferable.

```html_example

<p>this is some text with a couple of <strong>words in a strong tag </strong> as an example

```

#### Inline Text Elements


```html_example

<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

```

#### Blockquotes


Block quotes are marked up using ‹blockquote› tags. You may use an optional ‹cite› element to cite an attribution.

```html_example

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <small><cite>name of person</cite></small>
</blockquote>

```


*/
a {
  color: #D51317;
  text-decoration: none; }
  a:active, a:focus, a:hover {
    color: #262626;
    background-color: #cccccc; }

strong {
  font-family: "MuseoSansRounded-300", sans-serif; }

blockquote {
  font-size: 1.1em;
  font-style: italic;
  background-color: #cccccc;
  overflow: hidden;
  margin: 0 0 1.5em;
  padding: 0 32px; }

cite {
  font-style: normal;
  font-weight: bold; }

@media screen and (min-width: 320px) {
  .card-meta {
    font-size: 0.75em;
    color: #999999; } }
@media screen and (min-width: 1024px) {
  .card-meta {
    font-size: 0.9em; } }

/*doc
---
title: Heading
name: heading
parent: text
---

For heading styles we use the same size for all <h> elements, this way we can use them properly for SEO without interfering with style
the heading type can be picked from our frontend pagebuilder in three sizing options small/medium/large and they will be used like this in the content, columns, introduction and hero blocks.

Other specific heading will be set further down this page.

#### Introduction title

The introduction title is used to explain about the content in the block.
It is used in the content-block, gallery block, post-list block.

``` html_example

<div class="block-introduction" data-text-size="small">

<h2 class="introduction-title">This is a section introduction in a small text size</h2>

</div>

<div class="block-introduction" data-text-size="medium">

<h2 class="introduction-title">This is a section introduction in a medium text size</h2>

</div>

<div class="block-introduction" data-text-size="large">

<h2 class="introduction-title">This is a section introduction in a large text size</h2>

</div>
```
#### Column title

The column title is used in the columns of the text block

``` html_example

<div class="column-text" data-text-size="small">

<h3 class="column-title">This is a small column heading</h3>

</div>

<div class="column-text" data-text-size="medium">

<h3 class="column-title">This is a medium column heading</h3>

</div>

<div class="column-text" data-text-size="large">

<h3 class="column-title">This is a large column heading</h3>

</div>
```


#### Cards Heading

For Cards we use one heading size by default but it can be extended if we need different sizes.
We have two different colors, one for normal cards and one used on a background (cover).

```html_example
<div data-card-type="image-top">
<h3 class="card-title"> <a href="#">This is a heading for normal cards </a></h3>
</div>

<div data-card-type="image-cover" style="background-color:#000;width:400px;height:auto;padding:40px;">
<a href="#"><h3 class="card-title"> This is a heading for cover cards </h3></a>
</div>
```


#### Articles sub-heading

For articles we use special heading, in this case the size is depending the use <h> in the text.

```html_example

<div class="entry-content">

<h2> This is a sub-header for articles </h2>

</div>

```

#### Widget title

Widget titles are special classes generated by WordPress widgets used in footer, header and sidebars.

```html_example

<h2 class="widgettitle"> This is a heading for widgets </h2>


```




*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "MuseoSansRounded-100", sans-serif;
  line-height: 1.2;
  font-size: 1em;
  margin: 0 0 8px; }

.site-name h1 a {
  text-decoration: none; }
  @media screen and (min-width: 320px) {
    .site-name h1 a {
      font-size: 2.368593037em; } }
  @media screen and (min-width: 768px) {
    .site-name h1 a {
      font-size: 3.1573345183em; } }

.entry-title {
  color: #D51317;
  border-bottom: 1px solid #D51317;
  padding-bottom: 20px; }

.section-heading,
.introduction-title,
.tab-title {
  font-family: "MuseoSansRounded-100", sans-serif; }

.tab-title {
  color: #D51317;
  font-size: 1.5em; }

.widgettitle {
  font-family: "MuseoSansRounded-500", sans-serif;
  text-transform: uppercase;
  font-size: 1.333em;
  color: #D51317; }

h3.card-title {
  font-size: 1.3em;
  line-height: 1.3;
  font-family: "MuseoSansRounded-500", sans-serif;
  font-weight: 300; }
  h3.card-title a {
    text-decoration: none;
    color: #D51317; }
    h3.card-title a:hover {
      text-decoration: underline; }

[data-card-type$="cover"] h3.card-title {
  font-size: 1em; }
  [data-card-type$="cover"] h3.card-title a {
    color: white;
    text-decoration: none;
    text-transform: uppercase; }

.entry-title {
  font-size: 2.2em; }
  @media screen and (min-width: 1024px) {
    .entry-title {
      font-size: 2.5em; } }

.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
  font-family: "MuseoSansRounded-100", sans-serif;
  margin: 0 0 0.5em 0;
  line-height: 1.3;
  color: #D51317; }

.entry-content h1 {
  font-size: 3.1573345183em; }
.entry-content h2 {
  font-size: 2.368593037em; }
.entry-content h3 {
  font-size: 1.776889em; }
.entry-content h4 {
  font-size: 1.333em; }
.entry-content h5 {
  font-size: 1.333em; }
.entry-content h6 {
  font-size: 1.333em; }

@media screen and (min-width: 320px) {
  .block-introduction .introduction-title {
    font-size: 1.5em; } }

.tab-introduction .introduction-title {
  color: #D51317;
  font-size: 1.5em; }

.header-feature-image .country-title {
  position: absolute;
  top: 32px;
  left: 32px; }
  .header-feature-image .country-title h2 {
    font-size: 2.5rem;
    line-height: 1.2; }
  .header-feature-image .country-title span {
    background-color: #D51317;
    padding: 4px;
    box-shadow: 10px 0 0 #D51317, -10px 0 0 #D51317;
    color: white; }

.wbb-filter-container .intro-block {
  max-width: 1200px;
  padding: 32px;
  margin: auto; }
  @media screen and (min-width: 320px) {
    .wbb-filter-container .intro-block {
      padding: 16px; } }
  @media screen and (min-width: 1024px) {
    .wbb-filter-container .intro-block {
      padding: 32px; } }
  .wbb-filter-container .intro-block h2 {
    font-size: 18px;
    line-height: 1.6;
    font-family: "MuseoSansRounded-300", sans-serif; }

/*doc
---
title: Forms
name: forms
category: Elements - Forms
---

# Form Fields

``` html_example

<input type="text" class="form-control input-lg" placeholder="Text input"><br>
<input type="text" class="form-control" placeholder="Text input" disabled>

```

## Textarea


``` html_example

<textarea class="form-control" rows="3"></textarea>

```

## Checkboxes and radios

``` html_example

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>

```

#### Inline Checkboxes

``` html_example

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

```

#### Selects

``` html_example

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<br>

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

```

#### Static Control

``` html_example

<form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="control-label">Email</label>
    <div>
      <p class="form-control-static">email@example.com</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="control-label">Password</label>
    <div>
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

````

#### Basic Form

``` html_example

<form role="form">

  <div class="form-group">

    <label for="exampleInputEmail1">Email address</label>

    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">

  </div>

  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="button button-primary">Submit</button>
</form>

```

#### Inline Form

``` html_example

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="button button-primary">Sign in</button>
</form>

```

#### Validations

``` html_example

<div class="form-group has-success has-feedback">
  <label class="control-label " for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2">
  <span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2">
  <span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>

```


*/
fieldset {
  background-color: transparent;
  border: 0;
  margin: 0;
  padding: 0; }

legend {
  margin-bottom: 8px;
  padding: 0; }

label {
  display: block;
  margin-bottom: 8px; }

form label {
  font-weight: bold; }

input,
select,
textarea {
  display: block;
  font-family: "MuseoSansRounded-300", sans-serif;
  font-size: 1em; }

input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input:not([type]), textarea {
  appearance: none;
  background-color: white;
  border: 1px solid #D51317;
  border-radius: 5px;
  box-sizing: border-box;
  margin-bottom: 16px;
  padding: 5.3333333333px;
  width: 100%; }
  input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="email"]:hover, input[type="month"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="time"]:hover, input[type="url"]:hover, input[type="week"]:hover, input:not([type]):hover, textarea:hover {
    border-color: #aa0f12; }
  input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="week"]:focus, input:not([type]):focus, textarea:focus {
    border-color: #0000FF;
    outline: none; }
  input[type="color"]:disabled, input[type="date"]:disabled, input[type="datetime"]:disabled, input[type="datetime-local"]:disabled, input[type="email"]:disabled, input[type="month"]:disabled, input[type="number"]:disabled, input[type="password"]:disabled, input[type="search"]:disabled, input[type="tel"]:disabled, input[type="text"]:disabled, input[type="time"]:disabled, input[type="url"]:disabled, input[type="week"]:disabled, input:not([type]):disabled, textarea:disabled {
    background-color: #f2f2f2;
    cursor: not-allowed; }
    input[type="color"]:disabled:hover, input[type="date"]:disabled:hover, input[type="datetime"]:disabled:hover, input[type="datetime-local"]:disabled:hover, input[type="email"]:disabled:hover, input[type="month"]:disabled:hover, input[type="number"]:disabled:hover, input[type="password"]:disabled:hover, input[type="search"]:disabled:hover, input[type="tel"]:disabled:hover, input[type="text"]:disabled:hover, input[type="time"]:disabled:hover, input[type="url"]:disabled:hover, input[type="week"]:disabled:hover, input:not([type]):disabled:hover, textarea:disabled:hover {
      border: 1px solid #D51317; }
  input[type="color"]::placeholder, input[type="date"]::placeholder, input[type="datetime"]::placeholder, input[type="datetime-local"]::placeholder, input[type="email"]::placeholder, input[type="month"]::placeholder, input[type="number"]::placeholder, input[type="password"]::placeholder, input[type="search"]::placeholder, input[type="tel"]::placeholder, input[type="text"]::placeholder, input[type="time"]::placeholder, input[type="url"]::placeholder, input[type="week"]::placeholder, input:not([type])::placeholder, textarea::placeholder {
    color: #e67174; }

textarea {
  resize: vertical; }

[type="checkbox"],
[type="radio"] {
  display: inline;
  margin-right: 8px; }

[type="file"] {
  margin-bottom: 16px;
  width: 100%; }

select {
  margin-bottom: 16px;
  width: 100%; }

.checkbox-inline,
.radio-inline {
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: normal;
  vertical-align: middle;
  cursor: pointer; }

.form-group {
  margin-bottom: 15px; }

.form-control-static {
  margin-bottom: 0; }

.has-success .help-block,
.has-success .control-label,
.has-success .radio,
.has-success .checkbox,
.has-success .radio-inline,
.has-success .checkbox-inline {
  color: #8cc152; }
.has-success .form-control {
  border-color: #8cc152;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; }

.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
.has-warning .checkbox,
.has-warning .radio-inline,
.has-warning .checkbox-inline {
  color: #f6bb42; }
.has-warning .form-control {
  border-color: #f6bb42;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; }

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline {
  color: #da4453; }
.has-error .form-control {
  border-color: #da4453;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none; }

.introduction-description ol,
.introduction-description ul,
.entry-content ol,
.entry-content ul {
  margin: 0; }

.list-unstyled {
  list-style-type: none; }

ul, menu, dir {
  display: block;
  list-style-type: disc;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 16px; }

ol {
  display: block;
  list-style-type: decimal;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 16px; }

li {
  display: list-item;
  text-align: -webkit-match-parent; }

ol ul,
ul ol,
ul ul,
ol ol {
  -webkit-margin-before: 0px;
  -webkit-margin-after: 0px; }

ul ul, ol ul {
  list-style-type: circle; }

.list-unstyled,
ul.menu {
  list-style: outside none none;
  padding-left: 0; }

.block-introduction[data-text-size="small"] ul, .block-introduction[data-text-size="small"] ol {
  font-size: 0.75em; }

/*doc
---
title: Tables
name: tables
category: Elements - Tables
---

<div class="desktop-container">

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

</div>


*/
table {
  border-collapse: collapse;
  margin: 16px 0;
  table-layout: fixed;
  width: 100%; }

th {
  border-bottom: 1px solid #a00e11;
  font-weight: 600;
  padding: 16px 0;
  text-align: left; }

td {
  border-bottom: 1px solid #D51317;
  padding: 16px 0; }

tr,
td,
th {
  vertical-align: middle; }

hr {
  border-bottom: 1px solid #D51317;
  border-left: 0;
  border-right: 0;
  border-top: 0; }

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0; }

.visuallyhidden,
.hidden {
  margin: -1px;
  padding: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip: rect(0, 0, 0, 0);
  position: absolute; }

/*doc
---
title: Cards
name: cards
category: Components - Cards
---

A card is a sheet of material that serves as an entry point to more detailed information.

Cards may contain a photo, text, and a link about a single subject.
They may display content containing elements of varying size, such as photos with captions of variable length.

Cards are a convenient means of displaying content composed of different elements.
They’re also well-suited for showcasing elements whose size or supported actions vary, like photos with captions of variable length.


Use a card layout when displaying content that:

-  As a collection, comprises multiple data types, such as images, movies, and text
-  Does not require direct comparison (a user is not directly comparing images or text)
-  Supports content of highly variable length, such as comments
-  Contains interactive content, such as +1 buttons or comments
-  Would otherwise be in a grid list but needs to display more content to supplement the image



*/
/*doc
---
title: Card Image Top
name: card-image-top
parent: cards
---

```html_example_table
<div class="card" data-card-type="image-top" style="width:400px;">

        <div class="card-image" data-image-effect="none">
            <a href="#" style="background-image: url(http://wbb-pagebuilder.wbbdev.com/wp-content/themes/wbb-pagebuilder/assets/img/pb-demo-image.jpg);"></a>
        </div>

		<div class="card-body">
				<h3 class="card-title">

					<a href="#">

                      Press Statement Syrian Women’s Advisory Board

					</a>
				</h3>

				<div class="card-meta">
                March 3, 2017, Some Author
				</div>

			<p class="card-description">
				Today Syrians will wake up with the hope of resuming their lives among their families and loved ones without the threat of death hanging over them.Today Syrians will wake up with the hope of resuming their lives among their families and loved ones without the threat of death hanging over them.
			</p>

				<div class="card-link">

				<a href="http://pagebuilder.local/press-statement-syrian-womens-advisory-board/">Read More</a>

				</div>

		</div>

	</div>

```

*/
.card[data-card-type*="top"] .card-image div,
.card[data-card-type="card-center"] .card-image div,
.card[data-card-type="card-resource"] .card-image div,
.card[data-card-type="card-project"] .card-image div,
.card[data-card-type="card-partner"] .card-image div {
  position: relative;
  background-size: cover;
  background-position: center; }
  .card[data-card-type*="top"] .card-image div:before,
  .card[data-card-type="card-center"] .card-image div:before,
  .card[data-card-type="card-resource"] .card-image div:before,
  .card[data-card-type="card-project"] .card-image div:before,
  .card[data-card-type="card-partner"] .card-image div:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 56.25%; }
  .card[data-card-type*="top"] .card-image div a,
  .card[data-card-type*="top"] .card-image div span,
  .card[data-card-type*="top"] .card-image div div,
  .card[data-card-type*="top"] .card-image div a div,
  .card[data-card-type="card-center"] .card-image div a,
  .card[data-card-type="card-center"] .card-image div span,
  .card[data-card-type="card-center"] .card-image div div,
  .card[data-card-type="card-center"] .card-image div a div,
  .card[data-card-type="card-resource"] .card-image div a,
  .card[data-card-type="card-resource"] .card-image div span,
  .card[data-card-type="card-resource"] .card-image div div,
  .card[data-card-type="card-resource"] .card-image div a div,
  .card[data-card-type="card-project"] .card-image div a,
  .card[data-card-type="card-project"] .card-image div span,
  .card[data-card-type="card-project"] .card-image div div,
  .card[data-card-type="card-project"] .card-image div a div,
  .card[data-card-type="card-partner"] .card-image div a,
  .card[data-card-type="card-partner"] .card-image div span,
  .card[data-card-type="card-partner"] .card-image div div,
  .card[data-card-type="card-partner"] .card-image div a div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover; }
.card[data-card-type*="top"] .card-body,
.card[data-card-type="card-center"] .card-body,
.card[data-card-type="card-resource"] .card-body,
.card[data-card-type="card-project"] .card-body,
.card[data-card-type="card-partner"] .card-body {
  padding: 16px 0; }
  .card[data-card-type*="top"] .card-body .card-meta,
  .card[data-card-type="card-center"] .card-body .card-meta,
  .card[data-card-type="card-resource"] .card-body .card-meta,
  .card[data-card-type="card-project"] .card-body .card-meta,
  .card[data-card-type="card-partner"] .card-body .card-meta {
    margin: 8px 0; }
    .card[data-card-type*="top"] .card-body .card-meta .card-author,
    .card[data-card-type*="top"] .card-body .card-meta .card-date,
    .card[data-card-type="card-center"] .card-body .card-meta .card-author,
    .card[data-card-type="card-center"] .card-body .card-meta .card-date,
    .card[data-card-type="card-resource"] .card-body .card-meta .card-author,
    .card[data-card-type="card-resource"] .card-body .card-meta .card-date,
    .card[data-card-type="card-project"] .card-body .card-meta .card-author,
    .card[data-card-type="card-project"] .card-body .card-meta .card-date,
    .card[data-card-type="card-partner"] .card-body .card-meta .card-author,
    .card[data-card-type="card-partner"] .card-body .card-meta .card-date {
      display: inline; }
  .card[data-card-type*="top"] .card-body .card-description,
  .card[data-card-type="card-center"] .card-body .card-description,
  .card[data-card-type="card-resource"] .card-body .card-description,
  .card[data-card-type="card-project"] .card-body .card-description,
  .card[data-card-type="card-partner"] .card-body .card-description {
    margin-bottom: 8px; }

/*doc
---
title: Card Image Cover
name: card-image-cover
parent: cards
---

### small card size

```html_example_table


<div class="card" data-card-type="image-cover" style="width:400px;">

  <div class="card-image">

      <a href="#">

         <img src="../../assets/img/pb-demo-image.jpg" alt="" />

       </a>

  </div>

  <div class="card-body">

    <h3 class="card-title">card title</h3>

    <p class="card-description">the card description </p>

    <div class="card-button">read-more</div>

  </div>

</div>

```

*/
.card[data-card-type$="cover"] .card-image {
  position: relative; }
  .card[data-card-type$="cover"] .card-image:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 56.25%; }
  .card[data-card-type$="cover"] .card-image a,
  .card[data-card-type$="cover"] .card-image span,
  .card[data-card-type$="cover"] .card-image div,
  .card[data-card-type$="cover"] .card-image a div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover; }

.card[data-card-type$="cover"] .card-body {
  padding: 16px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; }
  .card[data-card-type$="cover"] .card-body .card-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-bottom: 0;
    background-color: rgba(240, 0, 0, 0.65);
    padding: 8px;
    color: white; }
  .card[data-card-type$="cover"] .card-body img {
    display: block; }

.openupcontracting.page-id-252 .card[data-card-type$="cover"] .card-image > span {
  left: -350px; }

.card[data-card-type*="image-side"],
.card[data-card-type*="card-side"] {
  display: block; }
  .card[data-card-type*="image-side"] .card-image,
  .card[data-card-type*="card-side"] .card-image {
    position: relative; }
    .card[data-card-type*="image-side"] .card-image div,
    .card[data-card-type*="card-side"] .card-image div {
      background-size: contain; }

.card[data-card-type*="left"] .card-image,
.card[data-card-type*="card-side"] .card-image {
  float: left; }

.card[data-card-type*="right"] .card-image {
  float: right; }

.card[data-card-type*="alternate"] .card-image {
  float: left; }

.card[data-card-type*="alternate"]:nth-of-type(even) .card-image {
  float: right; }

.text-block .card[data-card-type*="image-side"] .card-image {
  width: 30%;
  height: initial; }
.text-block .card[data-card-type*="image-side"] .card-body {
  width: 60%; }
.text-block .card[data-card-type="image-side-left"] .card-image,
.text-block .card[data-card-type="image-side-left"] .card-body {
  float: left; }
.text-block .card[data-card-type="image-side-left"] .card-body {
  padding-left: 1em; }
.text-block .card[data-card-type="image-side-right"] .card-image,
.text-block .card[data-card-type="image-side-right"] .card-body {
  float: right; }
.text-block .card[data-card-type="image-side-right"] .card-body {
  padding-right: 1em; }

@media screen and (min-width: 320px) {
  .card[data-card-type*="-side"] {
    padding-bottom: 16px; } }
  @media screen and (min-width: 320px) and (min-width: 320px) {
    .card[data-card-type*="-side"] {
      border-bottom: 1px solid #cccccc; } }
  @media screen and (min-width: 320px) and (min-width: 1024px) {
    .card[data-card-type*="-side"] {
      border-bottom: none; } }

.card[data-card-type*="-side"] .card-image {
  margin-right: 16px;
  width: 25%; }
  .card[data-card-type*="-side"] .card-image span {
    display: block;
    position: relative; }
    .card[data-card-type*="-side"] .card-image span:before {
      display: block;
      content: "";
      width: 100%;
      padding-top: 100%; }
    .card[data-card-type*="-side"] .card-image span a,
    .card[data-card-type*="-side"] .card-image span span,
    .card[data-card-type*="-side"] .card-image span div,
    .card[data-card-type*="-side"] .card-image span a div {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-size: cover; }
.card[data-card-type*="-side"] .card-body {
  padding: 0; }
  @media screen and (min-width: 320px) {
    .card[data-card-type*="-side"] .card-body .card-title {
      margin: 0;
      font-size: 1.8em; } }
  @media screen and (min-width: 1024px) {
    .card[data-card-type*="-side"] .card-body .card-title {
      margin-bottom: 8px;
      max-width: 800px; } }
  @media screen and (min-width: 320px) {
    .card[data-card-type*="-side"] .card-body .card-meta {
      margin: 0; } }
  @media screen and (min-width: 1024px) {
    .card[data-card-type*="-side"] .card-body .card-meta {
      margin: 8px 0 0; } }
  .card[data-card-type*="-side"] .card-body .card-date,
  .card[data-card-type*="-side"] .card-body .card-author {
    display: inline; }
  @media screen and (min-width: 320px) {
    .card[data-card-type*="-side"] .card-body .card-description {
      display: none; } }
  @media screen and (min-width: 768px) {
    .card[data-card-type*="-side"] .card-body .card-description {
      margin-bottom: 8px;
      display: block;
      max-width: 900px; } }
  @media screen and (min-width: 320px) {
    .card[data-card-type*="-side"] .card-body .card-link {
      display: block;
      position: relative;
      padding-left: 0;
      left: 0; } }

@media screen and (min-width: 320px) {
  .card-v2[data-card-type*="-side"] {
    width: 100%;
    background-color: white;
    margin-bottom: 8px;
    min-height: 116px; } }
@media screen and (min-width: 768px) {
  .card-v2[data-card-type*="-side"] {
    min-height: 232px; } }
@media screen and (min-width: 1024px) {
  .card-v2[data-card-type*="-side"] {
    min-height: 282px;
    margin-bottom: 16px; } }
@media screen and (min-width: 320px) {
  .card-v2[data-card-type*="-side"] .card-image {
    float: left;
    width: 100px;
    height: 100px;
    margin: 8px 8px 0;
    position: relative; } }
@media screen and (min-width: 768px) {
  .card-v2[data-card-type*="-side"] .card-image {
    max-width: 200px;
    height: 200px;
    width: 200px;
    margin: 16px 16px 0; } }
@media screen and (min-width: 1024px) {
  .card-v2[data-card-type*="-side"] .card-image {
    height: 250px;
    width: 250px;
    max-width: 250px; } }
.card-v2[data-card-type*="-side"] .card-body {
  padding: 16px;
  width: auto;
  float: none; }
  @media screen and (min-width: 320px) {
    .card-v2[data-card-type*="-side"] .card-body .card-title {
      font-size: 1.1em; } }
  @media screen and (min-width: 768px) {
    .card-v2[data-card-type*="-side"] .card-body .card-title {
      font-size: 1.1em; } }
  @media screen and (min-width: 1024px) {
    .card-v2[data-card-type*="-side"] .card-body .card-title {
      font-size: 1.5em; } }
  @media screen and (min-width: 320px) {
    .card-v2[data-card-type*="-side"] .card-body .card-meta,
    .card-v2[data-card-type*="-side"] .card-body .card-description,
    .card-v2[data-card-type*="-side"] .card-body .card-link {
      display: none; } }
  @media screen and (min-width: 768px) {
    .card-v2[data-card-type*="-side"] .card-body .card-meta,
    .card-v2[data-card-type*="-side"] .card-body .card-description,
    .card-v2[data-card-type*="-side"] .card-body .card-link {
      display: block; } }

/*doc
---
title: Card Archive
name: card-archive
parent: cards
---

```html_example_table

<div class="card" data-card-type="image-top" style="width:400px;">

        <div class="card-image">

          <a href="#">

            <div style="background-image: url('http://wbb-pagebuilder.local/assets/2017/04/UGTT.jpg');  "></div>

        </a>

        </div>

        <div class="card-body">

	        <a href="#">

            <h3 class="card-title">Women on the Frontline</h3>

            </a>

            <div class="card-meta">

                <div class="card-date">

                    03 - 04 - 2017
                </div>

                <div class="card-author">

                    admin
                </div>

            </div>

            <p class="card-description">
                  Women on the frontline is een project voor hivos hier een korte uitleg
                            </p>

                            <div class="card-link"><a href="#">Read More</a></div>


        </div>

    </div>

```

*/
.card[data-card-type="card-archive"] .card-image div {
  position: relative;
  background-size: cover;
  background-position: center; }
  .card[data-card-type="card-archive"] .card-image div:before {
    display: block;
    content: "";
    width: 100%;
    padding-top: 56.25%; }
  .card[data-card-type="card-archive"] .card-image div a,
  .card[data-card-type="card-archive"] .card-image div span,
  .card[data-card-type="card-archive"] .card-image div div,
  .card[data-card-type="card-archive"] .card-image div a div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover; }
.card[data-card-type="card-archive"] .card-body {
  padding: 0 64px;
  position: relative;
  background-color: #D51317; }
  .card[data-card-type="card-archive"] .card-body .card-body-inner {
    padding: 16px;
    top: -48px;
    background-color: white;
    position: relative; }
  .card[data-card-type="card-archive"] .card-body .card-description {
    margin-bottom: 8px; }

/*doc
---
title: Gallery Cards
name: gallery-cards
parent: cards
---

A card is a sheet of material that serves as an entry point to more detailed information.

Cards may contain a photo, text, and a link about a single subject.
They may display content containing elements of varying size, such as photos with captions of variable length.

Cards are a convenient means of displaying content composed of different elements.
They’re also well-suited for showcasing elements whose size or supported actions vary, like photos with captions of variable length.

Use a card layout when displaying content that:

-  As a collection, comprises multiple data types, such as images, movies, and text
-  Does not require direct comparison (a user is not directly comparing images or text)
-  Supports content of highly variable length, such as comments
-  Contains interactive content, such as +1 buttons or comments
-  Would otherwise be in a grid list but needs to display more content to supplement the image

*/
/*doc
---
title: Card Youtube
name: card-youtube
parent: gallery-cards
---

```html_example_table

<div class="card" data-card-type="card-youtube" style="width:400px;">

        <div class="card-image">

             <!-- For gallery link -->

             <span class="gallery-item-image" alt="Ed Sheeran - Shape of You [Official Video]" src="https://i.ytimg.com/vi/JGwWNGJdvx8/mqdefault.jpg" data-full="https://i.ytimg.com/vi/JGwWNGJdvx8/mqdefault.jpg" data-link="" data-caption="Ed Sheeran - Shape of You [Official Video]" data-content="Ed Sheeran - Shape of You [Official Video]" data-video-source="https://www.youtube.com/embed/JGwWNGJdvx8" style="background-image: url('https://i.ytimg.com/vi/JGwWNGJdvx8/mqdefault.jpg');">
            </span>


        </div>

        <div class="card-body">

            <h3 class="card-title">Ed Sheeran - Shape of You [Official Video]</h3>

            <div class="card-meta">

                <div class="card-date">

                    09 - 03 - 2017
                </div>

                <div class="card-author">

                    admin
                </div>

            </div>

            <p class="card-description">

                Ed Sheeran - Shape of You [Official Video]            </p>


        </div>

    </div>

```

*/
/*doc
---
title: Card Gallery
name: card-gallery
parent: gallery-cards
---

```html_example_table

<div class="card" data-card-type="card-gallery" style="width:400px;">

        <div class="card-image" data-image-effect="none">

            <span style="background-image: url(http://wbb-pagebuilder.local/assets/2017/04/Gianluca_Gimini-Velocipedia-21.jpg);"></span>

        </div>

        <div class="card-body">

            <h3 class="card-title">

                Gianluca_Gimini-Velocipedia-21
            </h3>

            <div class="card-image-bottom" data-image-effect="none">

                <span style="background-image: url(http://wbb-pagebuilder.local/assets/2017/04/Gianluca_Gimini-Velocipedia-21.jpg);"></span>

            </div>

            <p class="card-description">


            </p>

            <div class="description">

                <div class="project-description">

                    <p class="card-description">


                    </p>

                </div>

            </div>

        </div>

    </div>
```

*/
[data-card-type="card-gallery"] .card-image div {
  height: 300px; }
  @media screen and (min-width: 320px) {
    [data-card-type="card-gallery"] .card-image div {
      width: 100%; } }
  @media screen and (min-width: 768px) {
    [data-card-type="card-gallery"] .card-image div {
      width: 300px; } }

[data-card-type="image-side-left"] .card-image {
  margin-right: 16px;
  width: 25%; }
  [data-card-type="image-side-left"] .card-image div {
    display: block;
    position: relative; }
    [data-card-type="image-side-left"] .card-image div:before {
      display: block;
      content: "";
      width: 100%;
      padding-top: 100%; }
    [data-card-type="image-side-left"] .card-image div a,
    [data-card-type="image-side-left"] .card-image div span,
    [data-card-type="image-side-left"] .card-image div div,
    [data-card-type="image-side-left"] .card-image div a div {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-size: cover; }

[data-card-type="image-side-right"] .card-image {
  margin-right: 16px;
  width: 25%; }
  [data-card-type="image-side-right"] .card-image div {
    display: block;
    position: relative; }
    [data-card-type="image-side-right"] .card-image div:before {
      display: block;
      content: "";
      width: 100%;
      padding-top: 100%; }
    [data-card-type="image-side-right"] .card-image div a,
    [data-card-type="image-side-right"] .card-image div span,
    [data-card-type="image-side-right"] .card-image div div,
    [data-card-type="image-side-right"] .card-image div a div {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-size: cover; }

.card[data-card-type="card-project"] h3.card-title {
  font-size: 1.1em; }

.card[data-card-type="card-partner"] h3.card-title {
  font-size: 1.1em; }

.card[data-card-type="card-resource"],
.card[data-card-type="card-project"] {
  border: 1px solid #cccccc; }
  .card[data-card-type="card-resource"] a,
  .card[data-card-type="card-project"] a {
    display: block; }
  .card[data-card-type="card-resource"] .card-body,
  .card[data-card-type="card-project"] .card-body {
    padding: 8px; }

.card[data-card-type="card-partner"] {
  border: 1px solid #cccccc;
  height: 280px; }
  .card[data-card-type="card-partner"] .card-body {
    padding-left: 80px;
    position: relative; }

.card[data-card-type="card-project"] {
  height: 310px; }

.card[data-card-type="card-resource"] {
  height: 260px; }
  .card[data-card-type="card-resource"] a:hover {
    background-color: transparent; }
  .card[data-card-type="card-resource"] .card-body {
    min-height: 120px; }
    .card[data-card-type="card-resource"] .card-body .card-title {
      font-size: 1.2em;
      font-weight: normal;
      font-family: "MuseoSansRounded-300", sans-serif; }
    .card[data-card-type="card-resource"] .card-body .card-description {
      font-size: 1rem;
      color: black;
      margin: 0; }
  .card[data-card-type="card-resource"] .card-image div:before {
    content: none; }
  .card[data-card-type="card-resource"] .card-image .icon-taxonomy {
    top: 20px; }
  .card[data-card-type="card-resource"] .card-icon,
  .card[data-card-type="card-resource"] .card-type {
    height: 120px;
    text-align: center;
    display: table;
    width: 100%; }
    .card[data-card-type="card-resource"] .card-icon i,
    .card[data-card-type="card-resource"] .card-icon span,
    .card[data-card-type="card-resource"] .card-type i,
    .card[data-card-type="card-resource"] .card-type span {
      display: table-cell;
      vertical-align: middle; }
  .card[data-card-type="card-resource"] .card-icon {
    font-size: 4em; }
  .card[data-card-type="card-resource"] .card-type {
    border-left: 1px solid #cccccc; }

[data-card-type="card-quote"] {
  height: 400px;
  background-color: #D51317; }
  [data-card-type="card-quote"] .card-body {
    display: table;
    height: 100%;
    width: 100%;
    text-align: center; }
    [data-card-type="card-quote"] .card-body .card-title {
      display: table-cell;
      vertical-align: middle;
      font-size: 1.5em;
      color: white; }
      [data-card-type="card-quote"] .card-body .card-title span {
        display: block;
        text-align: left;
        max-width: 1100px;
        margin: 0 auto;
        font-family: "MuseoSansRounded-300", sans-serif; }
      [data-card-type="card-quote"] .card-body .card-title .quote-author {
        font-family: "MuseoSansRounded-100", sans-serif;
        font-size: 1.2rem; }

.card {
  position: relative;
  overflow: hidden;
  zoom: 1;
  line-height: 1.4; }
  .card .card-image {
    text-align: center; }

.card-image span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-size: cover; }

/*doc
---
title: Navigations
name: navigation
category: Components - Navigations
---
*/
/*doc
---
title: Off Canvas
name: off-canvas
parent: navigation
---
This is the traditional hamburger menu

*/
/* -----------------------------------------------------------------------------
  NAVIGATION MENU

----------------------------------------------------------------------------- */
.mobile-menu {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  position: sticky;
  top: 32px;
  z-index: 159890; }
  .mobile-menu::after {
    clear: both;
    content: "";
    display: block; }
  @media screen and (min-width: 320px) {
    .mobile-menu.mobile {
      display: block; } }
  @media screen and (min-width: 768px) {
    .mobile-menu.mobile {
      display: none; } }
  @media screen and (min-width: 320px) {
    .mobile-menu.tablet {
      display: block; } }
  @media screen and (min-width: 1024px) {
    .mobile-menu.tablet {
      display: none; } }
  @media screen and (min-width: 1024px) {
    .mobile-menu.desktop {
      display: block; } }
  .mobile-menu.menu-left .launch-menu {
    margin-left: 32px; }
  .mobile-menu nav {
    position: fixed;
    top: 0;
    z-index: 99999;
    width: 320px;
    height: 100%;
    padding: 0;
    overflow: hidden;
    background-color: #D51317;
    transition: all 0.3s ease; }
    .mobile-menu nav ul {
      list-style: none;
      padding: 0;
      top: 0;
      left: 0;
      width: 340px;
      height: 100%;
      overflow-y: scroll; }
      .mobile-menu nav ul li {
        border-bottom: 0;
        transition: all 0.3s ease; }
        .mobile-menu nav ul li a {
          color: white;
          font-family: "MuseoSansRounded-100";
          font-size: 1.4em;
          padding: 0.4em 1em;
          text-decoration: none;
          border-bottom: 1px solid #be1114;
          transition: all 0.6s ease;
          display: block; }
          .mobile-menu nav ul li a:hover {
            background-color: #be1114; }
          .mobile-menu nav ul li a:active, .mobile-menu nav ul li a:focus {
            background-color: transparent; }
        .mobile-menu nav ul li:first-child {
          margin-top: 60px; }
        .mobile-menu nav ul li:last-child {
          border-bottom: 0; }
        .mobile-menu nav ul li:hover {
          background-color: transparent; }
        .mobile-menu nav ul li ul.sub-menu {
          position: absolute;
          top: 0;
          background-color: #D51317;
          transition: all 0.3s ease;
          display: none; }
          .mobile-menu nav ul li ul.sub-menu li:first-child {
            text-transform: uppercase; }
            .mobile-menu nav ul li ul.sub-menu li:first-child button {
              position: relative;
              display: block;
              padding: 0.3em 1em 0.3em 2em;
              width: 100%;
              text-align: left; }
              .mobile-menu nav ul li ul.sub-menu li:first-child button:before {
                content: '';
                position: absolute;
                top: 50%;
                margin-top: -0.3em;
                margin-left: 1em;
                left: 0;
                /* By using an em scale, the arrows will size with the font */
                width: 0.6em;
                height: 0.6em;
                border-right: 0.2em solid #770b0d;
                border-top: 0.2em solid #770b0d;
                transform: rotate(-135deg); }
          .mobile-menu nav ul li ul.sub-menu li[class*="has-children"] a:after {
            border-top-color: white;
            border-right-color: white; }
          .mobile-menu nav ul li ul.sub-menu li ul.sub-menu {
            background-color: #D51317; }
            .mobile-menu nav ul li ul.sub-menu li ul.sub-menu li:first-child button {
              position: relative;
              text-transform: uppercase;
              border-style: solid;
              border-width: 0 0 1px 0;
              border-color: #be1114;
              padding: 0.6em 2em;
              color: white;
              font-size: 1.2em;
              display: block;
              width: 100%;
              text-align: left;
              -webkit-appearance: none;
              background-color: transparent;
              cursor: pointer; }
              .mobile-menu nav ul li ul.sub-menu li ul.sub-menu li:first-child button:before {
                content: '';
                position: absolute;
                top: 50%;
                margin-top: -0.3em;
                margin-left: 1em;
                left: 0;
                width: 0.6em;
                height: 0.6em;
                border-right: 0.2em solid white;
                border-top: 0.2em solid white;
                transform: rotate(-135deg); }
              .mobile-menu nav ul li ul.sub-menu li ul.sub-menu li:first-child button:hover {
                background-color: #be1114; }
              .mobile-menu nav ul li ul.sub-menu li ul.sub-menu li:first-child button:active, .mobile-menu nav ul li ul.sub-menu li ul.sub-menu li:first-child button:focus {
                outline: none; }
        .mobile-menu nav ul li[class*="-has-children"] a {
          position: relative;
          display: block; }
          .mobile-menu nav ul li[class*="-has-children"] a:after {
            content: '';
            position: absolute;
            top: 50%;
            margin-top: -6px;
            left: 0;
            margin-left: 280px;
            /* By using an em scale, the arrows will size with the font */
            width: 12px;
            height: 12px;
            border-right: 3px solid #770b0d;
            border-top: 3px solid #770b0d;
            transform: rotate(45deg); }
        .mobile-menu nav ul li:not(.menu-item-has-children) a:after {
          content: '';
          border: 0; }

@media screen and (min-width: 1024px) {
  .launch-menu {
    position: sticky; } }
.launch-menu .c-hamburger {
  background-color: #D51317; }
  .launch-menu .c-hamburger:hover, .launch-menu .c-hamburger:focus, .launch-menu .c-hamburger:active {
    border: 0;
    outline: none; }
  .launch-menu .c-hamburger span {
    background-color: white;
    border-radius: 1px;
    top: 27px;
    left: 13px;
    height: 5px;
    width: 58%; }
    .launch-menu .c-hamburger span:before, .launch-menu .c-hamburger span:after {
      background-color: white;
      border-radius: 1px;
      height: 5px; }
    .launch-menu .c-hamburger span:before {
      top: -10px; }
    .launch-menu .c-hamburger span:after {
      bottom: -10px; }
  .launch-menu .c-hamburger.is-active span {
    background-color: transparent; }
    .launch-menu .c-hamburger.is-active span:before, .launch-menu .c-hamburger.is-active span:after {
      background-color: white; }
    .launch-menu .c-hamburger.is-active span:before {
      top: 0; }
    .launch-menu .c-hamburger.is-active span:after {
      bottom: 0; }

.mobile-menu[data-menu-transition="slide"] ~ .main-container, .mobile-menu[data-menu-transition="push"] ~ .main-container {
  transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0); }
.mobile-menu[data-menu-transition="slide"][data-menu-direction="left"] .launch-menu, .mobile-menu[data-menu-transition="push"][data-menu-direction="left"] .launch-menu {
  left: 20px; }
  .mobile-menu[data-menu-transition="slide"][data-menu-direction="left"] .launch-menu.active, .mobile-menu[data-menu-transition="push"][data-menu-direction="left"] .launch-menu.active {
    left: 250px; }
.mobile-menu[data-menu-transition="slide"][data-menu-direction="left"] nav,
.mobile-menu[data-menu-transition="slide"][data-menu-direction="left"] nav .sub-menu, .mobile-menu[data-menu-transition="push"][data-menu-direction="left"] nav,
.mobile-menu[data-menu-transition="push"][data-menu-direction="left"] nav .sub-menu {
  left: -320px; }
  .mobile-menu[data-menu-transition="slide"][data-menu-direction="left"] nav.active,
  .mobile-menu[data-menu-transition="slide"][data-menu-direction="left"] nav .sub-menu.active, .mobile-menu[data-menu-transition="push"][data-menu-direction="left"] nav.active,
  .mobile-menu[data-menu-transition="push"][data-menu-direction="left"] nav .sub-menu.active {
    left: 0; }
.mobile-menu[data-menu-transition="slide"][data-menu-direction="right"] .launch-menu, .mobile-menu[data-menu-transition="push"][data-menu-direction="right"] .launch-menu {
  right: 20px; }
  .mobile-menu[data-menu-transition="slide"][data-menu-direction="right"] .launch-menu.active, .mobile-menu[data-menu-transition="push"][data-menu-direction="right"] .launch-menu.active {
    right: 250px; }
.mobile-menu[data-menu-transition="slide"][data-menu-direction="right"] nav,
.mobile-menu[data-menu-transition="slide"][data-menu-direction="right"] nav .sub-menu, .mobile-menu[data-menu-transition="push"][data-menu-direction="right"] nav,
.mobile-menu[data-menu-transition="push"][data-menu-direction="right"] nav .sub-menu {
  right: -320px;
  left: inherit; }
  .mobile-menu[data-menu-transition="slide"][data-menu-direction="right"] nav.active,
  .mobile-menu[data-menu-transition="slide"][data-menu-direction="right"] nav .sub-menu.active, .mobile-menu[data-menu-transition="push"][data-menu-direction="right"] nav.active,
  .mobile-menu[data-menu-transition="push"][data-menu-direction="right"] nav .sub-menu.active {
    right: 0; }
.mobile-menu[data-menu-transition="push"] ~ .main-container {
  transition: all 0.3s ease; }
.mobile-menu[data-menu-transition="push"][data-menu-active="on"][data-menu-direction="left"] ~ .main-container {
  transform: translate3d(320px, 0, 0);
  -moz-transform: translate3d(320px, 0, 0);
  -webkit-transform: translate3d(320px, 0, 0); }
.mobile-menu[data-menu-transition="push"][data-menu-active="on"][data-menu-direction="right"] ~ .main-container {
  transform: translate3d(-320px, 0, 0);
  -moz-transform: translate3d(-320px, 0, 0);
  -webkit-transform: translate3d(-320px, 0, 0); }
.mobile-menu[data-menu-transition="overlay"] nav {
  opacity: 0;
  visibility: hidden;
  width: 100%;
  height: auto;
  left: 0;
  right: 0;
  transition: all 0.6s ease; }
  .mobile-menu[data-menu-transition="overlay"] nav .menu {
    width: 100%;
    height: auto; }
    .mobile-menu[data-menu-transition="overlay"] nav .menu li {
      border: 0;
      text-align: center; }
  .mobile-menu[data-menu-transition="overlay"] nav.active {
    opacity: 1;
    visibility: visible;
    transition: all 0.6s ease; }

/*doc
---
title: Post Navigation
name: post-navigation
parent: navigation
---


```html_example

<nav class="navigation post-navigation" role="navigation">
    <h2 class="screen-reader-text">Post navigation</h2>
    <div class="nav-links">
        <div class="nav-previous">
            <span class="screen-reader-text">Previous Post</span>
            <span aria-hidden="true" class="nav-subtitle">Previous post</span>
            « <a href="http://wbb-pagebuilder.local/2017/04/17/burma-storytelling/" rel="prev">Burma Storytelling</a>        </div>
        <div class="nav-next">
            <span class="screen-reader-text">Next Post</span>
            <span aria-hidden="true" class="nav-subtitle">Next post</span>
            <a href="http://wbb-pagebuilder.local/2017/04/18/wakhan-an-other-afghanistan/" rel="next">Wakhan, An Other  Afghanistan</a> »        </div>

    </div>
</nav>

```

*/
.post-navigation {
  display: block; }
  .post-navigation .nav-links .nav-previous {
    width: 50%;
    float: left; }
  .post-navigation .nav-links .nav-next {
    float: right;
    width: 50%;
    text-align: right; }
  .post-navigation .nav-links .nav-subtitle {
    display: block; }

.launch-menu {
  position: fixed;
  top: 10px;
  z-index: 159890;
  width: 60px;
  height: 60px;
  cursor: pointer;
  transition: all 0.3s ease; }

.c-hamburger {
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 60px;
  height: 60px;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  transition: background 0.3s; }
  .c-hamburger:focus, .c-hamburger:active {
    outline: none;
    border: 0;
    background-color: transparent; }
  .c-hamburger:hover {
    background-color: transparent;
    border: 0; }
  .c-hamburger span {
    display: block;
    position: absolute;
    top: 29px;
    left: 9px;
    right: 18px;
    height: 4px;
    width: 70%;
    background: #000000; }
  .c-hamburger span::before,
  .c-hamburger span::after {
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #000000;
    content: ""; }
  .c-hamburger span::before {
    top: -15px; }
  .c-hamburger span::after {
    bottom: -15px; }

/**
 * Hamburger to "x" (htx). Takes on a hamburger shape, bars slide
 * down to center and transform into an "x".
 */
.c-hamburger--htx {
  background-color: rgba(255, 255, 255, 0); }
  .c-hamburger--htx span {
    transition: background 0s 0.3s; }
  .c-hamburger--htx span::before,
  .c-hamburger--htx span::after {
    transition-duration: 0.3s, 0.3s;
    transition-delay: 0.3s, 0s; }
  .c-hamburger--htx span::before {
    transition-property: top, transform; }
  .c-hamburger--htx span::after {
    transition-property: bottom, transform; }

/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
  background-color: transparent; }
  .c-hamburger--htx.is-active span {
    background: none; }
    .c-hamburger--htx.is-active span::before {
      top: 0;
      transform: rotate(45deg); }
    .c-hamburger--htx.is-active span::after {
      bottom: 0;
      transform: rotate(-45deg); }
    .c-hamburger--htx.is-active span::before, .c-hamburger--htx.is-active span::after {
      transition-delay: 0s, 0.3s; }

.mobile-menu[data-hamburguer-wrap="full"] .launch-menu {
  position: fixed; }
.mobile-menu[data-hamburguer-wrap="boxed"] {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  top: 16px;
  position: sticky;
  z-index: 159980; }
  .mobile-menu[data-hamburguer-wrap="boxed"]::after {
    clear: both;
    content: "";
    display: block; }
  @media screen and (min-width: 1024px) {
    .mobile-menu[data-hamburguer-wrap="boxed"] .launch-menu {
      position: sticky; } }
  .mobile-menu[data-hamburguer-wrap="boxed"][data-menu-direction="right"] .launch-menu {
    float: right; }

.pagination {
  display: table;
  margin: 0 auto 32px; }
  .pagination .page-numbers {
    text-align: center;
    border-radius: 0;
    border-collapse: initial;
    display: table-cell;
    margin: 0;
    padding: 5px 15px;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    font-size: 1em; }
    .pagination .page-numbers:hover,
    .pagination .page-numbers .current:hover {
      background-color: #e6e6e6; }
    .pagination .page-numbers:first-child {
      border-left: 1px solid #e6e6e6; }

#goTop {
  position: fixed;
  display: none;
  bottom: 32px;
  right: 32px;
  width: 40px;
  height: 40px;
  background-color: #D51317;
  cursor: pointer; }
  #goTop:hover {
    background-color: #a60f12; }
  #goTop:after {
    content: '';
    position: absolute;
    top: calc(50% - 3px);
    left: calc(50% - 6px);
    width: 12px;
    height: 12px;
    border-right: 3px solid white;
    border-top: 3px solid white;
    transform: rotate(-45deg); }

/*doc
---
title: Primary Navigation
name: primary-navigation
parent: navigation
---
Primary navigation is the most important navigation section for the main navigation

*/
.site-navigation {
  margin-top: 30px;
  background-color: white;
  margin: 0; }
  @media screen and (min-width: 320px) {
    .site-navigation {
      display: none; } }
  @media screen and (min-width: 768px) {
    .site-navigation {
      padding: 0;
      display: block; } }
  .site-navigation .navigation-menu {
    margin: 0;
    padding: 0; }
    .site-navigation .navigation-menu li:first-child {
      padding-left: 0; }
    .site-navigation .navigation-menu li {
      position: relative;
      padding: 16px; }
      .site-navigation .navigation-menu li a {
        color: #D51317;
        text-decoration: none;
        line-height: 48px;
        font-size: 20px; }
        .site-navigation .navigation-menu li a:hover, .site-navigation .navigation-menu li a:active, .site-navigation .navigation-menu li a:focus {
          color: #333333;
          background-color: transparent; }
      .site-navigation .navigation-menu li:hover > .sub-menu {
        z-index: 1;
        white-space: nowrap;
        background-color: #D51317; }
      .site-navigation .navigation-menu li.current-item a {
        color: #333333; }
      .site-navigation .navigation-menu li .sub-menu {
        left: 0; }
        .site-navigation .navigation-menu li .sub-menu li {
          display: block;
          padding: 4px 16px; }
          .site-navigation .navigation-menu li .sub-menu li a {
            color: white; }
          .site-navigation .navigation-menu li .sub-menu li:last-child {
            padding-bottom: 16px; }
          .site-navigation .navigation-menu li .sub-menu li:hover a {
            text-decoration: underline; }
  .site-navigation.navigation-left {
    text-align: left;
    padding-right: 30px; }
    .site-navigation.navigation-left ul li .sub-menu {
      left: 0; }
      .site-navigation.navigation-left ul li .sub-menu li [class*="sub-menu"] {
        left: 100%; }
  .site-navigation.navigation-right {
    text-align: right;
    padding-left: 30px; }
    .site-navigation.navigation-right ul li .sub-menu {
      right: 0; }
      .site-navigation.navigation-right ul li .sub-menu li [class*="sub-menu"] {
        right: 100%; }
  .site-navigation ul li {
    list-style-type: none;
    display: inline-block;
    position: relative;
    white-space: nowrap;
    padding: 0.5em;
    transition: all 0.3s ease; }
    .site-navigation ul li a:hover {
      cursor: pointer; }
    .site-navigation ul li:hover {
      cursor: pointer; }
      .site-navigation ul li:hover > .sub-menu {
        display: block; }
    .site-navigation ul li .sub-menu {
      display: none;
      position: absolute;
      top: 100%;
      margin: 0;
      padding: 0; }
      .site-navigation ul li .sub-menu li [class*="sub-menu"] {
        top: 0; }

.site-header[data-transparent="1"] .site-navigation .navigation-menu li a {
  color: white; }
.site-header[data-transparent="1"] .site-navigation .navigation-menu li:hover > .sub-menu {
  background-color: transparent; }

.wbb-menu-widget .navigation-menu li .sub-menu li {
  display: block;
  position: relative; }
  .wbb-menu-widget .navigation-menu li .sub-menu li .sub-menu {
    left: 100%; }

.site-footer .menu .menu-item .sub-menu {
  display: none; }

/*doc
---
title: Blocks
name: blocks
category: Components - Blocks
---

Blocks are part the introduction or main content of a section.
They have some attributes for effects or height setting


#### Hero Block

#### Text Block

#### Introduction

#### Helpers

*/
/*doc
---
title: Block-height
name: block-height
parent: blocks
---

#### parallax
The term 'parallax' refers to the apparent movement of objects when viewed from different positions.
The technique was originally used in 2D video games where background images moved slower than foreground images,
creating an illusion of depth. Who would have thought something popularized in 1982 arcade game Moon Patrol would become a major trend for web design 30 years later!

The effect is used in the hero addon.

*/
[data-height="default"] .hero-text-container {
  padding-top: 64px;
  padding-bottom: 64px; }

[data-height="full"] {
  height: 100vh; }
  [data-height="full"] .hero-content,
  [data-height="full"] .video-content {
    height: 100vh; }
    [data-height="full"] .hero-content .video-effect,
    [data-height="full"] .video-content .video-effect {
      height: 100vh; }

[data-height="half"] {
  height: 60vh;
  min-height: 460px; }
  [data-height="half"] .hero-content,
  [data-height="half"] .video-content {
    height: 60vh;
    min-height: 460px; }
    [data-height="half"] .hero-content .video-effect,
    [data-height="half"] .video-content .video-effect {
      height: 60vh;
      min-height: 460px; }

/*doc
---
title: Block-effect
name: block-effect
parent: blocks
---

#### parallax
The term 'parallax' refers to the apparent movement of objects when viewed from different positions.
The technique was originally used in 2D video games where background images moved slower than foreground images,
creating an illusion of depth. Who would have thought something popularized in 1982 arcade game Moon Patrol would become a major trend for web design 30 years later!

The effect is used in the hero addon.

*/
[data-hover-effect="zoom"] li:hover {
  -ms-transform: scale(1.1);
  /* IE 9 */
  -webkit-transform: scale(1.1);
  /* Safari */
  transform: scale(1.1);
  /* Standard syntax */
  transition: all 0.6s ease; }

@media screen and (min-width: 320px) {
  [data-parallax-type="fixed"] {
    background-attachment: inherit; } }
@media screen and (min-width: 768px) {
  [data-parallax-type="fixed"] {
    background-attachment: fixed; } }

@media screen and (min-width: 320px) and (max-width: 480px) {
  [data-parallax-type="smooth"] {
    background-attachment: inherit;
    background-position-y: 0 !important; } }

[data-parallax-type="ken-burns"] {
  animation: move 30s ease;
  /* Change this to alternate to stop the loop. */
  -ms-animation: move 30s ease;
  -webkit-animation: move 30s ease;
  -moz-animation: move 30s ease;
  position: absolute; }

@-webkit-keyframes move {
  from {
    transform: scale(1);
    -ms-transform: scale(1);
    /* IE 9 */
    -webkit-transform: scale(1);
    /* Safari and Chrome */
    -moz-transform: scale(1);
    /* Firefox */ }
  to {
    transform: scale(1.5);
    -ms-transform: scale(1.5);
    /* IE 9 */
    -webkit-transform: scale(1.5);
    /* Safari and Chrome */
    -moz-transform: scale(1.5);
    /* Firefox */ } }
@media screen and (min-width: 768px) {
  [data-grid-width="full"] [data-text-alignment="left"] div,
  [data-grid-width="full"] [data-text-alignment="center"] div,
  [data-grid-width="full"] [data-text-alignment="right"] div {
    max-width: 1200px;
    margin: auto; } }
@media screen and (min-width: 1600px) {
  [data-grid-width="full"] [data-text-alignment="left"] div,
  [data-grid-width="full"] [data-text-alignment="center"] div,
  [data-grid-width="full"] [data-text-alignment="right"] div {
    max-width: 100%; } }
@media screen and (min-width: 768px) {
  [data-grid-width="full"] [data-text-alignment="left"] div h3, [data-grid-width="full"] [data-text-alignment="left"] div p,
  [data-grid-width="full"] [data-text-alignment="center"] div h3,
  [data-grid-width="full"] [data-text-alignment="center"] div p,
  [data-grid-width="full"] [data-text-alignment="right"] div h3,
  [data-grid-width="full"] [data-text-alignment="right"] div p {
    max-width: 800px; } }
@media screen and (min-width: 768px) {
  [data-grid-width="full"] [data-text-alignment="left"] div h3, [data-grid-width="full"] [data-text-alignment="left"] div p {
    margin-right: auto; } }
@media screen and (min-width: 768px) {
  [data-grid-width="full"] [data-text-alignment="center"] div h3, [data-grid-width="full"] [data-text-alignment="center"] div p {
    margin-left: auto;
    margin-right: auto; } }
@media screen and (min-width: 768px) {
  [data-grid-width="full"] [data-text-alignment="right"] div h3, [data-grid-width="full"] [data-text-alignment="right"] div p {
    margin-left: auto; } }

@media screen and (min-width: 320px) {
  .hero-text-container[data-text-alignment="center"] .introduction-title,
  .hero-text-container[data-text-alignment="center"] .introduction-description,
  .hero-text-container[data-text-alignment="center"] .button-content {
    margin: 0; } }
@media screen and (min-width: 1024px) {
  .hero-text-container[data-text-alignment="center"] .introduction-title,
  .hero-text-container[data-text-alignment="center"] .introduction-description,
  .hero-text-container[data-text-alignment="center"] .button-content {
    margin-right: 14.7%;
    margin-left: 14.7%; } }
@media screen and (min-width: 768px) {
  .hero-text-container[data-text-alignment="left"] .introduction-title,
  .hero-text-container[data-text-alignment="left"] .introduction-description,
  .hero-text-container[data-text-alignment="left"] .button-content {
    margin-right: 29.4%; } }
@media screen and (min-width: 768px) {
  .hero-text-container[data-text-alignment="right"] .introduction-title,
  .hero-text-container[data-text-alignment="right"] .introduction-description,
  .hero-text-container[data-text-alignment="right"] .button-content {
    margin-left: 29.4%; } }

@media screen and (min-width: 320px) {
  [data-width="full"] .introduction-title {
    padding: 16px 0; } }
@media screen and (min-width: 768px) {
  [data-width="full"] .introduction-title {
    padding: 32px 0; } }

[data-width="boxed"] ul.card-group {
  padding: 0; }

.block-introduction {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto; }
  .block-introduction::after {
    clear: both;
    content: "";
    display: block; }

/*doc
---
title: Tooltip
name: tooltip
category: Components - Tooltip
---

###Tooltip


*/
.entry-header .tooltip-container {
  bottom: 122px; }

.tooltip-container {
  position: absolute;
  bottom: 32px;
  right: 32px; }
  .tooltip-container .tooltip-content {
    background: white;
    color: #333333;
    cursor: pointer;
    font-size: 1.6em;
    line-height: 1.2;
    padding: 0.2em;
    position: relative;
    text-align: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -webkit-transform: translateZ(0);
    /* webkit flicker fix */
    -webkit-font-smoothing: antialiased;
    /* webkit text rendering fix */ }
    .tooltip-container .tooltip-content:hover {
      color: #D51317; }
    .tooltip-container .tooltip-content .tooltip {
      background: white;
      bottom: 100%;
      color: #333333;
      display: block;
      right: -16px;
      margin-bottom: 15px;
      opacity: 0;
      padding: 8px;
      pointer-events: none;
      position: absolute;
      max-width: 300px;
      font-size: 1.5rem;
      font-family: "MuseoSansRounded-300", sans-serif;
      -webkit-transform: translateY(10px);
      -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
      -o-transform: translateY(10px);
      transform: translateY(10px);
      -webkit-transition: all .25s ease-out;
      -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
      -o-transition: all .25s ease-out;
      transition: all .25s ease-out;
      -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); }
      .tooltip-container .tooltip-content .tooltip:before {
        bottom: -20px;
        content: " ";
        display: block;
        height: 20px;
        left: 0;
        position: absolute;
        width: 100%; }
      .tooltip-container .tooltip-content .tooltip:after {
        border-left: solid transparent 10px;
        border-right: solid transparent 10px;
        border-top: solid white 10px;
        bottom: -10px;
        content: " ";
        height: 0;
        right: -5px;
        margin-right: 32px;
        position: absolute;
        width: 0; }
      .tooltip-container .tooltip-content .tooltip.active {
        opacity: 1;
        pointer-events: auto;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px); }

/*doc
---
title: Hero block
name: hero-block
parent: blocks
---

This page shows the possible alignments of the text in the Hero block
Also colors are tested here.
The backgrounds can be loaded from the background plugin.

To use it on the website you have to install the video-background plugin and to show it in the pagebuilder you have to use the addon.
For best usage you have to import 4 files, mp4, ogv, webm and jpg

Optional is a section that plays a movie when you press a button

####Hero Left Top Aligned

```html_example

<section class="background-hero-block" data-height="half" data-background-type="image" data-width="boxed">

    <div class="image-content" data-vertical-position="top" data-horizontal-align="left" style="background-image: url('https://pagebuilder3.wbbdev.com/assets/2017/03/fotoregugee.jpg') ;">

	</div>

	<div class="hero-content">

		<div class="hero-text-container" data-text-size="small" data-text-alignment="" data-text-color="black">

			<div class="large-text">

				This is a test for the hero addon

		    </div>

			<div class="medium-text js-hero-introduction-public">

				<p>This is the text description</p>

			</div>

			<div class="button-content" data-align="" data-button-color="black">

				<a href="http://www.google.nl" class="button button-large button-border  js-hero-insert-link-public" data-block-id="314" target="_blank">google link</a>

			</div>


		</div>


	</div>

</section>

```

####Hero Left Center Aligned

```html_example

<section class="background-hero-block" data-height="half" data-background-type="image" data-width="boxed">

    <div class="image-content" data-vertical-position="center" data-horizontal-align="left" style="background-image: url('https://pagebuilder3.wbbdev.com/assets/2017/03/fotoregugee.jpg') ;">

	</div>

	<div class="hero-content">

		<div class="hero-text-container" data-text-size="small" data-text-alignment="" data-text-color="black">

			<div class="large-text">

				This is a test for the hero addon

		    </div>

			<div class="medium-text js-hero-introduction-public">

				<p>This is the text description</p>

			</div>

			<div class="button-content" data-align="" data-button-color="black">

				<a href="http://www.google.nl" class="button button-large button-border  js-hero-insert-link-public" data-block-id="314" target="_blank">google link</a>

			</div>


		</div>


	</div>

</section>

```
####Hero Left Bottom Aligned

```html_example

<section class="background-hero-block" data-height="half" data-background-type="image" data-width="boxed">

    <div class="image-content" data-vertical-position="bottom" data-horizontal-align="left" style="background-image: url('https://pagebuilder3.wbbdev.com/assets/2017/03/fotoregugee.jpg') ;">

	</div>

	<div class="hero-content">

		<div class="hero-text-container" data-text-size="small" data-text-alignment="" data-text-color="black">

			<div class="large-text">

				This is a test for the hero addon

		    </div>

			<div class="medium-text js-hero-introduction-public">

				<p>This is the text description</p>

			</div>

			<div class="button-content" data-align="" data-button-color="black">

				<a href="http://www.google.nl" class="button button-large button-border  js-hero-insert-link-public" data-block-id="314" target="_blank">google link</a>

			</div>


		</div>


	</div>

</section>

```
####Hero Center Top Aligned

```html_example

<section class="background-hero-block" data-height="half" data-background-type="image" data-width="boxed">

    <div class="image-content" data-vertical-position="top" data-horizontal-align="center" style="background-image: url('https://pagebuilder3.wbbdev.com/assets/2017/03/fotoregugee.jpg') ;">

	</div>

	<div class="hero-content">

		<div class="hero-text-container" data-text-size="small" data-text-alignment="" data-text-color="black">

			<div class="large-text">

				This is a test for the hero addon

		    </div>

			<div class="medium-text js-hero-introduction-public">

				<p>This is the text description</p>

			</div>

			<div class="button-content" data-align="" data-button-color="black">

				<a href="http://www.google.nl" class="button button-large button-border  js-hero-insert-link-public" data-block-id="314" target="_blank">google link</a>

			</div>


		</div>


	</div>

</section>

```

####Hero Center Center Aligned

```html_example

<section class="background-hero-block" data-height="half" data-background-type="image" data-width="boxed">

    <div class="image-content" data-vertical-position="center" data-horizontal-align="center" style="background-image: url('https://pagebuilder3.wbbdev.com/assets/2017/03/fotoregugee.jpg') ;">

	</div>

	<div class="hero-content">

		<div class="hero-text-container" data-text-size="small" data-text-alignment="" data-text-color="black">

			<div class="large-text">

				This is a test for the hero addon

		    </div>

			<div class="medium-text js-hero-introduction-public">

				<p>This is the text description</p>

			</div>

			<div class="button-content" data-align="" data-button-color="black">

				<a href="http://www.google.nl" class="button button-large button-border  js-hero-insert-link-public" data-block-id="314" target="_blank">google link</a>

			</div>


		</div>


	</div>

</section>

```
####Hero Center Bottom Aligned

```html_example

<section class="background-hero-block" data-height="half" data-background-type="image" data-width="boxed">

    <div class="image-content" data-vertical-position="bottom" data-horizontal-align="center" style="background-image: url('https://pagebuilder3.wbbdev.com/assets/2017/03/fotoregugee.jpg') ;">

	</div>

	<div class="hero-content">

		<div class="hero-text-container" data-text-size="small" data-text-alignment="" data-text-color="black">

			<div class="large-text">

				This is a test for the hero addon

		    </div>

			<div class="medium-text js-hero-introduction-public">

				<p>This is the text description</p>

			</div>

			<div class="button-content" data-align="" data-button-color="black">

				<a href="http://www.google.nl" class="button button-large button-border  js-hero-insert-link-public" data-block-id="314" target="_blank">google link</a>

			</div>


		</div>


	</div>

</section>

```
####Hero Right Top Aligned

```html_example

<section class="background-hero-block" data-height="half" data-background-type="image" data-width="boxed">

    <div class="image-content" data-vertical-position="top" data-horizontal-align="right" style="background-image: url('https://pagebuilder3.wbbdev.com/assets/2017/03/fotoregugee.jpg') ;">

	</div>

	<div class="hero-content">

		<div class="hero-text-container" data-text-size="small" data-text-alignment="" data-text-color="black">

			<div class="large-text">

				This is a test for the hero addon

		    </div>

			<div class="medium-text js-hero-introduction-public">

				<p>This is the text description</p>

			</div>

			<div class="button-content" data-align="" data-button-color="black">

				<a href="http://www.google.nl" class="button button-large button-border  js-hero-insert-link-public" data-block-id="314" target="_blank">google link</a>

			</div>


		</div>


	</div>

</section>

```
####Hero Right Center Aligned

```html_example

<section class="background-hero-block" data-height="half" data-background-type="image" data-width="boxed">

    <div class="image-content" data-vertical-position="center" data-horizontal-align="right" style="background-image: url('https://pagebuilder3.wbbdev.com/assets/2017/03/fotoregugee.jpg') ;">

	</div>

	<div class="hero-content">

		<div class="hero-text-container" data-text-size="small" data-text-alignment="" data-text-color="black">

			<div class="large-text">

				This is a test for the hero addon

		    </div>

			<div class="medium-text js-hero-introduction-public">

				<p>This is the text description</p>

			</div>

			<div class="button-content" data-align="" data-button-color="black">

				<a href="http://www.google.nl" class="button button-large button-border  js-hero-insert-link-public" data-block-id="314" target="_blank">google link</a>

			</div>


		</div>


	</div>

</section>

```

####Hero Right Bottom Aligned

```html_example

<section class="background-hero-block" data-height="half" data-background-type="image" data-width="boxed">

    <div class="image-content" data-vertical-position="bottom" data-horizontal-align="right" style="background-image: url('https://pagebuilder3.wbbdev.com/assets/2017/03/fotoregugee.jpg') ;">

	</div>

	<div class="hero-content">

		<div class="hero-text-container" data-text-size="small" data-text-alignment="" data-text-color="black">

			<div class="large-text">

				This is a test for the hero addon

		    </div>

			<div class="medium-text js-hero-introduction-public">

				<p>This is the text description</p>

			</div>

			<div class="button-content" data-align="" data-button-color="black">

				<a href="http://www.google.nl" class="button button-large button-border  js-hero-insert-link-public" data-block-id="314" target="_blank">google link</a>

			</div>


		</div>


	</div>

</section>

```
*/
.background-hero-block {
  position: relative;
  overflow: hidden; }
  .background-hero-block .image-content {
    background-size: cover;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0; }
  .background-hero-block .hero-content {
    width: 100%;
    text-align: center;
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; }
    .background-hero-block .hero-content .video-effect {
      position: absolute;
      top: 0;
      left: 0;
      height: 100vh;
      right: 0; }
    .background-hero-block .hero-content .pattern-layer {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0; }
    .background-hero-block .hero-content:after {
      content: '';
      height: 100%;
      margin-left: -0.25em; }
    .background-hero-block .hero-content .hero-text-container {
      position: relative;
      width: 100%;
      display: table-cell;
      height: 100%; }
  .background-hero-block .video-content {
    position: relative; }
    .background-hero-block .video-content .video-wrap {
      position: absolute;
      z-index: 0;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      overflow: hidden;
      background-size: cover;
      background-color: transparent;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-image: none; }
      .background-hero-block .video-content .video-wrap video {
        margin: auto;
        position: absolute;
        z-index: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        visibility: visible;
        opacity: 1;
        width: 100%;
        height: auto; }

[data-text-color="invert"] .introduction-title {
  display: inline-block;
  line-height: 56px;
  margin-bottom: 1rem; }
  [data-text-color="invert"] .introduction-title span {
    background-color: #D51317;
    padding: 4px;
    box-shadow: 10px 0 0 #D51317, -10px 0 0 #D51317; }

.block-introduction {
  padding-left: 0; }

.hero-text-container h1 {
  line-height: 1.5; }

/*doc
---
title: Gallery block
name: gallery-block
parent: blocks
---
*/
.gallery-block .gallery {
  padding: 0; }
  .gallery-block .gallery li {
    padding: 0.4em; }

/*doc
---
title: Text Block
name: text-block
parent: blocks
---

For the website we have a couple of pre-defined text blocks.
Those blocks are used to present important text, call-to actions or introduction text for a website section.
The text blocks can be created by using the Pagebuilder Text Addon

*/
.text-block .content-text-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto; }
  .text-block .content-text-container::after {
    clear: both;
    content: "";
    display: block; }
  @media screen and (min-width: 320px) {
    .text-block .content-text-container {
      padding: 3vh 0; } }

.editor-block {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 32px; }
  .editor-block::after {
    clear: both;
    content: "";
    display: block; }
  .editor-block .alignleft {
    margin-right: 32px !important; }

/*doc
---
title: Modals
name: modals
category: Components - Modals
---

Here we will show all the modal options

*/
/*doc
---
title: Center modal
name: center modal
parent: modals
---

Here we will show the modal options

*/
.wbb-gallery-lightbox-modal {
  background-color: transparent; }
  .wbb-gallery-lightbox-modal.active:before {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    z-index: -1;
    height: 100vh;
    content: '';
    background-color: rgba(0, 0, 0, 0.8); }
  .wbb-gallery-lightbox-modal [class*="modal-close"]:before {
    top: 20px; }

.wbb-gallery-side-modal,
.wbb-gallery-lightbox-modal {
  overflow: inherit; }
  .wbb-gallery-side-modal .wbb-gallery-modal-element-gallery,
  .wbb-gallery-lightbox-modal .wbb-gallery-modal-element-gallery {
    overflow: hidden; }
  .wbb-gallery-side-modal [class*="modal-close"]:before,
  .wbb-gallery-side-modal [class*="left"]:before,
  .wbb-gallery-side-modal [class*="right"]:before,
  .wbb-gallery-lightbox-modal [class*="modal-close"]:before,
  .wbb-gallery-lightbox-modal [class*="left"]:before,
  .wbb-gallery-lightbox-modal [class*="right"]:before {
    position: absolute;
    font-family: "dashicons"; }
  .wbb-gallery-side-modal [class*="modal-close"]:before,
  .wbb-gallery-lightbox-modal [class*="modal-close"]:before {
    top: 10px;
    right: -10px;
    content: '\f335';
    font-size: 1em; }
  .wbb-gallery-side-modal [class*="left"],
  .wbb-gallery-side-modal [class*="right"],
  .wbb-gallery-lightbox-modal [class*="left"],
  .wbb-gallery-lightbox-modal [class*="right"] {
    background-color: transparent; }
    .wbb-gallery-side-modal [class*="left"]:before,
    .wbb-gallery-side-modal [class*="right"]:before,
    .wbb-gallery-lightbox-modal [class*="left"]:before,
    .wbb-gallery-lightbox-modal [class*="right"]:before {
      display: block;
      width: 1em;
      line-height: 1;
      height: 1em; }
    .wbb-gallery-side-modal [class*="left"]:hover,
    .wbb-gallery-side-modal [class*="right"]:hover,
    .wbb-gallery-lightbox-modal [class*="left"]:hover,
    .wbb-gallery-lightbox-modal [class*="right"]:hover {
      cursor: pointer; }
  .wbb-gallery-side-modal [class*="left"]:before,
  .wbb-gallery-lightbox-modal [class*="left"]:before {
    left: 0;
    content: '\f341'; }
  .wbb-gallery-side-modal [class*="right"]:before,
  .wbb-gallery-lightbox-modal [class*="right"]:before {
    right: 0;
    content: '\f345'; }

.wbb-gallery-modal-bottom {
  height: initial;
  padding: 20px; }
  .wbb-gallery-modal-bottom .caption {
    width: 90%; }
  .wbb-gallery-modal-bottom .counter {
    width: 10%;
    text-align: right; }

/*doc
---
title: Side modal
name: side modal
parent: modals
---

Here we will show all the modal options

*/
@media screen and (min-width: 320px) and (max-width: 480px) {
  .wbb-background-side-modal {
    display: none; } }
.comments {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto; }
  .comments::after {
    clear: both;
    content: "";
    display: block; }
  .comments button {
    margin-bottom: 16px; }

.accordion-tabs-minimal {
  clear: both;
  line-height: 1.5;
  padding: 0;
  margin: 0; }
  .accordion-tabs-minimal::after {
    clear: both;
    content: "";
    display: block; }
  @media screen and (min-width: 768px) {
    .accordion-tabs-minimal li:first-child:nth-last-child(1) a,
    .accordion-tabs-minimal li:first-child:nth-last-child(1) ~ li a {
      width: calc(100% / 1); } }
  @media screen and (min-width: 768px) {
    .accordion-tabs-minimal li:first-child:nth-last-child(2) a,
    .accordion-tabs-minimal li:first-child:nth-last-child(2) ~ li a {
      width: calc(100% / 2); } }
  @media screen and (min-width: 768px) {
    .accordion-tabs-minimal li:first-child:nth-last-child(3) a,
    .accordion-tabs-minimal li:first-child:nth-last-child(3) ~ li a {
      width: calc(100% / 3); } }
  @media screen and (min-width: 768px) {
    .accordion-tabs-minimal li:first-child:nth-last-child(4) a,
    .accordion-tabs-minimal li:first-child:nth-last-child(4) ~ li a {
      width: calc(100% / 4); } }
  @media screen and (min-width: 768px) {
    .accordion-tabs-minimal li:first-child:nth-last-child(5) a,
    .accordion-tabs-minimal li:first-child:nth-last-child(5) ~ li a {
      width: calc(100% / 5); } }
  @media screen and (min-width: 768px) {
    .accordion-tabs-minimal li:first-child:nth-last-child(6) a,
    .accordion-tabs-minimal li:first-child:nth-last-child(6) ~ li a {
      width: calc(100% / 6); } }
  @media screen and (min-width: 768px) {
    .accordion-tabs-minimal li:first-child:nth-last-child(7) a,
    .accordion-tabs-minimal li:first-child:nth-last-child(7) ~ li a {
      width: calc(100% / 7); } }
  @media screen and (min-width: 768px) {
    .accordion-tabs-minimal li:first-child:nth-last-child(8) a,
    .accordion-tabs-minimal li:first-child:nth-last-child(8) ~ li a {
      width: calc(100% / 8); } }
  @media screen and (min-width: 768px) {
    .accordion-tabs-minimal li:first-child:nth-last-child(9) a,
    .accordion-tabs-minimal li:first-child:nth-last-child(9) ~ li a {
      width: calc(100% / 9); } }
  @media screen and (min-width: 768px) {
    .accordion-tabs-minimal li:first-child:nth-last-child(10) a,
    .accordion-tabs-minimal li:first-child:nth-last-child(10) ~ li a {
      width: calc(100% / 10); } }
  .accordion-tabs-minimal .tab-header-and-content {
    list-style: none;
    margin-bottom: 0; }
    @media screen and (min-width: 40em) {
      .accordion-tabs-minimal .tab-header-and-content {
        display: inline;
        margin-left: -4px; } }
    @media screen and (min-width: 40em) {
      .accordion-tabs-minimal .tab-header-and-content:first-child {
        margin-left: 0; } }
    @media screen and (min-width: 768px) {
      .accordion-tabs-minimal .tab-header-and-content:last-child a {
        border-right: 1px solid #D51317; } }
  .accordion-tabs-minimal .tab-link {
    background-color: white;
    border-bottom: 1px solid #D51317;
    color: #D51317;
    display: block;
    line-height: 1.1;
    text-decoration: none;
    text-align: center;
    font-family: "MuseoSansRounded-300", sans-serif;
    font-size: 1.2rem;
    padding: 8px 0; }
    .accordion-tabs-minimal .tab-link .smaller-text {
      font-size: 0.8em; }
    @media screen and (min-width: 320px) {
      .accordion-tabs-minimal .tab-link {
        border-top: 0; } }
    @media screen and (min-width: 768px) {
      .accordion-tabs-minimal .tab-link {
        border-top: 1px solid #D51317;
        border-left: 1px solid #D51317; } }
    @media screen and (min-width: 40em) {
      .accordion-tabs-minimal .tab-link {
        display: inline-block; } }
    .accordion-tabs-minimal .tab-link:hover {
      color: #000; }
    .accordion-tabs-minimal .tab-link:focus {
      outline: none; }
    .accordion-tabs-minimal .tab-link.is-active {
      background-color: #D51317;
      color: white; }
      @media screen and (min-width: 40em) {
        .accordion-tabs-minimal .tab-link.is-active {
          border-bottom: 1px solid #D51317; } }
  .accordion-tabs-minimal .tab-content {
    display: none;
    padding: 1.5em 1.618em;
    width: 100%; }
    @media screen and (min-width: 40em) {
      .accordion-tabs-minimal .tab-content {
        float: left; } }
    .accordion-tabs-minimal .tab-content .tab-content-wrap {
      max-width: 1200px;
      position: relative;
      margin: 0 auto;
      padding: 16px; }
      @media screen and (min-width: 1024px) {
        .accordion-tabs-minimal .tab-content .tab-content-wrap {
          padding: 30px 0px; } }

.accordion-tabs-minimal .tab-link.is-active {
  position: relative; }
  @media screen and (min-width: 768px) {
    .accordion-tabs-minimal .tab-link.is-active:before {
      content: '';
      display: block;
      position: absolute;
      bottom: -9px;
      right: calc(50% - 10px);
      width: 15px;
      height: 15px;
      background: #D51317;
      border-right: 1px solid #D51317;
      border-bottom: 1px solid #D51317;
      -moz-transform: rotate(45deg);
      -webkit-transform: rotate(45deg); } }

.tab-content p {
  margin: 0 0 16px 0; }

.tab-content h3 {
  color: #D51317;
  font-size: 1.2em;
  font-family: "MuseoSansRounded-500", sans-serif; }

.tab-content img,
.tab-content ul,
.open-contracting-container {
  max-width: 900px;
  margin: 0 auto 16px !important;
  display: block; }

.tab-content ul.card-group {
  padding: 0; }

.tab-opportunities p {
  padding-bottom: 16px;
  border-bottom: 1px solid #ccc; }

.fact-label {
  width: 350px;
  display: inline-block; }

.fact-answer {
  background-color: #e6e6e6;
  display: inline-block;
  line-height: 25px;
  width: 50px;
  text-align: center; }

.tab-content .open-contracting-pdf {
  background-color: #e6e6e6;
  padding: 64px;
  display: block;
  float: left;
  width: 100%; }
  .tab-content .open-contracting-pdf a .download-label {
    color: #333333;
    text-decoration: none;
    font-size: 1.5em; }
  .tab-content .open-contracting-pdf a .download-label,
  .tab-content .open-contracting-pdf a .download-image {
    width: 50%;
    float: left; }

/*doc
---
title: Grid
name: grid
category: Sections - Grid
---

Grid types explanation goes here

Here we set the grid for cards and gallery images

*/
[data-width="full"] {
  width: 100%;
  clear: both; }

[data-width="wrapped"],
[data-width="boxed"] {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  clear: both; }
  [data-width="wrapped"]::after,
  [data-width="boxed"]::after {
    clear: both;
    content: "";
    display: block; }

ul.card-group,
ul.gallery {
  list-style-type: none; }
  @media screen and (min-width: 320px) {
    ul.card-group,
    ul.gallery {
      margin: 0;
      padding: 16px; } }
  @media screen and (min-width: 768px) {
    ul.card-group,
    ul.gallery {
      padding: 32px; } }
  ul.card-group:before, ul.card-group:after,
  ul.gallery:before,
  ul.gallery:after {
    display: block;
    content: '';
    clear: both; }

[data-grid-width="full"] {
  width: 100%; }

[data-grid-width="wrapped"],
[data-grid-width="boxed"] {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%; }
  [data-grid-width="wrapped"]::after,
  [data-grid-width="boxed"]::after {
    clear: both;
    content: "";
    display: block; }

/*doc
---
title: Block
name: block
parent: grid
---

### Card 4 Columns Block

```html_example
<ul class="card-group list-unstyled" data-columns="4" data-grid-type="block">
    <li>
      <div class="card">

        <div class="card-image">
          <a href="">
            <img src="http://lorempixel.com/400/300">
          </a>
        </div>

        <div class="card-content">

          <h3 class="card-title">Title</h3>

          <span class="card-meta">19 OCTOBER 2016</span>

          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet massa odio.
          Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
          </p>

        </div>

        <div class="card-button">
          <a href="#" class="button">Read more</a>
        </div>

      </div>
    </li>
    <li>
      <div class="card">

        <div class="card-image">
          <a href="">
            <img src="http://lorempixel.com/400/300">
          </a>
        </div>

        <div class="card-content">

          <h3 class="card-title">Title</h3>

          <span class="card-meta">19 OCTOBER 2016</span>

          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet massa odio.
          Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
          </p>

        </div>

        <div class="card-button">
          <a href="#" class="button">Read more</a>
        </div>

      </div>
    </li>
    <li>
      <div class="card">

        <div class="card-image">
          <a href="">
            <img src="http://lorempixel.com/400/300">
          </a>
        </div>

        <div class="card-content">

          <h3 class="card-title">Title</h3>

          <span class="card-meta">19 OCTOBER 2016</span>

          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet massa odio.
          Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
          </p>

        </div>

        <div class="card-button">
          <a href="#" class="button">Read more</a>
        </div>

      </div>
    </li>
    <li>
      <div class="card">

        <div class="card-image">
          <a href="">
            <img src="http://lorempixel.com/400/300">
          </a>
        </div>

        <div class="card-content">

          <h3 class="card-title">Title</h3>

          <span class="card-meta">19 OCTOBER 2016</span>

          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet massa odio.
          Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
          </p>

        </div>

        <div class="card-button">
          <a href="#" class="button">Read more</a>
        </div>

      </div>
    </li>
    <li>
      <div class="card">

        <div class="card-image">
          <a href="">
            <img src="http://lorempixel.com/400/300">
          </a>
        </div>

        <div class="card-content">

          <h3 class="card-title">Title</h3>

          <span class="card-meta">19 OCTOBER 2016</span>

          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet massa odio.
          Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
          </p>

        </div>

        <div class="card-button">
          <a href="#" class="button">Read more</a>
        </div>

      </div>
    </li>
    <li>
      <div class="card">

        <div class="card-image">
          <a href="">
            <img src="http://lorempixel.com/400/300">
          </a>
        </div>

        <div class="card-content">

          <h3 class="card-title">Title</h3>

          <span class="card-meta">19 OCTOBER 2016</span>

          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet massa odio.
          Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
          </p>

        </div>

        <div class="card-button">
          <a href="#" class="button">Read more</a>
        </div>

      </div>
    </li>
  </ul>

```
*/
@media screen and (min-width: 320px) {
  [data-grid-type="grid"][data-columns="2"] > li,
  [data-grid-type="grid"][data-columns="2"] > .card {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 100%; }
    [data-grid-type="grid"][data-columns="2"] > li:last-child,
    [data-grid-type="grid"][data-columns="2"] > .card:last-child {
      margin-right: 0; } }
@media screen and (min-width: 768px) {
  [data-grid-type="grid"][data-columns="2"] > li,
  [data-grid-type="grid"][data-columns="2"] > .card {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 48.8211739883%; }
    [data-grid-type="grid"][data-columns="2"] > li:last-child,
    [data-grid-type="grid"][data-columns="2"] > .card:last-child {
      margin-right: 0; }
    [data-grid-type="grid"][data-columns="2"] > li:nth-child(2n),
    [data-grid-type="grid"][data-columns="2"] > .card:nth-child(2n) {
      margin-right: 0; } }
@media screen and (min-width: 320px) {
  [data-grid-type="grid"][data-columns="3"] > li,
  [data-grid-type="grid"][data-columns="3"] > .card {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 100%; }
    [data-grid-type="grid"][data-columns="3"] > li:last-child,
    [data-grid-type="grid"][data-columns="3"] > .card:last-child {
      margin-right: 0; } }
@media screen and (min-width: 768px) and (max-width: 1024px) {
  [data-grid-type="grid"][data-columns="3"] > li,
  [data-grid-type="grid"][data-columns="3"] > .card {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 48.8211739883%; }
    [data-grid-type="grid"][data-columns="3"] > li:last-child,
    [data-grid-type="grid"][data-columns="3"] > .card:last-child {
      margin-right: 0; }
    [data-grid-type="grid"][data-columns="3"] > li:nth-child(2n),
    [data-grid-type="grid"][data-columns="3"] > .card:nth-child(2n) {
      margin-right: 0; }
    [data-grid-type="grid"][data-columns="3"] > li:nth-child(2n+1),
    [data-grid-type="grid"][data-columns="3"] > .card:nth-child(2n+1) {
      clear: left; } }
@media screen and (min-width: 1024px) {
  [data-grid-type="grid"][data-columns="3"] > li,
  [data-grid-type="grid"][data-columns="3"] > .card {
    float: left;
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 31.7615653177%; }
    [data-grid-type="grid"][data-columns="3"] > li:last-child,
    [data-grid-type="grid"][data-columns="3"] > .card:last-child {
      margin-right: 0; }
    [data-grid-type="grid"][data-columns="3"] > li:nth-child(3n),
    [data-grid-type="grid"][data-columns="3"] > .card:nth-child(3n) {
      margin-right: 0; }
    [data-grid-type="grid"][data-columns="3"] > li:nth-child(3n+1),
    [data-grid-type="grid"][data-columns="3"] > .card:nth-child(3n+1) {
      clear: left; } }
@media screen and (min-width: 320px) {
  [data-grid-type="grid"][data-columns="4"] > li,
  [data-grid-type="grid"][data-columns="4"] > .card {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 100%; }
    [data-grid-type="grid"][data-columns="4"] > li:last-child,
    [data-grid-type="grid"][data-columns="4"] > .card:last-child {
      margin-right: 0; } }
@media screen and (min-width: 768px) and (max-width: 1024px) {
  [data-grid-type="grid"][data-columns="4"] > li,
  [data-grid-type="grid"][data-columns="4"] > .card {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 48.8211739883%; }
    [data-grid-type="grid"][data-columns="4"] > li:last-child,
    [data-grid-type="grid"][data-columns="4"] > .card:last-child {
      margin-right: 0; }
    [data-grid-type="grid"][data-columns="4"] > li:nth-child(2n),
    [data-grid-type="grid"][data-columns="4"] > .card:nth-child(2n) {
      margin-right: 0; }
    [data-grid-type="grid"][data-columns="4"] > li:nth-child(2n+1),
    [data-grid-type="grid"][data-columns="4"] > .card:nth-child(2n+1) {
      clear: left; } }
@media screen and (min-width: 1024px) {
  [data-grid-type="grid"][data-columns="4"] > li,
  [data-grid-type="grid"][data-columns="4"] > .card {
    float: left;
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 23.2317609825%; }
    [data-grid-type="grid"][data-columns="4"] > li:last-child,
    [data-grid-type="grid"][data-columns="4"] > .card:last-child {
      margin-right: 0; }
    [data-grid-type="grid"][data-columns="4"] > li:nth-child(4n),
    [data-grid-type="grid"][data-columns="4"] > .card:nth-child(4n) {
      margin-right: 0; }
    [data-grid-type="grid"][data-columns="4"] > li:nth-child(4n+1),
    [data-grid-type="grid"][data-columns="4"] > .card:nth-child(4n+1) {
      clear: left; } }
@media screen and (min-width: 320px) {
  [data-grid-type="grid"][data-columns="5"] > li,
  [data-grid-type="grid"][data-columns="5"] > .card {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 100%; }
    [data-grid-type="grid"][data-columns="5"] > li:last-child,
    [data-grid-type="grid"][data-columns="5"] > .card:last-child {
      margin-right: 0; } }
@media screen and (min-width: 768px) and (max-width: 1024px) {
  [data-grid-type="grid"][data-columns="5"] > li,
  [data-grid-type="grid"][data-columns="5"] > .card {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 48.8211739883%; }
    [data-grid-type="grid"][data-columns="5"] > li:last-child,
    [data-grid-type="grid"][data-columns="5"] > .card:last-child {
      margin-right: 0; }
    [data-grid-type="grid"][data-columns="5"] > li:nth-child(2n),
    [data-grid-type="grid"][data-columns="5"] > .card:nth-child(2n) {
      margin-right: 0; }
    [data-grid-type="grid"][data-columns="5"] > li:nth-child(2n+1),
    [data-grid-type="grid"][data-columns="5"] > .card:nth-child(2n+1) {
      clear: left; } }
@media screen and (min-width: 1024px) {
  [data-grid-type="grid"][data-columns="5"] > li,
  [data-grid-type="grid"][data-columns="5"] > .card {
    float: left;
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 18.1138783813%; }
    [data-grid-type="grid"][data-columns="5"] > li:last-child,
    [data-grid-type="grid"][data-columns="5"] > .card:last-child {
      margin-right: 0; }
    [data-grid-type="grid"][data-columns="5"] > li:nth-child(5n),
    [data-grid-type="grid"][data-columns="5"] > .card:nth-child(5n) {
      margin-right: 0; }
    [data-grid-type="grid"][data-columns="5"] > li:nth-child(5n+1),
    [data-grid-type="grid"][data-columns="5"] > .card:nth-child(5n+1) {
      clear: left; } }
@media screen and (min-width: 320px) {
  [data-grid-type="grid"][data-columns="6"] > li,
  [data-grid-type="grid"][data-columns="6"] > .card {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 100%; }
    [data-grid-type="grid"][data-columns="6"] > li:last-child,
    [data-grid-type="grid"][data-columns="6"] > .card:last-child {
      margin-right: 0; } }
@media screen and (min-width: 768px) and (max-width: 1024px) {
  [data-grid-type="grid"][data-columns="6"] > li,
  [data-grid-type="grid"][data-columns="6"] > .card {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 48.8211739883%; }
    [data-grid-type="grid"][data-columns="6"] > li:last-child,
    [data-grid-type="grid"][data-columns="6"] > .card:last-child {
      margin-right: 0; }
    [data-grid-type="grid"][data-columns="6"] > li:nth-child(2n),
    [data-grid-type="grid"][data-columns="6"] > .card:nth-child(2n) {
      margin-right: 0; }
    [data-grid-type="grid"][data-columns="6"] > li:nth-child(2n+1),
    [data-grid-type="grid"][data-columns="6"] > .card:nth-child(2n+1) {
      clear: left; } }
@media screen and (min-width: 1024px) {
  [data-grid-type="grid"][data-columns="6"] > li,
  [data-grid-type="grid"][data-columns="6"] > .card {
    float: left;
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 14.7019566472%; }
    [data-grid-type="grid"][data-columns="6"] > li:last-child,
    [data-grid-type="grid"][data-columns="6"] > .card:last-child {
      margin-right: 0; }
    [data-grid-type="grid"][data-columns="6"] > li:nth-child(6n),
    [data-grid-type="grid"][data-columns="6"] > .card:nth-child(6n) {
      margin-right: 0; }
    [data-grid-type="grid"][data-columns="6"] > li:nth-child(6n+1),
    [data-grid-type="grid"][data-columns="6"] > .card:nth-child(6n+1) {
      clear: left; } }
[data-grid-type="grid"][data-grid-gutter="none"] {
  display: table;
  width: 100%;
  table-layout: fixed; }
  [data-grid-type="grid"][data-grid-gutter="none"][data-columns="1"] > li {
    width: calc(100% / 1); }
  [data-grid-type="grid"][data-grid-gutter="none"][data-columns="2"] > li {
    width: calc(100% / 2); }
  [data-grid-type="grid"][data-grid-gutter="none"][data-columns="3"] > li {
    width: calc(100% / 3); }
  [data-grid-type="grid"][data-grid-gutter="none"][data-columns="4"] > li {
    width: calc(100% / 4); }
  [data-grid-type="grid"][data-grid-gutter="none"][data-columns="5"] > li {
    width: calc(100% / 5); }
  [data-grid-type="grid"][data-grid-gutter="none"][data-columns="6"] > li {
    width: calc(100% / 6); }
  [data-grid-type="grid"][data-grid-gutter="none"] > li {
    margin-right: 0;
    margin-bottom: 0; }

.card-group > li,
.card-group > .card,
.gallery > li,
.gallery > .card {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat; }
  @media screen and (min-width: 320px) {
    .card-group > li,
    .card-group > .card,
    .gallery > li,
    .gallery > .card {
      margin: 0 0 1.5em 0; } }
  @media screen and (min-width: 768px) {
    .card-group > li,
    .card-group > .card,
    .gallery > li,
    .gallery > .card {
      margin: 0 16px 1.5em 0; } }
  .card-group > li:last-child,
  .card-group > .card:last-child,
  .gallery > li:last-child,
  .gallery > .card:last-child {
    margin-right: 0;
    clear: right; }

/*doc
---
title: Flex
name: flex
parent: grid
---


### Card 4 Columns Flex as a List

```html_example
<ul class="card-group list-unstyled" data-columns="4" data-grid-type="flex">
    <li>
      <div class="card">

        <div class="card-image">
          <a href="">
            <img src="http://lorempixel.com/400/300">
          </a>
        </div>

        <div class="card-content">

          <h3 class="card-title">Title</h3>

          <span class="card-meta">19 OCTOBER 2016</span>

          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet massa odio.
          Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
          </p>

        </div>

        <div class="card-button">
          <a href="#" class="button">Read more</a>
        </div>

      </div>
    </li>
    <li>
      <div class="card">

        <div class="card-image">
          <a href="">
            <img src="http://lorempixel.com/400/300">
          </a>
        </div>

        <div class="card-content">

          <h3 class="card-title">Title</h3>

          <span class="card-meta">19 OCTOBER 2016</span>

          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet massa odio.
          Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
          </p>

        </div>

        <div class="card-button">
          <a href="#" class="button">Read more</a>
        </div>

      </div>
    </li>
    <li>
      <div class="card">

        <div class="card-image">
          <a href="">
            <img src="http://lorempixel.com/400/300">
          </a>
        </div>

        <div class="card-content">

          <h3 class="card-title">Title</h3>

          <span class="card-meta">19 OCTOBER 2016</span>

          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet massa odio.
          Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
          </p>

        </div>

        <div class="card-button">
          <a href="#" class="button">Read more</a>
        </div>

      </div>
    </li>
    <li>
      <div class="card">

        <div class="card-image">
          <a href="">
            <img src="http://lorempixel.com/400/300">
          </a>
        </div>

        <div class="card-content">

          <h3 class="card-title">Title</h3>

          <span class="card-meta">19 OCTOBER 2016</span>

          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet massa odio.
          Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
          </p>

        </div>

        <div class="card-button">
          <a href="#" class="button">Read more</a>
        </div>

      </div>
    </li>
    <li>
      <div class="card">

        <div class="card-image">
          <a href="">
            <img src="http://lorempixel.com/400/300">
          </a>
        </div>

        <div class="card-content">

          <h3 class="card-title">Title</h3>

          <span class="card-meta">19 OCTOBER 2016</span>

          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet massa odio.
          Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
          </p>

        </div>

        <div class="card-button">
          <a href="#" class="button">Read more</a>
        </div>

      </div>
    </li>
    <li>
      <div class="card">

        <div class="card-image">
          <a href="">
            <img src="http://lorempixel.com/400/300">
          </a>
        </div>

        <div class="card-content">

          <h3 class="card-title">Title</h3>

          <span class="card-meta">19 OCTOBER 2016</span>

          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet massa odio.
          Pellentesque habitant morbi tristique senectus et netus et malesuada fames.
          </p>

        </div>

        <div class="card-button">
          <a href="#" class="button">Read more</a>
        </div>

      </div>
    </li>
  </ul>

```
*/
[data-grid-type="flex"] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: auto; }
  [data-grid-type="flex"] > li,
  [data-grid-type="flex"] > .card {
    flex-grow: 1; }
  [data-grid-type="flex"][data-columns="2"] li,
  [data-grid-type="flex"][data-columns="2"] > .card {
    flex-basis: 25em; }
  [data-grid-type="flex"][data-columns="3"] li,
  [data-grid-type="flex"][data-columns="3"] > .card {
    flex-basis: 19em; }
  [data-grid-type="flex"][data-columns="4"] li,
  [data-grid-type="flex"][data-columns="4"] > .card {
    flex-basis: 15em; }
  [data-grid-type="flex"][data-columns="5"] li,
  [data-grid-type="flex"][data-columns="5"] > .card {
    flex-basis: 12em; }
  [data-grid-type="flex"][data-columns="6"] li,
  [data-grid-type="flex"][data-columns="6"] > .card {
    flex-basis: 11em; }

/*doc
---
title: Alternate
name: alternate
parent: grid
---


*/
[data-grid-type="alternate"] li {
  max-width: 900px;
  margin: 0 auto 0 0; }
  [data-grid-type="alternate"] li .card-image {
    float: left;
    margin: 0 32px 0 0; }
  [data-grid-type="alternate"] li:nth-of-type(even) .card-image {
    float: right;
    margin: 0 0 0 32px; }

.article-list li {
  margin-bottom: 64px; }

@media screen and (min-width: 320px) {
  .text-block [data-column-width="1"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 100%; }
    .text-block [data-column-width="1"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 768px) {
  .text-block [data-column-width="1"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 48.8211739883%; }
    .text-block [data-column-width="1"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 1024px) {
  .text-block [data-column-width="1"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 6.1721523119%; }
    .text-block [data-column-width="1"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 320px) {
  .text-block [data-column-width="2"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 100%; }
    .text-block [data-column-width="2"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 768px) {
  .text-block [data-column-width="2"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 48.8211739883%; }
    .text-block [data-column-width="2"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 1024px) {
  .text-block [data-column-width="2"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 14.7019566472%; }
    .text-block [data-column-width="2"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 320px) {
  .text-block [data-column-width="3"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 100%; }
    .text-block [data-column-width="3"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 768px) {
  .text-block [data-column-width="3"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 48.8211739883%; }
    .text-block [data-column-width="3"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 1024px) {
  .text-block [data-column-width="3"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 23.2317609825%; }
    .text-block [data-column-width="3"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 320px) {
  .text-block [data-column-width="4"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 100%; }
    .text-block [data-column-width="4"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 768px) {
  .text-block [data-column-width="4"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 48.8211739883%; }
    .text-block [data-column-width="4"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 1024px) {
  .text-block [data-column-width="4"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 31.7615653177%; }
    .text-block [data-column-width="4"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 320px) {
  .text-block [data-column-width="5"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 100%; }
    .text-block [data-column-width="5"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 768px) {
  .text-block [data-column-width="5"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 48.8211739883%; }
    .text-block [data-column-width="5"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 1024px) {
  .text-block [data-column-width="5"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 40.291369653%; }
    .text-block [data-column-width="5"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 320px) {
  .text-block [data-column-width="6"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 100%; }
    .text-block [data-column-width="6"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 768px) {
  .text-block [data-column-width="6"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 48.8211739883%; }
    .text-block [data-column-width="6"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 1024px) {
  .text-block [data-column-width="6"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 48.8211739883%; }
    .text-block [data-column-width="6"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 320px) {
  .text-block [data-column-width="7"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 100%; }
    .text-block [data-column-width="7"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 768px) {
  .text-block [data-column-width="7"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 48.8211739883%; }
    .text-block [data-column-width="7"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 1024px) {
  .text-block [data-column-width="7"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 57.3509783236%; }
    .text-block [data-column-width="7"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 320px) {
  .text-block [data-column-width="8"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 100%; }
    .text-block [data-column-width="8"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 768px) {
  .text-block [data-column-width="8"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 48.8211739883%; }
    .text-block [data-column-width="8"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 1024px) {
  .text-block [data-column-width="8"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 65.8807826589%; }
    .text-block [data-column-width="8"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 320px) {
  .text-block [data-column-width="9"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 100%; }
    .text-block [data-column-width="9"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 768px) {
  .text-block [data-column-width="9"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 48.8211739883%; }
    .text-block [data-column-width="9"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 1024px) {
  .text-block [data-column-width="9"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 74.4105869942%; }
    .text-block [data-column-width="9"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 320px) {
  .text-block [data-column-width="10"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 100%; }
    .text-block [data-column-width="10"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 768px) {
  .text-block [data-column-width="10"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 48.8211739883%; }
    .text-block [data-column-width="10"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 1024px) {
  .text-block [data-column-width="10"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 82.9403913294%; }
    .text-block [data-column-width="10"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 320px) {
  .text-block [data-column-width="11"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 100%; }
    .text-block [data-column-width="11"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 768px) {
  .text-block [data-column-width="11"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 48.8211739883%; }
    .text-block [data-column-width="11"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 1024px) {
  .text-block [data-column-width="11"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 91.4701956647%; }
    .text-block [data-column-width="11"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 320px) {
  .text-block [data-column-width="12"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 100%; }
    .text-block [data-column-width="12"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 768px) {
  .text-block [data-column-width="12"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 48.8211739883%; }
    .text-block [data-column-width="12"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 1024px) {
  .text-block [data-column-width="12"] {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 100%; }
    .text-block [data-column-width="12"]:last-child {
      margin-right: 0; } }
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .text-block li:nth-child(even) {
    margin-right: 0; } }

.last-child {
  margin-right: 0 !important; }
  .last-child + li {
    clear: left !important; }

.labels-block {
  list-style-type: none;
  padding: 0; }
  @media screen and (min-width: 320px) {
    .labels-block {
      margin: 16px 0; } }
  @media screen and (min-width: 768px) {
    .labels-block {
      margin: 32px 0; } }
  .labels-block li {
    display: inline-block;
    margin-right: 16px;
    background-color: #D51317;
    color: white;
    padding: 8px 32px 8px 8px;
    position: relative;
    cursor: pointer; }
    .labels-block li:last-child {
      margin-right: 0; }

.wbb-filter-container {
  margin: 0;
  min-height: 500px; }

.filter-list-wrap {
  position: relative;
  max-width: 1350px;
  margin: 16px auto; }

.filter-list {
  z-index: 1000;
  padding: 0;
  list-style: none;
  -webkit-user-select: none;
  /* webkit (safari, chrome) browsers */
  -moz-user-select: none;
  /* mozilla browsers */
  -khtml-user-select: none;
  /* webkit (konqueror) browsers */
  -ms-user-select: none; }
  .filter-list > li:nth-child(3) {
    padding: 0;
    min-height: 45px; }

.filter-list li {
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 5px;
  min-height: 10px;
  background-color: white;
  color: black;
  font-weight: bold;
  text-align: center;
  cursor: pointer; }

.filter-dropdown li:first-child {
  color: #D51317;
  font-size: 1rem;
  padding: 5px 0 5px 16px; }

.filter-dropdown {
  padding: 0px; }

.filter-dropdown-li {
  display: inline-block;
  vertical-align: top;
  max-height: 40px;
  overflow: hidden;
  font-size: 0.8em;
  text-align: left;
  border: 1px solid black;
  transition: 0.25s linear; }

.filter-dropdown-li.active {
  max-height: 100%; }

.filter-dropdown li {
  display: block;
  background-image: url(https://energychangelab.org/wp-content/themes/hivos/assets/img/checkbox.png);
  background-repeat: no-repeat;
  background-position: left 3px;
  background-size: 20px;
  text-align: left;
  padding-left: 27px;
  vertical-align: middle; }

.filter-dropdown li:nth-child(1), .filter-dropdown li:nth-child(2) {
  background-image: none !important; }

.filter-dropdown li.active {
  background-color: white;
  color: #ce1719;
  background-image: url(https://energychangelab.org/wp-content/themes/hivos/assets/img/checkbox-active.png); }

/* GRID **************************************************  *  */
.filter-grid-container {
  max-width: 1350px; }
  @media screen and (min-width: 768px) {
    .filter-grid-container {
      padding-bottom: 64px; } }

@media screen and (min-width: 1024px) {
  .resources .filter-grid-item {
    width: 25%; } }

@media screen and (min-width: 320px) {
  .filter-grid-item {
    margin-bottom: 16px;
    vertical-align: top;
    width: 100%; } }
@media screen and (min-width: 768px) {
  .filter-grid-item {
    width: 33.33%;
    padding: 8px; } }
@media screen and (min-width: 1024px) {
  .filter-grid-item {
    width: 25%; } }

.filter-grid-item.pagination-block {
  height: 35px;
  width: 100%;
  bottom: -128px !important; }

@media screen and (min-width: 320px) {
  .filter-search {
    position: relative;
    display: inline-block;
    width: 100%; } }
@media screen and (min-width: 768px) {
  .filter-search {
    width: 321px;
    top: 32px;
    position: absolute;
    right: 8px; } }
@media screen and (min-width: 320px) {
  .filter-search input,
  .filter-search button {
    float: left;
    height: 40px;
    width: 100%;
    margin-bottom: 8px;
    border: 1px solid black;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; } }
@media screen and (min-width: 768px) {
  .filter-search input {
    width: 75%; } }
.filter-search button {
  border: 0;
  padding: 0; }
  @media screen and (min-width: 768px) {
    .filter-search button {
      width: 25%; } }

.stamp-filter-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 400px;
  border: 1px solid black; }

.wbb-filter-running-layer {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -10;
  background-color: white;
  transition: 0.25s linear;
  opacity: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 150px; }
  .wbb-filter-running-layer div {
    border: 5px solid transparent;
    border-top: 5px solid #D51317;
    border-radius: 200px;
    -webkit-animation: spin 2s infinite linear; }
  .wbb-filter-running-layer .first {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -50px;
    margin-top: -50px; }
  .wbb-filter-running-layer .second {
    width: 80px;
    height: 80px;
    margin: 10px; }
  .wbb-filter-running-layer .third {
    width: 60px;
    height: 60px;
    margin: 10px; }
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotateZ(0deg); }
  100% {
    -webkit-transform: rotateZ(360deg); } }
.wbb-filter-running-layer.active {
  z-index: 1100;
  opacity: 0.75; }

.tag-block span {
  position: absolute;
  width: 25px;
  height: 25px;
  z-index: 1;
  margin-top: 0;
  margin-left: 6px;
  opacity: 0.5; }

.amount-results {
  padding: 5px 0 8px;
  background-color: white;
  color: #D51317;
  width: 150px;
  font-weight: bold;
  border: 1px solid black;
  text-transform: uppercase; }

/* Medias */
@media only screen and (min-width: 320px) {
  .wbb-filter-container {
    padding: 10px 0 0 !important; }

  .filter-grid-container {
    margin: 32px auto 16px; }

  .filter-list {
    position: relative;
    margin: 0; }

  .filter-list-wrap {
    padding: 32px 8px; }

  .filter-dropdown-li {
    width: 100%;
    margin-right: 0; } }
@media only screen and (min-width: 768px) {
  .wbb-filter-container {
    padding: 0 0 80px !important; }

  .filter-grid-container {
    margin: 0 auto 32px; }

  .filter-list {
    position: absolute;
    margin: 0 !important;
    width: 75%; }

  .filter-dropdown-li {
    width: 250px;
    margin-right: 15px; } }
/*doc
---
title: Footer
name: footer
category: Sections - Footer
---

Site footer needs to be more dynamic and should be set in the wp-admin


For now we have two containers, one for logo and one for the other content.


*/
.site-footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0; }
  .site-footer .widget-container ul {
    list-style-type: none; }

.site-footer {
  min-height: 300px;
  height: 400px;
  width: 100%;
  background-color: #e6e6e6; }
  .site-footer .footer-block {
    float: left;
    padding: 0 32px;
    background-color: #e6e6e6; }
    @media screen and (min-width: 320px) {
      .site-footer .footer-block {
        width: 100%; } }
    @media screen and (min-width: 768px) {
      .site-footer .footer-block {
        width: 25%; } }
  .site-footer .logos-container {
    padding: 16px 32px; }
    .site-footer .logos-container ul {
      text-align: left; }

.footer-wrap {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto; }
  .footer-wrap::after {
    clear: both;
    content: "";
    display: block; }
  .footer-wrap > div {
    float: left;
    display: block;
    margin-right: 2.3576520234%;
    width: 31.7615653177%;
    background-color: transparent; }
    .footer-wrap > div:last-child {
      margin-right: 0; }
  .footer-wrap:before, .footer-wrap:after {
    display: block;
    clear: both;
    content: ''; }

.logos-container {
  width: 100%;
  display: inline-block; }
  .logos-container .logos-wrap {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto; }
    .logos-container .logos-wrap::after {
      clear: both;
      content: "";
      display: block; }
  .logos-container ul {
    list-style-type: none;
    padding: 0;
    text-align: right;
    vertical-align: top;
    display: inline-block;
    margin: 0; }
    .logos-container ul li {
      display: inline-block;
      margin-right: 16px; }
    .logos-container ul.footer-text {
      max-width: 600px; }
      .logos-container ul.footer-text p {
        margin: 0;
        padding-left: 80px;
        position: relative; }
        .logos-container ul.footer-text p:before {
          content: '';
          background-image: url(../img/cc.svg);
          width: 70px;
          height: 20px;
          background-size: contain;
          background-repeat: no-repeat;
          position: absolute;
          top: 0;
          left: 0; }
    .logos-container ul.disclaimer {
      float: right; }

/*doc
---
title: Site Headers
name: site-headers
category: Sections - Site-headers
---
*/
.site-header {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: transparent;
  z-index: 999;
  width: 100%; }
  .site-header[data-transparent="1"] {
    position: absolute;
    top: 0;
    background-color: transparent; }
  .site-header::after {
    clear: both;
    content: "";
    display: block; }
  .site-header .header-widgets {
    width: 100%; }

.site-header.wp-relative-header {
  position: relative; }

.site-header.wp-absolute-header {
  position: absolute; }
  .site-header.wp-absolute-header + .main-container {
    margin-top: 90px; }

.header-hivos {
  position: relative;
  background-color: white;
  min-height: 100px;
  z-index: 9999; }
  .header-hivos[data-background="overlay"] {
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    margin-top: 0; }
    @media screen and (min-width: 320px) {
      .header-hivos[data-background="overlay"] ~ .main-container {
        margin-top: 0; } }
    .header-hivos[data-background="overlay"] .header-left {
      padding-top: 16px; }
    .header-hivos[data-background="overlay"] .header-right {
      padding: 0 32px; }
    .header-hivos[data-background="overlay"] .site-navigation {
      background-color: transparent; }
  @media screen and (min-width: 320px) {
    .header-hivos .header-left,
    .header-hivos .header-right {
      padding: 0 32px;
      width: 100%;
      display: block; } }
  @media screen and (min-width: 768px) {
    .header-hivos .header-left,
    .header-hivos .header-right {
      float: left; } }
  @media screen and (min-width: 320px) {
    .header-hivos .header-left {
      padding-left: 128px;
      padding-top: 16px; } }
  @media screen and (min-width: 768px) {
    .header-hivos .header-left {
      position: relative;
      width: 75%; } }
  @media screen and (min-width: 1024px) {
    .header-hivos .header-left {
      padding-left: 32px; } }
  @media screen and (min-width: 320px) and (max-width: 480px) {
    .header-hivos .header-right {
      display: none; } }
  @media screen and (min-width: 768px) {
    .header-hivos .header-right {
      width: 25%; } }
  @media screen and (min-width: 320px) {
    .header-hivos .header-right .site-logo {
      width: 60%;
      margin: auto;
      text-align: center; } }
  @media screen and (min-width: 768px) {
    .header-hivos .header-right .site-logo {
      position: relative;
      z-index: 1;
      width: 100%;
      text-align: inherit; } }
  .header-hivos .header-navigation {
    padding: 0 32px;
    border-top: 1px solid #D51317;
    width: 100%;
    display: inline-block; }

/*doc
---
title: Site Header
name: site-header
category: Sections - Site-header
---

```html_example

<header class="site-header header-one">

    <h6 class="visuallyhidden">Header</h6>

    <section class="header-top">

        <div class="header-left">

                            <p class="site-description">Dé website over psychosegevoeligheid en de weg naar herstel</p>

        </div>

        <div class="header-right">

            <div class="socials">
	            <ul>
		            <li>
			            <i class="mdi mdi-email"></i>
		            </li>
		            <li>
			            <i class="mdi mdi-facebook"></i>
		            </li>
		            <li>
			            <i class="mdi mdi-twitter"></i>
		            </li>
		            <li>
			            <i class="mdi mdi-google-plus"></i>
		            </li>
		            <li>
			            <i class="mdi mdi-linkedin"></i>
		            </li>
	            </ul>
            </div>

        </div>

    </section>

    <section class="header-navigation">

        <div class="site-logo">

            <a href="http://psychosenet.local/" class="custom-logo-link" rel="home" itemprop="url"><img width="324" height="325" src="http://psychosenet.local/assets/2017/04/cropped-logo.jpg" class="custom-logo" alt="" itemprop="logo" srcset="http://psychosenet.local/assets/2017/04/cropped-logo.jpg 324w, http://psychosenet.local/assets/2017/04/cropped-logo-150x150.jpg 150w, http://psychosenet.local/assets/2017/04/cropped-logo-300x300.jpg 300w" sizes="(max-width: 324px) 100vw, 324px"></a>
        </div>

	    <nav class="site-navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement" role="navigation">

    <h3 class="hidden">Navigation</h3>


    <ul id="navigation-menu" class="navigation-menu show"><li class="home menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-4"><a href="/" itemprop="url">Home</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-13431"><a href="http://psychosenet.local/informatie/informatie/" itemprop="url">Diagnose</a>
<ul class="sub-menu">
	<li class="menu-item menu-item-type-post_type menu-item-object-tool menu-item-13678"><a href="http://psychosenet.local/tool/test-jezelf/" itemprop="url">Test jezelf</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-diagnose menu-item-13688"><a href="http://psychosenet.local/diagnose/manisch-depressief/" itemprop="url">Manisch-depressief</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-diagnose menu-item-13689"><a href="http://psychosenet.local/diagnose/psychose/" itemprop="url">Psychose</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-diagnose menu-item-13690"><a href="http://psychosenet.local/diagnose/wat-is-schizofrenie/" itemprop="url">Schizofrenie</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-behandeling menu-item-has-children menu-item-13672"><a href="http://psychosenet.local/behandeling/behandeling/" itemprop="url">Behandeling</a>
<ul class="sub-menu">
	<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13433"><a href="http://psychosenet.local/ervaringswerk/ervaringswerk/" itemprop="url">Ervaringswerk</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-behandeling menu-item-13674"><a href="http://psychosenet.local/behandeling/behandeling/crisis/" itemprop="url">Crisis</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-behandeling menu-item-13675"><a href="http://psychosenet.local/behandeling/behandeling/regulier/" itemprop="url">Reguliere behandelingen</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-behandeling menu-item-13676"><a href="http://psychosenet.local/behandeling/behandeling/alternatief/" itemprop="url">Alternatieve behandelingen</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-behandeling menu-item-13677"><a href="http://psychosenet.local/behandeling/behandeling/medicatie/" itemprop="url">Medicatie</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-13432"><a href="http://psychosenet.local/herstel/herstelplatform/" itemprop="url">Herstel</a>
<ul class="sub-menu">
	<li class="menu-item menu-item-type-post_type menu-item-object-herstel menu-item-13679"><a href="http://psychosenet.local/herstel/herstel/interviews-met-professionals/" itemprop="url">Interviews</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-herstel menu-item-13680"><a href="http://psychosenet.local/herstel/herstel/tools/" itemprop="url">Tools voor je herstel</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-herstel menu-item-13681"><a href="http://psychosenet.local/herstel/herstelwoordenboek/" itemprop="url">Herstelwoordenboek</a></li>
	<li class="menu-item menu-item-type-post_type menu-item-object-herstel menu-item-13682"><a href="http://psychosenet.local/herstel/psychose-en-herstel-tips/" itemprop="url">Psychose en herstel</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13435"><a href="http://psychosenet.local/informatie/naasten/" itemprop="url">Naasten</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13436"><a href="http://psychosenet.local/vragen/email-spreekuur-voor-vragen-over-psychose-manische-depressitiviteit-en-schizofrenie/" itemprop="url">E-mailspreekuur</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-13437"><a href="http://#" itemprop="url">Agenda</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-13438"><a href="http://psychosenet.local/blog/" itemprop="url">Blog</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14124"><a href="http://psychosenet.local/locations-search/" itemprop="url">Zorg in kaart</a></li>
</ul>

</nav>


    </section>


</header>

````


*/
.header-logo-left {
  flex-wrap: wrap;
  display: flex;
  background-color: white; }
  .header-logo-left .header-top,
  .header-logo-left .header-bottom {
    position: relative; }
    @media screen and (min-width: 768px) {
      .header-logo-left .header-top,
      .header-logo-left .header-bottom {
        display: flex; } }
  @media screen and (min-width: 768px) {
    .header-logo-left .header-top {
      padding: 16px; } }
  @media screen and (min-width: 320px) {
    .header-logo-left .header-left,
    .header-logo-left .header-right {
      flex-basis: 100%;
      padding: 0 16px; } }
  @media screen and (min-width: 768px) {
    .header-logo-left .header-left,
    .header-logo-left .header-right {
      padding: 0; } }
  @media screen and (min-width: 768px) {
    .header-logo-left .header-left {
      flex-basis: 15%;
      position: relative; } }
  @media screen and (min-width: 768px) {
    .header-logo-left .header-right {
      flex-basis: 85%; } }
  @media screen and (min-width: 768px) {
    .header-logo-left .header-tagline {
      flex: 2; } }
  @media screen and (min-width: 768px) {
    .header-logo-left .social {
      flex: 1; } }

.header-hivos.hamburguer-1 {
  position: sticky;
  top: 0;
  left: 0;
  background-color: transparent;
  max-width: 1200px;
  margin-top: -60px; }
  @media screen and (min-width: 320px) {
    .header-hivos.hamburguer-1 {
      margin-left: 26px; } }
  @media screen and (min-width: 768px) {
    .header-hivos.hamburguer-1 {
      margin-left: 42px; } }
  .header-hivos.hamburguer-1 .header-left {
    position: absolute;
    padding: 0 80px 32px; }
    .header-hivos.hamburguer-1 .header-left .site-logo a {
      display: inline-block; }
    .header-hivos.hamburguer-1 .header-left .site-logo img {
      height: 95px;
      width: auto;
      display: block; }

@media screen and (min-width: 320px) {
  .mobile-menu[data-hamburguer-wrap="boxed"] {
    margin-left: 16px;
    width: 60px; } }
@media screen and (min-width: 768px) {
  .mobile-menu[data-hamburguer-wrap="boxed"] {
    margin-left: 32px; } }

/*doc
---
title: Post content
name: post-content
category: Sections - Post-content
---



*/
/*doc

---
title: Post content default
name: post-content-default
parent: post-content
---

https://beta.typenugget.com/

*/
.entry-image {
  overflow: hidden; }
  @media screen and (min-width: 1024px) {
    .entry-image {
      height: 500px; } }

.entry-main {
  width: 100%;
  background-color: #D51317; }

[class*="single"] main,
[class*="page"] main {
  overflow: hidden; }
  [class*="single"] main .content-image,
  [class*="page"] main .content-image {
    width: 1140px;
    margin: 0 auto;
    height: 500px;
    overflow: hidden; }
    [class*="single"] main .content-image img,
    [class*="page"] main .content-image img {
      width: 100%; }
  [class*="single"] main [class^="wp-post-"],
  [class*="page"] main [class^="wp-post-"] {
    background-color: white;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding: 16px;
    top: -7px; }
    [class*="single"] main [class^="wp-post-"]::after,
    [class*="page"] main [class^="wp-post-"]::after {
      clear: both;
      content: "";
      display: block; }
    @media screen and (min-width: 1024px) {
      [class*="single"] main [class^="wp-post-"],
      [class*="page"] main [class^="wp-post-"] {
        padding: 80px 180px;
        top: -64px; } }
    [class*="single"] main [class^="wp-post-"] .entry-image,
    [class*="single"] main [class^="wp-post-"] .entry-header,
    [class*="single"] main [class^="wp-post-"] .entry-meta,
    [class*="single"] main [class^="wp-post-"] .gallery,
    [class*="single"] main [class^="wp-post-"] blockquote,
    [class*="single"] main [class^="wp-post-"] p, [class*="single"] main [class^="wp-post-"] h2, [class*="single"] main [class^="wp-post-"] h3, [class*="single"] main [class^="wp-post-"] h4, [class*="single"] main [class^="wp-post-"] h5, [class*="single"] main [class^="wp-post-"] h6,
    [class*="page"] main [class^="wp-post-"] .entry-image,
    [class*="page"] main [class^="wp-post-"] .entry-header,
    [class*="page"] main [class^="wp-post-"] .entry-meta,
    [class*="page"] main [class^="wp-post-"] .gallery,
    [class*="page"] main [class^="wp-post-"] blockquote,
    [class*="page"] main [class^="wp-post-"] p,
    [class*="page"] main [class^="wp-post-"] h2,
    [class*="page"] main [class^="wp-post-"] h3,
    [class*="page"] main [class^="wp-post-"] h4,
    [class*="page"] main [class^="wp-post-"] h5,
    [class*="page"] main [class^="wp-post-"] h6 {
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
      position: relative; }
      [class*="single"] main [class^="wp-post-"] .entry-image::after,
      [class*="single"] main [class^="wp-post-"] .entry-header::after,
      [class*="single"] main [class^="wp-post-"] .entry-meta::after,
      [class*="single"] main [class^="wp-post-"] .gallery::after,
      [class*="single"] main [class^="wp-post-"] blockquote::after,
      [class*="single"] main [class^="wp-post-"] p::after, [class*="single"] main [class^="wp-post-"] h2::after, [class*="single"] main [class^="wp-post-"] h3::after, [class*="single"] main [class^="wp-post-"] h4::after, [class*="single"] main [class^="wp-post-"] h5::after, [class*="single"] main [class^="wp-post-"] h6::after,
      [class*="page"] main [class^="wp-post-"] .entry-image::after,
      [class*="page"] main [class^="wp-post-"] .entry-header::after,
      [class*="page"] main [class^="wp-post-"] .entry-meta::after,
      [class*="page"] main [class^="wp-post-"] .gallery::after,
      [class*="page"] main [class^="wp-post-"] blockquote::after,
      [class*="page"] main [class^="wp-post-"] p::after,
      [class*="page"] main [class^="wp-post-"] h2::after,
      [class*="page"] main [class^="wp-post-"] h3::after,
      [class*="page"] main [class^="wp-post-"] h4::after,
      [class*="page"] main [class^="wp-post-"] h5::after,
      [class*="page"] main [class^="wp-post-"] h6::after {
        clear: both;
        content: "";
        display: block; }
[class*="single"] .featured-image,
[class*="page"] .featured-image {
  position: relative;
  height: 500px;
  width: calc(100vw - (100vw - 1400px));
  left: 50%;
  transform: translate(-50%, 0);
  overflow: hidden;
  margin-bottom: 16px; }
  [class*="single"] .featured-image img,
  [class*="page"] .featured-image img {
    max-width: none !important;
    width: 100%;
    object-fit: cover; }

[class*="template-country"] main [class^="wp-post"] {
  max-width: none;
  padding: 0;
  top: 0; }

.entry-image img {
  width: 100%;
  height: auto; }

.header-feature-image {
  width: 100%;
  overflow: hidden;
  background-color: #D51317;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; }
  @media screen and (min-width: 768px) {
    .header-feature-image[data-feature="empty"] {
      height: 100px; } }
  .header-feature-image .entry-title {
    position: absolute;
    top: 32px;
    left: 32px;
    border-bottom: 0; }
    .header-feature-image .entry-title span {
      background-color: #D51317;
      padding: 4px;
      box-shadow: 10px 0 0 #D51317, -10px 0 0 #D51317;
      color: white;
      font-size: 2.5rem; }

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.entry-content:before,
.entry-content:after {
  content: "";
  display: table;
  table-layout: fixed; }

.entry-content:after {
  clear: both; }

.entry-content {
  /*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
  /*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
  /* Make sure embeds and iframes fit their containers. */
  /*--------------------------------------------------------------
  ## Galleries
  --------------------------------------------------------------*/ }
  .entry-content figure {
    margin: 1em 0; }
  .entry-content .alignright {
    float: right;
    margin: 0 0 0 16px;
    display: inline; }
  .entry-content .alignleft {
    float: left;
    display: inline;
    margin: 0 16px 0 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto; }
    .entry-content .alignleft::after {
      clear: both;
      content: "";
      display: block; }
  .entry-content figure .aligncenter {
    display: block;
    margin: 16px auto 16px auto;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto; }
    .entry-content figure .aligncenter::after {
      clear: both;
      content: "";
      display: block; }
  .entry-content figure.alignnone {
    float: none;
    display: block;
    margin: 0 0 16px 0;
    width: 100% !important;
    height: auto !important; }
    .entry-content figure.alignnone.wp-caption {
      padding: 0 0 16px 0;
      margin: 5px 20px 20px 0; }
      .entry-content figure.alignnone.wp-caption .wp-caption-text {
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;
        margin: 0 auto; }
        .entry-content figure.alignnone.wp-caption .wp-caption-text::after {
          clear: both;
          content: "";
          display: block; }
  .entry-content .size-full {
    width: 100%;
    height: auto;
    margin: 0 0 16px 0; }
  .entry-content blockquote footer {
    display: block; }
  .entry-content blockquote cite {
    display: block;
    margin: 0.5em 0; }
  .entry-content .wp-caption {
    background-color: #cccccc;
    text-align: center;
    padding: 16px;
    margin: 16px;
    max-width: 100%; }
  .entry-content .wp-caption img[class*="wp-image-"] {
    display: block;
    margin-left: auto;
    margin-right: auto; }
  .entry-content .wp-caption .wp-caption-text {
    margin: 0.8075em 0; }
  .entry-content .wp-caption-text {
    text-align: center; }
  .entry-content .wp-caption.alignleft {
    margin: 8px 16px 16px 0; }
  .entry-content .wp-caption.alignright {
    margin: 8px 0 16px 16px; }
  .entry-content .page-content .wp-smiley,
  .entry-content .entry-content .wp-smiley,
  .entry-content .comment-content .wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0; }
  .entry-content embed,
  .entry-content iframe,
  .entry-content object {
    max-width: 100%; }
  .entry-content .gallery {
    margin: 0 auto 16px; }
  .entry-content .gallery-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    max-width: 100%; }
  .entry-content .gallery-columns-2 .gallery-item {
    max-width: 50%; }
  .entry-content .gallery-columns-3 .gallery-item {
    max-width: 33.33%; }
  .entry-content .gallery-columns-4 .gallery-item {
    max-width: 25%; }
  .entry-content .gallery-columns-5 .gallery-item {
    max-width: 20%; }
  .entry-content .gallery-columns-6 .gallery-item {
    max-width: 16.66%; }
  .entry-content .gallery-columns-7 .gallery-item {
    max-width: 14.28%; }
  .entry-content .gallery-columns-8 .gallery-item {
    max-width: 12.5%; }
  .entry-content .gallery-columns-9 .gallery-item {
    max-width: 11.11%; }
  .entry-content .gallery-caption {
    display: block; }

.openupcontracting [data-height="half"] {
  height: 508px;
  min-height: 460px; }
  @media screen and (min-width: 320px) and (max-width: 480px) {
    .openupcontracting [data-height="half"] {
      height: 250px;
      width: auto;
      min-height: 250px; } }

.page-template-country-template .header-feature-image {
  height: 300px;
  background-position: 0px 0px; }
.page-template-country-template .disclaimer {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  background-color: #e6e6e6;
  padding: 16px; }

/*doc
---
title: Overview
name: overview
category: Templates - overview
---
```html_example


*/
.entry-aside,
.article-list {
  margin-top: 160px; }

.article-list ul {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .article-list ul li {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 100%;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    background-color: white;
    box-shadow: 0 1px 2px rgba(107, 107, 107, 0.15);
    margin: 0 0 2em; }
    .article-list ul li img {
      width: 100%; }
    .article-list ul li .card-body {
      padding: 16px; }

/*doc
---
title: Wp-content
name: wp-content
category: Templates - wp-content
---
```html_example


*/
html {
  box-sizing: border-box; }

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

html,
body {
  height: 100%;
  margin: 0;
  background-color: #e6e6e6; }

.site-container {
  position: relative;
  min-height: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  background-color: white; }
  .site-container::after {
    clear: both;
    content: "";
    display: block; }

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