@charset "UTF-8";
@import"https://fonts.googleapis.com/css?family=Roboto:100,400,300,300italic,400italic,500,700|Indie+Flower:400|";.withripple {
    position: relative
}
@media(min-width: 768px) {
    .ms-timeline {
        list-style-type:none;
        border-left: solid 6px #e0e0e0;
        padding: 0;
        margin-left: 120px
    }

    .ms-timeline .ms-timeline-item {
        position: relative;
        margin-bottom: 3rem
    }

    .ms-timeline .ms-timeline-item .card {
        margin-left: 20px;
        -webkit-transition: box-shadow ease .5s;
        transition: box-shadow ease .5s
    }

    .ms-timeline .ms-timeline-item .ms-timeline-date .ms-timeline-point {
        position: absolute;
        left: -11px;
        top: 20px;
        border-radius: 50%;
        display: inline-block;
        height: 16px;
        width: 16px;
        background-color: #03a9f4;
        border: solid 3px #e0e0e0;
        -webkit-transition: all ease .5s;
        transition: all ease .5s
    }

    .ms-timeline .ms-timeline-item .ms-timeline-date .ms-timeline-point-img {
        width: 75px;
        height: 75px;
        left: -90px;
        top: 70px;
        border: solid 3px #e0e0e0;
        -webkit-transition: all ease .5s;
        transition: all ease .5s;
        position: absolute;
        border-radius: 50%
    }

    .ms-timeline .ms-timeline-item .ms-timeline-date .ms-timeline-point-img img {
        width: 100%;
        border-radius: 100%
    }

    .ms-timeline .ms-timeline-item .ms-timeline-date .timeline-time {
        position: absolute;
        width: 200px;
        left: -230px;
        text-align: right;
        display: block
    }

    .ms-timeline .ms-timeline-item .ms-timeline-date .timeline-time span {
        display: block;
        font-size: 1rem;
        font-family: Arial,"Microsoft Jhenghei UI","Microsoft JHengHei","·L3n￥??AAe";
    }

    .ms-timeline .ms-timeline-item:hover .ms-timeline-date .ms-timeline-point {
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }

    .ms-timeline .ms-timeline-item:hover .card {
        box-shadow: 0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2)
    }
}

.ms-timeline-left {
    list-style-type: none;
    margin-left: 300px;
    border-left: solid 3px #03a9f4;
    position: relative;
    padding-left: 0
}

.ms-timeline-left .ms-timeline-left-item {
    position: relative;
    padding-left: 30px;
    margin-bottom: 50px;
    margin-bottom: 5rem
}

.ms-timeline-left .ms-timeline-left-item:before {
    content: "";
    display: block;
    position: absolute;
    border-radius: 100%;
    border: solid 3px #03a9f4;
    background-color: #fff;
    height: 21px;
    width: 21px;
    left: -12px;
    top: 0
}

.ms-timeline-left .ms-timeline-left-item:after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 100%;
    background-color: #03a9f4;
    height: 9px;
    width: 9px;
    left: -6px;
    top: 6px;
    -webkit-transition: all ease .2s;
    transition: all ease .2s
}

.ms-timeline-left .ms-timeline-left-item:hover:after {
    background-color: #005eb8
}

.ms-timeline-left .ms-timeline-left-item .ms-timeline-left-city {
    font-size: 13px;
    font-size: 1.3rem;
    color: #9e9e9e;
    position: absolute;
    right: 0;
    top: -5px
}

.ms-timeline-left .ms-timeline-left-item .ms-timeline-left-city:before {
    font-family: Material-Design-Iconic-Font;
    content: "\f1ab";
    margin-right: 5px
}

.ms-timeline-left .ms-timeline-left-item .ms-timeline-left-left {
    float: left;
    margin-left: -300px;
    margin-top: -30px
}

.ms-timeline-left .ms-timeline-left-item .ms-timeline-left-left h4 {
    margin: 0
}

.ms-timeline-left .ms-timeline-left-item .ms-timeline-left-left .ms-timeline-left-time {
    font-size: 12px;
    font-size: 1.2rem
}

