/* Copyright 2011-2014 Haver Nieuwe Media.
 * No parts of this code or its results can be used, reused or modified without
 * explicit written consent of Haver Nieuwe Media.
 */
/* 
    Created on : 4-okt-2014, 17:35:28
    Author     : Harmen
*/

@import url('//fonts.googleapis.com/css?family=Lora:400,400i|BenchNine:700&subset=latin-ext');
html,body
{
  
  min-width: 920px;
  min-height: 100%;
  
  font-family: 'Lora', serif;
  font-size: 13pt;
  font-weight: 400;
   
  margin: 0 0 0 0;
  padding: 0;
  
  color: #585858;

  line-height: 1.5em;
}
b,strong
{
  font-weight: 700;
}
body
{
  padding: 0 0 0 0;
}
a
{
  text-decoration: none;

  color: rgb(66,139,151);
}
a:hover, a:active
{
  text-decoration: underline;
}

::selection
{
  background: rgb(129,21,80); /* WebKit/Blink Browsers */
  
  color: #ffffff;
}
::-moz-selection
{
  background: rgb(129,21,80); /* WebKit/Blink Browsers */
  
  color: #ffffff;
}
.moreheaderspacing h1, .moreheaderspacing h2, .moreheaderspacing h3, .moreheaderspacing h4, .moreheaderspacing h5, .moreheaderspacing h6, .moreheaderspacing h7
{
  padding: 1em 0 2em 0;
}
h1,h2,h3,h4,h5,h6,h7
{  
  display: block;
  
  width: 100%;
  
  margin: 0 0 0 0;

  padding: .8em 0 .6em 0;  

  overflow: hidden;
  
  font-family: 'BenchNine', sans-serif;
  font-weight: 700;
  
  line-height: 125%;
  
  color: rgb(129,21,80);
}
h1 *, h2 *, h3 *, h4 *, h5 *, h6 *, h7 *
{
  color: rgb(129,21,80);
}

hr
{
  border: 0;
  border-bottom: 2px dotted rgb(73,10,61);
    
  width: 100%;
  left: 0%;
  
  padding-top: 4%;
  margin-bottom: 2%;
}
h1
{
  padding: .5em 0 .5em 0;
  margin: 0 0 0 0;

  font-size: 4.0em;
}
h2
{
  font-size: 3.5em;
}
h3
{
  font-size: 2.3em;
}
h4
{
  font-size: 1.9em;
}
h4, h4 *
{
  color: rgb(233,127,2);
}
h5
{
  display: inline-block;
  
  font-size: 1em;
  
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  
  width: auto;
}
.home h1
{
  font-size: 2em;
  
  text-align: center;
}
.home h2
{
  font-size: 3em;
  
  text-align: center;
}
.home h3
{
  font-size: 1.6em;

  font-weight: normal;

  text-align: center;
}
.home h3, .home h3 *
{
  color: rgb(233,127,2);
}
.home h2 + h3
{
  padding-top: 0;
  padding-bottom: .8em;
}
.home h4
{
  font-size: 1em;

  text-align: center;
}
.infobox
{
  background-color: rgb(0,88,163);
}
.infobox.warning
{
  background-color: rgb(228,5,31);
}
.container
{
  width: 100%;
}

