/*! normalize.css 2012-07-07T09:50 UTC - http://github.com/necolas/normalize.css */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/*
 * Corrects `block` display not defined in IE6/7/8/9 & FF3.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}
/*
 * Corrects `inline-block` display not defined in IE6/7/8/9 & FF3.
 */
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
/*
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/*
 * Addresses styling for `hidden` attribute not present in IE7/8/9, FF3, S4.
 * Known issue: no IE6 support.
 */
[hidden] {
  display: none;
}
/* ==========================================================================
   Base
   ========================================================================== */
/*
 * 1. Corrects text resizing oddly in IE6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevents iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-size: 100%;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 2 */
}
/*
 * Addresses `font-family` inconsistency between `textarea` and other form
 * elements.
 */
html,
button,
input,
select,
textarea {
  font-family: sans-serif;
}
/*
 * Addresses margins handled incorrectly in IE6/7.
 */
body {
  margin: 0;
}
/* ==========================================================================
   Links
   ========================================================================== */
/*
 * Addresses `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
  outline: thin dotted;
}
/*
 * Improves readability when focused and also mouse hovered in all browsers.
 * people.opera.com/patrickl/experiments/keyboard/test
 */
a:active,
a:hover {
  outline: 0;
}
/* ==========================================================================
   Typography
   ========================================================================== */
/*
 * Addresses font sizes and margins set differently in IE6/7.
 * Addresses font sizes within `section` and `article` in FF4+, Chrome, S5.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
h2 {
  font-size: 1.5em;
  margin: 0.83em 0;
}
h3 {
  font-size: 1.17em;
  margin: 1em 0;
}
h4 {
  font-size: 1em;
  margin: 1.33em 0;
}
h5 {
  font-size: 0.83em;
  margin: 1.67em 0;
}
h6 {
  font-size: 0.75em;
  margin: 2.33em 0;
}
/*
 * Addresses styling not present in IE7/8/9, S5, Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}
/*
 * Addresses style set to `bolder` in FF3+, S4/5, Chrome.
 */
b,
strong {
  font-weight: bold;
}
blockquote {
  margin: 1em 40px;
}
/*
 * Addresses styling not present in S5, Chrome.
 */
dfn {
  font-style: italic;
}
/*
 * Addresses styling not present in IE6/7/8/9.
 */
mark {
  background: #fff;
  color: #000;
}
/*
 * Addresses margins set differently in IE6/7.
 */
p,
pre {
  margin: 1em 0;
}
/*
 * Corrects font family set oddly in IE6, S4/5, Chrome.
 * en.wikipedia.org/wiki/User:Davidgothberg/Test59
 */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  _font-family: 'courier new', monospace;
  font-size: 1em;
}
/*
 * Improves readability of pre-formatted text in all browsers.
 */
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}
/*
 * Addresses CSS quotes not supported in IE6/7.
 */
q {
  quotes: none;
}
/*
 * Addresses `quotes` property not supported in S4.
 */
q:before,
q:after {
  content: '';
  content: none;
}
small {
  font-size: 75%;
}
/*
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 * gist.github.com/413930
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* ==========================================================================
   Lists
   ========================================================================== */
/*
 * Addresses margins set differently in IE6/7.
 */
dl,
menu,
ol,
ul {
  margin: 1em 0;
}
dd {
  margin: 0 0 0 40px;
}
/*
 * Addresses paddings set differently in IE6/7.
 */
menu,
ol,
ul {
  padding: 0 0 0 40px;
}
/*
 * Corrects list images handled incorrectly in IE7.
 */
nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
}
/* ==========================================================================
   Embedded content
   ========================================================================== */
/*
 * 1. Removes border when inside `a` element in IE6/7/8/9, FF3.
 * 2. Improves image quality when scaled in IE7.
 *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 */
img {
  border: 0;
  /* 1 */
  -ms-interpolation-mode: bicubic;
  /* 2 */
}
/*
 * Corrects overflow displayed oddly in IE9.
 */
svg:not(:root) {
  overflow: hidden;
}
/* ==========================================================================
   Figures
   ========================================================================== */
/*
 * Addresses margin not present in IE6/7/8/9, S5, O11.
 */
figure {
  margin: 0;
}
/* ==========================================================================
   Forms
   ========================================================================== */
/*
 * Corrects margin displayed oddly in IE6/7.
 */
form {
  margin: 0;
}
/*
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/*
 * 1. Corrects color not being inherited in IE6/7/8/9.
 * 2. Corrects text not wrapping in FF3.
 * 3. Corrects alignment displayed oddly in IE6/7.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  white-space: normal;
  /* 2 */
  *margin-left: -7px;
  /* 3 */
}
/*
 * 1. Corrects font size not being inherited in all browsers.
 * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome.
 * 3. Improves appearance and consistency in all browsers.
 */
