/* ................... Start of pagination */
		
		.set_overlay_to_green
		{
			background-color: green;
		}		
		
		.image_overlay_off
		{
			position: fixed;
			
			background-color: green;
			
			left: 0;
			top: 0;
			
			width: 100vw;
			height: 100vh;
						
			opacity: 0;
			
			z-index: -1;
			
			transition: opacity 1.25s;
		}
		
		.image_overlay_on
		{	
			opacity: 0.75;
			
			z-index: 25;
		}
		
		.screenshots
		{
			cursor: zoom-in;
		}
		
		.screenshot_FS
		{
			visibility: hidden;
			
			position: fixed;
			
			max-width: 0vw;
			max-height: 0vh;
			
			/* left: 0 & right: 0 are required ... for margin auto below to work for fixed & absolute position: https://stackoverflow.com/questions/17069435/center-fixed-div-with-dynamic-width-css */
			
			left: 0; 
			right: 0;
			top: 0;
			bottom: 0;
			
			margin-left: auto; /* could just use margin: auto ... but this way is a reminder that top bottom margins are effective as used here */
			margin-right: auto;
			margin-top: auto;
			margin-bottom: auto;
			
			cursor: zoom-out;
			
			transition: 0.5s;
			
			z-index: 5000;
		}
		
		.show_screenshot /* has to work via two classes and not 1 id + 1 class else id overrides this class */
		{
			visibility: visible;			
			
			max-width: 90vw;
			max-height: 95vh;
		}
		
		#pagin_container
		{
			width: 95%;
			margin: 0 auto;
			
			border: 1px solid green;
			padding: 5px;
			
			display: flex;
			flex-wrap: wrap;
			
			justify-content: space-around;
		}
		
		#sort_method_text_prefix
		{
			color: #0000cc;
			
				/* font-size: 14px; */
				font-size: 11px;
			
			font-weight: bold;
			
			border: 1px solid gray;
			margin-right: 7px;
			padding: 1px;
		}
		
		#sort_dropdown_div
		{
			border: 1px solid gray;
			padding: 3px;
		}
		
		#pagin_button_div
		{			
			border: 1px solid gray;
			padding: 3px;
		}
		
		#pagin_button_div button
		{
				/* font-size: 16px; */
				font-size: 12px;
					
			margin-right: 10px;
			background-color: #f0f0f5;
			
			transition: 0.25s;
		}
		
		#pagin_button_div button:hover
		{
			background-color: #00b33c;
		}
		
		select
		{
				/* font-size: 2.0vw; */
					font-size: 12px;
				/* font-size: 14pt; */
			
			border: 1px solid orange;
			border-radius: 4px;
		}
		
		select optgroup
		{
				font-size: 12px;
			
			font-family: arial;
		}
		
		select > [label]
		{		
			font-size: 12px;
		
			color: #B01517;
			font-style: normal; /* italic does not work for Edge it seems ... but using "normal" here anyway */
		}
		
		optgroup > option
		{		
			color: black;
			/* font-style: italic; */
			
				/* font-size: 17px; */
				font-size: 12px;
				
			font-family: "Times New Roman";
		}
		
		/* ................... End of pagination */
		
		* {
			box-sizing: border-box;
		}
		
		.grid-container
		{
			position: relative;
			width: 95%;
			margin: 0 auto;
			
			display: grid;				
			
			/* grid-template-columns: auto; */ /* Make the grid smaller than the container */
			grid-template-columns: 1fr 1fr;
			
			justify-content: space-evenly; /* THIS! is most likely ineffective when using "fr" instead of "auto" */
										   /* see homepage ... where you're having to use "auto" to be able to use: "justify-content" */				
			grid-gap: 10px;
			
			background-color: #d2e2ef;
			padding: 10px;
		}			

		.grid-container > div
		{
			background-color: rgba(255, 255, 255, 0.8);
			text-align: center;
			padding: 10px 10px;				
								font-size: 1em;				
			border: 1px solid red;
			
			transition: 0.1s;
		}
		
		.grid-container img
		{
			/* width: 100%; */
				max-width: 100%; /* max-width isn't actually needed it seems ... but leave active anyway */
			
			/* padding: 2%; */
			/* border: 1px solid green; */
		}
		
		h2.product_title
		{
			color: #3916A2;
			
			font-size: 14px;
			
			font-family: arial;
			font-weight: bold;
			
			text-decoration: underline;
			margin-bottom: 3px;
			
			margin: 0;
			margin-bottom: 5px;
		}
		
		.sort_type
		{				
			color: black;
			
			font-size: 14px;
			
			/* font-weight: 600; */
			font-style: italic;
			padding-bottom: 2px;
			
			margin-top: 5px; /* added 14-01-2020 */
			
			border: 1px dashed green;
		}
		
		@media only screen and (min-width: 1450px)
		{ /* Bootstrap breakpoints: (down page a bit) https://getflywheel.com/layout/css-breakpoints-responsive-design-how-to/ */
		
			#pagin_container 
			{
				width: 70%;
			}
		}
		
		/* Great article ... https://webplatform.github.io/docs/tutorials/understanding-css-units/ */			
		/* xxxxxxxxxxxx */
		@media only screen and (min-width: 495px)
		{				
			/* Bootstrap breakpoints: (down page a bit) https://getflywheel.com/layout/css-breakpoints-responsive-design-how-to/ */
			
			/* "fr" locks the width to the proportion of available space ... Always! Based on the Number! of "fr"s stated in */
			/* "grid-template-columns:" as below ... similar (if not exactly the same) as Flex's "Grow" */
			
			/* The good thing is that even when an element is removed using JS ... the remaining elements width-proportion doesn't change */
			/* E.G. 1fr / (1fr 1fr 1fr 1fr) = 20% ... and if you remove say 2 elements ... the remaining 3 still have a width of 20% */
			
			/* "auto" on the other hand as was used before ... expands the remaining elements to fill 100% of the available space */
			/* after any elements have been removed */
		
			.grid-container_mobile
			{
				/* grid-template-columns: auto; */
				grid-template-columns: 1fr 1fr;
			}
		}
		
		@media only screen and (min-width: 768px)
		{
			.grid-container_mobile
			{
				/* grid-template-columns: auto auto; */
				grid-template-columns: 1fr 1fr;
			}
			
			h2.product_title
			{
				font-size: 16px;
			}
			
			.sort_type
			{
				font-size: 15px;
			}
		}
		
		@media only screen and (min-width: 992px)
		{
			.grid-container_mobile
			{
				/* grid-template-columns: auto auto auto; */
				grid-template-columns: 1fr 1fr 1fr;
			}
			
			h2.product_title
			{
				font-size: 17px;
			}
			
			.sort_type
			{
				font-size: 16px;
			}
		}
		
		@media only screen and (min-width: 1200px)
		{
			.grid-container_mobile
			{
				/* grid-template-columns: auto auto auto auto; */
				grid-template-columns: 1fr 1fr 1fr;
			}
			
			select, select > [label], optgroup > option, #pagin_button_div button
			{
				font-size: 16px;
			}
			
			#sort_method_text_prefix
			{
				font-size: 14px;
			}
			
			h2.product_title
			{
				font-size: 18px;
			}
			
			.sort_type
			{
				font-size: 16px;
			}
		}
		
		@media only screen and (min-width: 1350px)
		{ /* Bootstrap's highest is ... 1200px ... according to the above link */
			.grid-container_mobile
			{					
				/* grid-template-columns: auto auto auto auto auto; */
				/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr; */
				grid-template-columns: 1fr 1fr 1fr;
			}
		}
		
		@media only screen and (min-width: 1450px)
		{
			.grid-container_mobile
			{
				width: 70%;					
			}
		}