nav.root
{
  box-sizing: border-box;
  z-index: 1100;
    
  position: fixed;
  
  top: 0;
  left: 0;
  right: 0;
  
  height: 80px;
  
  padding: 0 0 0 0;
  
  overflow: visible;
  
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 1.1em;
  
  background-color: rgb(255,255,255);
}
nav.root .maxwidth
{
  max-width: 1500px;
  
  padding: 0 1vw 0 1vw !important;

  margin: 0 auto 0 auto;
}
nav.root .buttons
{
  position: relative;
  
  display: inline-block;
  
  width: auto;
  height: 80px;
  
  left: 4vw;
  
  padding-bottom: 8px;
  
  line-height: 75px;
}
nav.root .buttons a
{
  display: inline-block;
  
  padding: 0 5px 0 6px;
  margin: 0 15px 0 0;
  
  vertical-align: middle;
  
  text-transform: lowercase;
  text-decoration: none;
  
  color: rgb(73,10,61);
  height: 75px;
  line-height: 75px;
}
@media all and (min-width: 1261px) 
{
  nav.root .buttons
  {
    display: inline-block !important;
  }
  nav.root .buttons a.purpleborder
  {
    margin-left: 30px;
    margin-top: 7.5px;
    margin-bottom: 12.5px;

    padding: 0 10px 0 11px;

    height: 50px;
    line-height: 50px;

    border: 2px solid rgb(189,21,80);
  }
  nav.root .buttons a.purpleborder.active, nav.root .buttons a.purpleborder:hover, nav.root .buttons a.purpleborder.active *, nav.root .buttons a.purpleborder:hover *
  {
    color: white !important;

    background-color: rgb(170,19,72);
    
    border: 2px solid rgb(170,19,72);
  }
}

nav.root .buttons a:hover, nav.root .buttons a.active
{
  color: rgb(189,21,80);
}

.menumobile
{
  display: none;
  
  position: absolute;
  
  right: 15px;
  top: 15px;  
}
.menumobile *
{
  font-size: 40pt !important;
  
  color: rgb(228,110,164) !important;
  
  text-shadow: rgb(255,255,255) 3px 3px 3px;
}

/* LOGOS */
a.logo
{
  position: relative;
  
  display: inline-block;
  
  float: left;
  
  left: 1vw;
  
  padding: 0 0 0 0 !important; /* alignment for the buttons */
  margin: 10px 0 0 0 !important;
  
  line-height: initial;
  background: transparent !important;
}
a.logo img
{

  height: 60px;
}
img.logoshort
{
  float: right;
  
  height: 80px;
}

/* CONTAINER+SECTIONS */
div#container
{
  padding-top: 80px;
  min-height: calc(100vh - 110px - 1.3em);
}

footer
{
  padding: 1em 0 1em 0;
  
  width: 100%;
  
  line-height: 1.1em;
}

footer .bottom
{
  text-align: center;
  
  font-size: 0.8em;
}

section
{
  padding: 30px 1vw 30px 1vw;
  
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}
@media all and (min-width: 1500px)
{
  section.fullwidth.limitinnerwidth
  {
    max-width: 1500px;
    padding-left: calc(1vw + ((100% - 1500px) / 2)) !important;
    padding-right: calc(1vw + ((100% - 1500px) / 2)) !important;
    
    margin-left: 0;
    margin-right: 0;
  }
}
section.fullwidth.limitinnerwidth h1
{
  position: relative;

  max-width: 1500px;

  margin-left: auto;
  margin-right: auto;

  padding-left: 1vw; 
  padding-right: 1vw;
}

section.no-margin-border-bottom + div.border
{
  margin-top: -22.5px;
}

section:not(.no-border-bottom):not(:last-of-type):not(.never) + div.border
{
  height: 50px;
  width: 100%;
  
  content: " ";
  
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAFCAYAAACEhIafAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAuIwAALiMBeKU/dgAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAAAAWdEVYdENyZWF0aW9uIFRpbWUAMDIvMjQvMTf7n5acAAAAFElEQVQImWNgiFi8mYmBgYEBjQAAJRYBtz3WG0YAAAAASUVORK5CYII=');
  background-repeat: repeat-x;
  background-position-y: center;
}
section:not(.no-border-bottom):not(:last-of-type):not(.never) + div.border::after
{
  position: absolute;
  
  left: 50%;
  margin-left: -.4em;
  margin-top: 0.2em;
  
  display: inline-block;
    
  content: '\f0ab';
  
  color: #E31C35;
  
  background-color: white;
  
  font-family: FontAwesome;
  font-style: normal;
  
  font-size: 3.2em;
}

