#box1,#box2{
	width:100%;
	height:40px;
	margin:10px;
	padding:5px; 
    text-align: center;
}
#boxTitle{
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	width:100%;
  min-width: 335px;
	height:auto;
    margin-top: 0px;
    margin-bottom: 5px;
    margin-right: 15px;
    margin-left: 15px;
	  padding:8px; 
    text-align: center;
    border-radius: 15px;
}

#boxXXL100{
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
//box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  min-width: 350px;
	margin:2px;
  margin-bottom:10px;
	padding:10px; 
  text-align: center;
  border-radius: 25px;
	width:auto;
  height:auto;
	background: #638363;     
}

#boxGood, #boxBetter, #boxGreat, #boxBest, #boxGood50, #boxBetter50, #boxGreat50, #boxBest50, #boxGood75, #boxBetter75, #boxGreat75, #boxBest75, #boxGood100, #boxBetter100, #boxGreat100, #boxBest100{
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
	height:125px;
	margin:10px;
	padding:10px; 
    text-align: center;
    border-radius: 25px;
}

#boxGood {
	width:100px;
  background: white;
  opacity: 0.75;
	//background: #b6c8b6;   
}

#boxBetter {
	width:100px;
  background: white;
  opacity: 0.75;
	//background: #99b299;   
}
#boxGreat {
	width:100px;
  background: white;
  opacity: 0.75;  
	//background: #7c9c7c;  
}

#boxBest {
	width:100px;
  background: white;
  opacity: 0.75;  
	//background: #638363;   
}

#boxGood50 {
	width:220px;
  background: white;
  opacity: 0.75;
//	background: #b6c8b6;	    
}
#boxBetter50 {
	width:220px;
  background: white;
  opacity: 0.75;
//	background: #99b299;   
}
#boxGreat50 {
  background: white;
  opacity: 0.75;
	width:220px;
//	background: #7c9c7c;   
}
#boxBest50 {
  background: white;
  opacity: 0.75;
	width:220px;
//	background: #638363;   
}

#boxGood75 {
  background: white;
  opacity: 0.75;
	width:310px;
	//background: #b6c8b6;	    
}
#boxBetter75 {
  background: white;
  opacity: 0.75;
	width:310px;
	//background: #99b299;   
}
#boxGreat75 {
  background: white;
  opacity: 0.75;
	width:310px;
	//background: #7c9c7c;   
}
#boxBest75 {
  background: white;
  opacity: 0.75;
	width:310px;
	//background: #638363;   
}

#boxGood100 {
  min-width: 350px;
	width:100%;
  background: white;
  opacity: 0.85;
	//background: #b6c8b6;	    
}
#boxBetter100 {
  min-width: 350px;
	width:100%;
  background: white;
  opacity: 0.85;
	//background: #99b299;   
}
#boxGreat100 {
  min-width: 350px;
	width:100%;
  background: white;
  opacity: 0.85;
	//background: #7c9c7c;   
}
#boxBest100 {
  min-width: 350px;
	width:100%;
  background: white;
  opacity: 0.85;
	//background: #638363;   
}



#box1 {
	background: #001a00;
	border-radius: 25px;    
}

#box2 {
	background: #b6c8b6;
	border-radius: 25px;    
}

/* Container holding the image and the text */
.imgcontainer {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    position: relative;
    text-align: center;
    color: white;
}
  .box {
    border: 4px solid teal;
  }

//  .box img {
//    width: auto;
//    height: auto;
//  }
/* Bottom left text */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

/* Top left text */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}
/* Top left text */
.top-center {
  position: absolute;
  left: 50%;
  top: 80px;
  transform: translate(-50%, -50%); 
}
.bottom-center {
  position: absolute;
  left: 50%;
  bottom: -15px;
  transform: translate(-50%, -50%);
}
/* Top right text */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

/* Bottom right text */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

/* Centered text */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.float-container {
 //   border: 3px solid #fff;
    padding: 5px;
}

.float-child {
 //   width: 50%;
    float: left;
    padding: 5px;
   // border: 2px solid red;
}

.thumbnail {
text-align:center;
vertical-align: top;
display: inline-block; 
margin-top:0px;
margin-left:5px;
margin-right:5px; 
border-radius:10px;
height:250px;
width:auto;
//top:-50px; 
//left:-35px; 
//display:block; 
z-index:999; 
cursor: pointer; 
-webkit-transition-property: all; 
-webkit-transition-duration: 1.0s; 
-webkit-transition-timing-function: ease; 
} 

/*change the number below to scale to the appropriate size*/ 
.thumbnail:hover { 
transition-delay: 1s;
margin-bottom:50px;
transform: scale(3); 

}

.thumbnail2 {
text-align:center;
vertical-align: top;
display: inline-block; 
margin-top:0px;
margin-left:5px;
margin-right:5px; 
border-radius:10px;
height:250px;
width:auto;
//top:-50px; 
//left:-35px; 
//display:block; 
z-index:999; 
cursor: pointer; 
-webkit-transition-property: all; 
-webkit-transition-duration: 1.0s; 
-webkit-transition-timing-function: ease; 
} 

.fit-image {
  width: 220px;
  height: 160px;
  object-fit: cover;
}

.fit-image-front {
  width: 350px;
  height: 350px;
  object-fit: cover;
}