/*
 Font faces
 */
@font-face {
	font-family: "RO Sans";
	src: url("//data.pbl.nl/webresources/fonts/ROsanswebtextregular.eot?") format("embedded-opentype"),
	url("//data.pbl.nl/webresources/fonts/ROsanswebtextregular.woff") format("opentype");
	font-style: normal;
	font-weight: normal;
}
@font-face {
	font-family: "RO Sans";
	src: url("//data.pbl.nl/webresources/fonts/ROsanswebtextitalic.eot?") format("embedded-opentype"),
	url("//data.pbl.nl/webresources/fonts/ROsanswebtextitalic.woff") format("opentype");
	font-style: italic;
	font-weight: normal;
}
@font-face {
	font-family: "RO Sans";
	src: url("//data.pbl.nl/webresources/fonts/ROsanswebtextbold.eot?") format("embedded-opentype"),
	url("//data.pbl.nl/webresources/fonts/ROsanswebtextbold.woff") format("opentype");
	font-weight: 700;
	font-style: normal;
}

@font-face {
	font-family: "RO Serif";
	src: url("//data.pbl.nl/webresources/fonts/ROserifwebregular.eot?") format("embedded-opentype"),
	url("//data.pbl.nl/webresources/fonts/ROserifwebregular.woff") format("opentype");
	font-style: normal;
	font-weight: normal;
}
@font-face {
	font-family: "RO Serif";
	src: url("//data.pbl.nl/webresources/fonts/ROserifwebitalic.eot?") format("embedded-opentype"),
	url("//data.pbl.nl/webresources/fonts/ROserifwebitalic.woff") format("opentype");
	font-style: italic;
	font-weight: normal;
}
@font-face {
	font-family: "RO Serif";
	src: url("//data.pbl.nl/webresources/fonts/ROserifwebbold.eot?") format("embedded-opentype"),
	url("//data.pbl.nl/webresources/fonts/ROserifwebbold.woff") format("opentype");
	font-weight: 700;
	font-style: normal;
}

/* ==========================================================================
   Body
   ========================================================================== */
   
body {
	background:#f5f5f5;
	padding-top:100px;
	padding-top:0;
	font-family: "RO Sans",sans-serif;
	-webkit-font-smoothing: antialiased;	
	-webkit-text-size-adjust:none;
}

body.fixed {
	padding-top:60px;
}

body.modal-open {
	position:relative !important;
	overflow:hidden !important;
}

html.lt-ie8.modal-open {
	position:relative !important;
	overflow:hidden !important;
}

#loading-screen {
	z-index:99999999;
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
	background:#000;
}

.no-js #loading-screen {
	display:none !important;
}

.js body {
	overflow:hidden;
	position: relative;
}

/* ==========================================================================
   General
   ========================================================================== */
a {
	color:#000;
	text-decoration: none;
}

p {
	margin:0 0 1em 0;
}

ul, ol {
	margin:0 0 1em 20px;
	padding: 0;
	list-style-position: outside;
}

b, strong, bold {
	font-weight: bold !important;
}

em, i, italic {
	font-style: italic;
}

h1, h2, h3, h4, h5, h6 {
	margin:0 0 0.5em 0;
	line-height:1.4em;
	font-family: "RO Sans",serif;
	font-style: normal;
	font-weight: 600 !important;
}

section, footer, .chapter, .share-id {
	/*z-index:3;
	position:relative;
	width:100%;*/
}

.container, .container-narrow, .container-wide {
	margin:0 auto;
}

.container {
	width: 960px;
}

div.hidden {
	display: none;
}

ul.tabs {
	display: block;
	margin: 0;
	padding: 0;
}

ul.tabs li {
	float: left;
	list-style-type: none;
	cursor: pointer;
	display: block;
	font-weight: bold;
	margin: 4px 10px 0px 0px;
	padding: 4px 10px 4px 10px; 
	position: relative;
	border-top: 1px solid #7F838A;
	border-left: 1px solid #7F838A;
	border-right: 1px solid #7F838A;
	background-color: #93BB77;
	font-size: 0.9em;
	/* border-bottom: 1px solid #FFFFFF; */
}

ul.tabs li.active {
	top: 1px;
	background-color: #FFF;
}

div.tab {
	border-top: 1px solid #7F838A;
	padding-top: 30px;
}

/* ==========================================================================
   Visualisation html
   ========================================================================== */

section#visualisation h2#countryname {
	font-size: 1.2em;
	margin-bottom: 1em;
}

#countryinfo_share {
	font-size: 0.8em;
}

h2#countryinfo_1 {
	margin-bottom: 0;
}

#countryselection input {
	width: 300px;
}

input.autocomplete {
	background-color: white;
	background-image: url('../images/throbber.gif');
	background-position: 100% 5px;
	background-repeat: no-repeat;
	height: 20px;
}

.ui-menu, .ui-menu-item a {
  width: 250px;
}

.ui-autocomplete li {
  list-style-type: none;
}

div#countryinfo_2 {
	font-size: 0.8em;
	padding: 20px;
	background-color: #e6e6e6;
}

div#countryinfo_2 h3 {
	font-size: 0.9em;
	margin: 0
}

div#countryinfo_2 li {
	line-height: 1.2em;
	font-size: 1em;
}

div#info {
	display:none;
	position:absolute;
	width:600px;
	height:320px;
	z-index:10;
	background-color: white;
  left:0;
  right:0;
  margin-left:auto;
  margin-right:auto;
  top:0;
  bottom:0;
  margin-top:auto;
  margin-bottom:auto;
	border-width:3px;
  border-style:solid;
  border-color:#ff9900;
}

div#infotekst {
	margin: 10px;
}

#left {
	float: left;
}

#right {
  float: right;
}

/*section#visualisation {
  font-family: Verdana, sans-serif;
  font-size: 0.8em;
  margin: 0;
  padding: 0;
}*/

section#visualisation h1,
section#visualisation h2, 
section#visualisation h3,
section#visualisation h4 {
  font-family: "RO Sans", Verdana, sans-serif;
  font-size: 0.8em;
  margin: 0;
  padding: 0;
  font-weight: bold !important;
}

#countrycontainer li {
  font-size: 0.8em;
  line-height: 1.2em;
  width: 100%
}

button {
	background-color: lightgrey;
	border-style: none;
	font-family: "RO Sans", Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 10px;
	width: 160px;
	margin-bottom: 4px;
}

button.country.active, button.world.active {
	background-color: orange;
	border-style: none;
}

button.scenario.active {
	background-color: #93BB77;
	border-style: none;
}

#chartcontainer {
  font-size: 0.8em;
}

#world_chartcontainer {
	float: left;
}

#legend_world_chartcontainer {
	padding-top: 25px;
}

#world_right {
	float: right;
	width: 160px;
}

#country_left {
	float: left;
}

#country_right {
	float: right;
	width: 350px;
}

div.divider {
	border-bottom: 2px dashed #a6a6a6;
	margin: 10px 0px 10px 0px;
}

h2.pledges {
	font-size: 1.1em;
}

/* ==========================================================================
   Helpers
   ========================================================================== */

.only-mobile {
	display:none !important;
}
	
.align-left {
	text-align:left;
}
.align-center {
	text-align:center;
}
.align-right {
	text-align:right;
}

::-webkit-scrollbar {
    width:  10px;
    height: 10px;
    background-color:transparent;
}
::-webkit-scrollbar-track {
    background-color:transparent;
    width: 5px;
}
::-webkit-scrollbar-track-piece  {
    background-color: #ccc;
}
::-webkit-scrollbar-thumb {    
    background-color: #999;
    width: 10px;
}

