/* FORTIFY - Master stylesheet*/


/* STYLES */

/* Kleuren uit huisstijl handboek*/
.nlo-oranje { color: /*nlo-orange*/rgba(224,82,6,1.0); }
.nlo-oranje { color: /*nlo-orange*/#E05206; }

.nlo-grijs { color: /*nlo-grey*/rgba(139,141,142,1.0); }
.nlo-grijs { color: /*nlo-grey*/#8B8D8E; }

.nlo-geel { color: /*nlo-yellow*/rgba(227,164,23,1.0); }
.nlo-geel { color: /*nlo-yellow*/#E3A417; }

.nlo-rood { color: /*nlo-red*/rgba(198,52,24,1.0); }
.nlo-rood { color: /*nlo-red*/#C63418; }

.nlo-donker-rood { color: /*nlo-dark-red*/rgba(119,39,0,1.0); }
.nlo-donker-rood { color: /*nlo-dark-red*/#772700; }

.nlo-licht-grijs { color: /*nlo-light-grey*/rgba(214,209,206,1.0); }
.nlo-licht-grijs { color: /*nlo-light-grey*/#D6D1CE; }

.nlo-olive { color: /*nlo-olive*/rgba(193,181,0,1.0); }
.nlo-olive { color: /*nlo-olive*/#C1B500; }

.nlo-donker-oranje { color: /*nlo-dark-orange*/rgba(171,69,20,1.0); }
.nlo-donker-oranje { color: /*nlo-dark-orange*/#AB4514; }

.nlo-bordeaux { color: /*nlo-bordeaux*/rgba(97,13,0,1.0); }
.nlo-bordeaux { color: /*nlo-bordeaux*/#610D00; }

/* Kleuren aangemaakt voor Fortify digitaal */

.nlo-green { color: /*green*/rgba(100,144,30,1.0); }
.nlo-yellow { color: /*yellow*/rgba(233,185,0,1.0); }


/* FONTS */

/*
Regular		"ff-tisa-sans-web-pro"	400		normal	
Italic				"ff-tisa-sans-web-pro"	400		italic	
Bold				"ff-tisa-sans-web-pro"	700		normal	
Bold Italic		"ff-tisa-sans-web-pro"	700		italic
*/





/*     =====     L A Y O U T     E L E M E N T S     =====     */

#fortify article {
	position: relative;
	display: block;
	max-width: 720px;
	padding: 0 20px;
	margin: 0 auto;
}

#fortify article:first-child {
	padding-top: 50px;
}

body, div.bar {
	min-width: 320px;
}

#fortify header {
	position: fixed;
	z-index: 500;
	box-shadow: 0 3px 4px rgba(0,0,0,0.15);
}

body#fortify {
	font-family: 'FFTisaSansWeb', sans-serif;
	font-size: 100%;
	color: #000;
	background: none;
	overflow-x: hidden;
}

#fortify #fixebg { /* iOS prefix */
	background: url(../../assets/contents/bg/homepage-bg-article.jpg);
	background-size: cover;
	background-position: top right;
	height:100%;
	width:100%;
	position: fixed;
	z-index: -1;
	top: 0;
}

#fortify header, 
#fortify .container,
#fortify div.footer {
    background-color:#FFF;
}

#fortify div.footer {
	color: /*nlo-grey*/rgba(139,141,142,1.0);
}
#fortify div.footer .footer-title {
	color: /*nlo-grey*/rgba(139,141,142,1.0);
}

#fortify aside.quote {
	margin: 50px 0 50px 30px;
}

#fortify figure aside.quote {
	position: absolute;
	margin: 0;
	padding: 30px;
	z-index: 50;
}

#fortify div.header-image {
	float: none;
	padding-top: 80%;
}

#fortify div.container {
	padding-left: 0;
	padding-right: 0;
	padding-bottom: 100px;
}

#fortify div.content {
	max-width: 100%;
	padding: 0;
}
#fortify article aside {
	margin-bottom: 2em;
}

#fortify div.box {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	margin: 3em 0 0 0;
	padding: 20px 20px 20px 20px;
	background-color: /*nlo-grey*/rgba(139,141,142,1.0);
}
#fortify div.box-outline {
	display: block;
	position: relative;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 20px;
	background-color: transparent;
	border: 2px solid /*nlo-grey*/rgba(139,141,142,1.0);
}

#fortify div.panel figure,
#fortify div.box figure {
	width: 100%;
	margin: 2em 0;
}

