/* CHOSEN SELECT DROPDOWN TWEAKS */
.chosen-container {
    outline: none; /* remove blue outline on focus */
    font-size: 18px;
}
.chosen-container-single .chosen-single {
    border-radius: 0;
    height: 28px;
}
.chosen-container-active .chosen-single{
    border-color: #aaa; /* remove blue outline on active */
}
.chosen-container-single .chosen-single div {
    top: 2px; /* right little arrow adjusted to bit bigger font size */
}


/* Tips, niet als pure CSS geschreven:

Introduction width=826px
Lichte background blokken (Rankings, best practices)=#E9E4E1
Strepen tussen banks top 20, eerste tabel=#998675
Gradient zwarte balken top 20, eerste tabel=background: linear-gradient(to right,#000 ,#363632  100%)
Tekst top 20, eerste tabel=<p> Let er op, nummering right align, banknamen left align. Misschien in aparte kollomen?
Alternating background, tweede en derde tabel top 20=#E9E41 & #B4A699
Alternating background explore the data en bank policy table=#E9E4E1 & #FFFFFA
Kleuren dots bank policies: groen=#7ED321, rood=#C70000, geel=#F7931E;
Explore the data, select financial institution: width:295px; border: 3px solid #979797; background-color: #FFFFFA;
Explore the data, land van bank of company in zwarte balk= font-size: 22px; color: #998675; (PT-sans)
Explore the data, tabel, header eerste 2 kolommen samen=610 px, dan 2px space tussen volgende kolommen. Iedere kolom=208px
Bank policies, tabel, header eerste 2 kolommen samen=480px, dan 2px space tussen volgende kolommen, iedere kolom=150px
Bank policies, dots=30px X 30px

Tabel rij spacing:
Top 20, eerste tabel, rij=30px hoog. Dit is ook hoogte voor gekleurde balken. Tussen elke rij zit nog 2px lijn #998675
Top 20, tweede en derde tabel, rij=30px hoog	
Explore the data, rij=40px hoog, tussen elke rij 1px #998675 lijn
Bank policies, geldt zelfde als explore the data


*/

body{
	background-color: #FFFFFA;
	font-family: pt-sans, sans-serif;
	font-size: 18px;
	color: #363632;
    overflow-x: hidden;
}
.bigcontainer {
    background: #E9E4E1;
    margin: 0 auto;
    padding: 25px 0;
}
.bigcontainer.darker{
    background: #9d948e;
}
.grey-bg{
    background: #E9E4E1;
}
.widthcontainer {
    max-width: 1240px;
    min-width: 1024px;
    margin: 0 auto;
    position: relative;
    width: 100%;
}
body>.widthcontainer,
body>.bigcontainer,
#header-banner{
	margin-bottom: 50px;
}
.widthcontainer .text, h1.text{
	padding-left: 10px;
	padding-right: 10px;
}
.gradient, #menu a, #ranking .loans,.tblhead{
	background: linear-gradient(to right,#C70000 ,#F7931E  100%);
}
.gradient-black, #ranking .underwriting {
    background: linear-gradient(to right,#000000 ,#e9e4e1 341%);
}
h1{
	font-family: bebas-neue, sans-serif;
	font-size: 72px;
}
h2{
	font-family: bebas-neue, sans-serif;
	font-size: 40px;
}
h3, #menu a{
	font-family: bebas-neue, sans-serif;
	font-size: 26px;
}
h1.white{
	color: #FFFFFF;
	text-shadow: 0 2px 4px rgba(0,0,0,0.50);
}
h2.white{
	color: #FFFFFF;
	text-shadow: 0 2px 4px rgba(0,0,0,0.50);
}
h3.white, #menu a{
	color: #FFFFFF;
	text-shadow: 0 2px 4px rgba(0,0,0,0.50);
}
p{
	font-family: pt-sans, sans-serif;
	font-size: 18px;
	color: #363632
}

