/*
 * Stevig Ouderschap – Infographic (stand-alone)
 * ------------------------------------------------------------------
 * Base / wrapper styles. These replace what the original WordPress
 * theme (Karma child theme) used to provide around the infographic.
 * Below this block follows the infographic-specific CSS, compiled
 * from the theme's LESS source.
 *
 * All images are referenced relative to this file, from ./infographic-img/
 */

*, *::before, *::after {
	box-sizing: border-box;
}

body.infographic-page {
	margin: 0;
	font-family: 'Open Sans', Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #333;
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

/* Centered content column, matching the original ~940px full-width layout. */
#main #content.infographic {
	max-width: 940px;
	margin: 0 auto;
	padding: 20px;
}

/* Headings – values taken from the original theme. The infographic's own
   CSS (further down) overrides colour/background for the coloured "pill"
   headings; these rules only provide the base sizing and reset. */
.infographic h1,
.infographic h2,
.infographic h3,
.infographic h4,
.infographic h5,
.infographic h6 {
	margin: 0 0 20px 0;
	font-weight: normal;
	color: #222;
}

.infographic h1 {
	font-size: 2.1em;
}

.infographic h2 {
	font-size: 1.9em;
	line-height: 1.3em;
}

.infographic h3 {
	font-size: 1.6em;
}

.infographic p {
	margin: 0 0 15px;
}

.infographic a {
	color: #0098e1;
}

/* The infographic never uses default list bullets – every list is styled
   through a class. The original theme reset these globally; we scope the
   reset to the infographic so it stays self-contained. */
.infographic ul {
	margin: 0 0 15px;
	padding: 0;
	list-style: none;
}

.infographic li {
	list-style: none;
}

/* ================================================================== */
/* Infographic styles (compiled from the theme LESS source)           */
/* ================================================================== */
.infographic .row:after {
	content: "";
	width: 100%;
	height: 0;
	display: table;
	clear: both;
}

.infographic .intro-container {
	box-sizing: border-box;
}

.infographic .intro-container:after {
	content: "";
	width: 100%;
	height: 0;
	display: table;
	clear: both;
}

.infographic .img-container {
	box-sizing: border-box;
	float: left;
	width: 25%;
}

.infographic .img-container i {
	box-sizing: border-box;
	border-radius: 24px;
	margin-right: 4%;
	margin-bottom: 20px;
	display: block;
	float: left;
	width: 46%;
	height: 138px;
	background-repeat: no-repeat;
	background-size: auto 128px;
}

.infographic .img-container i.pink {
	background-color: #e4007b;
}

.infographic .img-container i.blue {
	background-color: #0098e1;
}

.infographic .img-container i.orange {
	background-color: #ffac0e;
}

.infographic .img-container i.father-with-child {
	height: 170px;
	width: 82px;
	background-image: url(infographic-img/pappa.svg);
	background-position: 5px 5px;
	background-size: auto 160px;
}

.infographic .img-container i.pregnant-woman {
	width: 106px;
	background-image: url(infographic-img/zwangerschapsprofiel.svg);
	background-position: -37px 5px;
	margin-top: 20px;
}

.infographic .img-container i.mother-with-child-steps {
	width: 82px;
	background-image: url(infographic-img/persoon-met-kind.svg);
	background-position: 5px 5px;
	background-size: auto 96px;
	height: 114px;
}

.infographic .img-container i.father-with-child-swing {
	width: 138px;
	background-image: url(infographic-img/zwier.svg);
	background-position: 5px 5px;
	position: relative;
	top: -12px;
}

.infographic .introduction {
	box-sizing: border-box;
	float: left;
	width: 75%;
	margin-bottom: 20px;
}

.infographic .introduction .logo {
	box-sizing: border-box;
	padding-top: 160px;
	background: url(infographic-img/logo.svg) right top no-repeat;
	background-size: auto 160px;
}

.infographic .introduction .txt {
	border-radius: 10px;
	padding: 5px 15px;
	border: 2px solid #e4007b;
	line-height: 1.5;
}

.infographic h1,
.infographic h2,
.infographic h3,
.infographic h4,
.infographic h5,
.infographic h6 {
	text-shadow: none;
}

.infographic h2 {
	border-radius: 10px;
	padding: 5px 15px;
	background: lightgrey;
	color: white;
	text-align: center;
}

.infographic h2.a-left {
	text-align: left;
}

.infographic h2.pink {
	background: #e4007b;
}

