@import url(https://fonts.googleapis.com/css?family=Muli:300,400);

body { margin: 0; font-family: 'Muli', sans-serif; }
div, ul {-moz-box-sizing: border-box; -webkit-box-sizing: border-box;  box-sizing: border-box; }
.row { max-width: 1082px; margin: 0 auto; padding: 0 30px; }
a { text-decoration: none; }
img { max-width: 100%; }
p { font-size: 1.1rem; line-height: 1.8rem; margin: 0 0 20px; }
.text-center { text-align: center; }
h2 { font-size: 1.5rem;text-transform: uppercase;margin: 0;  }
h3 { margin-bottom: 10px; }
.button { border: 1px solid #fba827; padding: 11px 15px; color: #fba827; border-radius: 5px; }
.button:hover { border-color: #c08221; color: #c08221; }

/* ----------- HEADER ----------- */
.header_wrap { background: url('images/background_header.jpg') center top no-repeat #10929f; padding-top: 302px; }
.header_wrap2 { background: url('images/background_white.png'); padding: 24px 0; }
.header {  text-align: center;   }
.header_wrap h2 { text-transform: none;font-size: 2rem; }
.header img {   }
.nav_wrap ul { margin: 0; padding:15px 0; }
.nav_wrap li { display: inline-block; }
.nav_wrap li a { margin: 0 20px; text-transform: uppercase; color: #034a80; font-size: .9rem; }
.nav_wrap li a:hover { color: #8cbe3b; }
.nav_wrap { overflow: hidden; text-align: center;  background: url('images/background_white2.png');}
@media only screen and (min-width: 1400px) {
    .header_wrap { background-size: cover;  background-position: center -108px; }
}
.introduction { color: #fff; padding: 66px 30px;   }
.introduction_wrap { background: url('images/background_bien.png') bottom repeat-x; }
.introduction p { font-size: 1rem; }
p.lead { font-size: 1.2rem; }
@media only screen and (min-width: 800px) {
.nav.sticky { position: fixed; top: 0; left: 0; right: 0;  background: url('images/background_white.png'); width: 100%; padding: 10px;  }
}
@media only screen and (max-width:1028px) {
    .nav_wrap li a { font-size: .7rem;}
}
@media only screen and (max-width:729px) {
    .nav_wrap li { display: block; width: 100%; border-top: 1px solid #fff; }
    .nav_wrap li a { font-size: .9rem; padding: 5px; display: block;  }
    .nav_wrap ul { margin: 0 -30px; padding: 0; }
    .header img { width: 90%; max-width: 546px; }
}
@media only screen and (min-width: 729px) {
    .nav_wrap { height: 51px}
}

/* ----------- MAP ----------- */
.map_wrap { background: #cdd9e5; border-top: 3px solid #fff; overflow: hidden;  }
.map img { float: left; margin-right: 36px; }
.map h2 {  margin: 0 0 20px; font-size: 2rem; }
.map .button { margin-top: 70px;  }
.map.row { overflow: hidden; max-width: 1020px; color: #333; background: #a5c5d2; margin: 40px auto; padding: 26px 60px; border: 1px solid #fff;}
@media only screen and (max-width:1094px) {
    .map.row { border: 0; max-width: 100%; margin: 0;  }
}

/* ----------- RESOURCES ----------- */
.resources { max-width: 1049px; padding: 50px 30px; overflow: hidden; }
.resources h2 { margin: 40px 0; font-size: 2rem; }
.resources h3 { text-transform: uppercase; font-weight: bold; }
.resources p { max-width: 735px; margin: 0 auto; }
.resources_wrap { background: #f6eed6; }
.resources ul { padding: 0;  margin: 0; }
.resources li { list-style: none; padding: 0; background: #eddfb6; padding: 3px 7px;  }
.resources li:nth-child(even) { background: #faf3e1; }
.resources ul ul { margin: 0 -7px -3px -7px; border: solid #333; border-width: 1px 0; }
.resources ul ul li { list-style: disc; list-style-position: inside;  }
.resources ul ul li:nth-child(odd) { background: #faf3e1; }
.resources ul ul li:nth-child(even) { background: #eddfb6; }
.resources .left { float: left; width: 50%; border: solid transparent; border-width: 0 25px 0 0; }
.resources .right { float: right; width: 50%; border: solid transparent; border-width: 0 0 0 25px; }
.resources a { color: #333; }
.resources a:hover { color: #5b5b5b; border-bottom: 1px dotted #5b5b5b;  }
.countries .intro h3 { padding-top: 168px; }

@media only screen and (max-width:1110px) {
    .resources .left, .resources .right { float: none; max-width: 100%; width: 100%;  border: 0; }
}

/* ----------- VIDEOS ----------- */
.videos_wrap { background: #ffffff; padding: 60px 30px;  overflow: hidden; }
.videos { max-width: 1120px; }
.videos h2 { margin-bottom: 40px; font-size: 2rem;  }
.videos iframe { display: block; margin: 0 auto; width: 100%; margin-bottom: 20px; min-height: 294px; height: 293px;}
.videos .panel {margin: 0 .5%; padding: 20px; background: #f7f6f6;  max-width: 49%; float: left;font-size: .9rem;  }
.videos .right { float: right; }
.videos p { font-size: .9rem; line-height: 1.5rem; margin: 0; }
.videos h3 { font-size: 1.2rem; font-weight: normal; text-transform: uppercase;  }
@media only screen and (max-width:1110px) {
    .videos .panel { width: 100%; float: none; max-width: 100%; margin-bottom: 20px; }
}
@media only screen and (max-width:679px) {
    .videos iframe { height: 300px !important; min-height: 300px; }
}


/* ----------- FOOTER ----------- */
.footer { text-align: center; padding: 63px 0; }
.footer img { margin-bottom: 63px; }
.footer img { margin: 0 82px 20px;       }
@media only screen and (max-width: 475px) {
    .footer img { max-width: 100%; max-height: 50px; height: auto;margin: 0 0 20px; }
    .footer { padding: 30px; }
}

/* ----------- MAP ----------- */
#Laag_2 { fill: #5e6a70; stroke: #a5c5d2; stroke-width: 1px; }
path { border: 1px solid #fff; }
g.country.land { fill: #298091; cursor: pointer;  stroke-width: 1px; }
svg { max-width: 600px;  margin: 50px auto; display: block; }
.tabs {  max-width: 467px; margin: 0 auto; border-radius: 10px; overflow: hidden;  }
.tabs a {
    display: block;
    float: left;
    width: 50%;
    background: #4c5663;
    text-align: center;
    padding: 18px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-transform: uppercase;
    color: #bababa;
    cursor: pointer;
}
.tabs a.active { background: #298091; color: #fff; }
/* TOOLTIPS */
#powerTip table {table-layout: fixed; max-width: 347px; width: 100%;   border:solid #323232; border-width: 1px 0;   }
#powerTip a { color: #323232; }
#powerTip h2 {position: relative; font-size: 1.2rem; overflow: hidden; border-bottom: 1px solid #323232; padding: 20px 15px 10px;  }
#powerTip h2 a { cursor: pointer;  position: absolute; top: 25px; right: 15px; font-size: .7rem; float: right; font-weight: normal; }
#powerTip h3 { min-height: 77px; min-height: 92px;  font-weight: 300; text-transform: uppercase; font-size: .7rem; margin: 0; float: left; width: 33.3%; text-align: center; border: solid #323232; border-width: 0 1px 0 0; padding: 10px;-moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; overflow: hidden; }
#powerTip h3 span { display: block; font-weight: 800; font-size: 1.2rem; white-space: normal; margin-bottom: 4px;   }
#powerTip h3:nth-child(4) { border: 0; }
#powerTip h4 { clear: both; border-top: 1px solid #323232; padding: 10px 10px 0 10px; margin: 0; font-size: 0.7rem;  font-weight: 300; text-transform: uppercase;  }
#powerTip p { font-size: 0.7rem;font-weight: bold; text-transform: uppercase; padding: 0 10px 10px 10px; margin: 0;   }
#powerTip h5 { text-align: center; font-size: 1rem; margin: 0 0 10px; padding: 10px 0; border-bottom: 1px solid #323232;  text-transform: uppercase; }
#powerTip p.projects { font-weight: 800; font-size: .9rem; }
/* COUNTRIES */
.countries .map.row { background: #265056; border: 0; overflow: hidden; min-height: 963px; max-height: 969px; overflow-y: scroll; }

.content.assessment2 { display: none; }

.countries .right { float: right; width: 71%; }
.countries .left { clear: both; float: left; width: 25%; }

.countries .content { clear: both; padding-top: 35px; }
.countries .tabs { margin: 0 0 -50px; }
.back_to_map, .back_to_list  {
    float: right;
    color: #a8c5d3;
    cursor: pointer;
    background: url('images/back_to_map.gif') right center no-repeat;
    padding: 10px 40px 10px 0;
}
.countries hr { clear: both; height: 3px; border: 0; background: #afc0c2;  margin-bottom: 35px; }
.countries p { clear: both; font-size: .9rem; font-weight: 300; margin: 0; color: #fff; margin-bottom: 35px;  }
.countries h3 { margin: 0; color: #fff; text-transform: uppercase; font-weight: 400; }
.countries h4 { float: left;  color: #fff; font-size: 2rem; margin: 0 35px 35px 0; }
.countries h4 span { display: block; font-size: .7rem;  text-transform: uppercase; font-weight: 300; }
.countries .partner h4 { margin-bottom: 10px; }

.countries h5 { color: #fff; font-size: .7rem; text-transform: uppercase; font-weight: 300;   margin-bottom: 35px;   clear: both;}
.countries h5 a, .countries h5 span { display: block; font-size: 1.5rem; color: #fff; font-weight: 800; text-transform: capitalize}

.countries p a { color: #fff; border-bottom: 1px dotted; }
.countries p a:hover { color: #298091; }

.countries h1 { color: #fff; text-transform: uppercase;  text-align: center; display: none; }

.countries.senegal .map.row { background: url('images/back_senegal.png') 40px 40px no-repeat #265056; background-attachment: local;}
.countries.liberia .map.row { background: url('images/back_liberia.png') 40px 40px no-repeat #265056;  background-attachment: local;}
.countries.uganda .map.row { background: url('images/back_uganda.png') 40px 40px no-repeat #265056;  background-attachment: local;}
.countries.mozambique .map.row { background: url('images/back_mozambique.png') 40px 40px no-repeat #265056;  background-attachment: local;}
.countries.drc .map.row { background: url('images/back_drc.png') 40px 40px no-repeat #265056;  background-attachment: local;}
.countries.zambia .map.row { background: url('images/back_zambia.png') 40px 40px no-repeat #265056;  background-attachment: local;}
.countries.tanzania .map.row { background: url('images/back_tanzania.png') 40px 40px no-repeat #265056;  background-attachment: local;}

.list ul{ padding: 0; margin: 0; overflow:hidden; }
.list li { -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;padding: 10px; list-style: none; float: left; width: 50%; text-align: center; margin: 0; }
.list li img { display: inline; float: none; cursor: pointer; margin: 0}

.full_link { clear: both; text-align: center; display: block; padding-bottom: 30px; color: #fff; text-transform: uppercase; font-size: 1.2rem; }

.map_wrapper { max-width: 100%; }
@media only screen and (max-width: 1018px) {
    .countries h1 { display: block; }
    .countries .map.row { background-image: none !important;  }
    .countries .right { float: none; width: 100%; }
    .countries h3 { margin-bottom: 35px;  }
    .back_to_map, .back_to_list { float: none; margin: 35px auto 0 auto; display: block; max-width: 113px; }
    .countries .tabs { margin: 0 auto; }
    .countries .left { float: none; width: 100%; }
    .countries .intro h3 { padding-top: 0; }

}
@media only screen and (max-width: 600px) {
    .countries h4 { float: none; width: 100%; text-align: left;  }
    .countries h5 { margin-top: 0px;}
}
@media only screen and (min-width: 736px) {
    .list, .back_to_list { display: none; }

}
@media only screen and (max-width: 736px) {
    #map1, #map2, .back_to_map { display: none !important; }
    .countries .map.row { height: auto; max-height: none; min-height: none;  overflow-y: hidden; }
    .map.row{ background: #7498a7 }

}
@media only screen and (max-width: 556px) {
.list li { width: 100%; }
    .tabs a { float: none; width: 100%; }
}