p .tableheaderrow/*alleen explore the data en bank policies tables, kleine witte font, zie mockup*/{
	font-size: 16px;
	color: #fff;
}
#header-topbar {
    background: #000;
    height: 45px;
}
#header-topbar .logo {
    background: url(../images/btlogo.png) no-repeat;
    background-position: 0 -1px;
    width: 275px;
    height: 41px;
}
#header-banner {
    height: 465px;
    overflow: hidden;
    background: url(../images/bannerv2-crop2.jpg) no-repeat;
    background-size: auto 520px;
    background-position: 50% 50%;
}
#header-banner .widthcontainer {
    height: 100%;
}
#header-banner h1 {
    padding-top: 20px;
    white-space: normal;
}
#header-banner h2 {
    margin-top: -10px;
}
#header-banner #menu {
    display: flex;
    flex-direction: column;
    width: 275px;
    color: #fff;
    position: absolute;
    bottom: 19px;
    margin-left:-10px;
}
#header-banner #menu a {
    padding: 0 10px;
    margin: 0 0 5px;
    line-height: 1.3;
}
#header-banner #group-logos {
    width: 630px;
    position: absolute;
    bottom: 23px;
    right: 299px;
}
#header-banner .share-btns {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: flex;
    width: 211px;
    justify-content: space-between;
}

#header-banner .share-btns>* {
    line-height: 1;
    margin: 0;
    padding: 0;
}
#header-banner .share-btns a{
	color: #fff;
	text-shadow: 0 2px 4px rgba(0,0,0,0.50);
	font-size: 34px;
}
#header-banner .share-btns h3{
    line-height:1;
}
#intro_share{
	display: flex;
}
#share-item {
    width: 350px;
    height: 400px;
    background-color: #E9E4E1;
    flex-shrink: 0;
    margin-left: 50px;
}
.tooltip{
    position: absolute;
    background-color: #998675;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 6px;
    padding: 5px 9px;
    z-index:200;
    opacity:1;
    pointer-events: none;
    max-width: 250px;
}
.tooltip.morewidth {
    max-width: 600px;
}
.tooltipcontent{
    display: none;
}
.radiobtn_container {
    background: #998675;
    padding: 7px 19px 7px 33px;
    border-radius: 50px;
    color: #fff;
    display: flex;
    align-items: center;
    font-size: 16px;
    cursor: pointer;
}
.radiobtn_container .title {
    padding: 0;
    margin-top: -1px;
}
.radio_outer {
    width: 14px;
    height: 14px;
    background: #fff;
    border: 1px solid #000;
    box-sizing: border-box;
    border-radius: 30px;
    margin: 0 7px 0 -19px;
}
.radio_inner {
    width: 10px;
    height: 10px;
    margin: 1px 0 0 1px;
    border-radius: 30px;
}
.radiobtn_container.selected .radio_inner {
    background: #000;
}