/* ==========================================================================
   Header
   ========================================================================== */

header {
	z-index:2;
	/*position:absolute;
	position:fixed;
	top:60px;
	left:0;*/
	width:100%;
	height:130px;
	background-image: url(../images/header_200.jpg);
	background-position:center; 
}

#headerMobile {
	z-index:99999999;
	display:none !important;
	position: fixed !important;
	top:0;
	left:0;
	width:100%;
	height:60px;
}

.nav-toggle {
	display:none;
	float:left;
	width:26px;
	padding:19px 10px 14px 10px;
	cursor:pointer;
}

.nav-toggle-bar {
	float:left;
	height:4px;
	width:100%;
	background:#B2DB96;
	margin:0 0 5px 0;
}

.nav-toggle:hover .nav-toggle-bar {
}

header .logo, #loading-screen .logo {
	/*position:absolute;
	left:50%;
	top:0;
	width:238px;*/
	margin-left:230px;
}

/* ==========================================================================
   Progress
   ========================================================================== */

#progress-bar {
	z-index:9999;
	position:relative;
	float:left;
	width:100%;
	height:5px;
	background:#404E36;
}

#progress {
	float:left;
	width:0%;
	height:5px;
	background:#B2DB96;
}

/* ==========================================================================
   Landing
   ========================================================================== */

section#landing {
	z-index:-1;
	height:800px;
	overflow:hidden;
	font-style: normal;
}

.lt-ie9 .scrolled #landing {
	display:none;
}

.no-touch #landing {
	z-index:1;
	position: fixed;
	top:100px;
	top:0;
	left:0;
	float:inherit;
}

#video-mask {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
}

.svg .warning {
	display:none;
}
.svg header {
	top:0;
}

.warning {
	z-index:3;
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:40px;
	padding:10px 0;
	line-height:1.3em;
	color:#fff;
	background:#A8CD90;
	font-size:14px;
	text-align: center;
}

.warning-mobile {
	display:none;
	z-index:1;
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:auto;
	padding:20px 0;
	line-height:1.5em;
	color:#fff;
	background:#A8CD90;
	font-size:14px;
}

.warning .title, .warning-mobile .title {
	text-transform: uppercase;
	font-weight:bold;
	color:#728F5E;
}

.warning-mobile .container {
	position: relative;
}

.warning-mobile .title {
	float:left;
	width:100%;
}

.warning-mobile img {
	position: absolute;
	top:5px;
	right:0;
	width:12px;
	height:12px;
}

.warning img {
	padding:0 0 0 10px;
	margin:0 0 -7px 0;
}

#landing .content, #loading-screen .content {
	z-index:1;
	position:absolute;
	left:0;
	top:50%;
	margin-top:-100px;
	width:100%;
	/*color:#fff;*/
	text-align:center;
	font-family: "RO Sans", serif;
	font-weight: 700;
}

#landing .content h1, #loading-screen .content h1 {
	margin:0;
	font-size:90px;
}

#landing .content h2, #loading-screen .content h2 {
	margin:-20px 0 0 0;
	font-size:48px;
	font-weight: 400 !important;
}

.landing-img {
	z-index:0;
	position: relative;
	left:0;
	top:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
}

.landing-video {
	z-index:1;
	position: relative;
	left:0;
	top:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
}

#further-btn {
	z-index:3;
	position:absolute;
	top:-50px;
	left:50%;
	width:70px;
	height:50px;
	margin-left:-36px;
	background:#fff;
	cursor: pointer;
	border: 1px solid #d3d1cf;
	border-bottom:none;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	transition:background-color .2s;
}

#further-btn .start {
	position: absolute;
	top:18px;
	left:73px;
	color:#fff;
	width:70px;
	text-align: center;
	text-transform: uppercase;
	font-weight:bold;
	font-size:12px;
	letter-spacing: 1px;
}

#further-btn .icon {
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-11px;
	margin-top:-8px;
	width:22px;
	height:16px;
	background:url(../images/continue-btn.png) 0	0 no-repeat;
}

#further-btn:hover {
	background:#a9cd90;
	border:1px solid #98be7e;
	border-bottom:0;
}

#further-btn:hover .icon {
	background-position: 0 -16px;
}

/* ==========================================================================
   Nav
   ========================================================================== */

nav {
	z-index:9999999;
	position:relative;
	float:left;
	width:100%;
	height:60px;
	background:#fff;
	
	box-shadow:0 1px 2px #000;
	-moz-box-shadow:    0px 1px 2px 0px rgba(0,0,0,0.20);
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);
	box-shadow:         0px 1px 2px 0px rgba(0,0,0,0.20);
}

nav .container {
	width:100%;
	text-align:center;
}

.fixed nav {
	position:fixed;
	top:0;
	left:0;
	float:none;
	margin-top:0 !important;
}

#menu {
	float:none;
	display:inline-block;
	list-style:none;
	margin:0;
	padding:0;
	zoom:1; /* IE 7 Hack starts here*/
	*display:inline;
}

#menu li {
	float:left;
	height:50px;
	transition:.2s; 
}

#menu li:hover a {
	color:#a8ce8d;
}

#menu li a {
	float:left;
	padding:21px 38px;
	/*text-transform: uppercase;*/
	color:#5d646a;
	font-size:14px;
	line-height:12px;
	font-weight:bold;
	letter-spacing: 1px;
	transition:.2s; 
}

#menu li.current a {
	color:#93BB77;
	
}

/* ==========================================================================
   Introduction
   ========================================================================== */
   
section#introduction {
	z-index:3;
	padding:100px 0;
	background:#93BB77;
	color:#444;
}

.notfixed section#introduction {
	margin:0 !important;
}

#introduction .content {
	margin:0;
	color:#444;
}

a.pbl-i {
	font-weight:bold;
	padding:0 20px 0 0;
	background:url(../images/pbl-i.png) center right no-repeat;
	background-position-y: 4px;
	background-size:14px auto;
	cursor: pointer;
	transition:.2s;
	color:#444;
}
a.pbl-i:hover {
	border:none;
	color:#666;
	background-image:url(../images/pbl-i-hover.png);
}

#introduction .pbl-i {
	background-position-y: 5px;	
}

#introduction .pbl-i:hover {
	color:#555;
}

.dv2b .pbl-i {
	background-position-y: 0px;
}

.dv3a .pbl-i {
	background-position-y: 2px;
}

.container-narrow {
	width:960px;
}

h2 {
	font-weight:bold;
	/*color:#fff;*/
	font-size:30px;
}

.conclusion-title {
	float:left;
	width:100%;
}

.title-border {
	float:left;
	height:2px;
	width:120px;
	background:#576f47;
	background:rgba(0,0,0,0.4);
	margin:25px 580px 40px 0;
}

.conclusion .title-border {
	margin-right:580px;
}

.content {
	font-size:20px;
	line-height:1.5em;
}

.signed {
	font-family: "RO Sans",serif;
	font-style: italic;
	font-weight: 600;
	font-size:18px;
}

.information-btn {
	z-index:9998;
	position:absolute;
	top:50%;
	right:0;
	width:40px;
	height:40px;
	margin-top:-20px;
	background:url(../images/information-btn.png) 9px 9px no-repeat #323232;
	cursor:pointer;
	transition:width .2s;
	border-top-left-radius: 2px;
	border-bottom-left-radius: 2px;
}

