/* 
=========================================================
FONTS
========================================================= 
*/

@font-face{
	font-family:"ns_sans", "NS Sans";
	src:url("https://email.ns.nl/scripts/fonts/nssans__-webfont.eot");
	src:url("https://email.ns.nl/scripts/fonts/nssans__-webfont.eot?#iefix") format("embedded-opentype"),
	url("https://email.ns.nl/scripts/fonts/nssans__-webfont.woff") format("woff"),g
	url("https://email.ns.nl/scripts/fonts/nssans__-webfont.ttf") format("truetype"),
	url("https://email.ns.nl/scripts/fonts/nssans__-webfont.svg#ns_sansregular") format("svg");
	font-weight:400;
	font-style:normal
}

@font-face{
	font-family:"ns_sans", "NS Sans";
	src:url("https://email.ns.nl/scripts/fonts/nssanita-webfont.eot");
	src:url("https://email.ns.nl/scripts/fonts/nssanita-webfont.eot?#iefix") format("embedded-opentype"),
	url("https://email.ns.nl/scripts/fonts/nssanita-webfont.woff") format("woff"),
	url("https://email.ns.nl/scripts/fonts//nssanita-webfont.ttf") format("truetype"),
	url("https://email.ns.nl/scripts/fonts/nssanita-webfont.svg#ns_sansitalic") format("svg");
	font-weight:400;
	font-style:italic
}

@font-face{
	font-family:"ns_sans", "NS Sans";
	src:url("https://email.ns.nl/scripts/fonts/nssanbit-webfont.eot");
	src:url("https://email.ns.nl/scripts/fonts/nssanbit-webfont.eot?#iefix") format("embedded-opentype"),
	url("https://email.ns.nl/scripts/fonts/nssanbit-webfont.woff") format("woff"),
	url("https://email.ns.nl/scripts/fonts/nssanbit-webfont.ttf") format("truetype"),
	url("https://email.ns.nl/scripts/fonts/nssanbit-webfont.svg#ns_sansbold_italic") format("svg");
	font-weight:700;
	font-style:italic
}

@font-face{
	font-family:"ns_sans", "NS Sans";
	src:url("https://email.ns.nl/scripts/fonts/nssanbol-webfont.eot");
	src:url("https://email.ns.nl/scripts/fonts/nssanbol-webfont.eot?#iefix") format("embedded-opentype"),
	url("https://email.ns.nl/scripts/fonts/nssanbol-webfont.woff") format("woff"),
	url("https://email.ns.nl/scripts/fonts/nssanbol-webfont.ttf") format("truetype"),
	url("https://email.ns.nl/scripts/fonts/nssanbol-webfont.svg#ns_sansbold") format("svg");
	font-weight:700;
	font-style:normal
}

.font-fallback{font-family:"Segoe UI",Myriad,Verdana,sans-serif}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}body,figure{margin:0}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"\201C" "\201D" "\2018" "\2019"}small{font-size:80%}sub,sup{font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}fieldset{margin:0 2px}legend{padding:0}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}
.icon--a.icon--chat--ns-white:after,.icon--a.icon--chat--nsWhite:after,.icon--a.icon--chat.icon--ns-white:after,.icon--a.icon--chat.icon--nsWhite:after,.icon--b.icon--chat--ns-white:before,.icon--b.icon--chat--nsWhite:before,.icon--b.icon--chat.icon--ns-white:before,.icon--b.icon--chat.icon--nsWhite:before,.icon--c.icon--chat--ns-white:after,.icon--c.icon--chat--nsWhite:after,.icon--chat--ns-white


/* ========================================================= */

html, body {
	height: 100% !important;
}

