.img-circle
{
    border-radius: 55%;
     height: 200px;
}


body
{
    padding-top: 10px;
    padding-bottom: 30px;
    /*Backgroud generated from http://angrytools.com/gradient/image.php*/
background: -moz-linear-gradient(90deg, rgba(247,255,255,1) 0%, rgba(206,251,251,1) 4%, rgba(144,194,215,1) 10%, rgba(37,152,170,1) 19%, rgba(5,100,162,1) 27%, rgba(7,59,130,1) 36%, rgba(6,39,85,1) 45%, rgba(0,24,55,1) 53%, rgba(1,13,30,1) 63%, rgba(0,1,15,1) 76%, rgba(0,1,15,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(247,255,255,1) 0%, rgba(206,251,251,1) 4%, rgba(144,194,215,1) 10%, rgba(37,152,170,1) 19%, rgba(5,100,162,1) 27%, rgba(7,59,130,1) 36%, rgba(6,39,85,1) 45%, rgba(0,24,55,1) 53%, rgba(1,13,30,1) 63%, rgba(0,1,15,1) 76%, rgba(0,1,15,1) 100%);
background: -o-linear-gradient(90deg, rgba(247,255,255,1) 0%, rgba(206,251,251,1) 4%, rgba(144,194,215,1) 10%, rgba(37,152,170,1) 19%, rgba(5,100,162,1) 27%, rgba(7,59,130,1) 36%, rgba(6,39,85,1) 45%, rgba(0,24,55,1) 53%, rgba(1,13,30,1) 63%, rgba(0,1,15,1) 76%, rgba(0,1,15,1) 100%);
background: -ms-linear-gradient(90deg, rgba(247,255,255,1) 0%, rgba(206,251,251,1) 4%, rgba(144,194,215,1) 10%, rgba(37,152,170,1) 19%, rgba(5,100,162,1) 27%, rgba(7,59,130,1) 36%, rgba(6,39,85,1) 45%, rgba(0,24,55,1) 53%, rgba(1,13,30,1) 63%, rgba(0,1,15,1) 76%, rgba(0,1,15,1) 100%);
background: linear-gradient(0deg, rgba(247,255,255,1) 0%, rgba(206,251,251,1) 4%, rgba(144,194,215,1) 10%, rgba(37,152,170,1) 19%, rgba(5,100,162,1) 27%, rgba(7,59,130,1) 36%, rgba(6,39,85,1) 45%, rgba(0,24,55,1) 53%, rgba(1,13,30,1) 63%, rgba(0,1,15,1) 76%, rgba(0,1,15,1) 100%);
    background-attachment: fixed;
}

.section-container
{

    text-align:center;
    color:#FFF;
    font-weight:bold;
}

.header-section
{
    /*background-image : url("../images/header_bg.jpg");
    background-position:center;*/
}

.project-section
{
    /*background-image : url("../images/digital-388075_1280_neg.jpg");
    background-image : url("../images/binary-1327512_1920_light.jpg");
    background-position:center;*/
}

.proj-img:hover
{
    opacity: 0.7;
    cursor: pointer;
}

.modal
{
  text-align: center;
  padding: 0 !important;
  width: 60%;
  margin-left:auto;
  margin-right:auto;
  margin-top: auto;
  margin-bottom: auto;
}
.modal-body > .img-responsive {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.modal-content, #caption
{
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}
@-webkit-keyframes zoom
{
    from {-webkit-transform:scale(0)}
    to {-webkit-transform:scale(1)}
}
@keyframes zoom
{
    from {transform:scale(0)}
    to {transform:scale(1)}
}


/* Project page css */

#proj-page-intro
{
    color: white;
    font-size: 1.3em;
    margin: 20px 0 10px 10px;
}

.proj-pane
{
    background: rgb(87, 155, 196);
}


.proj-title
{
    background: rgba(251, 248, 228, 0.93);
    font-size: 1.5em;
    padding: 5px 15px 5px 15px;
    margin: 0 0 10px;
    color: #b00000;
}

.proj-section-title
{
    font-size: 1.1em;
    color: #c12f2f;
}

.proj-description
{
    background: #f8f4de;
    margin-bottom: 10px;
}

.proj-text-indent
{
    text-indent: 7px;
    margin: 0 0 15px 10px;
    font-size: 0.85em;
}

.proj-labels
{
    margin-left: 20px;
}


.proj-footer
{
    margin-bottom: 2px;
    background: #f8f4de;
}

.proj_back_to_top
{
    color: rgb(175, 13, 13);
    margin-left: 10px;
    text-decoration: underline;
    font-size: 0.9em;
}


/*FROM: https://tympanus.net/codrops/2013/05/02/vertical-timeline/, highly recommended*/
/*timeline*/
.project_list_timeline
{
    padding: 0; /*adjusts the entry with the line of the timeline*/
    list-style: none; /*Remove the ugly bullet points*/
    position: relative; /*Make everything adjust*/
}


/*Send list items to the foreground, line to the background*/
.project_list_timeline > li
{
    position: relative;
}

/* The date/time */
.project_list_timeline > li .proj_date
{
    display: block;
    width: 5%;
    position: absolute;
}

.project_list_timeline > li .proj_date span
{
    display: block;
    text-align: right;
    color: #bdd0db;
    font-size: 2em;
}

.project_list_timeline > li:nth-child(odd) .proj_date span:last-child
{
    color: #6cbfee;
}


/* Right content */
.project_list_timeline > li .timeline_entry
{
    margin: 5% 5% 5% 14%;
    font-size: 1.2em;
    font-weight: 300;
    line-height: 1.4;
    position: relative;
}

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


/* The icons */
.project_list_timeline > li .timeline_node_icon
{
    width: 30px;/*Use in conjunction with margin-left attribute of .project_list_timeline:before*/
    height: 30px;
    font-family: 'ecoico';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    font-size: 1.4em;
    line-height: 30px;
    -webkit-font-smoothing: antialiased;
    position: absolute;
    color: #fff;
    background: #ffff68;
    border-radius: 50%;
    box-shadow: 0 0 0 8px rgba(175, 220, 248, 0.90);;
    text-align: center;
    left: 11%;
    top: 0;
    margin: 0 0 0 -25px;
}

/*timeline line*/
.project_list_timeline:before
{
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    background: rgba(175, 220, 248, 0.25);
    left: 11%;
    margin-left: -15px; /*Use in conjunction with width and height attributes of .project_list_timeline > li .timeline_node_icon*/
}

.fade
{
    margin-left: 15px;
    -webkit-transition: opacity 0.2s;
    opacity: 1;
    font-size: large;
}

 a.proj-link:hover
 {
    text-decoration: underline;
    color: #ffff68;
 }
 a.proj-link
 {
    text-decoration: underline;
    color: #73c8fa;
 }

.toc_form_format
{
    color:#ffff68;
    font-size: 1em;
}

/* CV PAGE CSS */
.experience-header
{
    font-size: 2em;
    position: relative;
    top: 5px;
}

.experience-date
{
    font-size: 1.25em;
    text-align: right;
    /*position: relative;
    top: 20px;*/
}

.experience-section-header
{
    font-size: 1.5em;
}