iflyket/web/css/timeline-component.css

.metro_tmtimeline {
    margin: 30px 0 0 0;
    padding: 0;
    list-style: none;
    position: relative;
}

/* The line */
.metro_tmtimeline:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #E5E5E5;
    left: 20%;
    margin-left: -6px;
}

/* The date/time */
.metro_tmtimeline > li {
    position: relative;
}


/*----green-----*/
.metro_tmtimeline > li.green .metro_tmicon, .metro_tmtimeline > li.green .metro_tmlabel {
    background: #74B749;
}

.metro_tmtimeline > li.green:nth-child(2n+1) .metro_tmlabel:after {
    border-right-color: #74B749;
}

.metro_tmtimeline > li.green .time {
    color: #74B749;
}
/*----purple----*/
.metro_tmtimeline > li.purple .metro_tmicon, .metro_tmtimeline > li.purple .metro_tmlabel {
    background: #9D4A9C;
}

.metro_tmtimeline > li.purple:nth-child(2n+1) .metro_tmlabel:after, .metro_tmtimeline > li.purple .metro_tmlabel:after {
    border-right-color: #9D4A9C;
    border-color: transparent #9D4A9C transparent transparent;
}

.metro_tmtimeline > li.purple .time {
    color: #9D4A9C;
}

/*----red-----*/
.metro_tmtimeline > li.red .metro_tmicon, .metro_tmtimeline > li.red .metro_tmlabel {
    background: #DE577B;
}

.metro_tmtimeline > li.red:nth-child(2n+1) .metro_tmlabel:after {
    border-right-color: #DE577B;
}

.metro_tmtimeline > li.red .time {
    color: #DE577B;
}
/*--------*/

/*-----yellow----*/
.metro_tmtimeline > li.yellow .metro_tmicon, .metro_tmtimeline > li.yellow .metro_tmlabel {
    background: #FFB400;
}

.metro_tmtimeline > li.yellow:nth-child(2n+1) .metro_tmlabel:after, .metro_tmtimeline > li.yellow .metro_tmlabel:after {
    border-right-color: #FFB400;
    border-color: transparent #FFB400 transparent transparent ;
}

.metro_tmtimeline > li.yellow .time {
    color: #FFB400;
}

/*----blue----*/

.metro_tmtimeline > li.blue .metro_tmicon, .metro_tmtimeline > li.blue .metro_tmlabel {
    background: #5AA9ED;
}

.metro_tmtimeline > li.blue:nth-child(2n+1) .metro_tmlabel:after {
    border-right-color: #5AA9ED;
}

.metro_tmtimeline > li.blue .time {
    color: #5AA9ED;
}
/*----orange----*/

.metro_tmtimeline > li.orange .metro_tmicon, .metro_tmtimeline > li.orange .metro_tmlabel {
    background: #F37B53;
}

.metro_tmtimeline > li.orange:nth-child(2n+1) .metro_tmlabel:after, .metro_tmtimeline > li.orange .metro_tmlabel:after {
    border-right-color: #F37B53;
    border-color: transparent #F37B53 transparent transparent ;
}

.metro_tmtimeline > li.orange .time {
    color: #F37B53;
}

/*----gray----*/

.metro_tmtimeline > li.gray .metro_tmicon, .metro_tmtimeline > li.gray .metro_tmlabel {
    background: #cecece;
}

.metro_tmtimeline > li.gray:nth-child(2n+1) .metro_tmlabel:after {
    border-right-color: #cecece;
}

.metro_tmtimeline > li.gray .time {
    color: #cecece;
}
/*--------*/

/*----Timeline box shadow-----*/
.metro_tmtimeline > li.green .metro_tmicon {
    box-shadow: 0 0 0 5px rgba(116,183,73, 0.3);
}
.metro_tmtimeline > li.purple .metro_tmicon {
    box-shadow: 0 0 0 5px rgba(157,74,156, 0.3);
}
.metro_tmtimeline > li.red .metro_tmicon {
    box-shadow: 0 0 0 5px rgba(222,87,123, 0.3);
}
.metro_tmtimeline > li.yellow .metro_tmicon {
    box-shadow: 0 0 0 5px rgba(255,180,0, 0.3);
}
.metro_tmtimeline > li.blue .metro_tmicon {
    box-shadow: 0 0 0 5px rgba(90,169,237, 0.3);
}
.metro_tmtimeline > li.orange .metro_tmicon {
    box-shadow: 0 0 0 5px rgba(243,128,83, 0.3);
}
.metro_tmtimeline > li.gray .metro_tmicon {
    box-shadow: 0 0 0 5px rgba(192,192,192, 0.3);
}
/*--------*/

.metro_tmtimeline > li .metro_tmtime {
    display: block;
    width: 15%;
    padding-right: 100px;
    position: absolute;
}

.metro_tmtimeline > li .metro_tmtime span {
    display: block;
    text-align: right;
}

