@charset "utf-8";
/* udated 14-APR-2021 03:00 CET */

.twoColHybLt #container {
	width: 100%;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0px solid #FFF;
	text-align: left; /* this overrides the text-align: center on the body element. */
	color: #000;
	font-size: 100%;
} 

/* Tips for sidebar1:
1. Since we are working in relative units, it's best not to use padding on the sidebar. It will be added to the overall width for standards compliant browsers creating an unknown actual width. 
2. Since em units are used for the sidebar value, be aware that its width will vary with different default text sizes.
3. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".twoColHybLt #sidebar1 p" rule.
*/
.twoColHybLt #sidebar1 {
	float: left;
	width: 180px;
	height: auto;
	clear: left;
	font-size: small;
	text-align: left;
}
.twoColHybLt #sidebar1 h3, .twoColHybLt #sidebar1 p {
	text-align: left;
	width: 8em;
}

/* Tips for mainContent:
1. The space between the mainContent and sidebar1 is created with the left margin on the mainContent div.  No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
2. Be aware it is possible to cause float drop (the dropping of the non-floated mainContent area below the sidebar) if an element wider than it can contain is placed within the mainContent div. WIth a hybrid layout (percentage-based overall width with em-based sidebar), it may not be possible to calculate the exact width available. If the user's text size is larger than average, you will have a wider sidebar div and thus, less room in the mainContent div. You should be aware of this limitation - especially if the client is adding content with Contribute.
3. In the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This may help avoid several IE-specific bugs.
*/
.twoColHybLt #mainContent {
	margin: 0 20px 0 13em; /* the right margin can be given in percentages or pixels. It creates the space down the right side of the page. */
	text-align: left;
} 

/* Use fltlft, fltrt, and clearfloat all used together to left and right justify text on the same line
Syntax: 
	<span class="floatleft">Text on the left.</span>
	<span class="floatright">Text on the right.</span>
	<div style="clear: both;"></div>
*/

.floatleft { /* used to left justify text on the same line as right justify */
	float: left;
}

.floatright { /* used to right justify text on the same line as left justify */
	float: right;
}

.clearfloat { /* used to clear the float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
/* end left and right justify text on the same line */

.MainContent {
	text-align: center;
}
.twoColHybLt #container #mainContent p strong {
	text-align: center;
}
#container #mainContent p strong {
	text-align: center;
}
.center {
	text-align: center;
}
.Center {
	text-align: center;
}
.twoColHybLt #container #mainContent .Center {
	color: #309;
}
#webgallery {
	height: 645px;
	width: 860px;
	margin: 0px;
	text-align: center;
}
.HighlightYellow {
	background-color: #FFC;
} 
.PageHeader {
    margin: 5px auto; /* top/bottom left/right */
	color: black;
	text-align: center;
	width: 80%;
	letter-spacing: 2px;
	font-size: 4vw;
	text-shadow: .04em .04em 0 #FFD22E,.08em .08em 0 #aaa;
	-webkit-text-shadow: .04em .04em 0 #FFD22E, .08em .08em 0 #aaa;
}

/* Use for centering a table.  Table code is <table class="center">*/ 
/*
table.center {
	margin-left:auto; 
	margin-right:auto;
}
*/

table { 
	width: 98%; 
	border-collapse: collapse; 
    border: 1px solid black;
    table-layout: auto;
	font-size: 14px;
    margin-left:auto; 
    margin-right:auto;
    width: 300px;
	}

tr:nth-child(even){background-color: Gainsboro }
tr:hover {background-color: powderblue}
td, th {
	padding-left: 5px;
	vertical-align: text-middle;
    word-wrap: break-word;   
}

/* the image will scale down if it has to, but never scale up */
img {
  max-width: 98%;
  height: auto;
}

/* Used for mouse over (hover) on ALL images <a href="URL"><img src ...></a> */
a:link img:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); 
}
a:hover, a:active {
    color: blue;
}

img:hover.link {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}


