@font-face {
  font-family: 'hn';
  src: url("../fonts/hn-light-webfont.eot");
  src: url("../fonts/hn-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/hn-light-webfont.woff") format("woff"), url("../fonts/hn-light-webfont.ttf") format("truetype"), url("../fonts/hn-light-webfont.svg#helveticaneuewebfont") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'hn-medium';
  src: url("../fonts/hn-medium-webfont.eot");
  src: url("../fonts/hn-medium-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/hn-medium-webfont.woff") format("woff"), url("../fonts/hn-medium-webfont.ttf") format("truetype"), url("../fonts/hn-medium-webfont.svg#helveticaneuewebfont") format("svg");
  font-weight: normal;
  font-style: normal; }

body {
  font-family: 'hn', Geneva, Tahoma, sans-serif;
  font-size: 16px;
  line-height: 20px;
  margin: 0px;
  padding: 0px;
  height: 100%;
  background-color: white;
  background-image: url("../images/background.jpg");
  background-size: contain;
  background-repeat: repeat-y;
  background-attachment: fixed; }
  body a:active, body a:visited, body a:link {
    color: black;
    text-decoration: none; }

.kottertechniek #headerHolder {
  border-bottom: 3px solid #014289; }

.kottertechniek #header #menu .menuItem a:active, .kottertechniek #header #menu .menuItem a:visited, .kottertechniek #header #menu .menuItem a:link, .landingspagina #header #menu .menuItem a:active, .landingspagina #header #menu .menuItem a:visited, .landingspagina #header #menu .menuItem a:link {
  color: #014289; }

.kottertechniek #header #menu .menuItem a:hover, .landingspagina #header #menu .menuItem a:hover {
  color: #014289; }

.kottertechniek #header #menu .menuItem.selected a:active, .kottertechniek #header #menu .menuItem.selected a:visited, .kottertechniek #header #menu .menuItem.selected a:link, .landingspagina #header #menu .menuItem.selected a:active, .landingspagina #header #menu .menuItem.selected a:visited, .landingspagina #header #menu .menuItem.selected a:link {
  color: #014289; }

.kottertechniek #header #nav-toggle, .landingspagina #header #nav-toggle {
  background-image: url("../images/menubutton-kottertechniek.jpg"); }

.kottertechniek #header .buttons .button.left, .landingspagina #header .buttons .button.left {
  background-color: #ffd511;
  color: #014289; }

.kottertechniek #header .buttons .button.right, .landingspagina #header .buttons .button.right {
  background-color: #014289;
  color: white; }

.kottertechniek #routeButton, .landingspagina #routeButton {
  background-color: #014289; }

.kottertechniek a:hover, .landingspagina a:hover {
  color: #014289; }

.kottertechniek #mobilemenu, .landingspagina #mobilemenu {
  background-color: #ffd511; }
  .kottertechniek #mobilemenu .mobilemenuitem a:active, .kottertechniek #mobilemenu .mobilemenuitem a:visited, .kottertechniek #mobilemenu .mobilemenuitem a:link, .landingspagina #mobilemenu .mobilemenuitem a:active, .landingspagina #mobilemenu .mobilemenuitem a:visited, .landingspagina #mobilemenu .mobilemenuitem a:link {
    color: #014289;
    text-decoration: none; }
  .kottertechniek #mobilemenu .mobilemenuitem a:hover, .landingspagina #mobilemenu .mobilemenuitem a:hover {
    color: black; }
  .kottertechniek #mobilemenu .nav-collapse, .landingspagina #mobilemenu .nav-collapse {
    border-bottom: 3px solid #014289; }

.slangenservice #headerHolder {
  border-bottom: 3px solid black; }

.slangenservice #header #menu {
  left: 500px; }
  .slangenservice #header #menu .menuItem a:active, .slangenservice #header #menu .menuItem a:visited, .slangenservice #header #menu .menuItem a:link {
    color: black; }
  .slangenservice #header #menu .menuItem a:hover {
    color: #e20612; }
  .slangenservice #header #menu .menuItem.selected a:active, .slangenservice #header #menu .menuItem.selected a:visited, .slangenservice #header #menu .menuItem.selected a:link {
    color: #e20612; }

