* {
  box-sizing: border-box;

}
.margin1 {
	margin-right:1.2em;
	margin-left:1.2em;
	/*
	margin-top:.5em;
	margin-bottom:0em;
	*/
	
}
h1 {
	color: #0c1c05;
	letter-spacing: .03em;
	font-size:34px;
	font-family: 'Raleway',sans-serif;
	display: block;
	text-shadow: 2.4px 4.2px 9px #d5e6cc, 1.2px 1.2px 3px #000; /*--this is too light to see! #effbe9 */
}
h2, summary {
	font-size:28px;
	line-height: 1.3em;
	font-family: proxima-nova, Candara, sans-serif;
	letter-spacing: .0125em;
	text-shadow: 1.5px 5px 7px #d5e6cc, .75px .75px 3px #000 ;
	
}
h3 {
	text-align: center;
	margin-bottom: 0px;
	font-size:22px;
	line-height: 1.3em;
	font-family: proxima-nova, Candara, sans-serif;
	font-style: normal;
	font-weight: 600;
	letter-spacing: .0125em;
	/*Use Avenir font medium? OR https://fonts.adobe.com/fonts/proxima-nova#usage-section */
}
h4 {
	padding-left:20px;
	letter-spacing: .016em;
	font-size:18px;
}

.desc {
	font-size: 18px;
}
.manu, p {
	letter-spacing: .06em;
	line-height: 1.6em;
	font-size:17px;
}
p {
	font-family: sans-serif;
	
}
.intro {
	margin:0;
}
.column {
	display: none;
}
.column1 {
	max-width:700px;
	margin:0 auto;
	padding:5px;
	margin-left:2em;
	}
.center {
	display:block;
	margin-left:auto;
	margin-right:auto;
	max-width:100%;
	width:75%;
}
ul.manu {
  list-style-type: none;
  font-family: Papyrus, fantasy;
  font-weight: 560;
}
li > span {
	font-family: 'Raleway',sans-serif;
	font-size:20px;
}

.column > img {
	width: 100%;
}
summary > span {
	font-style: oblique;
	font-size:33px;
	
}

#filterButton > span {
	font-size: 16.8px;
	font-style: italic;
	font-weight: 560;
	letter-spacing: .018em;

  padding: 12px;
  margin-top: 12px;
  margin-left: 6px;
  /*background-color: #224f0d;
  color: #effbe9;*/


}


/*this is to filter the results
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_filter_elements
*/
.show {
  display: block;
}
.row {
	overflow: hidden;
}


/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}
.row1::after {
  content: "";
  clear: both;
  display: table;
}

<!-- .row1 {
  display: flex;
} -->



@media screen and (min-width: 570px) {

  .column, .column-ex{
  float: left;
  width: 50%;
  padding: 5px;
}

}
@media screen and (min-width: 903px) {

  .column, .column-ex{
  float: left;
  width: 33.33%;
  padding: 5px;
}

}
@media screen and (min-width: 1000px) {
	.menu > li {
		float:right;
		text-align: left;
	}
	background-position: center;
}
@media screen and (min-width: 1000px) {

  .column, .column-ex {
  float: left;
  width: 25%;
  padding: 5px;
}
}

@media screen and (min-width: 1300px) {

  .column, .column-ex {
  float: left;
  width: 20%;
  padding: 5px;
	}

	.column1 {
	float:left;
	/*width: 50%;*/

	}
}

@media screen and (min-width: 1550px) {

  .column, .column-ex{
  float: left;
  width: 16.66%;
  padding: 5px;
}
}

@media screen and (min-width: 1850px) {

  .column, .column-ex{
  float: left;
  width: 14.286%;
  padding: 5px;
}
}

@media screen and (min-width: 2050px) {

  .column, .column-ex{
  float: left;
  width: 12.5%;
  padding: 5px;
}
}

/* Style the buttons */
.btn {
  /*border: none;*/
  border-style:outset;
  outline: none;
  padding: 12px;
  margin-top: 12px;
  margin-left: 6px;
  background-color: #224f0d;
  color: #effbe9;
  cursor: pointer;
  font-size: 17px;
}

.btn:hover {
  background-color: #0c1c05;
}

.btn.active {
  background-color: #effbe9;
  color: #224f0d;
  font-style: bold;
  }
  
 /*-----MENU at the top----*/
 ul.menu {
list-style-type: none;
height: auto;
margin: auto;
overflow:hidden;
}


.menu > li > a {
background-position: right;
padding-right: 32px;
padding-left: 32px;
display: block;
line-height: 56px;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 22px;
font-style: bold;
text-align: right;
/*color: #371C1C;---Put this on HTML page*/
letter-spacing: .13em;	
}
/* ------Put this on HTML page
.menu > li > a:hover {
	border-bottom: 3px inset #224f0d;
}*/

/*----This is for the other content that also uses multicolumns!----*/
.newscolumn > a {
	letter-spacing: .06em;
	line-height: 1.6em;
	font-size:17px;
	font-family: 'Raleway',sans-serif;
	text-decoration: none;
	color: #833118;
	}
	
.newscolumn > a:hover {
	font-style:bold;
	color: #37190e;
	
}
.newscolumn {
	-webkit-column-gap: 30px;
	-moz-column-gap: 30px;
	column-gap: 30px;
	column-rule: 2px ridge #682915;
  -webkit-column-rule: 2px ridge #682915;
  -moz-column-rule: 2px ridge #682915;
  padding: 15px 15px 15px 15px;
  border-corner-shape: scoop;
	border-radius: 0% 3% 3% 0%;
}
.newscolumn:after{
}

@media (min-width: 600px){
/* 2 columns for smaller screens starting at 600 */
.newscolumn {
  -webkit-column-count: 2; /* Old Chrome, Safari and Opera */
  
  -moz-column-count: 2; /* Old Firefox */
  
  column-count: 2;
	}
}

@media screen and (min-width: 1380px){
/* 3 columns for bigger screens starting at 1380 */
.newscolumn {
  -webkit-column-count: 3; /* Old Chrome, Safari and Opera */
  -moz-column-count: 3; /* Old Firefox */
  column-count: 3;
  }
}

/* 4 columns for bigger screens starting at 1800 */
@media (min-width: 1800px){
.newscolumn {
  -webkit-column-count: 4; /* Old Chrome, Safari and Opera */
  -moz-column-count: 4; /* Old Firefox */
  column-count: 4;
	}
}

/*----- The horizonal rule (hr) will match the columns----*/
hr { 
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  /*border-width: 2px;*/
  border: 1.75px solid #682915;
  border-radius: .875px;
  
}

summary, details {display:block}