#fortify figure {
	display: block;
	position: relative;
	margin: 0;
	float: none;
	overflow: hidden;
}

#fortify article + figure {
	margin: 2em 0;
}

#fortify p:last-of-type + div.box-outline {
	margin-top: 2em;
}

#fortify figure div.deco-bg,
#fortify figure div.deco-bg-olive,
#fortify figure div.deco-bg-green,
#fortify div.box div.deco-bg,
#fortify div.panel-wrap div.deco-bg {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100px;
	background-image: url(../contents/bg/header-image-bg.png);
	background-position: bottom center;
	background-size: cover;
	margin-bottom: -5px;
}

#fortify figure div.deco-bg-olive { background-image: url(../contents/bg/header-image-bg-olive.png); }
#fortify figure div.deco-bg-green { background-image: url(../contents/bg/header-image-bg-green.png); }

#fortify div.article-content-box {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	background: /*nlo-orange*/rgba(224,82,6,0.9) url(../contents/bg/ei-outline.svg) no-repeat;
	background-size: 120%;
	background-position: center center;
	margin-top: 100px;
	padding: 20px;
}

#fortify div.article-content-box li {
	display: block;
	width: 100%;
	height: 250px;
	margin-bottom: 20px;
	
	padding: 0;
	opacity: 1;
	
		-webkit-transition: transform .5s ease, box-shadow.5s ease, opacity 1s ease; /*all*/
		-moz-transition: transform .5s ease, box-shadow.5s ease, opacity 1s ease;
		-o-transition: transform .5s ease, box-shadow.5s ease, opacity 1s ease;
	transition: transform .5s ease, box-shadow.5s ease, opacity 1s ease;
	
	list-style: none;
	position: relative;
	z-index: 5;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center 20%;	
}

#fortify div.article-content-box li:last-child {
	margin-bottom: 0;
}

body#fortify div.article-content-box h2 {
	color: #FFF;
	text-transform: none;
}

body#fortify article.index-list { 
	margin-top: 30px;
}

body#fortify article.index-list li { 
	color: /*nlo-grey*/rgba(139,141,142,1.0); 
	font-size: 90%;
}
body#fortify article.index-list li {
	list-style: square;
}

body#fortify article.index-list li:first-child {
	margin-bottom: 10px;
}

body#fortify article a.index-list { 
	display: block;
	padding-bottom: 50px;
	margin-top: -50px;
}
	
#fortify div.footer div.row {
	display: none;
}

/* Back to top */

.cd-top {
	height: 44px;
	width: 44px;
	position: fixed;
	bottom: 30px;
	right: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
	/* image replacement properties */
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: /*nlo-orange*/rgba(224,82,6,1.0) url(../contents/symbols/cd-top-arrow.svg) no-repeat center 50%;
	visibility: visible;
	opacity: 0;
	transition: transform .3s 0s ease-out, opacity .3s 0s ease-out;
	transform: translate(0,44px);
	z-index: 500;
}
.no-touch .cd-top.cd-is-visible, 
.no-touch .cd-top.cd-fade-out, 
.no-touch .cd-top:hover {
	transition: transform .3s 0s ease-out, opacity .3s 0s ease-out;
}
.cd-top.cd-is-visible {
	/* the button becomes visible */
	visibility: visible;
	opacity: 1;
	transform: translate(0,0)
}
.cd-top.cd-fade-out {
	/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
	opacity: .4;
}
.no-touch .cd-top:hover {
	opacity: 0.9;
}

#fortify div.article-sm-share {
	margin-top: 50px;
	color: /*nlo-grey*/rgba(139,141,142,1.0); 
}

#fortify div.article-sm-share,
#fortify div.sm-share {
	display: inline-block;
}