button,
input,
select,
textarea {
  font-size: 100%;
  /* 1 */
  margin: 0;
  /* 2 */
  vertical-align: baseline;
  /* 3 */
  *vertical-align: middle;
  /* 3 */
}
/*
 * Addresses FF3/4 setting `line-height` on `input` using `!important` in the
 * UA stylesheet.
 */
button,
input {
  line-height: normal;
}
/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Removes inner spacing in IE7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE6.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
  *overflow: visible;
  /* 4 */
}
/*
 * Re-set default cursor for disabled elements.
 */
button[disabled],
input[disabled] {
  cursor: default;
}
/*
 * 1. Addresses box sizing set to content-box in IE8/9.
 * 2. Removes excess padding in IE8/9.
 * 3. Removes excess padding in IE7.
 *    Known issue: excess padding remains in IE6.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
  *height: 13px;
  /* 3 */
  *width: 13px;
  /* 3 */
}
/*
 * 1. Addresses `appearance` set to `searchfield` in S5, Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz`
 *    to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box;
}
/*
 * Removes inner padding and search cancel button in S5, Chrome on OS X.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/*
 * Removes inner padding and border in FF3+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/*
 * 1. Removes default vertical scrollbar in IE6/7/8/9.
 * 2. Improves readability and alignment in all browsers.
 */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */
}
/* ==========================================================================
   Tables
   ========================================================================== */
/*
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/******************************************************************
CUSTOMIZED RESET VALUES
I added these extra styles as a more personalized reset. Feel free
to remove them if you like or add your own. If you want to update
the normalize styles, make sure to edit from this point up.
******************************************************************/
p {
  -webkit-hyphens: auto;
  -epub-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}