div.payoff
{
  box-sizing: border-box !important;

  padding: 2% 0 0 0;
  margin: 0 0 0 0;
}
div.payoff p, div.payoff a, p.payoff
{
  color: rgb(228,6,35);
  
  font-family: 'BenchNine', sans-serif;
  font-weight: 400;
  
  font-size: 2.4em;
  line-height: 1.5em;
}
div.payoff p
{
  margin-bottom: 4%;
}
div.payoff p:last-child
{
  margin-bottom: 0;
}
.bgred div.payoff p, .bgred div.payoff a, .bgblue div.payoff p, .bgblue div.payoff a, .bgred p.payoff, .bgblue p.payoff, .bgpurple div.payoff p, .bgpurple div.payoff a
{
  color: rgb(255,255,255);
}

.white, .white *
{
  color: rgb(255,255,255) !important;
}
.red, .red *
{
  color: rgb(189,21,80) !important;
}
.blue, .blue *
{
  color: rgb(66,139,151) !important;
}
.purple, .purple *
{
  color: rgb(129,21,80) !important;
}
.orange, .orange *
{
  color: rgb(233,127,2) !important;
}
.bgred
{
  background-color: rgb(189,21,80);
  
  color: rgb(255,255,255);
}

.bgblue
{
  background-color: rgb(66,139,151);
  
  color: rgb(255,255,255);
}

.bggrey
{
  background-color: rgb(200,200,200);
  
  color: rgb(0,0,0);
}
.bgpurple
{
  background-color: rgb(73,10,61) !important;

  color: rgb(255,255,255);
}

.bgred *, .bgblue *, .bgpurple *
{
  color: rgb(255,255,255);
}
.bggrey *
{
  color: rgb(39,9,0);
}