#ranking {
    margin-top: 42px;
    position: relative;
    margin-bottom: 40px;
}
#rank_container .filter {
    display: flex;
    margin: 25px 0 20px;
    align-items: start;
}
#rank_container .filter>* {
    margin-right: 8px;
}
#text-ranking_intro {
    width: 70%;
}
#ranking .graph {
    display: flex;
    margin-left: 20px;
    flex: 1 1 auto;
    height: 28px;
}
#ranking .bar {
    width: 0%;
    transition: width 1s;
}
#ranking .item {
    display: flex;
    height: 30px;
}
#ranking .rank {
    text-align: right;
    flex: 0 0 41px;
    padding-right: 10px;
    border-bottom: 2px solid #998675;
}
#ranking .title {
    flex: 0 0 375px;
    border-bottom:2px solid #998675;
}
#ranking .item:nth-child(1) .rank,
#ranking .item:nth-child(1) .title{
	border-top:2px solid #998675;
}
#rankinggrid  {
    display: flex;
    height: 667px;
    left: 436px;
    right: 0px;
    position: absolute;
}
#rankinggrid .line {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 25%;
    width: 0px;
}
#rankinggrid .l{
    border-right: 1px dotted #000;
    flex-grow: 1;
}
#rankingtables {
    display: flex;
    justify-content: space-between;
    margin-bottom: 30px;
}
#rankingtables .ranktable {
    width: calc(50% - 10px);
    display: flex;
    flex-direction: column;
}
#rank_container {
    margin-bottom: 20px;
}
#rank_container .rankc{
    display: none;
}
#rank_container.total #rank_total,
#rank_container.loans #rank_loans,
#rank_container.underwriting #rank_underwriting{
    display: block;
}
#legend_ranking {
    display: flex;
    width: 100%;
    justify-content: space-between;
}
#legend_ranking .item {
    display: flex;
    align-items: center;
}
#legend_ranking .circle{
    width: 15px;
    height: 15px;
    border-radius:15px;
    display: inline-block;
    margin-right:10px;
}
#legend_ranking .spacer {
    flex-grow:1;
}
#legend_ranking .info {
    width: calc(100% - 643px);
    text-align: center;
}
#legend_ranking .item {
    display: flex;
    align-items: center;
    margin-right: 30px;
}
.head.black{
    background-color:#000;
    color:#fff;
}
.ranktable .tblhead {
    display: flex;
    justify-content: space-between;
}
.datarowhead {
    color: #fff;
    align-items: center;
}
.datarowhead>div{
    cursor: pointer;
    line-height:1;
    padding: 11px 10px;
}
.datarowhead>div i {
    background: url(../images/sorting.png) no-repeat;
    width: 10px;
    height: 22px;
    display: inline-block;
    background-size: contain;
    position: absolute;
    margin-left: 10px;
    margin-top: -2px;
}
.datarowhead>div.sorting i{
    background-image: url(../images/sorting-active.png);
}
.datarow {
    display: flex;
}

.datarow .rank {
    width: 32px;
    flex-grow: 0;
    flex-shrink: 0;
}
.datarow .title {
    flex-grow: 1;
}
.head h3, .tblhead h3,
.head h2, .tblhead h2{
    padding: 0px;
    margin:0px;
}
h2 span.country {
    color: #B4A699;
    font-family: pt-sans, sans-serif;
    font-size: 20px;
    margin-left: 10px;
}
h2 span.rank{
    float: right;
}
.head, .tblhead {
    padding: 5px 10px;
}
#rankingtables .datarows .datarow{
    background-color: #E9E4E1;
}
#rankingtables .datarows .datarow:nth-child(even){
    background-color: #B4A699;
}
.datatable .datarows .datarow{
    background-color: #E9E4E1;
    border-bottom: 2px solid #998675
}
.datatable .datarows .datarow.even{
    background-color: #FFFFFA;
}
#exploretable .datarow{
    display: none;
}
#exploretable .datarow.show{
    display: flex;
}
#exploretable[rel=bank] .title.bank, 
#exploretable[rel=bank] .country.bank,
#exploretable[rel=comp] .title.comp, 
#exploretable[rel=comp] .country.comp{
    display: none;
}
.datatable .datarow>*,
#explore_totals_row>*{
    padding-left:10px;
    padding-right:10px;
}
#exploretable .datarow .title {
    flex: 0 0 498px;
}
#exploretable .datarow .country {
    flex: 1 1 316px;
}
#exploretable .datarow .loans,
#explore_totals_row .loans {
    flex: 0 0 95px;
}
#exploretable .datarow .underwriting,
#explore_totals_row .underwriting {
    flex: 0 0 150px;
}
#exploretable .datarow .total,
#explore_totals_row .total{
    flex: 0 0 85px;
}
#explore_totals_row .label {
    flex: 1 1 100%;
    text-align: right;
    font-family: bebas-neue, sans-serif;
    font-size: 23px !important;
}
#explore_totals_row {
    display: flex;
    margin-top: 10px;
}
.datarowhead .loans,
.datarowhead .underwriting,
.datarowhead .total,
#explore_totals_row .loans,
#explore_totals_row .underwriting,
#explore_totals_row .total{
    border-left: 1px solid #fff;
}
#explore_totals_row .loans,
#explore_totals_row .underwriting,
#explore_totals_row .total{
    padding-top:3px;
    padding-bottom: 3px;
}
#bc_switch_row{
    display: flex;
    margin: 12px 0;
}
#bc_switch{
    margin: 0 10px;
}
#bc_switch_row h2 {
    margin: 0;
    line-height: 1;
}
.switch{
    position: relative;
    width: 80px;
    height: 40px;
    cursor: pointer;
}
.switch .swbg{
    width: 100%;
    height: 100%;
    position: absolute;
    background: url('../images/switch-outside.png') no-repeat;
    background-size: contain;
}
.switch .swbtn {
    position: absolute;
    background: url(../images/switch-inside.png) no-repeat;
    width: 40px;
    height: 40px;
    left:0px;
    background-size: contain;
    top: 2px;
    transition: left .3s;
}
.switch.right .swbtn{
    left: 40px;
}
#explore_container .filters {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
}
#explore_container .filters>select {
    flex: 0 0 calc(50% - 7px);
}
#explore_container #select_comp_chosen{
    display: none;
}
#explore_container.companies #select_comp_chosen{
    display: flex;
}
#explore_container.companies #select_bank_chosen{
    display: none;
}
.chosen-container-single>a {
    width: 100%;
}
.legend_financing {
    text-align: right;
    margin: 3px 0;
}
#mf_intro_graph_row, #mf_intro_map_row {
    display: flex;
}
#mf_intro_graph_row .intro, #mf_intro_map_row .intro {
    width: 350px;
    flex: 0 0 350px;
    margin-right: 20px;
}
#mf_intro_graph_row #pie_graph {
    width: 295px;
}
#mf_intro_graph_row .legend-square {
    width: 20px;
    height: 20px;
    margin-right: 10px;
}
#mf_graph_legend {
    margin: 50px 0 0 50px;
}
#mf_graph_legend .row {
    margin: 0 0 15px 0;
    padding: 0;
    align-items: center;
    line-height: 1;
}
#mf_intro_graph_row .legend-square.lending-project{
    background-color: #c93b22;
}
#mf_intro_graph_row .legend-square.lending-corporate{
    background-color: #f5932d;
}
#mf_intro_graph_row .legend-square.underwriting{
    background-color: #000;
}
.world_map, .world_map svg {
    width: 100%;
    height: 100%;
}