body {
	font-family: 'NS Sans', 'Segoe UI', Myriad, Verdana, sans-serif;
	font-size: 16px !important;
	font-style: normal;
	margin: 0px;
	padding: 0px;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

div *, h1, h2, h3, h4, h5, p, label {
	font-family: 'NS Sans', 'Segoe UI', Myriad, Verdana, sans-serif; 
}

h1 {
	font-size: 3rem !important;
	color: #003082;
	line-height: 3.75rem !important;
	padding-bottom: 1rem;
}

h2 {
	font-size: 1.5rem !important;
	color: #003082;
	font-weight: 400;
	line-height: 1.875rem;
}

h3 {
	font-size: .875rem !important;
	font-weight: 700;
	color: #003082;
	margin-bottom: .4375rem;
}

a {
    font-weight: 700;
    text-decoration: none;
    color: #0063d3;
    position: relative;
    box-shadow: inset 0 -0.125rem 0 #e6e6e9;
    transition: box-shadow .1s ease-in-out;
}

a:hover {
	color: #0063d3;
    cursor: pointer;
    box-shadow: inset 0 -0.125rem 0 #0063d3;
}
a:active, a:hover {
	color: #0063d3;
    outline: 0;
}

/* ========================================================= */
/* BUTTONS 													 */
/* ========================================================= */
.arrowLink, .arrowLink:active, .arrowLink:hover {
	color: #0063d3;
	font-weight: normal;
	box-shadow: none;
	
}

.buttonLink, .buttonLink:focus {
	display: inline-block;
    position: relative;
    padding: .625rem 1.125rem;
    vertical-align: top;
    min-width: 7.5rem;
    font-weight: 400;
    white-space: nowrap;
    background-color: #0063d3;
    color: #fff;
    box-shadow: inset 0 -0.125rem 0 #004ba0;
    text-align: center;
    line-height: 1.5625rem;
    font-size: 1rem;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    transition: box-shadow .15s ease-in-out;
}

.buttonLink:hover {
	color: #fff;
    text-decoration: none;
    cursor: pointer;
    box-shadow: inset 0 -3.125rem 0 #004ba0;
}

.buttonLink--nsYellow {
	background-color: #ffc917;
    color: #003082;
    box-shadow: inset 0 -0.125rem 0 #ffb519;
}
.buttonLink--nsYellow:hover {
	color: #003082;
    box-shadow: inset 0 -3.125rem 0 #ffb519;
}

.buttonLink--nsi {
	background-color: #003082;
    color: #fff;
    box-shadow: 0 -0.125rem 0 #001d4f inset;
}
.buttonLink--nsi:hover {
    box-shadow: 0 -3.125rem 0 #001d4f inset;
}

.buttonLink--nsiPink {
	background-color: #ff006d;
    color: #fff;
    box-shadow: inset 0 -3px 0px 0px rgba(0,0,0,0.2);
}
.buttonLink--nsiPink:hover {
	box-shadow: inset 0 0px 0px -15px transparent, inset 0 -65px 0 0 rgba(0,0,0,0.05);
}

.btn-pad-top {
	padding-top: 1rem;
}

/* ========================================================= */
/* RADIOBUTTON 												 */
/* ========================================================= */

/* The container */
.radiocontainer {
  display: block;
  position: relative;
  padding-left: 2rem;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.radiocontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.radiobullet {
  content: "";
    background: #fff;
    border: .0625rem solid #b5b5bc;
    width: 1.25rem;
    height: 1.25rem;
    position: absolute;
    left: 0;
    top: .275rem;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
}

/* On mouse-over, add a grey background color */
.radiocontainer:hover input ~ .radiobullet {
  background-color: #fff;
}

/* When the radio button is checked, add a blue background */
.radiocontainer input:checked ~ .radiobullet {
  background-color: #fff;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radiobullet:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radiocontainer input:checked ~ .radiobullet:after {
  display: block;
  background-color: #0063d3;
}

/* Style the indicator (dot/circle) */
.radiocontainer .radiobullet:after {
 	content: "";
    display: block;
    left: .280rem;
    top: .250rem;
    width: .625rem;
    height: .625rem;
    position: absolute;
    border-radius: 50%;
    line-height: 0;
    padding: 0;
    background: #fff;
    cursor: pointer;
    transition: background-color .2s ease-in-out;
}

/* ========================================================= */
/* CHECKBOX 												 */
/* ========================================================= */

/* The container */
.container {
  display: block;
  cursor: pointer;
  position: relative;
  padding-left: 1.75rem;  
  margin-bottom: 12px;  
  font-size: 16px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  content: "";
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    position: absolute;
    top: .125rem;
    left: 0;
    background: transparent;
    border: .0625rem solid #b5b5bc;
    border-radius: .0625rem;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #fff;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #ffffff;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
  opacity: 1;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  content: "";
    width: 1.25rem;
    height: .5rem;
    position: absolute;
    top: 0;
    left: .25rem;
    border: .0625rem solid #0063d3;
    border-top: none;
    border-right: none;
    opacity: 0;
    -webkit-transform: rotate(-25deg) skewY(-23deg);
    transform: rotate(-25deg) skewY(-23deg);
    transition: opacity .2s ease-in-out;
}

/* ========================================================= */
/* CONTENT													 */
/* ========================================================= */

.pad-block-top {
	padding-top: 1.6rem !important;
}

.mar-row-top {
	margin-top: 1.6rem;
}

.img-pad-0 {
	padding: 0px;
}

.articleSeparator {
	clear: both;
    margin: 1.375rem 0;
    border: none;
    border-bottom: .0625rem solid #e6e6e9;
    max-width: 100% !important;
}

.sticky {
  	position: fixed;
  	top: 0;
  	width: 100%
}

#page-container {
  	position: relative;
  	min-height: 100vh;
  	background-color: #e6e6e9;
}

.header {
	background-color: #fff;
	top: 0;
    min-height: 3.75rem;
    width: 100%;
    z-index: 520;
    left: 0;
	box-shadow: 0 2px 0 0 rgba(7,7,33,.15);
}

.header-content {
	padding: 1.125rem .875rem 1.0625rem .875rem;
}

#content-wrap {
  	padding-bottom: 80px;    /* Footer height */
}

.content {
	background: #e6e6e9;
	min-height: 100% !important;
	top: 0;
    width: 100%;
    z-index: 520;
    left: 0;
    padding-top: 1.6rem;
    padding-bottom: 1.6rem;
    margin-top: 0.15rem;
    margin-bottom: 0;
}

.block-full-white {
	background-color: #ffffff;
	width: 100%;
	min-height: 5rem;
	padding: 3.75rem;
	box-shadow: 0 2px 0 0 rgba(7,7,33,.15);
}

.block-twothird-white, .block-onethird-white {
	background-color: #ffffff;
	width: 100%;
	min-height: 5rem;
	padding: 1.75rem;
	box-shadow: 0 2px 0 0 rgba(7,7,33,.15);
}

#footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 80px; /* Footer height */
	padding: 1rem 0 0;           
	background-color: #fff;
}

.footer-content {
	color: #6a6a7a !important;
	font-size: 16px;
}

.footer-content a, .footer-content a:hover, .footer-content a:active {
	font-weight: normal;
	color: #6a6a7a !important;
	text-decoration: none;
	font-size: 16px;
	position: relative;
    box-shadow: none !important;
    transition: none !important;
    cursor: pointer;
}




@media screen and (max-width: 600px) {
	h1 {
		font-size: 2.2rem !important;
	}

  	.mobile-pad-top {
    	padding-top: 1.6rem;
  	}

  	.mobile-pad-bot {
  		padding-bottom: 1.6rem;
  	}
}

