/* 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 */
		div[class^="grid-container"] img:hover {cursor: zoom-in;}
		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:hover {color: #999; text-decoration: none;}
        .pagination a:focus {color: #999; text-decoration: none;} 		
		.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;}
		
		.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; */			
		}		
		
		.grid-container {
			display: grid;
			width: 95vw; 
			margin: auto;						/* centers container in viewport */
			/* grid-template-columns: 33% 33% 33%; definitely don't use; overrides justify-content and gap */
			-webkit-box-pack: center;
			justify-content: center;			/* centers the grid horizontally inside the container */
			align-content: center;				/* centers the grid vertically inside the container */
			justify-items: center;				/* centers images horizontally in container */ 
			-webkit-box-align: center;
			align-items: center;				/* centers images vertically in container */
			grid-column-gap: 1vw;
			grid-row-gap: 0.5vw;
			/* border: 2px solid yellow; */
		}	

		.grid-container img {
			padding: 0;			
		}
		
		.grid-box-a {
			grid-column: 1;
			grid-row: 1;
			/* border: 2px solid blue; */
		}
		
		.grid-box-b {
			grid-column: 3;
			grid-row: 1;
			/* border: 2px solid blue; */
		}
		
		.grid-box-c {
			grid-column: 2;
			grid-row: 1/3;						/* one column spans two rows */
			/* justify-self: center;				horizontally centers the box; redundant - justify-items set on container */
			/* align-self: center;					vertically centers the box; redundant - align-items set on container */
			/* border: 2px solid blue; */
		}
		
		.grid-box-d {
			grid-column: 1;
			grid-row: 2;
			/* border: 2px solid blue; */
		}
		
		.grid-box-e {
			grid-column: 3;
			grid-row: 2;
			/* border: 2px solid blue; */
		}

	/*** image sizes ***/			
		.hsize {
			width: 28vw;
			height: 21vw;	
			/* width="400" height="300" */			
		}		
		.vsize {
			width: 21vw;
			height: 28vw;
			/* width="300" height="400" */
		}
		.medium-hsize {
			width: 35vw;
			height: 26vw;
			/* width="500" height="375" */
		}
		.large-hsize {
			width: 42vw;
			height: 32vw;
			/* width="600" height="450" */
		}
		.square-size {
			width: 28vw;
			height: 28vw;
			/* width="400" height="400" */
		}
		#JourneyMap{
			width: 40vw;
			height: auto;
			/* width="540" height="576" */
		}
		#EleHerdImage {
			width: 60vw;
			height: auto;
			/* width="1000" height="492" */
		}
		#VicFallsImage {
			width: 55vw;
			height: auto;	
			/* width="900" height="600" */
		}
		#baboons {
			width: 28vw;
			height: auto; /* 28vw */
			/* width="400" height="400" */
		}
		#ElesEmbracingImage {
			width: 28vw;
			height: auto;	
			/* width="400" height="232" */
		}		
		#BigBullImageA, #BigBullImageB {
			width: 42vw;
			height: auto;	
			/* width="600" height="500" */	
		}
		#baobab {
			width: 32vw;
			height: auto;				
			/* width="450" height="600" */
		}
		#SouthernCross {
			width: 42vw;
			height: auto;
			/* width="600" height="450" */
		}
		
	/*** 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;
		}

		/* On hover, add a black background color with a little bit see-through */
		.prev:hover,
		.next:hover {
		  /* background-color: rgba(0, 0, 0, 0.8); */
		  color: #bbb;
		}
		
		/* responsive */		
		@media only screen and (max-width: 576px) {
		.pagination .pagination-prev a {width: fit-content;}
		}
		
		/*** rotating images ***/
		/* all images' parent div is relative in that the parents' class=caption is relative; img1 and img13 do not have captions */
		#img1, #img13, .A {
			position: relative;
			left: 0;
			top: 0;
		}
		.B {
			position: absolute;
			left: 0;
			top: 0;			
		}
		
		.A {-webkit-animation: animA 8s ease-in-out infinite alternate;}
		.B {-webkit-animation: animB 8s ease-in-out infinite alternate;}
		.C {-webkit-animation: animC 10s infinite normal;}
		.A {animation: animA 8s ease-in-out infinite alternate;}
		.B {animation: animB 8s ease-in-out infinite alternate;}
		.C {animation: animC 10s infinite normal;}		/* while the mouse hovers, the caption does not fade as the images alternate */
		
		/* --- long form example for documentation purposes --- */
		/* .A { 
				animation-name: animA; animation-duration: 8s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; 
			} */
		
		@-webkit-keyframes animA {
		  0%, 25% {opacity: 0;}
		  50% {opacity: 0.5;}
		  75%, 100% {opacity: 1;}
		}
		@-webkit-keyframes animB {
		  0%,25% {opacity: 1;}
		  50% {opacity: 0.5;}
		  75%, 100% {opacity: 0;}
		}
		@-webkit-keyframes animC {
		  0%, 25% {opacity: 1;}
		  50% {opacity: 1;}
		  75%, 100% {opacity: 1;}
		}
		
		@keyframes animA {
		  0%, 25% {opacity: 0;}
		  50% {opacity: 0.5;}
		  75%, 100% {opacity: 1;}
		}
		@keyframes animB {
		  0%, 25% {opacity: 1;}
		  50% {opacity: 0.5;}
		  75%, 100% {opacity: 0;}
		}
		@keyframes animC {
		  0%, 25% {opacity: 1;}
		  50% {opacity: 1;}
		  75%, 100% {opacity: 1;}
		}		
				
	/*** 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;}			
		}