#fortify div.article-sm-share div.twitter-icon img,
#fortify div.article-sm-share div.linkedin-icon img,
#fortify div.article-sm-share div.facebook-icon img,
#fortify div.article-sm-share div.mail-icon img {
	width: 100%;
}
footer .sm-share,
#fortify div.bar .sm-share {
	float: right;
	position: relative;
	height: 100%;
}
#fortify div.article-sm-share .sm-share div.twitter-icon,
#fortify div.article-sm-share .sm-share div.linkedin-icon,
#fortify div.article-sm-share .sm-share div.facebook-icon,
#fortify div.article-sm-share .sm-share div.mail-icon {
	position: relative;
	width: 20px;
	height: 20px;
	display: inline-block;
	margin-left: 7px;
		-webkit-transition: transform .2s ease-out, opacity .7s ease;
		-moz-transition: transform .2s ease-out, opacity .7s ease;
		-o-transition: transform .2s ease-out, opacity .7s ease;
	transition: transform .2s ease-out, opacity .7s ease;
}
.no-touch #fortify div.article-sm-share .sm-share:hover div:not(:hover) {
	opacity: 0.3;
}
.no-touch #fortify div.article-sm-share .sm-share div.twitter-icon:hover,
.no-touch #fortify div.article-sm-share .sm-share div.linkedin-icon:hover,
.no-touch #fortify div.article-sm-share .sm-share div.facebook-icon:hover,
.no-touch #fortify div.article-sm-share .sm-share div.mail-icon:hover {
	transform: scale(1.1);
}





/*     =====     P A R A G R A P H     S T Y L E S     =====     */

#fortify strong {
	font-weight: 500;
}

#fortify h1,
#fortify h2,
#fortify h3,
#fortify h4,
#fortify h5,
#fortify h6 {
	color: /*nlo-orange*/rgba(224,82,6,1.0);
	font-weight: normal;
	line-height: 1.2;
}

#fortify h1 { font-size: 2.5em; font-weight: 100; }
#fortify h2 { font-size: 1.3em; }
#fortify h3 { font-size: 1.2em; }
#fortify h4 { font-size: 1.1em; }
#fortify h5 { font-size: 1em; }
#fortify h6 { font-size: 1em; }

#fortify div.box h1,
#fortify div.box h2,
#fortify div.box h3,
#fortify div.box h4,
#fortify div.box h5,
#fortify div.box h6 {
	color: #FFF;
}

#fortify div.box h3,
#fortify div.box h4 {
	text-transform: uppercase;
}

#fortify h3 {
	margin-bottom: 0.25em;
}


#fortify p + h2
#fortify p + h3,
#fortify p + h4,
#fortify p + h5,
#fortify p + h6,
#fortify div.box + h2,
#fortify div.box + h3,
#fortify div.box + h4,
#fortify div.box + h5,
#fortify div.box + h6 {
	margin-top: 2em;
}

#fortify ul + h3 {
	margin-top: 2em;
}

body#fortify h2 { 
	color: /*nlo-grey*/rgba(139,141,142,1.0); 
	text-transform: uppercase;
}

#fortify div.box p {
	color: #FFF;
}

#fortify p {
	font-size: 1.1em;
	line-height: 1.4;
	margin-bottom: 2em;
}

#fortify p.intro {
	font-size: 1.2em;
	line-height: 1.6;
	color: /*nlo-grey*/rgba(139,141,142,1.0);
}

#fortify p.author {
	font-size: 0.8em;
	color: /*nlo-grey*/rgba(139,141,142,1.0);
	text-transform: uppercase;
}

#fortify p.footnote {
	font-size: 90%;
	opacity: 0.7;
}

#fortify ul {
	margin: 0;
	padding: 0 0 0 15px;
}

#fortify li {
	font-size: 1.1em;
	line-height: 1.4;
	padding: 0;
	margin: 0;
	color: /*nlo-orange*/rgba(224,82,6,1.0);
}

#fortify li span {
	/*font-size: 16px;*/
	color: #000;
}

#fortify li:last-child {
	margin-bottom: 1em;
}

#fortify p + ul {
	margin-top: -2em;
}

#fortify aside q {
	font-size: 1.5em;
	font-weight: 100;
	font-style: italic;
	margin: 0 0 0 -1em;
	padding: 0;
}

#fortify aside q {
  quotes: "‘" "’" "“" "”";
}
#fortify aside q:before {
    content: open-quote;
}
#fortify aside q:after {
    content: close-quote;
}

#fortify a {
	color: /*nlo-orange*/rgba(224,82,6,1.0);
	text-decoration: none;
}

#fortify article a {
	text-decoration: underline;
}
.no-touch  #fortify article a:hover {
	text-decoration: none;
}

#fortify div.footer a {
	color: /*nlo-grey*/rgba(139,141,142,1.0);
}

#fortify a:hover, a:focus {
	color: /*nlo-grey*/rgba(139,141,142,1.0);
	text-decoration: underline;
}
#fortify a:focus {
	outline: thin dotted;
	outline: 5px auto -webkit-focus-ring-color;
	outline-offset: -2px;
}