b,
strong,
.strong {
  font-weight: bold;
}
dfn,
em,
.em {
  font-style: italic;
}
small,
.small {
  font-size: 75%;
}
ul,
ol {
  padding: 0;
  list-style-type: none;
}
dd {
  margin: 0;
}
.sidebar ul,
.sidebar ol,
.commentlist {
  list-style: none;
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Dec 1, 2017, 3:15:17 PM
    Author     : jvoosten
*/
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Dec 2, 2017, 7:24:13 PM
    Author     : jvoosten
*/
@font-face {
  font-family: 'Muli';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/muli/v29/7Aulp_0qiz-aVz7u3PJLcUMYOFmQkEk30e0.ttf) format('truetype');
}
@font-face {
  font-family: 'Muli';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/muli/v29/7Aulp_0qiz-aVz7u3PJLcUMYOFnOkEk30e0.ttf) format('truetype');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDOUhdTQ3ig.ttf) format('truetype');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDLshdTQ3ig.ttf) format('truetype');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  src: url(https://fonts.gstatic.com/s/nunito/v26/XRXI3I6Li01BKofiOc5wtlZ2di8HDFwmdTQ3ig.ttf) format('truetype');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 300;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe1mMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp5F5bxqqtQ1yiU4GiClXs1Ug.ttf) format('truetype');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe1mMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp5F5bxqqtQ1yiU4G1ilXs1Ug.ttf) format('truetype');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe1mMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp5F5bxqqtQ1yiU4G5ClXs1Ug.ttf) format('truetype');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe1mMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp5F5bxqqtQ1yiU4GCC5Xs1Ug.ttf) format('truetype');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe1mMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp5F5bxqqtQ1yiU4GMS5Xs1Ug.ttf) format('truetype');
}
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 800;
  font-stretch: normal;
  src: url(https://fonts.gstatic.com/s/nunitosans/v15/pe1mMImSLYBIv1o4X1M8ce2xCx3yop4tQpF_MeTm0lfGWVpNn64CL7U8upHZIbMV51Q42ptCp5F5bxqqtQ1yiU4GVi5Xs1Ug.ttf) format('truetype');
}
* {
  font-family: "Nunito Sans", sans-serif;
}
body {
  background-color: #fff;
  color: #333333;
  line-height: 25px;
}
p {
  margin-top: 0em;
}
.centered {
  margin: 0 auto;
  padding: 0 20px;
  max-width: 1200px;
  position: relative;
}
.wide-centered {
  margin: 0 auto;
  max-width: 1920px;
}
.wide-block {
  padding: 2em 360px;
  margin: 0 -360px;
  background-color: #f8f8f8;
}
.alignleft {
  float: left;
  margin-right: 2em;
  margin-bottom: 0.5em;
  clear: right;
}
.alignright {
  float: right;
  margin-left: 2em;
  margin-bottom: 0.5em;
  clear: left;
}
.aligncenter {
  display: block;
  margin: 0 auto 1.25rem;
}
.banner {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
#productswoosh {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url('../img/swoosh_on_black.png');
  background-position: center bottom;
  background-repeat: no-repeat;
}
@media screen and (min-width: 1025px) {
  .banner {
    height: 360px;
  }
  #productswoosh {
    background-size: 100% 216px;
  }
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
  .banner {
    height: 270px;
  }
  #productswoosh {
    background-size: 100% 162px;
  }
}
@media screen and (max-width: 599px) {
  .banner {
    height: 180px;
  }
  #productswoosh {
    background-size: 100% 108px;
  }
}
/* Hide blog-post title on most pages...*/
h2.blog-post-title {
  display: none;
}
/* ...except news items (the real blog posts). */
main.site-main h2.blog-post-title {
  display: block;
}
#content ul,
#content ol {
  list-style-position: inside;
}
#content ul {
  list-style-type: disc;
}
#content ol {
  list-style-type: decimal;
}
#content #breadcrumbs {
  list-style-type: none;
}
#content #breadcrumbs li {
  display: inline-block;
  color: #E7792B;
  font-size: 110%;
  font-weight: bold;
  margin-right: 1em;
}
#content #breadcrumbs li a {
  text-decoration: none;
  color: #E7792B;
}
#content img {
  border-radius: 10px;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: 800;
  font-style: normal;
  color: #003162;
  margin-bottom: 0.1em;
}
h1,
h2.blog-post-title {
  font-size: 35px;
  line-height: 38px;
  margin-bottom: 21px;
}
h2 {
  font-size: 32px;
  line-height: 34px;
  margin-bottom: 20px;
}
h3,
.h3 {
  font-size: 27px;
  line-height: 30px;
  margin-bottom: 18px;
}
h4,
.h4 {
  font-size: 24px;
  margin: 15px 0 9px 0;
  line-height: 27px;
}
@media screen and (min-width: 1025px) {
  #content {
    margin-top: 108px;
  }
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
  #content {
    margin-top: 98px;
  }
}
@media screen and (max-width: 599px) {
  #content {
    margin-top: 80px;
  }
  .not-on-phone {
    display: none;
  }
}
/*
© 2018 Bankai Software bv
For DJM Inkjet Solutions bv
*/
/* 
    Created on : Jan 7, 2018, 4:26:01 PM
    Author     : jvoosten

  Call-To-Action styling
*/
.sow-cta-base {
  border: none;
  background-color: #f8f8f8;
  border-radius: 10px;
}
.sow-cta-base .sow-cta-text {
  float: none !important;
  margin-bottom: 1em;
}
.sow-cta-base .sow-cta-text h4 {
  font-size: 200%;
  line-height: 100%;
}
.sow-cta-base .sow-cta-text h5 {
  font-size: 100%;
  color: black;
}
.sow-cta-base .so-widget-sow-button {
  float: left !important;
  margin-top: 1em;
}
.so-widget-sow-button .ow-button-base a {
  display: inline-block;
  background: #E7792B !important;
  border: none !important;
  height: 34px !important;
  line-height: 34px !important;
  font-size: 90% !important;
  padding: 0 42px !important;
  border-radius: 17px !important;
  color: white !important;
  text-transform: uppercase !important;
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Dec 14, 2017, 2:13:34 AM
    Author     : jvoosten
*/
.big-fat-font {
  font-size: 113.33%;
  font-style: normal;
  color: #003162;
  font-weight: 900;
  text-transform: uppercase;
}
footer hr {
  border: 0;
  height: 1px;
  background: #d7d7d7;
  margin: 1em 0 0 0;
}
footer a {
  color: #7a7a7a;
  text-decoration: none;
}
footer h5 {
  margin-top: 0;
  margin-bottom: 1em;
  font-size: 113.33%;
  font-style: normal;
  color: #003162;
  font-weight: 900;
  text-transform: uppercase;
}
#bottom-menu-container {
  display: block;
}
#bottom-menu-desktop li {
  display: inline-block;
  float: left;
  width: 33.3%;
}
#bottom-menu-desktop li a {
  font-size: 90%;
}
#bottom-menu-desktop ul.sub-menu {
  margin: 0 0;
}
#bottom-menu-desktop ul.sub-menu li {
  width: 100%;
}
#bottom-menu-container,
#subscribe-form,
#contact-blob {
  float: left;
  margin: 40px 0 0 0 ;
}
#contact-blob p {
  color: #7a7a7a;
  font-size: 90%;
  margin-bottom: 0.2em;
}
#contact-blob p a:hover {
  color: #003162;
}
@media screen and (min-width: 1025px) {
  #bottom-menu-container {
    width: 50%;
  }
  #subscribe-form {
    width: 30%;
    padding: 0 2%;
  }
  #contact-blob {
    width: 16%;
  }
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
  #bottom-menu-container {
    width: 100%;
  }
  #subscribe-form {
    width: 46%;
    padding-right: 4%;
  }
  #contact-blob {
    width: 50%;
  }
}
/* colorful wave at bottom */
#footerwave {
  position: relative;
  background-image: url(../img/swoosh_on_white.png);
  background-repeat: no-repeat;
  background-size: 100% 189px;
  background-position: center;
  height: 189px;
  margin-bottom: 15px;
}
#footerwave .footer-socials ul {
  float: left;
  margin: 0;
  padding-top: 80px;
}
#footerwave .footer-socials ul li {
  display: inline-block;
  height: 45px;
  width: 45px;
  line-height: 45px;
  margin-right: 15px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  text-align: center;
}
#footerwave .footer-socials ul li a {
  color: #fff;
  font-size: 20px;
  text-decoration: none;
}
#footerwave #gototop {
  position: absolute;
  right: 15px;
  margin-top: 135px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: #c50086;
  color: white;
  text-align: center;
  line-height: 64px;
  font-size: 40px;
}
@media screen and (max-width: 599px) {
  #footerwave {
    background-image: url(../img/footer-shape-small.png);
    background-size: 100%;
  }
  #footerwave .footer-socials ul li {
    height: 50px;
    width: 50px;
    line-height: 50px;
  }
  #footerwave .footer-socials ul li a {
    font-size: 24px;
  }
}
/* Copyright footer at the bottom */
#footerbottom {
  background-color: #fff;
}
#footerbottom .copyright {
  float: left;
  margin: 1em 0;
  max-width: 50%;
  color: #7a7a7a;
}
#footerbottom .copyright a {
  color: #7a7a7a;
}
#footerbottom .credits {
  float: right;
  margin: 1em 0;
  max-width: 50%;
  color: #666666;
  text-transform: uppercase;
  font-weight: 700;
}
#footerbottom .credits a {
  color: #666666;
}
@media screen and (max-width: 599px) {
  #footerbottom .copyright,
  #footerbottom .credits {
    float: none;
    display: block;
    max-width: 100%;
    text-align: left;
  }
}
/*
© 2017 Bankai Software bv
For DJM Inkjet Solutions bv
*/
/* 
    Created on : Dec 17, 2017, 9:42:27 PM
    Author     : jvoosten
*/
input,
textarea,
select {
  width: 100%;
  border: 1px solid #d7d7d7;
  box-sizing: border-box;
  margin: 0.4em 0 0.7em 0;
}
.orange-button {
  font-size: 85%;
  width: auto;
  height: 34px;
  padding: 0 42px;
  border-radius: 17px;
  background-color: #E7792B;
  color: white;
  border: none !important;
  text-transform: uppercase;
}
input {
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
}
input:focus {
  border: 1px solid #E7792B;
}
input[type="submit"] {
  font-size: 85%;
  width: auto;
  height: 34px;
  padding: 0 42px;
  border-radius: 17px;
  background-color: #E7792B;
  color: white;
  border: none !important;
  text-transform: uppercase;
}
input[type="checkbox"] {
  height: inherit;
  line-height: inherit;
  padding: inherit;
  width: auto;
  margin-right: 0.5em;
}
span.wpcf7-list-item {
  display: block;
}
/* Overrules for specific forms */
#subscribe-form input[type="submit"] {
  width: auto;
}
a.submit,
a.more-link {
  font-size: 85%;
  width: auto;
  height: 34px;
  padding: 0 42px;
  border-radius: 17px;
  background-color: #E7792B;
  color: white;
  border: none !important;
  text-transform: uppercase;
  padding: 8px 42px;
  margin: 1em 0;
  text-decoration: none;
}
/*
© 2017 Bankai Software bv
For DJM Inkjet Solutions bv
*/
/* 
    Created on : Dec 22, 2017, 11:20:52 PM
    Author     : jvoosten
*/
/* Front page stuff */
.featured {
  margin-top: 4em;
}
.featured h2 {
  margin-top: 0;
}
.featured div.image {
  float: left;
}
.featured div.blurb {
  float: left;
}
.featured div.blurb img {
  margin-right: 1em;
  border-radius: 10px;
  height: 120px;
  width: auto;
}
.swipe {
  position: relative;
  top: 0;
  left: 0;
  margin-top: 1.5em;
  width: 100%;
  height: 120px;
  overflow: hidden;
}
.swipe > div {
  position: absolute;
  width: 10000px;
}
@media screen and (min-width: 1025px) {
  .featured div.image {
    width: 48.667%;
    margin-right: 1.333%;
  }
  .featured div.image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
  }
  .featured div.blurb {
    width: 40%;
    margin: 0 5%;
  }
}
@media screen and (max-width: 1024px) {
  .featured div.image img {
    width: 100%;
    height: auto;
  }
  .featured div.blurb {
    width: 100%;
  }
}
/* Four info cards */
#fourcards-bg {
  margin-top: 100px;
  background-color: #c0c9dc;
}
#fourcards {
  position: relative;
  top: -50px;
}
.card {
  padding: 2em;
  background-color: #003162;
  color: white;
  border-radius: 10px;
  text-decoration: none;
}
.card h4,
.card p {
  color: white;
}
.card img {
  height: 70px;
  width: auto;
  float: right;
}
#fourcardsgrid {
  display: grid;
  grid-gap: 2em;
}
#fourcardsfloat {
  display: none;
}
#fourcardsfloat .card {
  display: inline-box;
  box-sizing: border-box;
  float: left;
  margin-left: 2.66%;
  width: 23%;
  min-height: 25em;
}
#fourcardsfloat .card:first-child {
  margin-left: 0;
}
@media screen and (min-width: 1025px) {
  #fourcardsgrid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
  #fourcardsgrid {
    grid-template-columns: 1fr 1fr;
  }
  #fourcardsfloat .card {
    width: 48.67%;
    margin-bottom: 2em;
  }
  #fourcardsfloat .card:first-child,
  #fourcardsfloat .card:nth-child(3) {
    margin-left: 0;
  }
}
@media screen and (max-width: 599px) {
  #fourcardsgrid {
    grid-template-columns: 1fr;
  }
  #fourcardsfloat .card {
    width: 100%;
    margin: 0 0 2em 0;
  }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  #fourcardsgrid {
    display: none;
  }
  #fourcardsfloat {
    display: block;
  }
}
/*
@media screen and (min-width: @desktop-min-w) {
  .card {
    margin-left: 2.666%;
    width: 23%;
    min-height: 360px;

    &:first-child {
      margin-left: 0;
    }
  }
}

@media screen and (min-width: @tablet-min-w) and (max-width: @tablet-max-w) {
  .card {
    margin-left: 2%;
    width: 49%;
    min-height: 360px;

    &:first-child, &:nth-child(3) {
      margin-left: 0;
    }
  }
}

@media screen and (max-width: @phone-max-w)
{
  .card {
    margin-left: 0;
    width: 100%;
  }
}
*/
/* News block(s) */
#newsblock {
  margin-top: 2em;
}
#news_header {
  background-color: #003162;
  color: white;
  border-radius: 10px 10px 0 0;
  font-size: 150%;
  font-weight: bolder;
  text-align: center;
  height: 3em;
  line-height: 3em;
  padding: 0;
  margin: 0;
}
.news_item {
  margin-top: 1.5em;
}
.news_item img {
  float: left;
  margin-right: 1.5em;
}
.news_item h3 {
  margin-top: 0;
  font-size: 125%;
  color: #808080;
  line-height: 110%;
}
#video {
  background-color: #000000;
  width: 756px;
  height: 425px;
}
@media screen and (min-width: 1025px) {
  #video {
    float: left;
    width: 63%;
  }
  #latest_news {
    float: right;
    width: 33%;
  }
}
@media screen and (max-width: 1024px) {
  #video,
  #latest_news {
    width: 100%;
  }
  #latest_news {
    margin-top: 2em;
  }
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
  .news_item {
    float: left;
    width: 48%;
  }
  .news_item:nth-child(odd) {
    margin-left: 2%;
  }
  .news_item:nth-child(even) {
    margin-right: 2%;
  }
}
@media screen and (max-width: 599px) {
  .news_item {
    width: 100%;
  }
  .news_item img {
    float: right;
    margin-left: 1.5em;
  }
}
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Dec 7, 2017, 10:15:17 PM
    Author     : jvoosten
