/* colors
rood: ea2e4c
grijze tekst: 808d8e
5F656B
717980

*/
HTML          { height: 100% }
BODY          { height: 100%; background-color: #ffffff; font: normal 12px/1.81em "Helvetica", "Arial", sans-serif; color: #717980 }
.c            { width: 100%; height: 0; line-height: 0; clear: both; float: none }
textarea      { font: inherit }
#pagecontainer   { width: 100%; height: 100% }
#page            { width: 1240px; margin: 0 auto; background-color: #ffffff; min-height: 100%}
#header          { padding: 0 25px}
#headerlogo      { clear: both }
#pagecontent     { clear: both; padding: 35px 0 8px 25px; min-height: 300px }

A, 
A:visited  { color: #ea2e4c; text-decoration: none } 
A:hover    { text-decoration: none; border-bottom: 1px solid #ea2e4c }     
.columnimage A:hover,
#headerlogo A:hover { border: none !important }
HR,
#pagecontent HR,
#popup HR            { display: block; height: 1px !important; border: none; background-color: #b2b2b2; width: auto; clear: both }
#pagecontent HR      { margin: 32px 41px 19px 16px }
HR.red,
#pagecontent HR.red  { background-color: #ea2e4c }
#pagecontent UL      { margin: 0 0 0 15px; padding: 0; list-style-image: url('../img/bullet.gif') }
#pagecontent OL      { margin: 0 0 0 20px; padding: 0;list-style-type: decimal }
#pagecontent UL.red  { list-style-image: url('../img/bullet-red.gif') }

#nav             { float: right; margin-right: 16px; font-size: 12px }
#nav A           { display: inline-block; margin-left: 18px; color: #000000; text-decoration: none; line-height: 12px }

#breadcrumb      { float: left; margin-left: 16px; font-size: 12px; line-height: 1.81em  }
#breadcrumb A,
#breadcrumb A:visited  { color: #000000 }

.mono            { font-family: "Andale Mono", "Lucida Console", "Courier New", monospace; color: #000000 }
A.mono,
A:visited.mono,
.mono A,
.mono A:visited  { color: #000000; border-bottom: 1px solid #000000; padding-bottom: 1px; text-decoration: none }
A:hover.mono,
.mono A:hover    { color: #ea2e4c !important; text-decoration: none !important; border-color: #ea2e4c }

#payoff          { min-height: 31px; position: relative; top:-4px }


/* section */
.section { float: none; clear: both; margin-bottom: 55px }
.section.nobottommargin { margin-bottom: -32px !important }

/* COLUMNS */
.column        { width: 397px; float: left }
.column.flex     { width: 30%; margin: 10px 16px 70px 16px; border-left: 1px solid #ffffff }
.column.right    { width: 30%; float: right; margin: 146px 0 70px 0 }
.column.c2       { width: 48% }
.column.flex.c2  { width: 47% }
.column.flex.c3  { width: 30% }
.column.flex.c4  { width: 22% }
.column.flex.c5  { width: 19.0%; margin-right: 10px; margin-left: 0 }
.column.flex.c6  { width: 15.5%; margin-right: 10px; margin-left: 0 }
.column.flex.lined { border-color: #b2b2b2  }
.column.flex:first-child  { margin-left: 0 !important }
.column.flex.lined:first-child  { border-left: none !important }
.column.bigtext    { width: 398px }
.bigtext           { font-size: 116.6%; line-height: 1.81em }
.bigtext P         { margin-bottom: 1em }
P.bigdate           { margin-top: 4em; margin-bottom: 0 }
.column.wide       { width: 62% }
.column.bigimg     { width: 658px; float: right; margin-right: 41px }
.column.bigimg.lft { float: left; margin-right: 95px; margin-left: 16px }
.columntext        { padding: 10px 16px 70px 16px; min-height: 140px }
.columntext IMG    { margin-bottom: 10px }

#pagecontent .columntext HR  { margin-left: 0; margin-right: 0; width: 100% }
.column.flex .columntext     { padding: 0 16px }
#pagecontent .column.flex HR { display: none; margin: 36px 0 3px; clear: both }

.column.bigtext .columntext  { padding: 0 0 0 16px }
.column.right .columntext    { padding: 0 40px 0 0 }
.column P         { clear: both; float: none }
.column .quoted   { font-size: 116.6%; line-height: 1.81em; padding-left: 36px; background: url('../img/quote.gif') 0 0 no-repeat; color: #ea2e4c; margin-top: 30px }
.column .quoted.nobg   { background: none }
.column P.small   { font-size: 9px }
.column H1     { font-size: 60px; line-height: 1.2em; font-family: "LatoLight", "Helvetica", "Arial", sans-serif; text-transform: uppercase; float: left; clear: both; border-bottom: 1px solid #808d8e; padding-bottom: 10px; margin: 30px 0; color: #808d8e }
img.wideimage { position: relative; left: 16px }
H2     { font-size: 30px; line-height: 1.5em; font-family: "LatoLight", "Helvetica", "Arial", sans-serif; text-transform: uppercase; float: left; clear: both; border-bottom: 1px solid #808d8e; margin: 30px 0; color: #808d8e }
H3     { text-transform: uppercase }
H4     { margin-bottom: 1em }
H5     { margin-bottom: 1em }

/* icons PDF and PRINT */
A.icon         { display: block; background-repeat: no-repeat; height: 20px; padding-left: 20px; background-position: 0% 50%; border-bottom: 1px solid transparent }
A.icon.pdf     { background-image: url('../img/pdf.png'); width: 55px }
A.icon.pdf.longer { width: 150px }
A.icon.print   { background-image: url('../img/print.png'); width: 25px }
A.icon.perma   { background-image: url('../img/perma.png'); width: 55px }
LI.rss      { list-style-image: url('../img/rss.png') }
LI.twitter  { list-style-image: url('../img/twitter.png') }
LI.linkedin { list-style-image: url('../img/linkedin.png') }
LI.facebook { list-style-image: url('../img/facebook.png') }
A.icon:hover { border-bottom-color: #ea2e4c }

/* footer */
#footer          { font-size: 12px; line-height: 1.81em; color: #808d8e; clear: both; width: auto; padding: 0 41px 16px 41px }
#footercontent   { padding-top: 10px }
#footer HR       { display: block; height: 1px; border: none; background-color: #b2b2b2; width: auto; margin: 16px 0; clear: both }



/* popup / lightbox */
.popup { width: 100%; max-width: 500px; padding: 5px 40px; background-color: #ffffff }
.popup TD        { padding: 0 14px 20px }
.popup .leftcol  { width: 40%; text-align: right }
.popup .rightcol { width: 60% }
#pagecontent>.popup    { margin: 40px 100px; background-color: #f7f7f7; padding: 20px 40px }
.fancybox-close:hover  { border: none !important }
.fancybox-image        { margin-top: 18px !important }
#pagecontent .popup HR { margin: 0 0 12px 0 }
.popup UL      { list-style-image: url('../img/bullet.gif') }

IMG.inline   { text-align: left; margin-bottom: -4px  }
IMG.leftside { position: relative; left: -35px; top: 28px }

/* twitter */
#pagecontent #twitter HR { margin: 16px 0 16px 0 }
#twitter .date           { font-size: 9px }
#twitter .navigatie      { margin-top: -10px; width: 100% }
#twitter .navigatie A      { line-height: 1.3em; border-bottom: 1px solid transparent }
#twitter .navigatie A:hover { border-bottom-color: #ea2e4c }
#twitter .navigatie .up    { display: block; float: left; margin-bottom: 16px }
#twitter .navigatie .down  { display: block; float: right; margin-bottom: 16px }
#twitter #twitterlink      { margin-top: 0; float: left; clear: left }
#twitter .navigatie IMG    { margin-bottom: 0 !important; width: 12px !important; height: 12px !important }

/* contactform */
.contactform  { width: 100% }
.contactform TH   { text-align: right; padding-right: 16px; vertical-align: top; width: 10% }
.contactform TD   { width: 90% }
.contactform .txt { width: 100%; border-width: 1px; border-style: inset }
.contactform .btn { border: none; background-color: #ffffff; padding: 0; color: #ea2e4c }
.contactform .btn:hover { border-bottom: 1px solid #ea2e4c }

INPUT.txt { height: 1.4em; margin: 2px 0 }
.alert   { margin: 0 0 16px 0 }
.alert P { color: #ea2e4c }






/* ###################### 
   ##  RESPONSIVENESS  ##
   ###################### */

/* styles for smaller desktops/laptops (three columns) */
@media screen and (max-width: 1260px) {
  #page            { width: 980px }
  .column          { width: 310px }
  .column.flex     { }
  .column.flex.c2  { }
  .column.flex.c3  { }
  .column.flex.c4  { width: 20.5% }
  .column.flex.c5  { width: 18.5% }
  .column.flex.c6  { width: 15.1% }
  .column.right    { margin-top: 133px }
  .columntext      { padding-bottom: 50px; min-height: 160px }
  .column.flex .columntext     { padding: 0 0 0 16px }
  .columnimage IMG { width: 309px; height: 187px }
  .columntext IMG  { width: 276px; height: auto }
  .column.bigtext  { width: 311px }
  .column.bigtext.wide { width: 62% }
  .column.bigimg,
  .bigimg IMG      { width: 521px; height: auto }
  .column H1       { font-size: 46px; line-height: 1.3em }
}

/* styles for mobile landscape (two columns) 
@media screen and (max-width: 1000px) {
  #page            { width: 844px }
  .column          { width: 397px }
  .column.flex     { width: 28% }
  .columnimage IMG { width: 396px; height: 240px }
  .column.bigtext  { width: 280px; font-size: 100% }
  .column.bigimg,
  .bigimg IMG      { width: 430px}
  .column H1       { font-size: 42px; line-height: 1.5em }
}

/* styles for mobile landscape (one column) */
@media screen and (max-width: 1000px) { /* 870 */
  #page            { width: 447px }
  #payoff          { top: 2px }
  .column,
  .column.flex,
  .column.right,
  .column.c2,
  .column.flex.c2,
  .column.flex.c3,
  .column.flex.c4,
  .column.flex.c5,
  .column.flex.c6,
  .column.bigtext,
  .column.bigtext.wide,
  .column.lined    { width: 397px }
  .column.lined    { border: none; padding-left: 0; padding-right: 0; margin-left: 0 }
  .column.flex     { margin: 16px 0 }
  .column.flex.last-child,
  .column.last-child  { margin-bottom: 40px }
  .columntext      { min-height: 0 }
  #pagecontent .column.flex HR  { display: block }
  .columnimage IMG { width: 364px; height: 220px; margin-left: 16px }
  .popup IMG.fullwidth { width: 100%; height: auto }
  .popup IMG.fullwidth { width: 100%; height: auto }
  IMG.leftside { left: -5px; top: 5px }
  
  .columntext IMG  { width: 364px; height: auto }
  #headerlogo IMG  { width: 379px; height: auto; margin-left: 6px; margin-top: 6px }
  .column.bigimg,
  .column.bigimg.lft,
  .column.bigimg IMG  { width: 365px; margin-left: 7px; float: none }

  #breadcrumb .level2,
  #breadcrumb .level3 { display: none }
  #nav                { clear: both; float: none; text-align: right; margin: 11px 16px 26px 0  }
  #payoff             { margin-top: -10px }
  .column H1          { font-size: 42px; line-height: 1.3em }
/*  .column H1 BR, */
  .column H4.empty    { display: none }
  .column .columntext { padding-bottom: 4em }
  .popup              { padding: 0 }
  #pagecontent>.popup    { margin: 40px 0 0 16px; width: 324px; padding: 20px }

} 

/* styles for mobile portrait */
@media screen and (max-width: 465px) {
  #page            { width: 100%; max-width: 404px; overflow: hidden  }
  #header          { padding: 0 4px}
  #pagecontent     { padding: 35px 0 8px 4px }
  
  .column,
  .column.c2,
  .column.bigtext,
  .column.bigtext.wide,
  .column.flex,
  .column.flex.c2,
  .column.flex.c3,
  .column.flex.c4,
  .column.flex.c5,
  .column.flex.c6  { width: 96% }
  .popup IMG.fullwidth { width: 100%; height: auto }
  .columnimage IMG { width: 96%; height: auto }
  #headerlogo IMG  { width: 96%; height: auto }
  .column.bigimg,
  .column.bigimg.lft,
  .column.bigimg IMG { width: 96%; height: auto }
  .column H1         { font-size: 28px; line-height: 1.3em }
  #pagecontent>.popup    { width: 80% }
  #footer          { padding: 0 16px 16px 18px }
  #footercontent   { padding-top: 10px }

}

/* styles for smallest mobiles portrait */
@media screen and (max-width: 310px) {
}