/*------------------------------------------------------------------
[BENEFITS.CSS - Benefits shortcode styles]
[Table of contents]

1. Shared styles, benefits layout
2. Left icons style
3. Top icons style
4. Colorful style
5. Benefits Carousel
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
	1. Shared styles, benefits layout
-------------------------------------------------------------------*/
.benefits .item-inside {
  position: relative;
}
.benefits h3 {
  margin-bottom: 14px;
}
.benefits a {
  color: #87878d;
}
.benefits a h3 {
  color: #28282c;
}
.benefits a:hover h3 {
  color: #1cbbb4;
}
/*------------------------------------------------------------------
	2. Left icons style
-------------------------------------------------------------------*/
.benefits.style-left_icons .icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 55px;
}
.benefits.style-left_icons .icon svg,
.benefits.style-left_icons .icon img {
  width: 55px;
}
.benefits.style-left_icons .icon svg {
  height: 55px;
}
.benefits.style-left_icons .icon .fa {
  font-size: 50px;
}
.benefits.style-left_icons .benefit-text {
  padding-left: 90px;
  margin-bottom: 65px;
}
.benefits.style-left_icons .no-icon .benefit-text {
  padding-left: 0;
}
@media screen and (max-width: 767px) {
  .benefits.style-left_icons .icon {
    width: 45px;
  }
  .benefits.style-left_icons .icon svg,
  .benefits.style-left_icons .icon img {
    width: 45px;
  }
  .benefits.style-left_icons .icon .fa {
    font-size: 40px;
  }
  .benefits.style-left_icons .benefit-text {
    padding-left: 70px;
    margin-bottom: 45px;
  }
}
/*------------------------------------------------------------------
	3. Top icons style
-------------------------------------------------------------------*/
.benefits.style-top_icons {
  text-align: center;
}
.benefits.style-top_icons .icon {
  width: 85px;
  display: inline-block;
  margin-bottom: 25px;
}
.benefits.style-top_icons .icon svg,
.benefits.style-top_icons .icon img {
  width: 85px;
}
.benefits.style-top_icons .icon .fa {
  font-size: 80px;
}
.benefits.style-top_icons svg {
  width: 85px;
  height: 85px;
}
.benefits.style-top_icons .benefit-text {
  margin-bottom: 65px;
}
.benefits.style-top_icons .no-icon .icon {
  margin-bottom: 0;
}
@media screen and (max-width: 767px) {
  .benefits.style-top_icons .icon .fa {
    font-size: 40px;
  }
  .benefits.style-top_icons .benefit-text {
    margin-bottom: 45px;
  }
}
/*------------------------------------------------------------------
	4. Colorful style
-------------------------------------------------------------------*/
.benefits.style-colorful .icon {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  background: #1cbbb4;
  text-align: center;
  line-height: 100px;
  padding: 15px;
  margin-bottom: 25px;
}
.benefits.style-colorful .icon svg,
.benefits.style-colorful .icon img {
  max-width: 65px;
}
.benefits.style-colorful .icon .fa {
  font-size: 50px;
  color: #ffffff;
}
.benefits.style-colorful .icon svg path {
  fill: #ffffff;
}
.benefits.style-colorful h3 {
  font-size: 22px;
  line-height: 1.35em;
  margin-bottom: 18px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.benefits.style-colorful .benefit-text {
  margin-bottom: 30px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.benefits.style-colorful .item:hover h3 {
  color: #1cbbb4;
}
.benefits.style-colorful .item:hover .benefit-text {
  color: #28282c;
}
/*------------------------------------------------------------------
	5. Benefits Carousel
-------------------------------------------------------------------*/
.benefits-carousel .item {
  padding: 0 15px;
}
.benefits-carousel .item-inside {
  background: #f3f4f6;
  padding: 50px;
  text-align: center;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.benefits-carousel .icon {
  margin-bottom: 10px;
}
.benefits-carousel .icon svg {
  width: 70px;
  height: 70px;
}
.benefits-carousel .icon .fa {
  font-size: 70px;
  line-height: 70px;
}
.benefits-carousel h3,
.benefits-carousel .desc {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.benefits-carousel h3 {
  margin-bottom: 10px;
}
.benefits-carousel .button {
  margin-top: 20px;
}
.benefits-carousel .item:hover h3,
.benefits-carousel .item:hover .desc {
  color: #fff;
}