#mf_map {
    flex-grow: 1;
    position: relative;
    display: flex;
    flex-direction: column;
}
#mf_right .filter {
    display: flex;
    align-items: center;
    margin-bottom: 61px;
}
#mf_right .filter>* {
    margin-right: 8px;
}
#mf_right h2 {
    margin: 30px 0;
}
.btn-help,
.btn-help-link,
.btn-help-link:hover,
.btn-help-link:visited,
.btn-help-link:active
 {
    background-color: #000;
    color: #fff;
    line-height: 1;
    text-align: center;
    border-radius: 30px;
    padding: 5px 10px;
    text-decoration: none;
}
#mf_container.origin .destination,
#mf_container.destination .origin{
    display: none;
}
#legend_mf {
    max-width: 585px;
    float: right;
}
#global_problem_row {
    display: flex;
}
#global_problem_row .intro {
    margin-right: 20px;
}
#global_problem_row>* {
    width: 50%;
}
#global_problem_table .datarowhead {
    height: 52px;
}
#global_problem_table .datarow>.bank {
    flex: 1 1 250px;
}
#global_problem_table .datarow>.finance {
    flex: 0 0 60px;
}
#global_problem_table .datarow>.comp_financed {
    flex: 0 0 100px;
    text-align: center;
}

#policies_intro_row {
    display: flex;
    align-items: start;
}
#policies_intro_row .intro {
    flex: 1 1 100%;
}
#policies_intro_row #stats {
    flex: 0 0 400px;
    margin-left: 20px;
    padding: 20px 40px;
}
.col_row{
    display: flex;
    align-items: start;
}
.col_row>* {
    width: 50%;
    padding: 0;
}
.label{
    font-weight: bold;
}
#scoring_table .datarow>*{
    flex: 1 1 10%;
    text-align: center;
}
#scoring_table .datarow{
    padding-left:0;
    padding-right:0;
}
#scoring_table .datarow>.bank{
    padding-left:10px;
}
#scoring_table .datarow>.bank,
#scoring_table .datarow>.country{
    text-align: left;
}
#scoring_table .datarow>.bank {
    flex: 0 0 307px;
}
#scoring_table .datarow>.country {
    flex: 0 0 149px;
}
#scoring_table .datarow>.overall_score {
    flex: 0 0 122px;
}
#scoring_table .datarow>.exposure_reduction {
    flex: 0 0 169px;
}
#scoring_table .circle {
    background-color: #000;
    height: 23px;
    width: 23px;
    margin: 2px auto 0px;
    border-radius: 23px;
}
#scoring_table .circle_1{
    background-color: #50b350;
}
#scoring_table .circle_2{
    background-color:  #F7931E;
}
#scoring_table .circle_3{
    background-color: #C70000;
}
#scoring_table .datarows .datarow {
    background-color: transparent !important;
}
#scoring_legend {
    display: flex;
    margin: 20px 0;
}
#scoring_legend>*{
    margin-right:10px;
}


