// Variables //—————————————————— $timeline-division-background-color: $mediumgray-light !default; $timeline-years-background-color: $mediumgray-dark !default; $timeline-years-color: $white !default; $timeline-dotted-color: $aqua-light !default; $timeline-dotted-border-color: $lightgray-light !default;

$timeline-radius: 4px !default;

// Exports //——————————————————

@include exports(“timeline”) {

/**
 * timeline
 * --------------------------------------------------
 */

.timeline {
        & dl {
                position: relative;
                top: 0;
                margin: 0;
                padding: 20px 0;

                &:before {
                        position: absolute;
                        top: 0;
                        bottom: 0;
                        left: 50%;
                        margin-left: -1px;
                        width: 2px;
                        content: '';
                        background-color: $timeline-division-background-color;
                        z-index: 100;
                }

                & dt {
                        position: relative;
                        top: 30px;
                        padding: 3px 5px;
                        margin: 0 auto 30px;
                        text-align: center;
                        @include radius($type: border-radius, $value: $timeline-radius);
                        background-color: $timeline-years-background-color;
                        font-weight: normal;
                        color: $timeline-years-color;
                        width: 120px;
                        z-index: 200;
                }

                & dd {
                        position: relative;
                        z-index: 200;
                        & .circ {
                                position: absolute;
                                top: 40px;
                                left: 50%;
                                margin-left: -11px;
                                border: 4px solid $timeline-dotted-border-color;
                                width: 22px;
                                height: 22px;
                                @include radius($type: border-radius, $value: 50%);
                                background-color: $timeline-dotted-color;
                                z-index: 200;
                        }

                        & .time {
                                position: absolute;
                                top: 31px;
                                left: 50%;
                                padding: 10px 20px;
                                width: 100px;
                                display: inline-block;
                                color: $timeline-dotted-color;
                        }

                        & .events {
                                position: relative;
                                margin-top: 31px;
                                padding: 10px 10px 0;
                                @include radius($type: border-radius, $value: $timeline-radius);
                                background-color: $white;
                                width: 47%;

                                &:before {
                                       position: absolute;
                                       top: 12px;
                                       width: 0;
                                       height: 0;
                                       content: '';
                                       border-width: 6px;
                                       border-style: solid;
                                }

                                & .events-object {
                                        margin-right: 10px;
                                }

                                & .events-body {
                                        overflow: hidden;
                                        zoom: 1;

                                        & .events-heading {
                                                margin: 0 0 10px;
                                                font-size: 14px;
                                        }
                                }
                        }

                        &.pos-right {

                              & .time {
                                      margin-left: -100px;
                                  text-align: right;
                              }
                              & .events {
                                      float: right;

                                      &:before {
                                              left: -12px;
                                              border-color: transparent $white transparent transparent;
                                      }
                              }
                        }
                        &.pos-left {
                              & .time {
                                      margin-left: 0;
                                  text-align: left;
                              }
                              & .events {
                                      float: left;
                                      &:before {
                                              right: -12px;
                                              border-color: transparent transparent transparent $white;
                                      }
                              }
                        }
                }
        }
}
@media screen and (max-width: 767px) {
              .timeline dl {
                      &:before {
                              left: 60px;
                      }
                      & dt {
                              margin: 0 0 30px;
                      }
                      & dd {
                              & .circ {
                                      left: 60px;
                              }
                              & .time {
                                      left: 0;
                              }
                              &.pos-left {
                                      & .time {
                                              margin-left: 0;
                                              padding: 10px 0;
                                              text-align: left;
                                      }
                                      & .events {
                                              float: right;
                                              width: 84%;
                                              &:before {
                                                      left: -12px;
                                                      border-color: transparent $white transparent transparent;
                                              }
                                      }
                              }
                              &.pos-right {
                                      & .time {
                                              margin-left: 0;
                                              padding: 10px 0;
                                              text-align: left;
                                      }
                                      & .events {
                                              float: right;
                                              width: 84%;
                                      }
                              }
                      }
              }
}

}