/* ******* A BOX ********* */

.reviews {

width: 100%;

margin: 0 auto 0 auto;
z-index: 2000;
background-image: url("images/lodge-fade.jpg");
background-repeat: no-repeat;
background-size: cover;
background-color: #f1e2b9; 


}

/* ****** Details vs summary  accordian styles *******/

details {
  padding: 0px;
  background-color: none;
  border-radius: 0px;

}

summary {
  padding: 0px;
  padding-left: 0px;
  background-color: none;
  cursor: pointer;
  list-style: none;
  color: #000000;
}

summary::-webkit-details-marker {
  display: none;
}


summary {
  display: flex;
}

summary::before {
  content: '';
  width: 45px;
  height: 45px;
  background: url(images/chevronsorange35.png);
  background-position: top left;
  background-repeat: no-repeat;
  margin-right: 10px;
  transition: 0.4s;
}

details[open] > summary::before {
  transform: rotate(180deg);
}


 /*flex container-cards */     
 
   
     /* set up a row of divs in a flex container*/
     
    .flexrow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  border: 0px solid black;
  height: 600px;
  
}

   /* style the divs */
   
	.flexcolumn {
	flex: 1 1 40%;
	
  	padding: 20px 0px 0 10px;
  	margin: 20px;
  	margin: 0px;
  	border: 0px solid #888888;
  	background-color: none;
  	border-radius: 0px;
  	z-index: 5000;
}

   /*make those column divs also contain flex containers, with vertically stacked children*/

  .flexcolumninside {
  
  display: flex;
  flex-direction: column;
  align-items:center;
  padding: 10px 0px 10px 30px;
  font-size: 100%;
  color: #8b0100;
  }
  
   .flexcolumninside a:link {
   padding:5px 0;
   }
   
   
.flexcolumninside a:visited {
 color:black;
 background-color: none;
 }
 
 .flexcolumninside a:hover {
 color:red;
 background-color: #aaaaaa;
 }

.flexcolumninside details img {
 width: 90%;
 
 margin-top: -35px;
 border: 2px solid black;
 border-radius: 8px;
 
-webkit-box-shadow: 3px 3px 10px 6px rgba(0,0,0,0.55);
-moz-box-shadow: 3px 3px 10px 6px rgba(0,0,0,0.55);
box-shadow: 3px 3px 10px 6px rgba(0,0,0,0.55);
 }


.flexcolumninside summary img {
 width: 70%;
 margin-top: 0px;
 z-index: -1;
 }

 /* make the divs stack on small screens*/

@media screen and (max-width: 970px) {
  
  /*remove background*/
  .reviews {
  background-image: none;
  background-repeat: no-repeat;
  padding-bottom: 100px;
  background-color: #f1e2b9; 
}
  /*form single column*/
  .flexcolumn {
    flex: 1 0 100%;
   font-size: 110%;
  }
  
/* reduce the number of reviews shown by hiding those with this class */
  .revcrop {display: none;}
  
} 

 /* hide the review section in mobile*/

@media screen and (max-width: 480px) {
  
  .reviews {
  display: none;
  }
  
  }