.metro_tmtimeline > li .metro_tmtime span:first-child {
    font-size: 0.9em;
    color: #bdd0db;
}

.metro_tmtimeline > li .metro_tmtime span:last-child {
    font-size: 2.9em;
}

.metro_tmtime span {
    margin-bottom: 5px;
}
.metro_tmtime span.date {
    margin-top: -15px;
}

.metro_tmtime span.time {}

/* Right content */
.metro_tmtimeline > li .metro_tmlabel {
    margin: 0 0 15px 25%;
    /*background: #3594cb;*/
    color: #fff;
    padding: 2em;
    font-size: 1.2em;
    font-weight: 300;
    line-height: 1.4;
    position: relative;
    border-radius: 5px;
}

.metro_tmtimeline > li .metro_tmlabel h2 {
    margin-top: 0px;
    padding: 0 0 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.4);
}

/* The triangle */
.metro_tmtimeline > li .metro_tmlabel:after {
    right: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    /*border-right-color: #3594cb;*/
    border-width: 10px;
    top: 10px;
}

.metro_tmtimeline > li:nth-child(odd) .metro_tmlabel:after {
    /*border-right-color: #6cbfee;*/
}

/* The icons */
.metro_tmtimeline > li .metro_tmicon {
    width: 40px;
    height: 40px;
    font-family: 'ecoico';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 1.4em;
    line-height: 40px;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    color: #fff;
    /*background: #46a4da;*/
    border-radius: 50% !important;
    /*box-shadow: 0 0 0 5px #E5E5E5;*/
    text-align: center;
    left: 20%;
    top: 0;
    margin: 0 0 0 -25px;
}

.metro_tmicon-phone:before {
    content: "\e000";
}

.metro_tmicon-screen:before {
    content: "\e001";
}

.metro_tmicon-mail:before {
    content: "\e002";
}

.metro_tmicon-earth:before {
    content: "\e003";
}

/* Example Media Queries */
@media screen and (max-width: 65.375em) {

    .metro_tmtimeline > li .metro_tmtime span:last-child {
        font-size: 1.5em;
    }
    .metro_tmtime span.date {
        margin-top: 0px;
    }
}

@media screen and (max-width: 47.2em) {
    .metro_tmtimeline:before {
        display: none;
    }

    .metro_tmtimeline > li .metro_tmtime {
        width: 100%;
        position: relative;
        padding: 0 0 20px 0;
    }

    .metro_tmtimeline > li .metro_tmtime span {
        text-align: left;
    }

    .metro_tmtimeline > li .metro_tmlabel {
        margin: 0 0 30px 0;
        padding: 1em;
        font-weight: 400;
        font-size: 95%;
    }

    .metro_tmtimeline > li.purple .metro_tmlabel:after {
        right: auto;
        left: 20px;
        border-right-color: transparent;
        border-bottom-color: #9D4A9C !important;
        top: -20px;
    }

    .metro_tmtimeline > li.green .metro_tmlabel:after {
        right: auto;
        left: 20px;
        border-right-color: transparent;
        border-bottom-color: #74B749 !important;
        top: -20px;
    }

    .metro_tmtimeline > li.green:nth-child(2n+1) .metro_tmlabel:after,
    .metro_tmtimeline > li.red:nth-child(2n+1) .metro_tmlabel:after,
    .metro_tmtimeline > li.blue:nth-child(2n+1) .metro_tmlabel:after,
    .metro_tmtimeline > li.gray:nth-child(2n+1) .metro_tmlabel:after{
        border-right-color: transparent;
    }

    .metro_tmtimeline > li.red .metro_tmlabel:after {
        right: auto;
        left: 20px;
        border-right-color: transparent;
        border-bottom-color: #DE577B !important;
        top: -20px;
    }

    .metro_tmtimeline > li.yellow .metro_tmlabel:after {
        right: auto;
        left: 20px;
        border-right-color: transparent;
        border-bottom-color: #FFB400 !important;
        top: -20px;
    }

    .metro_tmtimeline > li.blue .metro_tmlabel:after {
        right: auto;
        left: 20px;
        border-right-color: transparent;
        border-bottom-color: #5AA9ED !important;
        top: -20px;
    }

    .metro_tmtimeline > li.orange .metro_tmlabel:after {
        right: auto;
        left: 20px;
        border-right-color: transparent;
        border-bottom-color: #F37B53 !important;
        top: -20px;
    }

    .metro_tmtimeline > li.gray .metro_tmlabel:after {
        right: auto;
        left: 20px;
        border-right-color: transparent;
        border-bottom-color: #CECECE !important;
        top: -20px;
    }



    .metro_tmtimeline > li .metro_tmicon {
        position: relative;
        float: right;
        left: auto;
        margin: -55px 5px 0 0px;
    }

    .metro_tmtime span.date {
        margin-top: 0px;
    }
}