/*------------- #ACCORDIONS --------------*/


.accordion {
  list-style: none;
  margin: 0;
  padding: 0;

  .accordion-panel {
    position: relative;
    background: $white-color;
    border-radius: 50px;

    &:after {
      content: '';
      display: block;
      width: 1px;
      height: 35px;
      position: absolute;
      left: 70px;
      top: 50%;
      background-color: #cccccc;
      transform: translate(0, -50%);
      -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
      transition: all .3s ease;
    }

    &.active {
      &:after {
        height: 80%;
      }

    }

    .accordion-heading {
      display: table;
      padding: 25px 30px;
      font-size: 18px;
      transition: all .3s ease;

      @media (max-width: 570px) {
        font-size: 14px;
      }

      @media (max-width: 480px) {
        padding: 15px;
      }

      span {
        display: table-cell;
        vertical-align: middle;
      }
      span + span {
        padding-left: 30px;
        width: 100%;
      }

      .icon {
        font-size: 20px;
        color: #cccccc;
        padding-right: 30px;
        transition: all .3s ease;
        opacity: 1;

        .active {
          opacity: 0;
          position: absolute;
          left: 30px;
          transition: all .3s ease;
        }
      }

    }
  }
}

.accordion .panel-info {
  font-size: 15px;
  line-height: 1.3;
  padding: 10px 20px 30px 97px;
  border-radius: 0 0 50px 50px;
  margin-bottom: 5px;
  transition: all .3s ease;

  @media (max-width: 480px) {
    padding-left: 83px;
  }
}

.accordion .panel-heading {
  margin-bottom: 5px;
  transition: all .3s ease;

  &.active {
    border-radius: 50px 50px 0 0;
    margin-bottom: 0;
    transition: all .3s ease;

    .accordion-heading {
      transition: all .3s ease;

      i {
        opacity: 0;
        color: $primary-color;

        &.active {
          opacity: 1;
        }
      }
    }

    a {
      color: $primary-color;
      padding-bottom: 0;
    }
  }
}

.accordion__title {
  font-size: 19px;
  font-weight: 300;
}

.accordion__content__a {
  display: inline-block !important;
  color: #2dafd6 !important;
  font-size: 15px;
  text-decoration: underline;
}

.accordion .panel-heading:hover {

  .accordion-heading {
    color: $primary-color;

    i {
      color: $primary-color;
    }
  }
}

.accordion__module .after::after {
  right: 72%;
  top: 36%;
  width: 2%;
}

/*=====================================================
                Transition
=======================================================*/

.fade {
  opacity: 0;
  -webkit-transition: opacity .15s linear;
  -o-transition: opacity .15s linear;
  transition: opacity .15s linear;
}

.fade.in {
  opacity: 1;
}

.collapse {
  display: none;
}

.collapse.in {
  display: block;
}

tr.collapse.in {
  display: table-row;
}

tbody.collapse.in {
  display: table-row-group;
}

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-timing-function: ease;
  -o-transition-timing-function: ease;
  transition-timing-function: ease;
  -webkit-transition-duration: .35s;
  -o-transition-duration: .35s;
  transition-duration: .35s;
  -webkit-transition-property: height, visibility;
  -o-transition-property: height, visibility;
  transition-property: height, visibility;
}