@media(max-width: 767px) {
    .ms-timeline-left {
        margin-left:0
    }

    .ms-timeline-left .ms-timeline-left-item .ms-timeline-left-left {
        float: none;
        margin-left: 0;
        margin-top: 0
    }

    .ms-timeline {
        list-style-type: none;
        border-left: solid 6px #e0e0e0;
        padding: 0 0 0 20px
    }

    .ms-timeline .ms-timeline-item {
        margin-bottom: 3rem;
        position: relative
    }

    .ms-timeline .ms-timeline-item .ms-timeline-date {
        margin-bottom: 1rem
    }

    .ms-timeline .ms-timeline-item .ms-timeline-date .ms-timeline-point {
        position: absolute;
        left: -30px;
        top: 7px;
        border-radius: 50%;
        display: inline-block;
        height: 16px;
        width: 16px;
        background-color: #03a9f4;
        border: solid 3px #e0e0e0;
        -webkit-transition: all ease .5s;
        transition: all ease .5s
    }

    .ms-timeline .ms-timeline-item .ms-timeline-date .ms-timeline-point-img {
        width: 50px;
        height: 50px;
        left: 0;
        top: 70px;
        border: solid 3px #e0e0e0;
        -webkit-transition: all ease .5s;
        transition: all ease .5s;
        border-radius: 50%;
        margin-top: -10px
    }

    .ms-timeline .ms-timeline-item .ms-timeline-date .ms-timeline-point-img img {
        width: 100%;
        border-radius: 100%
    }

    .ms-timeline .ms-timeline-item .ms-timeline-date .timeline-time {
        font-size: 2rem
    }
}

