/********************************************************/
/*                 Page background                      */
/********************************************************/
html, body {
    width: 100%;
}


body, .content {
    background: #34373f;
    color: #dbdbdb;
}

table.table, table.table-responsive, div.row {
    overflow: hidden;
}

/********************************************************/
/*                     Typography                       */
/********************************************************/


a {
    color: #808080;
}

    a:hover, a:focus {
        color: #ffffff;
    }

    a:visited {
        color: #cccccc;
    }

/********************************************************/
/*                        Header                        */
/********************************************************/
.header {
    background: #34373f url(/Content/img/bg_header.jpg);
    background-size: cover;
    background-position: top center;
    margin-bottom: 0;
    padding: 3% 0 5% 0;
}

    .header h4 {
        float: left;
        font-family: "Open sans", Arial;
        color: rgba(255,255,255,.9);
        font-size: 20px;
        font-weight: 500;
        text-align: left;
        text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
        margin-top: 20px;
    }


    .header img.headImage {
        width: 100%;
        height: auto;
        max-width: 400px;
        max-height: 400px;
        display: block;
        resize: both;
        margin-left: 10px;
    }

    .header img.headTitle {
        width: 70%;
        height: auto;
        max-width: 786px;
        max-height: 389px;
        display: block;
        resize: both;
    }



/********************************************************/
/*                 ProjectProgressPlan                   */
/********************************************************/

.projectProgessPlan {
    padding: 10% 0 5% 0;
    box-sizing: padding-box;
}

    .projectProgessPlan .content {
        padding: 5% 8% 0 0;
        font-size: 15px;
        line-height: 150%;
        font-family: "Open sans", Arial;
        font-weight: 600;
    }

        .projectProgessPlan .content table {
            border: none;
            margin-top: 10px;
        }

            .projectProgessPlan .content table td {
                vertical-align: top;
                border: none;
                text-align: left;
                padding: 0 10px;
            }

        .projectProgessPlan .content font {
            font-weight: 200;
            font-size: 13px;
        }

    .projectProgessPlan .title {
        font-size: 35px;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        text-decoration: underline;
    }


    .projectProgessPlan b {
        font-size: 17px;
        font-weight: 800;
    }



/********************************************************/
/*                       Timeline scrollbar                 */
/********************************************************/


.scrollbar {
    float: left;
    height: 550px;
    width: 99%;
    background: #34373f;
    overflow-y: scroll;
    margin-bottom: 25px;
}

.scrollbar-morpheus-den::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-color: #34373f;
    border-radius: 10px;
}

.scrollbar-morpheus-den::-webkit-scrollbar {
    width: 6px;
    background-color: #34373f;
}

.scrollbar-morpheus-den::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#30cfd0), to(#330867));
    background-image: -webkit-linear-gradient(bottom, #30cfd0 0%, #330867 100%);
    background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}




/********************************************************/
/*                       Updates                        */
/********************************************************/

.updates {
    margin-top: 20px;
    position: relative;
}


    .updates .floating_timeline1 {
        height: 3000px;
    }

    .updates .floating_timeline {
        position: relative;
        width: 250px;
        height: auto;
        background: #34373f;
    }

    .updates .floating_timeline_2 {
        position: fixed;
        width: 250px;
        height: auto;
        z-index: 1000;
        top: 0;
        background: #34373f;
    }


    .updates .timeLine {
        font-family: "Open sans", Arial;
        display: block;
        border-left: solid 1px #808080;
        padding: 0 16px;
        margin-bottom: 10px;
        overflow-y: auto !important;
        width: 100%;
    }


        .updates .timeLine div {
            font-weight: 800;
            padding: 10px 0;
        }

        .updates .timeLine a {
            font-size: 15px;
            display: block;
            margin-top: 8px;
            width: 100%;
            padding: 3px;
        }

            .updates .timeLine a:hover, .updates .timeLine a:focus {
                color: #ffffff;
            }

            .updates .timeLine a font {
                font-size: 12px;
                display: block;
            }

            .updates .timeLine a small {
                font-size: 8px;
                margin-left: 8px;
            }


            .updates .timeLine a i.icon_star {
                position: relative;
                background: url(/Content/img/icon_star.png) no-repeat;
                width: 16px;
                height: 16px;
                display: block;
                float: left;
                margin-right: 5px;
                background-size: contain;
            }


    .updates .content_title {
        font-size: 25px;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        width: 100%;
    }

    .updates table {
        border: none;
    }

        .updates table td {
            vertical-align: top;
            border-top: #333;
            text-align: left;
            padding: 15px;
        }

    .updates .content_title font {
        display: block;
    }



    .updates .content_title .company {
        font-size: 17px;
    }

    .updates .content_title i.icon_location {
        background: url(/Content/img/icon_location.jpg) no-repeat;
        width: 20px;
        height: 20px;
        display: block;
        float: left;
        margin-top: 8px;
        background-size: contain;
    }

    .updates .photo img {
        margin: 15px 0 50px 0;
        width: 100%;
        border-radius: 20px;
    }


    .updates .content_title i.icon_star {
        position: relative;
        background: url(/Content/img/icon_star.png) no-repeat;
        width: 32px;
        height: 32px;
        display: block;
        top: 0px;
        left: 0px;
        background-size: contain;
    }

    .updates .content_title .txt_1000miles {
        color: #ffd800;
        font-size: 12px;
        font-weight: normal;
    }



