.charity-base {
  position: relative;
  width: 100%;
  margin: auto;
  overflow: hidden;
  text-align: center;
}

.charity-box {
  position: relative;
  width: auto;
  height: auto;
  object-fit: cover;
  float: left;
  margin: 0 20px 46px 6px;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid #eee;
  text-align: center;
}

.charity-logo {
  display: block;
  width: 170px;
  height: 170px;
}

.overlay {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #591579;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
  opacity: 0.950;
}

.overlay2 {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #FEB60A;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
  opacity: 0.950;
}

.overlay3 {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #000053;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
  opacity: 0.950;
}

.overlay4 {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #17B6CB;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
  opacity: 0.950;
}

.overlay5 {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #E50018;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
  opacity: 0.950;
}

.overlay6 {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #DB002A;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
  opacity: 0.950;
}

.overlay7 {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #0010C2;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
  opacity: 0.950;
}

.overlay8 {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #75002B;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
  opacity: 0.950;
}

.overlay9 {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #191919;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
  opacity: 0.950;
}

.overlay10 {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #BBBAA8;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
  opacity: 0.950;
}

.overlay11 {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #191919;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
  opacity: 0.950;
}

.overlay12 {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #E50018;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
  opacity: 0.950;
}

.overlay13 {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #39B9D6;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
  opacity: 0.950;
}

.overlay14 {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #191919;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
  opacity: 0.950;
}

.overlay15 {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #0A5093;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
  opacity: 0.950;
}

.overlay16 {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #FED518;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
  opacity: 0.950;
}

.overlay17 {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #062E3C;
  overflow: hidden;
  width: 100%;
  height:0;
  transition: .5s ease;
  opacity: 0.950;
}

.charity-box:hover .overlay {
  bottom: 0;
  height: 100%;
}

.charity-box:hover .overlay2 {
  bottom: 0;
  height: 100%;
}

.charity-box:hover .overlay3 {
  bottom: 0;
  height: 100%;
}

.charity-box:hover .overlay4 {
  bottom: 0;
  height: 100%;
}

.charity-box:hover .overlay5 {
  bottom: 0;
  height: 100%;
}

.charity-box:hover .overlay6 {
  bottom: 0;
  height: 100%;
}

.charity-box:hover .overlay7 {
  bottom: 0;
  height: 100%;
}

.charity-box:hover .overlay8 {
  bottom: 0;
  height: 100%;
}

.charity-box:hover .overlay9 {
  bottom: 0;
  height: 100%;
}

.charity-box:hover .overlay10 {
  bottom: 0;
  height: 100%;
}

.charity-box:hover .overlay11 {
  bottom: 0;
  height: 100%;
}

.charity-box:hover .overlay12 {
  bottom: 0;
  height: 100%;
}

.charity-box:hover .overlay13 {
  bottom: 0;
  height: 100%;
}

.charity-box:hover .overlay14 {
  bottom: 0;
  height: 100%;
}

.charity-box:hover .overlay15 {
  bottom: 0;
  height: 100%;
}

.charity-box:hover .overlay16 {
  bottom: 0;
  height: 100%;
}

.charity-box:hover .overlay17 {
  bottom: 0;
  height: 100%;
}

.charity-title {
  color: #fff;
  font-family: arial;
  font-size: 15px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

#charity-info {color: #fff;font-size: 11px;}
#charity-info a:link {color: #fff;font-size: 11px;text-decoration:underline}
#charity-info a:hover {color: #fff;font-size: 11px;text-decoration:underline}
#charity-info a:visited {color: #fff;font-size: 11px;text-decoration:underline}