/*-------------media queries-----*/

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 200px) {
        #header_pic{
            background:url('../img/sliderr.jpg')  no-repeat scroll 0% 0% / cover transparent; 
            height:140px;
        }

        #header_pic .jumbotron h1{
            font-size:1.3em;
        }

        #header_pic .jumbotron .lead{
            font-size:1.4em;
        }

        #portfolio .thumbnail{
            width: 20em;
        }
        
    }


    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {
        #header_pic{
            background:url('../img/sliderr.jpg')  no-repeat scroll 0% 0% / cover transparent; 
            height:160px;
        }

        #header_pic .jumbotron h1{
            font-size:1.5em;
        }

        #portfolio .thumbnail{
            width: 20em;
        }
        
    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {
        #header_pic{
            background:url('../img/sliderr.jpg')  no-repeat scroll 0% 0% / cover transparent; 
            height:250px;
        }

        #header_pic .jumbotron h1{
            font-size:2.4em;
        }

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {
        #header_pic{
            background:url('../img/sliderr.jpg')  no-repeat scroll 0% 0% / cover transparent; 
            height:380px;
        }

        #header_pic .jumbotron h1{
            margin-top:1.4em;
            font-size:3.5em;
        }
    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
        #header_pic{
            background:url('../img/sliderr.jpg')  no-repeat scroll 0% 0% / cover transparent; 
            height:480px;
        }

        #header_pic .jumbotron h1{
            margin-top:1.4em;
            font-size:4em;
        }


    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
        #header_pic{
            margin-top:-3em;
            background:url('../img/sliderr.jpg')  no-repeat scroll 0% 0% / cover transparent; 
            height:550px;
        }

        #header_pic .jumbotron h1{
            margin-top:1.5em;
            font-size:5em;
        }

        #header_pic .jumbotron .lead{
            font-size:3em;
        }
    }



/*-------------Timeline-----*/
.exper {
padding: 4em 0em;
}
.timeline-label h4 {
    margin-top: 0;
    font-size: 1.9em;
    color:#55C1E5;
    padding:1em 0em;
    font-weight: 600;
}

.timeline-label p {
    font-size: 1.09em;
    color:#696969;
    padding: 0.5em 0em;
    line-height: 1.7em;
}
.timeline-label
{
	padding: 0em 0em;
}
.timeline .experience {
    position: relative;
    float: left;
    margin-left: 2em;
    padding-left: 4em;
    border-left: 2px solid #ccc;
}

.timeline .experience-info h5 {
    margin-top: 0;
    margin-bottom: 0.333em;
    font-size: 1.1em;
    color:#2C2C2C;
    font-weight: 600;
}

.timeline .experience-info .role {
    font-size: 0.9em;
    color:#323232;
}

.timeline .experience-info p {
    font-size: 0.9em;
    color:#A3A3A3;
    font-weight: 600;
    line-height: 1.7em;
}

.timeline time {
    display: block;
    width: 4.111em;
    color: #ccc;
    text-align: center;
    font-weight: 700;
}

.timeline .experience-img,
.timeline .experience-info,
.timeline .experience-info h5,
.timeline .experience-info .role,
.timeline .experience-info p {
    clear: none;
}

.timeline .experience .circle {
    position: absolute;
    top: 1em;
    left: -0.7em;
    display: block;
    width: 1.222em;
    height: 1.222em;
    border: 3px solid #ccc;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background-color: #F5F5F5;
}

.timeline .experience-img {
    float: left;
    width: 4em;
    height: 4em;
}

.timeline .experience-img img {
    -webkit-border-radius: 25%;
    -moz-border-radius: 25%;
    border-radius: 25%;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
    -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
    width: 100%;
}

.timeline .experience-info {
    margin-left: 5.444em;
}
/*****/