/* Custom CSS */

.container
{
  margin: 0 auto;
  display: grid;
  grid-gap: 20px;
  box-sizing: border-box;
  padding:20px;
}

.container .box2
{
  position: relative;
  padding:80px 40px 40px;
  transition:0.5s;
  text-align: center;
  background:#a8a6a6;
  border-radius:10px;
}

.container .box2:hover
{
  background-color: rgb( 176, 200, 226);
}

.container .box2 p
{
  margin:0;
  padding:0;
  transition:0.5s;
    color: white;

}

.container .box2 h4
{
  margin:20px 0 0;
  padding:0;
  transition:0.5s;
  font-size:18px;
  color:rgb( 176, 200, 226);
  font-weight:700;
  line-height: 20px;
  text-transform: uppercase;
}

.container .box2 h4 span
{
  font-weight: :600;
  font-size: 14px;
  color: #c5c5c5;
  transition: 0.5s;
}

.container .box2:hover p,
.container .box2:hover h4,
.container .box2:hover h4 span
{
  color:#fff;
}

.container .box2 .imgBox
{
  position:absolute;
  top: -60px;
  left: 50%;
  transform: translate(-50%);
  width: 120px;
  height: 120px;
  border-radius:50%;
  overflow: hidden;

}

.container .box2:before
{
  content: '';
  position: absolute;
  top: 20px;
  right: 20px;
  width: 80px;
  height: 80px;
  background: url(http://i448.photobucket.com/albums/qq208/concept_bucket/quotes.png?t=1543125720);
  background-size: cover;
  opacity: 0.02;
  pointer-events: none;
  transition: 0.5s;
}

.container .box2:hover:before
{
  transform: translateY(-60px);
  opacity: 1;
}

.container .box2:after
{
  content:'';
  position: absolute;
  bottom:20px;
  left: 20px;
  width: 80px;
  height: 80px;
  background: url(http://i448.photobucket.com/albums/qq208/concept_bucket/quotes.png?t=1543125720);
  background-size: cover;
  opacity: 0.02;
  pointer-events: none;
  transition: 0.5s;
  transform: rotate(180deg) translateY(0px);
}

.container .box2:hover:after
{
  transform: rotate(180deg) translateY(-60px);
  opacity: 1;
}