/* Media section s */
.mediacontent {
    position: absolute;
    padding: 0 0;
    left: 100vw;  
    top: 1.5vh;
    width:100%;
    height: 100%;
    transform: translateZ(0);
}
.mediasectionheadername {
    display:block;
    margin: 0;
    margin-top:20px;
    padding: 0 0 0 0;
    text-align: left;
    font-family: 'Lato', sans-serif;
    font-weight:100;
    font-size:40px;
    z-index:1000;
}
.mediasectionheader {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    font-family: 'Lato', sans-serif;
    font-weight:100;
    font-size:30px;
    text-align: left;
    z-index:1000;
}

.questions {
    
    font-size:12px;
    color:#666;
    font-weight:300;
    position:absolute;
    top:120px;
    left:0px;
    z-index:5;
    text-align:left;

    pointer-events: none;
}
.question { 
    cursor: pointer;
    padding:2px;
    display: inline-block;
    pointer-events: all;
    background-color:rgba(255,255,255,0.8);
        -webkit-transition: font 0.8s;
    -moz-transition: font 0.8s;
    transition: font 0.8s;
    
}
.question:hover {
    color:#444;
    font-weight:400;
}
.expandedquestion {
    font-weight:400;
    font-size:16px;
    width:400px;
}
.answer {
    width:800px;
    font-size:14px;
    padding-left:10px;
    padding-right:10px;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    max-height: 0px;
    overflow: hidden;
    opacity:0;
    -webkit-transition: max-height 0.8s, padding 0.8s, opacity 0.8s;
    -moz-transition: max-height 0.8s, padding 0.8s, opacity 0.8s;
    transition: max-height 0.8s, padding 0.8s, opacity 0.8s;
    pointer-events: all;
    background:rgba(255,255,255,0.75);
    text-align: justify;
}
.expandedanswer {
    max-height: 500px;
    width: 800px;
    overflow: scroll;
    padding:10px 10px 10px 10px;
    opacity:1;
}
.answerfooter {
    font-size:11px;
}
.headshot {
    display:inline-block;
    border-radius: 50%;
    background-color:#fff;
    border-style: none;
    height:200px;
    width:200px;
    float:right;
    margin-left:20px;
}
.CVlink {
    background-color:#777;
    color:#fff;
    padding-left:4px;
    padding-right:4px;
    padding-bottom:1px;
    display:inline-block;
}
.CVlink a:link { color:#fff;}
.CVlink a:visited, .CVlink a:hover, .CVlink a:active {color: #fff;}

.CVlink a:visited {
    background-color:#777;
    color:#fff;
    padding-left:4px;
    padding-right:4px;
    padding-bottom:1px;
}
.sortselector {
    float:right;
    font-size:14px;
    color:#999;
    font-weight:300;
    position:absolute;
    top:34px;
    right:0px;
    padding: 10px;
    z-index:1000;
}
.sort {
    display:inline;
    cursor: pointer; 
    color:#777;
    padding-left:4px;
    padding-right:4px;
    padding-bottom:1px;
}
.sort:hover { 
    color:#333;
}

.sort_selected { 
    background-color:#777;
    color:#fff;
}
.sort_selected:hover { 
    background-color:#555;
    color:#fff;
}
.media-graphcontainer {
    -webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.1)));

}
.media-graph-databox {
    min-height: 300px;
    max-height:700px;
    height:65vh;
    width:85%;
    margin: 0 auto;
    position:relative;
}
.media-graph-xaxis {
    width:100%;
    height:70px;
    position:relative;
    -webkit-transition: opacity 0.8s;
    -moz-transition: opacity 0.8s;
    transition: opacity 0.8s;
    opacity:0;
    z-index:1;

}
.axisvisible {
    -webkit-transition: opacity 0.8s;
    -moz-transition: opacity 0.8s;
    transition: opacity 0.8s;
    opacity:1;
}
.media-graph-xaxis-line {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:20px;
    padding-left:10px;
    padding-right:10px;
    padding-top:10px;
    padding-bottom:10px;
    -webkit-transition: opacity 0.8s;
    -moz-transition: opacity 0.8s;
    transition: opacity 0.8s;
    opacity:1;
}
.media-graph-xaxis-line-hidden {
    opacity:0;
}

.media-graph-xaxis-labeling {
    width:100%;
    height:40px;
    position:absolute;
    top:25px;
    left:0px;
    color:#777;
    font-weight:300;
}
.labellingbox{
    width:100%;
    height:100%;
    position:relative;
}

.xaxis-leftlabel {
    width:33%;
    height:100%;
    float:left;
}
.xaxis-rightlabel {
    width:33%;
    height:100%;
    text-align:right;
    float:right;
}
.xaxis-fifths-1 {
    width:20%;
    left:0%;
    text-align:center;
    position:absolute;
    top:0px;
}
.xaxis-fifths-2 {
    width:20%;
    left:20%;
    text-align:center;
    position:absolute;
    top:0px;
}
.xaxis-fifths-3 {
    width:20%;
    left:40%;
    text-align:center;
    position:absolute;
    top:0px;
}
.xaxis-fifths-4 {
    width:20%;
    left:60%;
    text-align:center;
    position:absolute;
    top:0px;
}
.xaxis-fifths-5 {
    width:20%;
    left:80%;
    text-align:center;
    position:absolute;
    top:0px;
}
.xaxis-category {
    width:100%;
    height:100%;
    text-align:center;
    display:block;
    position:absolute;
    top:20px;
    font-weight: 400;
    pointer-events: none;
}

.mediaNode { 
    position:absolute;
    background-color:#fff;
    display: table-cell;
    vertical-align: middle;
    background: none;
    transform: translateZ(0);
    pointer-events: none;
    z-index:10;
}
.topNode {
    z-index:1000;
}
.mediaNodeImg {
    display:inline-block;
    border-radius: 50%;
    background-color:#fff;
    border-style: solid;
    border-width: 1px;
    border-color: #777;
    background-color:#fff;
    cursor:pointer;
    pointer-events:all;

}
.mediaNodeTitle {
    display:inline-block;
    font-size:13px;
    color:#777;
    margin-left:5px;
    background: none;
    position:absolute;
    pointer-events: none;
}
.titleSelected{
    background-color:rgba(255,255,255,0.9);
}
.mediaNodeDescription {
    display:inline-block;
    max-width:200px;
    font-size:11px;
    color:#999;
    margin-left:5px;
    background: none;
    position:absolute;
    pointer-events: none;
    opacity:0;
    background-color:rgba(255,255,255,0.8);
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    transition: opacity 0.3s;
}
.descVisible {
    opacity:1;
}