/* 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%;}	
		
		@supports (scrollbar-color: red blue){
			* {
				scrollbar-color: hsl(60 100% 80% / 0.75) hsl(0 75% 50% / 1);
				scrollbar-width: auto;
			}
		}
		
		.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; */
		}		

		h1, h2, h3, h4, h5 {text-align: center; margin: 2vh;}
		
		/* clamp calc. from website https://fluid.style/ using: min. 480px (30rem), max. 1440px (90rem) */
		h1 {font-size: clamp(1.5rem, 1.184vw + 1.256rem, 2.5rem);}				
		h2 {font-size: clamp(1.25rem, 1.184vw + 1.006rem, 2.25rem);}
		h3 {font-size: clamp(1.0rem, 1.184vw + 0.756rem, 2.0rem);}
		h4 {font-size: clamp(0.75rem, 1.184vw + 0.506rem, 1.75rem);}
		h5 {font-size: clamp(0.5rem, 1.184vw + 0.256rem, 1.5rem);}
		li {font-size: clamp(1.0rem, 1.184vw + 0.256rem, 1.5rem); font-weight: bold;}
		figcaption {font-size: clamp(1.0rem, 0.25rem + 2.5vw, 1.5rem); font-weight: bold;}
		.limetext {color: lime;}
			
		/* all the destinations are hyperlinked, therefore their text is white for legibility as dictated below */
		a:link {color: white;}
        a:visited {color: white;}  
        a:hover {text-shadow: 0.2vw 0.2vw 0.2vw white;}
		figure {text-align: center;}
		figure img:hover {cursor: zoom-in;}		/* map and videos' images */
		figcaption {color: lime; margin-bottom: 1vw; text-align: center; cursor: none;}
		p {margin: 2vw;}				/* space between sections */
		img {padding: 0.75vw 0.5vw 0;}	/* space between images */
		div[class^="flex-container"] img:hover {cursor: zoom-in;}		/* div's whose attribute begins with flex-container */
				
		.instructions {color: lime; font-size: clamp(0.5rem, 1.184vw + 0.256rem, 1.5rem); font-weight: bold; text-align: center;}
		
		li {
			list-style-position: outside;					/* destinations; aligns list numbers 10 or higher with those from 1-9 */ 
			margin: 1vh 0;
			/* padding-left: 2vh;								creates space for addition of an icon which will be hyperlinked */
			/* margin-left: 5vh;								same reason as above; https://css-tricks.com/everything-you-need-to-know-about-the-gap-after-the-list-marker/ */
			/* border: 1px solid red; */
			}
			
		ol {margin-left: 3vw;}								/* the destinations */
		
		ol li::marker {										/* the numbers of the destinations */
		  font-weight: 900;						
		  color: red;
		}		
		
		/* tombs, museums, temples, etc. at each destination */
		/* set as inline-blocks so smaller wide screens don't break up destination mid-phrase */
		li li {
			display: inline-block;					/* display horizontal rather than vertical */ 
			margin-left: 2vw;						/* moves the li (sites visited) to the right by xx pixels; all descendants */
		}

		.nile-cruise {color: red;}					/* Nile cruise destination numbers are red to match destination markers on map */

		.imagemap {position: relative;}
		.imagemap img {display: block;}
		.imagemap .area {display: block; position: absolute; transition: box-shadow 0.15s ease-in-out;}
		.imagemap .area:hover {box-shadow: 0px 0px 1vw rgba(0,0,0,0.5);}		

		/*** to display multiple tombs, museums, temples, etc. at certain destinations ***/
		/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar_click */
		/* https://www.w3schools.com/css/css_dropdowns.asp */
		/* https://www.w3schools.com/howto/howto_js_dropdown.asp */

		.dropbtn {
			position: relative;
			display: inline-block;
			text-decoration: underline;
			font: inherit;
			cursor: pointer;				
		}

		/* dropdown button on hover */
		.dropbtn:hover {
			text-shadow: 0.2vw 0.2vw 0.2vw white;
		}

		/* dropdown Content (Hidden by Default) */ 
		.dropdown-content {
			display: none;
			position: absolute;
			width: fit-content; 
			font: inherit;
			z-index: 1;
			/* left: 60vw;			60% of screen's total width */	
			/* this left position is now set in the dropdown.js file; the dropdown is centered beneath its parent */
		}

		/* Change color of dropdown links' background */ 
		.dropdown-content a {
			display: block;
			position: relative;
			padding: 0.5vw 1vw;
			text-align: center;		
			background: gray;
			outline: 2px solid darkorange;	
		}

		/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */ 
		.show {display: block;}
		
		.asterisk {							/* denotes dropdown menu at this site */
			 font-size: 1.1rem; 
			 color: cyan;
		}

		.WideDestinations {
			display: flex;
			margin-left: 2vw;
			/* border: 2px solid yellow; */
	    }

		.greenboxes {
			display: flex; 
			justify-content: space-evenly; 
			margin: 5vw; 
			/* padding-bottom: 100px; */
		}
		
		.greenboxes a {color: black;}
		
		.greenboxes-shadow {
			background-color: #5cb85c;
			box-shadow: 8px 8px 4px 0 green;
			border: 2px solid cyan;			
		}	
		
		.glossary {
			width: 33%; 
			height: 50%;
			padding: 1rem;
		} 
		
		.glossary div{
			display: flex; 
			flex-wrap: wrap; 
			justify-content: space-around;
			gap: 1rem; 
		}
		
		.glossary a {
				/* display: flex; gap: 1rem; justify-content: center; */
				font-size: clamp(1.0rem, 0.938rem + 0.208vw, 1.125rem);
				font-weight: 900;
		}
		
		.accommodations {
			display: flex; 
			flex-direction: column;
		}		
		
	/*** image sizes ***/			
		.hsize {
			width: 28vw;
			height: 21vw;	
			/* width="400" height="300" */			
		}		
		.vsize {
			width: 21vw;
			height: 28vw;
			/* width="300" height="400" */
		}
		
		.hsize-larger {
			height: 28vw;
			width: auto;
		}

		.hsize-shorter {
			height: 21vw;			
			width: auto;			
		}
		


	/*** 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-size: clamp(0.25rem, 1.184vw + 0.256rem, 1.25rem);
			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%);
		}
		
		span a, span a:visited {color: black;}

	/*** museum labels ***/	
		.label-container {
		  position: relative;
		}
		
		.label-container .label {
		  position: absolute;
		  left: 0;
		  top: 0;
		  display: none;
		}
		
		.label-container:hover .label {display: block;}
		
	/***** 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:hover {cursor: default;}
		
		/* modal image 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;
		}
		
		/* center the modal and position it relative so the close button can be position absolute */
		.container {			
			margin: auto;
			position: relative;
			/* border: 2px solid blue; */
		}		
		
		/* --- modal captions --- */
		/* $ wildcard means "ending with" */
		div[class$="Slides fade caption"] > span {font-size: clamp(1.0rem, 1.184vw + 0.756rem, 2.0rem);}
		
		/*** 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;
		}

		/* this is necessary for div's surrounding images in a section with captions for those images not using captions
			to display the close button ("X") in the proper location because the captions are position: absolute */
		/* .closebutton-relative {position: relative;} */

		/* --- 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;
		}		

		/* 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;}
		}
		
	/*** responsive ***/		
		@media only screen and (max-width: 1199px){
			.WideDestinations {flex-direction: column;}
			#EgyptMap {
				/* width: 55vw;  */
				margin: auto;									
			}
			/* .pagination li {background-size: cover; } */
			.pagination .pagination-prev a {background-size: cover; width: fit-content;}
			.pagination .pagination-next a {background-size: cover; min-width: 10vw;}
			.pagination .pagination-home a {background-size: cover; min-width: 10vw;}
			/* .pagination .pagination-next a {min-width: 14vw; min-height: 10vw;} */
			/* .pagination .pagination-prev a span { border: 2px solid magenta;} */
		}

	/*** responsive ***/		
		@media only screen and (max-width: 768px) {			
			.glossary ul {
				flex-direction: column;
				text-align: center;
			}
		}		
				
		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;  */
		}