/*----- STRUCTURE ------*/
html, body, #main {
	margin:0;
	padding:0;
	height:100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.ui-slider-handle {
	touch-action: none;
}
#main {
    transition: margin-left .5s;
    position:relative;
}
.page section {
	padding-top:80px;
}
section, div, header, nav, footer {
	box-sizing:border-box;
}
section.title {
	min-height:100%;
}
footer {
	background-color:rgb(80,145,205);
	color:rgb(255,255,255);
	padding:60px;
}
footer img {
	width:50%;
	display:block;
	max-width:200px;
	margin:0 auto;
}
footer p {
	width:75%;
	margin:0 auto;
	text-align:center;
}
footer ul {
	list-style:none;
	text-indent:0;
	padding:0;
}
footer ul li {
	list-style:none;
	text-indent:0;
	padding:0;
	text-transform:uppercase;
	font-size:18px;
	line-height:22px;
}
footer .row {
	border-bottom:1px solid rgb(255,255,255);
	padding-bottom:40px;
}
.social-icons a, span[class*="_button_pin"] {
	display:block;
	width:40px;
	height:40px;
	float:left;
	margin-right:5px;
	margin-bottom:5px;
	background-size:80px;
	background-position:0 0;
	background-repeat:no-repeat;
	background-attachment:scroll;
	transition:none;
}
.social-icons a.twitter {
	background-image:url(../img/icon-social-tw.svg);
}
.social-icons a.facebook {
	background-image:url(../img/icon-social-fb.svg);
}
.social-icons a.linkedin {
	background-image:url(../img/icon-social-in.svg);
}
.social-icons a.pintrest, span[class*="_button_pin"] {
	background-image:url(../img/icon-social-pt.svg) !important;
}
span[class*="_button_pin"] {
	background-color:transparent !important;
	box-shadow:none;
	border-radius:0;
	background-clip:border-box;
	background-origin:padding-box;
}
.social-icons a.email {
	background-image:url(../img/icon-social-em.svg);
}
.social-icons a:hover, .social-icons a:focus, span[class*="_button_pin"]:hover, span[class*="_button_pin"]:focus {
	background-position: -40px 0;
}
span[class*="_button_pin"]:hover, span[class*="_button_pin"]:focus {
	outline:0;
	border:0;
	box-shadow:none !important;
}
.social-icons a:last-of-type {
	margin-right:0;
}
.social-icons h2 {
	clear:both;
}
.social-icons h2:nth-of-type(2) {
padding-top:20px;
}
.wrapper {
	padding:25px;
	max-width:1500px;
	margin: 0 auto;
}
.row {
	display:flex;
}
.row:after {
	content:'';
	display:block;
	clear:both;
}
.col2 {
	width:calc(50% - 20px);
	margin-right:40px;
}
.col2 .col2 {
	width:calc(50% - 10px);
	margin-right:20px;
}
div.col2:last-of-type {
	margin-right:0px;
}
.col3 {
	width:calc(33% - 20px);
	margin-right:20px;
}
.col4 {
	width:calc(25% - 10px);
	margin-right:40px;
}

div.col3:last-of-type, div.col4:last-of-type {
	margin-right:0px;
}
.col4 img {
	width:100%;
	height:auto;
}

.nexttext {
	position:absolute;
	bottom:30px;
	width:100%;
	left:0;
	right:0;
	margin:0 auto;
}
.nexttext p {
	color:rgb(255,255,255);
	font-weight:600;
	text-transform:uppercase;
	font-family:'Roboto Condensed',sans-serif;
	text-align:center;
	font-size:18px;
}
.nexttext p:not(.photocredit) a {
	position:relative;
	top:-40px;
}
.nexttext p:not(.photocredit) a::after {
	content:'';
	display:inline-block;
	width:70px;
	height:70px;
	background:url('../img/icon-downarrow-big.svg') center center / contain scroll no-repeat;
	position:absolute;
	left:50%;
	top:28px;
	margin-left:-35px;
}
.nexttext p:not(.photocredit) a:hover::after {
	background:url('../img/icon-downarrow-big-hover.svg') center center / contain scroll no-repeat;
}
p.photocredit {
	text-align:left;
	font-weight:300;
	text-transform:none;
	font-family:'Roboto Condensed',sans-serif;
	color:rgb(255,255,255);
}
.nexttext p.photocredit {
	position:absolute;
	bottom:30px;
}
p.sources {
	font-family:'Roboto Condensed',sans-serif;
	font-size:14px;
	color:rgb(100,100,100);
	padding-top:10px;
	margin-bottom:0px;
}
#inneed-source {
	margin-bottom:80px;
	display:none;
}
span[class*="tag-"] {
	padding:3px 5px;
	display:inline-block;
	margin-left:5px;
	font-size:13px;
	text-transform:uppercase;
	color:rgb(255,255,255);
	vertical-align:top;
}
.tag-famine {
	background:#B71728;
}
.tag-emergency {
	background:#E8A2A5;
}
.tag-crisis {
	background:#FEE5CB;
}
.tag-stressed {
	background:#FFFBDF;
}
.tag-minimal {
	background:#E3F1E6;
}