.infographic h2.blue {
	background: #0098e1;
}

.infographic h2.orange {
	background: #ffac0e;
}

.infographic .tile {
	box-sizing: border-box;
	border-radius: 10px;
	padding: 15px;
}

#main .infographic .tile p {
	font-size: 20px;
	color: white;
}

.infographic .tile.pink {
	background-color: #e4007b;
}

.infographic .tile.gray {
	background-color: lightgrey;
}

.infographic .tile.blue {
	background-color: #0098e1;
}

.infographic .tile.orange {
	background-color: #ffac0e;
}

.infographic .tile-half {
	width: 49%;
	float: left;
	margin-left: 1%;
	margin-bottom: 2%;
}

.infographic .tile-half:nth-child(odd) {
	margin-left: 0;
	margin-right: 1%;
}

.infographic .tile-third {
	color: white;
	width: 32%;
	float: left;
	margin-left: 2%;
	margin-bottom: 2%;
}

.infographic .tile-third:nth-child(3n-2) {
	margin-left: 0;
}

#main .infographic .tile-third p {
	font-size: 18px;
}

.infographic .tile-third .percentage,
.infographic .tile-third .header {
	font-size: 32px;
	font-weight: bold;
}

.infographic .tile-container {
	box-sizing: border-box;
	float: none;
}

.infographic .tile-container:after {
	content: "";
	width: 100%;
	height: 0;
	display: table;
	clear: both;
}

.infographic .tile.pregnant-woman {
	background-repeat: no-repeat;
	background-position: right bottom;
	background-position: right 10px bottom 5px;
	background-image: url(infographic-img/zwangerschapsprofiel.svg);
	background-size: auto 200px;
	min-height: 220px;
}

.infographic .tile.family-left {
	background-repeat: no-repeat;
	background-position: left bottom;
	background-position: left 10px bottom 5px;
	background-image: url(infographic-img/gezin-spiegel.svg);
	background-size: auto 256px;
	min-height: 220px;
	text-align: right;
}

.infographic .tile.family-left p {
	text-align: right;
}

.infographic .tile.cost {
	background-repeat: no-repeat;
	background-position: right bottom;
	background-position: right 10px bottom 5px;
	background-image: url(infographic-img/portemonnee.svg);
	background-size: auto 64px;
	min-height: 220px;
	text-align: left;
}

.infographic .tile.mother-with-child-steps {
	background-repeat: no-repeat;
	background-position: right bottom;
	background-position: right 10px bottom 5px;
	background-image: url(infographic-img/persoon-met-kind.svg);
	background-size: auto 192px;
	min-height: 220px;
	text-align: left;
}

.infographic .tile.father-with-child {
	background-repeat: no-repeat;
	background-position: right bottom;
	background-position: right 10px bottom 5px;
	background-image: url(infographic-img/pappa.svg);
	background-size: auto 128px;
	min-height: 220px;
	text-align: left;
}

.infographic .border-orange {
	border: 2px solid #ffac0e;
	border-radius: 10px;
	padding: 5px 15px;
	margin-bottom: 20px;
}

.infographic .selector {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
}

.infographic .selector select {
	margin: 0 20px;
}

.infographic ul.none,
.infographic ul.stars,
.infographic .quotes ul,
.infographic ul.legend,
.infographic u.stats {
	margin: 0 !important;
	padding: 0;
}

.infographic ul.none li,
.infographic ul.stars li,
.infographic .quotes ul li,
.infographic ul.legend li,
.infographic u.stats li {
	margin: 0 !important;
	padding: 0;
	list-style: none;
	font-size: 18px;
}

.infographic ul.stars li {
	position: relative;
	padding-left: 20px;
	color: white;
	background: url(infographic-img/ster.svg) no-repeat center left;
}

.infographic ul.half:after {
	content: "";
	width: 100%;
	height: 0;
	display: table;
	clear: both;
}

.infographic ul.half li {
	box-sizing: border-box;
	float: left;
	width: 50%;
}

.infographic ul.half li:nth-child(even) {
	width: 48% !important;
	margin-left: 2% !important;
}

.infographic ul.third:after {
	content: "";
	width: 100%;
	height: 0;
	display: table;
	clear: both;
}

.infographic ul.third li {
	box-sizing: border-box;
	float: left;
	width: 33%;
}

.infographic ul.third li:nth-child(n+1) {
	width: 31% !important;
	margin-left: 2% !important;
}