.bgred .hnm-readmore-overlay
{  
  background-color: rgb(228,6,35);
  
  background: -webkit-linear-gradient(rgba(228,6,35,0), rgb(228,6,35)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(rgba(228,6,35,0), rgb(228,6,35)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgba(228,6,35,0), rgb(228,6,35)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgba(228,6,35,0), rgb(228,6,35)); /* Standard syntax */
}

.bgblue .hnm-readmore-overlay
{
  background-color: rgb(0,88,163);
  
  background: -webkit-linear-gradient(rgba(0,88,163,0), rgb(0,88,163)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(rgba(0,88,163,0), rgb(0,88,163)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgba(0,88,163,0), rgb(0,88,163)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgba(0,88,163,0), rgb(0,88,163)); /* Standard syntax */
}

.bggrey .hnm-readmore-overlay
{
  background-color: rgb(200,200,200);
  
  background: -webkit-linear-gradient(rgba(200,200,200,0), rgb(0,88,163)); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(rgba(200,200,200,0), rgb(0,88,163)); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(rgba(200,200,200,0), rgb(0,88,163)); /* For Firefox 3.6 to 15 */
  background: linear-gradient(rgba(200,200,200,0), rgb(0,88,163)); /* Standard syntax */
}
.bgred ul.hnm-tabs.moodboard li, .bgblue ul.hnm-tabs.moodboard li
{
  background-color: transparent;
}
.bgred ul.hnm-tabs.moodboard li:hover,.bgblue ul.hnm-tabs.moodboard li:hover
{
  background-color: transparent;
  border: 3px solid white;
}
.bgred ul.hnm-tabs.moodboard li.hnm-tabs-active, .bgred ul.hnm-tabs.moodboard li.hnm-tabs-active:hover,
.bgblue ul.hnm-tabs.moodboard li.hnm-tabs-active, .bgblue ul.hnm-tabs.moodboard li.hnm-tabs-active:hover
{
  background-color: transparent;
  border: 3px solid white;
}

form.light input[type="text"],form.light input[type="email"],form.light input[type="password"],form.light select,form.light textarea
,form.light input[type="text"]:focus,form.light input[type="text"].focus,form.light input[type="email"]:focus,form.light input[type="email"].focus,form.light input[type="password"]:focus,form.light input[type="password"].focus, form.light select:focus, form.light select.focus, form.light textarea:focus, form.light textarea:focus
{
  box-sizing: border-box;
  
  width: 40%;
    
  border: 1px solid rgb(229,229,229);
  
  background-color: transparent;

  box-shadow: none !important;
}
form.light option
{
  background-color: white !important;
}
form.light .multiline
{
  margin-left: 1%;
}

form.light.nomargins input[type="text"],form.light.nomargins input[type="email"],form.light.nomargins input[type="password"],form.light.nomargins select, form.light.nomargins textarea
{
  width: 100%;
  
  margin: 0;
}

input[type="submit"], input[type="button"], button, .fancybutton
{
  box-sizing: border-box;
  
  padding: 10px 18px 10px 18px !important;
  margin: 0px 2px 0 0 !important;
  
  
  font-size: 1em;
  font-weight: normal;
  
  border: 0;
  
  background-color: rgb(66,139,151);

  color: white;
  
  outline: none;
  
  vertical-align: top;
  
  overflow: visible;
  
  transition: background 0.25s linear;
  
  cursor: pointer;
}
.fancybutton:active, input[type="submit"]:active, input[type="button"]:active, button:active
{
  padding: 12px 16px 8px 20px !important;
}
.fancybutton.light:active, input[type="submit"].light:active, input[type="button"].light:active, button.light:active
{
  padding: 10px 14px 6px 18px !important;
}
input[type="submit"]:not(.displaynone), input[type="button"]:not(.displaynone), button:not(.displaynone), .fancybutton:not(.displaynone)
{
  display: inline-block; 
}
.fancybutton.light
{
  padding: 8px 16px 8px 16px !important;
  
  border: 2px solid rgb(66,139,151);
  
  background-color: white !important;
}
.fancybutton.light, .fancybuton.light *
{
  color: rgb(66,139,151);
}
.fancybutton.bold
{
  font-weight: bold;
}
.fancybutton.red, input[type="submit"].red, input[type="button"].red, button.red
{
  background-color: rgb(189,21,80);

  color: white;
}
.fancybutton.red.light, .fancybutton.red.light *
{
  color: rgb(189,21,80);
}
.fancybutton.red.light
{
  border: 2px solid rgb(189,21,80);
}
.fancybutton.purple, input[type="submit"].purple, input[type="button"].purple, button.purple
{
  background-color: rgb(129,21,80);
  color: white !important;
}
.fancybutton.purple.light, .fancybutton.purple.light *
{
  color: rgb(129,21,80) !important;
}
.fancybutton.purple.light
{
  border: 2px solid rgb(129,21,80);
}
.fancybutton.orange, input[type="submit"].orange, input[type="button"].orange, button.orange
{
  background-color: rgb(233,127,2);
  color: white !important;
}
.fancybutton.orange.light, .fancybutton.orange.light *
{
  color: rgb(233,127,2) !important;
}
.fancybutton.orange.light
{
  border: 2px solid rgb(233,127,2);
}
.fancybutton.green, input[type="submit"].green, input[type="button"].green, button.green
{
  background-color: rgb(138,155,5);
}
.fancybutton.green.light, .fancybutton.green.light *
{
  color: rgb(124,139,13) !important;
}
.fancybutton.green.light
{
  border: 2px solid rgb(124,139,13);
}

.fancybutton *
{
  color: white !important;
  
  text-decoration: none !important;
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover, .fancybutton:hover
{
  background-color: rgb(151,58,101);
  
  text-decoration: none;
  
  color: white !important;
}
input[type="submit"]:active, input[type="button"]:active, button:active,.fancybutton:active
{
  background-color: rgb(1,71,114);
  border-color: rgb(1,71,114);
}
.fancybutton.red:hover, input[type="submit"].red:hover, input[type="button"].red:hover, button.red:hover
{
  background-color: rgb(170,19,72) !important;
  border-color: rgb(170,19,72);
  color: white !important;
}
.fancybutton.purple:hover, input[type="submit"].purple:hover, input[type="button"].purple:hover, button.purple:hover, .fancybutton.purple.light:hover, input[type="submit"].purple.light:hover, input[type="button"].purple.light:hover, button.purple.light:hover, .fancybutton.purple:hover, input[type="submit"].purple:hover, input[type="button"].purple:hover, button.purple:hover
{
  background-color: rgb(66,9,55) !important;
  border-color: rgb(66,9,55);
  color: white !important;
}
.fancybutton.purple.light:hover *, input[type="submit"].purple.light:hover *, input[type="button"].purple.light:hover *, button.purple.light:hover *
{
  color: white !important;
}
.fancybutton.orange:hover, input[type="submit"].orange:hover, input[type="button"].orange:hover, button.orange:hover, .fancybutton.orange.light:hover, input[type="submit"].orange.light:hover, input[type="button"].orange.light:hover, button.orange.light:hover, .fancybutton.orange:hover, input[type="submit"].orange:hover, input[type="button"].orange:hover, button.orange:hover
{
  background-color: rgb(209,114,2) !important;
  border-color: rgb(209,114,2);
  color: white !important;
}
 .fancybutton.orange.light:hover *, input[type="submit"].orange.light:hover *, input[type="button"].orange.light:hover *, button.orange.light:hover *
 {
    color: white !important;
 }
.fancybutton.green:hover, input[type="submit"].green:hover, input[type="button"].green:hover, button.green:hover
{
  background-color: rgb(124,139,13) !important;
  border-color: rgb(124,139,13);
  color: white !important;
}


/* MOBILE */
@media all and (max-width: 720px)
{
  html,body, nav.root, section
  {
    min-width: 100% !important;
    width: 100% !important;
  }
  
  .home h1
  {
    font-size: 2em;
  }
  .home h2
  {
    font-size: 2.0em;
  }
  .home h3
  {
    font-size: 1.3em;
  }
  
  nav.root
  {
    height: 64px !important;
  }
  
  .payoff
  {
    margin-top: 5% !important;
  }
  
  .payoff:first-of-type
  {
    margin-top: initial !important;
  }
  
  .payoff p, .payoff a
  {
    font-size: 2em !important;
    
    margin: initial !important;
    padding: initial !important;
  }
  
  .menumobile
  {
    display: inline-block;
    
    top: 10px;
    right: 10px;
  }
  
  .menumobile *
  {
    font-size: 34pt !important;
  }
  
  a.logo, a.branding
  {
    float: left;

    padding: 0 0 0 0 !important; /* alignment for the buttons */
    margin: 7px 0 0 0 !important;
  }
  
  form.light input[type="text"],form.light input[type="email"],form.light input[type="password"],form.light select,form.light textarea
  ,form.light input[type="text"]:focus,form.light input[type="text"].focus,form.light input[type="email"]:focus,form.light input[type="email"].focus,form.light input[type="password"]:focus,form.light input[type="password"].focus, form.light select:focus, form.light select.focus, form.light textarea:focus, form.light textarea:focus
  {
    width: 100%;
  }
  
  a.logo img, a.branding img
  {
    height: 50px;
  }
  
  div#container
  {
    padding-top: 64px !important;
  }
  
  ul.hnm-tabs.moodboard li
  {
    width: 95%;
    
    padding-bottom: 60%;
  }
  
  ul.hnm-tabs.moodboard li.hastext
  {
    background-position: center 1.6em !important;
  }
}

/* Mobile Menu */
@media all and (max-width: 1260px) 
{
  /* rewrite menu whenever available size is lower than 920px */

  html,body, nav.root, section
  {
    min-width: 100% !important;
    width: 100% !important;
  }
  
  .menumobile
  {
    display: block;
  }
  
  div.homebox .header h1
  {
    font-size: 3em; 
  }
  
  nav.root .buttons
  {
    display: none;
    
    position: absolute !important;

    top: 64px;
    left: 0;
    
    width: 100%;
  }
  
  nav.root .buttons a
  {
    display: block;

    width: 100%;
    height: 40px;
    line-height: 40px;
    
    margin: 0;
    padding: 5px;
    
    border-bottom: 1px solid rgb(228,110,164);
    
    font-size: 1.2em;
    
    background-color: rgb(255,255,255);
  }
  
  div.payoff p, div.payoff a
  {
    font-size: 2em !important;
    
    margin: initial !important;
    padding: initial !important;
  }

}