@media(min-width: 768px) {
    .timeline-center {
        position:relative;
        overflow: hidden
    }

    .timeline-center:after {
        display: block;
        content: "";
        height: 100%;
        width: 6px;
        z-index: -1;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        top: 0;
        bottom: 0;
        background-color: #e0e0e0;
        position: absolute
    }

    .timeline-center>[class*=col-] .left,.timeline-center>[class*=col-] .right {
        position: relative;
        margin-bottom: 4rem
    }

    .timeline-center>[class*=col-] .left:before,.timeline-center>[class*=col-] .right:before {
        content: "";
        position: absolute;
        right: -48px;
        z-index: 2;
        top: 15px;
        border-radius: 50%;
        display: inline-block;
        height: 16px;
        width: 16px;
        background-color: #03a9f4;
        border: solid 3px #e0e0e0;
        -webkit-transition: all ease .5s;
        transition: all ease .5s
    }

    .timeline-center>[class*=col-] .left:hover:before,.timeline-center>[class*=col-] .right:hover:before {
        -webkit-transform: scale(1.5);
        transform: scale(1.5)
    }

    .timeline-center>[class*=col-] .left {
        margin-right: 25px
    }

    .timeline-center>[class*=col-] .left:after {
        display: block;
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        top: 10px;
        right: -35px;
        border-left: solid 15px #03a9f4;
        border-right: solid 20px transparent;
        border-top: solid 13px transparent;
        border-bottom: solid 13px transparent
    }

    .timeline-center>[class*=col-] .left.card-light:after {
        border-left-color: #f5f5f5
    }

    .timeline-center>[class*=col-] .left.card-light:before {
        background-color: #f5f5f5
    }

    .timeline-center>[class*=col-] .left.card-dark:after {
        border-left-color: #005eb8
    }

    .timeline-center>[class*=col-] .left.card-dark:before {
        background-color: #005eb8
    }

    .timeline-center>[class*=col-] .left.card-primary:after {
        border-left-color: #03a9f4
    }

    .timeline-center>[class*=col-] .left.card-primary:before {
        background-color: #03a9f4
    }

    .timeline-center>[class*=col-] .left.card-info:after {
        border-left-color: #00A3A1
    }

    .timeline-center>[class*=col-] .left.card-info:before {
        background-color: #00A3A1
    }

    .timeline-center>[class*=col-] .left.card-royal:after {
        border-left-color: #9c27b0
    }

    .timeline-center>[class*=col-] .left.card-royal:before {
        background-color: #9c27b0
    }

    .timeline-center>[class*=col-] .left.card-warning:after {
        border-left-color: #ff9800
    }

    .timeline-center>[class*=col-] .left.card-warning:before {
        background-color: #ff9800
    }

    .timeline-center>[class*=col-] .left.card-danger:after {
        border-left-color: #f44336
    }

    .timeline-center>[class*=col-] .left.card-danger:before {
        background-color: #f44336
    }

    .timeline-center>[class*=col-] .left.card-success:after {
        border-left-color: #4caf50
    }

    .timeline-center>[class*=col-] .left.card-success:before {
        background-color: #4caf50
    }

    .timeline-center>[class*=col-] .left.card-light-inverse:after {
        border-left-color: #f5f5f5
    }

    .timeline-center>[class*=col-] .left.card-light-inverse:before {
        background-color: #f5f5f5
    }

    .timeline-center>[class*=col-] .left.card-dark-inverse:after {
        border-left-color: #005eb8
    }

    .timeline-center>[class*=col-] .left.card-dark-inverse:before {
        background-color: #005eb8
    }

    .timeline-center>[class*=col-] .left.card-primary-inverse:after {
        border-left-color: #03a9f4
    }

    .timeline-center>[class*=col-] .left.card-primary-inverse:before {
        background-color: #03a9f4
    }

    .timeline-center>[class*=col-] .left.card-info-inverse:after {
        border-left-color: #00A3A1
    }

    .timeline-center>[class*=col-] .left.card-info-inverse:before {
        background-color: #00A3A1
    }

    .timeline-center>[class*=col-] .left.card-royal-inverse:after {
        border-left-color: #9c27b0
    }

    .timeline-center>[class*=col-] .left.card-royal-inverse:before {
        background-color: #9c27b0
    }

    .timeline-center>[class*=col-] .left.card-warning-inverse:after {
        border-left-color: #ff9800
    }

    .timeline-center>[class*=col-] .left.card-warning-inverse:before {
        background-color: #ff9800
    }

    .timeline-center>[class*=col-] .left.card-danger-inverse:after {
        border-left-color: #f44336
    }

    .timeline-center>[class*=col-] .left.card-danger-inverse:before {
        background-color: #f44336
    }

    .timeline-center>[class*=col-] .left.card-success-inverse:after {
        border-left-color: #4caf50
    }

    .timeline-center>[class*=col-] .left.card-success-inverse:before {
        background-color: #4caf50
    }

    .timeline-center>[class*=col-] .right {
        margin-left: 25px
    }

    .timeline-center>[class*=col-] .right:first-child {
        margin-top: 6rem
    }

    .timeline-center>[class*=col-] .right:before {
        left: -48px;
        right: auto
    }

    .timeline-center>[class*=col-] .right:after {
        display: block;
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        top: 10px;
        left: -35px;
        border-right: solid 15px #03a9f4;
        border-left: solid 20px transparent;
        border-top: solid 13px transparent;
        border-bottom: solid 13px transparent
    }

    .timeline-center>[class*=col-] .right.card-light:after {
        border-right-color: #f5f5f5
    }

    .timeline-center>[class*=col-] .right.card-light:before {
        background-color: #f5f5f5
    }

    .timeline-center>[class*=col-] .right.card-dark:after {
        border-right-color: #005eb8
    }

    .timeline-center>[class*=col-] .right.card-dark:before {
        background-color: #005eb8
    }

    .timeline-center>[class*=col-] .right.card-primary:after {
        border-right-color: #03a9f4
    }

    .timeline-center>[class*=col-] .right.card-primary:before {
        background-color: #03a9f4
    }

    .timeline-center>[class*=col-] .right.card-info:after {
        border-right-color: #00A3A1
    }

    .timeline-center>[class*=col-] .right.card-info:before {
        background-color: #00A3A1
    }

    .timeline-center>[class*=col-] .right.card-royal:after {
        border-right-color: #9c27b0
    }

    .timeline-center>[class*=col-] .right.card-royal:before {
        background-color: #9c27b0
    }

    .timeline-center>[class*=col-] .right.card-warning:after {
        border-right-color: #ff9800
    }

    .timeline-center>[class*=col-] .right.card-warning:before {
        background-color: #ff9800
    }

    .timeline-center>[class*=col-] .right.card-danger:after {
        border-right-color: #f44336
    }

    .timeline-center>[class*=col-] .right.card-danger:before {
        background-color: #f44336
    }

    .timeline-center>[class*=col-] .right.card-success:after {
        border-right-color: #4caf50
    }

    .timeline-center>[class*=col-] .right.card-success:before {
        background-color: #4caf50
    }

    .timeline-center>[class*=col-] .right.card-light-inverse:after {
        border-right-color: #f5f5f5
    }

    .timeline-center>[class*=col-] .right.card-light-inverse:before {
        background-color: #f5f5f5
    }

    .timeline-center>[class*=col-] .right.card-dark-inverse:after {
        border-right-color: #005eb8
    }

    .timeline-center>[class*=col-] .right.card-dark-inverse:before {
        background-color: #005eb8
    }

    .timeline-center>[class*=col-] .right.card-primary-inverse:after {
        border-right-color: #03a9f4
    }

    .timeline-center>[class*=col-] .right.card-primary-inverse:before {
        background-color: #03a9f4
    }

    .timeline-center>[class*=col-] .right.card-info-inverse:after {
        border-right-color: #00A3A1
    }

    .timeline-center>[class*=col-] .right.card-info-inverse:before {
        background-color: #00A3A1
    }

    .timeline-center>[class*=col-] .right.card-royal-inverse:after {
        border-right-color: #9c27b0
    }

    .timeline-center>[class*=col-] .right.card-royal-inverse:before {
        background-color: #9c27b0
    }

    .timeline-center>[class*=col-] .right.card-warning-inverse:after {
        border-right-color: #ff9800
    }

    .timeline-center>[class*=col-] .right.card-warning-inverse:before {
        background-color: #ff9800
    }

    .timeline-center>[class*=col-] .right.card-danger-inverse:after {
        border-right-color: #f44336
    }

    .timeline-center>[class*=col-] .right.card-danger-inverse:before {
        background-color: #f44336
    }

    .timeline-center>[class*=col-] .right.card-success-inverse:after {
        border-right-color: #4caf50
    }

    .timeline-center>[class*=col-] .right.card-success-inverse:before {
        background-color: #4caf50
    }
}