/* auto-prefixing (-webkit-...) done with http://www.cssdrive.com/cssautoprefixer/ */

	/*** general elements ***/
		* {box-sizing: border-box; margin: 0; padding: 0;}
		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, h3, h4 {text-align: center; margin: 2vh;}		
		a:link {color: red;}
        a:visited {color: #FF6565;}  
        a:hover {text-shadow: 0.2vw 0.2vw 0.2vw #aaa;}
		figure {text-align: center;}
		figcaption {color: lime; margin-bottom: 1vw; text-align: center; cursor: none;}
		ol {width: 30vw; margin: auto;}
		li {margin: 1vw 0;}				/* destinations */		 	
		p {margin: 2vw;}				/* space between sections */
		img {padding: 0.75vw 0.5vw 0;}	/* space between images */	
		/* img {border: 2px blue solid;} */
		div[class^="flex-container"] img:hover {cursor: zoom-in;}		/* div's whose attribute begins with flex-container */
		figure img:hover {cursor: zoom-in;}		/* map and videos' images */		
		.modal:hover {cursor: default;}		
				
	/*** pagination ***/
		.pagination {font-size: 1.2em; list-style-type: none; margin: 0; overflow: hidden; padding: 0.5vw 0; text-transform: uppercase;}
        .pagination li {display: inline;}
        .pagination a, #pagination a:visited {color: red; text-decoration: none;}
		/* .pagination a:nth-child(2) {font-size: calc(0.25rem + 1vmax);}	text announcing "there's more, click here" */
		.pagination .pagination-prev a {background: url("elePrevious1090109.jpg") no-repeat left center; width: 8vw; height: 6vw; float: left; margin: 3vw;  text-align: center; font-weight: bold;}
        .pagination .pagination-next a {background: url("eleNext1090089.jpg") no-repeat left center; width: 8vw; height: 6vw; float: right; margin: 3vw; text-align: center; font-weight: bold;}
		
	/*** text announcing next page ***/
		.more {
			width:75vw; 
			text-transform: uppercase; 
			text-align: right; 
			color: white;
			/* font-size: 1.2rem; */
			font-size: calc(0.25rem + 1vmax);	/* text announcing "there's more, click here" */
			text-decoration: none;
			/* border: red solid 2px; */
		}
		.more:visited {
			color: white;
			text-decoration: none;
		}
		
		.flex-container {
			display: -webkit-box;
			display: flex;
			position: relative;
			-webkit-box-orient: horizontal;
			-webkit-box-direction: normal; 
			flex-direction: row;
			width: 95vw; 
			height: auto;
			margin: auto;					/* centers container in viewport */
			-webkit-box-pack: center;
			justify-content: center;		/* centers images horizontally in container */
			-webkit-box-align: center;
			align-items: center;			/* centers images vertically in container */
			/* border: 2px solid yellow; */
		}
		
	/*** grid containers ***/
		.WideDestinations {
			display: grid;
			width: 95vw; 
			height: auto;
			grid-template-columns: 50% 35%;	/* list the destinations in one column on wide devices (map is first column) */
			grid-column-gap: 2.5vw; 
			-webkit-box-pack: center;
			justify-content: center;		/* horizontally centers all content in container */
			-webkit-box-align: top;
			align-items: top;				/* aligns content to the vertical top of the container */
			margin: auto;					/* centers container in viewport */
			/* border: 2px solid yellow; */							
	    }
		
		/* list the destinations in two columns below the map on narrow devices */
		.NarrowDestinations {
			display: -webkit-box;
			display: flex;
			width: 100vw; 
			height: auto;
			margin: auto;					/* centers container in viewport */	
			-webkit-box-pack: center;
			justify-content: center;		/* horizontally centers all content in container */
			-webkit-box-align: top;
			align-items: top;				/* aligns content to the vertical top of the container */
			/* border: 2px solid yellow; */			
		}		

	/*** image sizes ***/			
		.hsize {
			width: 28vw;
			height: 21vw;	
			/* width="400" height="300" */			
		}		
		.vsize {
			width: 21vw;
			height: 28vw;
			/* width="300" height="400" */
		}
		.Width28vw {
			width: 28vw;
			height: auto;
		}
		.Height28vw {
			height: 28vw;
			width: auto;
		}
		.VideoCapture {
			width: 37.3vw;
			height: auto;
			/* width="533" height="300" */
		}
		.BigFace {
			width: 40vw;
			height: auto;
			/* width="534" height="300" big hippo */
		}
		.SavutiMap {
			width: 33.4vw;
			height: 21vw;
			/* width ="477" height="300" */
		}
		.CheetahReclining {
			width: 46.8vw;
			height: 21vw;
			/* width ="669" height="300" */
		}
		.LionPride {
			width: 36.6vw;
			height: 21vw;
			/* width ="523" height="300" */
		}
		.BandedMongoose {
			width: 38.9vw;
			height: 21vw;
			/* width ="556" height="300" */
		}		
		#JourneyMap{
			width: 40vw;
			height: auto;
			/* width="540" height="576" */
		}
		#ZebraAndImpalaImage {
			width: 40vw;
			height: auto;
			/* width="534" height="300" */
		}		
		#CapeBuffaloHerd {
			width: 43vw;
			height: auto;	
			/* width="515" height="300" */
		}
		
		.NancyJournal {
			width: 50%;
			padding: 2px;
			background-color: #5cb85c;
			box-shadow: 8px 8px 4px 0 green;
		}
		
	/*** caption ***/
		.caption {
			display: inline-block;
			position: relative;
		}
		
		.caption > span {
			display: none;
		    position: absolute;
			width: max-content;			/* the narrowest box while still fitting contents */
			max-width: 100%;
			padding: 0.5vw 1vw;
			border-radius: 0.5vw;
			background-color: rgba(204,204,204,0.4);
			color: black;
			text-align: center;
			/* font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); */
			/* font-size: calc(10px + 6 * ((100vw - 320px) / 960)); */
			font-size: calc(0.25rem + 1vmax);
			font-weight: bold;
			bottom: 1vw;		/* the distance the box is raised up off the bottom of the slide */	
			/* the next two lines center the caption */
			left: 50%;
			-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
		}	

		.caption:hover > span {
		    display: inline-block;
			cursor: none;
		}
		
		
	/***** modals *****/
		/* --- The Modal (background) --- */
		.modal {
			display: none;					/* hidden initially */
			position: fixed;				/* stay in place */
			z-index: 1;						/* sit on top */
			width: 95vw; 
			height: auto; 
			max-height: 95vh;
			background-color: black;
			/* the following three lines center horizontally and vertically */
			/* top: 50%; */
			/* left: 50%; */
			/* -webkit-transform: translate(-50%, -50%); */
			/* transform: translate(-50%, -50%);	 */
			/* border: 2px solid green; */
		}
		
		/* modal images' sizes */
		.landscape {
			display: block;
			max-width: 100%; 
			width: auto; 
			max-height: 95vh;
			margin: auto; 
			border-radius: 2vw;
		}
		.portrait {
			display: block; 
			max-width: 100%; 
			height: auto; 
			max-height: 95vh;
			margin: auto; 
			border-radius: 2vw;
		}
		
		video {
			display: none;
			position: fixed;
			max-width: 100%; 
			width: 98%; 
			max-height: 95vh;
			/* the following three lines center horizontally and vertically */
			top: 50%;
			left: 50%;
			-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
			/* border: green solid 2px;  */
		}
		
		/* --- modal captions --- */
		div[class^="destination_"] > span {
			/* font-size: calc(0.75rem + 1vw); */
			font-size: calc(0.75rem + 2.5vmin);
		}
		
		/* audio controls */
		audio {
			display: block;
			position: absolute;
			opacity: 0.2;
			width: 8vw;
			bottom: 3vh;		/* the distance the controls are raised up off the bottom of the slide */
		}
		
		/* fading from one slide to another */
		.fade {
		  -webkit-animation-name: fade;
		  animation-name: fade;
		  -webkit-animation-duration: 2s;
		  animation-duration: 2s;
		  -webkit-animation-timing-function: ease-in;
		  animation-timing-function: ease-in;		
		} 

		@keyframes fade {
			from {opacity: 0;}
			to {opacity: 1;}
		}
		
		@-webkit-keyframes fade {
			from {opacity: 0;}
			to {opacity: 1;}
		}

		/* --- the next two items relate to placing the Close button on top of the fullscreen modal images --- */
		.container {
			margin: auto;
			/* border: 2px solid blue; */
		}
		
		div[class^="destination_"] {
			position: relative;
			/* border: 2px solid red; */
		}
		
		/* --- Close button --- */
		.close {
			display: block;
			position: absolute;
			top: 2%;
			right: 2%;
			color: red;
			font-size: calc(2.0rem + 2vmin);
			font-weight: bold;
			line-height: 1em;
			z-index: 2147483647;						/* sit on top of modal */
			/* border: 2px solid yellow; */
		}

		button {
			background-color: transparent; 
			border: 5px solid transparent;
			/* border-radius: 50%; */
		}

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

		/* --- Previous & Next buttons --- */
		.prev,
		.next {
		  cursor: pointer;
		  position: absolute;
		  top: 50%;
		 -webkit-transform: translateY(-50%);
		  transform: translateY(-50%);
		  width: auto;
		  padding: 1vw;
		  color: red;					
		  font-weight: bold;
		  font-size: calc(2.0rem + 1vmin);
		  -webkit-transition: 0.6s ease;
		  transition: 0.6s ease;
		 -webkit-user-select: none;
		  user-select: none;		  
		}

		.prev {
			left: 0;
			border-radius: 0 1vw 1vw 0;
		}

		.next {
		  right: 0;
		  border-radius: 1vw 0 0 1vw;
		}
		
		/* responsive */		
		@media only screen and (max-width: 768px) {
		.pagination .pagination-prev a {width: fit-content;}
		}		
				
	/*** responsive ***/		
		@media only screen and (max-width: 576px){
			.WideDestinations {display: none;}
			#map {text-align: center;} 
			body {font-size: 1.75vw;}
			figcaption {font-size: 2vw;}
			li{margin: 0.5em 0;}
		}
						
		@media only screen and (min-width: 577px) and (max-width: 768px) {
			.WideDestinations {display: none;}
			#map {text-align: center;} 
			body {font-size: 1.5vw;}
			figcaption {font-size: 1.5vw;}
			li{margin: 0.5em 0;}
		}
			
		@media only screen and (min-width: 769px) and (max-width: 1199px) {
			.NarrowDestinations {display: none;}
			#map {display: none;}
			body {font-size: 1.25vw;}
			figcaption {font-size: 1.25vw;}		 
		}
		
		@media only screen and (min-width: 1200px) {
			.NarrowDestinations {display: none;}
			#map {display: none;}			
		}