.information-btn:hover {
	width:45px !important;
}
.modal-open .information-btn:hover {
	width:40px;
}

.datavisualisatie-3-tab .information-btn {
	top:250px;
}

.information-btn[data-rel="t1"]{
	top:735px;
}

.chapter-header {
	height:400px;
	overflow:hidden;
}
.no-touch .chapter-header.sticky {
	position:fixed !important;
	top:60px;
	z-index:1;
}

.chapter-header-push {
	height:0;
}
.no-touch .chapter-header-push.sticky {
	height:400px;
}


/* ==========================================================================
   Part1
   ========================================================================== */

section#part1 {
	background:#d3e6c7;
	color:#000 !important;
	padding:100px 0;
}

.information-btn[data-rel="t2"] {
	top:445px;
}

.information-btn[data-rel="t2i"] {
	top:290px;
}

.information-btn[data-rel="t3"]{
	top:580px;
}


section#part1 .sub-title, section#part1 h1 {
	color:#4c545b !important;
}

section.part.first {
	padding:100px 0 40px 0;	
}

section.part {
	padding:40px 0 40px 0;
	border: 1px solid #d6d6d6;
}

section.part .container-narrow, .container-narrow {
	width:960px;
}

section.part .container-wide, .container-wide {
	width:960px;
}

section.odd {
	background-color: #d5d5d5;
}

section.even {
	background-color: #f5f5f5;
}

section.white {
	background-color: #fff;
}

section.part h1 {
	color:#5d5d5d;
	font-size:40px;
	line-height:50px;
}

.part .title-border {
	margin:20px 290px 40px 290px;
}

section.part .content, .content {
	/*float:left;*/
	width:100%;
	color:#4c545b;
	font-size:18px;
}

section.part .content a.pbl-i, .content a.pbl-i {
	color:#4c545b;
}

.lt-ie8 section.part .content, .lt-ie8 .content {
	margin:0;
	padding-bottom:60px;
}

.sub-title {
	position:relative;
	float:left;
	width:700px;
	color:#5d5d5d;
	font-weight:bold;
	font-size:30px;
	margin:0 auto 25px auto;
	line-height:1.3em;
	text-align: center;
	
	font-family: "RO Sans",serif;
	font-style: normal;
	font-weight: 600 !important;
}

.lt-ie8 .sub-title {
	margin:0 auto 0 auto;
	padding-bottom:25px;
}

.subsub-title {
	z-index:100000;
	position:relative;
	float:left;
	width:700px;
	margin:0 0 10px 0;
	font-size:26px;
	line-height:26px;
	color:#5d5d5d;
	font-weight:bold;
	margin-left:100px !important;
	text-align: center;
}

.lt-ie8 .subsub-title {
	margin:0;
	padding-bottom:10px;	
}

.ia-label {
	display: none;
	text-align:center;
	font-size: 12px;
	text-transform: uppercase;
	color: #7a7a7a;
	font-weight: bold;
	letter-spacing: 1px;
	margin:0 0 20px 0;
}

.ia-label-wrapper {
	display:inline-block;
	width:54px;
	height:9px;
	zoom:1; /* IE 7 Hack starts here*/
	*display:inline;
}

.ia-label-element {
	float:left;
	width:5px;
	height:9px;
	margin-right:4px;
	background:#c1c0c1;
}
.ia-label-element.full {
	background:#636263;
}

.container-full .sub-title {
	text-align:center;
}

.articles {
	float:left;
	width:100%;
	height:auto;
	margin:15px 0 100px 0;
	overflow:hidden;
	text-align:center;
}

.information-btn[data-i="h1-artikelen"] {
	top:610px;
}

.articles-overflow {
	display:block;
	width:3000px;
	height: 340px;
	position: relative;
}

.article-item {
	float:left;
	width:300px;
	height:auto;
	margin:0 10px 20px 10px;
	text-align:left;
}

.article-item img {
	float:left;
	width:100%;
}

.article-item.a .title {
	font-weight: bold;
	font-size:24px;
	line-height:24px;
}

.article-item.b .title  {
	color:#e9725a;
	font-family: "RO Sans",serif;
	font-style: normal;
	font-weight: 600 !important;
	font-size:18px;
	line-height:18px;
}

.article-item.c .title  {
	font-family:Georgia, serif;
	font-weight:bold;
	font-size:20px;
	line-height:24px;
}

.article-item.d .title  {
	font-family: "museo-slab",serif;
	font-style: normal;
	font-weight: 600 !important;
	font-size:20px;
	line-height:20px;
}

.article-item .image {
	float:left;
	width:100%;
	height:auto;
	margin:0 0 15px 0;
	overflow:hidden;
	background:#eee;
}

.article-item .title {
	float:left;
	width:100%;
	height:auto;
	margin:0 0 15px 0;
	font-weight:normal;
	color:#2a2a28;
	font-size:18px;
	line-height:22px;
}

.article-item .source {
	font-family: "museo-slab",serif;
	color:#5f6062;
	font-size:14px;
}

.controls {
	width:124px;
	color:#5f6062;
	font-size:30px;
	margin:0 auto;
}

.control {
	float:left;
	background:#fff;
	width:50px;
	height:50px;
	line-height:50px;
	margin:0 5px;
	cursor:pointer;
	border-radius: 2px;
	border:1px solid #ddd;
	transition:.2s;
}

.control:hover {
	background:#f9f9f9;
}


/* ==========================================================================
   Part 2
   ========================================================================== */

.information-btn[data-rel="t10"]{
	top:160px;
}

section#part2 {
	background:#eeece8;
}

#part2 .content {
}

#datavisualisatie-1 {
	height:400px;
	padding:0 0 60px 0;
	background:#eeece8;
}

#datavisualisatie-1b {
	height:461px;
	background:#d8d5d0;
}

#datavisualisatie-1b h2 {
	color:#484439;
	margin:0 100px;
}

#part2b h2 {
	color:#484439;	
}

section#part2b {
	padding-top:25px;
	background:#d8d5d0;
}

#part2b .pbl-i {
	background:url(../images/pbl-i-white.png) top right no-repeat;
	background-position-y:4px;
}
#part2b .pbl-i:hover {
	color:#eee;
	background:url(../images/pbl-i-white-hover.png) top right no-repeat;
	background-position-y:4px;
}

.dv2b .pbl-i {
	background:url(../images/pbl-i-white.png) top right no-repeat;
	background-position-y:1px;
}
.dv2b .pbl-i:hover {
	color:#eee;
	background:url(../images/pbl-i-white-hover.png) top right no-repeat;
	background-position-y:1px;
}

.dv2b-pre {
	z-index:4;
}

/* ==========================================================================
   Part 3
   ========================================================================== */

.information-btn[data-rel="t18"] {
	top:260px;
}
.information-btn[data-rel="t19"] {
	top:310px;
}

section#part3, #dv3a {
	background:#f5f5f5;
}

section#part3b {
	background:#EEECE8;
	padding:100px 0 0 0;
}

#part3b .sub-title {
	color:#666;
}

.information-btn[data-rel="t21"] {
	top:655px;
}

.information-btn[data-rel="t22"] {
	top:740px;
}

.information-btn[data-rel="t23"] {
	top:800px;
}

.information-btn[data-rel="t23a"] {
	top:700px;
}
.information-btn[data-rel="t24"] {
	top:780px;
}
.information-btn[data-rel="t25"] {
	top:840px;
}

