/* this is the main wrapper for this sections content */

.dir_content { /* updated: June 28, 2018 */	

	width:100%;
	padding: 0;	
	margin:auto;
	min-height:300px;  /* use min-height to grow with content */
	position:relative;
 	background:transparent;	

}

/* this is the wrapper for the accordion */

 .dir_container { /* updated: June 28, 2018 */

 /*	width:75%;*/

	height:auto;
	padding-top:10px;/* controls the internal link so it is visible below the sticky menu  */
	padding-right: 0px;
   	padding-left: 0px;
	padding-bottom:50px;
	margin:auto;
	position:relative; 	
	background: transparent;

 } 

 @media (max-width:768px){ /* changes image to full width on mobile devices */

  .dir_container {

	  width:100%;
	  padding-top:0px;	  

  }

 }

/* this is a row: contains four cards */

.dir_4col_row { /* updated: June 28, 2018 */

  	position:relative;
	margin: 10px auto 10px auto;
	padding: 0;
	border: 0;
	width:100%;
  	min-height:200px;
	overflow:hidden;
	border-top:0px solid #b98f71;
	background: transparent;

}

/* this needs to be styled for mobile */

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

	.dir_4col_row {

		width:100%;
		margin: 0px auto 80px auto;

	}

}

.responsive-1col { /* updated: July 3, 2018 */

    padding: 15px 2.5%; /* nice spacing between images */
    float: left;
    width: 25%;
	background-color:transparent;
	border-radius: 25px

}

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

	.responsive-1col {

	    padding: 10px 0px 10px 0px; /* nice spacing between images */
	    float: inline-block;
	    width: 100%;/* change to 50% if you want two across */
		margin:auto;
		border-radius: 25px

	}

} 

div.gallery { /* updated: June 28, 2018 */

    border: 0px solid #130f07;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	margin:auto;	/* centers the images in mobile...no effect on desktop */
	min-height:25px;
	overflow:hidden;
	background-color:red;

}

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

	div.gallery {

		width:80%;	

	}

}

/* makes img responsive */

div.gallery img { /* updated: June 28, 2018 */

    width: 100%;
	ght: auto;	

}

/* upper & lower panel on photo card */

div.gallerydesc { /* updated: June 28, 2018 */

    padding: 15px;
    text-align: center;
	font-family:'roboto', sans-serif;
	color:#b98f71;
	font-size: 14px;
	background: #fff;
	border:0px solid black
	
}

div.gallerydesc h2 { /* updated: June 28, 2018 */

	font-size: 1.5vw;

}



div.gallerydesc h3 {

	font-size: +1;
	font-weight:bold;
	color:#674832;

}



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

	div.gallerydesc {

		font-size: 1.5vh;

	}

}

/* puts a text box above the gallery image - if wanted */

div.galleryhdr { /* updated: June 28, 2018 */

    padding: 10px;
    text-align: center;
	font-family:'roboto', sans-serif;
	color:#b98f71;
	font-style: bold;
	font-size: 1.5vw;
	background: #fff;

}

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

	div.galleryhdr {

		font-size: 2.5vw;

	}

}

/**********************************************/

/*  this is the accordion for the directory */

button.dir_accordion { /* updated: June 17, 2024 */

    background-color: #b98f71;/* #b98f71 */
    color: #444;  /* controls the font color */
    cursor: pointer;
    padding: 18px;
	margin:100px;
    width: 100%;  /* height is auto */
    border: none;
 	border-radius: 0px 0px 0px 0px;
    text-align: left;
    outline: none;
    font-size: 16px;
    transition: 0.4s;
 	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}

button.dir_accordion.active, button.dir_accordion:hover { /* updated: June 27, 2018 */

    background-color: #332419;
	color:white;	

}

button.dir_accordion:after { /* updated: June 27, 2018 */

    content: "\02795"; /* Unicode character for "plus" sign (+) */
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;

}

button.dir_accordion.active:after { /* updated: June 27, 2018 */

    content: "\02796"; /* Unicode character for "minus" sign (-) */    

}

section.dir_panel {

    padding: 0 18px;
    background-color: transparent;
    max-height: 0;
	max-width:100%;
	margin:auto;
    overflow: hidden;
    transition: max-height 0.8s ease-out;
	border-bottom:1px solid;

}

section.dir_panel p {

    font-family:'roboto', sans-serif;

}

.clearfix:after {

    content: "";
    display: table;
    clear: both;

}