a {
	color:inherit;
	text-decoration:none;
	transition: all 0.5s;
}
a:hover, a:focus {
	text-decoration:underline;
}
a.button {
	display:block;
	color:rgb(255,255,255);
	border-radius:8px;
	text-align:center;
	text-transform:uppercase;
	font-family:'Roboto Condensed',sans-serif;
	font-size:18px;
	line-height:18px;
	padding:15px 5px;
	text-decoration:none;
	font-weight:700;
}
a[id*="position"] {
	position:relative;
	top:-90px;
}
p a {
	text-decoration:underline;
}
p a:hover, p a:focus {
	text-decoration:none;
}
strong {
	font-weight:700;
}
strong[class*='-bk'] {
	padding:0 5px;
	white-space:nowrap;
}
sup, sub {
	vertical-align: baseline;
	position: relative;
	top: -0.4em;
}
sub { 
	top: 0.4em; 
}
/*----- COLORS ------*/
.red {
	color:rgb(231,78,55);
}
.red-bk, .sidenav a.red-bk {
	background-color:rgb(231,78,55);
	fill:rgb(231,78,55);
}
.button.red-bk:hover {
	background-color:rgb(204,53,37);
}
.blue {
	color:rgb(80,145,205);
}
.blue-bk {
	background-color:rgb(80,145,205);
	fill:rgb(80,145,205);
}
.yellow {
	color:rgb(255,233,176);
}
.yellow-bk {
	background-color:rgb(255,233,176);
	fill:rgb(255,233,176);
}
.gold {
	color:rgb(231,188,55);
}
.gold-bk {
	background-color:rgb(231,188,55);
	fill:rgb(231,188,55);
}
.lightblue-bk {
	background-color:rgb(203,224,239);
	fill:rgb(203,224,239);
}
.white-bk {
	background-color:rgb(255,255,255);
	fill:rgb(255,255,255);
}
.white {
	color:rgb(255,255,255);
}

/*----- TYPE ------*/
html, body {
	font-family:'Roboto',sans-serif;
}
h1, h3 {
	font-family:'Roboto Condensed',sans-serif;
	text-transform:uppercase;
}
h1 {
	font-size:35px;
	line-height:39px;
}
h2 {
	font-size:24px;
	line-height:28px;
	text-transform:uppercase;
}
h3 {
	font-size:18px;
	margin:0;
	padding:5px;
	text-align:left;
	font-weight:400;
	border-top:1px solid rgb(0,0,0);
	border-bottom:1px solid rgb(0,0,0);
}

p, li {
	font-size:16px;
	line-height:22px;
}

/*----- SECTION INTRO ------*/
.section-info {
	max-width:700px;
	margin:0 auto 60px auto;
}
.section-info {
	text-align:center;
}
.section-info p {
	font-size:20px;
	line-height:26px;
	font-weight:300;
}

/*----- INFOBOXES ------*/
.infobox {
	position:relative;
}
.infobox h3 {
	margin-bottom:10px;
}
.figure {
	font-family:'Roboto Condensed', sans-serif;
	font-size:30px;
	vertical-align: bottom;
	text-transform:uppercase;
	margin:0;
}
.figure {
	position:absolute;
	bottom:8px;
}
.figure span.big-number {
	font-size:100px;
	display:inline-block;
	margin-right:10px;
}