#part3animation .pbl-i {
	background:url(../images/pbl-i-white.png) top right no-repeat;
	background-position-y:4px;
}
#part3animation .pbl-i:hover {
	color:#eee;
	background:url(../images/pbl-i-white-hover.png) top right no-repeat;
	background-position-y:4px;
}

#part3b .title-border {
	margin: -20px 290px 0 290px;
}

#datavisualisatie-3-tabs {
	z-index:0;
	position: relative;
	float:left;
	width:100%;
}

#part3b .tools {
	z-index:1;
	position:absolute;
	top:50%;
	right:0;
	width:110px;
	height:150px;
	margin-top:-75px;
}

#part3b .tools .inner {
	float:right;
	margin-top:10px;
	width:100px;
	overflow:hidden;
	border-bottom-left-radius: 2px;
	border-top-left-radius: 2px;
	border:1px solid #eae9e5;
	border-right:none;
	
	box-shadow:0 1px 2px #000;
	-moz-box-shadow:    0px 1px 2px 0px rgba(0,0,0,0.20);
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);
	box-shadow:         0px 1px 2px 0px rgba(0,0,0,0.20);
}

#part3b .tools .tool-btn {
	float:left;
	width:100px;
	height:70px;
	cursor: pointer;
	text-align: center;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: bold;
	color: #50585e;
	background:#f4f3ef;
	border-bottom:1px solid #eae9e5;
	transition: background 0.2s;
	letter-spacing: 1px;
}

#part3b .tools .tool-btn:hover, #part3b .tools .tool-btn.hover {
	background:#fff;
}

#part3b .tools .tool-btn.current {
	background:#ffffff;
}

#part3b .tools .tool-btn.last {
	border:none;
}

#part3b .tools .tool-btn .icon {
	display:inline-block;
	width:30px;
	height:30px;
	margin:10px 0 0 0;
	zoom:1; /* IE 7 Hack starts here*/
	*display:inline;
}

#part3b .tools .tool-btn .icon, #part3b .tools .tool-btn .title {
	opacity:0.6;
}
#part3b .tools .tool-btn.current .icon, #part3b .tools .tool-btn.current .title {
	opacity:1;
}
#part3b .tools .tool-btn:hover .icon, #part3b .tools .tool-btn:hover .title {
	opacity:1;
}

#part3b .tools .tool-btn.landbouw .icon {
	background:url(../images/dv3b-landbouw.png) center center no-repeat;
}
#part3b .tools .tool-btn.hout .icon {
	background:url(../images/dv3b-hout.png) center center no-repeat;
}

.datavisualisatie-3-tab {
	display:none;
	z-index: 0;
	position: relative;
	float:left;
	width:100%;
	padding:0 0 40px 0;
}

.datavisualisatie-3-tab[data-tab-title="landbouw"] {
	display:block;
}

.datavisualisatie-3-tab .content {
	margin:0 0 40px 0;
}

/* Continue */
#part3b .continue {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:50px;
}

#part3b .continue-btn {
	position:absolute;
	left:50%;
	width:70px;
	height:50px;
	margin-left:-36px;
	background:#fff;
	cursor: pointer;
	border: 1px solid #d3d1cf;
	border-bottom:none;
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
	overflow:hidden;
	transition:background-color .2s;
}

#part3b .continue-btn .icon {
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-11px;
	margin-top:-8px;
	width:22px;
	height:16px;
	background:url(../images/continue-btn.png) 0	0 no-repeat;
}

#part3b .continue-btn:hover {
	background:#a9cd90;
	border:1px solid #98be7e;
	border-bottom:0;
}

#part3b .continue-btn:hover .icon {
	background-position: 0 -16px;
}

#part3b .continue .title {
	position:absolute;
	bottom:0;
	left:50%;
	width:auto;
	height:50px;
	line-height:50px;
	margin-left:50px;
	font-size:12px;
	text-transform: uppercase;
	color:#827f76;
	font-weight:bold;
	cursor:pointer;
	letter-spacing: 1px;
	
}

#part3b .continue:hover .title {
	color:#5f5d51;
}


/* ==========================================================================
   Part 3 animation
   ========================================================================== */

section#part3animation {
	background:#373637;
	padding:0 0 25px 0;
}

#part3animation .share-url, .dv2b-pre .share-url {
	background:url(../images/share-url-dark.png) 0 0 no-repeat #444;
	background-position:0 -40px;
	border:1px solid #4a4a4a;
}
#part3animation .share-url:hover, .dv2b-pre .share-url:hover {
	background-position:0 0;
}
#part3animation .share-twitter, .dv2b-pre .share-twitter {
	background-color:#444;
	border:1px solid #4a4a4a;
}

.part3animation-tab {
	display:none;
	float:left;
	width:100%;
	padding:62px 0 0 0;
}
.part3animation-tab[data-tab="landbouw"] {
	display:block;
}
.part3animation-tab[data-tab="landbouw"] .sub-title .share-buttons {
	top:31px;
}
.part3animation-tab[data-tab="hout"] .sub-title {
	margin-top:38px;
}


section#part3animation .sub-title {
	color:#D4D3D4;
}

section#part3animation .content {
	color:#D4D3D4;
}

section#part3animation .content a.pbl-i {
	color:#D4D3D4;
}

.video-placeholder {
	z-index: 0;
	position: relative;
	float:left;
	width:700px;
	height:394px;
	margin:0 0 50px 0;
}

.video-placeholder iframe {
	position: relative;
	z-index:0;
}

.play-button {
	position: absolute;
	z-index:2;
	left:50%;
	top:50%;
	width:85px;
	height:60px;
	background:url(../images/play-button-hover.png) center center no-repeat;
	margin-top:-30px;
	margin-left:-43px;
	cursor: pointer;
}

.play-button:hover {
	background:url(../images/play-button.png) center center no-repeat;
}

.video-cover {
	position: absolute;
	z-index:1;
	top:0;
	left:0;
	width:100%;
	cursor: pointer;
}

#part3animation .tools {
	z-index:1;
	position:absolute;
	top:400px;
	right:0;
	width:110px;
	height:150px;
	margin-top:-75px;
}

#part3animation .tools .inner {
	float:right;
	margin-top:10px;
	width:100px;
	overflow:hidden;
	border-bottom-left-radius: 2px;
	border-top-left-radius: 2px;
	border-right:none;
	
	box-shadow:0 1px 2px #000;
	-moz-box-shadow:    0px 1px 2px 0px rgba(0,0,0,0.20);
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);
	box-shadow:         0px 1px 2px 0px rgba(0,0,0,0.20);
}

#part3animation .tools .tool-btn {
	float:left;
	width:100px;
	height:70px;
	cursor: pointer;
	text-align: center;
	text-transform: uppercase;
	font-size: 11px;
	font-weight: bold;
	color: #D4D3D4;
	background:#444;
	border:1px solid #4a4a4a;
	transition: background 0.2s;
	letter-spacing: 1px;
}

#part3animation .tools .tool-btn.hout {
	border-bottom: none;
}

#part3animation .tools .tool-btn:hover {
	border:1px solid #eae9e5;
	background:#fff;
	color: #50585e;
}

#part3animation .tools .tool-btn.hout:hover {
	border-top:1px solid #fff;
}

#part3animation .tools .tool-btn.landbouw:hover {
	border-bottom:1px solid #fff;
}

#part3animation .tools .tool-btn.current {
	border:1px solid #eae9e5;
	background:#ffffff;
	color: #50585e;
}