*/
/* Top header bar + drop */
header {
  top: 0;
  position: fixed;
  width: 100%;
  z-index: 9;
  clear: both;
  background-color: #fff;
}
/* Div that contains all the 'drops' from the top navigation bar (header). Placed below the header.
See also _menu.less */
#headerdrop {
  width: 100%;
  background-color: #fff;
}
#logo {
  float: left;
  min-width: 10%;
  padding-top: 13px;
}
#logo img {
  width: auto;
}
#navigation {
  float: right;
  max-width: 90%;
  min-width: 5%;
}
#navigation span {
  border-right: 1px solid #d7d7d7;
  padding: 10px;
  font-size: 110%;
  text-transform: uppercase;
  font-weight: 600;
  color: #7a7a7a;
}
#navigation span b {
  font-weight: normal;
}
#navigation span i.fa {
  color: #003162;
  margin-left: 13px;
}
#language img,
#languageselector img {
  padding-bottom: 1px;
  margin-left: 13px;
}
@media screen and (min-width: 1025px) {
  header {
    height: 108px;
  }
  #logo img {
    height: calc(0.9 * 108px - 13px);
  }
  #navigation {
    padding-top: 27px;
  }
  #navigation span {
    float: left;
  }
  #navigation span:last-of-type {
    border-right: none !important;
    padding-right: 0 !important;
  }
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
  header {
    height: 98px;
  }
  #logo img {
    height: calc(0.9 * 98px - 13px);
  }
  #navigation {
    padding-top: 25px;
  }
  #navigation span {
    float: right;
  }
  #navigation span:first-of-type {
    border-right: none !important;
    padding-right: 0 !important;
  }
}
@media screen and (max-width: 599px) {
  header {
    height: 80px;
  }
  #logo img {
    height: calc(0.9 * 80px - 13px);
  }
  #navigation {
    padding-top: 20px;
  }
  #navigation span {
    float: right;
    border-right: 1px solid #003162;
  }
  #navigation span b {
    display: none;
  }
  #navigation span i.fa {
    margin-left: 0px;
  }
  #navigation span:first-of-type {
    border-right: none;
    padding-right: 0;
  }
}
/* 
    Created on : Dec 3, 2017, 12:37:35 AM
    Author     : jvoosten
*/
/* The following containers appear in the 'header-drop' below the header */
/* Menu layout */
#top-menu-container,
#bottom-menu-container {
  background-color: #fff;
  font-weight: 600;
}
#top-menu-container {
  display: none;
}
.desktop-menu-container,
.mobile-menu-container {
  width: 100%;
}
#top-menu-container .desktop-menu-container {
  padding: 40px 0;
}
@media screen and (max-width: 1024px) {
  #top-menu-container .desktop-menu-container {
    display: none;
  }
}
@media screen and (min-width: 1025px) {
  #top-menu-container .mobile-menu-container {
    display: none;
  }
}
@media screen and (max-width: 599px) {
  #bottom-menu-container .desktop-menu-container {
    display: none;
  }
}
@media screen and (min-width: 600px) {
  #bottom-menu-container .mobile-menu-container {
    display: none;
  }
}
.menu {
  text-transform: uppercase;
}
ul.menu {
  margin: 0;
}
/* Desktop view */
#top-menu-desktop {
  display: flex;
  flex-wrap: wrap;
  /* First level of menu: blocks */
}
#top-menu-desktop > li {
  display: inline-block;
  width: 25%;
  float: left;
  border-left: 1px solid #a6b0bc;
  box-sizing: border-box;
  min-height: 20em;
  padding: 30px 0 8px 34px;
}
#top-menu-desktop > li:first-child {
  padding-left: 0;
  border-left: none;
}
#top-menu-desktop li a {
  display: block;
  text-decoration: none;
  color: inherit;
  margin-bottom: 0.85em;
  font-size: 90%;
  color: #7a7a7a;
}
#top-menu-desktop li a:hover {
  text-decoration: underline;
}
#top-menu-desktop li.unclickable > a:hover {
  text-decoration: none;
  cursor: default;
}
#top-menu-desktop li.menu-head > a {
  font-size: 113.33%;
  color: #003162;
}
/* Mobile view */
#top-menu-mobile {
  margin: 0;
  padding-bottom: 2em;
}
#top-menu-mobile a {
  display: inline-block;
  text-decoration: none;
  color: #7a7a7a;
  font-size: 90%;
  line-height: 110%;
}
#top-menu-mobile span.expand,
#top-menu-mobile span.collapse {
  float: right;
  font-family: FontAwesome;
  font-size: 150%;
  font-weight: 200;
  line-height: 100%;
  color: #003162;
  display: none;
}
#top-menu-mobile > li {
  padding: 5px calc(2 * 1.6667%);
  border-bottom: 2px solid #aaaaaa;
}
#top-menu-mobile > li.menu-item-has-children > span.expand {
  display: inline;
}
#top-menu-mobile ul.sub-menu {
  display: none;
  margin: 5px 0;
}
#top-menu-mobile li.menu-head > a {
  font-size: 133.3%;
  font-weight: 700;
  color: #003162;
}
/* common items */
/* Search bar */
#searchform {
  width: 100%;
  max-width: 1200px;
  background-color: #fff;
  display: none;
}
form.search-form {
  margin: calc(40px/2) 0;
  display: inline-block;
  width: 100%;
  color: #404040;
}
form.search-form .screen-reader-text {
  display: none;
}
form.search-form input.search-submit {
  float: left;
  margin-right: 1%;
  width: 5%;
  height: calc(40px + 1px);
  padding-left: 0;
  padding-right: 0;
  background: none;
  display: inline-block;
  font-size: 150%;
  border: none;
  border-radius: 0;
  content: "\f002";
}
form.search-form input[type="search"] {
  width: 85%;
  height: 40px;
  line-height: 200%;
  padding: 0 1.5%;
  border: none;
  border-bottom: 1px solid #fcfcfc;
  background-color: #fcfcfc;
}
form.search-form input[type="search"]:focus {
  border: none;
  border-bottom: 1px solid #E7792B;
}
form.search-form i {
  float: right;
  padding-top: 5px;
  margin-left: 1%;
  width: 5%;
  height: calc(40px + 1px);
  font-size: 150%;
}
@media screen and (max-width: 599px) {
  form.search-form {
    margin: 0;
  }
  form.search-form input[type="search"] {
    width: 80%;
  }
}
/* Language selector bar */
#languageselector {
  text-align: right;
  font-size: 110%;
  padding: 0 0 20px 0;
  text-transform: uppercase;
  display: none;
}
#languageselector ul {
  margin: 0;
}
#languageselector ul li {
  margin-bottom: 0.75em;
}
#languageselector a {
  text-decoration: none;
  color: #7a7a7a;
}
/*
© 2017 Bankai Software bv
For DJM Inkjet Solutions bv
*/
/* 
    Created on : Dec 19, 2017, 11:54:22 PM
    Author     : jvoosten
*/
#sliderwrap {
  position: relative;
  width: 100%;
  height: 61.33vw;
  max-height: 736px;
  min-height: 471px;
}
.swoosh {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background: url("../img/swoosh_on_black.png") no-repeat bottom center;
  background-size: 100% 30%;
  pointer-events: none;
}
.slider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
.slider .photo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: black;
}
.slider .photo img {
  position: absolute;
  height: 100%;
  width: auto;
  border-radius: 0 !important;
}
.slider .photo .textbox {
  position: absolute;
  left: 58%;
  top: 21.5%;
  bottom: 2%;
  right: 2%;
  box-sizing: border-box;
  text-align: center;
}
.slider .photo h3,
.slider .photo h4,
.slider .photo h5,
.slider .photo h6,
.slider .photo p {
  margin: 0;
  line-height: 100%;
  color: white;
}
.slider .photo h3 {
  font-size: 260%;
  font-weight: 700;
}
.slider .photo h4 {
  font-size: 425%;
  line-height: 100%;
  font-weight: 800;
  display: inline-block;
}
.slider .photo h5 {
  margin-top: 0.5em;
  font-size: 170%;
  font-weight: 500;
}
.slider .photo h6 {
  font-size: 100%;
  margin-top: 4.1em;
}
.slider .photo h6 a {
  border: 2px solid white;
  padding: 0.7em 2em;
  text-decoration: none;
  text-transform: uppercase;
  height: 40px;
  color: white;
  border-radius: 1.6em;
}
.slider .photo h6 a:hover {
  color: white;
}
.slider .photo .rainbow {
  background-image: linear-gradient(to right, #00A3DA 0%, #005396 20%, #30387C 40%, #D8127D 60%, #E7792B 80%, #FBF219);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.slider .photo p {
  font-size: 115%;
  line-height: 110%;
}
.slider :after {
  clear: both;
}
/* Tricks to get the photo's lined up properly. The way it works:

The swoosh has a crossing point between the colored and gray part at
555 pixels from the left at maximum width (1920px), this is a fraction
of 0.289. The faces' centerline are centered on this crossing point.
The faces themselves have a 4:3 ratio and are 980 pixels wide, again
the faces are centered within the image so this centerline is at 490
pixels from the left.

Am additional problem is that the photo banner doesn't lower in height
until the viewport is ~1200 pixels wide (the content width). So between
1920 and 1200 pixels viewport width the swoosh gets squashed and the
picture has to move. At 1200 pixels the swoosh cross point is at
0.289 * 1200  = ~437 pixels, so the picture is already out of sight for
143 pixels.

Below 1200 pixels the photo scales with the site, so now it's a matter
of keeping the left a percentage of that 143 pixels
*/
@media screen and (min-width: 1920px) {
  .photo img {
    left: 65px;
  }
}
@media screen and (min-width: 1200px) and (max-width: 1919px) {
  .photo img {
    left: calc(28.888vw - 490px);
  }
}
@media screen and (min-width: 600px) and (max-width: 1199px) {
  .photo img {
    left: calc(-11.57vw - 7px);
  }
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
  .slider .photo .textbox {
    left: 50%;
    top: 5%;
    width: 48%;
    height: 93%;
  }
  .slider .photo h4 {
    font-size: 8vw;
  }
}
@media screen and (max-width: 599px) {
  .swoosh {
    background-size: 120%;
  }
  .slider .photo img {
    left: -245px;
  }
  .slider .photo .textbox {
    left: 15%;
    top: 5%;
    width: 80%;
    height: 90%;
  }
  .slider .photo h6 a {
    padding: 0.7em 1em;
  }
}
@media screen and (max-width: 500px) {
  .slider .photo {
    font-size: 73%;
  }
  .slider .photo .textbox {
    left: 5%;
    top: 5%;
    width: 90%;
    height: 90%;
  }
  .slider .photo h6 {
    margin-top: 10em;
  }
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .slider .photo .rainbow {
    background-image: none;
    color: yellow;
  }
  .r1 {
    color: #0097d0;
  }
  .r2 {
    color: #0064a4;
  }
  .r3 {
    color: #055093;
  }
  .r4 {
    color: #184589;
  }
  .r5 {
    color: #2f397d;
  }
  .r6 {
    color: #7d277d;
  }
  .r7 {
    color: #d0137d;
  }
  .r8 {
    color: #dc2d67;
  }
  .r9 {
    color: #df4455;
  }
  .r10 {
    color: #e46739;
  }
  .r11 {
    color: #ec9c25;
  }
  .r12 {
    color: #f7dd1c;
  }
}
/*
© 2018 Bankai Software bv
For DJM Inkjet Solutions bv
*/
/* odd/even coloring on markets */
.zebra .so-panel,
.posts-index .post-item {
  padding: 2em 360px;
  margin: 0 -360px;
  background-color: #f8f8f8;
}
.zebra .so-panel:nth-child(even),
.posts-index .post-item:nth-child(even) {
  background-color: transparent;
}
.zebra .so-panel:nth-child(even) img,
.posts-index .post-item:nth-child(even) img {
  float: left;
  margin-right: 2em;
}
.zebra .so-panel:nth-child(odd) img,
.posts-index .post-item:nth-child(odd) img {
  float: right;
  margin-left: 2em;
}
table.application_matrix {
  width: 100%;
}
table.application_matrix th,
table.application_matrix td {
  padding: 0.5em 0.25em;
}
table.application_matrix thead th {
  vertical-align: top;
  text-align: left;
  color: #003162;
  font-size: 125%;
}
table.application_matrix tbody th {
  text-align: left;
  color: inherit;
  font-weight: normal;
}
table.application_matrix tbody td {
  text-align: center;
}
table.product_overview {
  width: 100%;
  border-collapse: collapse;
  border: none;
}
table.product_overview th,
table.product_overview td {
  border: 1px solid #d7d7d7;
}
table.product_overview th {
  font-weight: normal;
}
table.product_overview td {
  text-align: center;
  width: 12%;
}
table.product_overview td:first-child {
  text-align: left;
  width: 16%;
}
table.product_overview tbody th {
  text-align: left;
  color: inherit;
}
table.product_overview .black {
  background-color: white;
  color: #333333;
}
table.product_overview .blue {
  background-color: #0052a1;
  color: white;
}
table.product_overview .blue-w {
  background-color: #dae3f3;
  color: black;
}
table.product_overview .orange {
  background-color: #f07c00;
  color: white;
}
table.product_overview .orange-w {
  background-color: #fbe5d6;
  color: black;
}
table.product_overview .yellow {
  background-color: #ffed00;
  color: #333333;
}
table.product_overview .green {
  background-color: #70ad47;
  color: white;
}
table.product_overview .slate {
  background-color: #333487;
  color: white;
}
/* blog post index */
.home-main .post-header {
  padding: 0.8em 0;
  font-size: 90%;
}
.home-main .category {
  text-transform: uppercase;
  font-weight: bolder;
  padding-right: 1em;
}
.home-main .category a {
  text-decoration: none;
  color: #666666;
}
.home-main .date {
  padding-left: 1em;
}
.home-main .post-item img {
  margin-bottom: 1em;
}
.home-main .post-item:nth-child(even) img {
  float: left;
  margin-right: 3.5em;
}
.home-main .post-item:nth-child(odd) img {
  float: right;
  margin-left: 3.5em;
}
@media screen and (min-width: 1025px) {
  .markets .so-panel {
    height: 18em;
  }
  .home-main .posts-index .post-item {
    height: 18em;
  }
}
@media screen and (min-width: 600px) and (max-width: 1024px) {
  .markets .so-panel {
    min-height: 18em;
  }
  .home-main .posts-index .post-item {
    min-height: 20em;
  }
}
@media screen and (max-width: 599px) {
  .markets .so-panel {
    min-height: 20em;
  }
  .home-main .posts-index .post-item {
    min-height: 22em;
  }
  .zebra img {
    float: none !important;
    clear: both !important;
    margin: 0 auto !important;
  }
}
/* downloads */
.downloads_form {
  background: #f8f8f8;
  padding: 2em 2.5em;
  border-radius: 10px;
}
.downloads_form label {
  font-weight: bold;
  color: #003162;
}
.downloads_form input[type="radio"] {
  width: 17px;
  height: 17px;
  vertical-align: middle;
  margin-right: 0.5em;
}
.downloads_form p > label {
  display: inline-block;
  float: left;
  min-width: 20%;
  padding-top: 10px;
  margin-right: 1em;
}
.downloads_form p input[type="text"],
.downloads_form p input[type="email"],
.downloads_form p input[type="url"],
.downloads_form p input[type="tel"] {
  display: inline-block;
  width: auto;
}
@media screen and (max-width: 1024px) {
  .downloads_form p > label {
    width: 100%;
    margin-right: 0;
  }
  .downloads_form p input[type="text"],
  .downloads_form p input[type="email"] {
    width: 100%;
  }
}
/*# sourceMappingURL=style.css.map */