/*! HTML5 Boilerplate v5.3.0 | MIT License | https: //html5boilerplate.com/ */

/* * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team. */

/* ==========================================================================
 Base styles: opinionated defaults
 ========================================================================== */

html { color: #222; font-size: 1em; line-height: 1.4; height:100%; }

/* * Remove text-shadow in selection highlight: 
 * https: //twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate. */
: : -moz-selection { background: #b3d4fc; text-shadow: none; }
: : selection { background: #b3d4fc; text-shadow: none; }

/* * A better looking default horizontal rule */
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }

/* * Remove the gap between audio, canvas, iframes, images, videos and the bottom of their containers: 
 * https: //github.com/h5bp/html5-boilerplate/issues/440 */
audio, canvas, iframe, img, svg, video { vertical-align: middle; }

/* * Remove default fieldset styles. */
fieldset { border: 0; margin: 0; padding: 0; }

/* * Allow only vertical resizing of textareas. */
textarea { resize: vertical; }

/* ==========================================================================
 Browser Upgrade Prompt
 ========================================================================== */

.browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }

/* ==========================================================================
 Author's custom styles
 ========================================================================== */
/* Mobile Layout: 480px and below every div gets full width */

body { background-color: #FFFFFF; height:100%; font-family:"pt-serif"; font-size:16px;}
.site-width { max-width: 984px; margin-left: auto; margin-right: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.site-width { padding: 0 10px; }
.skip
h1, h2, h3, h4, h4 a,th {font-family: "museo-sans-condensed"; margin:0;line-height:1.2;}
h4 , th{margin:15px 0 0 0;font-size:20px;}
h4.question {margin:25px 0 5px 0;}
h3.banner {width:100%; padding:10px; color:#ffffff;font-size:20px; background: #313A40;}
p {margin:0 0 18px 0;}
p.blocked {margin: 6px 30px 20px 30px; }
li {margin-bottom: 0.2%;}
h1 { font-size: 28px; line-height:80px; text-transform:uppercase; letter-spacing:3px; padding: 0;margin:0;}
h3 {font-size:20px;margin:15px 0;}
a.button {padding: 8px; color: white; font-weight: bold; background-color: rgba(212, 114, 40, 1); line-height: 2;}
a:hover, a:focus, a.button:hover, a.button:focus {color:#154734;}
figure {display:table;  text-align:center;margin:0 0 20px 0;}
figure img {display:block;max-width:100%; text-align:center;}
figcaption {font-size:10px; line-height:18px; display:table-caption; caption-side:bottom; text-align:center;} 
figure.grid, div.grid {float:left; text-align:center; width:98%; margin:2% 1%;}
figure.grid img {display:inline-block; max-width:100%;}
figcaption.grid {font-size:16px; line-height:20px; display:inline-block; text-align:left; width:100%; margin-top:8px;}
figcaption.grid a.title {font-size:18px; line-height:22px; }
figcaption.grid span {line-height:32px; }

div.right {float:right; margin:20px 0 20px 30px;}
div.left {float:left; margin:20px 30px 20px 0}
div.note {font-size:smaller;}
blockquote {width: 80%; margin:auto; border-top: 5px #3363AF solid; border-bottom: 5px #3363AF solid; padding:20px 5px 25px 5px; font-size:larger;margin-bottom:15px;}
blockquote span {float:right; font-size:smaller; font-style:italic;line-height:2;}
 @media only screen and (min-width: 480px) { 
 	h1 { font-size: 50px;background: url(../images/coded/plus.png) no-repeat right;}
 	h2 { font-size: 32px;}
 	h3 { font-size: 26px;}
	#mada figure.grid, div.grid {float:left; width:47%;}
	
}
 @media only screen and (min-width: 768px) { 
 	h1 { font-size: 60px;}
 	h2 { font-size: 39px;}
	h3 { font-size: 30px;}
	figcaption {font-size:12px; line-height: 20px;}
	#mada figure.grid {float:left; width:29%;}
	figure.grid, div.grid {float:left; width:47%;}
	figure.right{float:right; margin:20px 0 20px 30px;}
	figure.left{float:left; margin:20px 30px 20px 0}
 }
@media only screen and (min-width: 1024px) { 
	.site-width { padding: 0}
}

/* header */
header div { width: 100%; display: block; text-align:center;}
#logoStandard {display:none;}
#logoSmall {display:inline;}
#search { text-align: center; vertical-align: top; }
#google_translate_element { margin: 5px 0; display:block;width:99%;}

#search form { margin: 5px 0; display:inline-block;width:49%;}
#search .text { background: #FFFFFF; border: 1px solid #979797; box-shadow: inset 0px 1px 3px 0px rgba(0,0,0,0.50); font-family: "museo-sans-condensed"; font-size: 14px; color: #313A40; padding: 6px; width: 85px; }
#search .buttonS { background: url(../images/coded/searchButtonSprite.png) no-repeat 0 0; border: 1px; width: 32px; height: 32px; display: inline; margin: 0 0 0 5px; vertical-align: middle; }
#search .buttonM { background: url(../images/coded/mailButtonSprite.png) no-repeat 0 0; border: 1px; width: 150px; height: 32px; display: inline; margin: 0 5px 0 0; vertical-align: middle; }
#search .buttonS:hover, #search .buttonS:focus { background: url(../images/coded/searchButtonSprite.png) no-repeat 0 -32px; }
#search .buttonM:hover, #search .buttonM:focus { background: url(../images/coded/mailButtonSprite.png) no-repeat 0 -32px; }

@media only screen and (min-width: 481px) { 
	#search .text { width: 120px; }
}
 @media only screen and (min-width: 768px) { 
	#logo, #search { display: inline-block; width: 49.5%; }
	#logo img { max-width: 300px; }
	#logoStandard {display:block;}
	#logoSmall {display:none;}
	#search { text-align: right; }
	#search form { display:block; width:100%; margin: 10px 0 15px 0; }
	#search .text { width: 255px; }
	#search .buttonM {margin-right:155px; }
	#google_translate_element {margin: 5px 0 10px 0;}
	#google_translate_element div { text-align: right;}
}

/* menu */
nav { font-size: 14px; color: #FFFFFF; background-color: #313A40; min-height: 26px; position: relative; z-index: 10; font-family: "museo-sans-condensed"}
nav a , nav a:visited { display: block; color: white; text-decoration: none; height:100%; font-weight:normal;}
nav a:hover, nav a:focus { color: #FFFFFF; display: block; text-decoration: none; }
nav ul { list-style: none; margin: 0; padding: 0; }
nav li { display:inline-block; padding: 4px 10px; text-align: left; position: relative;}
nav li ul { position: absolute; left: -9999px; box-shadow: 3px 4px 10px 0px rgba(0,0,0,0.26); background-color: #313A40; }
nav li li { display: block; float: left; background-color: transparent; border: 0; width: 100%; padding: 0; }
nav li li a { display: block; color: white; padding: 4px 15px; }
nav li li a:hover, nav li li a:focus { background-color: #3363AF; display: block; }
nav li:hover ul, nav li:focus ul { left: 0; top: 24px; }
nav p {display:none;}

@media only screen and (min-width: 481px) {
	nav { font-size: 18px; min-height: 34px;}
	nav ul { float: right; }
	nav li {padding: 4px 25px; }
	nav li:hover ul, nav li:focus ul { left: 0; top: 33px; }
 }
 @media only screen and (min-width: 768px) { 
	nav { font-size: 20px; min-height: 37px;}
	nav li { padding: 4px 20px; }
	nav li:hover ul, nav li:focus ul { left: 0; top: 36px; }
	nav p { float: left; display:inline-block; font-style: italic; margin: 5px 45px; font-size: 18px; }
}
 @media only screen and (min-width: 1024px) { 
	nav { font-size: 22px; min-height: 39px;}
	nav li { padding: 4px 25px; }
	nav li:hover ul, nav li:focus ul { left: 0; top: 39px; }
}

/* hero */
#hero { background-position: center; background-size: cover; width: 100%; height: 80px; margin: 0; position: relative;}
#hero-text {color: #FFFFFF;margin: 0; position: absolute; bottom: 0; width:100%; }

/*sections*/
#overview {background-color: #313A40;color:#ffffff; padding:30px 0; min-height:320px;}
#overview figure img {height:100%; float:right; padding:0 0 20px 0;}
#overview p , #overview li {margin: 15px 0; padding: 0; font-size:18px;line-height:1.5;}
#overview p:first {margin-top:2px; }
#overview p:last {margin-bottom:2px;}
#overview a {color:#D47228;}
#main {padding:70px 0 ;}
#main h2 {margin-bottom:8px;}
#main h3 {margin-top: 40px;}
#main h3.banner {margin-top: 20px;}
#main th , #main td {padding:8px; vertical-align:top;}
#success {padding:40px 0 50px 0;}
#toc {padding: 50px 0; height:420px; overflow:scroll; margin-bottom:10px;margin-top:10px; -ms-scrollbar-face-color :#313A40; -ms-scrollbar-arrow-color:#ddd;}
#toc::-webkit-scrollbar { width: 20px;margin-right:10px;}
#toc::-webkit-scrollbar-thumb { height: 170px; background: #313A40; -webkit-border-radius: 1ex;}
#toc.landing { height:auto;overflow:visible;}
#success h2, #partners h2, #more h2, #pubs h2 { padding: 30px 0 0 0; margin: 0 0 15px 0;}
#partner div {padding:15px; font-size:larger;}
#partner img {margin-right:20px;}
#map {border:#313B40 1px solid; min-height:300px;min-width:320px;}
.mapboxgl-popup { max-width: 300px; font: 12px/20px; }
@media print {
	#toc { height:auto; overflow:visible; }
	}

/* footer */
footer { display:block; background: #313A40; width: 100%; font-family: "museo-sans-condensed"; box-sizing: border-box; }
footer a, footer a:visited {color: #000000;font-weight:normal;}
#follow { text-align:center;color:#FFFFFF; }
#follow a {display: inline-block; margin:20px 10px; height:29px; min-width:29px; border-top:1px solid #313A40; border-bottom: 2px solid #313A40; }
#follow a:hover {border-top:2px solid #313A40;  border-bottom: 1px solid #313A40;}}
#fb { background-image: url(../images/coded/FB_29.png);}
#tw { background-image: url(../images/coded/TW_29.png);}
#yt { background-image: url(../images/coded/YT_29.png); width:36px;}
#fl { background-image: url(../images/coded/FL_29.png);}
#md { background-image: url(../images/coded/MD_29.png);}

#footer-nav { font-size: 12px; color: #000000; background-color: #DFE1E2; width:100%; padding:0; margin:0;display:block;}
#footer-nav li li a , #footer-nav li li a:visited {font-size: 12px; display: block; color: #000000; text-decoration: none; height:100%; padding:5px 10px; text-transform:none;}
#footer-nav a:hover, nav a:focus { color: #FFFFFF; display: block; text-decoration: none; font-weight:normal;}
#footer-nav ul { list-style: none; margin: 0; padding: 0; }
#footer-nav li { display:inline-block; padding: 0; text-align: left; width:25%; box-sizing: border-box; }
#footer-nav li ul {margin:0; padding:0;}
#footer-nav li li { display: block; float: left; border: 0; width: 100%; padding: 0; background-color: #DFE1E2;}
#footer-nav li li a:first { padding:10px 10px 5px 10px; }
#footer-nav li li a:hover, nav li li a:focus { background-color: #313A40; display: block; color:#FFFFFF;}
#footer-nav-about {background-color:#3363AF;}
#footer-nav-work {background-color:#D47228;}
#footer-nav-countries {background-color:#154734;}
#footer-nav-resources {background-color:#622666;}
#footer-nav-about a, #footer-nav-work a , #footer-nav-countries a , #footer-nav-resources a {color:#FFFFFF; font-size:14px; padding:10px ; display: block; text-decoration: none; height:100%; text-transform:uppercase;}
#footer-nav-about a:hover, #footer-nav-work a:hover , #footer-nav-countries a:hover , #footer-nav-resources a:hover, #footer-nav-about a:focus, #footer-nav-work a:focus, #footer-nav-countries a:focus, #footer-nav-resources a:focus {color:#000000;}
#siteLinks {text-align:center; margin:3px 0 10px 0;}
#siteLinks a, #sitelinks a:visited{color:#FFFFFF; padding:5px 15px 0 1px; text-decoration:none;font-weight:normal;}
#siteLinks a:hover{color:#DFE1E2; }

#sundries { overflow:hidden; }
#contact { font-size:18px; width: 100%; padding:2%; color:white; display: block;}
#contact h4 {margin: 5px 0 10px 0; }
#contact address{font-style:normal;}
#contact a, #contact a:visited {color: #FFFFFF;}
#disclaimer, #contract { font-size:14px; color:white;width: 100%; padding:1%; display: block;}
#usaid-logo { background: white; text-align:center; width: 100%; height:128px; display: block; clear:left;}
iframe {width:320px; height: 180px; padding:1% 0;}
@media only screen and (min-width: 481px) {
 	#follow a { margin:24px 12px; }
	#footer-nav li li a , #footer-nav li li a:visited {font-size:16px }
	#footer-nav-about a, #footer-nav-work a , #footer-nav-countries a , #footer-nav-resources a {font-size:18px;}
	#contact , #contract { display: inline-block; float: left;width:47%}
	#contact { text-align:right; font-size:16px; }
	iframe {width:480px; height: 270px;}
}
@media only screen and (min-width: 768px) { 
	#follow a {margin:80px 30px; height:57px; min-width:57px; background-color:transparent;}
	#fb { background-image: url(../images/coded/FB_57.png);}
	#tw { background-image: url(../images/coded/TW_57.png);}
	#yt { background-image: url(../images/coded/YT_57.png); width:70px;}
	#fl { background-image: url(../images/coded/FL_57.png);}
	#md { background-image: url(../images/coded/MD_57.png);}
	#footer-nav-about a, #footer-nav-work a , #footer-nav-countries a , #footer-nav-resources a {font-size:24px; padding:15px 30px;line-height:1.2;}
	#footer-nav li li a , #footer-nav li li a:visited {font-size:20px; padding:8px 30px;}
	iframe {width:768px; height: 432px;}
}
@media only screen and (min-width: 1024px) { 
	#contact {width:295px; box-sizing: border-box; }
	#contract { max-width: 360px; }
	#usaid-logo {width:300px; display: inline-block; float:left; padding: 25px 0 5px 5px;background-color: transparent;clear:none; }
	#disclaimer{width:99%;clear:left;}
}

/* button bar */
#button-bar {text-align:center; padding:30px 0 10px 0;line-height:40px;}
#button-bar a.button{padding:9px 13px; font-size:15px; font-weight:bold; color:#FFFFFF; background-color: #682666; text-decoration:none; border:0; text-transform: uppercase; font-family: "museo-sans-condensed";}
#button-bar button{margin:8px 8px; padding:3px 15px;font-size:15px; font-weight:bold; color:#FFFFFF; background-color: #682666; text-decoration:none; border:0; text-transform: uppercase; font-family: "museo-sans-condensed";}
#button-bar a.button:hover, #button-bar a.button:focus, #button-bar button:hover, #button-bar button:focus {background-color:#000000;}
#button-bar button.on{background-color: #3363AF;}

/* thumbnail lists */
div.thumb-item{width:100%; margin-bottom:8%; position:relative;}
div.thumb-item a.button {padding:10px 15px; font-size:14px; font-weight:bold; color:#FFFFFF; background-color:#3363AF; text-decoration:none; border:0; text-transform: uppercase; position:absolute; bottom: 0; right:0; display:none;}
div.thumb-item a.button:hover, div.thumb-item a.button:focus {background-color:#000000;}
div.thumb-image {width:25%;margin-right:4%; display:inline-block; vertical-align:top; background-color:#dddddd;}
div.thumb-image img {width:98%; margin:0; border: 1px solid #dddddd;}
div.thumb-image a {width:100%; height:100%; }
div.thumb-image a:hover img, div.thumb-image a:focus img{border: 1px solid #3363AF;}
div.thumb-title {width:69%;font-size:16px;line-height:24px; display:inline-block;font-family: "museo-sans-condensed"; text-align:left;}
div.thumb-title p {font-size:12px;line-height:20px; margin:4px 0; display:none; font-family: "pt-serif"; text-align:left;}
div.thumb-title p span {line-height:30px;}
div.thumb-title  ul li {font-size:smaller;}
#pubs a:hover div.thumb-image img, #pubs a:focus div.thumb-image img{border: 1px solid #3363AF;}
#pubs a div.thumb-title span {text-decoration:none; color:#000;}

@media only screen and (min-width: 481px) {
	div.thumb-image {width:20%;}
	div.thumb-title {width:74%;}
	div.thumb-title p {display:block;}
}
@media only screen and (min-width: 768px) { 
	div.thumblist {width:95%; margin-left:auto; margin-right: auto; clear:both;}
	div.thumb-image {width:15%; margin-left: 4%; margin-right:3%; display:inline-block; vertical-align:top;}
	div.thumb-title {width:70%;font-size:18px; }
	div.thumb-title p {font-size:16px; width:80%;}
	div.thumb-item a.button {display:block;}
}
@media only screen and (min-width: 1024px) { 
	div.thumblist {width:75%; margin-left:auto; margin-right: auto;}
	div.thumb-title {width:76%;font-size:22px; line-height:26px; font-weight:bold;}
	div.thumb-title p {font-size:18px; font-weight:normal;}
}

/* region & sitemap */
div.regionTitle {background-color:#154734; color:#FFFFFF; text-transform:uppercase; min-height:310px;}
div.regionTitle img, div.regionTitle h2 {display:inline-block;}
div.columns {width:98%; margin:30px 0;}
div.regionTitle h2 {line-height: 40px;}
@media only screen and (min-width: 480px) { 
 	
 }
 @media only screen and (min-width: 768px) { 
	 div.regionTitle {line-height:300px; }
 	div.columns {width:44%; display:inline-block; padding:1%; vertical-align:top;}
 }
@media only screen and (min-width: 1024px) { 
	
}

/* ==========================================================================
 Helper classes
 ========================================================================== */

/* * Hide visually and from screen readers */
.hidden { display: none !important; }

/* * Hide only visually, but have it available for screen readers: 
 * http: //snook.ca/archives/html_and_css/hiding-content-for-accessibility*/
.visuallyhidden, a.skip { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: 
 * https: //www.drupal.org/node/897638 */
a.skip:hover, a.skip:focus, a.skip:active, .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* * Hide visually and from screen readers, but maintain layout */
.invisible { visibility: hidden; }

/* * Clearfix: contain floats
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the `contenteditable` attribute is included anywhere else in the document.
 * Otherwise it causes space to appear at the top and bottom of elements that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using `: before` to contain the top-margins of child elements. */
.clearfix: before, .clearfix: after { content: " "; /* 1 */ display: table; /* 2 */ }
.clearfix: after { clear: both; }


/* ==========================================================================
 Print styles.
 Inlined to avoid the additional HTTP request: 
 http: //www.phpied.com/delay-loading-your-print-css/
 ========================================================================== */
@media print { 
*, *: before, *: after, *: first-letter, *: first-line { background: transparent !important; color: #000 !important; /* Black prints faster: http: //www.sanbeiji.com/archives/953 */ box-shadow: none !important; text-shadow: none !important; }
 a, a: visited { text-decoration: underline; }
 a[href]: after { content: " (" attr(href) ")"; }
 abbr[title]: after { content: " (" attr(title) ")"; }
 /* * Don't show links that are fragment identifiers, * or use the `javascript: ` pseudo protocol */
 a[href^="#"]: after, a[href^="javascript: "]: after { content: ""; }
 pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
 /* * Printing Tables: * http: //css-discuss.incutio.com/wiki/Printing_Tables */
 thead { display: table-header-group; }
 tr, img { page-break-inside: avoid; }
 img { max-width: 100% !important; }
 p, h2, h3 { orphans: 3; widows: 3; }
 h2, h3 { page-break-after: avoid; }
	#nuggets .visuallyhidden { border: 0; clip:auto ; height: auto; margin: 0; overflow: hidden; padding: 0; position: relative; width: auto;}
}