/********************************************************/
/*                      Carousel                        */
/********************************************************/
.carousel-inner .item img {
    width: 100%;
}


/********************************************************/
/*                       Content                        */
/********************************************************/

.content {
    position: relative;
    z-index: 999;
    margin-bottom: 40px;
}

a.goTop {
    display: block;
    right: 0%;
    top: 90%;
    padding: 8px 15px;
    position: fixed;
    background: #151515;
    color: #ffffff;
    text-decoration: none;
    z-index: 1000;
}

/********************************************************/
/*                   Responsiveness                     */
/********************************************************/

@media (max-width: 768px) {
    .header {
        text-align: left;
    }

    
    .header img.headImage {
        width: 80%;
        height: auto;
        max-width: 400px;
        max-height: 400px;
        display: block;
        resize: both;
        margin-left: 10px;
    }

    .header img.headTitle {
        width: 100%;
        height: auto;
        max-width: 786px;
        max-height: 389px;
        display: block;
        resize: both;
    }


        .header h4 {
            float: left;
            font-family: "Open sans", Arial;
            color: rgba(255,255,255,.9);
            font-size: 20px;
            font-weight: 500;
            text-align: left;
            text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.5);
            margin-top: 20px;
        }


        
    .updates .floating_timeline1 {
        height: 700px;
    }

    .updates .floating_timeline {
        position: relative;
        width: 90%;
        height: auto;
        background: #34373f;
    }

    .updates .floating_timeline_2 {
        position: fixed;
        width: 17%;
        height: auto;
        z-index: 1000;
        top: 0;
        background: #34373f;
    }


    .updates .timeLine {
        font-family: "Open sans", Arial;
        display: block;
        border-left: solid 1px #808080;
        padding: 0 16px;
        margin-bottom: 10px;
        overflow-y: auto !important;
        width: 100%;
    }

          .updates  .floating_timeline_small {
                border-left: none;
                padding: 0;
                height:550px;
            }

        .updates .timeLine a {
            font-size: 12px;
            display: block;
            font-weight: 800;
        }

            .updates .timeLine a font {
                font-size: 9px;
                display: block;
                font-weight: 400;
            }

            .updates .timeLine a small {
                font-size: 8px;
                margin-left: 8px;
            }


            .responsive_small_right {
                width: 80%;
                float: right;
            }

    table.table, table.table-responsive, div.row {
        overflow: hidden;
    }



    .updates .content_title font {
        display: block;
        line-height: 100%;
        padding: 10px 0;
    }

    .updates .content_title i.icon_star {
        position: relative;
        background: url(/Content/img/icon_star.png) no-repeat;
        width: 32px;
        height: 32px;
        display: block;
        left: 0px;
        top: 10px;
        background-size: contain;
    }





    .scrollbar {
        float: left;
        height: 650px;
        width: 99%;
        background: #34373f;
        overflow-y: scroll;
        margin-bottom: 25px;
    }

    .scrollbar-morpheus-den::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-color: #34373f;
        border-radius: 10px;
    }

    .scrollbar-morpheus-den::-webkit-scrollbar {
        width: 6px;
        background-color: #34373f;
    }

    .scrollbar-morpheus-den::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        background-image: -webkit-gradient(linear, left bottom, left top, from(#30cfd0), to(#330867));
        background-image: -webkit-linear-gradient(bottom, #30cfd0 0%, #330867 100%);
        background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
    }
}


/*@media (min-width: 992px) {min-width: 992px

    .header {
        text-align: left;
    }

        .header .headImage {
            min-width: 260px;
            min-height: 260px;
            display: block;
            background: url(/Content/img/Joe.jpg) no-repeat;
            background-size: contain;
        }

        .header .headTitle {
            min-width: 490px;
            min-height: 300px;
            display: block;
            background: url(/Content/img/img_headerTitle.png) no-repeat;
            background-size: contain;
        }

    .updates .floating_timeline1 {
        height: auto;
    }

    .updates .floating_timeline, .updates .floating_timeline_2 {
        position: relative;
        width: 100%;
        height: auto;
        background: #34373f;
    }

    .updates .floating_timeline1 .title {
        width: 30%;
        font-size: 26px;
        line-height: 150%;
        font-family: "Open sans", Arial;
        font-weight: 600;
        text-align: right;
        margin-top: 0px;
    }
}


@media (min-width: 482px) {
    .header h4 {
        font-size: 20px;
        text-align: left;
    }
}

@media (min-width: 768px) {
    .header h4 {
        font-size: 20px;
        text-align: left;
    }
}*/