.square-container-1 {
    float:left;
    position: relative;
    width: 96%;
    padding-bottom : 96%; /* = width for a 1:1 aspect ratio */
    margin:2%;
}

.square-container-solo {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
}


.rectangle-container-1 {
    float:left;
    position: relative;
    width: 96%;
    padding-bottom : 65%; /* = width for a 1:1 aspect ratio */
    margin:1%;
}

.rectangle-container-1 img, .square-container-1 img, .square-container-solo img {
    height:100%;
    width:100%;
    object-fit: cover;
    position:absolute;
    border-radius: 4px;
}

.img75 img, .img50 img, .img40 img, .img30 img {
    height:100%;
    width:100%;
    object-fit: cover;
    position:absolute;
    border-radius:50%;
}

.img100 img {
    height:100%;
    width:100%;
    object-fit: contain;
    position:absolute;
}



.img100 {  
    width:100px;
    height:100px; 
    position:relative;  
    }
.img75 {  
    width:75px;
    height:75px; 
    position:relative;  
    }
.img50 {  
    width:50px;
    height:50px; 
    position:relative;  
    }
.img40 {  
    width:40px;
    height:40px; 
    position:relative;  
    }
.img30 {  
    width:30px;
    height:30px; 
    position:relative;  
    }
    
      
.flexbin {
display: flex;
overflow: hidden;
flex-wrap: wrap;
margin: -2.5px;
}

.flexbin:after {
content: '';
flex-grow: 999999999;
min-width: 150px;
height: 0;
}

.flexbin > * {
position: relative;
display: block;
height: 200px;
margin: 5px;
flex-grow: 1;
}

.flexbin > * > img, .flexbin > * > * > img {
height: 200px;
object-fit: cover;
max-width: 100%;
min-width: 100%;
vertical-align: bottom;
}

.flexbin.flexbin-margin {
margin: 0px;
}    

/* TABLET STYLING */
@media screen and (max-width: 900px) {
    .flexbin {
display: flex;
overflow: hidden;
flex-wrap: wrap;
margin: -2.5px;
}

.flexbin:after {
content: '';
flex-grow: 999999999;
min-width: 100px;
height: 0;
}

.flexbin > * {
position: relative;
display: block;
height: 150px;
margin: 5px;
flex-grow: 1;
}

.flexbin > * > img, .flexbin > * > * > img {
height: 150px;
object-fit: cover;
max-width: 100%;
min-width: 100%;
vertical-align: bottom;
}
.flexbin.flexbin-margin {
margin: 0px; }
}


/* MOBILE STLYING */
@media screen and (max-width: 500px) {
    .flexbin {
display: flex;
overflow: hidden;
flex-wrap: wrap;
margin: -2.5px;
}

.flexbin:after {
content: '';
flex-grow: 999999999;
min-width: 100px;
height: 0;
}

.flexbin > * {
position: relative;
display: block;
height: auto;
margin: 5px;
flex-grow: 1;
}

.flexbin > * > img, .flexbin > * > * > img {
height: auto;
object-fit: cover;
max-width: 100%;
min-width: 100%;
vertical-align: bottom;
}
.flexbin.flexbin-margin {
margin: 0px; }
}



.square-container-5-mob, .square-container-4-mob, .square-container-3-mob, .square-container-2-mob {
    width: 98%;
    padding-bottom : 98%; /* = width for a 1:1 aspect ratio */
    margin:1%;
}



.costumelist span, .imagetextoverlay {
  font-size: 14px;
  color: white;
  text-shadow:1px 1px 4px #000;
  padding: 10px;

}

.costumelist img {
  filter: brightness(50%);
}

.overlaycontainer {
  position: relative; 

}

.overlaycontainer .overlaytext {
  position: absolute; /* Position the background text */
  bottom: 0; /* At the bottom. Use top:0 to append it to the top */
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  color: #f1f1f1; /* Grey text */
  width: 100%; /* Full width */
  padding: 0px 15px; /* Some padding */
}