.gallery {
  --s: 130px; /* control the size */
  --g: 10px;  /* control the gap */
  display: grid;
  margin: calc(var(--s) + var(--g));
}

.gallery > img {
  grid-area: 1/1;
  width: var(--s);
  aspect-ratio: 0.866;
  object-fit: cover;
  clip-path: polygon(0% 25%,0% 75%,50% 100%,100% 75%,100% 25%,50% 0);
  transform: translate(var(--_x,0),var(--_y,0)) scale(var(--_t,1));
  cursor: pointer;
  filter: grayscale(80%);
  transition: .2s linear;
}
.gallery > img:hover {
  filter: grayscale(0);
  z-index: 1;
  --_t: 1.2;
}

.gallery > img:nth-child(1) {--_x: calc(-100% - var(--g))}
.gallery > img:nth-child(7) {--_x: calc( 100% + var(--g))}
.gallery > img:nth-child(3),
.gallery > img:nth-child(5) {--_y: calc(-75% - .87*var(--g))}
.gallery > img:nth-child(4),
.gallery > img:nth-child(6) {--_y: calc( 75% + .87*var(--g))}
.gallery > img:nth-child(3),
.gallery > img:nth-child(4) {--_x: calc(-50% - .5*var(--g))}
.gallery > img:nth-child(5), 
.gallery > img:nth-child(6) {--_x: calc( 50% + .5*var(--g))}


.cascadeContain {
	 display : -webkit-box;
	 display : -moz-box;
	 display : -ms-flexbox;
	 display : -webkit-flex;
	 display : flex;
	 height : 100%;
	 margin-left : -2.5em;
	 padding : 0 auto;
	 align-items : center;
	 justify-content : center;
}
 #grid {
	 position : relative;
	 margin : 0 auto;
	 padding : 0 auto;
	 background : rgba(1, 1, 1, .4);
}
 .hexList li {
	 display : inline;
	 float : left;
	 padding : 1em 1em 0;
	 list-style-type : none;
}
 .hexList li:nth-child(6n+4), .hexList li:nth-child(6n+5), .hexList li:nth-child(6n+6) {
	 margin-top : -65px;
}
 .hexList li:nth-child(6n+4) {
	 clear : left;
	 margin-left : 115px;
}
 .hexList {
	 content : "";
	 display : block;
	 clear : both;
}
 .hexagon {
	 position :relative;
	 top : 0;
	 left : 0;
	 width : 200px;
	 height : 115.47px;
	 margin : 57.74px 0;
	 background : rgba(200, 16, 46, .35);
}
 .hexagon:after, .hexagon:before {
	 content : "";
	 position : absolute;
	 width : 0;
	 border-right : 100px solid transparent;
	 border-left : 100px solid transparent;
}
 .hexagon:before {
	 bottom : 100%;
	 border-bottom : 57.74px solid rgba(1, 1, 1, .4);
}
 .hexagon:after {
	 top : 100%;
	 width : 0;
	 border-top : 57.74px solid rgba(1, 1, 1, .4);
}
 .factContainer {
	 position : relative;
	 height : inherit;
	 text-align : center;
}
 .facts {
	 z-index : 1;
	 position : absolute;
	 top : 50%;
	 left : 50%;
	 width : 80%;
	 margin : 0;
	 margin-right : -50%;
	 color : #FFF9D9;
	 transform : translate(-50%, -50%);
}














.fixed-bg {
  background-image: url("https://staging.web.e.uh.edu/socialwork/_images/landing-page/muralhandsblur.jpg");
  min-height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


.circle {
    background: #000000;
    opacity: 0.50;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    margin:5px;
    overflow:hidden;
    padding:25px;
    position:relative;
    border: 3px white;
    border-style: dotted;
    box-shadow: 0px 0px 15px #000000;
}


.milestonestext{
  transform:translate(-50%,-50%);
  position:absolute;
  top:50%;
  left:50%;
  color : #FFF9D9;
  font-size:18px;
  font-weight:bold;
  line-height:21px;
  text-shadow : 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
	
}

.dashed {
  width: 100px;
  border: 1px dashed #FFF9D9;
}


 .titlemilestones {
	 margin-top : -15px;
	 margin-bottom : -10px;
	 color :#FFF9D9;
	 font-size:43px;
  font-weight:bold;
	 text-align : center;
	 text-decoration : none;
	 text-shadow : 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}