.infographic ul.shift-up {
	position: relative;
	top: -16px;
}

.infographic ul.small li {
	font-size: 12px;
}

.infographic ul.quarter:after {
	content: "";
	width: 100%;
	height: 0;
	display: table;
	clear: both;
}

.infographic ul.quarter li {
	width: 25%;
	float: left;
	text-align: center;
	color: lightgrey;
}

.infographic ul.quarter li i {
	display: block;
	width: 100%;
	height: 140px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto 140px;
}

.infographic ul.quarter li i.questionmark {
	background-image: url(infographic-img/vraagteken.svg);
}

.infographic ul.quarter li i.heart {
	background-image: url(infographic-img/hart-roze.svg);
}

.infographic ul.quarter li i.lightbulb {
	background-image: url(infographic-img/lamp-geel.svg);
}

.infographic ul.quarter li i.hands-love {
	background-image: url(infographic-img/hands-love.svg);
}

.infographic .invis {
	visibility: hidden !important;
}

.infographic ul.legend li {
	color: lightgrey;
	line-height: 28px;
	padding-left: 60px;
	padding-top: 16px;
	padding-bottom: 10px;
}

.infographic ul.legend li.l {
	color: black;
	font-weight: bold;
}

.infographic ul.legend li.long {
	padding-top: 2px;
	padding-bottom: 0px;
}

.infographic ul.legend .percentage {
	font-size: 24px;
	color: black;
}

.infographic ul.legend li {
	position: relative;
}

.infographic ul.legend li:before,
.infographic ul.legend li:after {
	position: absolute;
	left: 0;
	top: 10px;
}

.infographic ul.legend li:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border: 20px solid #999;
	border-radius: 20px;
}

.infographic ul.legend li:first-child:before {
	border-color: #0098e1;
}

.infographic ul.legend li:first-child:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border: 16px solid #ffac0e;
	border-radius: 16px;
	left: 4px;
	top: 14px;
}

.infographic .risks .tile {
	min-height: 164px;
	background-position: 134% 29px;
}

.infographic .risks .tile ul.legend li:after {
	border-color: #e4007b;
}

.infographic .risks .tile ul.legend li:first-child:before {
	border-color: #ffac0e;
}

.infographic .quotes ul li {
	font-size: 18px;
	font-weight: bold;
	max-width: 40%;
	border: 3px solid #a0a0a0;
	display: inline-block;
	background: white;
	margin-bottom: 50px !important;
	padding: 5px;
	text-align: center;
	border-radius: 10px;
}

.infographic .quotes ul li.q1 {
	position: relative;
	z-index: 0;
}

.infographic .quotes ul li.q1:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	border-top: 24px solid #a0a0a0;
	position: absolute;
	bottom: -24px;
	left: 10%;
	transform: translateX(-4px);
	z-index: 1;
}

.infographic .quotes ul li.q1:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-top: 19px solid white;
	position: absolute;
	bottom: -19px;
	left: 10%;
	z-index: 2;
}

.infographic .quotes ul li.q2 {
	left: 50px;
	top: 25px;
	position: relative;
	z-index: 0;
}

.infographic .quotes ul li.q2:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	border-top: 24px solid #a0a0a0;
	position: absolute;
	bottom: -24px;
	left: 30%;
	transform: translateX(-4px);
	z-index: 1;
}

.infographic .quotes ul li.q2:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-top: 19px solid white;
	position: absolute;
	bottom: -19px;
	left: 30%;
	z-index: 2;
}

.infographic .quotes ul li.q3 {
	max-width: 55%;
	left: 20px;
	position: relative;
	z-index: 0;
}

.infographic .quotes ul li.q3:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	border-top: 24px solid #a0a0a0;
	position: absolute;
	bottom: -24px;
	left: 10%;
	transform: translateX(-4px);
	z-index: 1;
}

.infographic .quotes ul li.q3:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-top: 19px solid white;
	position: absolute;
	bottom: -19px;
	left: 10%;
	z-index: 2;
}

.infographic .quotes ul li.q4 {
	top: 10px;
	position: relative;
	z-index: 0;
}

.infographic .quotes ul li.q4:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	border-top: 24px solid #a0a0a0;
	position: absolute;
	bottom: -24px;
	left: 35%;
	transform: translateX(-4px);
	z-index: 1;
}

.infographic .quotes ul li.q4:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-top: 19px solid white;
	position: absolute;
	bottom: -19px;
	left: 35%;
	z-index: 2;
}