#part3animation .tools .tool-btn.last {
	border:none;
}

#part3animation .tools .tool-btn .icon {
	display:inline-block;
	width:30px;
	height:30px;
	margin:10px 0 0 0;
	zoom:1; /* IE 7 Hack starts here*/
	*display:inline;
}

#part3animation .tools .tool-btn .icon, #part3animation .tools .tool-btn .title {
	opacity:0.6;
}
#part3animation .tools .tool-btn.current .icon, #part3animation .tools .tool-btn.current .title {
	opacity:1;
}
#part3animation .tools .tool-btn:hover .icon, #part3animation .tools .tool-btn:hover .title {
	opacity:1;
}

#part3animation .tools .tool-btn.landbouw .icon {
	background:url(../images/dv3b-landbouw.png) center center no-repeat;
}
#part3animation .tools .tool-btn.hout .icon {
	background:url(../images/dv3b-hout.png) center center no-repeat;
}

/* ==========================================================================
   Part 4
   ========================================================================== */

.information-btn[data-rel="t26"] {
	top:295px;
}
.information-btn[data-rel="t27"] {
	top:525px;
}

.information-btn[data-rel="t29"] {
	top:1220px;
}

section#part4 {
	background:#f5f5f5;
}

section#part4b {
	background:#444;
}

section#part4b .sub-title {
	color:#d3d4d3;
}

section#part4b .content {
	color:#d3d4d3;
}


#part4b .pbl-i {
	background:url(../images/pbl-i-white.png) top right no-repeat;
	background-position-y:4px;
}
#part4b .pbl-i:hover {
	color:#eee;
	background:url(../images/pbl-i-white-hover.png) top right no-repeat;
	background-position-y:4px;
}

#dv4 {
	background:#f5f5f5;
	padding:0 0 100px 0;
}

.applications {
	position: relative;
	float:left;
	width:100%;
	height:400px !important;
	margin:0 0 80px 0;
	overflow:hidden;
}

.applications .options {
	display:none;
	float:left;
	width:100%;
	margin:0 0 25px 0;
}

.applications .option {
	float:left;
	width:106px;
	height:68px;
	margin:0 5px;
	background:#faf9fa;
	border:1px solid #ddd;
	cursor: pointer;
	text-align:center;
	text-transform: uppercase;
	font-size:11px;
	font-weight:bold;
	color:#50585e;
}

.applications .option .icon {
	display:inline-block;
	width:30px;
	height:30px;
	margin:10px 0 0 0;
	zoom:1; /* IE 7 Hack starts here*/
	*display:inline;
}

.applications .option.chemie .icon {
	background:url(../images/application-chemie.png) center center no-repeat;
}
.applications .option.elektriciteit .icon {
	background:url(../images/application-elektriciteit.png) center center no-repeat;
}
.applications .option.personenautos .icon {
	background:url(../images/application-transport.png) center center no-repeat;
}
.applications .option.vrachtvervoer .icon {
	background:url(../images/application-vrachtvervoer.png) center center no-repeat;
}
.applications .option.warmte-thuis .icon {
	background:url(../images/application-warmte-thuis.png) center center no-repeat;
}
.applications .option.industrie .icon {
	background:url(../images/application-industrie.png) center center no-repeat;
}

.applications .option.current {
	background:#fff;
}

.applications .option.first {
	margin-left:0;
}
.applications .option.last {
	margin-right:0;
}


.applications .overflow {
	position:absolute;
	left:50%;
	margin-left:-220px;
	width:2580px;
}

.application-overflow {
	height:355px !important;	
}
.applications .content-row {
	float:left;
	width:400px;
	height:355px;
	margin:0 15px;
	background:#fff;
	border-radius: 2px;
	overflow:hidden;
	box-shadow:0 1px 2px #000;
	-moz-box-shadow:    0px 1px 2px 0px rgba(0,0,0,0.20);
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);
	box-shadow:         0px 1px 2px 0px rgba(0,0,0,0.20);
}

.applications .content-row .header {
	height:50px;
	line-height:50px;
	background:#eee;
	text-align: center;
}

.applications .content-row.personenautos .header, .applications .content-row.overig-transport .header {
	background:#5166A6;
}
.applications .content-row.personenautos .header .title, .applications .content-row.overig-transport .header .title  {
	color:#2F3B61;
}

.applications .content-row.elektriciteit .header {
	background:#FFD94B;
}
.applications .content-row.elektriciteit .header .title  {
	color:#AE8D10;
}

.applications .content-row.chemie .header {
	background:#7AE2DD;
}
.applications .content-row.chemie .header .title  {
	color:#2A908B;
}

.applications .content-row.huishoudens .header, .applications .content-row.industrie .header {
	background:#F67652;
}
.applications .content-row.huishoudens .header .title, .applications .content-row.industrie .header .title  {
	color:#AD4020;
}

.applications .content-row .header .title {
	display:inline-block;
	font-weight: bold;
	font-size: 12px;
	color: #5e686e;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height:36px;
	zoom:1; /* IE 7 Hack starts here*/
	*display:inline;
}

.lt-ie8 .applications .content-row .header .title {
	margin-top:7px;
}

.applications .content-row .header .title .icon {
	float:left;
	width:36px;
	height:36px;
	margin:0 10px 0 0;
}

.applications .content-row.personenautos .header .title .icon {
	background:url(../images/dv4a-personenautos.png) center center no-repeat;
}
.applications .content-row.overig-transport .header .title .icon {
	background:url(../images/dv4a-overig-transport.png) center center no-repeat;
}
.applications .content-row.elektriciteit .header .title .icon {
	background:url(../images/dv4a-elektriciteit.png) center center no-repeat;
}
.applications .content-row.chemie .header .title .icon {
	background:url(../images/dv4a-chemie.png) center center no-repeat;
}
.applications .content-row.industrie .header .title .icon {
	background:url(../images/dv4a-industrie.png) center center no-repeat;
}
.applications .content-row.huishoudens .header .title .icon {
	background:url(../images/dv4a-huishoudens.png) center center no-repeat;
}

.applications .content-row  img {
	float:left;
	margin:0;
}

.applications .content-row .description {
	float:left;
	padding:30px;
	line-height:1.5em;
	font-size:14px;
}

.applications .content-row .description .subject {
	text-transform: uppercase;
	font-weight: bold;
}

/* ==========================================================================
   Part 5
   ========================================================================== */

.information-btn[data-rel="t30"] {
	top:575px;
}
.information-btn[data-rel="t31"] {
	top:690px;
}

section#part5 {
	background:#d3e6c7;
	color:#000;
}

#part5 h1.title {
	color:#4c545b;
}

#part5 h1 .content {
	color:#4c545b;
}

/* ==========================================================================
   Share
   ========================================================================== */
.share-buttons {
	position:absolute;
	top:-7px;
	right:-100px;
	width:90px;
	height:40px;
}

.share-url {
	position: relative;
	float:left;
	height:40px;
	width:40px;
	background:url(../images/share-url.png) 0 0 no-repeat #efeeeb;
	border-radius: 2px;
	cursor: pointer;
	
	box-shadow:0 1px 2px #000;
	-moz-box-shadow:    0px 1px 2px 0px rgba(0,0,0,0.20);
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);
	box-shadow:         0px 1px 2px 0px rgba(0,0,0,0.20);
}