/* Photo styling */
.photocontainer {
	width: 100%;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, [col-start] minmax(125px, 1fr) [col-end]);
    grid-auto-rows: auto;
	grid-auto-columns: auto;
	grid-auto-flow: dense; /* Fill all spaces with fitted images */
}

/* Styling the links */
.photocontainer a img {
    width: 100%;
    height: auto;
    object-fit: contain;
	text-decoration:none;
	border: 2px solid black;
	-webkit-border-radius: 10; 
    -moz-border-radius: 10; 
    border-radius: 6px; 
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

@media screen and (min-width: 1024px){
	.photocontainer{
		width: 960px;
		margin: 0 auto;
	}
}
/* End photo styling */

.gallaryimage {
    max-width: 98%;
    height: auto;
	display: block; 
	margin: auto;
	border: solid black;
	-webkit-border-radius: 18; 
    -moz-border-radius: 18; 
    border-radius: 18px; 
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

/* Used for videos */
video {
    max-width: 480px;
    height: auto;
}
/* Used for videos iframe syntax: <div class="videoWrapperOuter"><div class="videoWrapperInner"><iframe ... ></iframe></div></div> */
.videoWrapperOuter {
  max-width:480px; 
}
.videoWrapperInner {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 50%;
  padding-top: 25px;
  height: 0;
}
.videoWrapperInner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Used for videos - APR 2021 update The WatchOnYouTube is for mobile devices
   Syntax: 
	<div class="video16x9"> 
	  <iframe class="video-iframe" src="https://www.youtube.com/embed/QHQDXQ4gKuI"></iframe>
	</div>
	<a href="https://www.youtube.com/watch?v=QHQDXQ4gKuI" target="_blank"><img  class="WatchOnYouTube" src="/image/WatchOnYouTube.png"></a>
 */
.video16x9 {
  position: relative;
  width: auto;
  margin-left: 30px;
  margin-right: 30px;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.video4X3 {
  position: relative;
  width: auto;
  margin-left: 30px;
  margin-right: 30px;
  overflow: hidden;
  padding-top: 75%; /* 4:3 Aspect Ratio */
}

.video-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100%;
  border: solid;
}

.WatchOnYouTube {
  margin-right: auto;
  margin-left: 5%;
  margin-top: 3px;
  height: 15px;
}

/* media display syntax: <div class="mediadisplay"> ... </div>*/
.mediadisplay {
	border-top: thin solid;
	border-bottom: thin solid;
	padding-left: 5px;
    padding-bottom: 5px;
    }
/*colors every even display*/
.mediadisplay:nth-of-type(1) {
	border-top: solid ;
}
/*colors every even display*/
.mediadisplay:nth-of-type(even) {
	border-top-style: solid;
/*    margin-bottom: -12px;*/
    background-color: #E8E8E8;
	border-bottom: thin solid;
}
/* custom-button syntax: <input type="button" value="Click me" onclick="msg()" class="custom-button"> to add color use class="custom-button red" to center button add style="margin:0 auto;display:block;" */
.custom-button {
	border-radius: 6px;
	border-color: gray;
	width: auto;
	margin-top: 6px;
	padding: 3px;
	background: -moz-linear-gradient(top, Gainsboro, DarkGray);
	background: -ms-linear-gradient(top, Gainsboro, DarkGray);
	background: -webkit-linear-gradient(top, Gainsboro, DarkGray);
	background: linear-gradient(top, Gainsboro, DarkGray);
	color: black;
	cursor: pointer;
}

.custom-button:hover {
	opacity: 0.5;
	filter: alpha(opacity=50); /* For IE8 and earlier */
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.custom-button a {
  text-decoration: none;
  color:inherit;
}

.red {
	background: -moz-linear-gradient(top, Red, DarkRed);
	background: -ms-linear-gradient(top, Red, DarkRed);
	background: -webkit-linear-gradient(top, Red, DarkRed);
	background: linear-gradient(top, Red, DarkRed);
	color: yellow;
}

.blue {
	background: -moz-linear-gradient(top, LightBlue, SteelBlue);
	background: -ms-linear-gradient(top, LightBlue, SteelBlue);
	background: -webkit-linear-gradient(top, LightBlue, SteelBlue);
	background: linear-gradient(top, LightBlue, SteelBlue);
	color: black;
}

.darkblue {
	background: -moz-linear-gradient(top, Blue, DarkBlue);
	background: -ms-linear-gradient(top, Blue, DarkBlue);
	background: -webkit-linear-gradient(top, Blue, DarkBlue);
	background: linear-gradient(top, Blue, DarkBlue);
	color: gold;
}

.green {
	background: -moz-linear-gradient(top, LimeGreen , DarkGreen);
	background: -ms-linear-gradient(top, LimeGreen , DarkGreen);
	background: -webkit-linear-gradient(top, LimeGreen , DarkGreen);
	background: linear-gradient(top, LimeGreen , DarkGreen);
	color: yellow;
}

.yellow {
	background: -moz-linear-gradient(top, Yellow, GoldenRod);
	background: -ms-linear-gradient(top, Yellow, GoldenRod);
	background: -webkit-linear-gradient(top, Yellow, GoldenRod);
	background: linear-gradient(top, Yellow, GoldenRod);
	color: black;
}
/* end custom-button */

/* start favplay-button favorite-playlist button <button class="favplay-button"> */
.favplay-button {
	background-color: black;
	border: none;
	display: inline-block;
	color: white;
	padding: 5px;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: 8px;
}

.favplay-button:hover {
	opacity: 0.5;
	filter: alpha(opacity=50); /* For IE8 and earlier */
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
/* end favplay-button favorite-playlist button */

/* Start Go to top button */
/* https://www.w3schools.com/howto/howto_js_scroll_to_top.asp */
#GoToTop {
  	display: none;
	opacity: 0.70;
  	position: fixed;
  	bottom: 20px;
	right: 8px;
  	z-index: 99;
	font-size: 14px;
	width: auto;
	margin-top: 6px;
	padding: 6px;
	border: 1px solid;
    border-radius: 6px;
    box-shadow: -2px 2px 5px 6px rgba(0,0,0,0.2);
    background: -moz-linear-gradient(top, LightBlue, SteelBlue);
	background: -ms-linear-gradient(top, LightBlue, SteelBlue);
	background: -webkit-linear-gradient(top, Blue, DarkBlue);
	background: linear-gradient(top, LightBlue, SteelBlue);
	color: white;
	cursor: pointer;
}
#GoToTop:hover {
	opacity: 1;
	filter: alpha(opacity=50);
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
	color: black;
	background: GoldenRod;
	}
#GoToTop a {
    text-decoration: none;
    color: white;
}
/* End Go to top button */

/* set two columns Syntax: <div class="twocolumns"> ... </div>*/
.twocolumns {
  -webkit-columns: 2 200px; /* Chrome, Safari, Opera */
     -moz-columns: 2 200px; /* Firefox */
          columns: 2 200px;
  -webkit-column-gap: 4em; /* Chrome, Safari, Opera */
     -moz-column-gap: 4em; /* Firefox */
          column-gap: 4em;
  -webkit-column-rule: 1px outset gray; /* Chrome, Safari, Opera */
     -moz-column-rule: 1px outset gray; /* Firefox */
          column-rule: 1px outset gray;
  -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
     -moz-column-rule-style: solid; /* Firefox */
          column-rule-style: solid;
}
@media screen and (max-width: 700px) {
    .twocolumns {
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
		   -moz-column-count: 1; /* Firefox */
				column-count: 1;
    }
}
.nowrap { /* Syntax: <span class="nowrap"> text goes here</span>*/
    white-space: nowrap;
}

/* Tooltip Syntax: <div class="tooltip" onclick="tooltip()">Tip title goes here<span class="tooltiptext" id="tooltiptext">Tip goes here </span></div> */
.tooltip {
	position: relative;
	display: inline-block;
	color: limegreen;
	cursor: pointer;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 420px;
	background-color: Gainsboro;
	color: black;
	text-align: left;
	word-wrap:break-word;
	white-space: normal;
	border: 2px black solid;
	border-radius: 6px;
	padding: 5px 5px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 100%;
	left: -100%;
    margin-left: -150px;
}

.tooltiptext ul  {
    margin: -4px 0;
}

.tooltiptext ul li {
	margin-left: -24px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
/* End Tool tips */

/* Hide original inputs - (true = -1 false = 0) - id and label must match syntax: 
<input type="radio" name="ListPhone" value="-1" id="ListPhone_Yes" /><label for="ListPhone_Yes"> Yes</label>
<input type="radio" name="ListPhone" value="0" id="ListPhone_No" /><label for="ListPhone_No"> No</label>
*/
input[type=radio],
input[type=checkbox]{
/*  visibility: hidden; */
  position: absolute;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
}

input[type=radio] + label:before,
input[type=checkbox] + label:before{
  height:12px;
  width:12px;
  margin-right: 2px;
  content: " ";
  display:inline-block;
  vertical-align: baseline;
  border:1px solid #777;
  background-color: LightCyan;
}

input[type=radio]:checked + label:before,
input[type=checkbox]:checked + label:before{
  background:black;
}

button, input, select, textarea, input[type=radio] + label:before,
input[type=checkbox] + label:before {
  background-color: LightCyan;
}

/*for member profile display makes 4 columns autoadjustable */
.memberdisplay {
  -webkit-columns: 3;
     -moz-columns: 3;
          columns: 3;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
    -webkit-column-width: 280px; /* Chrome, Safari, Opera */
    -moz-column-width: 280px; /* Firefox */
    column-width: 280px;
	padding: 6px;
}
/*for member profile display colors every even display */
.memberdisplay:nth-of-type(odd) {
	border-top: medium;
	border-top-style: solid;
	border-bottom: medium;
	border-bottom-style: solid;
    background-color: Gainsboro;
}

/* for members photos */
.member-photos .photos {
  border: 1px solid black;
  padding: 5px;
  margin-right: 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  float: left;
  width: auto;
  height: auto;
  font-size: 0.9em;
}

/*for member profile display  hanging indent paragraph syntax <p class="HangingIndent"> */
p.HangingIndent {
    list-style-type:none;
    padding: 0em;
    text-indent: -20px;
    padding-left: 20px;
    margin: 0;
}

/* Footer begin */
/* https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/ */
#page-container {
  position: relative;
  min-height: 70vh;
}

#content-wrap {
  padding-bottom: 1.0rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1.0rem;            /* Footer height */
}
/* existing code */
.footercontainer { 
  padding-top: 10px;
}