.slangenservice #header #nav-toggle {
  background-image: url("../images/menubutton-slangenservice.jpg"); }

.slangenservice #header .buttons .button.left {
  background-color: #e20612;
  color: white; }

.slangenservice #header .buttons .button.right {
  background-color: black;
  color: white; }

.slangenservice #routeButton {
  background-color: red; }

.slangenservice a:hover {
  color: #014289; }

.slangenservice .sideMenuItem a:hover {
  color: #e20612; }

.slangenservice #mobilemenu {
  background-color: #e20612; }
  .slangenservice #mobilemenu .mobilemenuitem a:active, .slangenservice #mobilemenu .mobilemenuitem a:visited, .slangenservice #mobilemenu .mobilemenuitem a:link {
    color: white;
    text-decoration: none; }
  .slangenservice #mobilemenu .mobilemenuitem a:hover {
    color: black; }
  .slangenservice #mobilemenu .nav-collapse {
    border-bottom: 3px solid black; }

.tradingcompany #headerHolder {
  border-bottom: 3px solid black; }

.tradingcompany #header #menu .menuItem a:active, .tradingcompany #header #menu .menuItem a:visited, .tradingcompany #header #menu .menuItem a:link {
  color: black; }

.tradingcompany #header #menu .menuItem a:hover {
  color: black; }

.tradingcompany #header #menu .menuItem.selected a:active, .tradingcompany #header #menu .menuItem.selected a:visited, .tradingcompany #header #menu .menuItem.selected a:link {
  color: black; }

.tradingcompany #header #nav-toggle {
  background-image: url("../images/menubutton-tradingcompany.jpg"); }

.tradingcompany #header .buttons .button.left {
  background-color: #a8a7a7;
  color: white; }

.tradingcompany #header .buttons .button.right {
  background-color: black;
  color: white; }

.tradingcompany #routeButton {
  background-color: #a8a7a7; }

.tradingcompany a:hover {
  color: black; }

.tradingcompany .sideMenuItem a:hover {
  color: black; }

.tradingcompany #mobilemenu {
  background-color: #a8a7a7; }
  .tradingcompany #mobilemenu .mobilemenuitem a:active, .tradingcompany #mobilemenu .mobilemenuitem a:visited, .tradingcompany #mobilemenu .mobilemenuitem a:link {
    color: white;
    text-decoration: none; }
  .tradingcompany #mobilemenu .mobilemenuitem a:hover {
    color: black; }
  .tradingcompany #mobilemenu .nav-collapse {
    border-bottom: 3px solid black; }

.landingspagina #header {
  height: 56px; }
  @media (min-width: 0px) {
    .landingspagina #header {
      height: 200px; } }
  @media (min-width: 450px) {
    .landingspagina #header {
      height: 200px; } }
  @media (min-width: 500px) {
    .landingspagina #header {
      height: 130px; } }
  @media (min-width: 920px) {
    .landingspagina #header {
      height: 100px; } }
  @media (min-width: 1600px) {
    .landingspagina #header {
      height: 56px; } }
  .landingspagina #header #slogan {
    position: absolute;
    font-family: 'hn-medium', Geneva, Tahoma, sans-serif;
    bottom: 16px;
    left: 10px;
    font-size: 22px !important;
    line-height: 28px; }
    @media (max-width: 770px) {
      .landingspagina #header #slogan {
        font-size: 18px; } }
    @media (max-width: 500px) {
      .landingspagina #header #slogan span {
        display: block; } }

