@charset "utf-8";
/* CSS Document */

#RepeatingContainer{
  box-sizing: border-box;
/*  width: 24%;
  aspect-ratio: 229 / 350;*/
  margin: 0 .5% .5% .5%;
  background-color: rgba(50,200,200,.2);
  border: thin dotted pink;
  overflow: hidden;
  transition: all 0.3s ease;
	float:left;
	
	
/*	aspect-ratio: 229 / 350;*/
		aspect-ratio: 245 / 350;
	
  width: min(24%, 245px);   /* or just width: 100% in a grid */
  overflow: hidden;
	
	}
	
#xxRepeatingContainer{
  position: relative;
  Background-Color: rgba(50,200,200,.2);
  Overflow: Auto;
/*  width: 19%;
  min-width: 229px;
  height: 350px;
  margin: 0px .5% 10px .5%;*/
  padding: 0px;
  float: left;
  overflow: hidden;
  box-sizing: border-box;
  border: thin dotted pink;/**/
	
	
	width:24%;
	
	aspect-ratio: 229 / 350;
	
	min-width:0px;
	height:350px;
	margin:0px .5% 10px .5%;
  transition: all 1s ease;
 
 /*filter: grayscale(100%);*/
  }	
	
	#RepeatingContainer:hover {
	
	/* filter: grayscale(0%);*/
	 
	}

#ThisImageArea {
	position:relative;
	width:100%; 
	height:125px; 
	background-color:yellow; 
	-webkit-background-size: cover; 
	-moz-background-size:  cover; 
	-o-background-size:  cover; 
	background-size:  cover; 

	overflow:hidden; 
	border: .5px dotted black;margin:5px auto; 
	padding:0px;float:left;
}

@media all and (max-width: 5229px) and (min-width: 1978px) {
	
#xRepeatingContainer{
	width:9.5%;
	min-width:0px;
	height:350px;
	margin:0px  0px 10px .5%;
  transition: all 1s ease;
			}	
}


@media all and (max-width: 1977.99px) and (min-width: 1659px) {
	
#xRepeatingContainer{
	width:14%;
	min-width:0px;
	height:350px;
	margin:0px  0px 10px .28571428571429%;
  transition: all 1s ease;
	}	
}


@media all and (max-width: 1658.99px) and (min-width: 1500px) {
	
#xRepeatingContainer{
	/*width:15.65%;*/
	width: 15.66666666666667%;
	min-width:0px /*226px*/;
	height:350px;
	margin:0px .5% 10px .5%;
  transition: all 1s ease;
	}	
}

@media all and (max-width: 1499.99px) and (min-width: 1230px) {
	
#xRepeatingContainer{
	width:19%/*19%*/;
	min-width:0px/*223px*/;
	height:350px;
	margin:0px .5% 10px .5%;
  transition: all 1s ease;
	}	
}

@media all and (max-width: 1229.99px) and (min-width: 978px) {
	
#xRepeatingContainer{
	width:24%;
	min-width:0px /*225px*/;
	height:350px;
	margin:0px .5% 10px .5%;
  transition: all 1s ease;
	}	
}


@media all and (max-width: 977.99px) and (min-width: 770px) {
	
#xRepeatingContainer{
	width:32%;
	min-width:220px /*229px*/;
	height:350px;
	margin:0px .5% 10px .5%;
	transition: all 1s ease;
	}	
}



@media all and (max-width: 769.99px) and (min-width: 558px) {
	
#xRepeatingContainer{
	width:49%;
	min-width:229px;
	height:350px;
	margin:0px .5% 10px .5%;
	transition: all 1s ease;
	}	
}


@media all and (max-width: 557.99px) and (min-width: 0px) {
	
#xRepeatingContainer{
	width:49%;
	min-width:229px;
	height:350px;
	margin:0px .5% 10px .5%;
	transition: all 1s ease;
	}	
}