.share-url.active {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.share-url .share-url-options {
	display:none;
	z-index:3;
	position: absolute;
	top:40px;
	left:-320px;
	width:360px;
	height:50px;
	background:#fff;
	border-radius: 2px;
	border-top-right-radius: 0;
	box-shadow:0 1px 2px #000;
	-moz-box-shadow:    0px 1px 2px 0px rgba(0,0,0,0.20);
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);
	box-shadow:         0px 1px 2px 0px rgba(0,0,0,0.20);
	font-size:12px;
	font-family:'tk-proxima-nova',sans-serif;
}

#part3animation .share-url .share-url-options, .dv2b-pre .share-url .share-url-options {
	left:-321px;
	background:#444;
	border:1px solid #4a4a4a;
}

.url {
	float:left;
	height:28px;
	line-height:28px;
	width:250px;
	margin:10px;
	padding:0 10px;
	background:#f7f7f7;
	border:1px solid #ccc;
	border-radius: 2px;
	text-align:left;
	overflow: hidden;
	color:#5d5d5d;
	cursor:text;
}

.no-flash .url {
	width:318px;
}

.url::-moz-selection {
	background: #a9cd90;
	color: #fff; 
}
.url::selection {
	background: #a9cd90;
	color: #fff;
}

.copy {
	float:left;
	height:28px;
	line-height:28px;
	width:56px;
	margin:10px 0;
	border-radius: 2px;
	color:#fff;
	background:#a9cd90;
	border:1px solid #98be7e;
	text-transform: uppercase;
	letter-spacing: 1px;
	cursor: pointer;
}

.no-flash .copy {
	display:none;
}

.copied {
	display:none;
	position:absolute;
	top:10px;
	right:-71px;
	width:66px;
	height:30px;
	background:url(../images/copied.png) 0 0 no-repeat;
}

.share-twitter {
	float:right;
	height:40px;
	width:40px;
	background:#fff;
	background:url(../images/share-twitter.png) 0 0 no-repeat #efeeeb;
	border-radius: 2px;
	cursor:pointer;
	
	box-shadow:0 1px 2px #000;
	-moz-box-shadow:    0px 1px 2px 0px rgba(0,0,0,0.20);
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);
	box-shadow:         0px 1px 2px 0px rgba(0,0,0,0.20);
}

.share-url:hover, .share-twitter:hover {
	background-position: 0 -40px;
}

.share-url:hover, .share-twitter:hover {
}

section#share {
	z-index:3;
	padding:100px 0;
	background:#fff;
	border-bottom:1px solid #e8e8e8;
}

#action {
	float:left;
	width:100%;
	text-align: center;
}

.action-item {
	position:relative;
	display:inline-block;
	width:203px;
	height:82px;
	background:#fff;
	color:#4c545b;	
	border:1px solid #f5f5f5;
	border-radius: 2px;
	text-transform:uppercase;
	font-weight:bold;
	text-align:center;
	cursor:pointer;
	transition:background-color .2s;
	font-size:12px;
	
	box-shadow:0 1px 2px #000;
	-moz-box-shadow:    0px 1px 2px 0px rgba(0,0,0,0.20);
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);
	box-shadow:         0px 1px 2px 0px rgba(0,0,0,0.20);
}

.action-item:hover {
	color:#fff;
	background:#A8CD90;
	border-color: #91B579;
}

.action-item > .icon {
	display:inline-block;
	width:38px;
	height:38px;
	margin:12px 0 0px 0;
	zoom:1; /* IE 7 Hack starts here*/
	*display:inline;
}

.action-item.share > .icon {
	background:url(../images/action-share.png) 0 0 no-repeat;
}
.action-item.download > .icon {
	background:url(../images/action-download.png) 0 0 no-repeat;
}

.action-item.contact > .icon {
	background:url(../images/action-contact.png) 0 0 no-repeat;
}

.action-item.to-pbl > .icon {
	background:url(../images/action-pbl.png) 0 0 no-repeat;
}

.action-item.share:hover > .icon {
	background:url(../images/action-share-hover.png) 0 0 no-repeat;
}
.action-item.contact:hover > .icon {
	background:url(../images/action-contact-hover.png) 0 0 no-repeat;
}
.action-item.download:hover > .icon {
	background:url(../images/action-download-hover.png) 0 0 no-repeat;
}
.action-item.to-pbl:hover > .icon {
	background:url(../images/action-pbl-hover.png) 0 0 no-repeat;
}

.action-item.first {
	margin-left:0;
}
.action-item.last {
	margin-right:0;
}

.share-options {
	display:none;
	position:absolute;
	top:82px;
	left:-1px;
	width:203px;
	padding:20px 0 10px 0;
	background:#C0E3A8;
	border: 1px solid #91B579;
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	
	box-shadow:0 1px 2px #000;
	-moz-box-shadow:    0px 1px 2px 0px rgba(0,0,0,0.20);
	-webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.20);
	box-shadow:         0px 1px 2px 0px rgba(0,0,0,0.20);
}

.share-option {
	float:left;
	width:224px;
	margin:0 50px 10px 50px;
}

.share-label {
	float:left;
	width:100px;
	height:28px;
	border-radius: 3px;
	background:#fff;
	border:1px solid #000;
}

.share-option.twitter .share-label {
	background:#28C7FC;
	border-color:#22B0E0;
}
.share-option.facebook .share-label {
	background:#2B4684;
	border-color:#233869;
}
.share-option.linkedin .share-label {
	background:#2582B0;
	border-color:#22759E;
}

.share-label .icon {
	float:left;
	width:18px;
	height:18px;
	margin:6px 10px 0 10px;
	padding:0 10px 0 0;
	border-right:2px solid #fff;
}

.share-option.twitter .share-label .icon {
	background:url(../images/action-twitter.png) center left no-repeat;
	border-color:#22B0E0;
}
.share-option.facebook .share-label .icon {
	background:url(../images/action-fb.png) center left no-repeat;
	border-color:#233869;
}
.share-option.linkedin .share-label .icon {
	background:url(../images/action-in.png) center left no-repeat;
	border-color:#22759E;
}

.share-label .title {
	float:left;
	width:40px;
	height:18px;
	line-height:31px;
	text-transform: uppercase;
	font-weight: bold;
	color:#fff;
	text-align: center;
}

.share-option .balloon {
	display:none;
	float:left;
	width:58px;
	height:28px;
	margin:1px 0 0 5px;
	background:url(../images/balloon.png) top left no-repeat;
	line-height:31px;
	text-transform: uppercase;
	font-weight: bold;
	color:#666;
	text-align: center;
}


/* ==========================================================================
   Footer
   ========================================================================== */

footer {
	z-index:1;
	height:100px;
	background:#fff;
}

.footer-logo {
	position:absolute;
	bottom:0;
	left:50%;
	width:44px;
	margin-left:-22px;
}

#copyright {
	width:100%;
	text-align: right;
	font-size:12px;
}

/* ==========================================================================
   Conclusion
   ========================================================================== */
   
section.conclusion {
	padding:100px 0 80px 0;
	background:#a8ce8d;
	color:#5F676E !important;
}

section.conclusion .content {
	margin:0;
}

section.conclusion-empty {
	padding:25px 0;
}

section.final-conclusion {
	background:#93BB77;
}

section.final-conclusion .content, .content {
	color:#444;
}

.conclusion h2 {
	line-height:1.3em;
	font-family: "RO Sans",serif;
	font-style: normal;
	font-weight: 700;
	font-size:30px;
}