.kottertechniek #header, .slangenservice #header, .tradingcompany #header {
  height: 105px; }
  @media (min-width: 0px) {
    .kottertechniek #header, .slangenservice #header, .tradingcompany #header {
      height: 145px; } }
  @media (min-width: 500px) {
    .kottertechniek #header, .slangenservice #header, .tradingcompany #header {
      height: 105px; } }
  @media (min-width: 760px) {
    .kottertechniek #header, .slangenservice #header, .tradingcompany #header {
      height: 145px; } }
  @media (min-width: 960px) {
    .kottertechniek #header, .slangenservice #header, .tradingcompany #header {
      height: 105px; } }

#headerHolder {
  position: relative;
  width: 100%;
  background-color: white; }
  #headerHolder #header {
    position: relative; }
    #headerHolder #header #logo {
      position: absolute;
      left: 6px; }
      @media (max-width: 500px) {
        #headerHolder #header #logo {
          top: auto;
          bottom: 14px; } }
      @media (min-width: 500px) {
        #headerHolder #header #logo {
          top: 6px;
          bottom: auto; } }
      @media (max-width: 500px) {
        #headerHolder #header #logo img {
          width: 86%; } }
    #headerHolder #header #menu {
      position: absolute;
      left: 450px;
      bottom: 14px; }
      @media (max-width: 760px) {
        #headerHolder #header #menu {
          display: none; } }
      @media (max-width: 1200px) {
        #headerHolder #header #menu {
          left: auto;
          right: 12px; } }
      #headerHolder #header #menu .menuItem {
        font-family: 'hn', Geneva, Tahoma, sans-serif;
        font-size: 26px;
        line-height: 20px;
        display: inline-block;
        margin-left: 40px; }
        #headerHolder #header #menu .menuItem.selected {
          font-family: 'hn-medium', Geneva, Tahoma, sans-serif; }
    #headerHolder #header .buttons {
      position: absolute;
      top: 10px;
      right: 10px; }
      #headerHolder #header .buttons .button {
        padding: 8px;
        min-width: 240px;
        border-radius: 100px;
        text-align: center; }
      @media (max-width: 960px) {
        #headerHolder #header .buttons .button {
          min-width: 80px; }
          #headerHolder #header .buttons .button.mail:after {
            content: 'sno liaM'; }
          #headerHolder #header .buttons .button.bel:after {
            content: 'Bel ons'; }
          #headerHolder #header .buttons .button span {
            display: none; } }
      #headerHolder #header .buttons .socialmedia, #headerHolder #header .buttons .button {
        display: inline-block;
        vertical-align: top;
        margin-left: 20px;
        width: 36px; }
    #headerHolder #header #nav-toggle {
      position: absolute;
      bottom: 16px;
      right: 16px;
      width: 20px;
      height: 20px;
      background-position: center center;
      background-repeat: no-repeat;
      cursor: pointer; }
      @media (min-width: 761px) {
        #headerHolder #header #nav-toggle {
          display: none; } }

#headerImagesHolder {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-bottom: 30%; }
  @media (min-width: 0px) {
    #headerImagesHolder {
      padding-bottom: 30%; } }
  @media (min-width: 960px) {
    #headerImagesHolder {
      padding-bottom: 50%; } }
  @media (min-width: 1020px) {
    #headerImagesHolder {
      padding-bottom: 40%; } }
  @media (min-width: 1200px) {
    #headerImagesHolder {
      padding-bottom: 30%; } }
  #headerImagesHolder .header-slideshow {
    position: absolute;
    width: 100%;
    height: 100%; }
    #headerImagesHolder .header-slideshow .banner {
      width: 100%;
      height: 100%; }
  #headerImagesHolder .holder {
    position: absolute;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 200; }
    @media (max-width: 960px) {
      #headerImagesHolder .holder {
        display: none; } }
    #headerImagesHolder .holder .textHolder .col-1-3 {
      background-color: rgba(255, 255, 255, 0.8); }

@media (min-width: 0px) {
  .holder-replacer {
    display: block; } }

@media (min-width: 960px) {
  .holder-replacer {
    display: none; } }

.landingspagina .images img {
  width: 100%; }

.landingspagina .images .header-slideshow {
  margin: 18px 0px; }