.infographic .quotes ul li.q5 {
	left: 55px;
	top: -10px;
	position: relative;
	z-index: 0;
}

.infographic .quotes ul li.q5:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	border-top: 24px solid #a0a0a0;
	position: absolute;
	bottom: -24px;
	left: 80%;
	transform: translateX(-4px);
	z-index: 1;
}

.infographic .quotes ul li.q5:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-top: 19px solid white;
	position: absolute;
	bottom: -19px;
	left: 80%;
	z-index: 2;
}

.infographic .quotes ul li.q6 {
	left: 30%;
	top: -10px;
	border-radius: 300px / 190px;
	padding: 10px 40px;
	position: relative;
	z-index: 0;
}

.infographic .quotes ul li.q6:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-left: 18px solid transparent;
	border-right: 18px solid transparent;
	border-top: 24px solid #a0a0a0;
	position: absolute;
	bottom: -23px;
	left: 42%;
	transform: translateX(-4px);
	z-index: 1;
}

.infographic .quotes ul li.q6:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-top: 19px solid white;
	position: absolute;
	bottom: -18px;
	left: 42%;
	z-index: 2;
}

.infographic .graph {
	margin-top: 20px;
	margin-bottom: 20px;
}

.infographic .graph p {
	color: white;
	font-size: 16px;
	line-height: 1.4em;
	opacity: 0.8;
	padding: 10px 20px;
}

.infographic ul.stats li span.text,
.infographic ul.stats li span.cost {
	line-height: 50px;
	background: lightgrey;
	display: block;
	font-weight: bold;
	float: left;
	text-indent: 15px;
}

.infographic ul.stats li .wrap {
	box-shadow: 0 1px 5px 0 rgba(32, 32, 32, 0.75);
}

.infographic ul.stats li .wrap:after {
	content: "";
	width: 100%;
	height: 0;
	display: table;
	clear: both;
}

.infographic ul.stats li span.text {
	position: relative;
	background-color: #999;
	color: white;
	width: 80%;
}

.infographic ul.stats li span.add-text {
	position: absolute;
	right: 15px;
	bottom: 5px;
	font-size: 12px;
	line-height: 12px;
	font-weight: normal;
	font-style: italic;
}

.infographic ul.stats li span.cost {
	width: 20%;
}

.infographic ul.stats li span.source {
	clear: both;
	font-size: 12px;
}