.final-conclusion ol {
	list-style:none;
	padding:0;
	margin:30px 0 40px 0;
	border-bottom:2px solid #576f47;
}
.final-conclusion ol li {
	min-height:92px;
	margin:0 0 1em 0;
	padding:1em 0 0 85px;
	border-top:2px solid #576f47;
}

.final-conclusion ol li.first {
	background:url(../images/kans1.png) 0 35px no-repeat;
}
.final-conclusion ol li.second {
	background:url(../images/kans2.png) 0 35px  no-repeat;
}
.final-conclusion ol li.third {
	background:url(../images/kans3.png) 0 35px  no-repeat;
}
.final-conclusion ol li.fourth {
	background:url(../images/kans4.png) 0 35px  no-repeat;
}

.final-conclusion a {
	color:#576f47;
	transition:.2s;
}
.final-conclusion a:hover {
	color:#fff;
}

/* DV basic */
#dv2a-basic, #dv2b-basic, #dv3a-basic, #dv3bh-basic, #dv3bl-basic, #dv4b-basic {
	display:none;
}

/* Basic old IE */
.lt-ie9 #datavisualisatie-1, .lt-ie9 .dv2b-pre, .lt-ie9 #datavisualisatie-1b, .lt-ie9 #dv3b-hout, .lt-ie9 #dv3b-landbouw, .lt-ie9 #dv4 {
	display:none !important;
}
	
.lt-ie9 #dv2a-basic, .lt-ie9 #dv2b-basic, .lt-ie9 #dv3bh-basic, .lt-ie9 #dv3bl-basic, .lt-ie9 #dv4b-basic {
	display:block !important;
}

/* Basic touch */
.touch #dv4 {
	display:none !important;
}
.touch #dv4b-basic {
	display:block !important;
}

/* Basic general */
.basic img {
	float:left;
	width:400px;
	margin:0 250px;
}

@media all and (max-width: 1129px) and (min-width: 1000px) {

}

@media all and (max-width: 999px) and (min-width: 768px) {
	
	.container, .container-narrow, .container-wide, section.part .container-wide {
		width:700px;
	}
	
	#menu li a {
		float:left;
		padding:21px 27px;
		/*text-transform: uppercase;*/
		color:#5d646a;
		font-size:12px;
		line-height:12px;
		font-weight:bold;
		letter-spacing: 1px;
		transition:.2s; 
	}
	
	.subsub-title {
		margin-left:0 !important;
		width:600px;
	}
	
	.information-btn[data-rel="t1"] {
		top:740px;
	}
	
	.information-btn[data-rel="t2i"] {
		top: 280px;
	}
	
	.dv2a .container, .dv2b .container {
		width:700px !important;
	}
	
	.dv2a .meter{
		left: auto !important;
		right:70px !important;
		top: 70px !important;
		width: 240px !important;
	}
	
	.dv2a .diagram {
		left:0 !important;
		margin-left:0 !important;
	}
	
	.dv2a .explanation {
		right: 70px !important;
		top: 210px !important;
		width: 240px !important;
	}
	
	#datavisualisatie-1b {
		height:540px !important;
	}
	
	.dv2b .meter {
		left: auto !important;
		right:0px !important;
		top: 40px !important;
		width: 240px !important;
	}
	
	.dv2b .diagram {
		left:0 !important;
		margin-left:0 !important;
	}
	
	.dv2b .explanation {
		top: 130px !important;
	}
	
	.dv3a {
		width: 700px !important;
	}
	
	#dv3a .container {
		width: 700px !important;
	}
	
	.dv3a .diagram {
		width: 700px !important;
		overflow: hidden;
	}
	
	.dv3a .explanations {
		width: 700px !important;
	}
	
	.dv3a .explanation {
		width: 700px !important;
	}
	
	.dv3a .header {
		width: 700px !important;
		height: auto !important;
	}
	
	.dv3b {
		height:900px !important;
	}
	
	#part3b .tools {
		top:300px;
	}
	
	.video-placeholder {
		width:600px;
		height:338px;
	}
	
	#part3animation .tools {
		top:330px;
	}
	
	.information-btn[data-rel="t21"] {
		top:595px;
	}
	
	.information-btn[data-rel="t22"] {
		top:685px;
	}
	
	.information-btn[data-rel="t23"] {
		top:735px;
	}
	
	.information-btn[data-rel="t23a"] {
		top: 630px;
	}
	
	.information-btn[data-rel="t24"] {
		top:715px;
	}
	.information-btn[data-rel="t25"] {
		top:750px;
	}
	
	.dv3b .diagram, .dv3b .diagram-text {
		left:80px !important;
	}
	
	.dv3b .descriptions {
		float: none !important;
		position: absolute !important;
		top:500px !important;
		left:0 !important;
		width: 700px !important;
		margin: 70px 0 0 0;
	}

	section#part3animation .sub-title {
		width:600px !important;
	}
	
	.information-btn[data-rel="t26"] {
		top:280px;
	}
	.information-btn[data-rel="t27"] {
		top:515px;
	}
	
	.information-btn[data-rel="t29"] {
		top:1220px;
	}
	
	.dv4 .data {
		left: auto !important;
		right:0px !important;
		top: 90px !important;
		width: 240px !important;
	}
	
	.dv4 .diagram {
		left:0 !important;
		margin-left:0 !important;
	}
	
	.dv4 .content-right {
		left:auto !important;
		right:0 !important;
		top: 50px !important;
	}
	
	#dv4 {
		display:none;
	}
	
}

@media all and (min-width: 768px) {
	
	.only-mobile {
		display:none !important;
	}
	
	.nav-toggle {
		display:none !important;
	}
	
	/* DV basic */
	#dv2a-basic, #dv2b-basic, #dv3a-basic, #dv3bh-basic, #dv3bl-basic, #dv4b-basic {
		display:none;
	}

}

