/* ================ The Timeline ================ */

.timeline {
    position: relative;
    width: 660px;
    margin: 0 auto;
    margin-top: 20px;
    padding: 1em 0;
    list-style-type: none;
}

    .timeline:before {
        position: absolute;
        left: 50%;
        top: 0;
        content: ' ';
        display: block;
        width: 6px;
        height: 100%;
        margin-left: -3px;
        background: rgb(80,80,80);
        background: -moz-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(96, 176, 255,1)), color-stop(100%,rgba(125,185,232,1)));
        background: -webkit-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
        background: -o-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
        background: -ms-linear-gradient(top, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
        background: linear-gradient(to bottom, rgba(80,80,80,0) 0%, rgb(80,80,80) 8%, rgb(80,80,80) 92%, rgba(80,80,80,0) 100%);
        z-index: 5;
        z-index: 0;
    }

    .timeline li {
        padding: 1em 0;
    }

        .timeline li:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

.direction-l {
    position: relative;
    width: 300px;
    float: left;
    text-align: right;
}

.direction-r {
    position: relative;
    width: 300px;
    float: right;
}

.flag-wrapper {
    position: relative;
    display: inline-block;
    text-align: center;
}

.flag {
    position: relative;
    display: inline-block;
    background: rgb(248,248,248);
    padding: 8px 20px;
    border-radius: 5px;
    font-weight: 600;
    text-align: left;
    color: #00B8D4;
    color: #00BCD4;
    color: #60B0FF;
    font-family: "Open Sans";
    background-color: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.direction-l .flag {
    -webkit-box-shadow: -1px 1px 2px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
    -moz-box-shadow: -1px 1px 2px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
    box-shadow: -1px 1px 2px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

.direction-r .flag {
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.15), 0 0 1px rgba(0,0,0,0.15);
}

    .direction-l .flag:before,
    .direction-r .flag:before {
        position: absolute;
        top: 50%;
        right: -35px;
        content: ' ';
        display: block;
        width: 12px;
        height: 12px;
        margin-top: -10px;
        background: #fff;
        border-radius: 10px;
        border: 4px solid #60B0FF;
        border: 4px solid #00B8D4;
        z-index: 40;
    }

    .direction-r .flag:before {
        left: -36px;
    }

.direction-l .flag:after {
    content: "";
    position: absolute;
    left: 100%;
    top: 50%;
    height: 0;
    width: 0;
    margin-top: -8px;
    border: solid transparent;
    border-left-color: rgba(255, 255, 255, 0.1);
    border-width: 8px;
    pointer-events: none;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.direction-r .flag:after {
    content: "";
    position: absolute;
    right: 100%;
    top: 50%;
    height: 0;
    width: 0;
    margin-top: -8px;
    border: solid transparent;
    border-right-color: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-width: 8px;
    pointer-events: none;
}

.time-wrapper {
    display: inline;
    line-height: 1em;
    font-size: 0.66666em;
    color: rgb(250,80,80);
    vertical-align: middle;
}

.direction-l .time-wrapper {
    float: left;
}

.direction-r .time-wrapper {
    float: right;
}

.time {
    display: inline-block;
    padding: 4px 6px;
    background: rgb(248,248,248);
}

.desc {
    margin: 1em 0 0 0;
    font-size: 0.77777em;
    /*font-style: italic;*/
    line-height: 1.5em;
    padding: 0;
    font-family: "Open Sans";
}

.timeline-title {
    color: #60B0FF;
    color: #00B8D4;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5em;
    /*font-style: italic;*/
    font-family: "Open Sans";
    margin-top: .75rem;
    margin-bottom: .5rem;
}

.direction-r .desc {
    margin: 1em 0 0 0;
}

/* ================ Timeline Media Queries ================ */

@media screen and (max-width: 660px) {

    .timeline {
        width: 100%;
        padding: 4em 0 1em 0;
    }

        .timeline:before {
            left: .5rem;
            top: 0;
            margin-left: -3px;
        }

        .timeline li {
            padding: 2em 0;
            z-index: 10;
        }

    .direction-l,
    .direction-r {
        float: none;
        /*width: 100%;*/
        text-align: center;
        width: calc(100% - 2rem);
        margin-left: 1.5rem;
    }

    .flag-wrapper {
        text-align: center;
        width: 100%;
    }

    .flag {
        width: 100%;
        position: static;
        z-index: 15;
    }

    .direction-l .flag:before,
    .direction-r .flag:before {
        position: absolute;
        top: 15px;
        left: -14px;
        content: ' ';
        display: block;
        width: 12px;
        height: 12px;
        margin-left: -9px;
        z-index: 10;
    }

    .direction-l .flag:after,
    .direction-r .flag:after {
        content: "";
        position: absolute;
        left: -8px;
        top: 12px;
        height: 0;
        width: 0;
        margin-left: -8px;
        border: solid transparent;
        border-right-color: rgba(255, 255, 255, 0.1);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        border-width: 8px;
        pointer-events: none;
    }

    .time-wrapper {
        display: block;
        position: relative;
        margin: 4px 0 0 0;
        z-index: 14;
    }

    .direction-l .time-wrapper {
        float: none;
    }

    .direction-r .time-wrapper {
        float: none;
    }

    .desc {
        position: relative;
        margin: 1em 0 0 0;
        padding: 1em;
        background: rgba(255, 255, 255, 0.1);
        border-width: 8px;
        pointer-events: none;
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        border-radius: .5rem;
        z-index: 15;
    }

    .direction-l .desc,
    .direction-r .desc {
        position: relative;
        margin: 1em 1em 0 1em;
        padding: 1em;
        z-index: 15;
    }
}

@media screen and (min-width: 400px ?? max-width: 660px) {

    .direction-l .desc,
    .direction-r .desc {
        margin: 1em 4em 0 4em;
    }
}



.gray {
    color: #a5a5a5;
}

.team {
    margin: 40px;
}

.team-member {
    margin: 15px 0;
    padding: 0;
}

    .team-member figure {
        position: relative;
        overflow: hidden;
        padding: 0;
        margin: 0;
        background-color: rgba(255, 255, 255, 0.05);
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        -moz-transition: all .25s ease-out;
        -o-transition: all .25s ease-out;
        -webkit-transition: all .25s ease-out;
        transition: all .25s ease-out;
        border-radius: .5rem;
    }

        .team-member figure img {
            min-width: 100%;
        }

    .team-member figcaption p {
        font-size: 14px;
    }

    .team-member figcaption ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .team-member figcaption ul {
        visibility: visible;
        -webkit-transition: all 0.1s ease-in-out;
        -moz-transition: all 0.1s ease-in-out;
        -o-transition: all 0.1s ease-in-out;
        transition: all 0.1s ease-in-out;
    }

        .team-member figcaption ul li {
            display: inline-block;
            padding: 10px;
        }

    .team-member h4 {
        margin: 10px 0 0;
        padding: 0;
        font-size: 24px;
        margin-top: 12px;
        font-weight: 600;
    }

    .team-member figcaption {
        padding: 25px 25px;
        color: transparent;
        background-color: transparent;
        position: absolute;
        z-index: 996;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0;
        overflow: hidden;
        visibility: hidden;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

    .team-member figure:hover figcaption {
        visibility: visible;
        color: #000d1b;
        font-weight: 500;
        background: rgba(230, 78, 62, 0.9);
        background: rgba(96, 176, 255, 0.9);
        /* Primary color, can be changed via colors.css */

        height: 100%;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }

        .team-member figure:hover figcaption ul li a {
            font-size: 24px;
        }

            .team-member figure:hover figcaption ul li a:hover {
                color: #00BCD4;
                font-size: 24px;
            }

    .team-member figure img {
        -webkit-transform: scale(1) rotate(0) translateY(0);
        -moz-transform: scale(1) rotate(0) translateY(0);
        -o-transform: scale(1) rotate(0) translateY(0);
        -ms-transform: scale(1) rotate(0) translateY(0);
        transform: scale(1) rotate(0) translateY(0);
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }

    .team-member figure:hover img {
        -webkit-transform: scale(1.1) rotate(1deg) translateY(12px);
        -moz-transform: scale(1.1) rotate(1deg) translateY(12px);
        -o-transform: scale(1.1) rotate(1deg) translateY(12px);
        -ms-transform: scale(1.1) rotate(1deg) translateY(12px);
        transform: scale(1.1) rotate(1deg) translateY(12px);
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }