/*
 * Rules for advantage
 */
/*--------------------------*\
----- Company advantages -----
\*--------------------------*/
#advantages {
  padding: 60px 0 60px;
  margin: 4rem 0 4rem 0;
  background-color: var(--main-color);
  color: var(--white);
}
#advantages .container > h3 {
  font-size: var(--fz-h2);
  text-align: center;
  color: var(--white);
}
#advantages .adv {
  padding: 1rem;
}
@media (min-width: 48em) {
  #advantages .adv {
    flex: 1 0 20%;
  }
}
#advantages .adv .media {
  position: relative;
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  /*&-left {
				padding-right: 15px;
			}
			&-right {
				padding-left: 15px;
			}
			&-top {
				padding-bottom: 15px;
			}
			&-bottom {
				padding-top: 15px;
			}*/
}
@media (min-width: 48em) {
  #advantages .adv .media {
    padding: 0;
    flex-direction: column;
    align-items: start;
    text-align: start;
  }
}
@media (max-width: 47.999em) {
  #advantages .adv .media .all-hover {
    overflow: hidden;
  }
}
#advantages .adv .media .media-body {
  transition: color 0.25s;
}
#advantages .adv .media .media-body.icon-top,
#advantages .adv .media .media-body.icon-bottom {
  text-align: center;
}
#advantages .adv .media .media-body.icon-right {
  text-align: right;
}
#advantages .adv .media .media-title {
  display: flex;
  flex-direction: column;
  align-items: start;
}
#advantages .adv .media .media-title h3 {
  color: var(--white);
  transition: color 0.25s;
  font-size: var(--fz-h4);
}
@media (max-width: 47.999em) {
  #advantages .adv .media .media-title {
    align-items: center;
  }
}
#advantages .adv .media .media-title .icon {
  transition: all 0.25s ease 0s;
  display: flex;
  justify-content: center;
  align-items: start;
  margin-bottom: var(--spacer);
}
#advantages .adv .media .media-title .icon > i,
#advantages .adv .media .media-title .icon > span {
  transition: all 0.25s ease 0s;
  font-size: 10em;
  color: var(--white);
}
#advantages .adv:hover .media .media-title .title h3,
#advantages .adv:focus .media .media-title .title h3 {
  color: var(--main-color-lighter);
}
#advantages .adv:hover .media .media-title .title h3:before,
#advantages .adv:focus .media .media-title .title h3:before {
  width: 100%;
  border-bottom: 2px solid var(--main-color-lighter);
}
#advantages .adv:hover .media .media-title .icon > i,
#advantages .adv:focus .media .media-title .icon > i,
#advantages .adv:hover .media .media-title .icon > span,
#advantages .adv:focus .media .media-title .icon > span {
  color: var(--main-color-lighter);
}
#advantages .adv:hover .media .media-body,
#advantages .adv:focus .media .media-body {
  color: var(--main-color-lighter);
}
/*# sourceMappingURL=advantage.css.map */