@media (max-width: 1020px) {
  .landingspagina table td {
    display: block;
    box-sizing: border-box;
    clear: both;
    width: 100%; } }

.landingspagina .row {
  margin: 8px; }

.landingspagina .white {
  background-color: white; }
  .landingspagina .white img {
    margin: 0; }

@media (min-width: 0px) {
  .landingspagina .paddingLogo {
    padding: 18px;
    text-align: center; }
    .landingspagina .paddingLogo img {
      width: 80%; } }

@media (min-width: 1020px) {
  .landingspagina .paddingLogo {
    padding: 0px 0px 0px 45px;
    text-align: left; }
    .landingspagina .paddingLogo img {
      width: 100%; } }

@media (max-width: 1020px) {
  .landingspagina .paddingArrow {
    bottom: 22%;
    margin-right: 15px; } }

@media (min-width: 1020px) {
  .landingspagina .paddingArrow {
    padding: 0px 60px 0px 0px; } }

#contentHolder #content .logos img {
  width: 100%; }

#contentHolder #content .padContact {
  padding: 18px 18px 18px 78px; }
  @media (min-width: 0px) {
    #contentHolder #content .padContact {
      padding: 18px; } }
  @media (min-width: 1030px) {
    #contentHolder #content .padContact {
      padding: 18px 18px 18px 78px; } }

@media (min-width: 0px) {
  #contentHolder #content .padlogoContact {
    padding-top: 16px; } }

@media (min-width: 780px) {
  #contentHolder #content .padlogoContact {
    padding-top: 70px; } }

@media (min-width: 0px) {
  #contentHolder #content .logoContact {
    max-width: 260px; } }

@media (min-width: 780px) {
  #contentHolder #content .logoContact {
    max-width: 300px; } }

#contentHolder #content .product {
  margin-bottom: 18px;
  padding-top: 18px;
  border-top: 1px solid black; }
  @media (max-width: 960px) {
    #contentHolder #content .product .padRight9 {
      padding: 0px !important; } }

#contentHolder #content .product:first-of-type {
  border-top: 0px;
  padding-top: 0px; }

#contentHolder #content .images img {
  width: 100%; }

#contentHolder #content .images .sideImage {
  padding-bottom: 36px; }

#contentHolder #content .images .wrap {
  margin-top: 9px;
  display: flex; }
  #contentHolder #content .images .wrap .col {
    margin-right: 9px;
    flex: 1;
    max-width: 24%; }
    #contentHolder #content .images .wrap .col:last-of-type {
      margin-right: 0; }

#contentHolder #content .sideMenu .sideMenuItem, #contentHolder #content .sideMenu .sideMenuSubItem {
  font-size: 20px; }
  #contentHolder #content .sideMenu .sideMenuItem img, #contentHolder #content .sideMenu .sideMenuSubItem img {
    margin-left: 20px;
    vertical-align: middle; }
    @media (max-width: 1030px) {
      #contentHolder #content .sideMenu .sideMenuItem img, #contentHolder #content .sideMenu .sideMenuSubItem img {
        height: 15px; } }

#contentHolder #content .sideMenu .sideMenuItem {
  margin: 5px 0px; }

#contentHolder #content .sideMenu .sideMenuSubItem {
  font-size: 16px;
  min-height: 20px;
  line-height: 30px; }

#contentHolder #content .sideMenu .selected {
  font-family: 'hn-medium', Geneva, Tahoma, sans-serif; }

#maps {
  position: relative;
  border-top: 1px solid black; }
  #maps #contact {
    position: absolute;
    left: 50%;
    top: 18px;
    z-index: 200; }
    #maps #contact #routebeschrijving {
      width: 400px;
      background-color: white; }
      @media (max-width: 760px) {
        #maps #contact #routebeschrijving {
          display: none; } }
      #maps #contact #routebeschrijving #routeInput {
        float: left;
        padding: 8px;
        width: 200px;
        border: 1px solid black; }
      #maps #contact #routebeschrijving #routeButton {
        color: white;
        padding: 6px 8px 10px 8px;
        float: left;
        height: 15px;
        width: 100px;
        text-align: center; }

