* {
box-sizing: border-box;
font-family:Arial;
}

html {
margin:0;
min-height:100%
}

body {
padding-left:4vw;
padding-right:2vw;
padding-top:2vw;
margin:0;
min-height:100%;
}

.disclaimer {
pointer-events:none;
position:absolute;
top:0;
left:0;
right:0;
height:100%;
vertical-align:middle;
text-align:center;
margin:auto;
line-height:100vh;
font-size:3em;
}

.disclaimerInner {
pointer-events:auto;
width:100%;
height:250px;
background-color:#FF0000;
opacity:0.8;
margin:auto;
display: inline-block;
vertical-align: middle;
line-height:normal;
}

.disclaimerText {
width:100%;
height:250px;
display: inline-block;
vertical-align: middle;
line-height:250px;
color:#FFFFFF;
}

.fullcontainer {
min-height:100%;
}

.clearfix::after {
content: "";
clear:both;
display:table;
}

.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}

.sidebar {
display:flex;
justify-content:center;
/*float:left;
min-width:150px;
max-width:300px;
width:12vw;*/
}

.socialbar {
//float:right;
min-width:180px;
width:14vw;
height:100%
}

#twitter-widget-0 {
max-height:90vh !important;
}

.main {
flex-grow:1;
overflow:auto;
padding-left:2vw;
padding-right:2vw
}



.text {
column-count: 1;
text-align:justify;
}

@media (max-width:800px) {
.text {
column-count:1;
}
}

.divider {

}

.avatarContainer {
position:relative;
min-width:150px;
max-width:300px;
width:12vw;
height:fit-content;
}

.avatarCanvas {
min-width:150px;
min-height:150px;
max-width:300px;
max-height:300px;
width:12vw;
height:12vw;
}

.avatarOverlay {
position:absolute;
bottom:0;
top:0;
left:0;
right:0;
min-width:150px;
min-height:150px;
max-width:300px;
max-height:300px;
height:12vw;
width:12vw;
opacity:0;
transition: .5s ease;
}

.sidebar:hover .avatarOverlay {
opacity:0.5;
}

.cardContainer {
position:relative;
float:left;
width:22%;
margin-left:1.5%;
margin-right:1.5%;
margin-bottom:3%;
}

@media (max-width:2000px) {
.cardContainer {
width:30%
}
}

@media (max-width:1200px) {
.cardContainer {
width:45%
}
}

@media (max-width:700px) {
.cardContainer {
width:90%
}
}

.cardBox {
position:relative;
padding-bottom:75%;
background-color:#FFFFFF;
box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);
}

.cardContentsContainer {
position:absolute;
bottom:0;
top:0;
left:0;
right:0;
white-space:nowrap;
text-align:center;
}