.footersection { 
  background-color: DimGray; 
  color: white;
  font-size:x-small;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

.footerelementleft { 
  float: left;
  width: 28%;
  vertical-align: top;
  margin-right: 1.1%;
  margin-left: 1.1%;
}
.footerelementright { 
  float: right;
  text-align: right;
  width: 65%;
  vertical-align: middle;
  margin-right: 1.1%;
  margin-left: 1.1%;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 675px) {
  .footerelement { /* optionbuttons */
     width: 98%;
     margin-bottom: 12px;
     text-align: center;
	}
   .footerelementright { 
	  float: left;
      width: 98%;
  	  text-align: left;
      vertical-align: middle;
      margin-right: 1.1%;
      margin-left: 1.1%;
    }
}
/* Footer end */

/* Start Login screen Full-width input fields */
.login input[type=text], input[type=password] {
  width: 100%;
  display: inline-block;
  box-sizing: border-box;
}

.containerlogin {
  padding: 12px;
}

.optionbuttons {
  float: left;
  width: 31%;
  vertical-align: middle;
  margin-right: 1.1%;
  margin-left: 1.1%;
  height: 42px;
  margin-top: -5px;
}

.containerbuttons {
  background-color: Gainsboro; 
  border-radius: 0 0 6px 6px;
  padding-bottom: 45px;
  border-top:  groove ;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
  background-color: white;
  margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
  border: 1px solid black;
  border-radius: 6px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
  max-width: 400px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 400px) {
  .modal-content {
     margin-left: 15px;
     margin-right: 15px;
  }
  .optionbuttons {
     width: 100%;
     margin-bottom: 12px;
     height: 28px;
  }
  .containerbuttons {
     padding-bottom: 100px;
  }
}
/*end Login Screen */

/* start Menu bar code */
#container {
	margin: 0 auto;
	max-width: 890px;
}