/*----- SIDENAV ------*/
.hamburger {
	position:fixed;
	width:100%;
}
.hamburger span {
	font-size:30px;
	cursor:pointer;
	color:rgb(255,255,255);
}
.page .hamburger span {
	color:rgb(0,0,0);
}
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background:rgba(80,145,205,1);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 30px;
}
.sidenav a {
    text-decoration:none;
    background:rgba(0,0,0,0);
    display:block;
    padding:10px 5px;
    transition: 0.3s;
    text-align:center;
    color:rgb(255,255,255);
    border-radius:8px;
    text-transform:uppercase;
    font-family:'Roboto Condensed',sans-serif;
    opacity:0;
    margin-top:20px;
}
.top-nav {
	padding-top:10px;
}
.sidenav a.branding {
	display:block;
	width:auto;
	height:auto;
	background:none !important;
	transition:none;
}
.sidenav a:not(.button)::after {
	content:'–';
	text-align:center;
	color:rgba(255,255,255,0.8);
	display:block;
	position:absolute;
	left:0;
	right:0;
	margin:5px auto;
	font-size:25px;
	font-weight:300;
	transform:scale(5,0.1);
}
.sidenav a:hover, .offcanvas a:focus{
    background:rgba(0,0,0,0.1);
}
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}
.sidenav a.donatebutton {
	margin-left:10px;
}

.ui-selectmenu-button.ui-button {
	width:40px;
	background:none !important;
	border:none !important;
}
.ui-widget {
	font-size:13px;
}
.ui-button {
	padding:.8em .4em;
}
.ui-icon {
	background:none;
	color:#FFFFFF !important;
}
.ui-button .ui-icon {
	color:#FFFFFF !important;
	background:url(../img/down-arrow.png) center center / contain scroll no-repeat !important;
}
.ui-selectmenu-menu {
	position:fixed !important;
}
.ui-selectmenu-text {
	color:#FFFFFF !important;
}
.ui-widget-content {
	background:rgba(0,0,0,0.4) !important;
	color:#FFFFFF !important;
	position:fixed;
}
.ui-selectmenu-menu .ui-widget-content {
	background:rgba(0,0,0,0.4) !important;
	color:#FFFFFF !important;
	position:absolute !important;
	top:0 !important; left:0 !important;
}
#lang-select {
	float:right;
	margin-left:20px;
	margin-top:15px;
	width:80px;
}
#change-language {
	width:80px;
	opacity:0;
}

/*----- CAROUSEL ------*/
#resources {
	padding-bottom:50px;
}
#resources .col3 {
	position:relative;
	margin-bottom:50px;
}
ul.carousel {
	list-style:none;
	padding:0;
	text-indent:0;
	position:relative;
}
ul.carousel li {
	width:0;
	display:block;
	position:absolute;
	top:0;
	right:0;
	overflow:hidden;
	opacity:0;
}
ul.carousel li.active {
	position:relative;
	left:0;
	width:100%;
	opacity:1;
}
ul.carousel img {
	height:200px;
	margin:0 auto;
	display:block;
	border:1px solid rgba(0,0,0,0.2);
}
.more-stuff {
	margin:0 auto;
	width:120px;
	position:absolute;
	left:50%;
	margin-left:-60px;
	margin-bottom:20px;
	display:inline-block;
	bottom:-50px;
}
.more-stuff .more-link {
	display:inline-block;
	margin:0 10px;
}
.previous-link, .next-link {
	display:inline-block;
	background:rgb(231,78,55);
	border-radius:4px;
	color:rgb(255,255,255);
	padding:0 10px;
	text-decoration:none;
	cursor:pointer;
}
.previous-link:hover, .next-link:hover, .previous-link:focus, .next-link:focus {
	background:rgb(204,53,37);
	text-decoration:none;
}
/*----- TABLES ------*/
table {
	border:0;
	border-collapse:collapse;
	width:100%;
	font-family:'Roboto Condensed', sans-serif;
	color:rgb(120,120,120);
	text-transform:uppercase;
}
tr:nth-child(even) {
	background:rgb(241,241,241);
}
tr td:first-of-type {
	font-weight:600;
}
td {
	padding:5px;
}
.table-header td:first-of-type {
	font-weight:400;
	text-align:right;
}
.table-header td:last-of-type {
	text-align:left;
}
#situation tr td:first-of-type {
	width:50%;
}
#situation tr td:nth-of-type(2) {
	width:10%;
}
#situation tr td:last-of-type {
	width:40%;
}
#funding tr td:first-of-type {
	width:40%;
}
#funding tr td:nth-of-type(2) {
	width:10%;
}
#funding tr td:nth-of-type(3) {
	width:10%;
	text-align:right;
}
#funding tr td:last-of-type {
	width:40%;
}
.percentage-total {
	height: 12px;
	background-color:rgb(203,224,239);
}
.percentage {
	height: 12px;
	background-color:rgb(80,145,205);
}
.percentage-total:hover {
	cursor:pointer;
}