#best_practice_container {
    display: flex;
}
#best_practice_container>h2{
    flex: 0 0 200px;
}
.onoffcontainer .head {
    padding: 10px 20px;
    position: relative;
    cursor: pointer;
}
.onoffcontainer .content {
    
    
    overflow: hidden;
    margin-bottom: 20px;
    transition: height .5s;
}
.onoffcontainer .content .inner{
    padding: 20px 20px 10px 20px;
    border: 2px solid #998675;
    background-color: #fff;

}
.onoffcontainer .cross {
    font-family: bebas-neue, sans-serif;
    font-size: 63px;
    color: #fff;
    right: 15px;
    top: -5px;
    position: absolute;
    line-height: 1;
    transition: transform .5s;
    transform: rotate(45deg);
}
.onoffcontainer.closed .cross{
    transform: rotate(0deg);
}
.onoffcontainer.closed .content{
    height: 0 !important;
}
#demand_row {
    display: flex;
    align-items: start;
}
#demand_row .list {
    flex: 0 0 480px;
    padding: 30px 40px;
    margin-left: 30px;
}
#download_explore_data {
    display: flex;
    align-items: center;
    margin-left: 50px;
}
#download_explore_data a {
    color: #000;
    text-decoration: none;
}
a img{
    border:0;
}


#case-thumbs, .case-info.show {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
#case-thumbs{
    margin-bottom: 20px;
}
.case-info{
    margin-right: 20px;
    display: none;
}
#case-thumbs img {
    width: 200px;
    cursor: pointer;
}
.case-img {
    margin-right: 20px;
}
.case-img img{
    width: 400px;
}

.case-txt .datarowhead {
    justify-content: space-between;
}
.case-txt .datarowhead h3 {
    padding: 10px 15px;
    margin: 0;
    border-right: 2px solid #fff;
    line-height: 1;
    flex: 1 1 100%;
}
.case-txt .datarowhead .total {
    border:0;
    margin: 0;
    padding: 0;
    flex: 0 0 152px;
    text-align: center;
}
.case-txt .datarows .rank {
    flex: 0 0 50px;
    text-align: right;
}
.case-txt .datarows .title {
    flex: 0 0 363px;
}
.case-txt .datarows .country {
    flex: 1 1 100%;
}
.case-txt .datarows .total {
    flex: 0 0 100px;
}
.case-txt .datarows .datarow:nth-child(even){
    background-color: transparent;
}
.case-txt .info, .case-txt .explore {
    text-align: right;
}
.case-txt .explore button {
    border:0;
    cursor: pointer;
}
.case-txt .explore button {
    border: 0;
    cursor: pointer;
    color: #fff;
    border-radius: 19px;
    padding: 3px 20px;
    margin-left: 10px;
    margin-top: 10px;
    outline:0;
}
#case-thumbs img {
    width: 200px;
    cursor: pointer;
    opacity: .8;
}
#case-thumbs img.selected,
#case-thumbs img:hover{
    opacity: 1;
}