#fortify .list-group a {
	color: /*nlo-grey*/rgba(139,141,142,1.0);
}
.no-touch #fortify a.glyphicon-home:hover, 
.no-touch #fortify .col-xs-8 a:hover, 
.no-touch #fortify .list-group a:hover {
	text-decoration: none;
}





/*     =====     B U R G E R     M E N U     =====     */

#fortify #navigation {
	box-shadow: -2px 2px 2px rgba(0,0,0,0.10);
}

#fortify .navbar-toggle {
	float: right;
	display: block;
	margin: 0;
	padding: 0
}
#fortify .navbar-toggle .icon-bar {
	background-color: /*nlo-orange*/rgba(224,82,6,1.0);
	height: 4px
}
#fortify .navbar-toggle .icon-bar+.icon-bar {
	margin-top:3px
}

.no-touch #fortify .navbar-toggle:hover .icon-bar {
	background-color: /*nlo-grey*/rgba(139,141,142,1.0);
}

.no-touch #fortify a.list-group-item:hover, 
.no-touch #fortify a.list-group-item:focus {
	text-decoration: none;
	color: /*nlo-orange*/rgba(224,82,6,1.0);
	background-color: /*nlo-light-grey*/rgba(214,209,206,1.0)
}
#fortify .list-group-item.active, 
.no-touch #fortify .list-group-item.active:hover, 
.no-touch #fortify .list-group-item.active:focus {
	color: #FFF;
	background-color: /*nlo-orange*/rgba(224,82,6,1.0);
	border-color: /*nlo-orange*/rgba(224,82,6,1.0);
}
#fortify .list-group .list-group-item {
	border: none;
	border-top: 1px solid /*nlo-orange*/rgba(224,82,6,1.0);
}
#fortify .list-group {
	border-bottom: 1px solid /*nlo-orange*/rgba(224,82,6,1.0);
}

#fortify .list-group .list-group-item:first-child {
	display: none;
}





/*     =====     P A G E R     =====     */

#fortify .pager a {
	position: fixed;
	top: 200px;
	background-color: /*nlo-grey*/rgba(139,141,142,0.7); /* kleur voor het blok met de pijl */
	color: #FFF; /* kleur van de titel en het pijltje (glyphicon) */
	padding: 10px;
	height: 50px;
	z-index: 1
}
#fortify .pager a .glyphicon {
	font-size: 24px
}
.no-touch #fortify .pager a:hover {
	background-color: /*nlo-orange*/rgba(224,82,6,1.0); /* kleur bij 'mouseover' voor het blok met de pijl */
	transition: all .2s ease;
}
#fortify .pager .pager-back {
	left: 0
}
#fortify .pager .pager-back .pager-title {
	left: -200px
}
#fortify .pager .pager-next {
	right: 0
}
#fortify .pager .pager-next .pager-title {
	right: -200px
}
.no-touch #fortify .pager .pager-back:hover .pager-title {
	left: 40px
}
.no-touch #fortify .pager .pager-next:hover .pager-title {
	right: 44px
}
#fortify .pager .pager-title {
	float: left;
	line-height: 32px;
	height: 50px;
	position: absolute;
	top: 0;
	width: 200px;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding: 10px;
	background-color: /*nlo-orange*/rgba(224,82,6,0.8); /* kleur labeltje voor de titel */
	transition: all .2s ease
}





/*     =====     A C C O R D I O N     =====     */

/* Accordion panel */
/* Style the buttons that are used to open and close the accordion panel */
#fortify div.accordion {
    background-color: /*nlo-orange*/rgba(224,82,6,1.0);
    padding: 17px 12px 12px 12px;
    opacity: 0.9;
}
#fortify div.accordion.active {
    opacity: 1;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
/*#fortify div.accordion.active,*/ 
.no-touch #fortify div.accordion:hover {
    opacity: 1;
}

/* Style the accordion panel. Note: hidden by default */
#fortify .panel-wrap {
	margin-top: 30px;
	margin-bottom: 30px;
}
#fortify div.panel {
	position: relative;
	padding: 0;
	padding-bottom: 20px;
}

div.panel.show {
	overflow: visible;
}