/*----- SECTIONS ------*/
.content:after {
	content:'';
	display:block;
	width:120px;
	height:2px;
	background:rgb(0,0,0);
	margin:60px auto 20px auto;
}
.content:last-of-type:after {
	content:none;
}
#title {
	background:url('../img/bk-somalia-drought.jpg') center center / cover fixed no-repeat rgba(0,0,0,0.3);
	background-blend-mode:multiply;
	background-position: 50% 0;
}
.touch #title {
	background-attachment:scroll !important;
}
#title .wrapper {
	padding-top:10%;
}
.title-info {
	max-width:800px;
	color:rgb(255,255,255);
}
.title-info h1 {
	font-size:70px;
	line-height:72px;
	margin-bottom:0;
}
.title-info p {
	font-size:24px;
	line-height:34px;
	font-weight:300;
}
.title-info p span {
	padding:0 5px;
	font-weight:400;
}
.title-info .button {
	max-width:200px;
}
.button.donate {
	font-size:30px;
}
.ocha-logo {
	position:absolute;
	width:140px;
	right:20px;
	margin-top:4px;
}
.sidenav .ocha-logo {
	left:0;
	right:0;
	margin:0 auto;
	width:50%;
	bottom:60px;
}
#map-situation {
	margin-top:60px;
}
#funding {
	min-height:0;
	margin-bottom:60px;
}
#funding .row {
	display:block;
}
#funding .row .row {
	display:flex;
}
#funding .col3 {
	float:left;
}
#funding .figure {
	position:relative;
	bottom:8px;
}
#funding .figure span.big-number {
	font-size:100px;
	display:inline-block;
	margin-right:0px;
	margin-top:60px;
}
#people-in-need,#malnourished,#funding-requirements,#funding-total,#funding-country {
	display:none;
}
#donatecbpf h3 {
	font-weight:700;
	text-align:center;
}
#donatecbpf img {
	width:80%;
	display:block;
	border-radius:50%;
	margin:20px auto;
}
#donatecbpf .button, #donatecerf .button {
	margin:10px auto;
	max-width:140px;
}
#donatecerf .calltoaction {
	display:inline-block;
	margin-top:20px;
}
#donatecerf .calltoaction:after {
	content:'';
	display:block;
	clear:both;
}
#donatecerf .calltoaction img {
	width:140px;
	float:left
}
#donatecerf .calltoaction a {
	float:left;
	padding-left:10px;
	padding-right:10px;
	margin:0 20px 0 0;
}
#causes .col2 {
	margin-bottom:30px;
}

