.main-navigation ul li ul {display: none; visibility: hidden; opacity: 0}

@media (min-width: 767px) {
header nav {background-color: #d9781d;}
.page-template-tri-facts-template-php header nav { background-color: #646464;}
header nav ul li.page-item-11 {float: right;}
header nav ul li.page-item-9 { border-right: 2px solid white;}
header nav ul li.page-item-8, header nav ul li.menu-item-218 {width: 15%}
.search-form {background-color: #d9781d; padding: 11px 0 5px 0;}
.search-form .search-field {margin-left: 15px }

header nav ul li.menu-item-218 {width: 19%}
header nav ul li.menu-item-211, header nav ul li.menu-item-5752 {width: 13.5%}
header nav ul li.menu-item-222 { border-right: 2px solid white; width: 14%;}



		/* CSS-only dropdown menu */
			.main-navigation	ul {
			  text-align: left;
			  display: inline;
			  margin: 0;
			  padding: 0;
			  list-style: none;
			  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
			  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
			  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
			}
			.main-navigation ul li {
			  font: bold 12px/18px sans-serif;
			  display: inline-block;
			  margin-right: -4px;
			  position: relative;
			  padding: 0
			  background: #fff;
			  cursor: pointer;
			  -webkit-transition: all 0.2s;
			  -moz-transition: all 0.2s;
			  -ms-transition: all 0.2s;
			  -o-transition: all 0.2s;
			  transition: all 0.2s;
			}
			.main-navigation ul li:hover {
			  background: #555;
			  color: #fff;
			}
			.main-navigation ul li ul {
			  padding: 0;
			  position: absolute;
			  top: 48px;
			  left: 0;
			  width: 180px;
			  -webkit-box-shadow: none;
			  -moz-box-shadow: none;
			  box-shadow: none;
			  display: none;
			  opacity: 0;
			  visibility: hidden;
			  -webkit-transiton: opacity 0.2s;
			  -moz-transition: opacity 0.2s;
			  -ms-transition: opacity 0.2s;
			  -o-transition: opacity 0.2s;
			  -transition: opacity 0.2s;
			}
			.main-navigation ul li ul li { 
			  background: #555; 
			  display: block; 
			  color: #fff;
			  text-align: left;
			  width: 100%;
			}
			.main-navigation ul li ul li a {display: block; line-height: 24px; padding-left: 16px; background-color: #d9781d; padding-top: 6px; padding-bottom: 6px;}
			.main-navigation ul li ul li a:hover {background-color: #C36C1A}
			header .main-navigation ul li ul li:first-child a {border-left: 2px solid white;}
			.main-navigation ul li ul li:hover { background:  #666; }
			.main-navigation ul li:hover ul {
			  display: block;
			  opacity: 1;
			  visibility: visible;
			   z-index: 1000;
			  }
			  li.menu-item-has-children > a {background-image: url(../_images/subnav-tri.png); background-position: 10% center; background-repeat: no-repeat}
		
}

@media (max-width: 767px) {

	header nav ul li {width: 19%}
	header nav ul li.page-item-8 {width: 24%;}
	.search-form {display: block; border-top:1px solid white;}
	
	nav#site-navigation {background: transparent !important}
	.page-template-tri-facts-template-php .search-form {background-color: transparent;}
	.search-form .search-submit {background: #d9781d}
	
	#reports .span_5_of_12, #reports .span_7_of_12 {display: block; max-width: 100%; width: 100%;}
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
	header nav ul li {width: 19%}
	header nav ul li.page-item-8 {width: 24%; border: 0 none;}
	.search-form {display: none;}
	
	.page-template-tri-facts-template-php .search-form {background-color: transparent;}
}

@media (max-width: 480px) {
	html, body {max-width: 100%; overflow-x: hidden;
	}
	.page-template-tri-facts-template-php .title_and_strap {max-width: 100%; background-size: 100%; height: 6em; margin-bottom: 40px;}
	header nav ul li, header nav ul li.page-item-8, .services-tab a {width: 100%;}
	.services-tab a {line-height: 50px; text-align: left; text-indent: 1rem; margin-bottom: 1em}
	.site-content > h1 {padding: 0 10px;}	
	.entry-header {padding: 0 1em;}
	.afp-credit {text-align: left;}
	#content section#reports {margin-bottom: 1em;}
	.home #factsheet_guide_tabs.tabs li {font-size: 1.1rem !important;}/* to override inline style generated by tabs javascript I think */
	#african-fc-awards .more {position: static;}
	#african-fc-awards p {margin-left: .5rem;}
	.from-the-blog .hasphoto:after {	visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
	.about-navigation ul li ul {margin-left:-5px;}/*the LIs need a few px left margin so to align the UL with the heading, let's just use this cheat */
	
	.donate-services-afp {position: static;}
	.donate-services-afp ul {padding-left: 0;}
	.donate-services-afp ul li {float: none; margin: 0 0 2px 0}
	.donate-services-afp ul li a {width: 100%; margin: 0; text-align: left; text-indent: 16px; line-height: 40px;}
	.donate-services-afp li.donate-tab a {margin-left: 0;}
	.afp-credit {display:none;}
	.home header.site-header nav.group {margin-bottom: 2px;}
	
	.site-header .subscribe-link, .page-template-tri-facts-template-php .subscribe-link {position: static}
	
	.page-template-tri-facts-template-php .subscribe-link {display: block; background-position: left center; padding-left: 22px; padding-top: 5px; margin-top: 10px;}
	
	.ac-country-option input {visibility: visible;}
	.ac-country-item {float: none; width: 100%;}
	.ac-country-option {display: block; height: 40px; background: none;  text-align: left; }
}