/**
 *  This is a file that defines what styles should be compiled into critical styles.
 *  Critical styles are styles that should be applied on the website always and
 *  there should be styles for elements that are visible on 1st render screen.
 *  We do this cause of google and mobile devices. When you supply a small file
 *  with stylesheets to apply on the 1st render, the rendering of the whole
 *  page is faster. Otherwise it has tons of styles to process (and in many cases
 *  completly not needed).
 */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh7USSwiPHA.ttf) format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6uyw4BMUTPHjx4wWw.ttf) format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwiPHA.ttf) format('truetype');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  src: url(https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh50XSwiPHA.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Mono';
  font-style: italic;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/spacemono/v14/i7dSIFZifjKcF5UAWdDRYERE_FeqHCSU.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/spacemono/v14/i7dPIFZifjKcF5UAWdDRYEF8QA.ttf) format('truetype');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/spacemono/v14/i7dMIFZifjKcF5UAWdDRaPpZUFWaGw.ttf) format('truetype');
}
/* Basic styles that will load first */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
}
ol,
ul {
  list-style: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
main {
  display: block;
}
/**
 *  A list of color variables
 *  e.g. the color of links, body copy,
 *  button colors, and more.
 *
 *  @colors.less
 */
/* Brand colors - from the Copernica palette*/
/* Typography colors */
/* Button colors */
/* Notice & error related colors */
/* Gray background color */
.colors .primary-color {
  background-color: #00426A;
}
.colors .secondary-color {
  background-color: #C8102E;
}
.colors .text-color {
  background-color: #52606D;
}
.colors .link-color {
  background-color: #007AC4;
}
.colors .succes-color {
  background-color: #51a14a;
}
.colors .feed-color {
  background-color: #ee8533;
}
.colors .error-color {
  background-color: #DB8E87;
}
.colors .notice-color {
  background-color: cornsilk;
}
.colors .notice-border-color {
  background-color: #ffeea9;
}
.colors .gray-bg-color {
  background-color: #f9f9f9;
}
.colors span {
  color: #f9f9f9;
}
.colors .row .column .row .column {
  padding: 1rem;
}
/*
 *
 * How to use the folowing classes (example) : 
 * 
 * div {
 *   padding: 2rem;
 *   
 *   .onTablet({
 *       padding: 1rem;
 *    });
 * }
 * 
 * @file Breakpoints.less
 *
 */
/**
 *  General styles of the websie
 *  Set the height of the html and body to 100%
 *  to position the footer to the bottom of the page
 */
html {
  min-height: 100vh;
  scroll-behavior: smooth;
}
body {
  background: #fff;
  position: relative;
}
hr {
  border: none;
  height: 1px;
  background-color: #f9f9f9;
}
pre {
  background-color: #f5f2f0;
  border: 1px solid #ddd;
  font-size: 13px;
  line-height: 19px;
  overflow: auto;
  padding: 1rem;
  border-radius: 4px;
  margin: 1rem 0;
}
pre,
code {
  overflow: auto;
  white-space: pre-wrap;
}
img {
  max-width: 100%;
  height: auto;
}
ol,
ul {
  padding-left: 2rem;
}
ul li {
  list-style: outside;
}
ol li {
  list-style: decimal;
}
.no-scroll {
  overflow: hidden;
}
@media screen and (min-width: 50rem) {
  .content {
    min-height: 22rem;
  }
}
/*
 * The basic layout of the pages.
 * It contains just a few elements:
 * a container
 * rows
 * columns
 *
 * At the bottom of this file you can also find some helper classes
 *
 * How can you use it:
 * <div class="container">
    <div class="row">
        <div class="column">
        <div class="column">
        <div class="column">
        <div class="column">
    </div
  </div>
 *
 */
.container {
  margin: 0 auto;
  max-width: 70em;
  /* 1120px */
  position: relative;
  /**
     *  This is an odd one. Someone was complaining that rendering text too
     *  close to the screen edge on a mobile device is not good. Cause of that
     *  we have to use this suboptimal use of space and add additional spacing
     *  when below 72rem (that will force it to be max 70rem + 1em to the left
     *  and +1em to the right).
     */
  /**
     *  This is a special case for the container where it has a sidebar inside
     *  that should be rendered as sidebar. This layout allows to create a standard
     *  sidebar-content layout.
     */
}
@media (max-width: 72.5em) {
  .container {
    max-width: calc(100vw - 3em);
  }
}
.container.container-tight {
  max-width: 50rem;
}
.container.container-withsidebar {
  display: flex;
  flex-direction: row;
  /**
         *  When on mobile we want to make sure that the layout will adjust properly.
         *  From 2 column design we should go into one big list design.
         */
}
.container.container-withsidebar > * {
  /**
             *  For MS we want to specify the basis of the flex item. Why?
             *  Cause for some arcane reasons if we don't do that, it will
             *  get the width of the parent + the sidebar. Bites me why it
             *  happens. Seems that auto basis is not suppoerted very well.
             */
  flex-basis: 54rem;
  flex-grow: 1;
}
.container.container-withsidebar > aside,
.container.container-withsidebar > .sidebar {
  flex-basis: 16rem;
  flex-grow: 0;
  flex-shrink: 0;
}
.container.container-withsidebar > aside + *,
.container.container-withsidebar > .sidebar + * {
  margin-left: 1rem;
  flex-basis: 50rem;
}
.container.container-withsidebar > * + aside,
.container.container-withsidebar > * + .sidebar {
  margin-left: 1rem;
}
@media screen and (max-width: 50rem) {
  .container.container-withsidebar {
    flex-direction: column;
  }
  .container.container-withsidebar > aside,
  .container.container-withsidebar > .sidebar {
    flex-basis: auto;
  }
  .container.container-withsidebar > aside + *,
  .container.container-withsidebar > .sidebar + * {
    margin-left: unset;
  }
}
.row {
  display: flex;
  flex-direction: row;
  /*
     * Align items
     *
     * By default, flex items will all try to fit onto one line
     * and start at the biginning. By using flex-wrap: wrap we
     * allow them to wrap onto multiple lines,
     * from the top to the bottom.
     *
     * but you have options:
     * .reverse
     *
     * .flex-end
     * .center
     * .space-between
     * .space-around
     * .space-evenly
     */
  flex-wrap: wrap;
  justify-content: flex-start;
  /*
     * Some classes that you can apply to the flex container row
     * row-gutters : it adds some spacing around the columns
     *
     * Use these classes to the flex container(row) to align the columns as you wish:
     * row-top
     * row-bottom
     * row-center
     */
  /* These classes define the size of the columns
     * For example row-1of3 means that the row will be splitted in 3 and
     * each column will have the size of 1/3. They will nor grow or shrink.
     *
     * To achieve different behavior in different screen sizes you can add the
     * special classes that you can find below in this file
     * For example : <div class="row-1of3 small-row1of2"> means that
     * the columns will have the size of 33% (1of3) ,
     * but in small screen size will have the size of 50% (1of2)
     *
     */
  /* Here are some classes that you can use for different screen sizes
     * So how do you want your columns to behave?
     * First part of the class define the size of the screen : small / large
     * The second is the container : row
     * The third part defines the size of the columns: full / 1of2 etc..
     *
     * For example : small-row-1of3 means that in a SMALL screen size
     * the ROW will be splitted in 3, each column will have the size of 1/3
     */
}
.row.reverse {
  flex-wrap: wrap-reverse;
}
.row.flex-end {
  justify-content: flex-end;
}
.row.center {
  justify-content: center;
}
.row.space-between {
  justify-content: space-between;
}
.row.space-around {
  justify-content: space-around;
}
.row.space-evenly {
  justify-content: space-evenly;
}
.row.row-gutters > .column {
  padding: 1rem;
}
@media screen and (min-width: 50rem) {
  .row.row-gutters > .column:last-child {
    padding-right: 0;
  }
  .row.row-gutters > .column:first-child {
    padding-left: 0;
  }
}
@media screen and (max-width: 50rem) {
  .row.row-gutters > .column {
    padding: 1rem 0;
  }
}
.row.row-top {
  align-items: flex-start;
}
.row.row-bottom {
  align-items: flex-end;
}
.row.row-center,
.row.center {
  align-items: center;
  justify-content: center;
}
.row.row-fit > .column {
  flex: 1;
}
.row.row-full > .column {
  flex: 0 0 100%;
}
.row.row-top {
  align-items: flex-start;
}
.row.row-bottom {
  align-items: flex-end;
}
.row.row-center,
.row.center {
  align-items: center;
  justify-content: center;
}
.row.row-1of2 > .column {
  flex: 0 0 50%;
}
.row.row-1of3 > .column {
  flex: 0 0 33%;
}
.row.row-1of4 > .column {
  flex: 0 0 25%;
}
.row .column.gray-bg {
  background-color: #f9f9f9;
}
@media screen and (max-width: 50rem) {
  .row .column:not(.mobile) {
    min-width: 100%;
  }
}
@media screen and (min-width: 50rem) {
  .row .column.three-quarters {
    flex: 0 0 75%;
  }
  .row .column.two-thirds {
    flex: 0 0 66%;
  }
  .row .column.half {
    flex: 0 0 50%;
  }
  .row .column.third {
    flex: 0 0 33%;
  }
  .row .column.quarter {
    flex: 0 0 25%;
  }
}
.row .column .content.red-bg {
  background-color: #ffcccc;
}
@media screen and (max-width: 50rem) {
  .row.small-row-fit > .column {
    flex: 1;
  }
  .row.small-row-full > .column {
    flex: 0 0 100%;
  }
  .row.small-row-1of2 > .column {
    flex: 0 0 50%;
  }
  .row.small-row-1of3 > .column {
    flex: 0 0 33%;
  }
  .row.small-row-1of4 > .column {
    flex: 0 0 25%;
  }
}
@media screen and (min-width: 50rem) {
  .row.large-row-fit > .column {
    flex: 1;
  }
  .row.large-row-full > .column {
    flex: 0 0 100%;
  }
  .row.large-row-1of2 > .column {
    flex: 0 0 50%;
  }
  .row.large-row-1of3 > .column {
    flex: 0 0 33%;
  }
  .row.large-row-1of4 > .column {
    flex: 0 0 25%;
  }
}
.row > .column {
  box-sizing: border-box;
  flex: 1 1 0px;
  max-width: 100%;
}
.row > .column.column-top {
  align-self: flex-start;
}
.row > .column.column-bottom {
  align-self: flex-end;
}
.row > .column.column-center {
  align-self: center;
}
/**
 *  Helper classes
 */
.text--center {
  text-align: center;
}
.text--intro {
  font-size: 1.2em;
  font-weight: 300;
}
.gutter-bottom {
  margin-bottom: 2rem;
}
.gutter-top {
  margin-top: 2rem ;
}
.limited-width {
  padding: 1rem;
  max-width: 50rem;
}
.centered {
  margin: 0 auto;
}
/*
 * Grid layout
 */
.grid {
  width: 100%;
  display: grid;
  /**
     *  This class allows to set a default gap between cells
     */
  /**
     *  This class allows to create a 2 columns grid layout.
     */
}
.grid.grid-spaced {
  grid-gap: 1rem;
}
.grid.grid-2-columns {
  grid-template-columns: repeat(2, minmax(400px, 1fr));
}
@media screen and (min-width: 50rem) and (max-width: 70rem) {
  .grid.tablet-grid-1-column {
    grid-template-columns: 1fr;
  }
}
@media screen and (max-width: 50rem) {
  .grid.tablet-grid-1-column {
    grid-template-columns: 1fr;
  }
}
.grid .example-red {
  color: white;
  padding: 1rem;
  background-color: #C8102E;
}
/*
 *
 * @file typography.less
 *
 */
/**
 *  Basic styling/typography
 *  Measures are based in ems. So 1em is equal to 16px.
 */
body {
  font-family: 'Lato', sans-serif;
  line-height: 1.8;
  color: #52606D;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 1rem 0 0.6rem;
}
h1,
h2,
h3,
h4,
h1 a,
h2 a,
h3 a,
h4 a {
  color: #C8102E;
}
h1 {
  font-size: 2em;
}
@media only screen and (max-width: 30em) {
  h1 {
    font-size: 1.7em;
  }
}
h2 {
  font-size: 1.5em;
  /* 24px */
  font-weight: normal;
  /*font-weight: 700;*/
  margin-bottom: 0.625rem;
  /*color: #52606d;*/
}
h3 {
  font-size: 1.2em;
  /* 19px */
  font-weight: 400;
}
h4 {
  font-size: 1em;
  color: #00426A;
}
p,
ul,
ol {
  margin-bottom: 1rem;
}
a {
  color: #007AC4;
  text-decoration: none;
}
a:focus {
  outline: none;
}
a::-moz-focus-inner {
  border: 0;
}
/**
 *  This is a class that should be used when there is a section of the page that
 *  need to be highlighted. This class should be used on a block element that
 *  has content inside.
 *
 *  @author     Paweł Kuźnik <pawel.kuznik@copernica.com>
 *  @file       highlight.less
 */
.highlight-box {
  border: 1px solid #f1f1f1;
  background: #fff;
  margin-bottom: 1rem;
  padding: 1em;
  text-align: left;
}
.highlight-box .highlight-box-image {
  float: left;
  max-width: 4rem;
  max-height: 4rem;
}
.highlight-box .highlight-box-image ~ * {
  margin-left: 5rem;
}
.highlight-box::after {
  content: '';
  display: block;
  clear: both;
}
.highlight-box.small {
  padding: 0.3rem;
  border: none;
}
.highlight-box.small p {
  margin-bottom: 0;
}
.highlight-box.colored {
  background: #f9f9f9;
}
/**
 *  These are styles defining btn class and button element. For any kind of
 *  use they should look and behave (visually) the same.
 *
 *  button element and .btn class can have number additional classes attached
 *  to them. These classes modify the button appearance and behavior and match
 *  it with the intended use:
 *
 *  btn-create          This class should be used when there is a button that will
 *                      create something.
 *
 *  btn-download        This class should be used when there is a button that will
 *                      cause a download of something.
 *
 *  btn-calltoaction    This class should be used on a primary call to action of
 *                      the page. It will be a very prominent style.
 *
 *  btn-feed            This class should be use to depict a feed of some sort.
 *
 *  btn-primary         A button with primary brand color.
 *
 *  btn-secondary       A button with secondary brand color.
 *
 *  @author     Paweł Kuźnik <pawel.kuznik@copernica.com>
 *  @file       btn.less
 */
.btn,
button {
  display: inline-block;
  line-height: 1;
  padding: 0.7rem 1rem;
  font-size: 1em;
  color: #52606D;
  background-color: #f9f9f9;
  font-family: 'Lato', sans-serif;
  border-radius: 0.25em;
  text-decoration: none;
  border: none;
  position: relative;
  transition: opacity 0.4s;
  cursor: pointer;
}
.btn:hover,
button:hover {
  opacity: 0.9;
}
.btn.btn-primary,
button.btn-primary,
.btn.btn-submit,
button.btn-submit {
  color: #fff;
  background-color: #00426A;
}
.btn.btn-secondary,
button.btn-secondary {
  color: #fff;
  background-color: #C8102E;
}
.btn.btn-calltoaction,
button.btn-calltoaction {
  background: #C8102E;
  color: white;
  font-weight: bold;
  font-size: 1.1rem;
  padding: 1rem;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
  transition: opacity 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.btn.btn-calltoaction:hover,
button.btn-calltoaction:hover {
  box-shadow: none;
}
.btn.btn-faded,
button.btn-faded {
  background-color: #f9f9f9;
}
.btn.btn-faded:hover,
button.btn-faded:hover {
  background-color: #ebf4fb;
}
.btn.btn-outlined,
button.btn-outlined {
  background-color: transparent;
  border: 1px solid #C8102E;
  color: #C8102E;
  transition: background-color 0.2s linear;
}
.btn.btn-outlined:hover,
button.btn-outlined:hover {
  background-color: #C8102E;
  color: #fff;
}
.btn.btn-outlined.grey,
button.btn-outlined.grey {
  border: 1px solid #f9f9f9;
  color: #f9f9f9;
}
.btn.btn-outlined.grey:hover,
button.btn-outlined.grey:hover {
  background-color: #f9f9f9;
  color: #52606D;
}
.btn.btn-create::before,
button.btn-create::before,
.btn.btn-download::before,
button.btn-download::before,
.btn.btn-feed::before,
button.btn-feed::before,
.btn.btn-linkedin::before,
button.btn-linkedin::before,
.btn.btn-twitter::before,
button.btn-twitter::before {
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  margin-right: 0.5em;
}
.btn.btn-create::before,
button.btn-create::before {
  content: "\f067";
  color: #B7C11E;
}
.btn.btn-download::before,
button.btn-download::before {
  content: "\f019";
  color: #B7C11E;
}
.btn.btn-feed::before,
button.btn-feed::before {
  content: "\f09e";
  color: #ee8533;
}
.btn.btn-linkedin::before,
button.btn-linkedin::before {
  content: "\f0e1";
  color: #0077B5;
}
.btn.btn-twitter::before,
button.btn-twitter::before {
  content: "\f099";
  color: #1dcaff;
}
.btn.btn-small,
button.btn-small {
  padding: 0.5rem;
  font-size: 0.8em;
}
.btn.btn-large,
button.btn-large {
  padding: 1rem 1.25rem;
}
.btn.block,
button.block {
  display: block;
  margin-bottom: 0.5rem;
  box-sizing: border-box;
  width: 100%;
}
.btn.block:last-child,
button.block:last-child {
  margin-bottom: 0;
}
.btn.centered,
button.centered {
  display: inline-block;
  text-align: center;
  margin: 0 auto;
  min-width: 8rem;
}
.btn.disabled,
button.disabled {
  cursor: not-allowed;
}
/**
 *  This is a class that defines a topbar on the top of the page. Such top bar
 *  contains an image (wrapped in a link) of MailerQ and a the website navigation.
 *
 *  @author     Paweł Kuźnik <pawel.kuznik@copernica.com>
 *  @file       topbar.less
 */
.topbar {
  background: #fafafc;
  /**
     *  The main menu is an element that contains a list of links that lead to
     *  different parts of the page. It has it's own class that defines how the
     *  mainnav works, here we just want to adjust how it should behave inside
     *  topbar element.
     */
  /**
     *  Anything that is not a hero container should be separated from the topba.
     */
}
.topbar .container {
  display: flex;
  flex-direction: row;
  padding-top: 1rem;
  padding-bottom: 1rem;
  /**
         *  The logo is a link that wraps around the actual image. We want to make
         *  the link to behave like a block container.
         */
}
.topbar .container .logo {
  display: block;
  flex-grow: 0;
  flex-basis: 160px;
  flex-shrink: 1;
}
.topbar .container .logo img {
  width: 20rem;
}
.topbar .mainnav {
  flex-basis: 0;
  flex-grow: 1;
}
.topbar + *:not(.hero) {
  margin-top: 1rem;
}
/**
 *  These are styles for the main navigation. These styles will render a line
 *  of links on the desktop, and a hamburger on the mobile.
 *
 *  There is also a MainNav JS component. This component kick in when the
 *  website is viewed on a mobile device and will make a full screen navigation
 *  when the hamburger icon is clicked.
 *
 *  When in mobile mode, the class covers 2 main states: plain and with `on` class.
 *  The `on` class means that the user wants to interact with the menu. Visually,
 *  the menu takes over the whole screen and presents a list of links that the
 *  user can click to get around the website.
 *
 *  This component is a desktop first component.
 *
 *  @author     Paweł Kuźnik <pawel.kuznik@copernica.com>
 *  @file       mainnav.less
 */
.mainnav {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  transition: background-color 0.2s;
}
.mainnav > * {
  margin-left: 1rem;
}
.mainnav span.counter {
  font-size: x-small;
  vertical-align: super;
  background-color: #C8102E;
  color: #fff;
  border-radius: 100%;
  padding: 3px 6px;
}
.mainnav .reddish {
  color: #C8102E;
}
.mainnav .hamburger {
  display: none;
}
@media screen and (max-width: 50rem) {
  .mainnav {
    /**
         *  The after and before represent top and bottom line in the hamburger.
         *  these lines have to be positioned absolutely against the original
         *  element.
         */
    /**
         *  This is a class that is applied on the menu by the MainNav component.
         *  This class indicates that the user want's to activate menu by clicking
         *  the hamburger icon. When this class is applied the main menu consumes
         *  the whole screen and presents that links in a form of a list.
         */
  }
  .mainnav > *:not(.hamburger) {
    display: none;
  }
  .mainnav .hamburger {
    display: block;
    cursor: pointer;
    position: relative;
  }
  .mainnav .hamburger,
  .mainnav .hamburger::before,
  .mainnav .hamburger::after {
    content: '';
    display: block;
    width: 22px;
    height: 5px;
    background-color: #00426A;
    transition: all 0.3s;
    border-radius: 2px;
  }
  .mainnav .hamburger::after,
  .mainnav .hamburger::before {
    position: absolute;
  }
  .mainnav .hamburger::after {
    bottom: -9px;
  }
  .mainnav .hamburger::before {
    top: -9px;
  }
  .mainnav.on {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 3rem;
    z-index: 99;
    background-color: rgba(0, 66, 106, 0.9);
    /**
             *  The hamburger should be transformed into a 'x' sign. When clicked
             *  that hamburger will close the man nav.
             */
  }
  .mainnav.on > * {
    display: block;
    color: white;
    font-weight: bold;
    font-size: 1.3rem;
    line-height: 2.3rem;
    margin-bottom: 1rem;
  }
  .mainnav.on .hamburger {
    position: absolute;
    top: 2.5rem;
    right: 1rem;
    background-color: transparent;
  }
  .mainnav.on .hamburger::after,
  .mainnav.on .hamburger::before {
    background-color: white;
  }
  .mainnav.on .hamburger::before {
    transform: rotate(45deg) translate(5px, 5px);
  }
  .mainnav.on .hamburger::after {
    transform: rotate(-45deg) translate(7px, -8px);
  }
}
/**
 *  This is a class that can force an element to behave like a block.
 *
 *  @author     Paweł Kuźnik <pawel.kuznik@copernica.com>
 */
.block {
  display: block;
}
/**
 *  This is a class that allows creating more advanced headers. The class should
 *  be applied on the container of an actual h1 element.
 *
 *  The header can have following child classes (all optional):
 *
 *      header-aside    This class might be applied to get a container on the
 *                      right of the header that can have additional content inside.
 *
 *  @author     Paweł Kuźnik <pawel.kuznik@copernica.com>
 *  @file       header.less
 */
.header {
  display: flex;
  /**
     *  This is a class that might be applied on a child element to give
     *  additional container to mount more element beside the header.
     */
}
.header h1 {
  flex-basis: 0;
  flex-grow: 1;
}
.header .header-aside {
  flex-grow: 0;
}
/*
 *
 * @file sprite.less
 */
.sprite {
  display: block;
  width: 100%;
  height: 100%;
}
.sprite.xx-small {
  max-width: 1.8rem;
  height: 1.8rem;
}
.sprite.x-small {
  max-width: 3rem;
  height: 3rem;
}
.sprite.small {
  max-width: 6rem;
  height: 6rem;
}
.sprite.medium {
  max-width: 9rem;
  height: 9rem;
}
.sprite.large {
  max-width: 15rem;
  height: 15rem;
}
.sprite.x-large {
  max-width: 20rem;
  height: 20rem;
}
.sprite.xx-large {
  max-width: 25rem;
  height: 25rem;
}
.sprite.left {
  float: left;
  margin-right: 1rem;
}
.centered {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/**
 * Styles for the main header of the pages
 *
 * @file section-header.less
 */
.hero {
  width: 100%;
  position: relative;
}
.hero h1,
.hero p {
  color: #fff;
}
.hero h1 {
  font-size: 2.5em;
}
@media screen and (max-width: 50rem) {
  .hero h1 {
    font-size: 1.5em;
  }
}
.hero p {
  font-size: 1.4em;
}
@media screen and (max-width: 50rem) {
  .hero p {
    font-size: 1.2em;
  }
}
.hero.hero-keyhole .messagespreview,
.hero.hero-mgmt .messagespreview {
  padding-top: 3rem;
}
.hero.hero-keyhole .messagespreview h1,
.hero.hero-mgmt .messagespreview h1 {
  display: none;
}
.hero.hero-keyhole .messagespreview .no-data,
.hero.hero-mgmt .messagespreview .no-data {
  display: none;
}
.hero.hero-keyhole,
.hero.hero-comparison,
.hero.hero-mgmt {
  min-height: 20rem;
}
@media screen and (max-width: 50rem) {
  .hero.hero-keyhole,
  .hero.hero-comparison,
  .hero.hero-mgmt {
    min-height: 17rem;
  }
}
.hero.hero-m3aawg {
  min-height: 30rem;
}
.hero .background-overlay {
  width: 100%;
  padding: 2rem 0;
  position: absolute;
  top: 0;
  bottom: 0;
  background-image: linear-gradient(to left, #003251, rgba(87, 131, 165, 0.8) 50%, #003251 100%);
}
.hero .background-overlay .hero-content {
  padding: 0 1rem;
}
.hero .background-overlay .hero-content h1,
.hero .background-overlay .hero-content p {
  color: #fff;
}
.hero.hero-about {
  background-image: url(/Resources/Images/IJ_header.jpg);
  background-repeat: no-repeat;
  background-position: 100% 80%;
  background-size: cover;
}
.hero.hero-about h1,
.hero.hero-about p {
  color: #C8102E;
  padding: 0.5rem 0;
}
.hero.hero-pricing {
  background-image: url(/Resources/Images/hero-pattern.png);
}
.hero.hero-pricing h1,
.hero.hero-pricing p {
  color: #fff;
}
.hero.hero-pricing .hero-content {
  padding: 3rem 0 10rem 0;
  text-align: center;
}
.hero.hero-pricing .hero-content h1,
.hero.hero-pricing .hero-content h2,
.hero.hero-pricing .hero-content p {
  color: #fff;
  margin: 0;
}
.hero.hero-features {
  background-image: url(/Resources/Images/hero-pattern.png);
}
.hero.hero-features .hero-content {
  padding: 3rem 0 0;
  text-align: center;
}
.hero.hero-features .hero-content h1 {
  margin-bottom: 2rem;
  color: #fff;
}
.hero.hero-features .hero-content img {
  margin: -0.5rem;
  max-width: 50rem;
  width: 100%;
}
.hero.hero-faq,
.hero.hero-userguide {
  background-image: url(/Resources/Images/hero-pattern2.png);
  padding: 3rem 0;
}
.hero.hero-pattern {
  background-image: url(/Resources/Images/purple-pattern.png);
  padding: 3rem 0;
  text-align: left;
  color: white;
}
.hero.hero-download,
.hero.hero-blog,
.hero.hero-esp {
  background-image: url(/Resources/Images/hero-pattern3.png);
  padding: 3rem 0;
}
.hero.hero-comparison {
  background: url('/Resources/Images/comparison-back.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.hero.hero-comparison .container {
  position: relative;
}
.hero.hero-comparison .comparison-logo,
.hero.hero-comparison .comparison-secondary {
  position: absolute;
  width: 20%;
}
@media screen and (max-width: 50rem) {
  .hero.hero-comparison .comparison-logo,
  .hero.hero-comparison .comparison-secondary {
    width: 30%;
  }
}
.hero.hero-comparison .comparison-logo {
  top: 1.5rem;
  left: 1rem;
}
.hero.hero-comparison .comparison-secondary {
  top: 15.5rem;
  right: 1rem;
}
@media screen and (max-width: 50rem) {
  .hero.hero-comparison .comparison-secondary {
    top: 13rem;
  }
}
/*
 * Styles for the customer logos
 * Defines the width and height of the container and the image
 *
 * @file customer-logos
 */
.customers-logos {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: space-between;
}
.customers-logos a {
  display: block;
  max-width: 9rem;
}
.customers-logos a.big-logo {
  max-width: 12rem;
}
.customers-logos a img {
  width: 100%;
}
.customers-logos.grayscale img {
  filter: grayscale(100);
  opacity: 0.3;
}
/* 
 * A section with unique selling points of Mailerq
 * section-usp.less
 */
.section-usp {
  /**
     *  USP description with an image/visual on top
     *  e.g. Fast or Flexible
     */
}
.section-usp .usp-highlight {
  text-align: center;
}
.section-usp .usp-highlight:nth-child(2) {
  padding: 0;
}
.section-usp .usp-highlight:nth-child(3) .sprite {
  padding: 1.5rem;
}
.section-usp .usp-highlight .usp-content {
  background-color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: -2px 2px 28px rgba(0, 0, 0, 0.4);
}
.section-usp .usp-highlight .usp-content .sprite.medium {
  max-width: 9rem;
  max-height: 9rem;
}
.section-usp .usp-highlight .usp-content .sprite.small {
  max-width: 6rem;
  max-height: 6rem;
}
/* 
 * In some cases we want the first section of the page
 * to be on top of the hero banner. In order to achive that
 * we use this class to the container
 *
 * @file ontop-section.less
 */
.ontop-section {
  position: relative;
  margin-top: -10rem;
}
.ontop-section.lower {
  margin-top: -4rem;
}
@media screen and (min-width: 70rem) {
  .ontop-section.lower {
    margin-top: -6rem;
  }
}
/**
 *  These are the styles for the main documentation page container
 *
 *  @author         Tycho Atsma  <tycho.atsma@copernica.com>
 *  @file           documentationcontainer.less
 *  @documentation  public
 */
/**
 *  The styles for the pages section of the documentation navigation
 *
 *  @author         Tycho Atsma  <tycho.atsma@copernica.com>
 *  @file           docnavpages.less
 *  @documentation  public
 */
[data-documentation-part="navigation"] {
  /**
     *  The main list
     */
}
[data-documentation-part="navigation"] ul {
  padding-left: 0;
  margin-bottom: 0;
}
[data-documentation-part="navigation"] ul li {
  list-style: none;
}
[data-documentation-part="navigation"] article > ul,
[data-documentation-part="navigation"] > ul.active {
  padding: 0;
  /**
         *  A single documentation section
         *  eg.  Getting started
         */
}
[data-documentation-part="navigation"] article > ul > li,
[data-documentation-part="navigation"] > ul.active > li {
  overflow: hidden;
  margin-bottom: 1rem;
  /**
             *  The section header
             *  eg.  Getting started
             */
  /**
             *  The section pages
             *  eg.  Download instructions, Setting up RabbitMQ.
             */
}
[data-documentation-part="navigation"] article > ul > li > a,
[data-documentation-part="navigation"] > ul.active > li > a {
  font-size: 1.2rem;
  font-weight: 700;
  color: #00426A;
  padding: 0.5rem 0;
}
[data-documentation-part="navigation"] article > ul > li > ul,
[data-documentation-part="navigation"] > ul.active > li > ul {
  /**
                 *  A single page link
                 *  eg.  Download instructions
                 */
  /**
                 *  The page headers
                 *  eg.  Installing on Debian/Ubuntu based systems
                 */
}
[data-documentation-part="navigation"] article > ul > li > ul > li,
[data-documentation-part="navigation"] > ul.active > li > ul > li {
  /**
                     *  The single links
                     */
  /**
                     *  An active page link
                     *  eg.  Download instructions
                     */
}
[data-documentation-part="navigation"] article > ul > li > ul > li.active,
[data-documentation-part="navigation"] > ul.active > li > ul > li.active {
  padding: 0 0.5rem;
}
[data-documentation-part="navigation"] article > ul > li > ul > li a,
[data-documentation-part="navigation"] > ul.active > li > ul > li a {
  color: #868686;
  padding: 0.3rem 0;
}
[data-documentation-part="navigation"] article > ul > li > ul > li > a.active,
[data-documentation-part="navigation"] > ul.active > li > ul > li > a.active {
  color: #00426A;
  font-weight: bold;
}
[data-documentation-part="navigation"] article > ul > li > ul .documentationpage-headers,
[data-documentation-part="navigation"] > ul.active > li > ul .documentationpage-headers {
  border-left: 2px solid #efefef;
  padding-left: 1rem;
  margin: 0.5rem;
  /**
                     *  The seperate links
                     */
}
[data-documentation-part="navigation"] article > ul > li > ul .documentationpage-headers li a,
[data-documentation-part="navigation"] > ul.active > li > ul .documentationpage-headers li a {
  font-style: italic;
  font-size: 0.9rem;
}
[data-component="Documentation"] {
  margin-top: 0;
  padding: 1rem 1rem 2rem;
  /**
     *  The doc nav
     */
  /**
     *  The documentation
     */
}
@media screen and (max-width: 50rem) {
  [data-component="Documentation"] {
    max-width: 100vw;
    padding: 1rem;
    box-sizing: border-box;
  }
}
@media screen and (max-width: 50rem) {
  [data-component="Documentation"] > aside {
    background-color: white;
    position: absolute;
    left: -100vw;
    top: 0;
    width: 100vw;
    height: 100%;
    box-sizing: border-box;
    padding: 1rem;
    transition: left 0.3s ease-in-out;
    z-index: 1;
  }
  [data-component="Documentation"] > aside.opened {
    left: 0;
  }
}
[data-component="Documentation"] .documentation {
  padding: 0.5rem 0;
  /**
         *  The header
         */
}
[data-component="Documentation"] .documentation h1 {
  line-height: 2rem;
}
@media screen and (max-width: 50rem) {
  [data-component="Documentation"] .documentation {
    padding-top: 3.5rem;
  }
}
/**
 *  This is a class that allows to hide elements from the mobile view.
 *
 *  @author     Paweł Kuźnik <pawel.kuznik@copernica.com>
 *  @file       hide-mobile.less
 */
@media screen and (max-width: 50rem) {
  .hide-mobile {
    display: none;
  }
}
/**
 *  This is a class that should be used to group content together.
 *
 *  @author Paweł Kuźnik <pawel.kuznik@copernica.com>
 *  @file   section.less
 */
.section {
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.section.section-colored {
  background: #f9f9f9;
}
.section.section-brand {
  background-color: #00426A;
}
.section.section-brand * {
  color: #fff;
}
.section.section-pattern {
  background-image: url('/Resources/Images/pattern-waves.svg');
  background-attachment: fixed;
  background-size: cover;
}
.section.section-pattern h2,
.section.section-pattern h3,
.section.section-pattern p,
.section.section-pattern label {
  color: #fff;
}
.section.section-pattern table td {
  color: #52606D;
}
.section.section-small {
  padding-top: 3rem;
  padding-bottom: 3rem;
}