#resources .from-feed {
	margin:15px 0;
}
#resources .from-feed p {
	margin:0;
}
#resources .from-feed p:first-of-type {
	font-size:18px;
	color:rgb(128,128,128);
}
#resources .from-feed p:first-of-type span {
	font-weight:700;
	color:rgb(0,0,0);
}
#resources .from-feed p:last-of-type {
	font-size:16px;
	font-weight:600;
}
#resources .from-feed p:last-of-type  a {
	color:rgb(79,145,205);
	text-decoration:none;
}
#resources .from-feed p:last-of-type  a:hover, #resources .from-feed p:last-of-type  a:focus {
	text-decoration:underline;
}
a.more-link {
	color:rgb(231,78,55);
	text-decoration:none;
	font-size:18px;
	margin:20px 0;
	display:block;
}
a.more-link:hover, a.more-link:focus {
	text-decoration:underline;
}
#responses .wrapper {
	width:100%;
	max-width:900px;
}
#responses .headers h3 {
	text-align:center;
	color:rgb(0,0,0);
}
#responses .headers h3 span {
	display:block;
	font-size:30px;
	font-weight:700;
}
.response-item {
	position:relative;
	padding-top:20px;
}
.response-item table {
	text-transform:none;
	border-spacing:0;
}
.response-item table tr:nth-child(even) {
	background:none;
}
.response-item table td {
	padding:20px;
	margin:0;
	position:relative;
	border-top:1px solid rgb(0,0,0);
	padding-bottom:20px;
	font-weight:normal;
}
.response-item table tr td:first-of-type, .response-item table tr td:last-of-type {
	width:32.5%;
}
.response-item table tr td:nth-of-type(2) {
	width:35%;
}
.response-item .cluster-name {
	text-transform:uppercase;
	background:rgb(0,0,0);
	color:rgb(255,255,255);
	font-weight:700;
	padding:2px 10px;
	margin:0 0 20px 0;
	font-size:18px;
	position:absolute;
}
.response-item .gap {
	display:block;
	width:40px;
	height:10px;
	background:rgb(255,255,255);
	position:absolute;
	left:50%;
	margin-left:-20px;
	margin-top:-5px;
}
.response-item table td p {
	font-size:20px;
	color:rgb(0,0,0);
	line-height:24px;
}
.response-item h3.mobile-only {
	display:none;
	text-align:center;
	margin:30px 20% 0 20%;
	border-color:rgb(200,200,200);
}
.response-item table td:last-of-type {
	text-align:right;
}
/*----- SVG ------*/
#funding-total svg {
	width:90%;
	margin:0 5%;
	min-width:100px;
}
#funding-total svg path:hover {
	cursor:pointer;
}
#funding-total svg text {
	font-family:'Roboto Condensed';
	font-weight:400;
}
#funding-total .value {
	font-size:19px;
}
#funding-total .unit {
	font-size:10px;
}
#funding-total .text {
	font-size:9px;
}

/*----- TIPSY ------*/
.tipsy {
	position:absolute;
	padding:5px;
	z-index:100000;
}

.tipsy p {
	text-rendering:optimizeLegibility;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	text-align:center;
	margin:0;
}

.tipsy-inner {
	background-color: rgba(0,0,0,0.9);
	color:rgb(255,255,255);
	max-width:200px;
	text-align:left;
	padding:10px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	min-width:150px;
}

/* Tool tip text */
.tip1 {
	font-size:18px;
	font-weight:900;
}
.tip3 {
	font-size:12px;
}	

