/* layout styles ________________________________________________________________________________________ */

* { box-sizing: border-box; }

body { 
	background: #9e9e9e url(/getfile.php?type=website-design&id=bg-body-tile.png) top center repeat-y; 
}

.branding,
.main-content { 
	clear: left; 
	position: relative 
}

.page { 
	margin: 0 auto 0 auto; 
	background-color: white;
}


.branding {
	display: flex;
	justify-content: space-between;
	flex-direction: row;
}

	.branding-other-top {
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: flex-start;
		width: 100%;
	}

	.branding-other-top .title  {
		width: calc(86%);
		text-align: center;
	}

	.branding-other-top .title .title__name  {
		white-space: nowrap;
	}

			.banner-words { 
				display: block;
				background: #fec601;
				color: #111;
				padding: 0.15em 0 0 0;
				margin: 0;
				height: auto;
				font-family: 'sandwich', arial, helvetica, sans-serif;
				font-weight: bold;
				text-align: center;
			}		




.website-comments { display: none; }

/* .banner-region {  } */


.main-content { 
	overflow: auto; 
	padding-top: 20px; 
}

.additional-info { 
	margin: 0 auto; 
	background: black; 
	color: #ddd;
}

	.additional-info a { background: none; color: #eee; }
		.additional-info a:active { color: white }






  /*
  @media all and (max-width: 639px) { 

		.branding-africa {
			display: none;
		}

		.branding-logo { 
			padding: 0; 
			margin: 0; 
			width: 18%; 
		}

		.branding-other {
			width: calc(100% - 18% - 13%);
			padding: 0 20px;
			margin: 0; 
		}
	
  }
  */



	@media all and (max-width: 420px) { 

		.branding {
			padding-bottom: 4em;
		}
		
	}




	/* Styling up to 720px wide */
	@media all and (max-width: 719px) { 
		
		body { background: #9e9e9e }
		
		.branding-other-top .title {
			width: 100%;
		}
		
		.branding-africa {
			display: none;
		}

		.branding-logo { 
			padding: 0; 
			margin: 0; 
			width: 18%; 
			min-width: 100px;
		}

		.branding-other {
			width: calc(100% - 18%);
			padding: 0 10px;
			margin: 0; 
		}
		
		article img { height: auto; }

		.banner-region { display: none; }
		
			.banner-words { 
				display: block;
				background: #fec601;
				color: #111;
				padding: 0.15em 0 0 0;
				margin: 0;
				height: auto;
				font-family: 'sandwich', arial, helvetica, sans-serif;
				font-size: 3em;
				font-weight: bold;
				line-height: 1em;
				text-align: center;
			}						
		
		
		.page, 
		.additional-info { width: 100%; padding: 0 10px}	
		
		.additional-info { padding: 10px 10px }	
		
		article { width: 100%; }
					
	}


	/* Styling 960px - 1023px wide */
	@media all and (min-width: 720px) and (max-width: 1023px) { 
		
		body { background: #9e9e9e url(/getfile.php?type=website-design&id=bg-body-tile.png) top center repeat-y; }

		.branding-africa {
			padding: 15px 0 5px 15px;
			width: 13%;
		}

		.branding-logo { 
			padding: 0; 
			margin: 0; 
			width: 18%; 
		}

		.branding-other {
			width: calc(100% - 18% - 13%);
			padding: 0 20px;
			margin: 0; 
		}
		
		
		.banner-region { 
			display: none;
		}

			.banner-words { 
				font-size: 4em;
				font-weight: bold;
				line-height: 1.15em;
			}		
		
		
		
		
		.branding .branding-reg-number { margin-left: 20px; }

		.branding .branding-facebook { margin-left: 50px; }

		.page, 
		.additional-info { 
			width: 100%;
			padding: 0 10px; 
			position: relative; 
			z-index: 50; 
		} 
		
		.additional-info { 
			padding: 164px 100px 15px 100px; 
			color: #ddd; 
			background-image: url(/getfile.php?type=website-design&id=bg-additional-info.png);
			background-position: top center;
			background-repeat: no-repeat; 
			text-align:center;
			background-size: 100% auto;
		}
		.additional-info .subtle { display: block; padding-top: 6px; }
		
		.main-content {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
		
		article { 
			width: calc(100% - 275px); 
			order: 20;
		}
		
		aside { 
			width: 240px; 
			order: 10;
		}
		
	
		
	}


	/* Styling over 1024 px wide */
	@media all and (min-width: 1024px) { 
		
		body { background: #9e9e9e url(/getfile.php?type=website-design&id=bg-body-tile.png) top center repeat-y; }

		.branding-africa {
			padding: 15px 0 5px 15px;
			width: 125px;
		}

		.branding-logo { 
			padding: 0; 
			margin: 0; 
			width: 174px; 
		}

		.branding-other {
			width: calc(100% - 200px);
			padding: 0 20px;
			margin: 0; 
		}
		
		.banner-region { 
			height: 325px; 
			overflow: hidden; 
			background: black url(/getfile.php?type=website-design&id=bg-banner-region.png) top center no-repeat; 
			background-size: 100% auto;
		}
			.banner-region.banner-region-default { 
				background: #fec601;
				color: #111;
				padding: 0.15em 0 0 0;
				margin: 0;
				height: auto;
				font-family: 'sandwich', arial, helvetica, sans-serif;
				font-size: 50px;
				font-weight: bold;
				line-height: 1em;
				text-align: center;
			}
		
			.banner-words { 
				font-size: 4em;
				font-weight: bold;
				line-height: 1.15em;
			}		
		
		
		
		
		.branding .branding-reg-number { margin-left: 20px; }

		.branding .branding-facebook { margin-left: 50px; }

		.page, 
		.additional-info { 
			width: 1024px;
			padding: 0 10px; 
			position: relative; 
			z-index: 50; 
		} 
		
		.additional-info { 
			padding: 164px 100px 15px 100px; 
			color: #ddd; 
			background-image: url(/getfile.php?type=website-design&id=bg-additional-info.png);
			background-position: top center;
			background-repeat: no-repeat; 
			text-align:center;
			background-size: 100% auto;
		}
		.additional-info .subtle { display: block; padding-top: 6px; }
		
		.main-content {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
		}
		
		article { 
			width: calc(100% - 275px); 
			order: 20;
		}
		
		aside { 
			width: 240px; 
			order: 10;
		}
		
	
		
	}



.pagination { width: 100%; overflow: auto; font-size: 12px; margin-bottom: 20px;  }

	.pagination a { display: block; float:left; margin-right: 2px; background: #ccc; padding: 0 6px; }





/* Cookie/Privacy Policy popup ________________________________________________________*/

.cookie {
	font-size: 12px;
	position:fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	z-index: 9999;
	background:#000;
	display: none;
	border-top: 1px solid #fff;
	overflow: auto;
	
}

.cookie .container {
	overflow: auto;
	padding-top: 1em;
	padding-bottom: 1em;
	max-width: 1024px;
	margin: 0 auto;
}

.cookie__title {
	color:#fff;
}
	.cookie__title,
	.cookie__link--more {
		float:left;
		margin-right:20px;
	}
	.cookie__link--more,
	.cookie__link--close {
		background: transparent;
		color:#fff;
	}
	.cookie__link--more:hover,
	.cookie__link--close:hover {
		color:#fff;
	}
	.cookie__link--close {
		float: right;
	}