.toggle,
[id^=drop] {
	display: none;
}


/* Giving a background-color to the nav container. */
nav { 
	margin:0;
	padding: 0;
	background-color: DimGray;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */
nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" and centering top horizontal menu */
nav ul {
	float: right;
	display: flex;
	justify-content: center;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
}
	
/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	background-color: DimGray;
	}

/* Styling the links */
nav a {
	display:block;
	padding: 0 10px;	
	line-height: 30px;
    width: auto;
	color: white;
	text-decoration:none;
	font-size: 0.9em;
}

nav ul li ul li:hover { 
	background: gray; 
	color: cyan; 
}

/* Background color change on Hover */
nav a:hover { 
	background-color: gray; 
	color: cyan;
	font-size: 0.9em; /* has to be the same number as "nav a" */
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute; 
	top: 30px; /* has to be the same number as "nav a" */
    min-width: 100px; /* has to be the same number as "nav a" */
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* Fisrt Tier Dropdown */
nav ul ul li {
	width: auto;
	float:none;
	display:list-item;
	position: relative;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
	z-index: 99; /* Higher  number the closer to the front */
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top:-60px;
	/* has to be the same number as the "width" of "nav ul ul li" */ 
	left:170px; 
}

/* Change ' +' in order to change the Dropdown symbol */
nav li > a:after { content:  ' +'; }
nav li > a:only-child:after { content: ''; }

/* Change members only menu items to yellow */
nav ul li.membersonly a {
  color: yellow;
}
/* Change members only menu items to yellow */
nav ul li.membersonly a:hover { 
	background-color: gray; 
	color: cyan;
	font-size: 0.9em; /* has to be the same number as "nav a" */
}

/* Media Queries
--------------------------------------------- */

@media all and (max-width : 768px) {

	nav {
		margin: 0;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;
	}
	
	nav a {
		padding-left: 20px;
	}
	/* Styling the toggle label */
	.toggle {
		display: block;
		background-color: DimGray;
		color: white;
		padding: 4px 20px;	
		text-decoration:none;
		border:none;
		color: white;
		font-size: 0.9em;
	}

	.toggle:hover {
		background-color: gray;
		color: cyan;
	}

	/* Display Dropdown when clicked on Parent label */
	[id^=drop]:checked + ul {
		display: block;
		padding-left: 10px;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		padding-left: 0px;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
	}

	nav ul ul ul a {
		padding: 0 80px;
	}

	nav a:hover,
 	nav ul ul ul a {
		background-color: gray;
	}
  
	nav ul li ul li .toggle,
	nav ul ul a,
  nav ul ul ul a{
		padding:14px 20px;	
		color: white;
		font-size: 0.9em;
	}
  
  
	nav ul li ul li .toggle,
	nav ul ul a {
		padding: 0px 20px;	
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: black;
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	/* Fisrt Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 

	}

}

@media all and (max-width : 330px) {

	nav ul li {
		display:block;
		width: 94%;
	}
}
/* End Menu bar code */

/* Breaks/wraps URLs */
a {
	overflow-wrap: break-word;
}

/* https://blog.jamesauble.com/3-responsive-youtube-iframe-css-styling-methods-ea609a75576 */
iframe {
  width: calc(100vw - 20px);
  height: calc((100vw - 20px) * .5625);
  max-width: 300px;
  max-height: calc(300px * .5625);
  border: 5px groove silver;
}

/* https://www.w3schools.com/howto/howto_css_image_grid_responsive.asp */
* {
  box-sizing: border-box;
}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
  margin-left: auto;
  margin-right: auto;
  width: 90%
}

/* Create three equal columns that sits next to each other */
.column {
  -ms-flex: 33%; /* IE10 */
  flex: 33%;
  max-width: 33%;
  padding: 0 24px 24px 0;
}

/* Responsive layout - makes a two column-layout instead of three columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}