.cardBox:hover {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.cardOverlay {
position:absolute;
bottom:0;
top:0;
left:0;
right:0;
height:100%;
width:100%;
opacity:0;
transition: .5s ease;
background-color:#CCCCCC;
}

.cardBox:hover .cardOverlay {
opacity:0.25;
}

.cardTitle {
font-family:"Lucida Console", Arial, Helvetica, sans-serif;
position:absolute;
bottom:0;
right:0;
margin-bottom:15px;
margin-right:20px;
}

.cardImage {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
vertical-align:middle;
width:100%;
}

.figCont {
float:right;
padding-left:15px;
//padding-bottom:15px;
background-color:white;
position:sticky;
top:0;
}

.figBox {
width:25vw;
height:25vw;
//width:400px;
//height:400px;
}

.figflex {
height:100%;
width:100%;
display:flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.figCaption {
//width:25vw;
//height:50px;
//width:400px;
//height:50px;
//overflow:auto;
//flex-shrink:0;
padding:1em 0em 1em 0em;
text-align:center;
font-style:italic;
font-size:0.8em;
}

.ffc {
flex-basis:90%;
flex-grow:1;
min-width:0;
min-height:0;
}

.figure {
width:100%;
height:100%;
object-fit:contain;
}

#f2 {
padding-top: 1vh;
}

.figure:hover {
cursor:pointer;
}

.figBox:hover .hoverFig1 {
opacity:1;
}

.footnote {
font-size:0.8em;
}

.hoverFig1 {
pointer-events:none;
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
height:100%;
vertical-align:middle;
text-align:center;
margin:auto;
line-height:100vh;
opacity:0;
transition: .5s ease;
}

.hoverFig2 {
width:50%;
height:50%;
min-width:600px;
min-height:600px;
margin:auto;
display: inline-block;
vertical-align: middle;
line-height:normal;
background-color:#FFFFFF;
box-shadow: 0px 0px 25px 0 rgba(0,0,0,0.5);
}



.hoverFig2:hover {
cursor: pointer;
}

.hoverFig3 {
padding:2%;
width:100%;
height:100%;
object-fit:contain;
}

.galleryContainer {
position:relative;
margin-left:5%;
margin-right:5%;
margin-bottom:3%;
width:90%;
}

.galleryBox {
position:relative;
padding-bottom:75%;
background-color:#000000;
box-shadow: 8px 8px 16px 0 rgba(0,0,0,0.5);
}

.galleryImage {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
vertical-align:middle;
width:100%;
}

.galleryContentsContainer {
position:absolute;
bottom:0;
top:0;
left:0;
right:0;
white-space:nowrap;
text-align:center;
}

.galleryOverlay {
position:absolute;
bottom:0;
left:0;
right:0;
margin:auto;
vertical-align:middle;
text-align:center;
height:100px;
width:100%;
line-height:100px;
opacity:0;
transition: .5s ease;
background-color:#FFFFFF;
}

.galleryLeftArrowContainer{
position:absolute;
bottom:0;
left:0;
margin:auto;
vertical-align:middle;
text-align:center;
height:100%;
width:10%;
background-color:#dddd;
}

.galleryRightArrowContainer{
position:absolute;
bottom:0;
right:0;
margin:auto;
vertical-align:middle;
text-align:center;
height:100%;
width:10%;
background-color:#DDDDDD;
}

.galleryLeftOverlay{
float:left;
height:20px;
width:100%;
opacity:1;
transition: .5s ease;

}

.galleryRightOverlay{
float:right;
height:20px;
width:100%;
opacity:1;
transition: .5s ease;

}

.galleryText{
font-family:"Lucida Console", Helvetica, Arial, sans-serif;
display: inline-block;
vertical-align: middle;
line-height:normal;
}

.galleryBox:hover .galleryOverlay {
opacity:0.75;
}

.timeline {
min-height:100px;
width:100%;
margin:auto;
text-align:center;
}

.timelineSpacer {
display:inline-block;
margin:auto;
padding:10px;
height:90px;
width:150px;
}

.timelineBox {
float:left;
margin:auto;
box-shadow:4px 4px 8px 0 rgba(0,0,0,0.2);
height:100%;
width:100%;
font-family:"Lucida Console", Helvetica, Arial, sans-serif;
line-height:70px;
text-align:center;
background-color:#F6F6F6;
}

.altBox {
overflow:hidden;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:20px;
}

.slideBox {
position:relative;
display:inline-block;
height:auto;
}

.altContainer {
float:left;
}

.cvGalleryContainer {
position:relative;
margin:auto;
width:80%;
}

.cvImage {
width:100%;
box-shadow: 8px 8px 16px 0 rgba(0,0,0,0.5);
}

.imgOverlay {
position:absolute;
bottom:0;
left:0;
right:0;
margin:auto;
vertical-align:middle;
text-align:center;
height:100px;
width:100%;
line-height:100px;
opacity:0.75;
background-color:#FFFFFF;
}

.research {
padding-right:5px;
text-align:justify;
max-height:90vh;
overflow:auto;
}

.big {
font-size:1.5em;
}

.bigger {
font-size:2.5em;
}

.small {
font-size:0.9em;
}

.small2 {
font-size:0.8em;
}

.small3 {
font-size:0.7em;
}

.b {
font-weight:bold;
font-style:italic;
}

.italic {
font-style:italic;
}

.title {
font-weight:bold;
color:#0d696f;
}

.uf {
font-weight:bold;
color:#0d696f;
text-decoration:underline;
}

.link:hover {
cursor: pointer;
}

.hv {
color:#0d696f;
border-bottom: 1px dotted black;
}

.hv:hover {
cursor: pointer;
}

.noHighlight{
color:inherit;
text-decoration:none;
}

.vspacedText{
padding-top:0.25vh;
padding-bottom:0vh;
}

.expandedText{
/*position:relative;*/
display:inline-block;
border-bottom: 1px dotted black;
}

.expandedText:hover {
cursor: pointer;
}

.expandedText .revealedText{
visibility:hidden;
width:30vw;
text-align: left;
padding: 8px;
position: absolute;
z-index:1;
top:150%;
left:50%;
margin-left: -15vw;
background-color: white;
border-width: 1px;
border-style:solid;
border-color: black;
border-radius: 0.75vw;
}

.expandedText .revealedText::after{
content: "";
position:absolute;
bottom:100%;
left:50%;
margin-left:-5px;
border-width: 5px;
border-style:solid;
border-color: transparent transparent black transparent;
}

.expandedText:hover .revealedText{
visibility: visible;
}

.block{
display:block;
}

.centre{
text-align:center;
}

.paraStyle{
margin-top:1em;
}

.genebox:hover{
/*filter: url(#hover);*/
fill:#808080 !important;
}

.revealedBox{
visibility:hidden;
width:30vw;
text-align: left;
padding: 8px;
position: absolute;
z-index:1;
background-color: white;
border-width: 1px;
border-style:solid;
border-color: black;
border-radius: 0.75vw;
}


.revealedBox::after{
content: "";
position:absolute;
bottom:100%;
left:50%;
margin-left:-5px;
border-width: 5px;
border-style:solid;
border-color: transparent transparent black transparent;
}

.suspended {
pointer-events:none
}

.suspended .cardOverlay {
opacity:1;
}

@media only screen and (max-height:650px) {
.hoverFig2 {
	height:90%;
	min-height:0;
}
}

@media only screen and (max-width:800px) {
.socialbar{
	width: 100%;
	max-width: 100%;
}
.flex-container {
flex-direction:column;
}
.revealedBox {
width:85vw;
}
.avatarContainer{
min-width:150px;
max-width:300px;
width:50vw;
}

.avatarCanvas, .avatarOverlay{
min-width:150px;
max-width:300px;
width:50vw;
min-height:150px;
max-height:300px;
height:50vw;
}

.figBox:hover .hoverFig1 {
opacity:0;
}

.research {
max-height:none
}

.figCont, .figBox, #f, #c {
width:0;
height:0;
padding: 0px;
}

#c{
visibility:hidden;
}

.hoverFig2 {
width:80%;
height:80%;
min-width:0px;
min-height:0px;
}

}