.pad18 {
  padding: 18px; }

.padRight9 {
  padding-right: 9px; }

.padLeft9 {
  padding-left: 9px; }

.padTop9 {
  padding-top: 9px; }

.col-1-2 {
  width: 50%; }
  @media (min-width: 0px) {
    .col-1-2 {
      width: 100%; } }
  @media (min-width: 960px) {
    .col-1-2 {
      width: 50%; } }

.col-1-3 {
  width: 33.3%; }
  @media (min-width: 0px) {
    .col-1-3 {
      width: 100%; } }
  @media (min-width: 960px) {
    .col-1-3 {
      width: 33.3%; } }

.col-1-4 {
  width: 25%; }
  @media (min-width: 0px) {
    .col-1-4 {
      width: 100%; } }
  @media (min-width: 760px) {
    .col-1-4 {
      width: 50%; } }
  @media (min-width: 960px) {
    .col-1-4 {
      width: 25%; } }

.col-1-6 {
  width: 16%; }
  @media (min-width: 0px) {
    .col-1-6 {
      width: 100%; } }
  @media (min-width: 960px) {
    .col-1-6 {
      width: 16%; } }

.col-2-3 {
  width: 66.6%; }
  @media (min-width: 0px) {
    .col-2-3 {
      width: 100%; } }
  @media (min-width: 960px) {
    .col-2-3 {
      width: 66.6%; } }

.arrow {
  width: 10%; }
  @media (max-width: 1020px) {
    .arrow {
      padding: 0px 0px 20px 0px; } }

.flLeft {
  float: left; }

.clear {
  clear: both; }

.textRight {
  text-align: right; }

.posRel {
  position: relative; }

h1 {
  font-family: 'hn', Geneva, Tahoma, sans-serif;
  font-size: 28px !important;
  padding: 0px;
  margin: 4px 0px;
  line-height: 40px; }

h2 {
  font-family: 'hn', Geneva, Tahoma, sans-serif;
  font-size: 24px !important;
  padding: 0px;
  margin: 4px 0px;
  line-height: 30px; }

h3 {
  font-family: 'hn', Geneva, Tahoma, sans-serif;
  font-size: 20px !important;
  padding: 0px;
  margin: 4px 0px;
  line-height: 30px; }

.pageWidth {
  margin: auto auto;
  width: 1640px; }
  @media (min-width: 0px) {
    .pageWidth {
      width: 100%; } }
  @media (min-width: 1720px) {
    .pageWidth {
      width: 1720px; } }

#mobilemenu {
  background-color: yellow;
  overflow: hidden; }
  @media (min-width: 0px) {
    #mobilemenu {
      display: block; } }
  @media (min-width: 760px) {
    #mobilemenu {
      display: none; } }
  #mobilemenu .mobilemenuitem {
    font-size: 14px;
    font-family: 'mpsemibold', Geneva, Tahoma, sans-serif;
    padding: 3px 20px; }
    #mobilemenu .mobilemenuitem a:active, #mobilemenu .mobilemenuitem a:visited, #mobilemenu .mobilemenuitem a:link {
      color: white;
      text-decoration: none; }
    #mobilemenu .mobilemenuitem a:hover {
      color: red; }
  #mobilemenu .sub {
    padding-left: 60px; }
  #mobilemenu .nav-collapse {
    padding: 6px 0px;
    border-bottom: 1px solid purple; }

.copyright {
  text-align: center;
  font-size: 12px;
  padding: 4px; }
  .copyright span {
    margin: 0px 10px; }
    @media (max-width: 768px) {
      .copyright span {
        display: inline-block; } }

.mail {
  unicode-bidi: bidi-override;
  direction: rtl; }

.embeddedContent {
  position: relative;
  width: 100% !important; }

.embeddedContent:before {
  display: block;
  content: "";
  width: 100% !important;
  padding-top: 56%; }

.embeddedContent > iframe {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%; }