/* Tipsy arrows */
.tipsy-arrow-n { border-bottom-color: rgba(0,0,0,0.9); }
.tipsy-arrow-s { border-top-color: rgb(0,0,0); }
.tipsy-arrow-e { border-left-color: rgb(255,255,255); }
.tipsy-arrow-w { border-right-color: rgb(0,0,0); }
.tipsy-arrow { position: absolute; width: 0; height: 0; line-height: 0; border: 5px dashed rgba(0,0,0,0.9); }
.tipsy-n .tipsy-arrow { top: 0px; left: 50%; margin-left: -5px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-nw .tipsy-arrow { top: 0; left: 10px; border-bottom-style: solid; border-top: none; border-left-color: transparent; border-right-color: transparent;}
.tipsy-ne .tipsy-arrow { top: 0; right: 10px; border-bottom-style: solid; border-top: none;  border-left-color: transparent; border-right-color: transparent;}
.tipsy-s .tipsy-arrow { bottom: 0; left: 50%; margin-left: -5px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
.tipsy-sw .tipsy-arrow { bottom: 0; left: 10px; border-top-style: solid; border-bottom: none;  border-left-color: transparent; border-right-color: transparent; }
.tipsy-se .tipsy-arrow { bottom: 0; right: 10px; border-top-style: solid; border-bottom: none; border-left-color: transparent; border-right-color: transparent; }
.tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
.tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }

/*----- MAPS ------*/
iframe {border:0; width:100%; height:700px;}

#map {width:100%; height:100%;}
.cartodb-logo {z-index:10 !important;}

#slider  {position:absolute; left:60px; top:40px; z-index:500; width:150px;}
.ui-widget {font-family:inherit;}
.ui-slider-horizontal {height:0.5em;}
.ui-widget-content {border:0; background:rgb(203,203,203);}
.ui-widget.ui-widget-content {border:0;}
.ui-corner-all {border-radius:8px;}
.ui-slider-horizontal .ui-slider-handle {top:-.4em; border-radius:0;}
.ui-widget-content .ui-state-default {background:rgb(128,128,128); border:2px solid rgb(255,255,255); cursor:pointer;}
.ui-widget-content .ui-state-default:hover {background:rgb(75,75,75);}
.ui-widget-content .ui-state-default:focus {background:rgb(30,30,30); outline:0;}
.slider-label {border:0; font-family:'Roboto Condensed', sans-serif !important; text-align:center; font-weight:600; position:absolute; top:30px; width:160px; left:-70px; background:none; text-transform:uppercase;}

.legend-outer {position:absolute; z-index:10; width:200px; padding:20px; background: rgba(255,255,255,0.8); bottom:40px; left:40px;}
.legend-outer.hum-access {width:253px}
.legend-inner * {font-family:'Roboto Condensed',sans-serif;}
.legend-inner p {margin:0;}
.legend-inner h5 {text-transform:uppercase; font-size:20px; line-height:20px; margin:0 0 5px 0;}
.legend-inner ul {list-style:none; padding:0;}
.legend-inner ul li {text-transform:uppercase; clear:both; margin-bottom:3px; color:rgb(90,90,90);}
.legend-inner ul li:before {content:''; display:block; background:#000000; float:left; margin-right:10px;}
.legend-inner ul#famine-legend li:before {width:50px; height:20px;}
.legend-inner ul#access-legend li:before {width:50px; height:6px; border-top:1px solid rgba(77,77,77,0.5); border-bottom:1px solid rgba(77,77,77,0.5); margin-top:8px;}
.legend-inner ul li:before {width:50px; height:20px;}
.legend-inner ul li.li-famine:before {background:#b71728;}
.legend-inner ul li.li-emergency:before {background:#e8a2a5;}
.legend-inner ul li.li-crisis:before {background:#fee5cb;}
.legend-inner ul li.li-stressed:before {background:#fffbdf;}
.legend-inner ul li.li-minimal:before {background:#e3f1e6;}
.legend-inner ul li.li-closed:before {background:#e9a2a5;}
.legend-inner ul li.li-difficult:before {background:#fdcfa1;}
.legend-inner ul li.li-open:before {background:#acd1b8;}
.legend-inner ul li.li-nodata:before {background:#ffffff;}
.leaflet-top .leaflet-control {margin-top:100px;}
.leaflet-control-fullscreen {margin-top:10px !important;}
.leaflet-left .leaflet-control {margin-left:20px;}
.leaflet-bar {box-shadow:none;}
.leaflet-bar a {background-color:rgba(255,255,255,0.8);}
/*.leaflet-container .leaflet-control-attribution {display:none;}*/
   
@media(max-width:578px) {
	.legend-outer {width:100%; left:0; box-sizing:border-box; padding:10px 30px;}
	.cartodb-logo {bottom:150px !important;}
}


/*----- RESPONSIVE ------*/
@media (max-width:1500px) {
	.title-info {
		max-width:700px;
	}
	.title-info h1 {
		font-size:60px;
		line-height:62px;
	}
	.title-info p {
		font-size:20px;
		line-height:30px;
	}
}

@media (max-width:1320px) {
	#funding .figure {
		text-align:center;
	}
	#funding .figure span.big-number {
		display:inline-block;
		margin-bottom:40px;
	}
}
@media (max-width:1220px) {
	#funding-total .row .col2:first-of-type span {
		width:70%;
	}
	
}

@media (max-width:1100px) {
	.title-info {
		max-width:600px;
	}
	.title-info h1 {
		font-size:50px;
		line-height:52px;
	}
	.title-info p {
		font-size:18px;
		line-height:28px;
	}
	p.photocredit {
		font-size:14px;
	}
	.figure {
		text-align:center;
	}
	.figure span.big-number {
		display:block;
		margin-bottom:40px;
	}
	h1 {
		font-size:30px;
		line-height:34px;
	}
	.section-info p {
		font-size:18px;
		line-height:24px;
	}
	footer .row {
		display:block;
	}
	footer .col4 {
		width:calc(33% - 20px);
		margin-right:20px;
		float:left;
	}
	footer .col4:first-of-type {
		width:100%;
		margin-bottom:20px;
	}
	footer .col4:nth-of-type(2) {
		clear:both;
	}

}

@media (max-width:850px) {
	
	.title-info {
		max-width:500px;
	}
	.title-info h1 {
		font-size:40px;
		line-height:42px;
	}
	.title-info p {
		font-size:16px;
		line-height:24px;
	}
	
	#situation tr td {
		float:left;
	}
	#situation tr td:first-of-type {
		width:100%;
	}
	#situation tr td:nth-of-type(2) {
		width:20%;
		padding-top:1px;
	}
	#situation tr td:last-of-type {
		width:60%;
		vertical-align:bottom;
	}
	.col4, footer .col4 {
		width:calc(50% - 20px);
		margin-right:20px;
		margin-bottom:20px;
		float:left;
	}
	.col4:nth-of-type(3) {
		clear:both;
	}
	.col4:last-of-type {
		margin-right:0;
	}
	
}

@media (max-width:768px) {
	
	.title-info {
		max-width:400px;
	}
	.title-info h1 {
		font-size:35px;
		line-height:37px;
	}
	.title-info p {
		font-size:14px;
		line-height:19px;
	}
	a.button {
		display:block;
		font-size:14px;
		line-height:14px;
		padding:10px 5px;
	}
	.nexttext p:not(.photocredit) {
		display:none;
	}
	.row {
		display:block;
	}
	.infobox {
		margin-bottom:30px;
	}
	.col2, .col3 {
		display:block;
		width:100%;
		float:none;
		margin-right:0;
	}
	.col2 .row, .col3 .row {
		display:flex;
	}
	.col2 .col2, .col3 .col2 {
		width:calc(50% - 10px);
		float:none;
		margin-right:0;
	}
	#situation tr td {
		float:none;
	}
	#situation tr td:first-of-type {
		width:50%;
	}
	#situation tr td:nth-of-type(2) {
		width:10%;
		padding-top:5px;
	}
	#situation tr td:last-of-type {
		width:40%;
	}
	.figure {
		text-align:left;
	}
	.figure span.big-number {
		display:inline;
		margin-bottom:0;
	}
	footer {
		padding:20px 0;
	}
	#responses .headers {
		display:none;
	}
	.response-item .gap {
		display:none;
	}
	.response-item table {
		width:100%;
	}
	.response-item table td, .response-item table tr td:first-of-type, .response-item table tr td:last-of-type, .response-item table tr td:nth-of-type(2) {
		float:left;
		width:100%;
		clear:both;
		display:block;
		box-sizing:border-box;
		padding:0;
		text-align:center;
	}
	.response-item table tr td:first-of-type {
		padding-top:20px;
	}
	.response-item table tr td:nth-of-type(2) {
		height:200px;
		padding:0;
		border:0;
	}
	.response-item table tr td:nth-of-type(2) img {
		height:200px;
		display:block;
		position:relative;
		margin:0 auto;
	}
	.response-item table tr td:last-of-type {
		border-top:0;
		
		padding-bottom:20px;
	}
	.response-item table td p {
		margin-left:20%;
		margin-right:20%;
	}
	.response-item h3.mobile-only {
		display:block;
	}
}
@media (max-width:600px) {
	.hamburger {
		position:static;
	}
	.page section {
		padding-top:0;
	}
	p.sources {
		font-size:12px;
		line-height:14px;
	}
	
	.legend-outer {padding:10px; bottom:10px; left:10px; width:120px;}
	.legend-inner h5 {font-size:16px; line-height:15px;}
	.legend-inner ul li {margin-bottom:2px; font-size:12px; line-height:10px; vertical-align:middle;}
	.legend-inner ul li:before {margin-right:5px;}
	.legend-inner ul#famine-legend li:before {width:30px; height:10px;}
	.legend-inner ul#access-legend li:before {width:30px; height:4px; margin-top:3px;}
	.legend-outer p.sources {font-size:12px; line-height:14px;}
}
@media (max-width:535px) {
	
	.title-info {
		max-width:300px;
	}
	#title .wrapper {
		padding-top:60px;
	}
	p.photocredit {
		font-size:10px;
	}
	.figure {
		text-align:center;
	}
	.figure span.big-number {
		display:block;
		margin-bottom:40px;
	}
	h1 {
		font-size:28px;
		line-height:32px;
	}
	.section-info p {
		font-size:14px;
		line-height:19px;
	}
	.col4, footer .col4 {
		width:100%;
		margin-right:0;
		float:none;
	}
	footer .col4:after {
	 	content:'';
	 	display:block;
	 	clear:both;
	 }
	iframe {height:400px;}
}