/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */
#fortify div.panel.show {
    max-height: 2000px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
    background-color: /*nlo-orange*/rgba(224,82,6,0.1);
}
#fortify div.accordion:before {
	width: 105px;
	height: 20px;
	background: url(../contents/symbols/arrow-right.png) no-repeat;
	background-size: contain;
	background-position: right;
    float: right;
    margin-right: 10px;
	display: inline-block;
		-webkit-transition: background ease .2s, color ease .4s;
		-moz-transition: background ease .2s, color ease .4s;
		-o-transition: background ease .2s, color ease .4s;
	transition: background ease .4s, color ease .4s;
	color: rgba(255,255,255,0.7);
}
#fortify div.accordion:before {
    content: 'Read more'; /* Unicode character for "plus" sign (+) */
}

#fortify div.accordion.active:before {
    content: 'Read more'; /* Unicode character for "plus" sign (+) */
	background: url(../contents/symbols/close.png) no-repeat;
	background-size: contain;
	background-position: right;
	color: rgba(255,255,255,0);
}
#fortify.nl div.accordion:before {
    content: 'Lees meer'; /* Unicode character for "plus" sign (+) */
}

#fortify.nl div.accordion.active:before {
    content: 'Lees meer'; /* Unicode character for "plus" sign (+) */
	background: url(../contents/symbols/close.png) no-repeat;
	background-size: contain;
	background-position: right;
	color: rgba(255,255,255,0);
}

#fortify div.panel article {
	padding: 15px;
}
#fortify div.panel.show article.last {
	padding-bottom: 50px;
}

#fortify div.panel-wrap div.accordion h3 {
	font-size: 1.2em;
	line-height: 1.2;
	margin: 0;
	color: #FFF;
	text-transform: uppercase;
}

#fortify div.panel article p:last-child,
#fortify p:last-of-type {
	margin: 0;
}
#fortify div.panel-wrap + p {
	margin-top: 2em;
}

#fortify div.box-outline p:last-child {
	margin-bottom: 0;
}

#fortify div.box p:last-of-type {
	margin-bottom: 2.5em;
}

#fortify div.panel-wrap {
	color: #FFF;
}
#fortify div.panel-wrap div.deco-bg {
	width: 102%;
	margin-right: -5px;
	margin-bottom: -20px;
}

div.bottomclose {
	width: 30px;
	height: 30px;
	position: absolute;
	right: 0;
	bottom: 0;
	cursor: pointer;
	background: url(../contents/symbols/close.png);
	background-color: /*nlo-grey*/rgba(139,141,142,0.8);
 	background-size: 50%;
  	background-position: center;
 	background-repeat: no-repeat;
	transition: background-color .4s ease;
	z-index: 5;
 }
 
 .no-touch div.bottomclose:hover {
	background-color: /*nlo-grey*/rgba(139,141,142,1.0);
 }





/*     =====     M E D I A Q U E R I E S     =====     */


@media (min-width: 375px) {
}

@media (min-width: 480px) {
}

@media (min-width: 520px) {
}

@media (min-width: 480px) {
#fortify div.article-content-box li {
	display: inline-block;
	width: 48%;
	margin-bottom: 0;
}

#fortify div.article-content-box li:last-child {
	margin-left: 3%;
}
#fortify div.box figure {
	width: 50%;
	margin: 0 -20px 2em 2em;
	float: right;
}
}

@media (min-width: 768px) {
#fortify header, 
#fortify .container,
#fortify div.footer {
    width: 88.2%;
	max-width: 960px;
}

#fortify header {
	position: relative;
	z-index: 500;
	box-shadow: none;
}

#fortify div.col-xs-2.text-left a  {
	display: none;
}
	
#fortify div.header-image {
	padding-top: 50%;
}
#fortify header {
	padding-top: 80px;
}

body#fortify article.index-list { 
	margin-top: 0;
}

#fortify h1 {
	font-size: 3em;
}

#fortify p,
#fortify li {
	font-size: 1.05em;
}

#fortify aside q {
	font-size: 2em;
}

#fortify aside.quote {
	margin: 60px 30px 60px 50px;
}

.cd-top {
	right: 0;
	bottom: 0;
}
	
#fortify div.box figure {
	width: 50%;
}
}

@media (min-width: 960px) {
}

@media (min-width: 1024px) {
#fortify div.header-image {
	padding-top: 40%;
}
#fortify aside.quote {
	margin: 60px 0 60px -50px;
}

#fortify figure aside.quote {
	position: absolute;
	margin: 0;
	padding: 70px;
}

#fortify div.article-content-box {
	padding: 50px 140px;
}

.cd-top {
	height: 60px;
	width: 60px;
	right: 30px;
	bottom: 0;
	transform: translate(0,60px)
}
}