/*** general elements ***/
		* {box-sizing: border-box;}
		html, body {width: 100%; height: 100%; font-family: "Times New Roman", Times, serif;}
		html {font-size: 16px;}
		body {background-color: black; color: white; font-size: 100%;}				
		h1, h2 {text-align: center; margin: 0px; color: yellow;}
		h3 {margin-bottom: 1vw; color: yellow;}			
		figure {display: inline-block; margin: 3vh 2vw 1.5vh;}			
		img {border-radius: 2vw;}
		figcaption {color: white; text-align: center; top: 1vw; margin-bottom: 0; position: relative;}				
		p {margin-bottom: 2vw;}			
		.journal {width: 70vw; margin-right: auto; margin-left: auto;}
		p + ul {margin-top: -1vw;}
		a:link {color: red;}
		a:visited {color: red;} 
		a:hover {text-shadow: 0.2vw 0.2vw 0.2vw #aaa;}
		article {
			color: white;
			font-size: 120%;
			font-weight: bold;
			line-height: 1.3;
			/* background: url("Pygmymod-transparent.jpg") no-repeat center fixed;
			background-size: cover;	*/
		}
		
		#countrylist {
			display: flex;
			height: auto;
			justify-content: left;
		}
		
		/* list the modes of transportation in three columns */
		#transport {
			display: flex;
			flex-direction: row;	
			justify-content: space-between;		/* horizontally */
			/* border: 2px solid yellow; */
		}
		
		.flex-container {
			display: flex;
			width: 90vw; 
			height: auto;
			margin: auto;						/* centers container in viewport */
			padding-bottom: 40px;
			flex-direction: row;			
			justify-content: center;			/* centers images in container */
			align-items: flex-end;				/* place images at bottom of container */						
		}
		
		.hsize {
			width: 30vw;
			height: auto;
		}
		
		.vsize {
			width: 30vw;
			height: auto;
		}
		
		/*** modals ***/
		/* --- The Modal (background) --- */
		.modal {
			display: none;					/* hidden by default */
			position: fixed;					/* stay in place */
			z-index: 1;						/* sit on top */
			/* the modal width and height are set in the media queries */
			max-width: 100%;
			max-height: 100%;
			/* the following three lines center horizontally and vertically */
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);		  
		}

		/* --- Slideshow Content (image) --- */
		.slideshow-content {
		  display: block;
		  /* width: 100%; */
		}
		
		audio {display: none;}
		
		/* --- The Close Button --- */
		.close {
			display: block;
			position: absolute;
			top: 3%;
			right: 3.5%;
			color: red;
			font-size: 4em;
			font-weight: bold;
			line-height: 0.5em;
			z-index: 2;						/* sit on top of modal */
		}

		.close:hover, .close:focus {
			color: #bbb;
			cursor: pointer;
		}		

		/* Next & Previous buttons */
		.next, .prev {
			cursor: pointer;
			position: absolute;
			display: block;
			top: 50%;
			transform: translateY(-50%);
			width: auto;
			padding: 1vw;
			color: red;					/* was originally white */
			font-weight: bold;
			font-size: 2em;
			transition: 0.6s ease;
			border-radius: 0 1vw 1vw 0;
			user-select: none;		  
		}

		/* Position the "next button" to the right */
		.next {
			right: 0;
			border-radius: 1vw 0 0 1vw;
		}

		/* On hover, add a black background color with a little bit see-through */
		.next:hover, .prev:hover {
		  background-color: rgba(0, 0, 0, 0.8);
		}
		
		/* slideshow image sizes - landscape or portrait */
		.landscape {
			display: block;
			width: 100%;
			max-height: 95vh;
			border-radius: 2vw;
		}
		
		.portrait {
			display: block;
			margin: auto;		/* center the portrait modal images */
			height: 97vh;
			width: auto;
			border-radius: 2vw;
		}
		
		/*** responsive ***/
		@media only screen and (max-width: 599px){			
			p, figcaption, li {font-size: 2.5vw;}
			h1, h2 {font-size: 3.25vw;}
			h3 {font-size: 3vw;}
		}
		
		@media only screen and (min-width: 600px) and (max-width: 729px) {
			p, figcaption, li {font-size: 2.25vw;}
			h1, h2 {font-size: 3vw;}
			h3 {font-size: 2.75vw;}
		}
				
		@media only screen and (min-width: 730px) and (max-width: 814px) {
			p, figcaption, li {font-size: 2vw;}
			h1, h2 {font-size: 2.75vw;}
			h3 {font-size: 2.5vw;}		 
		}
		
		@media only screen and (min-width: 815px) and (max-width: 1069px) {
			p, figcaption, li {font-size: 1.75vw;}
			h1, h2 {font-size: 2.5vw;}
			h3 {font-size: 2.25vw;}		 
		}
		
		@media only screen and (min-width: 1070px) and (max-width: 1224px) {
			p, figcaption, li {font-size: 1.5vw;}
			h1, h2 {font-size: 2.25vw;}
			h3 {font-size: 2vw;}
		}
		
		@media only screen and (min-width: 1225px) and (max-width: 1399px) {
			p, figcaption. li {font-size: 1.25vw;}
			h1, h2 {font-size: 2vw;}
			h3 {font-size: 1.75vw;}
		}
		
		@media only screen and (min-width: 1400px) {
			p, figcaption, li {font-size: 1.25vw;}
			h1, h2 {font-size: 1.75vw;}
			h3 {font-size: 1.5vw;}
		} 
	
		/*** reveal hidden image behind pygmies ***/
		.img-compare-container {
			position: relative;
			width: 61vw;
			height: 44vw;	/* slightly taller than images to accomodate the Ken Burns effect initialization button */		
			margin: auto;						
			/* border: 2px red solid; */
		}

		.img-compare-img {
			position: absolute;
			width: auto;			
			height: auto;
			overflow: hidden;
			/* border: green 2px solid; */
		}

		.img-compare-img img {
			display: block;
			vertical-align: middle;				
		}

		.img-compare-slider {
			position: absolute;
			z-index: 9;
			cursor: ew-resize;
			/*set the appearance of the slider:*/
			width: 10px;
			height: 10px;
			background-color: #2196F3;
			opacity: 0.3;
			border-radius: 50%;
		}
		
		/*** Ken Burns effect ***/
		/* Ken Burns button */
		#KenBurnsButton {
			/* hidden to all but the author; it's on far-left just above the pygmies image */
			width: 5vw;
			height: 2vw;
			cursor: pointer;
			background: black;			
			border-color: black;
			border-style: none;
			outline: none;	/* don't show after clicking */
		}
		
		.KenBurnsEffect img {
			-webkit-animation: kenburns 20s infinite;
			animation: kenburns 20s infinite;
		}
		
		-webkit-@keyframes kenburns {
			0% {
				opacity: 1;
			}
			30% {
				-webkit-transform: scale(1.5, 1.5) translateY(13%);				
				-webkit-animation-timing-function: ease-in;				
			}
			50% {
				-webkit-transform: scale(2, 2) translateY(13%);								
			}
			60% {
				-webkit-transform: scale(2, 2) translateY(13%);				
			}
			80% {
				-webkit-transform: scale(2.5, 2.5) translateY(13%);								
			}			
			100% {
				-webkit-transform: scale(1,1);								
			}
		}
		
		@keyframes kenburns {
			0% {
				opacity: 1;
			}
			30% {				
				transform: scale(1.5, 1.5) translateY(13%);				
				animation-timing-function: ease-in;				
			}
			50% {				
				transform: scale(2, 2) translateY(13%);				
			}
			60% {				
				transform: scale(2, 2) translateY(13%);								
			}
			80% {				
				transform: scale(2.5, 2.5) translateY(13%);				
			}			
			100% {				
				transform: scale(1,1);				
			}
		}