@media all and (max-width: 767px) {
	
	#loading-screen {
		display:none !important;	
	}
	
	#video-mask {
		display: none !important;
	}
	
	.not-mobile {
		display:none !important;
	}
	
	.only-mobile {
		display:block !important;
	}
	
	#headerMobile {
		display:block !important;		
	}
	
	.warning-mobile {
		display:block;
	}
	
	body {
		padding-top:60px;
	}
	
	/* Header */
	header {
		z-index:99999999;
		display:block !important;
		position: absolute !important;
		height:60px;
		margin-top: 0 !important;
		background:#fff;
	}
	
	.nav-open header {
		/*position: fixed !important;*/
	}
	
	.nav-toggle {
		display:block !important;
	}
	
	header .logo {
		width:143px;
		margin-left:-13px;
	}
	
	/* Landing */
	
	#landing {
		border-bottom:15px solid #fff;
	}
	
	.no-touch #landing {
		position: relative;
		top:auto;
		left:auto;
		float:left;
	}
	
	#landing .content {
		margin-top:-42px;
	}
	
	#landing .content h1 {
		font-size:42px;
	}
	
	#landing .content h2 {
		font-size:26px;
		margin:-10px 0 0 0;
	}
	
	#further-btn {
		width:50px;
		height:36px;
		margin-left:-25px;
	}
	
	#further-btn .start {
		top: 11px;
		left: 50px;
	}
	
	/* Nav */
	nav, .fixed nav {
		float:none;
		z-index:10;
		position:fixed !important;
		top:0 !important;
		left:-100%;
		right:0;
		bottom:0;
		background:#fff;
		width:100%;
		height:100%;
		margin:0 !important;
	}
	
	nav .container {
		width:100% !important;
	}
	
	#menu {
		padding:60px 0 0 0;
	}
	
	#menu li {
		float:left;
		width:100%;
	}
	
	#menu li a {
		width:100%;
		text-align: center;
		padding:20px 0;
	}
	
	#progress-bar {
		display:none;
	}
	
	/* Introduction */
	section#introduction {
		padding: 40px 0;
		margin:0 !important;
	}
	
	.notfixed section#introduction {
		margin-top:0 !important;
	}
	
	/* Chapter header */
	.chapter-header {
		height:220px;
	}
	
	.no-touch .chapter-header.sticky {
		position: relative !important;
		top:auto;
	}
	
	.chapter-header-push, .no-touch .chapter-header-push.sticky {
		height:0 !important;
	}
	
	section.part {
		padding: 40px 0 20px 0;
	}
	
	section.part h1 {
		font-size:30px;
		line-height:30px;
	}
	
	.title-border {
		margin: 5px 0 20px 0;
	}
	
	section.part .content, .content {
		margin:0 0 0 0;
		font-size:16px;
	}
	
	.sub-title {
		font-size:20px;
	}
	
	.subsub-title {
		font-size:20px;
		line-height:1.3em;
	}
	
	/* Share button */
	.share-buttons {
		display:none;
	}
	
	/* Part 1 */
	section#part1 {
		padding:40px 0;
	}
	
	#articles-carousel {
		margin:0;
	}
		
	/* Part 3 */
	.dv3a {
		margin: 0 0 40px 0 !important;
	}
	
	section#part3b {
		padding: 40px 0 0 0;
	}
	
	#datavisualisatie-3-tabs {
		padding: 100px 0 0 0;
	}
	
	#datavisualisatie-3-tabs .tools {
		top: 0;
		right: 50%;
		width: 200px;
		height: 75px;
		margin-top: 10px;
		margin-right:-100px;
	}
	
	#part3b .tools .inner {
		margin-top:0;
		width:200px;
		border-radius: 2px;
		overflow:hidden;
	}
	
	#part3b .tools .tool-btn {
		border-bottom: 1px solid #eae9e5;
		border-bottom: 0;
	}
	
	
	#part3b .continue {
		height:36px;
	}
	#part3b .continue-btn {
		width:50px;
		height:36px;
		margin-left:-25px;
	}
	
	#part3b .continue .title {
		display:none;
	}

	section#part3animation {
		padding: 40px 0 25px 0;
	}

	#part3animation .tools {
		top: 0;
		right: 50%;
		width: 210px;
		height: 75px;
		margin-top: 40px;
		margin-right:-100px;
	}
	
	#part3animation .tools .inner {
		margin-top:0;
		width:204px;
		border-radius: 2px;
		overflow:hidden;
	}
	
	#part3animation .tools .tool-btn {
		border-bottom: 1px solid #eae9e5;
	}
	
	#part3animation .tools .tool-btn.current {
		border: 1px solid #eae9e5;
		border-bottom: 1px solid #eae9e5;
	}
	#part3animation .tools .tool-btn.landbouw.current {
		border-bottom: 1px solid #eae9e5;
	}
	#part3animation .tools .tool-btn.hout.current {
		border-bottom: 1px solid #eae9e5;
	}
	
	#part3animation .tools .tool-btn.landbouw {
		border-bottom: 1px solid #4a4a4a;
	}
	#part3animation .tools .tool-btn.hout {
		border-bottom: 1px solid #4a4a4a;
	}
	
	#part3animation .tools .tool-btn.hout:hover{
		border-left: 1px solid #fff;
		border-bottom: 1px solid #eae9e5;
	}
	#part3animation .tools .tool-btn.landbouw:hover{
		border-right: 1px solid #fff;
		border-bottom: 1px solid #eae9e5;
	}
	
	.part3animation-tab {
		padding:100px 0 0 0;
	}
	
	.part3animation-tab[data-tab="hout"] .sub-title {
		margin-top: 0;
	}
	
	/* Part 4 */
	.applications {
		height:465px !important;	
		margin:20px 0 40px 0;	
	}
	
	.application-overflow {
		height:420px !important;
	}
	
	.applications .content-row {
		width:256px;
		height:420px;
	}
	
	.applications .content-row .description {
		padding:20px;
	}
	
	#article_pagination, #application_pagination {
		width:300px !important;
	}
	
	/* Conclusion */
	section.conclusion {
		padding:40px 0 20px 0;
	}
	
	.conclusion .title-border {
		margin-right: 340px;
	}
	
	/* Footer */
	footer {
		height:60px;
	}
	
	.footer-logo {
		width: 26px;
		margin-left: -13px;
	}
		
	/* Modal */
	.information-btn {
		display:none !important;
	}
	
	.mCSB_container {
		margin-right: 10px !important;
	}
	
	/* DV */
	#datavisualisatie-1, .dv2b-pre, #datavisualisatie-1b, #dv3a, #dv3b-hout, #dv3b-landbouw, #dv4 {
		display:none;
	}
	
	#dv2a-basic, #dv2b-basic, #dv3a-basic, #dv3bh-basic, #dv3bl-basic, #dv4b-basic {
		display:block;
	}
	
}

@media all and (max-width: 767px) and (min-width: 480px) {
	
	.not-460 {
		display:none !important;
	}
	
	.container, .container-narrow, .container-wide {
		width:460px !important;
	}
	
	.part .title-border {
		margin: 20px 170px 40px 170px;
	}
	
	.sub-title {
		width:460px;
	}
	.subsub-title {
		width:460px;
		margin-left:0 !important;
	}
	
	/* Part 1 */
	.left-btn[data-rel="h1"], .right-btn[data-rel="h1"] {
		top: 620px !important;
	}
	
	/* Part 3 */
	.video-placeholder {
		width:460px;
		height:259px;
		background:none;
		margin:0 0 25px 0;
	}
	.video-placeholder img {
		width:460px;
	}
	
	/* Action */
	section#share {
		padding: 40px 0 20px 0;
	}

	.action-item {
		z-index:0;
		margin:0 127px 20px 127px !important;
	}
	
	.action-item.share {
		z-index:1;
	}
	
	/* Modal */
	#modal {
		width:100% !important;
	}
	
	#modal .container {
		width: 90% !important;
	} 
	
	/* DV */
	.basic img {
		width:400px;
		margin:0 30px;
	}
	
}

@media all and (max-width: 479px) {
	
	.not-320 {
		display:none !important;
	}
	
	.container, .container-narrow, .container-wide {
		width:300px !important;
	}
	
	.part .title-border {
		margin: 5px 90px 20px 90px;
	}
	
	.sub-title {
		width:300px;
	}
	.subsub-title {
		width:300px;
		margin-left:0 !important;
	}
	
	/* Part 3 */
	#datavisualisatie-3-tabs {
		
	}
	
	.video-placeholder {
		width:300px;
		height:169px;
		background:none;
		margin:0 0 25px 0;
	}
	.video-placeholder img {
		width:300px;
	}
	
	/* Action */
	section#share {
		padding: 40px 0 20px 0;
	}

	.action-item {
		z-index:0;
		margin:0 47px 20px 47px !important;
	}
	
	.action-item.share {
		z-index:1;
	}
	
	/* Modal */
	#modal {
		width:100% !important;
	}
	
	#modal .container {
		width: 90% !important;
	}
	
	/* DV */
	.basic img {
		width:300px;
		margin:0;
	}
	
}