.infographic ul.stats li.so span.text {
	background: -webkit-linear-gradient(60deg, #eb3391 0%, #bc459f 20%, #8d5eb2 40%, #5d77c3 60%, #2c91d5 80%, #00aae5 100%);
	background: -o-linear-gradient(60deg, #eb3391 0%, #bc459f 20%, #8d5eb2 40%, #5d77c3 60%, #2c91d5 80%, #00aae5 100%);
	background: -ms-linear-gradient(60deg, #eb3391 0%, #bc459f 20%, #8d5eb2 40%, #5d77c3 60%, #2c91d5 80%, #00aae5 100%);
	background: -moz-linear-gradient(60deg, #eb3391 0%, #bc459f 20%, #8d5eb2 40%, #5d77c3 60%, #2c91d5 80%, #00aae5 100%);
	background: linear-gradient(60deg, #eb3391 0%, #bc459f 20%, #8d5eb2 40%, #5d77c3 60%, #2c91d5 80%, #00aae5 100%);
}

.infographic .duration {
	background: -webkit-linear-gradient(-90deg, #eb3391 0%, #bc459f 20%, #8d5eb2 40%, #5d77c3 60%, #2c91d5 80%, #00aae5 100%);
	background: -o-linear-gradient(-90deg, #eb3391 0%, #bc459f 20%, #8d5eb2 40%, #5d77c3 60%, #2c91d5 80%, #00aae5 100%);
	background: -ms-linear-gradient(-90deg, #eb3391 0%, #bc459f 20%, #8d5eb2 40%, #5d77c3 60%, #2c91d5 80%, #00aae5 100%);
	background: -moz-linear-gradient(-90deg, #eb3391 0%, #bc459f 20%, #8d5eb2 40%, #5d77c3 60%, #2c91d5 80%, #00aae5 100%);
	background: linear-gradient(-90deg, #eb3391 0%, #bc459f 20%, #8d5eb2 40%, #5d77c3 60%, #2c91d5 80%, #00aae5 100%);
}

.infographic .bars {
	position: relative;
}

.infographic .bars .bar {
	position: relative;
	margin-bottom: 10px;
}

.infographic .bars .grey {
	background: lightgrey;
}

.infographic .bars p,
.infographic .bars .fill {
	line-height: 40px;
	font-size: 20px;
}

.infographic .bars .fill {
	background: -webkit-linear-gradient(-90deg, #eb3391 0%, #bc459f 20%, #8d5eb2 40%, #5d77c3 60%, #2c91d5 80%, #00aae5 100%);
	background: -o-linear-gradient(-90deg, #eb3391 0%, #bc459f 20%, #8d5eb2 40%, #5d77c3 60%, #2c91d5 80%, #00aae5 100%);
	background: -ms-linear-gradient(-90deg, #eb3391 0%, #bc459f 20%, #8d5eb2 40%, #5d77c3 60%, #2c91d5 80%, #00aae5 100%);
	background: -moz-linear-gradient(-90deg, #eb3391 0%, #bc459f 20%, #8d5eb2 40%, #5d77c3 60%, #2c91d5 80%, #00aae5 100%);
	background: linear-gradient(-90deg, #eb3391 0%, #bc459f 20%, #8d5eb2 40%, #5d77c3 60%, #2c91d5 80%, #00aae5 100%);
	color: white;
	text-align: right;
	padding: 0 10px;
}

.infographic .bars p {
	position: absolute;
	left: 10px;
	top: 0;
	line-height: 40px;
	margin: 0;
	padding: 0;
}

.infographic .score-container {
	display: inline-block;
	position: absolute;
	right: 22px;
	top: 18px;
	z-index: 0;
	transform: rotate(5deg);
}

.infographic .score-container:before,
.infographic .score-container .score:before,
.infographic .score-container:after,
.infographic .score-container .score:after {
	content: "";
	z-index: 0;
	position: absolute;
	left: 0;
	top: 0;
	transform: rotate(120deg);
}

.infographic .score-container:after,
.infographic .score-container .score:after {
	transform: rotate(-120deg);
}

.infographic .score-container,
.infographic .score-container .score,
.infographic .score-container:before,
.infographic .score-container .score:before,
.infographic .score-container:after,
.infographic .score-container .score:after {
	background: #0098e1;
	width: 100px;
	height: 100px;
}

.infographic .score-container,
.infographic .score-container:before,
.infographic .score-container:after {
	background: #000;
	background: rgba(0, 0, 0, 0.3);
	width: 104px;
	height: 104px;
}

.infographic .score-container .score {
	position: absolute;
	top: 2px;
	left: 2px;
	z-index: 1;
	color: #e4007b;
	font-size: 40px;
	line-height: 100px;
	text-align: center;
}

.infographic .score-container .score span {
	position: relative;
	z-index: 3;
	font-family: "Comic Sans MS", "Comic Sans", cursive;
}

.infographic ul.header {
	padding: 3px 30px 20px 10px;
}

.infographic ul.header:after {
	content: "";
	width: 100%;
	height: 0;
	display: table;
	clear: both;
}

.infographic ul.header li {
	float: left;
	font-size: 16px;
	font-weight: bold;
	color: white;
}

.infographic ul.header li.baby {
	position: absolute;
	left: 37%;
}

.infographic ul.header li.toddler {
	float: right;
	font-size: 24px;
}

.infographic .house {
	width: 64px;
	height: 64px;
	display: inline-block;
	background: url(infographic-img/huisje.svg) no-repeat left top;
}

.infographic .house.o90 {
	opacity: 0.9;
}

.infographic .house.o80 {
	opacity: 0.8;
}

.infographic .house.o70 {
	opacity: 0.65;
}

.infographic .house.o60 {
	opacity: 0.65;
}

.infographic .house.o50 {
	opacity: 0.5;
}

.infographic .house.sp1 {
	margin-left: 55px;
}

.infographic .house.sp2 {
	margin-left: 65px;
}

.infographic .house.sp3 {
	margin-left: 75px;
}

.infographic .house.sp4 {
	float: right;
}

.infographic .usage {
	background: #0098e1;
	padding: 20px;
}

.infographic .usage:after {
	content: "";
	width: 100%;
	height: 0;
	display: table;
	clear: both;
}

.infographic .usage > div {
	width: calc( 100% / 15 );
	min-width: 50px;
	float: left;
	height: 80px;
	background: url(infographic-img/persoon-met-kind.svg) no-repeat 3px 5px;
	background-size: auto 70px;
}

.infographic .usage .participating {
	background-image: url(infographic-img/persoon-met-kind-orange.svg);
}

.infographic .usage .eligible {
	background-image: url(infographic-img/persoon-met-kind-orange.svg);
	opacity: 0.6;
}

.infographic .usage .missing-out {
	opacity: 0.4;
}

.infographic .cities:after {
	content: "";
	width: 100%;
	height: 0;
	display: table;
	clear: both;
}

.infographic .cities ul {
	display: block;
	width: 28%;
	margin-left: 5% !important;
	float: left;
}

.infographic .cities ul.part-0 {
	margin-left: 0 !important;
}

.infographic .cities ul li {
	line-height: 14px;
	font-size: 11px;
}

.infographic .pie {
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(infographic-img/pie-chart.svg);
	background-size: 90%;
	min-height: 690px;
}

.infographic .netherlands {
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(infographic-img/landkaart.svg);
	background-size: 90%;
	min-height: 690px;
}

.infographic .conversation {
	background-repeat: no-repeat;
	background-position: bottom center;
	background-image: url(infographic-img/dialoog.svg);
	background-size: 90%;
	min-height: 690px;
}

.infographic .family {
	background-repeat: no-repeat;
	background-position: right bottom;
	background-position: right 10px bottom 5px;
	background-image: url(infographic-img/gezin.svg);
	background-size: auto 190px;
	min-height: 220px;
	text-align: left;
}

.infographic .conclusion > .netherlands {
	height: 500px;
	min-height: 500px;
	width: 55%;
}

.infographic .conclusion > .netherlands > .pie {
	position: relative;
	height: 85%;
	min-height: auto;
	width: 65%;
	margin-left: 17%;
	z-index: 0;
	font-size: 20px;
	font-weight: bold;
}

.infographic .conclusion > .netherlands > .pie > .family {
	opacity: 0.2;
	background-position: 50% 0;
	margin-top: 0;
}

.infographic .conclusion > .netherlands > .pie .SO {
	position: absolute;
	top: 26.5%;
	right: 13%;
	z-index: 1;
	color: white;
	text-shadow: -1px 1px 3px black;
	font-size: 22px;
	transform: rotate(-37deg);
}

.infographic .conclusion > .netherlands > .pie .rest {
	position: absolute;
	top: 60%;
	left: 13%;
	z-index: 1;
	color: #e4007b;
	text-shadow: -1px 1px 3px black;
	font-size: 22px;
}

.infographic .conclusion > .cost,
.infographic .conclusion > .efficiency {
	box-sizing: border-box;
	margin-left: 5%;
	margin-right: 11%;
	background: #0098e1;
	border-radius: 10px;
	padding: 5px 15px;
	padding: 20px;
	width: 35%;
	float: right;
}

.infographic .conclusion > .cost p,
.infographic .conclusion > .efficiency p {
	color: white;
	font-size: 20px;
}

.infographic .conclusion > .cost .percentage,
.infographic .conclusion > .efficiency .percentage {
	display: block;
	font-size: 48px;
	line-height: 60px;
}

.infographic .conclusion > .cost {
	margin-top: 50px;
	position: relative;
}

.infographic .conclusion > .cost:after {
	right: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 152, 225, 0);
	border-right-color: #0098e1;
	border-top-width: 6px;
	border-right-width: 86px;
	border-left-width: 86px;
	border-bottom-width: 6px;
	margin-top: -3px;
}

.infographic .conclusion > .efficiency {
	margin-top: 50px;
	position: relative;
}

.infographic .conclusion > .efficiency:after {
	top: -40px;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0, 152, 225, 0);
	border-bottom-color: #0098e1;
	border-top-width: 16px;
	border-right-width: 86px;
	border-left-width: 86px;
	border-bottom-width: 16px;
	margin-left: -86px;
}

.infographic .conclusion > .efficiency:before {
	top: -10px;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: #0098e1;
	border-top-width: 16px;
	border-right-width: 32px;
	border-left-width: 32px;
	border-bottom-width: 16px;
	margin-left: -32px;
}

.infographic .conclusion .wallet {
	background-repeat: no-repeat;
	background-position: right bottom;
	background-position: right 10px bottom 5px;
	background-image: url(infographic-img/portemonnee.svg);
	background-size: auto 48px;
	text-align: left;
	min-height: auto;
}