@media (max-width:480px) {
	
	.title-info {
		max-width:250px;
	}
	.title-info h1 {
		font-size:28px;
		line-height:30px;
	}
	
	.wrapper {
		padding:25px;
	}
	.sidenav {
		padding-top: 10px;
	}
	.sidenav a {
		font-size: 14px;
	}

	#situation tr td {
		float:left;
	}
	#situation tr td:first-of-type {
		width:100%;
	}
	#situation tr td:nth-of-type(2) {
		width:20%;
		padding-top:1px;
	}
	#situation tr td:last-of-type {
		width:60%;
		vertical-align:bottom;
	}

}

@media (max-width:360px) {
	.col2 .row, .col3 .row {
		display:block;
	}
	.col2 .col2, .col3 .col2 {
		width:100%;
		float:none;
		margin-right:0;
		flex:none;
	}
	#funding .row .row {
		display:block;
	}
	#funding svg {
		max-width:70%;
		margin:0 15%;
	}
	#situation tr td {
		float:none;
	}
	#situation tr td:first-of-type {
		width:50%;
	}
	#situation tr td:nth-of-type(2) {
		width:10%;
		padding-top:5px;
	}
	#situation tr td:last-of-type {
		width:40%;
	}
	.figure {
		position:relative;
		line-height:auto;
		margin-bottom:0;
		margin-top:60px;
	}
	#funding .figure {
		margin-top:10px;
	}
	.figure span.big-number {
		font-size:100px;
		display:inline-block;
		margin-right:10px;
	}
}

