.solution-block h2 {
  letter-spacing: -1.2px;
  color: #333;
  text-transform: none
}

.solution-block .view {
  height: 290px;
  overflow: hidden;
  position: relative;
  width: 100%;
  margin: 0 0 4px
}

.solution-block .view img {
  width: 100%;
  max-width: inherit
}

.solution-block .view .mask {
  width: 850px;
  padding: 60px;
  height: 665px;
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transform: translate(-657px, 128px) rotate(32deg);
  -ms-transform: translate(-657px, 128px) rotate(32deg);
  transform: translate(-657px, 128px) rotate(32deg);
  -webkit-transition: all .4s ease-in-out;
  transition: all .4s ease-in-out;
  position: absolute;
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  top: 0;
  left: 0
}

.solution-block .purple .box-caption,
.solution-block .purple .mask {
  background-color: #b36cdb
}

.solution-block .view:hover .mask {
  opacity: 1;
  overflow: hidden;
  visibility: visible;
  -webkit-transform: translate(-83px, -144px) rotate(45deg);
  -ms-transform: translate(-83px, -144px) rotate(45deg);
  transform: translate(-83px, -144px) rotate(45deg)
}

.solution-block .view:hover .box-caption {
  z-index: -1;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out
}

.solution-block .box-caption {
  color: #fff;
  padding: 15px;
  position: absolute;
  left: 0;
  bottom: 0;
  -webkit-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  font-weight: 700;
  font-size: 14px
}

.solution-block .box-content {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  padding: 20px;
  z-index: -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  align-content: space-around;
  justify-content: center;
}

.solution-block .view:hover .box-content {
  z-index: 5
}

.solution-block .box-content h3 {
  text-align: center;
  color: #fff;
  display: block;
  margin: 0;
  transform: translate(560px, -240px);
  transition: all .2s ease-in-out
}

.solution-block .view:hover h3 {
  /* transition-delay: .5s; */
  transform: translateY(0px)
}

.solution-block .view:hover p {
  transform: translateY(0px);
  /* -webkit-transition-delay: .5s; */
  /* transition-delay: .5s */
}

.solution-block .box-content p {
  color: #fff;
  display: block;
  /* max-width: 340px; */
  line-height: 1.7;
  padding: 0;
}

.solution-block .box-content div,
.solution-block .box-content p {
  text-align: center;
  transform: translate(-324px, 420px);
  transition: all .2s ease-in-out;
  margin: 0 auto
}

.solution-block .purple a.white-btn {
  color: #b36cdb
}

.solution-block .purple a.white-btn:hover {
  color: #fff;
  background: #b36cdb
}

.solution-block .view:hover div {
  transform: translateY(0px);
  /* transition-delay: .5s */
}

.solution-block .green .mask {
  background-color: #00b9be
}

.solution-block .light-blue .mask {
  background-color: #4287d6
}

.solution-block .blue .mask {
  background-color: #0074e0
}

.solution-block .green .box-caption {
  background-color: #00b9be
}

.solution-block .light-blue .box-caption {
  background-color: #4287d6
}

.solution-block .blue .box-caption {
  background-color: #0074e0
}

.solution-block .green a.white-btn {
  color: #00b9be
}

.solution-block .green a.white-btn:hover {
  background: #00b9be;
  color: #fff
}

.solution-block .light-blue a.white-btn {
  color: #4287d6
}

.solution-block .light-blue a.white-btn:hover {
  background: #4287d6;
  color: #fff
}

.solution-block .blue a.white-btn {
  color: #0074e0
}

.solution-block .blue a.white-btn:hover {
  color: #fff;
  background: #0074e0
}

@media (min-width: 596px) {
  .solution-block .view {
    width: calc(50% - 5px);
    margin: 0 2.5px 4px
  }

  /* .solution-block .view:hover h3 {
    transform: translateY(15px)
  } */

  /* .solution-block .view:hover p {
    transform: translateY(35px)
  } */

  /* .solution-block .view:hover a.white-btn {
    transform: translateY(0px)
  } */
}

@media (min-width: 768px) {
  .solution-block h2 {
    margin-bottom: 40px
  }

  .solution-block .box-caption {
    font-size: 16px;
    padding: 20px
  }
  .solution-block .box-content p{
    padding: 0 35px;
  }
}

@media (min-width: 992px) {
  .solution-block .box-caption {
    padding: 24px;
    font-size: 17px
  }
  .solution-block .box-content p{
    padding: 0 45px;
  }
}
@media all and (min-width: 1180px) {
  .solution-block .box-content p{
    padding: 0 100px;
  }
}