@media (min-width:1200px) {
	#main {
		margin-left:0 !important;
	}
	.hamburger {
		display:none;
	}
	.mobile-logo {
		display:none;
	}
	.sidenav .wrapper {
		padding-top:0;
		padding-bottom:0;
	}
	.sidenav {
	    height: auto !important;
	    min-height:0;
	    width: 100% !important;
	    padding:5px 30px !important;
	    transition:none;
		background: rgba(80,145,205,1);
	}
	.sidenav .ocha-logo {
		float:left;
		position:relative;
		top:0;
		height:49px;
		width:200px;
	}
	.sidenav .top-nav {
		float:right;
		padding-top:15px;
	}
	.sidenav a {
	    padding:10px 15px !important;
	    opacity:1 !important;
	    float:left;
	    margin-top:0;
	}
	.sidenav a:not(.button)::after {
		display:none;
	}
	.sidenav .closebtn {
	    display:none;
	}
	.nexttext .ocha-logo {
		display:none;
	}
}
@media (max-width:1200px) {
	.hamburger {
		background:rgb(80,145,205);
		padding:10px 20px;
	}
	.hamburger span {
		color:rgb(255,255,255) !important;
	}
	
	.sidenav {
	    background:rgba(80,145,205,1) !important;
	}
	.sidenav a.branding {
		position:absolute;
		width:100%;
		padding:0;
		margin:0;
		left:0;
		right:0;
		bottom:60px;
	}
	.sidenav a.branding .ocha-logo {
		position:relative;
		top:0;
		left:0;
		margin:0;
		bottom:auto;
	}
	.sidenav a.branding:after {
		display:none;
	}
	.sidenav a.donatebutton {
		margin-left:0;
	}
}
@media (max-height:900px) {
	.nexttext {
		display:none;
	}
}
@media (orientation:portrait) {
	section.content {
		min-height:0;
	}
}